884 lines
20 KiB
Vue
884 lines
20 KiB
Vue
<template>
|
||
<view class="content" v-if="!loding">
|
||
<!-- 轮播主图 -->
|
||
<view class="goods-covers">
|
||
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
|
||
<block v-if="goodsObj.pictures.length > 0">
|
||
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
|
||
<image class="swiper-item" :src="item" mode="aspectFill" />
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
<!-- 产品详情 -->
|
||
<view class="goods-content">
|
||
<view class="header">
|
||
<view class="flex-box">
|
||
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
||
<view class="sales">累计交易{{goodsObj.sales}}次</view>
|
||
</view>
|
||
<view class="coupon" v-if="couponSee.length > 0" @click="couponsOpne">
|
||
<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
|
||
<view class="coupon-label">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
<view class="coupon-btn">领券<image class="coupon-btn-img" src="../../static/icons/goods_row.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<view class="title-hot" v-if="goodsObj.specal_tags.is_allow_values">
|
||
{{goodsObj.specal_tags.is_allow_values}}
|
||
</view>
|
||
<view class="title-hot" v-if="goodsObj.specal_tags.is_self">{{goodsObj.specal_tags.is_self}}</view>
|
||
{{goodsObj.name}}
|
||
</view>
|
||
<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
|
||
</view>
|
||
<!-- 商家信息 -->
|
||
<view class="store">
|
||
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
||
<view class="store-cont">
|
||
<view class="store-title">{{goodsObj.shop.name}}</view>
|
||
<view class="rate">
|
||
<uni-rate :readonly="true" color="#ddd" active-color="#c82626" :value="goodsObj.company.star"
|
||
:size="14" />
|
||
</view>
|
||
<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img"
|
||
src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="tooSee">
|
||
<view class="tooSee-label"
|
||
@click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
|
||
区块链证书
|
||
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
<view class="tooSee-label"
|
||
@click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
|
||
商品认证
|
||
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
<view class="tooSee-label"
|
||
@click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
|
||
商品溯源
|
||
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 产品规格 -->
|
||
<view class="size">
|
||
<view class="size-item nowrap">
|
||
<label class="title">规格</label>
|
||
{{goodsObj.skus[0].goods_name}}
|
||
</view>
|
||
<view class="size-item nowrap">
|
||
<label class="title">说明</label>
|
||
特价商品不可与优惠券叠加使用
|
||
</view>
|
||
<view class="size-item nowrap" v-if="goodsObj.services.length > 0">
|
||
<label class="title">服务</label>
|
||
<view class="goods-serve" @click="serveOpne">
|
||
<image class="goods-serve-img" src="../../static/icons/goods_buy.png" mode="aspectFill"></image>
|
||
<view class="nowrap goods-serve-name"><text
|
||
v-for="(item, index) in goodsObj.services">{{item.name}}</text></view>
|
||
<image class="goods-serve-img" src="../../static/icons/goods_spot.png" mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 产品详情 -->
|
||
<view class="product">
|
||
<block v-for="(item, index) in goodsObj.content" :key="index">
|
||
<image :src="item" mode="widthFix"></image>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<!-- footer -->
|
||
<view class="footer">
|
||
<button class="btn" size="default" @click="buyGoods">立即购买</button>
|
||
</view>
|
||
|
||
<!-- 优惠券弹出 -->
|
||
<uni-popup ref="couponsPopup">
|
||
<view class="coupons-popup">
|
||
<view class="coupons-header">
|
||
<view class="title">优惠券</view>
|
||
<image @click="couponsClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
||
</view>
|
||
<view class="coupons-cont">
|
||
<view class="coupons-name">
|
||
可领取的优惠券
|
||
</view>
|
||
<view class="coupons-list" v-for="(item , index) in coupons" :key="index">
|
||
<view class="coupons-tips" v-if="item.type">
|
||
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
|
||
<text class="coupons-tips-text" v-if="item.type.value == '1'">服务券</text>
|
||
<text class="coupons-tips-text" v-else-if="item.type.value == '2'">代金券</text>
|
||
<text class="coupons-tips-text" v-else>提货券</text>
|
||
</view>
|
||
<view class="coupons-left" v-if="item.type.value == '2'">
|
||
<view class="coupons-number">
|
||
<text>￥</text>{{item.price}}
|
||
</view>
|
||
<view class="coupons-full">
|
||
满{{item.full}}可用
|
||
</view>
|
||
</view>
|
||
<view class="coupons-left" v-if="item.type.value == '1' || item.type.value =='3'">
|
||
<image :src="item.cover" mode="aspectFill" class="coupon-left-img" />
|
||
</view>
|
||
<view class="coupons-left" v-else-if="item.type.value == '3'">
|
||
<view class="coupons-number coupons-small">
|
||
提货券
|
||
</view>
|
||
</view>
|
||
<view class="coupons-center">
|
||
<view class="nowrap coupons-title">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="coupons-time" v-if="item.time">
|
||
{{item.time.interval}}
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
|
||
领取
|
||
</view>
|
||
<view v-else class="coupons-right coupons-right-active">
|
||
已领取
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupons-true" @click="couponsClose">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 服务保障弹出 -->
|
||
<uni-popup ref="servePopup">
|
||
<view class="coupons-popup">
|
||
<view class="coupons-header">
|
||
<view class="title">保障</view>
|
||
<image @click="serveClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
||
</view>
|
||
<view class="serve-cont">
|
||
<view class="serve-label" v-for="(item, index) in goodsObj.services" :key="index">
|
||
<view class="serve-label-name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="serve-label-text">
|
||
{{item.content}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupons-true" @click="serveClose">确定</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
goods,
|
||
managesCoupons
|
||
} from '@/apis/interfaces/goods'
|
||
import userAuth from '@/public/userAuth'
|
||
import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js'
|
||
const uniShare = new UniShare()
|
||
import {config} from '@/apis/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loding: true,
|
||
goodsObj: {},
|
||
identity: '',
|
||
company: {},
|
||
coupons: {},
|
||
couponSee: ""
|
||
};
|
||
},
|
||
created() {
|
||
goods(this.$Route.query.id).then(res => {
|
||
this.loding = false
|
||
this.goodsObj = res
|
||
this.identity = res.identity.id || ''
|
||
this.company = res.company
|
||
this.couponSee = res.coupons.slice(0, 3)
|
||
this.coupons = res.coupons
|
||
})
|
||
},
|
||
onBackPress({
|
||
from
|
||
}) {
|
||
console.log(from);
|
||
if (from == 'backbutton') {
|
||
this.$nextTick(function() {
|
||
uniShare.hide()
|
||
})
|
||
return uniShare.isShow;
|
||
}
|
||
},
|
||
methods: {
|
||
// 提交购买单
|
||
buyGoods() {
|
||
let token = this.$store.getters.getToken
|
||
if (token == '') {
|
||
let userLogin = new userAuth()
|
||
userLogin.Login()
|
||
return
|
||
}
|
||
// this.$Router.push({
|
||
// name: 'Buy',
|
||
// params: {
|
||
// skuId: this.goodsObj.skus[0].sku_id,
|
||
// qty : this.goodsObj.skus[0].number
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/pages/goods/confirmOrder?qty=1&type=2&goods_sku_id=' + this.goodsObj.skus[0].sku_id
|
||
})
|
||
},
|
||
// 打开微信小程序
|
||
onOpenWechat() {
|
||
plus.share.getServices(res => {
|
||
let sweixin = null;
|
||
for (let val of res) {
|
||
if (val.id === 'weixin') {
|
||
sweixin = val
|
||
}
|
||
}
|
||
/** 以此为例子 显示跳转引导页
|
||
* 'index_4'
|
||
* index 跳小程序企业首页
|
||
* 4 企业id
|
||
**/
|
||
if (sweixin != null) {
|
||
sweixin.launchMiniProgram({
|
||
id: this.company.original_id,
|
||
path: 'pages/login/guide?scene=index_' + this.company.company_id
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '当前环境不支持打开微信小程序',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 领取优惠券
|
||
drawCoupons(id) {
|
||
let token = this.$store.getters.getToken
|
||
if (token == '') {
|
||
let userLogin = new userAuth()
|
||
userLogin.Login()
|
||
return
|
||
}
|
||
managesCoupons(id).then(res => {
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择优惠券-显示
|
||
couponsOpne() {
|
||
this.$refs.couponsPopup.open('bottom')
|
||
},
|
||
|
||
// 选择优惠券-隐藏
|
||
couponsClose() {
|
||
this.$refs.couponsPopup.close()
|
||
},
|
||
|
||
// 查看保障服务-显示
|
||
serveOpne() {
|
||
this.$refs.servePopup.open('bottom')
|
||
},
|
||
|
||
// 查看保障服务-隐藏
|
||
serveClose() {
|
||
this.$refs.servePopup.close()
|
||
},
|
||
// 顶部菜单点击了分享功能
|
||
onNavigationBarButtonTap() {
|
||
let invite = this.goodsObj.user_invite || ''
|
||
let goods ='&GoodsId/$-?' + this.goodsObj.goods_id
|
||
let shareCode = invite === '' ?goods:invite.slice(0,2) + '$InviTaTiOn$CoDe/$-?' + invite.substring(2)+goods
|
||
console.log(shareCode)
|
||
uniShare.show({
|
||
content: {
|
||
type: 0,
|
||
href: 'https://www.lianshang.vip/app?parent_id=' + shareCode,
|
||
title: '链商星球 共创未来，一起搭建 链商经济的世界~',
|
||
summary: '链商星球APP你值得拥有~每日签到领贡献值~',
|
||
imageUrl: config.apiUrls+'images/top_logo.png'
|
||
},
|
||
menus: [{
|
||
"img": "/static/icons/payWay_icon_00.png",
|
||
"text": "微信好友",
|
||
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
|
||
"provider": "weixin",
|
||
"scene": "WXSceneSession"
|
||
}
|
||
},
|
||
{
|
||
"img": "/static/icons/share-pyq.png",
|
||
"text": "微信朋友圈",
|
||
"share": {
|
||
"provider": "weixin",
|
||
"scene": "WXSenceTimeline"
|
||
}
|
||
}
|
||
],
|
||
cancelText: "取消分享",
|
||
}, e => {
|
||
if(uniShare.isShow){
|
||
console.log('shareCode',shareCode)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
position: relative;
|
||
padding-top: 100%;
|
||
|
||
}
|
||
|
||
// 轮播图
|
||
.goods-covers {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
padding-top: 100%;
|
||
|
||
.swiper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品详情
|
||
.goods-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
background-color: white;
|
||
border-radius: $radius $radius 0 0;
|
||
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
||
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
||
|
||
// 详情
|
||
.header {
|
||
padding: 0 $padding $padding;
|
||
|
||
.title {
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
line-height: 50rpx;
|
||
|
||
.title-hot {
|
||
display: inline-block;
|
||
background-image: linear-gradient(to left, #fee195, #fee195);
|
||
font-size: 24rpx;
|
||
border-radius: 50rpx;
|
||
padding: 0 10rpx;
|
||
height: 34rpx;
|
||
line-height: 36rpx;
|
||
margin: 6rpx 10rpx 0 0;
|
||
}
|
||
}
|
||
|
||
.sub-title {
|
||
line-height: 40rpx;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
padding-bottom: $padding/3;
|
||
}
|
||
|
||
.flex-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 90rpx;
|
||
|
||
.price {
|
||
font-weight: bold;
|
||
color: $text-price;
|
||
font-size: $title-size + 14;
|
||
|
||
text {
|
||
font-size: 70%;
|
||
}
|
||
|
||
width: calc(60% - #{$padding});
|
||
}
|
||
|
||
.sales {
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
width: 40%;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
// 新增优惠券
|
||
.coupon {
|
||
background-color: #fef2f2;
|
||
color: #e1293f;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #ffe5e5;
|
||
padding: $padding - 15;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
position: relative;
|
||
margin-bottom: $margin - 10;
|
||
|
||
.coupon-list {
|
||
font-size: 22rpx;
|
||
|
||
.coupon-label {
|
||
display: inline-block;
|
||
border: 1rpx solid #e998a1;
|
||
border-radius: 50rpx;
|
||
padding: 0 15rpx;
|
||
height: 34rpx;
|
||
line-height: 34rpx;
|
||
margin-right: $margin - 10;
|
||
}
|
||
}
|
||
|
||
.coupon-btn {
|
||
position: absolute;
|
||
right: $padding - 20;
|
||
top: 0;
|
||
line-height: 60rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
font-weight: 700;
|
||
|
||
.coupon-btn-img {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin: 20rpx 0 0 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新增服务
|
||
.goods-serve {
|
||
display: flex;
|
||
|
||
.goods-serve-img {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.goods-serve-name {
|
||
margin: 0 30rpx 0 20rpx;
|
||
width: calc(100% - 122rpx);
|
||
|
||
text {
|
||
padding-right: $padding;
|
||
position: relative;
|
||
|
||
&:last-child {
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 店铺
|
||
.store {
|
||
position: relative;
|
||
margin: 0 $margin;
|
||
background: #F8F8F8;
|
||
border-radius: $radius/2;
|
||
padding: $padding;
|
||
min-height: 220rpx;
|
||
|
||
.logo {
|
||
position: absolute;
|
||
left: $margin;
|
||
top: $margin;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: $radius/2;
|
||
}
|
||
|
||
.store-cont {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding-left: 150rpx;
|
||
padding-top: 20rpx;
|
||
box-sizing: border-box;
|
||
height: 140rpx;
|
||
}
|
||
|
||
.tooSee {
|
||
position: absolute;
|
||
top: 150rpx;
|
||
left: 0;
|
||
font-size: 24rpx;
|
||
padding-left: $padding;
|
||
box-sizing: border-box;
|
||
|
||
.tooSee-label {
|
||
background-color: #fd683e;
|
||
border-radius: 8rpx 4rpx 4rpx 6rpx;
|
||
color: #FFFFFF;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
padding: 0 $padding - 15;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
margin-right: $margin * 2;
|
||
position: relative;
|
||
|
||
&::after,
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
}
|
||
|
||
&::after {
|
||
right: -40rpx;
|
||
top: 0;
|
||
background-color: #f64c37;
|
||
width: 40rpx;
|
||
height: 100%;
|
||
border-radius: 4rpx 8rpx 8rpx 4rpx;
|
||
}
|
||
|
||
&::before {
|
||
right: -1rpx;
|
||
top: 5%;
|
||
border: 1rpx dashed #fb745a;
|
||
height: 90%;
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&:last-child {
|
||
margin: 0;
|
||
}
|
||
|
||
&:first-child {
|
||
background-color: #f2d7aa;
|
||
color: #362507;
|
||
}
|
||
|
||
&:first-child::after {
|
||
background-color: #f1d599;
|
||
}
|
||
|
||
&:first-child::before {
|
||
border-color: #fae2b9;
|
||
}
|
||
|
||
.tooSee-label-img {
|
||
position: absolute;
|
||
right: -34rpx;
|
||
top: 12rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
z-index: 9;
|
||
}
|
||
|
||
&:first-child .tooSee-label-img {
|
||
filter: brightness(.2)
|
||
}
|
||
}
|
||
}
|
||
|
||
.store-title {
|
||
font-size: $title-size-lg;
|
||
font-weight: bold;
|
||
line-height: 60rpx;
|
||
color: $text-color;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
// rate
|
||
.openbtn {
|
||
position: absolute;
|
||
right: $margin - 10;
|
||
top: $margin * 3.5;
|
||
color: #848484;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
font-size: $title-size-m;
|
||
margin-top: -30rpx;
|
||
display: flex;
|
||
|
||
.openbtn-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
filter: brightness(.5);
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 产品规格
|
||
.size {
|
||
margin-top: $margin;
|
||
border-top: solid 20rpx #F8F8F8;
|
||
border-bottom: solid 20rpx #F8F8F8;
|
||
|
||
.size-item {
|
||
position: relative;
|
||
padding: 0 $padding 0 ($padding + 100);
|
||
line-height: 90rpx;
|
||
font-size: $title-size-m;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
left: $margin;
|
||
right: 0;
|
||
bottom: 0;
|
||
content: " ";
|
||
height: 1rpx;
|
||
background-color: $border-color;
|
||
}
|
||
|
||
&:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: $margin;
|
||
top: 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 产品详情
|
||
.product {
|
||
image {
|
||
vertical-align: top;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 立即购买
|
||
.footer {
|
||
padding: $padding;
|
||
background: white;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 99;
|
||
box-sizing: border-box;
|
||
|
||
.btn[size='default'] {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
box-sizing: border-box;
|
||
background: $text-price;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: $title-size;
|
||
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
|
||
}
|
||
}
|
||
|
||
// 优惠券弹出样式
|
||
.coupons-popup {
|
||
background-color: #FFFFFF;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
|
||
.coupons-header {
|
||
text-align: center;
|
||
position: relative;
|
||
margin-bottom: $margin*1.5;
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 2;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
|
||
.coupons-cont {
|
||
.coupons-name {
|
||
color: #616065;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.coupons-list {
|
||
border: 2rpx solid #d6b9be;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-top: $margin;
|
||
|
||
// background-color: red;
|
||
.coupons-tips {
|
||
// background-color: #211e17;
|
||
background-image: linear-gradient(to right, #f8e5c0, #d6a46a);
|
||
color: #8d4928;
|
||
position: absolute;
|
||
border-radius: 0 0 20rpx 0;
|
||
padding: 0 8rpx;
|
||
height: 34rpx;
|
||
line-height: 34rpx;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
|
||
.coupons-tips-text {
|
||
font-size: 24rpx;
|
||
transform: scale(.85);
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.coupons-left {
|
||
background-color: #fdedee;
|
||
color: #e1293f;
|
||
width: 190rpx;
|
||
text-align: center;
|
||
padding: $padding - 10 0;
|
||
border-right: 2rpx dashed #eccdd4;
|
||
|
||
.coupon-left-img {
|
||
width: 180rpx;
|
||
height: 100rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.coupons-number {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
&.coupons-small {
|
||
font-size: 32rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.coupons-full {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.coupons-center {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding: $padding - 10 130rpx 0 220rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
|
||
.coupons-time {
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
color: #514c51;
|
||
}
|
||
}
|
||
|
||
.coupons-right {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 36rpx;
|
||
width: 110rpx;
|
||
text-align: center;
|
||
background-color: #e1293f;
|
||
color: #FFFFFF;
|
||
border-radius: 80rpx;
|
||
font-size: 24rpx;
|
||
line-height: 52rpx;
|
||
|
||
&.coupons-right-active {
|
||
background-color: #adadad;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupons-true {
|
||
background-image: linear-gradient(to right, #e1293f, #fd275d);
|
||
color: #FFFFFF;
|
||
border-radius: 80rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
margin-top: $margin*5;
|
||
}
|
||
}
|
||
|
||
// 新增服务保障样式
|
||
.serve-label {
|
||
margin-top: $margin + 10;
|
||
font-size: 28rpx;
|
||
|
||
.serve-label-name {
|
||
font-weight: 700;
|
||
margin-bottom: $margin - 10;
|
||
}
|
||
|
||
.serve-label-text {
|
||
line-height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.serve-cont {
|
||
height: 40vh;
|
||
overflow-y: scroll;
|
||
}
|
||
</style>
|