<template> <div class="abroad_detail"> <div class="header"> <van-swipe class="my-swipe" indicator-color="white" v-if="detailData.coverList && detailData.coverList.length > 0"> <van-swipe-item v-for="n in detailData.coverList" :key="n.id"> <video v-if="n.cover_url.indexOf('.mp4') > -1" id="video" :src="n.cover_url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4"></video> <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" /> </van-swipe-item> </van-swipe> <img v-else src="@/assets/service/defCoure.jpg" alt="" /> </div> <!--倒计时--> <div class="countDown" v-show="detailData.clusterTime && timeTamp * 1 > 0"> <div class="countDownTop"> <div>{{packageArr[0]?packageArr[0].day:''}} {{detailData.applyCount>=detailData.minPeopleCount?'报名截止时间:':'团期截止倒计时'}}</div> <div v-if="detailData.applyCount>=detailData.minPeopleCount">{{detailData.periodOfValidity}}</div> <div class="countDownTime" v-else> <div class="countDownFont">{{ showTime.day }}</div> 天 <div class="countDownFont">{{ showTime.hour }}</div> 时 <div class="countDownFont">{{ showTime.minute }}</div> 分 <div class="countDownFont">{{ showTime.second }}</div> 秒 </div> </div> <div class="countDownBottom"> <div> <div class="countDownBottomyellow" v-show="detailData.minPeopleCount"> {{ detailData.clusterName }} </div> <span v-if="detailData.applyCount>=detailData.minPeopleCount">已报名 {{detailData.applyCount}}/{{detailData.stockCount}}人</span> <span v-else>最低成团数{{detailData.minPeopleCount}}人/已报名{{detailData.applyCount}}人</span> <!-- 已报名:<span>{{ detailData.applyCount }}</span><span>/{{ detailData.stockCount }}</span> --> </div> <div class="countDownAbout" @click="showPintuanAbout=true">关于拼团?</div> </div> </div> <div class="uni_text"> <div class="course_price" v-if="detailData.showPrice!=0"> <span>¥ {{ detailData.showPrice }}</span><span class="redmini">起</span><span class="tint">{{ detailData.productPrice }}</span> </div> <div class="course_price_free" v-else> <span>¥ {{ detailData.price }}</span> <span class="des">正在排期</span> </div> <div class="course_coupons" v-if="proCoupon.length>0"> <div> <van-tag v-for="(item,index) in proCoupon" :key="index" color="#ffffff" text-color="#FF2B2B">{{proCouponHas?'已领取:':''}}{{item.title}}</van-tag> </div> <div @click="toCoupons" class="fontBlue">领取 ></div> </div> <p class="course_name">{{ detailData.course_name }}</p> <p class="course_info">{{ detailData.course_info }}</p> <p class="address" v-if="detailData.provinceAddress"> <van-icon name="location" class="icon" /> {{ detailData.provinceAddress + detailData.cityAddress + detailData.areaAddress + " " + detailData.addressDetail }} </p> <div class="rate" @click="handleEvaluate"> <div> <van-rate v-model="evaluationData.evaluationScore" color="#FFCC00" :size="16" readonly /> <span>{{ evaluationData.evaluationScore }}</span> </div> <span>共{{evaluationData.evaluationCount}}个客户评价 <van-icon name="arrow" /> </span> </div> <div class="tag_box"> <template v-for="(tag, index) in detailData.course_labels"> <span class="tag" v-if="tag != ''" :key="index">{{ tag }}</span> </template> </div> </div> <div class="package top_border"> <p class="package_title">套餐类型/日期</p> <div class="package_box" v-if="packageArr.length>0"> <div class="package_item" v-for="(item, index) in packageArr" :key="index" @click="checkDatePackage(item.date)"> <p class="date">{{ item.day }}</p> <p class="week">{{ item.week }}</p> <p class="price"><span>¥</span>{{ item.marketPrice }}</p> </div> <div class="package_item package_item_more" @click="checkDatePackage()" v-if="packageArr.length > 3"> <img class="more_icon" src="@/assets/service/more.png" alt="" /> <p class="more_text">查看更多</p> </div> </div> </div> <img class="notime" v-if="packageArr.length==0" src="@/assets/service/notime.png" alt=""> <van-tabs class="tabs top_border" v-model="active" swipeable :ellipsis="false" color="#4092FF" scrollspy sticky> <van-tab title="商品详情"> <div class="tag_item" v-if="detailData.productFeatures"> <p class="tag_title">商品特色</p> <p class="tag_text" v-html="detailData.productFeatures"></p> </div> <div class="tag_item" v-if="detailData.productDescription"> <p class="tag_title">商品描述</p> <div class="content_box"> <div class="content_all" :class="isOpen ? 'open' : ''"> <p v-html="detailData.productDescription"></p> </div> </div> </div> <div class="tag_item" v-if=" detailData.courseContentList && detailData.courseContentList[0].content != '' "> <p class="tag_title">服务内容</p> <ul class="courseContent"> <li v-for="(n, i) in detailData.courseContentList" :key="n.id"> <span class="left" v-if="n.title">{{ n.title }}</span> <h3>{{ n.content }}</h3> <div class="item" v-for="(k, j) in n.courseFileList" :key="i + '' + j"> <div> <video v-if="k.url && k.url.indexOf('.mp4') > -1" id="video" :src="k.url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4"></video> </div> <div> <img v-if="k.url && k.url.indexOf('.mp4') == -1" :src="k.url" /> </div> </div> </li> </ul> </div> <div class="tag_item" v-if="courseTable.length > 0 && showCourseTable"> <p class="tag_title">课程表</p> <div class="cardCont" v-for="(item, index) in courseTable" :key="index"> <table cellspacing="0" cellpadding="8"> <tbody v-html="item"></tbody> </table> </div> </div> <div class="tag_item" v-if="detailData.extraService"> <p class="tag_title">附送服务</p> <p class="tag_text" v-html="detailData.extraService"></p> </div> <div class="tag_item" v-if="detailData.serviceGuarantees"> <p class="tag_title">服务保障和承诺</p> <p class="tag_text" v-html="detailData.serviceGuarantees"></p> </div> </van-tab> <van-tab title="费用说明" v-if="detailData.feeDescription"> <div class="tag_item"> <p class="tag_title">费用说明</p> <p class="tag_text" v-html="detailData.feeDescription"></p> </div> </van-tab> <van-tab title="订购须知" v-if="detailData.notice"> <div class="tag_item"> <p class="tag_title">订购须知</p> <p class="tag_text" v-html="detailData.notice"></p> </div> </van-tab> </van-tabs> <div class="base top_border" v-if="baseData"> <img v-if="baseData.coverList.length > 0" :src="baseData.coverList[0].cover_url" alt="" /> <div class="center"> <p class="basename">{{ baseData.baseName }}</p> <p class="address"> <van-icon name="location-o" />{{ baseData.city }}{{ baseData.area }}{{ baseData.address }} </p> <p class="tag">{{ baseData.baseLabel.join("/") }}</p> </div> </div> <div class="Collection"> <div class="box box1"> <div class="icon" @click="backHome"> <p> <van-icon name="wap-home-o" /> </p> <p>首页</p> </div> <div class="icon" @click="contactService"> <p> <van-icon name="service-o" /> </p> <p>客服</p> </div> </div> <div class="box box2"> <span v-if="packageArr.length > 0&&detailData.applyCount>=detailData.stockCount" class="disabled">已满团</span> <span v-else-if="packageArr.length > 0" @click="checkDatePackage(packageArr[0].date)">去订购</span> <span v-else class="disabled">拼团请咨询客服</span> </div> </div> <van-popup v-model="showPintuanAbout" round> <div class="pintuan_about"> <img class="about_img" src="@/assets/service/tip.png" alt=""> <p class="about_title">拼团规则说明</p> <p class="about_content">1、拼团展示默认为最近活动档期,选择其它档期请时刻注意成团动态。</p> <p class="about_content">2、在限时截止后,报名人数未达最低成团数,则结束本团活动,系统将在72小时内,全额退还!</p> <p class="about_content">3、报名人数达到最低成团要求后,则拼团成功,凡在报名截止时间内未达最大限团人数,则可放心参与。</p> <p class="about_content">4、已成团的活动,除特殊情况等不可抗拒因素外,活动如期举行。</p> <p class="about_know" @click="showPintuanAbout=false">我知道了</p> </div> </van-popup> </div> </template> <script> export default { name: "ServiceAbroadDetail", data () { return { isOpen: true, courseId: "", publicName: '', detailData: "", active: 0, courseTable: [], //课程表 packageData: [], //未处理过格式的套餐表 packageArr: [], //套餐时间价格 evaluationData: '',//评价 baseData: "", //基地信息 showCourseTable: true, showTime: { day: "", hour: "", minute: "", second: "", }, timeTamp: "", unionId: '', proCoupon: [],//优惠券 proCouponHas: false,//优惠券已领取 showPintuanAbout: false, appId: '', centerNo: '' }; }, mounted () { sessionStorage.removeItem('useCard') this.courseId = this.$route.query.courseId; this.centerNo = sessionStorage.getItem('centerNo') this.GetCourseDetail(); }, methods: { // 展开关闭院校简介 extend_btn () { this.isOpen = !this.isOpen; }, //倒计时计算 timeDown () { var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000; var nowTime = Date.parse(new Date()); let timeTamp = clusterTime / 1000 - nowTime / 1000; // console.log(timeTamp) this.timeTamp = timeTamp; // console.log(timeTamp) let k = this.calculateDiffTime(timeTamp); // console.log(k) }, calculateDiffTime (timeDiff) { var day = parseInt(timeDiff / 86400); var hour = parseInt((timeDiff % 86400) / 3600); var minute = parseInt(((timeDiff % 86400) % 3600) / 60); var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60); this.showTime = { day, hour, minute, second, }; day = day ? day + "天" : ""; hour = hour ? hour + "时" : ""; minute = minute ? minute + "分" : ""; second = second ? second + "秒" : ""; return day + hour + minute + second; }, // 点击预约 checkDatePackage (date) { if (this.packageArr[0].date == date) if (this.detailData.applyCount >= this.detailData.stockCount && this.packageArr[0].date == date) { this.$toast('已满团') return; } let query = {}; if (date || date === 0) { query = { date: date }; } // console.log(query) this.$router.push({ name: "ServiceDatePackage", query: query }); }, // 获取商品详情 GetCourseDetail () { if (!this.courseId) { this.$toast.fail('商品id缺失,请从正确的途径访问') return; } this.$toast.loading({ message: "加载中...", duration: 0, forbidClick: true, }); this.mgop({ api: 'mgop.sz.hswsy.GetCourseDetail', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'POST', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "id":this.courseId, "cs": "绍兴市", }, onSuccess: res => { this.$toast.clear(); if (res.data.data && res.data.data.id !== 0) { let detailData = res.data.data; // console.log(detailData) detailData.course_labels = detailData.course_labels?.split(","); this.detailData = detailData; sessionStorage.setItem( "showCourseData", JSON.stringify({ course_name: detailData.course_name, id: detailData.id, marketPrice: detailData.marketPrice, price: detailData.price, }) ); this.getPackageData(); //获取套餐列表 this.getOrderCoupon(); //获取商品可使用优惠券 this.getEvaluationSummary();//获取评价 let timer = setInterval(() => { this.timeDown(); //倒计时 }, 1000); this.$once("hook:beforeDestroy", () => { clearInterval(timer); //清理定时器 }); this.$nextTick(() => { this.GetOneBase(detailData.baseId); //获取单个基地 // this.setPackageArr();//设置套餐 for (let i in detailData.courseScheduleList) { this.getWeekCard(i); } }); } else { let message = res.data.message; if (!message) { message = '商品不存在' } this.$toast.fail(message) } }, onFail: err => { console.log('err', err) } }); }, //获取商品可使用优惠券 getOrderCoupon () { this.mgop({ api: 'mgop.sz.hswsy.orderCoupon', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'POST', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "proId": this.detailData.id, "userId": this.centerNo, }, onSuccess: res => { if (res.data.data) { if (res.data.data.has.length > 0) { this.proCoupon = res.data.data.has sessionStorage.setItem("proCoupon", JSON.stringify(this.proCoupon)) this.chooseDefaultUseCard(res.data.data.has)//设置默认选中的优惠券 this.proCouponHas = true; } else if (res.data.data.get.length > 0) { this.proCoupon = { title: '您有可领优惠券' } } } }, onFail: err => { console.log('err', err) } }); }, // 设置默认选中的优惠券 chooseDefaultUseCard (has) { if (has.length > 1) { let useCard = has[0]; for (let i in has) { console.log(Number(has[i].couponPrice) > Number(useCard.couponPrice)) if (Number(has[i].couponPrice) > Number(useCard.couponPrice)) { useCard = has[i] } } // console.log('useCard', useCard) this.proCoupon = [useCard] sessionStorage.setItem('useCard', JSON.stringify(useCard)) } else { sessionStorage.setItem('useCard', JSON.stringify(this.proCoupon[0])) } }, // 获取评价 getEvaluationSummary () { this.mgop({ api: 'mgop.sz.hswsy.EvaluationSummary', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'GET', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "courseId": this.courseId, }, onSuccess: res => { if (res.data.data) { this.evaluationData = res.data.data } }, onFail: err => { console.log('err', err) } }); }, // 获取套餐列表 getPackageData () { let startDate = this.Moment().format("YYYY-MM-DD"); let endDate = this.Moment().add(60, "days").format("YYYY-MM-DD"); this.mgop({ api: 'mgop.sz.hswsy.DateComboBindList', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'GET', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "productId": this.detailData.id, "startDate": startDate, "endDate": endDate, }, onSuccess: res => { if (res.data.data) { let allPackage = res.data.data; let usefulPackage = []; for (let i in allPackage) { if (allPackage[i]?.comboList?.length > 0) { usefulPackage.push(allPackage[i]); } } console.log(usefulPackage); this.packageData = usefulPackage; sessionStorage.setItem( "packageData", JSON.stringify(usefulPackage) ); this.setPackageArr(); } }, onFail: err => { console.log('err', err) } }); }, // 设置套餐价格 setPackageArr () { console.log(this.packageData); let packageArr = []; for (let i in this.packageData) { let packageDate = this.Moment( new Date(this.packageData[i]?.dayName.replace(/\-/g, "/")) ); let week = packageDate.format("d"); week = week == 1 ? "周一" : week == 2 ? "周二" : week == 3 ? "周三" : week == 4 ? "周四" : week == 5 ? "周五" : week == 6 ? "周六" : week == 0 ? "周日" : ""; //超出部分不显示 if (packageArr.length > 3) { this.packageArr = packageArr; return; } packageArr.push({ day: packageDate.format("M/D"), date: packageDate.format("YYYY-MM-DD"), week: week, marketPrice: this.packageData[i]?.comboList[0]?.actualPrice, }); } this.packageArr = packageArr; }, // 获取单个基地 GetOneBase (baseId) { this.mgop({ api: 'mgop.sz.hswsy.GetOneBase', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'GET', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "id": baseId, }, onSuccess: res => { if (res.data.data) { this.baseData = res.data.data; } }, onFail: err => { console.log('err', err) } }); }, // 设置第几天的课程表 getWeekCard (index) { var data = this.detailData.courseScheduleList[index].courseScheduleList; var morning = []; var afternoon = []; var night = []; data.forEach(function (k, j) { if (k.type == 1 && k.content != "") { morning.push(k); } else if (k.type == 2 && k.content != "") { afternoon.push(k); } else if (k.type == 3 && k.content != "") { night.push(k); } }); if (morning.length == 0 && afternoon.length == 0 && night.length == 0) { this.showCourseTable = false; } var strMorning = "", strAfternoon = "", strNight = ""; if (morning.length > 0) { strMorning = `<tr> <td class="td_left" rowspan="${morning.length}">上午</td> <td style="text-align: left;">${morning[0].content ? morning[0].content : "无安排" }</td> </tr>`; morning.forEach(function (k, j) { if (j > 0) { strMorning += `<tr> <td style="text-align: left;">${k.content ? k.content : "无安排"}</td> </tr>`; } }); } if (afternoon.length > 0) { strAfternoon = `<tr> <td class="td_left" rowspan="${afternoon.length}">下午</td> <td style="text-align: left;">${afternoon[0].content ? afternoon[0].content : "无安排" }</td> </tr>`; afternoon.forEach(function (k, j) { if (j > 0) { strAfternoon += `<tr> <td style="text-align: left;">${k.content ? k.content : "无安排"}</td> </tr>`; } }); } if (night.length > 0) { strNight = `<tr> <td class="td_left" rowspan="${night.length}">晚上</td> <td style="text-align: left;">${night[0].content ? night[0].content : "无安排" }</td> </tr>`; night.forEach(function (k, j) { if (j > 0) { strNight += `<tr> <td style="text-align: left;">${k.content ? k.content : "无安排"}</td> </tr>`; } }); } this.courseTable.push(strMorning + strAfternoon + strNight); }, // 联系客服 contactService () { if (this.detailData.mobiles) { location.href = "tel://" + this.detailData.mobiles.split(",")[0]; } }, // 返回首页 backHome () { let publicName = sessionStorage.getItem("publicName"); console.log("Service" + (publicName ? publicName : "")); this.$router.push({ name: "Service" + (publicName ? publicName : "") }); }, // 点击评价进入评价详情页 handleEvaluate () { this.$router.push({ name: "ServiceAbroadEvaluate", query: { courseId: this.courseId } }); }, //领券 toCoupons () { this.$router.push({ name: "CardBoxXST", }); }, }, }; </script> <style lang="scss"> .abroad_detail { padding-bottom: 200px; .header { img { width: 100%; } } .countDown { height: 130px; width: 100%; background-color: #201e2b; .countDownTop { height: 50%; padding: 0 3vw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; // color: blanchedalmond; color: #ffffff; font-size: 32px; .countDownTime { font-size: 24px; .countDownFont { line-height: 34px; color: #333333; border-radius: 5px; margin: 0 8px; } div { // color: red; width: 34px; text-align: center; display: inline-block; background-color: #ffe9b1; } } } .countDownBottom { height: 50%; padding: 0 3vw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; // color: blanchedalmond; color: #ffffff; font-size: 24px; .countDownBottomyellow { display: inline-block; // width: 10vw; height: 33px; margin-right: 12px; padding: 0 8px; color: #333333; font-size: 24px; background-color: #ffe9b1; border-radius: 4px; } .countDownBottomTime { font-size: 2.8vw; color: #ffffff; opacity: 0.85; } .countDownAbout { text-decoration: underline; } } } .uni_text { width: 100%; background: #fff; padding: 24px 34px; box-sizing: border-box; .course_price { font-size: 38px; font-weight: bold; color: red; .redmini { font-size: 25px; } .tint { font-size: 25px; font-weight: normal; color: #909399; margin-left: 2vw; text-decoration: line-through; } } .course_price_free { font-size: 34px; font-weight: bold; color: red; display: flex; justify-content: space-between; .des { color: #333; } } .course_coupons { height: 70px; font-size: 27px; // color: #4092FF; display: flex; justify-content: space-between; align-items: center; .fontBlue { color: #4092ff; } } .course_name { font-size: 34px; font-weight: bold; } .course_info { font-size: 24px; color: #999; margin-top: 16px; } .address { font-size: 24px; color: #999; margin-top: 16px; .icon { color: #000; } } .rate { margin-top: 20px; display: flex; justify-content: space-between; div > span { font-size: 30px; color: #ffcc00; margin-left: 30px; } > span { font-size: 26px; } } .tag_box { padding-top: 10px; .tag { display: inline-block; margin-top: 10px; margin-right: 12px; color: #4092ff; font-size: 24px; border-radius: 8px; border: 2px solid #4092ff; padding: 2px 10px; } } } .package { padding: 18px 22px; .package_title { font-size: 28px; color: #999; } .package_box { white-space: nowrap; margin-top: 22px; .package_item { width: 128px; height: 152px; border-radius: 12px; border: 2px solid #dde3ef; box-sizing: border-box; display: inline-flex; align-content: center; justify-content: center; flex-wrap: wrap; vertical-align: top; margin-right: 16px; p { width: 100%; margin: 0; text-align: center; } .more_icon { width: 36px; margin-top: 10px; } .more_text { font-size: 22px; color: #fff; margin-top: 22px; } .date { font-size: 32px; font-weight: bold; } .week { font-size: 22px; color: #999; } .price { font-size: 28px; color: #ff2b2b; margin-top: 14px; span { font-size: 20px; } } } .package_item_more { background: #3f92ff; border: 2px solid #3f92ff; box-shadow: 6px 12px 16px 0px rgba(63, 146, 255, 0.29); margin-right: 0; } } } .notime { width: 100%; } .content_box { position: relative; .content_all { overflow: hidden; height: 580px; // font-size: 26px; // line-height: 36px; font-size: 31px !important; line-height: 40px !important; letter-spacing: 1.6px; color: #666; // padding-bottom: 130px; img { width: 100%; } } /* 展开 */ .open { height: auto; } .extend_wrap { display: flex; align-items: center; justify-content: center; font-size: 26px; padding: 40px 0; color: #4092ff; margin-top: -40px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 100% ); width: 100%; position: absolute; bottom: 0; left: 0; } } .tag_item { padding: 22px; .tag_title { font-size: 34px; font-weight: bold; margin-bottom: 32px; } .tag_text { // font-size: 24px; // line-height: 40px; font-size: 28px !important; line-height: 44px !important; padding: 16px 0; } } .cardCont { // font-size: 24px; font-size: 28px !important; table { border-radius: 5px; width: 100%; border: 1px solid #dde3ef; td { border: 1px solid #dde3ef; text-align: center; background: rgb(245, 246, 250); } .td_left { width: 132px; background: #fff; box-sizing: border-box; } } } .courseContent { li:not(:last-child) { border-bottom: 1px solid #eee; } li:first-child { .left { color: #fa9b00; border: 1px solid #fa9b00; background-color: #fef4d9; } } li:nth-child(3n + 1) { .left { color: #fa9b00; border: 1px solid #fa9b00; background-color: #fef4d9; } } li:nth-child(3n-1) { .left { color: #fa008c; border: 1px solid #fa008c; background-color: #ffeffc; } } li:nth-child(3n) { .left { color: #0076fa; border: 1px solid #0076fa; background-color: #efffff; } } li { position: relative; margin-top: 20px; padding-bottom: 10px; .left { position: absolute; top: 0; left: 0; width: 120px; font-size: 26px; text-align: center; border-radius: 3px; padding: 3px; box-sizing: border-box; font-weight: 600; } h3 { color: #202228; // font-size: 32px; font-size: 30px !important; font-weight: 400; margin: 0; padding-left: 160px; word-break: break-all; } .item { margin-top: 10px; img { width: 100%; } p { margin: 0; margin-top: 10px; color: #a7a7aa; // font-size: 28px; font-size: 31px !important; b { // font-size: 32px; font-size: 35px !important; font-weight: 400; color: #000000; margin-right: 10px; } span { // font-size: 24px; font-size: 27px !important; } } } } } .base { padding: 28px 24px; img { width: 98px; height: 98px; display: inline-block; vertical-align: top; border-radius: 12px; } .center { width: 550px; display: inline-block; margin-left: 20px; .basename { // font-size: 32px; font-size: 35px !important; font-weight: bold; } .address { // font-size: 24px; font-size: 27px !important; margin-top: 12px; } .tag { display: inline-block; // font-size: 24px; font-size: 26px !important; margin-top: 14px; background: #f5f6fa; border-radius: 6px; padding: 6px 20px; } } } .top_border { border-top: 16px solid #f6f7fa; ::v-deep .van-tab { .van-tab__text { font-size: 34px !important; } } } .popup_content { width: 408px; height: 346px; overflow: hidden; img { display: block; width: 86px; height: 86px; margin: 0 auto; margin-top: 64px; } p:first-of-type { text-align: center; margin-top: 46px; // font-size: 36px; font-size: 39px !important; } p:last-of-type { text-align: center; margin-top: 16px; // font-size: 26px; font-size: 29px !important; color: #999; } } .Collection { background-color: white; position: fixed; bottom: 0; left: 0; width: 100%; padding: 28px 22px; box-sizing: border-box; padding-bottom: 50px; z-index: 500; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34); .box1 { width: 40%; } .box2 { width: 60%; } .box { display: inline-block; vertical-align: middle; color: #666666; .icon { display: inline-block; width: 45%; text-align: center; // font-size: 24px; font-size: 26px !important; p { // margin: 0; color: #999999; margin-top: 8px; } i { font-size: 48px; color: rgb(45, 45, 45); font-weight: bold; } } .icon.active { color: 0ce39d; i { color: #0ce39d; } } span { display: inline-block; width: 100%; line-height: 92px; box-sizing: border-box; border-radius: 100px; color: white; // font-size: 32px; font-size: 35px !important; background: #4092ff; text-align: center; box-shadow: 0px 10px 40px 0px #a0c9ff; b { display: inline-block; vertical-align: middle; margin-left: 20px; color: white; } i { vertical-align: middle; font-size: 44px; font-weight: bold; } } .disabled { color: #999; background: #edeced; box-shadow: none; } } } .pintuan_about { width: 592px; box-sizing: border-box; padding: 0 50px; .about_img { width: 112px; margin: 0 auto; margin-top: 30px; display: block; } .about_title { font-size: 34px; font-weight: bold; text-align: center; } .about_content { font-size: 30px; margin-top: 20px; } .about_know { font-size: 32px; text-align: center; color: #3385ff; margin-top: 60px; margin-bottom: 44px; } } } </style>