1122 lines
28 KiB
Vue
1122 lines
28 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 占位符导航栏 -->
|
||
<navseat :opacity='opacity' :title='titlename' :titleshow='false'></navseat>
|
||
<view class="onecontent">
|
||
<!-- 小内切圆 -->
|
||
<view class="after"></view>
|
||
<!-- <image class="onecontentimage" :src="listdata.images"
|
||
mode=""></image> -->
|
||
<u-swiper class="onecontentimage" :list="listdata.images" height='490'></u-swiper>
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="onetowcontent flex-between">
|
||
<view class="onetowcontent_one flex-start">
|
||
<view class="onetowcontent_oneo">
|
||
到手￥
|
||
</view>
|
||
<view class="onetowcontent_onet">
|
||
{{listdata.salePrice}}
|
||
</view>
|
||
<view class="onetowcontent_oneth">
|
||
{{listdata.discount}}折
|
||
</view>
|
||
<view class="onetowcontent_onefour">
|
||
￥{{listdata.originPrice}}
|
||
</view>
|
||
</view>
|
||
<view class="onetowcontent_tow flex-center">
|
||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/h.png" mode="aspectFill">
|
||
</image>
|
||
<text>已售{{listdata.realSalesNumber}}份</text>
|
||
</view>
|
||
<view class="after"></view>
|
||
</view>
|
||
<view class="towtowcontent">
|
||
<view class="towtowcontent_one">
|
||
{{listdata.shopName}}|{{listdata.productName}}
|
||
</view>
|
||
<view class="towtowcontent_tow flex-start">
|
||
<view class="flex-center" v-for="(item,index) in listdata.noticeTag" :key="index">
|
||
<image class="towtowcontent_towimage" :src="item.shareImg" mode="aspectFill"></image>
|
||
<text class="towtowcontent_towtext">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="therecontent">
|
||
<view class="onetherecontent flex-between">
|
||
<view class="onetherecontent_o">
|
||
通用门店
|
||
</view>
|
||
<view class="onetherecontent_t flex-start">
|
||
<view class="" v-if="listdata.shopNum" @click="productgeneralstore(listdata.shopName)">
|
||
{{listdata.shopNum}}家店可用
|
||
</view>
|
||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="towtherecontent flex-between">
|
||
<view class="towtherecontent_o">
|
||
{{listdata.shopName || ''}}<text v-if="listdata.chainName">（{{listdata.chainName}}门店）</text>
|
||
</view>
|
||
<u-icon name="phone-fill" color="#333333" size="50" @click="clickphone(listdata.phone)"></u-icon>
|
||
</view>
|
||
<view class="theretherecontent">
|
||
营业时间：{{listdata.businessTime}}
|
||
</view>
|
||
<view class="fourtherecontent flex-start" @click="goMap(listdata)">
|
||
<image class="fourtherecontentimage"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/d.png" mode="aspectFill"></image>
|
||
<view class="fourtherecontent_o">
|
||
{{listdata.distances}}
|
||
</view>
|
||
<view class="fourtherecontent_t">
|
||
{{listdata.address}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fourcontent">
|
||
<view class="fourcontent_o">
|
||
套餐详情
|
||
</view>
|
||
<view v-for="(item,index) in listdata.productList" :key="index">
|
||
<view class="fourcontent_t">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="fourcontent_th flex-between" v-for="(item1,index1) in item.goods" :key="index1">
|
||
<view class="fourcontent_th_one flex-start">
|
||
<view>
|
||
{{item1.name}}
|
||
</view>
|
||
<view v-for="(item2,index2) in item1.proTag"
|
||
:style="{'background':item.backColor,'color':item.fontColor}" :key="index2">
|
||
{{item2.name}}
|
||
</view>
|
||
</view>
|
||
<view class="fourcontent_th_tow flex-start">
|
||
<view class="fourcontent_th_towo">
|
||
（{{item1.groupNum}}{{item1.unitName}}）
|
||
</view>
|
||
<view class="fourcontent_th_towt">
|
||
￥{{item1.lowPrice}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="fivecontent">
|
||
<view class="fivecontentone">
|
||
购买须知
|
||
</view>
|
||
<view class="fivecontenitem">
|
||
<view class="fivecontenitemone">
|
||
使用日期
|
||
</view>
|
||
<view class="fivecontenitemtow">
|
||
{{listdata.purchaseNotice.dateUsed || '无'}}
|
||
</view>
|
||
</view>
|
||
<view class="fivecontenitem">
|
||
<view class="fivecontenitemone">
|
||
可用时间
|
||
</view>
|
||
<view class="fivecontenitemtow">
|
||
{{listdata.purchaseNotice.availableTime || '无'}}
|
||
</view>
|
||
</view>
|
||
<view class="fivecontenitem">
|
||
<view class="fivecontenitemone">
|
||
预约方式
|
||
</view>
|
||
<view class="fivecontenitemtow">
|
||
{{listdata.purchaseNotice.bookingType || '无'}}
|
||
</view>
|
||
</view>
|
||
<view class="fivecontenitem">
|
||
<view class="fivecontenitemone">
|
||
退款说明
|
||
</view>
|
||
<view class="fivecontenitemtow">
|
||
{{listdata.purchaseNotice.refundPolicy || '无'}}
|
||
</view>
|
||
</view>
|
||
<view class="fivecontenitem" v-if="listdata.purchaseNotice.usageRules">
|
||
<view class="fivecontenitemone">
|
||
使用规则
|
||
</view>
|
||
<view class="fivecontenitemtow" v-html="listdata.purchaseNotice.usageRules">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sixcontent flex-start" @click="showpopup = true">
|
||
<view>
|
||
价格说明
|
||
</view>
|
||
<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view :style="{height:height}">
|
||
|
||
</view>
|
||
<view class="fixedview flex-between">
|
||
<view class="fixedview_letr flex-start">
|
||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/index.png" mode="aspectFill">
|
||
</image>
|
||
<text>首页</text>
|
||
</view>
|
||
<view class="fixedview_letr_item flex-colum" @click="clickphone(listdata.phone)">
|
||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/Call.png" mode="aspectFill">
|
||
</image>
|
||
<text>客服</text>
|
||
</view>
|
||
</view>
|
||
<view class="fixedview_tow">
|
||
<!-- <view class="fixedview_towone" @click="overlayshowsboxs(1)">
|
||
加入购物车
|
||
</view> -->
|
||
<view class="fixedview_towtow" @click="overlayshowsboxs(listdata)">
|
||
立即购买
|
||
</view>
|
||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||
立即购买
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="bottomcontent flex-between">
|
||
<view class="bottomcontent_texttop flex-start">
|
||
附近推荐
|
||
</view>
|
||
<view class="bottomcontent_textright flex-start">
|
||
去首页
|
||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||
</view>
|
||
</view> -->
|
||
<view class="fivecontentes">
|
||
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
|
||
<view class="fivecontent_item_nav flex-start">
|
||
<image :src="item.shopImage" mode="aspectFill"></image>
|
||
<view class="fivecontent_item_nav_left">
|
||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||
<view>
|
||
{{item.shopName}}
|
||
</view>
|
||
<view>
|
||
龙首.{{item.distances}}m
|
||
</view>
|
||
</view>
|
||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
|
||
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
|
||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
|
||
mode="aspectFill"></image>
|
||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fivecontent_item_box">
|
||
<view class="fivecontent_item_boxitem flex-between">
|
||
<image :src="item.image" mode=""></image>
|
||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||
<view>{{item.productName}}</view>
|
||
<text>已抢{{item.realSalesNumber}}份</text>
|
||
</view>
|
||
<view class="flex-start flexstartboxfttow">
|
||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||
v-for="(c,index2) in item.proTag" :key="index2"
|
||
:style="{'background':c.backColor,'color':c.backColor}">
|
||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||
:src="c.shareImg" mode="aspectFill"></image>
|
||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="indexboxitemleftthere flex-colum-start">
|
||
<view class="indexboxitemleftthereabsolute">
|
||
马上抢
|
||
</view>
|
||
<view class="indexboxitemlefttheretext flex-start">
|
||
<view class="indexboxitemlefttheretextone">
|
||
<text>¥</text>
|
||
<text>{{item.salePrice}}</text>
|
||
</view>
|
||
<view class="indexboxitemlefttheretexttow">
|
||
¥{{item.discount}}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="indexboxitemleftthere_countdown flex-between">
|
||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||
<view class="indexboxitemleftthere_countdowntexts">
|
||
<uni-countdown @timeup="updateCity" :show-day="false" :day="item.end_times.d"
|
||
:hour="item.end_times.h" :minute="item.end_times.m"
|
||
:second="item.end_times.s" :indexs='index' color="#FFFFFF"
|
||
border-color="#00B26A" splitorColor="#FFFFFF"
|
||
:font-size="7"></uni-countdown>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="showpopup" :round="40" @close="showpopup = false">
|
||
<view class="classshowpopup">
|
||
<view class="classshowpopuptop">
|
||
价格说明
|
||
</view>
|
||
<view class="classshowpopupabsolute" @click="showpopup = false">
|
||
<u-icon name="close" color="#333333" size="28"></u-icon>
|
||
</view>
|
||
<view class="classshowpopupitem">
|
||
<view class="classshowpopupitemone">
|
||
团购价
|
||
</view>
|
||
<view class="classshowpopupitemtow">
|
||
{{listdata.purchaseNotice.groupPurInfo || '无'}}
|
||
</view>
|
||
<view class="classshowpopupitemone">
|
||
门市价/划线价
|
||
</view>
|
||
<view class="classshowpopupitemtow">
|
||
{{listdata.purchaseNotice.marketPriceInfo || '无'}}
|
||
</view>
|
||
<view class="classshowpopupitemone">
|
||
折扣
|
||
</view>
|
||
<view class="classshowpopupitemtow">
|
||
{{listdata.purchaseNotice.discountInfo || '无'}}
|
||
</view>
|
||
<view class="classshowpopupitemone">
|
||
平台温馨提示
|
||
</view>
|
||
<view class="classshowpopupitemtow">
|
||
{{listdata.purchaseNotice.platformTips || '无'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navseat from '@/components/navseat.vue'
|
||
export default {
|
||
components: {
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
titlename: '详情',
|
||
opacity: false,
|
||
showpopup: false,
|
||
indexform: '',
|
||
height: '',
|
||
listdata: {
|
||
|
||
},
|
||
list1: [
|
||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||
]
|
||
};
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop <= 44) { //搜索导航栏
|
||
this.opacity = false
|
||
} else {
|
||
this.opacity = true
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log(e)
|
||
this.indexform = e.id
|
||
this.onLoadInfo()
|
||
},
|
||
mounted() {
|
||
//#ifdef MP-WEIXIN || H5
|
||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||
query.boundingClientRect(ele => {
|
||
var that = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.height = (ele.height) + "px";
|
||
that = null;
|
||
}
|
||
})
|
||
}).exec();
|
||
//#endif
|
||
//#ifdef MP-ALIPAY
|
||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||
var nodeData = ele[0]
|
||
var that = this;
|
||
that.height = (nodeData.height) + "px";
|
||
that = null;
|
||
})
|
||
//#endif
|
||
},
|
||
methods: {
|
||
eeInfoindex() {
|
||
uni.pro.switchTab('index/index')
|
||
},
|
||
overlayshowsboxs(e) {
|
||
// this.cartshping = e
|
||
// this.overlayshow = true
|
||
let _this = this
|
||
uni.pro.navigateTo('product/placeOrder', {
|
||
id: _this.indexform
|
||
})
|
||
},
|
||
//打电话
|
||
clickphone(e) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: e
|
||
});
|
||
},
|
||
// 通用门店
|
||
productgeneralstore(name) {
|
||
uni.navigateTo({
|
||
url: '/pages/product/generalstore?name=' + encodeURIComponent(JSON.stringify(name))
|
||
})
|
||
},
|
||
goMap(d) {
|
||
uni.openLocation({
|
||
longitude: (d.lng * 1),
|
||
latitude: (d.lat * 1)
|
||
})
|
||
},
|
||
// 跳转
|
||
async onLoadInfo() { //详情接口
|
||
let res = await this.api.productproductInfo({
|
||
productId: this.indexform,
|
||
lng: uni.cache.get('getLocationstorage').lng,
|
||
lat: uni.cache.get('getLocationstorage').lat
|
||
})
|
||
try {
|
||
this.listdata = res.data
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.content {
|
||
.onecontent {
|
||
width: 100%;
|
||
height: 490rpx;
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.after {
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
right: 0;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
z-index: 8;
|
||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||
}
|
||
|
||
.onecontentimage {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.fixedview {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 180rpx;
|
||
padding: 24rpx 28rpx;
|
||
background: #FFFFFF;
|
||
z-index: 999;
|
||
|
||
.fixedview_letr {
|
||
margin-left: 14rpx;
|
||
|
||
.fixedview_letr_item:nth-child(1) {
|
||
margin: 0;
|
||
}
|
||
|
||
.fixedview_letr_item {
|
||
margin-left: 32rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
margin-top: 8rpx;
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedview_one {
|
||
.fixedview_oneone {
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.fixedview_onetow {
|
||
font-size: 44rpx;
|
||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #F45C4C;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedview_tow {
|
||
// flex: auto;
|
||
padding-left: 24rpx;
|
||
|
||
.fixedview_towone {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: var(--cart-text-color);
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx 0 0 50rpx;
|
||
background: var(--cart-background-color);
|
||
}
|
||
|
||
.fixedview_towtow {
|
||
width: 302rpx;
|
||
height: 72rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
|
||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.towcontent {
|
||
position: relative;
|
||
margin-top: -40rpx;
|
||
width: 100%;
|
||
z-index: 10;
|
||
background: #F9F9F9;
|
||
padding: 32rpx 28rpx;
|
||
border-radius: 40rpx 0 0rpx 0rpx;
|
||
|
||
.onetowcontent {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 24rpx 24rpx 48rpx 24rpx;
|
||
background: linear-gradient(87deg, #FE6560 0%, #FD5976 100%);
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
|
||
.after {
|
||
position: absolute;
|
||
bottom: 24rpx;
|
||
right: 0;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
line-height: 24rpx;
|
||
text-align: center;
|
||
z-index: 8;
|
||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 24rpx, #fff 24rpx);
|
||
}
|
||
|
||
.onetowcontent_one {
|
||
.onetowcontent_oneo {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.onetowcontent_onet {
|
||
margin-left: 4rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.onetowcontent_oneth {
|
||
margin-left: 4rpx;
|
||
padding: 2rpx 16rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.onetowcontent_onefour {
|
||
margin-left: 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
.onetowcontent_tow {
|
||
|
||
image {
|
||
width: 10.82rpx;
|
||
height: 14.06rpx;
|
||
}
|
||
|
||
text {
|
||
margin-left: 5rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
background: rgba(129, 79, 39, 0.14);
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding: 4rpx 18rpx;
|
||
}
|
||
}
|
||
|
||
.towtowcontent {
|
||
position: relative;
|
||
padding: 0 24rpx;
|
||
z-index: 11;
|
||
width: 100%;
|
||
margin-top: -24rpx;
|
||
border-radius: 24rpx 0 24rpx 24rpx;
|
||
background: #FFFFFF;
|
||
|
||
.towtowcontent_one {
|
||
overflow: hidden; //超出的文本隐藏
|
||
text-overflow: ellipsis; //溢出用省略号显示
|
||
white-space: nowrap; //溢出不换行
|
||
padding-top: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
}
|
||
|
||
.towtowcontent_tow {
|
||
padding: 24rpx 0;
|
||
|
||
.flex-center {
|
||
margin-left: 16rpx;
|
||
|
||
.towtowcontent_towimage {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.towtowcontent_towtext {
|
||
margin-left: 6rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.therecontent {
|
||
width: 100%;
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
margin-top: 32rpx;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
||
.onetherecontent {
|
||
.onetherecontent_o {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.onetherecontent_t {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.towtherecontent {
|
||
margin-top: 32rpx;
|
||
|
||
.towtherecontent_o {
|
||
overflow: hidden; //超出的文本隐藏
|
||
text-overflow: ellipsis; //溢出用省略号显示
|
||
white-space: nowrap; //溢出不换行
|
||
width: 364rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.theretherecontent {
|
||
padding: 16rpx 0 24rpx 0;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
}
|
||
|
||
.fourtherecontent {
|
||
padding-top: 24rpx;
|
||
|
||
.fourtherecontentimage {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.fourtherecontent_o {
|
||
margin-left: 6rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.fourtherecontent_t {
|
||
margin-left: 12rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.fourcontent {
|
||
margin-top: 32rpx;
|
||
padding: 32rpx 24rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
||
.fourcontent_o {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.fourcontent_t {
|
||
margin-top: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.fourcontent_th {
|
||
margin-top: 32rpx;
|
||
|
||
.fourcontent_th_one {
|
||
view:nth-child(1) {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
view:nth-child(2) {
|
||
margin-left: 8rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #FF5053;
|
||
background: #FFD6D7;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fourcontent_th_tow {
|
||
.fourcontent_th_towo {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.fourcontent_th_towt {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fivecontent {
|
||
margin-top: 32rpx;
|
||
padding: 32rpx 24rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
||
.fivecontentone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.fivecontenitem {
|
||
margin-top: 32rpx;
|
||
|
||
.fivecontenitemone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.fivecontenitemtow {
|
||
margin-top: 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sixcontent {
|
||
padding: 0rpx 24rpx 32rpx 24rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.bottomcontent {
|
||
padding: 0 28rpx;
|
||
|
||
.bottomcontent_texttop {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.bottomcontent_texttop::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4rpx;
|
||
height: 22rpx;
|
||
background: #333333;
|
||
margin-right: 10rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
}
|
||
|
||
.bottomcontent_textright {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.fivecontentes {
|
||
padding: 0 28rpx;
|
||
overflow: auto;
|
||
|
||
.fivecontent_item:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.fivecontent_item {
|
||
margin-top: 32rpx;
|
||
padding: 24rpx 32rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
||
.fivecontent_item_nav {
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.fivecontent_item_nav_left {
|
||
flex: auto;
|
||
margin-left: 12rpx;
|
||
|
||
.fivecontent_item_nav_lefttop {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.fivecontent_item_nav_lefttopstart {
|
||
margin-top: 8rpx;
|
||
|
||
.fivecontent_item_nav_leftlang {
|
||
margin-left: 12rpx;
|
||
width: max-content;
|
||
padding: 4rpx 10rpx;
|
||
background: #FFF9E1;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
|
||
.fivecontent_item_nav_leftlangtext {
|
||
margin-left: 6rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #F9A511;
|
||
}
|
||
|
||
.fivecontent_item_nav_leftlangimage {
|
||
width: 10.82rpx;
|
||
height: 14.06rpx;
|
||
}
|
||
}
|
||
|
||
.fivecontent_item_nav_leftlang:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.fivecontent_item_box {
|
||
margin-top: 20rpx;
|
||
border-top: 2rpx solid #E5E5E5;
|
||
padding-top: 14rpx;
|
||
|
||
.fivecontent_item_boxitem {
|
||
image {
|
||
width: 208rpx;
|
||
height: 208rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.fivecontent_item_boxitemleft {
|
||
margin-left: 24rpx;
|
||
flex: auto;
|
||
|
||
.fivecontent_item_boxitemleftone {
|
||
width: 100%;
|
||
|
||
text {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
view {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.flexstartboxfttow {
|
||
.fivecontent_item_boxitemlefttow {
|
||
margin-left: 16rpx;
|
||
margin-top: 8rpx;
|
||
width: max-content;
|
||
padding: 4rpx 10rpx;
|
||
background: #FFF9E1;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
|
||
.fivecontent_item_boxitemlefttowtext {
|
||
margin-left: 6rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #F9A511;
|
||
}
|
||
|
||
.fivecontent_item_boxitemlefttowimage {
|
||
width: 10.82rpx;
|
||
height: 14.06rpx;
|
||
}
|
||
}
|
||
|
||
.fivecontent_item_boxitemlefttow:nth-child(1) {
|
||
margin-left: 0;
|
||
background: #FFD6D7;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.indexboxitemleftthere {
|
||
position: relative;
|
||
margin-top: 30rpx;
|
||
padding-left: 16rpx;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.indexboxitemleftthereabsolute {
|
||
position: absolute;
|
||
top: 14rpx;
|
||
right: 12rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.indexboxitemlefttheretext {
|
||
.indexboxitemlefttheretextone {
|
||
text {
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||
font-weight: normal;
|
||
color: #FF5053;
|
||
}
|
||
|
||
text:nth-child(2) {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
text:nth-child(1) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.indexboxitemlefttheretexttow {
|
||
margin-left: 12rpx;
|
||
font-size: 20rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||
font-weight: normal;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
.indexboxitemleftthere_countdown {
|
||
width: 100%;
|
||
padding-right: 7rpx;
|
||
|
||
.indexboxitemleftthere_countdowntext {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.indexboxitemleftthere_countdowntexts {
|
||
font-family: Roboto, Roboto;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 16rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.classshowpopup {
|
||
position: relative;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
padding: 48rpx 28rpx 28rpx 28rpx;
|
||
|
||
.classshowpopuptop {
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
width: 100%;
|
||
}
|
||
|
||
.classshowpopupabsolute {
|
||
position: absolute;
|
||
top: 55rpx;
|
||
right: 28rpx;
|
||
}
|
||
|
||
.classshowpopupitem {
|
||
.classshowpopupitemone {
|
||
margin-top: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.classshowpopupitemtow {
|
||
margin-top: 16rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |