Files
medicine_app/pages/course/myCourse.vue
2025-10-15 15:50:45 +08:00

963 lines
26 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="我的课程"></z-nav-bar>
<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="containerBg1">
<!-- 我的课程 -->
<view class="MyCourseBox" v-show="this.curTagId == 0">
<view class="search" style="margin-top: 20rpx;">
<u-search placeholder="请输入课程名" @focus="focus" @clear="clear" v-model="searchValue" @blur="blur"
@search="search" @custom="search"></u-search>
</view>
<view class="sectionTitle flexbox">
<view class="selectCateText" >
<view class="" >
<text v-if="selectCat == ''">已显示全部课程</text>
<text v-else>已选中分类{{selectCat}}</text>
<text class="del" @click="delselectCat" v-if="selectCat != ''">清除</text>
</view>
</view>
<view class="flexbox rightIcon" @click="showDrawer">
<u-icon name="grid" color="#2979ff" size="26" ></u-icon><text>按分类筛选</text>
</view>
</view>
<!-- <view class="containerBg"> -->
<view class="newBox">
<view :class="['item','flexbox', userMsg.vip != '0'&& item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in MyCourseList.list" :key="index"
>
<view class="vipTag" v-if="(userMsg.vip == '1' || userMsg.vip == '2') && item.isBuy != 1">
VIP畅学
</view>
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
<image v-if="item.image && item.image != ''" :src="item.image" mode="aspectFit"></image>
<!-- <image :src="item.image" mode="" @click="goDetail(item.productId)"></image> -->
<!-- <image v-else src="/static/nobg.jpg" mode="widthFix"></image> -->
</view>
<view class="buyItems">
<view class="txt555">
<view class="" @click="onPageJump('/pages/course/courseDetail',item.id)">
{{item.title}}
</view>
</view>
<view class="jianjie" v-html="item.content">
</view>
<view class="collection">
<!-- 收藏状态{{item.isStudying}} -->
<text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text>
<text class="del citem" v-else @click="delCollection(item,index)">取消在学习</text>
<text class="citem btn_box" @click="onPageJump('/pages/course/courseDetail',item.id)">去学习</text>
</view>
</view>
</view>
</view>
<u-divider v-show="MyCourseList.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="MyCourseList.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="MyCourseList.status == 1" text="加载中..."></u-divider>
</view>
<!-- 在学习 -->
<view class="LearningCourseBox" v-show="this.curTagId == 1">
<!-- <view class="containerBg"> -->
<view class="newBox">
<view :class="['item','flexbox', userMsg.vip != '0' && item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in LearningCourseList.list" :key="index"
>
<view class="vipTag" v-if="userMsg.vip != '0' && item.isBuy != 1">
VIP畅学
</view>
<!-- {{userMsg}} -->
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)">
{{item.title}}
</view>
<view class="jianjie" v-html="item.content">
</view>
<view class="collection">
<!-- <text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text> -->
<text class="del citem" @click="delCollection(item,index)">取消在学习</text>
<text class="citem btn_box" @click="onPageJump('/pages/course/courseDetail',item.id)">去学习</text>
</view>
</view>
</view>
</view>
<u-divider v-show="LearningCourseList.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="LearningCourseList.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="LearningCourseList.status == 1" text="加载中..."></u-divider>
</view>
<!-- 已过期 -->
<view class="ExpiredCourseBox" v-show="this.curTagId == 2">
<!-- <view class="containerBg"> -->
<view class="newBox">
<view class="item flexbox" v-for="(item, index) in ExpiredCourseList.list" :key="index"
>
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)">
{{item.title}}-{{item.catalogueTitle}}
</view>
<view class="jianjie" v-html="item.content" style="margin-bottom: 10rpx;">
</view>
<view class="btn_box" @click="xufei(item)" >
<text>续费课程</text>
</view>
</view>
</view>
</view>
<u-divider v-show="ExpiredCourseList.status == 2" text="已加载全部"></u-divider>
<u-divider v-show="ExpiredCourseList.status == 3" text="暂无数据"></u-divider>
<u-divider v-show="ExpiredCourseList.status == 1" text="加载中..."></u-divider>
</view>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<!-- </view> -->
<!-- 评论弹出 -->
<public-module></public-module>
<tree-list ref="treeList" v-if="treeListVisible" @clickCourseInfo="clickCourseInfo"></tree-list>
<buy-pup-fudu v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup-fudu>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</view>
</template>
<script>
// import musicPlay from '@/components/music.vue'
import buyPupFudu from '@/components/buyPupFudu.vue'
import treeList from '@/components/tagTree.vue'
import commentsList from '@/components/commentsList.vue'
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
proPriceList: [],
pricespop:false,
curTagId: 0,
playData: {},
searchValue:'',
selectCat:'', // 选中的分类名称
// fixed: false,
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
userMsg: {}, // 用户信息
scrollTop: 0,
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
scrollable: false,
pageTitle: null,
fixed: false,
medicalId:'',
tabList: [{
id: 1,
name: '我的课程'
}, {
id: 2,
name: '正在学习'
}, {
id: 3,
name: '已过期'
}], // 目录列表
curId: null,
curIndex: 0,
treeListVisible:false,
MyCourseList: {
list: [],
status: 88,
page: 1,
flag: false
},
LearningCourseList: {
list: [],
status: 88,
page: 1,
flag: false
},
ExpiredCourseList: {
list: [],
status: 88,
page: 1,
flag: false
},
oldValue : '',
cartList:[],
addLearnFlag:false,
userInfo:{}
};
},
//第一次加载
onLoad(e) {
this.userInfo=uni.getStorageSync("userInfo")||{}
// 隐藏原生的tabbar
uni.hideTabBar();
this.windowWidth = uni.getSystemInfoSync().windowWidth;
// this.pageTitle = e.title
console.log(e, '传入分类id')
this.getUserInfo()
// this.fatherClick()
this.getMyCourseList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
},
onPullDownRefresh() {
this.selectCat = ''
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
this.getLearningCourseList()
this.getExpiredCourseList()
uni.stopPullDownRefresh()
},
computed: {
// ...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
// #ifdef APP-PLUS
plus.screen.unlockOrientation();
plus.screen.lockOrientation("portrait-primary");
// #endif
},
onReachBottom() {
console.log('触底');
if (this.curTagId == 0) {
if(this.MyCourseList.status != 2){
if(!this.MyCourseList.flag){
this.MyCourseList.page++
this.getMyCourseList()
}
}
}
},
components: {
// musicPlay
emotion,
treeList,
buyPupFudu
// commentsList
},
//方法
methods: {
oprate(data){
console.log(data,'得到的内容')
if(data.name == 'buy'){
this.buy(data.item,data.index)
}else if(data.name == 'gouwuche'){
this.addCart(data.item)
}
},
// 购物车
addCart(val){
console.log(val)
if (val.productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none"
});
} else {
console.log(this.userInfo, '222')
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
// console.log(
this.cartList = res.cartList
this.isAddLink(val)
}).catch( e => {
console.log(e,'e')
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
})
}
},
// 加入购物车
isAddLink(item) {
// 统计商品信息
let data = {
"userId": this.userInfo.id,
"productId": item.productId,
"productAmount": 1,
"price": item.activityPrice && item.activityPrice != 0 ? item.activityPrice : item.price
}
// 判断列表是否为空
if (this.cartList.length > 0) {
let flag = ''
let shagnpin = {}
// 循环购物车列表
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount += 1
return true
}
})
if (flag) {
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.upoShow = false
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
}).catch( e => {
console.log(e,'e')
uni.showToast({
title:`加入失败`,
icon:'error'
})
})
} else {
// 加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.upoShow = false
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
}).catch( e => {
console.log(e,'e')
uni.showToast({
title:`加入失败`,
icon:'error'
})
})
}
} else {
// 购物车列表为空时直接加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
}).catch( e => {
console.log(e,'e')
uni.showToast({
title:`加入失败`,
icon:'error'
})
})
}
},
// 直接购买
buy(val,index){
var mynavData = JSON.stringify({
        goods: [
          {
            productImages: val.productImages,
            productId: val.productId,
            productName: val.productName,
            price: val.activityPrice && val.activityPrice != 0 ? val.activityPrice:val.price,
            goodsType: val.goodsType,
          },
        ],
isFudu: true,
fuduId: val.catalogueId,
        navTitle: val.productName,
        title: val.productName,
        typeId: 0,
      }); // 这里转换成 字符串
      uni.navigateTo({
        url: `/pages/goods/order/index?data=${mynavData}`,
      });
},
closePup(e){
this.pricespop = false
},
delselectCat(){
this.selectCat = ''
this.medicalId = ''
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
},
search(res){
// console.log('点了搜索')
if(!this.MyCourseList.flag){
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
console.log(this.searchValue,'searchValue')
}else{
console.log('存在未执行完的程序')
}
},
focus(res){
this.oldValue = res
// console.log(res,this.oldValue,'聚焦');
},
blur(res){
// console.log(res,this.searchValue,'res');
if(this.oldValue != res){ // 重新请求
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
this.oldValue = ''
}
},
clear(){
// console.log('++++++++++++++++++++++')
this.searchValue = ''
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
},
clickCourseInfo(val){
console.log(val,'选择的分类数据');
if(val && val.id){
this.medicalId = val.id
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.selectCat = val.title
this.getMyCourseList()
}
},
fatherClick(e) {
console.log(e,'tabitem')
this.curTagId = e.index
},
showDrawer(){
this.treeListVisible = true
this.$nextTick( ()=> {
this.$refs['treeList'].getData()
})
},
getMyCourseList() {
this.MyCourseList.status = 1
// if (this.MyCourseList.flag) {
// console.log('正在执行,未完成')
// return
// }
var data = {
"limit": 10,
"title": this.searchValue,
"medicalId": this.medicalId,
"page": this.MyCourseList.page
}
console.log('搜索的内容',data);
this.MyCourseList.flag = true
$http.request({
url: "medical/course/getUserCourseBuy",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.courseList.records.length > 0) {
var list = res.courseList.records
this.MyCourseList.list = this.MyCourseList.list.concat(list)
if (res.courseList.pages > this.MyCourseList.page) {
this.MyCourseList.status = 0
} else {
this.MyCourseList.status = 2
}
} else {
this.MyCourseList.status = 3 // 暂无数据
}
// console.log('status--------------------', this.MyCourseList.list)
}
this.MyCourseList.flag = false
}).catch(e => {
this.MyCourseList.flag = false
this.MyCourseList.status = 3
console.log(e, '数据报错')
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
getLearningCourseList() {
this.LearningCourseList.status = 1
// this.LearningCourseList.flag = true
$http.request({
url: "medical/course/getUserCourseStudying",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userMsg.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.courseList.length > 0) {
this.LearningCourseList.list = res.courseList
// if (res.courseList.pages > this.LearningCourseList.page) {
// this.LearningCourseList.status = 0
// } else {
this.LearningCourseList.status = 2
// }
} else {
this.LearningCourseList.list = []
this.LearningCourseList.status = 3 // 暂无数据
}
// console.log('status我刷新了', this.LearningCourseList)
}
// this.LearningCourseList.flag = false
}).catch(e => {
console.log(e, '数据报错')
this.LearningCourseList.status = 3 // 暂无数据
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
getExpiredCourseList() {
this.ExpiredCourseList.status = 1
// if (this.ExpiredCourseList.flag) {
// console.log('正在执行,未完成')
// return
// }
// this.ExpiredCourseList.flag = true
$http.request({
url: "medical/course/getCourseExpire",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userMsg.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0 && res.courseList != null) {
if (res.courseList.length > 0) {
this.ExpiredCourseList.list = res.courseList
// if (res.courseList.pages > this.ExpiredCourseList.page) {
// this.ExpiredCourseList.status = 0
// } else {
this.ExpiredCourseList.status = 2
// }
} else {
this.ExpiredCourseList.status = 3 // 暂无数据
}
console.log('status-------------------', this.ExpiredCourseList.status)
}else{
this.ExpiredCourseList.status = 3 // 暂无数据
}
// this.ExpiredCourseList.flag = false
}).catch(e => {
console.log(e, '数据报错')
this.ExpiredCourseList.status = 3
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
console.log(uni.getStorageSync("userInfo"),'this.userInfo.idthis.userInfo.idthis.userInfo.idthis.userInfo.idthis.userInfo.id')
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMsg = res.user
// this.userInfo = res.user
this.getLearningCourseList()
this.getExpiredCourseList()
});
// }
},
addCollection(val,index){
if(this.addLearnFlag){
uni.showToast({
title:'请勿频繁操作哦',
icon:'none'
})
return
}
this.addLearnFlag = true
$http.request({
url: "medical/course/addUserCourseStudying",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"courseId": val.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
this.addLearnFlag = false
if(res.code == 0){
uni.showToast({
title:'加入成功',
icon:'success'
})
if(this.curTagId == 0){
console.log(this.MyCourseList.list[index],'this.MyCourseList[index]')
this.MyCourseList.list[index].isStudying = 1
this.getLearningCourseList() // 刷新收藏列表
}
}
})
.catch(e => {
this.addLearnFlag = false
console.log('加入在学习', e)
uni.showToast({
title:'加入失败',
icon:'error'
})
})
},
delCollection(val, index){
console.log('val++++++++', val.id);
$http.request({
url: "medical/course/delUserCourseStudying",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
// "userId": this.userInfo.id,
"courseId": val.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if(res.code == 0){
uni.showToast({
title:'取消成功',
icon:'success'
})
if(this.curTagId == 0){
console.log(this.MyCourseList.list[index],'this.MyCourseList[index]')
this.MyCourseList.list[index].isStudying = 0
setTimeout(() => {
this.getLearningCourseList() // 刷新收藏列表
},500)
}else if(this.curTagId == 1){
this.LearningCourseList.list.splice(index,1)
setTimeout(() => {
this.MyCourseList.page = 1
this.MyCourseList.list = []
this.getMyCourseList()
},500)
}
}
})
.catch(e => {
console.log('取消收藏报错', e)
uni.showToast({
title:'取消失败',
icon:'error'
})
})
},
xufei(val){
// console.log('去续费,获取商品列表')
$http.request({
url: "common/courseRelearn/relearnShopProductList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"catalogueId": val.catalogueId
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.productList.length > 0) {
this.proPriceList = res.productList.map((e)=>{return {...e,catalogueId:val.catalogueId}})
// this.curProId = this.proPriceList[0].productId
this.pricespop = true
} else {
this.proPriceList = []
uni.showToast({
title:'课程未绑定商品',
icon:'none'
})
}
}
}).catch(e => {
console.log(e, '获取商品列表报错')
uni.showToast({
title:'获取商品失败',
icon:'none'
})
});
},
// 跳转
onPageJump(url, id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.LearningCourseBox,.ExpiredCourseBox{margin-top: 20rpx;}
.collection{ margin-top: 20rpx; overflow: hidden; text-align: right;
.btn_box{border: 1px solid $themeColor !important; color:$themeColor !important; margin-left: 20rpx;}
.citem{ display: inline-block;
border-radius: 10rpx;
// background-color: #ff7446;
border: 1px solid #ff7446;
padding: 10rpx; font-size:24rpx;
color: #ff7446;
}
.del{
background-color: #ffe6db; color: #ff7446;
}
}
.sectionTitle{ margin: 20rpx 0;
justify-content: space-between; margin-bottom: 20rpx; margin-top: 20rpx;
.rightIcon{color:#2979ff ; align-items: center; font-size: 26rpx;}
}
.selectCateText{ min-width:20rpx ; font-size: 26rpx;
.del{color: #ff7446; padding-left: 20rpx;}
}
.search{background-color: $containerColor; padding: 10rpx; }
.containerBg1{padding:0 10px;}
.containerBg {
background-color: $containerColor;
padding: 0 20rpx;
}
.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
.fixed {
position: fixed;
z-index: 2; width: 100%; background-color: #fff;
}
.newBox {
.blueBorder{border: 1px solid #2979ff !important;}
.item { overflow: hidden;
border: #fff 1px solid ;
.vipTag{position: absolute; padding:10rpx 100rpx; font-size: 26rpx;
left: -100rpx; top: 20rpx;
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
z-index: 1;
@include theme("btn_bg") ;
color: #fff;}
position: relative;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1) .imgcontainer {
display: block;
width: 110rpx;
margin-right: 20rpx;
// background-size: cover;
// background-position: center;
height: 200rpx;
flex-grow: 1;
// @include ptop_bottm(10px);
overflow: hidden;
// @include pleft_right(10px);
image {
width: 100%;
height: 200rpx;
}
}
.btn_box{ text-align: right;
text{
border-radius: 20rpx;
padding: 3px 5px; @include theme("btn_bg");
font-size: 28rpx; color: #fff;
}
}
.buyItems {
width: 60%;
}
.jianjie {
overflow: hidden;
margin-top: 10rpx;
font-size: 24rpx;
@include bov();
color: #9c9c9c;
line-height: 30rpx; height: 60rpx;
}
.txt555 {
font-size: 30rpx;
color: #000;
@include bov()
}
}
}
.subCate {
padding-top:10px;
padding-bottom: 10px;
.item {
font-size: 26rpx;
background-color: #fff;
border-radius: 10px;
color: #333;
margin-right: 16rpx;
padding: 14rpx 30rpx;
}
.item:last-child() {
margin-right: 0;
}
.item.active {
background-color: $themeColor;
color: #fff;
}
}
.tabList {
text-align: center;
}
.flexbox {
display: flex;
}
.imgcontainer {
background-color: $imgBg;
}
.box {
// background-color: #fff;
min-height: calc(100vh - 270rpx);
}
.learnBox {
// background-color: #fff;
margin-top: 10px;
.learn {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 48%;
margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 {
display: block;
text-align: center;
height: 40rpx;
width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
</style>