<template>
	<view class="container">
		<view class="homeHeader">
			<view class="top">
				<view class="one">
					<search
					   ref="searchRef"
						:isSearch="1" 
						:userId="userId"
						:initialQuery.sync="searchQuery"
						@send="getCourseList"
						v-if="showSearch"
					></search>
				</view>
				<view class="two">
					<text class="iconfont icon-gongsi" @click="getIntroduce('center')"></text> 
				</view>
			</view>
			<view class="bottom">
				<view class="content">
					<view class="featureContent">
						<view class="nav_wrapper">
							<view class="nav_content" v-for="featureItem in featureLists" :key="featureItem.key"
								@click="featureSelect(featureItem)">
								<view class="imgbox">
									<view class="iconfont iconSize" :class="`${featureItem.icon}`"></view>
								</view>
								<view style="font-size: 26rpx;color: #fff;">{{featureItem.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="carouselBox">
			<view class="swiperBox">
				<swiper
					style="height:250rpx;"
					circular 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000"
					:duration="1000"
				>
					<swiper-item v-for="(bannerItem,index) in cffpUserInfo.fileUploadItemList" :key="index">
						<view class="swiperItemBox">
							<view class="swiperBtn" @click="jumpUrl(bannerItem.destinationAddress)">
								立即查看
							</view>
							<image class="swiperImg" :src="bannerItem.filePath" mode="widthFix" ></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</view> -->
		<!-- 产品区域 -->
		<view class="productBox">
			<view class="productTitle">
				<view class="titleTxt">
					<text style="font-size: 30rpx;font-weight: 500;">推荐产品</text>
					<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
				</view>
			</view>
			<view class="productList" v-if="cffpCourseInfos.length>0">
			  <view class="productListBox">
			    <view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
			      <view class="top">
			        <image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
			        <view class="productDesBox">
			          {{item.fileSynopsis}}
			        </view>
			      </view>
			      <view class="bottom" style="text-align: left !important;">
			        <view class="one">
			          {{item.fileTitle}}
			        </view>
			        <view class="two">
			          <text class="price" style="">￥{{item.coursePrice}}</text>
			          <text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
			<view class="productEmpty" v-else>
				暂无数据
			</view>
		</view>
		<uni-popup ref="joinPopup" type="center" background-color="#fff">
			<view class="joinContent">
				<view class="joinHeader">
					<view class="iconfont icon-hezuo" style="font-size: 35rpx;color: #fff;"></view>
				</view>
				<view class="joinCon">
					<view class="one">
						您还未加盟为合伙人
					</view>
					<view class="two">
						成为合伙人后，分享商品，好友购物得收益
					</view>
				</view>
				<view class="joinFotter" @click="gotoApply">
					去加盟拿收益
				</view>
			</view>
		</uni-popup>
		<!-- 以前的代码 -->
		<view class="top">
			<!-- <view class="compony">
				<image src="@/static/logo1.png" mode="widthFix" style="width: 120rpx !important;"></image>
				<text class="name">{{cffpUserInfo.name}}</text>
				<text class="iconfont icon-31tishi" @click="getIntroduce('center')"></text>
			</view> -->
			<!-- <search
			   ref="searchRef"
				:isSearch="0" 
				:userId="userId"
				:initialQuery.sync="searchQuery"
				v-if="showSearch"
				
			></search> -->
			<!--轮播组件-->
			<!-- <view class="banner" style="overflow: none;">
				<view class="uni-margin-wrap">
					<carousel :carouselList="cffpUserInfo.fileUploadItemList" ></carousel>
				</view>
			</view> -->
		</view>
		<!-- <view class="message" @click="jumpToAnnouncement()">
			<view style="display: flex;align-items: center;">
				<text class="iconfont icon-gonggao"></text>
				<text style="font-size: 27rpx;">{{announcementInfo}}</text>
			</view>
			<text class="iconfont icon-youjiantou iconStyle"></text>
		</view> -->
		<!-- <view class="content">
			<view class="featureContent">
				<view class="nav_wrapper">
					<view class="nav_content" v-for="featureItem in featureLists" :key="featureItem.key"
						@click="featureSelect(featureItem)">
						<view class="imgbox">
							<view class="iconfont iconSize" :class="`${featureItem.icon}`"></view>
						</view>
						<view style="font-size: 26rpx;">{{featureItem.name}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="course_content">
			<view class="tag">
				<h4>推荐产品</h4>
				<view @click="goToCourselist()" style="font-size: 30rpx;">更多<text class="iconfont icon-youjiantou iconStyle"></text></view>
			</view>
			<view class="ulBox" v-if="cffpCourseInfos.length>0">
				<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
					<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle"
						:summaryBox="item.fileSynopsis"
						:dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}"
						></course-item>
				</view>
			</view>
		</view> -->
		<!-- <view class="" style="text-align: center;color: #666666;font-size: 24rpx;margin-top: 20rpx;">
			由{{companyFullName}}提供
		</view> -->
		<!-- <tabBar :currentPage="currentPage"></tabBar> -->
	</view>
	<uni-popup ref="popup" type="top" background-color="#fff">
		<view class="descriptionBox">
			<view class="popupClose">
				<text class="iconfont icon-guanbi" @click="$refs.popup.close()"></text> 
			</view>
			<view class="imageBox">
				<image src="@/static/logo2.png" mode="widthFix" style="width: 120rpx !important;"></image>
			</view>
			<view class="description">
				{{cffpUserInfo.description}}
			</view>
		</view>
		
	</uni-popup>
</template>

<script>
	import courselist from '@/pages/courselist/courselist.vue';
	import api from "../../api/api";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import carousel from '@/components/carousel/carousel.vue';
	import search from '@/components/search/search.vue';
	import courseItem from "@/components/courseItem/courseItem.vue";
	import {companyInfo} from "@/environments/environment";
	
	export default {
		data() {
			return {
				 showSearch: true,
				searchQuery: '',
				companyFullName : companyInfo.companyFullName,
				cffpCourseInfos: [],
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				featureLists: [{
						key: '00',
						name: '成交订单',
						icon:'icon-dingdan',
						link: '/pages/saleCourseLists/saleCourseLists',
						isOpen: true,
						enName:'order'
					},
					{
						key: '01',
						name: '佣金',
						icon: 'icon-yongjin',
						link: '/pages/pointsExchange/pointsExchange',
						isOpen: true,
						isJoin: true
					},
					{
						key: '02',
						name: '申请加盟',
						icon: 'icon-hezuo',
						link: '/pages/application-process/basic-info',
						isOpen: true
					},
					// {
					// 	key: '03',
					// 	name: '学习认证',
					// 	icon: 'learningCertify',
					// 	link: '/pages/learnCertify/learnCertify',
					// 	isOpen: true
					// },
					{
						key: '04',
						name: '邀请加盟',
						icon: 'icon-yaoqing',
						link: '/pages/inviteJoin/inviteJoin',
						isOpen: true,
						isJoin: true
					},
					// {
					// 	key: '05',
					// 	name: '我的分享',
					// 	icon: 'share',
					// 	link: '/pages/myShare/myShare',
					// 	isOpen: true
					// },
					// {
					// 	key: '06',
					// 	name: '我的团队',
					// 	icon: 'team',
					// 	link: '/pages/personalCenter/myTeam',
					// 	isOpen: true
					// },
					// {
					// 	key: '07',
					// 	name: '更多功能',
					// 	icon: 'more',
					// 	link: '/pages/personalCenter/personalCenter',
					// 	isOpen: true
					// }
				],
				cffpUserInfo: {
					address: '',
					description: '',
					fileUploadItemList: [],
					logo: '',
					name: '',
					type: '' //类型1,区域中心，2工作室
				},
				announcementInfo: null,
				tagIds: 123,
				currentPage: 'index',
				carouselList: [],
				userId: uni.getStorageSync('cffp_userId'),
				shareId: null,
				kefu: '../../static/kefu.png',
				loginornot: true,
				queryName: '',
			}
		},
		components: {
			courselist,
			tabBar,
			carousel,
			search,
			courseItem
		},
		
		onShow() {
			this.init();
			this.showSearch = false;
			  this.$nextTick(() => {
			    this.showSearch = true;
			    this.searchQuery = '';
			  });
			 
		},
		onLoad(options) {
			if(options.clearFlag){
				uni.setStorageSync('loginType', 'visitor');
			}
			
			//如果用户在其他的地方快捷登录,没有返回到首页,执行此监听方法
			uni.$on('loginUpdate',()=>{
				this.queryAreaCenterInfo();
			})
			
			if (uni.getStorageSync('isLogin')) {
				this.announcementQuery();
				this.courseList();
			}
		},
		
		beforeDestroy() {
		  // 清除事件监听
		  uni.$off('loginUpdate', this.queryAreaCenterInfo);
		},
		methods: {
			gotoApply(){
				uni.navigateTo({
						url: '/pages/application-process/basic-info'
					})
				this.$refs.joinPopup.close()
				
			},
			 jumpUrl(url) {
			 	if (!url) {
			 		return false
			 	} else {
			 		const match = url.match(/fileId=([^&]*)/);
			 		const fileId = match ? match[1] : null;
			 		uni.navigateTo({
			 				url: `/pages/courseDetail/courseDetail?fileId=${fileId}`
			 			})
			 	}
			 },
			init() {
				let loginType = uni.getStorageSync('loginType')
				if(loginType == 'codelogin'){
					 this.querySystemMessage()
				}else {
					uni.removeTabBarBadge({ index: 3 });
				}
				if (uni.getStorageSync('isLogin')) {
					
					if (loginType == "visitor") {
						this.loginornot = false
					}else{
						this.loginornot = true;
					}
					this.queryAreaCenterInfo();
				} else {
					api.loginVerification({
						"loginType": 1
					}).then((res) => {
						if (res['success']) {
							this.userId = String(res['data']['userId']);
							uni.setStorageSync('isLogin', '1');
							uni.setStorageSync('cffp_userId', this.userId);
							uni.setStorageSync('loginType', 'visitor');
							uni.setStorageSync('uni-token', res.data['token']);
							this.loginornot = false;
							this.queryAreaCenterInfo();
							this.announcementQuery();
							this.courseList();
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
						}
					})
				}
			},
			querySystemMessage() {
			   api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then(res => {
			     if (res['success']&& res['data']['dataList'].length>0) {
			       
				 let total =  res['data']['dataList'].filter(item=>{
					 
					  return item.isRead == 0
				   })
				   if(total.length>0){
					   console.log('index',total.length);
					  uni.setTabBarBadge({
					         index: 3,
					         text: total.length.toString()
					       }); 
				   }else {
					uni.removeTabBarBadge({ index: 3 });
				  }
				   
			     }else {
					 uni.removeTabBarBadge({ index: 3 });
				 }
			   });
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				});
			},
			getCourseList(res){
				console.log('res',res);
				 this.queryName = res;
				 this.courseList()
			},
			courseList() {
				const param = {
					queryName: this.queryName
				}
				api.courseList(param).then(res => {
					if (res['success']) {
						this.cffpCourseInfos = res['data']['data'];
						if(this.cffpCourseInfos.length>0){
							this.cffpCourseInfos.forEach(item=>{
								item.coursePrice =Number(item.coursePrice).toFixed(2) || '0.00'
							})
						}
					}
				})
			},
			tokefu() {
				let url = 'http://q.url.cn/abkzV9?_type=wpa&qidian=true' // URL是要跳转的外部地址 作为参数
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/components/webview?url=' + url
					// page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
				// #endif
				// #ifdef H5
				window.location.href = url;
				// #endif
			},
			featureSelect(featureItem) {
				if (this.loginornot == false && featureItem.name != "学习认证" && featureItem.name != "更多功能") {
					uni.showToast({
						title: "请登陆个人账户使用该功能",
						duration: 2000,
						icon: 'none'
					});
					uni.clearStorageSync();
					uni.navigateTo({
						url: '/components/login/login?from=index'
					})
					return false
				}
				if (featureItem.key == '02') {
					if (this.cffpUserInfo.levelCode == 'C1' || this.cffpUserInfo.levelCode == 'C2' || this.cffpUserInfo
						.levelCode == 'C3') {
						uni.showToast({
							title: "您已是区域服务中心，无需申请加盟",
							duration: 2000,
							icon: 'none'
						});
						return false
					}
				}
				if (this.cffpUserInfo.partnerType == null && featureItem.isJoin) {
					this.$refs.joinPopup.open()
					
					return false
				} else if (featureItem.isOpen && featureItem.link) {
					if (featureItem.key == '07') {
						uni.switchTab({
							url: featureItem.link
						})
					} else {
						const urlObj = JSON.parse(JSON.stringify(featureItem))
						urlObj.link =urlObj.enName=='order'? `${urlObj.link}?partnerType=${this.cffpUserInfo.partnerType}`:urlObj.link
						uni.navigateTo({
							url: urlObj.link
						})
					}
				} else {
					uni.showToast({
						title: '此功能暂未开放，敬请期待。',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			queryAreaCenterInfo() {
				api.queryAreaCenterInfo({
					userId: uni.getStorageSync('cffp_userId'),
					companyType: `${companyInfo.companyType}`
				}).then((res) => {
					if (res['success']) {
						this.cffpUserInfo = res['data'];
						// this.cffpUserInfo.logo = res['logo'];
						uni.setStorageSync('fileUploadItemCFFPList', this.cffpUserInfo['fileUploadItemCFFPList'])
						const cffp_userInfo = {
							name: this.cffpUserInfo['userReName'],
							mobile: this.cffpUserInfo['mobile']
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo))
					}
				})
			},
			announcementQuery() {
				api.announcementQuery({
					announcementTypeId: 686
				}).then((res) => {
					this.announcementInfo = res['data']['announcementInfoList'] ? res['data'][
						'announcementInfoList'
					][0]['title'] : `${companyInfo.companyFullName}`+'公告'
				})
			},
			getIntroduce(type) {
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			jumpToAnnouncement() {
				uni.navigateTo({
					url: `../announcement/announcement`
				})
			},
			goToCourselist() {
				uni.switchTab({
					url: '../../pages/courselist/courselist'
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
	.container {
		height: auto;
		overflow-y: auto; /* 关键属性 */
		-webkit-overflow-scrolling: touch; /* 优化移动端滚动 */
		background-color: rgba(235, 239, 247, 1);
		.homeHeader{
			box-sizing: border-box;
			width: 100%;
			background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			padding: 15rpx 30rpx;
			.top{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.one{
					width: 80%;
				}
				.two{
					.icon-gongsi{
						font-size: 40rpx;
						color: #fff;
					}
				}
			}
			.bottom{
				.content {
					
					overflow: hidden;
					position: relative;
					.featureContent {
						box-sizing: border-box;
						padding: 30rpx 0;
						.nav_wrapper {
							display: flex;
							align-items: center;
							justify-content: space-around;
							flex-wrap: wrap;
							width: 100%;
							box-sizing: border-box;
							.nav_content {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								flex: 0 0 20%;
								font-size: 14px;
								color: rgba(51, 51, 51, 1);
								image {
									max-width: 80%;
								}
								.imgbox{
									margin-bottom: 10rpx;
									.iconSize{
										font-size: 40rpx;
										color: #fff;
									}
								}
							}
						}
					}
				}
			}
		}
		.carouselBox{
			width: 100%;
			background-color: #fff;
			padding: 15rpx;
			box-sizing: border-box;
			overflow: hidden;
			.swiperBox{
				.swiperItemBox{
					position: relative;
					.swiperBtn{
						position: absolute;
						left: 10%;
						bottom: 20%;
						padding: 15rpx 30rpx;
						border-radius: 50rpx;
						z-index: 2;
						color: #fff;
						font-size: 26rpx;
						background: linear-gradient(180deg, rgba(111, 156, 255, 1) 0%, rgba(34, 96, 251, 1) 100%);
					}
					.swiperImg{
						width: 100%;
						height: 100%;
						border-radius: 50rpx;
					}
				}
				
			}
		}
		.productBox {
		  background-color: #fff;
		  margin-top: 15rpx;
		  box-sizing: border-box;
		  margin-bottom: 100rpx;
		  
		  .productTitle {
		    border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		    padding-bottom: 10rpx;
		    
		    .titleTxt {
		      padding: 15rpx 30rpx;
		      display: flex;
		      justify-content: space-between;
		      align-items: center;		
		    }
		    
		    .more {
		      font-size: 26rpx;
		      color: rgba(84, 84, 84, 1);
		      
		      .icon-youjiantou {
		        font-size: 26rpx;
		      }
		    }
		  }
		  
		  .productList {
		    width: 100%;
		    box-sizing: border-box;
		    
		    .productListBox {
		      padding: 30rpx;
		      display: grid;
		      /* 默认两列，固定宽度 */
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		      justify-content: center;
		      
		      .productListItem {
		        width: 100%;
		        max-width: 350rpx; /* 设置最大宽度 */
		        display: flex;
		        flex-direction: column;
		        overflow: hidden;
		        box-sizing: border-box;
		        margin: 0 auto; /* 居中显示 */
		        
		        .top {
		          width: 100%;
		          position: relative;
		          border-radius: 20rpx;
		          overflow: hidden;
		          
		          /* 确保图片容器有固定宽高比 */
		          &::before {
		            content: "";
		            display: block;
		            padding-top: 100%; /* 1:1 宽高比 */
		          }
		          
		          .productImg {
		            position: absolute;
		            top: 0;
		            left: 0;
		            width: 100%;
		            height: 100%;
		            object-fit: cover;
		            display: block;
		          }
		          
		          .productDesBox {
					  box-sizing: border-box;
		            position: absolute;
		            left: 0;
		            bottom: 0;
		            width: 100%;
		            padding: 0  15rpx;
		            box-sizing: border-box;
		            background: rgba(0, 0, 0, 0.1);
		            border-radius: 0 0 20rpx 20rpx;
		            font-size: 24rpx;
		            color: #fff;
		            display: -webkit-box;
		            -webkit-line-clamp: 2;
		            -webkit-box-orient: vertical;
		            overflow: hidden;
		            text-overflow: ellipsis;
		            /* 关键修改：添加精确的高度计算 */
		            max-height: calc(2 * 1.4 * 24rpx); /* 2行 × 行高 × 字体大小 */
		            line-height: 1.5;
		            /* 确保在Firefox等浏览器也有效 */
		            display: -moz-box;
		            -moz-box-orient: vertical;
		            -moz-line-clamp: 2;
		          }
		        }
		        
		        .bottom {
		          width: 100%;
		          box-sizing: border-box;
		          padding: 10rpx 0;
		          
		          .one {
		            font-size: 27rpx;
		            margin-bottom: 5rpx;
		            display: -webkit-box;
		            -webkit-line-clamp: 1;
		            -webkit-box-orient: vertical;
		            overflow: hidden;
		            text-overflow: ellipsis;
		            white-space: nowrap;
		          }
		          
		          .two {
		            display: flex;
		            justify-content: space-between;
		            align-items: center;
		            
		            .price {
		              font-size: 28rpx;
		              color: rgba(32, 39, 155, 1);
		            }
		            
		            .num {
		              font-size: 24rpx;
		              color: rgba(166, 166, 166, 1);
		            }
		          }
		        }
		      }
		    }
		  }
		  
		  /* iPad竖屏和小屏幕平板 */
		  @media (min-width: 768px) and (max-width: 1023px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  /* iPad横屏和大屏幕平板 */
		  @media (min-width: 1024px) and (max-width: 1279px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  /* 电脑端 */
		  @media (min-width: 1280px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  .productEmpty {
		    color: rgba(166, 166, 166, 1);
		    width: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    padding: 30rpx 0;
		    font-size: 28rpx;
		  }
		}
		.joinContent{
			width: 500rpx;
			// height: 300rpx;
			border-radius: 30rpx;
			background-color: #ffff;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;
			.joinHeader{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(54, 57, 169, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}
			.joinCon{
				// padding: 20rpx 0;
				.one{
					font-size: 30rpx;
					color: rgba(38, 41, 44, 1);
					font-weight: 600;
					text-align: center;
				}
				.two{
					color: rgba(145, 144, 148, 1);
					font-size: 26rpx;
					text-align: center;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
			}
			.joinFotter{
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 10rpx 0;
				background: rgba(54, 57, 169, 1);
				border-radius: 60rpx;
				font-size: 28rpx;
			}
		}
		

		.message {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			background-color: #fff;
			padding: 20rpx;
			justify-content: space-between;
			box-sizing: border-box;
			border-radius: 10rpx;
			.icon-gonggao {
				font-size: 60rpx;
				color: #20279b;
				margin-right: 20rpx;
			}

			.msg {
				color: red;
			}
		}

		// .content {
		// 	margin-bottom: 20rpx;
		// 	overflow: hidden;
		// 	background: #fff;
		// 	position: relative;

		// 	.featureContent {
		// 		box-sizing: border-box;
		// 		padding: 30rpx 0;
		// 		.nav_wrapper {
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: space-around;
		// 			flex-wrap: wrap;
		// 			width: 100%;
		// 			box-sizing: border-box;
		// 			// padding: 10rpx;
		// 			.nav_content {
		// 				display: flex;
		// 				flex-direction: column;
		// 				align-items: center;
		// 				justify-content: center;
		// 				flex: 0 0 20%;
		// 				font-size: 14px;
		// 				color: rgba(51, 51, 51, 1);
		// 				// margin: 10px 2%;

		// 				image {
		// 					max-width: 80%;
		// 				}
		// 				.imgbox{
		// 					margin-bottom: 10rpx;
		// 					.iconSize{
		// 						font-size: 40rpx;
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// }

		.course_content {
			position: relative;
			padding-bottom: 30rpx;
			// background-color: pink;
			.tag {
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				position: relative;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				h4 {
					margin-left: 20rpx;
					font-size: 32rpx;
				}
			}

			.tag:before {
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				display: inline-block;
				content: '';
				width: 2px;
				height: 32rpx;
				background-color:  #20279b;
				border-radius: 2px;
			}
		}
	}
	.descriptionBox {
		width: 550rpx;
		padding: 40rpx;
		.popupClose{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.icon-guanbi{
				font-size: 28rpx;
				
			}
		}
		.imageBox{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}
		.description{
			color: rgba(56, 56, 56, 1);
			font-size: 26rpx;
			line-height: 1.5;
		}
	}
	.ulBox {
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
	}

	.liBox {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
		width: 100%;
	}

	
</style>