saas_miniprogram/pages/index/index.vue

<template>
	<view class="index">
		<nav-logo :isShowLogo="true"></nav-logo>
		<view class="header_box">
			<u-swiper :list="list" :autoplay="autoplay" :interval="interval" :duration="duration" :height="swiperHeight"
				img-mode="scaleToFill" @click="swiperClick"></u-swiper>
			<view class="getStudy" v-if="other.tagH5 == 1">
				<view class="left">
					<img src="@/static/modIcon/plan.png" alt="">
					<text>获取定制学习规划</text>
				</view>
				<view class="btn" @click="tabListFunc({type:2,url:'/pages5/counselor/index'})">
					立即获取
				</view>
			</view>
			<view class="jumpList" v-if="other.entranceH5 == 1">
				<view class="list_li" v-for="(item,index) in jumpList" :key="index" @click="tabListFunc(item)">
					<img :src="item.imgName" alt="">
					<text>{{item.label}}</text>
				</view>
			</view>
		</view>
		<view class="content" v-if="!hideBuyState && other.courseH5 == 1 && recommendCourse.length > 0">
			<view class="header_top">
				<text class="left">推荐课程</text>
				<u-tabs class="u-tabs" :list="recommendCourse" :current="currentCourse" bg-color="transparent"
					:show-bar="false" :height="50" @change="changeCurren($event,'currentCourse')"></u-tabs>
				<text class="right" @click="jumpPage(0)">更多></text>
			</view>
			<view class="noGoods" v-if="recommendCourse[currentCourse].goodsList.length == 0">
				<img src="https://file.xyyxt.net/web/static/img/no-content.png" alt="">
				<view class="">
					暂无数据
				</view>
			</view>
			<view class="content_box" v-for="(item,index) in filterNum(recommendCourse[currentCourse].goodsList)"
				:key="index" @click="tobuy(item)">
				<view class="title">
					{{item.goodsName}}
				</view>
				<view class="f_x">
					<view class="img_goods">
						<img :src="$method.splitImgHost(item.coverUrl)" alt="">
					</view>
					<view class="content_goods">
						<view class="top_bus">
							<text>{{recommendCourse[currentCourse].educationName}}</text>
							<text>{{recommendCourse[currentCourse].aliasName}}</text>
						</view>
						<view class="price">
							<text class="price1" v-if="!item.specTemplateId ||
          (!item.maxPrice && !item.minPrice)"><text v-if="item.standPrice"
									style="font-size: 28rpx;font-weight: 400;">￥</text><text
									v-if="item.standPrice">{{item.standPrice | formatPrice}}</text><text
									v-else>免费</text></text>
							<text class="price1" v-else><text
									style="font-size: 28rpx;font-weight: 400;">￥</text>{{item.minPrice | formatPrice}}
								<template v-if="item.minPrice != item.maxPrice">
									<text>-</text>
									<text
										style="font-size: 28rpx;font-weight: 400;">￥</text>{{ item.maxPrice | formatPrice }}
								</template></text>
							<text class="price2" v-if="item.linePrice">原价：￥{{item.linePrice | formatPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="!hideBuyState && other.bankH5 == 1 &&recommendBank.length > 0">
			<view class="header_top">
				<text class="left">推荐题库</text>
				<u-tabs class="u-tabs" :list="recommendBank" :current="currentBank" bg-color="transparent"
					:show-bar="false" :height="50" @change="changeCurren($event,'currentBank')"></u-tabs>
				<text class="right" @click="jumpPage(2)">更多></text>
			</view>
			<view class="noGoods" v-if="recommendBank[currentBank].goodsList.length == 0">
				<img src="https://file.xyyxt.net/web/static/img/no-content.png" alt="">
				<view class="">
					暂无数据
				</view>
			</view>
			<view class="content_box" v-for="(item,index) in filterNum(recommendBank[currentBank].goodsList)"
				:key="index" @click="tobuy(item)">
				<view class="title">
					{{item.goodsName}}
				</view>
				<view class="f_x">
					<view class="img_goods">
						<img :src="$method.splitImgHost(item.coverUrl)" alt="">
					</view>
					<view class="content_goods">
						<view class="top_bus">
							<text>{{recommendBank[currentBank].educationName}}</text>
							<text>{{recommendBank[currentBank].aliasName}}</text>
						</view>
						<view class="price">
							<text class="price1" v-if="!item.specTemplateId ||
		  (!item.maxPrice && !item.minPrice)"><text v-if="item.standPrice"
									style="font-size: 28rpx;font-weight: 400;">￥</text>{{item.standPrice || '免费'}}</text>
							<text class="price1" v-else><text
									style="font-size: 28rpx;font-weight: 400;">￥</text>{{item.minPrice}}
								<template v-if="item.minPrice != item.maxPrice">
									<text>-</text>
									<text style="font-size: 28rpx;font-weight: 400;">￥</text>{{ item.maxPrice }}
								</template></text>
							<text class="price2" v-if="item.linePrice">原价：￥{{item.linePrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="other.teamH5 == 1">
			<view class="header_top">
				<text class="left">师资团队</text>
				<text class="right">左右滑动</text>
			</view>
			<view class="content_box" style="padding: 30rpx 0rpx;">
				<swiper class="swiper" circular autoplay>
					<swiper-item v-for="(item,index) in teacher" :key="index">
						<view class="boxs_tec">
							<view class="header">
								<view class="imgs">
									<img :src="item.imgUrl" alt="">
								</view>
								<view class="right_s">
									<view class="h_name">
										{{item.name}}
									</view>
									<view class="c_">
										{{item.occupation}}
									</view>
								</view>
							</view>
							<view class="bodys">
								<view class="" v-for="(items,indexs) in item.remark">
									{{items}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="content" v-if="other.certificateH5 == 1">
			<view class="header_top">
				<text class="left">资质证书</text>
				<text class="right">左右滑动</text>
			</view>
			<view class="content_box">
				<swiper class="swiper_cer" circular autoplay>
					<swiper-item v-for="(item,index) in certificate" :key="index">
						<view class="boxs_cer">
							<image mode="aspectFit" :src="item.imgUrl" @click="openImg(index)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="officials"
			v-if="$method.isLogin() && isFollow !== 1 && !curClose && tenantId == '867735392558919680'">
			<view class="weixin_official_account">
				<image class="off_logo" src="@/static/index/official.png"></image>
				<view>
					<view class="one">关注 “祥粤学校” 公众号</view>
					<view class="two">学习提醒、 报考通知不会错过</view>
				</view>
				<button type="default" class="btn btn-official">
					去关注
					<official-account class="official-account" id="official_account"></official-account>
				</button>
				<view class="close_icon">
					<u-icon name="close" class="icon-close" @click="closeOff"></u-icon>
				</view>
			</view>

		</view>
		<!-- #endif -->
		<u-popup v-model="checkDialogVisible" mode="center" :mask-close-able="false" border-radius="15" width="500">
			<view style="padding: 20rpx; max-height: 500px">
				<div style="color: #000; display: flex">
					<div>
						<u-icon name="error-circle-fill" style="color: #f59a23; margin: 8rpx 5rpx 0 0"></u-icon>
					</div>
					<div>
						尊敬的用户：您购买的课程
						<span v-for="item, index in checkTwoClassList" :key="index">
							【{{ item.gradeName }}】班级有效期还剩 {{
				                $method.GetRTime(item.classEndTime) > 0
				                  ? $method.GetRTime(item.classEndTime)
				                  : 0
				                }}天，请在
							{{
				                  $method.timestampToTime(item.classEndTime, true, true)
				                }}前完成学习及考试，到期未完成学时清零，需重新学习。<br>
						</span>
					</div>
				</div>
				<div style="margin: 12rpx 0 12rpx 30rpx;">
					<div class="checkBtn" @click="goLearnPage">进入学习</div>
					<div class="checkBtn cancelBtn" @click="checkDialogVisible = false">取 消</div>
				</div>
			</view>
		</u-popup>
		<!-- tabbar -->
		<myTabbar :backTopBtn="backTopBtn"></myTabbar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				checkDialogVisible: false, // 检查是否有二建班级10天过期
				checkTwoClassList: [], // 检查是否有二建班级10天过期
				backTopBtn: false,
				currentCourse: 0,
				currentBank: 0,
				certificate: [{
						imgUrl: "https://file.xyyxt.net/web/static/img/bxxkz-zb.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/djz.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/hjgltxrz.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zyhjaqgktxrz.jpg",
						width: "147px"
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zlgltxrz.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzqyzhjyxtrzzs.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/facesbrzzs.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzyxtptrzzs1.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzyxtptrzzs2.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzzhkcrzzs1.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzzhkcrzzs3.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzzhkcrzzs2.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzzhkcrzzs3-3.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzzhkcrzzs.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A1.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A2.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A3.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A4.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A5.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A6.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A7.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2018A8.jpg",
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/2019A1.jpg",
					},

				],
				teacher: [{
						imgUrl: "https://file.xyyxt.net/web/static/img/ch.png",
						name: "陈红",
						occupation: "教授、高级工程师",
						remark: [
							"国务院安委会、咨询、建筑施工专业委员会专家",
							"中国模板手脚架协会副秘书长",
							"原中国建筑一局 (集团)有限公司工程技术部经理参编国家标准:",
							"《建筑施工脚手架安全技术统一标准》",
							"《建筑施工扣件式钢管脚手架安全技术规范》",
							"《建筑施工临时支撑技术规范》"
						]
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/xfk.png",
						name: "徐福康",
						occupation: "教授、高级工程师",
						remark: [
							"上海市施工现场安全生产保证体系第一审核认证中心副主任、总工程师",
							"上海市建设工程安全质量监督总站高级工程师",
							"国家标准《建筑施工企业安全生产管理规范》主要起草人"
						]
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/mym.png",
						name: "马英明",
						occupation: "教授、高级工程师",
						remark: [
							"中国矿业大学博士生导师",
							"国家住建部全国地铁与轻轨建设专家组专家",
							"广东省人民政府科技专家顾问委员会委员",
							"原中国地下工程学会副主任"
						]
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/khc.png",
						name: "邝穗春",
						occupation: "工程师、高级讲师",
						remark: [
							"广州市建筑置业有限公司",
							"生产技术部/工程部/资料管理部副部长",
							"广州市市政集团培训中心高级讲师",
							"广州大学市政技术学院特聘讲师",
							"专业从事建筑工程竣工验收/技术资料管理",
							"建筑工程施工安全资料管理"
						]
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/hxx.png",
						name: "胡欣欣",
						occupation: "教授、硕士生导师",
						remark: [
							"二建考前名师",
							"广东工业大学土木与交通工程学员硕士生导师",
							"广东省工程造价协会专家库成员",
							"广东省工程咨询协会专家库成员"
						]
					},
					{
						imgUrl: "https://file.xyyxt.net/web/static/img/zzhteacher.png",
						name: "朱培浩",
						occupation: "博士、教材主编",
						remark: ["机电实务全国名师", "建造师相关教材主编、参编"]
					}
				],
				jumpList: [{
						label: "课程选购",
						imgName: require("@/static/modIcon/purchase.png"),
						type: 1, //1 tab类型 2 nav类型
						url: 0
					}, {
						label: "直播课程",
						imgName: require("@/static/modIcon/live.png"),
						type: 1, //1 tab类型 2 nav类型
						url: 1
					}, {
						label: "题库购买",
						imgName: require("@/static/modIcon/QuestionBank.png"),
						type: 1, //1 tab类型 2 nav类型
						url: 2
					}, {
						label: "讲义资料",
						imgName: require("@/static/modIcon/handout.png"),
						type: 1, //1 tab类型 2 nav类型
						url: 3
					}
					// , {
					// 	label: "课程试听",
					// 	imgName: "",
					// 	type: 1, //1 tab类型 2 nav类型
					// 	url: ""
					// }, {
					// 	label: "考试日历",
					// 	imgName: "",
					// 	type: 1, //1 tab类型 2 nav类型
					// 	url: ""
					// }, {
					// 	label: "常见问题",
					// 	imgName: "",
					// 	type: 1, //1 tab类型 2 nav类型
					// 	url: ""
					// }, {
					// 	label: "会员商城",
					// 	imgName: "",
					// 	type: 1, //1 tab类型 2 nav类型
					// 	url: ""
					// },
				],
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperHeight: (uni.getWindowInfo().screenWidth - 40) * 0.42 * 2, //轮播图高度计算
				list: [],
				recommendCourse: [],
				recommendBank: [],
				isFollow: null, //是否关注过,不是1就是没关注
				curClose: true, // 当天时是否关闭过
				version: null, //当前版本号
			};
		},
		async onLoad(option) {
			this.checkTenClassGradeUser()
			if (option.show === '1') {
				console.log(option, '--------show---------')
				this.checkTenClassGradeUser()
			}
			let self = this
			uni.hideTabBar();
			// #ifdef H5
			uni.setNavigationBarTitle({
				title: this.header.companyName,
			});
			// #endif
			// #ifdef MP-WEIXIN
			wx.getSystemInfo({
				success: function(res) {
					self.version = res.SDKVersion;
					self.appCommonConfig({
						version: self.version,
					});
				},
			});
			// #endif
			this.getLocation();
			this.recommendList()
			this.dictObj;
			if (this.$method.isLogin()) {
				try {
					await this.getUserInfo();
				} catch (err) {}
			} else {
				if (uni.getStorageSync("needToLogin")) {
					uni.removeStorageSync("needToLogin");
					uni.navigateTo({
						url: "/pages4/login/login",
					});
				}
			}
		},
		onShow() {
			this.getInfo(); // 判断有没有关注公众号
			this.isClickOff(); //关注公众号，每天最多显示1次；当天学员关闭弹窗后，无需再显示
		},
		onShareAppMessage(res) {
			return {
				title: "中正",
				path: `/pages/index/index?inviteCode=` + userInfo == null ?
					"" : userInfo.userAccount,
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.backTopBtn = true
			} else {
				this.backTopBtn = false
			}
		},
		computed: {
			...mapGetters(["header", "other", "dictObj", "userInfo", "tenantId", "hideBuyState"]),
			filterNum: function() {
				return function(list) {
					if (list && list.length > 0) {
						return list.filter((i, k) => k < 3)
					} else {
						return []
					}
				}
			}
		},
		methods: {
			...mapActions(["getUserInfo", "appCommonConfig"]),
			changeCurren(index, i) {
				this[i] = index
			},
			// 每天最多显示1次；当天学员关闭弹窗后，无需再显示
			isClickOff() {
				//当天23：59：59秒 转换成的毫秒数
				const end = new Date(
					new Date(new Date().toLocaleDateString()).getTime() +
					24 * 60 * 60 * 1000 -
					1
				).getTime();
				const start = new Date().getTime(); //当前时间的毫秒数
				if (uni.getStorageSync("endTime")) {
					//首先判断本地有没有存入当天23：59：59秒的毫秒数
					if (start > uni.getStorageSync("endTime")) {
						//当前时间毫秒数大于当天23：59：59秒
						this.curClose = true;
						uni.removeStorageSync("curClose");
						uni.removeStorageSync("endTime");
					} else {
						this.curClose = uni.getStorageSync("curClose") ? false : true;
					}
				} else {
					uni.setStorageSync("endTime", end); //存入当天晚上23：59：59秒的毫秒数
				}
			},
			closeOff() {
				this.curClose = false;
				uni.setStorageSync("curClose", "1");
			},
			getInfo() {
				if (!this.$method.isLogin()) {
					return;
				}
				// /app/user/getInfo 登录用户信息 // fromPlat来源平台 1小程序 2PC网站
				this.$api.getInfo({
					fromPlat: 1
				}).then((res) => {
					if (res.data.code == 200) {
						this.$store.state.userInfo = res.data.data;
						this.isFollow = res.data.data.userFollowWx; // 不是1就是没关注
						console.log(this.isFollow, 'llow')
					}
				});
			},
			tabListFunc(item) {
				// let a = "http://192.168.1.213:8080/pages3/polyv/detail?id=214618&goodsId=490909&orderGoodsId=5535&gradeId=1854&periodWaitTime=1&isQ="
				// uni.navigateTo({
				// 	url:`/pages5/webview/sdlink?url=${a}`
				// })
				// return
				if (item.type == 1) {
					this.$store.state.current = item.url
					uni.switchTab({
						url: '/pages/course/index'
					});
				}
				if (item.type == 2) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			openImg(index) {
				uni.previewImage({
					urls: this.certificate.map(i => i.imgUrl),
					current: index
				})
			},
			/**
			 * @param {Object} swiper
			 * 点击轮播图
			 */
			swiperClick(index) {
				let swiper = this.list[index]
				if (swiper.jumpType == 1) {
					//无跳转
					return;
				} else if (swiper.jumpType == 2) {
					//url
					let url = encodeURIComponent(swiper.jumpUrl);
					uni.navigateTo({
						url: "/pages5/webview/index?url=" + swiper.jumpUrl,
					});
				} else if (swiper.jumpType == 3) {
					//内部接口
					const {
						jumpUrl
					} = swiper;
					const map = [
						"pages/index/index",
						"pages/course/index",
						"pages/learn/index",
						"pages/questionBank/index",
						"pages/wd/index",
						"pages/information/index",
					];
					const isSwitch = map.find((e) => jumpUrl.includes(e));
					// tab页
					if (isSwitch) {
						// 解决携带参数问题
						uni.reLaunch({
							url: jumpUrl,
						});
						return;
					}
					uni.navigateTo({
						url: jumpUrl,
					});
				} else if (swiper.jumpType == 4) {
					//外部接口
					uni.navigateToMiniProgram({
						appId: swiper.remarks,
						path: swiper.jumpUrl,
						extraData: {},
						success(res) {
							// 打开成功
						},
						fail(err) {
							//   console.log(err)
						},
					});
				}
			},
			//获取轮播列表
			getLocation() {
				this.$api
					.advertisingLocation({
						platform: 1,
						status: 1,
						locationKey: "home-banner",
					})
					.then((res) => {
						if (res.data.code == 200) {
							let locationId =
								(res.data.data && res.data.data[0].locationId) || 1;
							this.interval = res.data.data[0].intervalTime * 1000;
							this.$api.advertisingList({
								locationId: locationId
							}).then((result) => {
								if (result.data && result.data.rows.length > 0) {
									this.list = result.data.rows.map(item => {
										return {
											...item,
											image: this.$method.splitImgHost(item
												.adverUrl),
											title: item.advName
										}
									})

								}
							});
						}
					});
			},
			//推荐列表
			recommendList() {
				this.$http({
					url: "/app/common/activity/recommend/list",
					method: "get",
					data: {
						platform: 1,
						status: 1,
					},
					noToken: true,
				}).then((res) => {
					if (res.data && res.data.rows.length > 0) {
						this.recommendCourse = res.data.rows.filter(i => i.status == 1 && i.type ==
							1) || []
						this.recommendBank = res.data.rows.filter(i => i.status == 1 && i.type ==
							2) || []
					}
				})
			},
			tobuy(item) {
				if (item.goodsType == 2) {
					uni.navigateTo({
						url: "/pages2/bank/detail?id=" + item.goodsId,
					});
				} else {
					// 视频、直播 /pages5/liveDetail/index
					uni.navigateTo({
						url: "/pages3/course/detail?id=" +
							item.goodsId +
							"&goodsType=" +
							item.goodsType,
					});
				}
			},
			jumpPage(index) {
				this.$store.state.current = index
				uni.switchTab({
					url: '/pages/course/index'
				});
			},
			// 检查是否有二建班级15天过期
			checkTenClassGradeUser() {
				this.$api
					.checkTenClassGradeUser()
					.then((res) => {
						console.log(res, 'res')
						if (res.data.code == 200) {
							if (res.data.data && res.data.data.length > 0) {
								let ary = uni.getStorageSync("loaclCheckClass") || []
								let orderGoodsIds = []
								if (ary && ary.length > 0) {
									ary.forEach(i => {
										if (i.userId == this.userInfo.userId) {
											orderGoodsIds = i.orderGoodsIds || []
										}
									})
									this.checkTwoClassList = res.data.data.filter(i => orderGoodsIds.indexOf(i
										.orderGoodsId) == -1)
								} else {
									this.checkTwoClassList = res.data.data
								}
								this.checkDialogVisible = true;
								if (!this.checkTwoClassList.length) this.checkDialogVisible = false;
							}
						}
					})
					.catch(() => {
						this.checkDialogVisible = false;
					});
			},
			// 跳转学习页面
			goLearnPage() {
				uni.switchTab({
					url: "/pages/learn/index",
				});
				this.checkDialogVisible = false;
			},
		},
	};
</script>

<style>
	page {
		background: #f1f4f7;
	}
</style>
<style lang="scss" scoped>
	.checkBtn {
		display: inline;
		padding: 2% 5%;
		margin-right: 15rpx;
		background: #2979ff;
		color: white;
		border-radius: 8rpx;
	}

	.cancelBtn {
		background: white;
		color: #333;
		border: 1px solid #d7d7d7;
	}

	.noGoods {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		height: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>img {
			width: 300rpx;
			height: 300rpx;
		}

		&>view {
			font-size: 34rpx;
			margin-top: 30rpx;
			color: #666;
		}
	}

	.swiper_cer {
		height: 500rpx;

		.boxs_cer {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			&>image {
				height: 100%;
			}
		}
	}

	.swiper {
		height: 500rpx;

		.boxs_tec {
			margin: 0rpx 20rpx;
			height: 100%;
			background-color: #fff;
			border: 1rpx solid #007aff;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;

			.header {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				padding: 20rpx;

				.imgs {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;

					&>img {
						width: 100%;
						height: 100%;
					}
				}

				.right_s {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.h_name {
						font-size: 32rpx;
						color: #333;
						font-weight: 600;
					}

					.c_ {
						color: #333;
						font-size: 28rpx;
					}
				}
			}

			.bodys {
				font-size: 28rpx;
				padding: 30rpx 20rpx;
				color: #fff;
				flex: 1;
				background-color: rgb(0, 122, 255);

				&>view {
					line-height: 42rpx;
				}
			}
		}
	}

	.header_box {
		padding: 20rpx;
		background: linear-gradient(180deg, rgba(0, 122, 255, 1) 0%, #f1f4f7 100%);

		.getStudy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-top: 24rpx;
			padding: 30rpx 26rpx;
			border-radius: 8rpx;

			.left {
				display: flex;
				align-items: center;

				img {
					width: 46rpx;
					height: 46rpx;
					margin-right: 14rpx;
				}

				text {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.btn {
				font-size: 24rpx;
				border-radius: 28rpx;
				padding: 14rpx 28rpx;
				background-color: #007aff;
				color: #fff;
			}
		}

		.jumpList {
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			margin-top: 24rpx;
			padding: 20rpx 0rpx;
			border-radius: 8rpx;

			.list_li {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 20rpx;

				&>img {
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 6rpx;
				}

				&>text {}
			}
		}
	}

	.content {
		padding: 20rpx;

		.header_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				color: #333;
				font-weight: 600;
				font-size: 36rpx;
				flex-shrink: 0;

				&:before {
					content: ""; // 必须
					display: inline-block; // 必须
					width: 6rpx;
					height: 26rpx;
					margin-right: 20rpx;
					background: #409eff !important;
				}
			}

			.u-tabs {
				flex: 1;
				width: 1rpx;
				margin: 0rpx 10rpx;

				/deep/ .u-scroll-box {
					height: 50rpx;
				}
			}

			.right {
				font-size: 28rpx;
				color: #7f7f7f;
				flex-shrink: 0;
			}
		}

		.content_box {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			&>.title {
				padding-top: 10rpx;
				margin-bottom: 30rpx;
				color: #333;
				font-weight: 600;
				font-size: 28rpx;
			}

			&>.f_x {
				display: flex;

				&>.img_goods {
					width: 235rpx;
					height: 138rpx;
					overflow: hidden;
					border-radius: 8rpx;
					margin-right: 20rpx;
					flex-shrink: 0;

					&>img {
						width: 100%;
						height: 100%;
					}
				}

				&>.content_goods {
					flex: 1;
					width: 1rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&>.top_bus {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						&>text {
							background-color: #f5f7f9;
							border-radius: 4rpx;
							padding: 6rpx 10rpx;

							&:first-child {
								margin-right: 14rpx;
							}
						}
					}

					&>.price {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: space-between;

						&>.price1 {
							font-size: 36rpx;
							font-weight: 700;
							color: red;
						}

						&>.price2 {
							text-decoration: line-through;
							color: #aaaaaa;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.officials {
		width: 100%;
		height: 104rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weixin_official_account {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		width: 718rpx;
		height: 104rpx;
		padding: 0 32rpx;
		margin-left: 16rpx;
		background: #3a3f54;
		border-radius: 16rpx;

		.off_logo {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.one {
			color: #fff;
			font-size: 24rpx;
			font-weight: 500;
		}

		.two {
			color: #bcbec7;
			font-size: 20rpx;
		}

		.btn {
			position: relative;
			top: 0;
			left: 35rpx;
			width: 128rpx;
			height: 56rpx;
			line-height: 56rpx;
			padding: 0;
			background: linear-gradient(274deg, #408bf6 0%, #40b4f6 100%);
			border-radius: 156rpx;
			overflow: hidden;
			text-align: center;
			font-size: 24rpx;
			color: #fff;

			.official-account {
				position: absolute;
				z-index: 1000;
				right: -9px;
				top: -38px;
				opacity: 0;
			}
		}

		.close_icon {
			width: 40rpx;
			height: 40rpx;
			background: #ffffff;
			opacity: 0.2;
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			color: #fff;
			border-radius: 0rpx 16rpx;
		}

		.icon-close {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50rpx;
			height: 68rpx;
			font-size: 22rpx;
			color: #7b8284;
		}
	}
</style>