22 changed files with 2650 additions and 1371 deletions
@ -1,8 +1,8 @@
|
||||
// export const VUE_APP_API_URL = 'http://192.168.10.129:48080/bxgApp'
|
||||
// export const VUE_APP_API_URL = 'http://192.168.10.113:48080/bxgApp'
|
||||
export const VUE_APP_API_URL = 'https://farm.lotus-wallet.com/bxgApp' |
||||
export const VUE_APP_API_URL = 'http://192.168.10.113:48080/bxgApp' |
||||
// export const VUE_APP_API_URL = 'https://farm.lotus-wallet.com/bxgApp'
|
||||
// export const VUE_APP_API_URL = 'https://xiaohui.shop.cyjyyjy.com/xiaohuiapp'
|
||||
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static' |
||||
export const BXG_TENANT_ID = 129 |
||||
// export const BXG_TENANT_ID = 138
|
||||
// export const BXG_TENANT_ID = 129
|
||||
export const BXG_TENANT_ID = 138 |
||||
// export const BXG_TENANT_ID = 128
|
||||
@ -0,0 +1,433 @@
|
||||
<template> |
||||
<view class="product-con"> |
||||
<view class="header"> |
||||
<cu-custom :isBack="true" :isCenter="true" > |
||||
<block slot="backText"> |
||||
<view class="backImg"> |
||||
<image src="@/static/images/back-btn.png" mode=""></image> |
||||
</view> |
||||
</block> |
||||
</cu-custom> |
||||
</view> |
||||
|
||||
<!-- 商品轮播 --> |
||||
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper> |
||||
|
||||
<view class="tui-pro-detail"> |
||||
<view class="activity-info-box"> |
||||
<view class="tui-right__box"> |
||||
<view class="acea-row row-middle row-center"> |
||||
<view class="iconfont icon-kanjia"></view> |
||||
<text>砍价活动</text> |
||||
</view> |
||||
<view class="count-down-box"> |
||||
<count-down :isSecond="false" :datatime="goodsDetail.stopTime" :styleAllStyle="styleAllStyle" :timeTxtStyle="timeTxtStyle"></count-down> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="tui-pro-price"> |
||||
<text class="tui-price">¥{{goodsDetail.minPrice}}</text> |
||||
<view class="tui-original-price">¥{{goodsDetail.price}}</view> |
||||
</view> |
||||
|
||||
<view class="tui-pro-title">{{ goodsDetail.title }}</view> |
||||
<view class="tui-pro-info">{{ goodsDetail.info }}</view> |
||||
<view class="tui-sale-info"> |
||||
<view class="tips acea-row"> |
||||
<view class="tip">甄选品牌</view> |
||||
</view> |
||||
<view>库存：{{ goodsDetail.stock }}{{ goodsDetail.unitName }}</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="safeguard-info acea-row row-between-wrapper"> |
||||
<view class="safeguard-item"> |
||||
<image class="img" src="@/static/images/by.png" mode=""></image> |
||||
<view>满{{199}}包邮</view> |
||||
</view> |
||||
<view class="line"></view> |
||||
<view class="safeguard-item"> |
||||
<image class="img" src="@/static/images/fxt.png" mode=""></image> |
||||
<view>7天无理由</view> |
||||
</view> |
||||
<view class="line"></view> |
||||
<view class="safeguard-item"> |
||||
<image class="img" src="@/static/images/bj.png" mode=""></image> |
||||
<view>30天保价</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 用户评价 --> |
||||
<!-- <view class="userEvaluation" v-if="replyCount"> |
||||
<view class="title acea-row row-between-wrapper" @click="goEvaluateList(storeInfo.productId)"> |
||||
<view class="acea-row row-middle"><text>评价</text><text class="replyCount">{{ replyCount }}</text></view> |
||||
<view @click="goEvaluateList(id)" class="praise acea-row row-middle"> |
||||
<view>好评率{{ replyChance }}%</view> |
||||
<view class="jiantou-right"></view> |
||||
</view> |
||||
</view> |
||||
<user-evaluation :reply="reply"></user-evaluation> |
||||
</view> --> |
||||
|
||||
<view class="product-intro"> |
||||
<view class="title">商品展示</view> |
||||
<view class="conter" v-html="goodsDetail.description"></view> |
||||
</view> |
||||
|
||||
<view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view> |
||||
<!--底部操作栏--> |
||||
<view class="tui-operation acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'"> |
||||
<view class="tui-operation-left acea-row row-between"> |
||||
<!-- #ifdef MP-WEIXIN --> |
||||
<button class="tui-operation-item" open-type="contact" hover-class="tui-opcity" :hover-stay-time="150"> |
||||
<image src="@/static/images/service-icon.png" mode=""></image> |
||||
<view class="tui-operation-text">客服</view> |
||||
</button> |
||||
<!-- #endif --> |
||||
|
||||
<view @click="goShoppingCart" class="tui-operation-item"> |
||||
<image src="@/static/images/cart-icon.png" mode=""></image> |
||||
<view class="tui-operation-text">购物车</view> |
||||
</view> |
||||
|
||||
<!-- <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect"> |
||||
<image v-if="userCollect" src="@/static/images/star-light.png" mode=""></image> |
||||
<image v-else src="@/static/images/star.png" mode=""></image> |
||||
<view class="tui-operation-text">{{userCollect?'已收藏':'收藏'}}</view> |
||||
</view> --> |
||||
</view> |
||||
|
||||
<view class="tui-operation-right acea-row"> |
||||
<view class="btn other-col" @click="openAlone">原价购买</view> |
||||
<view class="btn" @click="goDargain">发起砍价</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import ProductConSwiper from '@/components/ProductConSwiper'; |
||||
import CountDown from '@/components/CountDown'; |
||||
import { getBargainDetail } from '@/api/activity'; |
||||
import { handleQrCode } from '@/utils/index' |
||||
export default { |
||||
components: { |
||||
ProductConSwiper, |
||||
CountDown, |
||||
}, |
||||
data() { |
||||
return { |
||||
addBottom: this.addBottom, |
||||
goodsDetail: {}, |
||||
bargainId: 0, |
||||
bargainUid: 0, |
||||
imgUrls: [], |
||||
styleAllStyle: 'width:30rpx;height:24rpx;background:#F5F6F8;border-radius:8rpx;font-size:20rpx;color:#3A3A3C;line-height:24rpx;', |
||||
timeTxtStyle: 'font-size:20rpx;color:#F5F6F8;line-height:24rpx;padding:0rpx 4rpx;', |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
let url = handleQrCode() |
||||
// bargainId 砍价商品id |
||||
// bargainUid 发起砍价人 |
||||
if (url) { |
||||
// 通过二维码进来 |
||||
this.bargainId = url.bargainId |
||||
// this.bargainUid = url.partake |
||||
} else { |
||||
// 正常途径进来 |
||||
this.bargainId = this.$yroute.query.id |
||||
// this.bargainUid = this.$yroute.query.partake |
||||
} |
||||
// if (this.bargainUid == 0 || !this.bargainUid) { |
||||
// // url未携带用户uid，填上登录用户uid，跳转 |
||||
// this.bargainUid = this.userInfo.uid |
||||
// } |
||||
this.getBargainDetail(); |
||||
}, |
||||
methods: { |
||||
// 获取产品详情 |
||||
getBargainDetail() { |
||||
uni.showLoading({ |
||||
title: '加载中', |
||||
mask: true, |
||||
}) |
||||
getBargainDetail(this.bargainId).then(res => { |
||||
uni.hideLoading() |
||||
this.goodsDetail = res.data.bargain; |
||||
this.imgUrls.push(this.goodsDetail.image); |
||||
// console.log(this.goodsDetail); |
||||
this.goodsDetail.description = this.goodsDetail.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"'); |
||||
this.goodsDetail.rule = this.goodsDetail.rule.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"'); |
||||
}).catch(res => { |
||||
uni.hideLoading() |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: 'none', |
||||
duration: 2000, |
||||
}) |
||||
}) |
||||
}, |
||||
goShoppingCart() { |
||||
uni.setStorageSync('pathToCart', '/pages/activity/DargainGoodsDetails/index?id='+ this.bargainId +'&partake=0'); |
||||
this.$yrouter.switchTab('/pages/shop/ShoppingCart/index'); |
||||
}, |
||||
// 单独购买 |
||||
openAlone() { |
||||
this.$yrouter.push({ |
||||
path: '/pages/shop/GoodsCon/index', |
||||
query: { |
||||
id: this.goodsDetail.productId, |
||||
}, |
||||
}) |
||||
}, |
||||
goDargain() { |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/DargainDetails/index", |
||||
query: { id: this.bargainId, partake: 0 } |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.header { |
||||
.tab-title { |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #2DB5AE; |
||||
line-height: 42rpx; |
||||
} |
||||
.backImg { |
||||
width: 88rpx; |
||||
height: 62rpx; |
||||
padding-left: 26rpx; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tui-pro-detail { |
||||
margin: 8rpx 32rpx 20rpx; |
||||
width: 686rpx; |
||||
// height: 230rpx; |
||||
background: #F5F6F8; |
||||
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
||||
border-radius: 16rpx; |
||||
padding: 24rpx; |
||||
|
||||
position: relative; |
||||
} |
||||
|
||||
.activity-info-box { |
||||
position: absolute; |
||||
top: 0rpx; |
||||
right: 24rpx; |
||||
width: 220rpx; |
||||
height: 74rpx; |
||||
overflow: hidden; |
||||
.tui-right__box { |
||||
padding-top: 8rpx; |
||||
width: 188rpx; |
||||
height: 74rpx; |
||||
background: #2DB5AE; |
||||
border-radius: 0rpx 0rpx 16rpx 16rpx; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin: 0rpx 16rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #FFFFFF; |
||||
line-height: 26rpx; |
||||
.iconfont.icon-kanjia { |
||||
font-size: 26rpx; |
||||
font-weight: 500; |
||||
line-height: 26rpx; |
||||
margin-right: 6rpx; |
||||
} |
||||
.count-down-box { |
||||
padding-top: 6rpx; |
||||
padding-left: 10rpx; |
||||
} |
||||
} |
||||
.tui-right__box::after { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
content: ""; |
||||
position: absolute; |
||||
top: 0; |
||||
left: -32rpx; |
||||
border-radius: 16rpx; |
||||
box-shadow: 16rpx -16rpx 0rpx #2DB5AE; |
||||
} |
||||
.tui-right__box::before { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
content: ""; |
||||
position: absolute; |
||||
top: 0; |
||||
right: -32rpx; |
||||
border-radius: 16rpx; |
||||
box-shadow: -16rpx -16rpx 0rpx #2DB5AE; |
||||
} |
||||
} |
||||
|
||||
.tui-pro-price { |
||||
font-size: 48rpx; |
||||
font-family: Futura; |
||||
font-weight: 600; |
||||
color: #3A3A3C; |
||||
line-height: 64rpx; |
||||
display: flex; |
||||
.tui-original-price { |
||||
padding-top: 18rpx; |
||||
font-size: 30rpx; |
||||
font-family: Futura; |
||||
font-weight: 600; |
||||
color: #999999; |
||||
line-height: 40rpx; |
||||
padding-left: 16rpx; |
||||
text-decoration: line-through; |
||||
} |
||||
} |
||||
|
||||
.tui-pro-title { |
||||
font-size: 34rpx; |
||||
font-family: SourceHanSansSCVF; |
||||
font-weight: 600; |
||||
color: #3A3A3C; |
||||
line-height: 50rpx; |
||||
} |
||||
.tui-pro-info { |
||||
font-size: 20rpx; |
||||
font-family: SourceHanSansSCVF; |
||||
font-weight: 600; |
||||
color: #999999; |
||||
line-height: 28rpx; |
||||
} |
||||
|
||||
.tui-sale-info { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding-top: 16rpx; |
||||
font-size: 20rpx; |
||||
font-family: SourceHanSansSCVF; |
||||
font-weight: 500; |
||||
color: #999999; |
||||
line-height: 28rpx; |
||||
.tips { |
||||
padding-top: 4rpx; |
||||
.tip { |
||||
width: 80rpx; |
||||
height: 26rpx; |
||||
background: #2DB5AE; |
||||
border-radius: 6rpx; |
||||
margin-right: 4rpx; |
||||
font-size: 16rpx; |
||||
font-family: PingFang SC; |
||||
color: #FFFFFF; |
||||
line-height: 26rpx; |
||||
text-align: center; |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.safeguard-info { |
||||
width: 686rpx; |
||||
height: 120rpx; |
||||
background: #F5F6F8; |
||||
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
||||
border-radius: 16rpx; |
||||
padding: 18rpx 0rpx; |
||||
margin: 0rpx 32rpx 20rpx; |
||||
.safeguard-item { |
||||
width: 226rpx; |
||||
font-size: 20rpx; |
||||
font-family: SourceHanSansSCVF; |
||||
font-weight: 600; |
||||
color: #999999; |
||||
line-height: 28rpx; |
||||
text-align: center; |
||||
.img { |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
} |
||||
} |
||||
.line { |
||||
width: 2rpx; |
||||
height: 84rpx; |
||||
background-color: #979797; |
||||
} |
||||
} |
||||
|
||||
.tui-operation { |
||||
width: 100%; |
||||
position: fixed; |
||||
z-index: 100; |
||||
bottom: 0; |
||||
left: 0; |
||||
background: #F1F1F1; |
||||
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2); |
||||
border-radius: 28rpx 28rpx 0rpx 0rpx; |
||||
.tui-operation-left { |
||||
padding: 12rpx 28rpx; |
||||
width: 220rpx; |
||||
// width: 330rpx; |
||||
.tui-operation-item { |
||||
width: 60rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
background: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
border: 0; |
||||
|
||||
image { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
} |
||||
&:after { |
||||
display: none; |
||||
} |
||||
.tui-operation-text { |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #3A3A3C; |
||||
line-height: 22rpx; |
||||
} |
||||
} |
||||
} |
||||
.tui-operation-right { |
||||
padding-top: 18rpx; |
||||
padding-right: 18rpx; |
||||
.btn { |
||||
width: 186rpx; |
||||
height: 66rpx; |
||||
background: #2DB5AE; |
||||
border-radius: 16rpx; |
||||
font-size: 26rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #FFFFFF; |
||||
line-height: 66rpx; |
||||
text-align: center; |
||||
margin-right: 14rpx; |
||||
} |
||||
.other-col { |
||||
background: #98DAD7; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,302 +0,0 @@
|
||||
<template> |
||||
<view> |
||||
<view class="header"> |
||||
<cu-custom :isBack="true" :isCenter="true"> |
||||
<block slot="backText"> |
||||
<view class="backImg"> |
||||
<image src="@/static/images/back-btn.png" mode=""></image> |
||||
</view> |
||||
</block> |
||||
<block slot="content"> |
||||
<view class="tab-title">积分兑换</view> |
||||
</block> |
||||
</cu-custom> |
||||
</view> |
||||
|
||||
<view class="banner-box"> |
||||
<swiper class="swiper-wrapper" @change="handleChange" :autoplay="true"> |
||||
<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex"> |
||||
<swiper-item> |
||||
<view class="image">{{item}}</view> |
||||
<!-- <image class="image" :src="item" class="slide-image" mode="aspectFill"/> --> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
<view class="dots-box acea-row row-center"> |
||||
<view class="dot" v-for="(item,index) in imgUrls" :key="index"> |
||||
<view :class="(currents > index?'active2 ':'active ') + (currents == index?'on':(currents-1 == index?'on2':''))"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="integral-box acea-row row-between"> |
||||
<view class="integral"> |
||||
<view class="title">我的积分</view> |
||||
<view class="acea-row"> |
||||
<view class="item" v-for="(item, integralIndex) in integral" :key="integralIndex"> |
||||
<view class="top"></view> |
||||
<view class="bottom"></view> |
||||
<view class="num">{{ item || 0 }}</view> |
||||
</view> |
||||
</view> |
||||
<view @click="goIntegral" class="btn acea-row row-between-wrapper"> |
||||
<image src="@/static/images/mingxi.png" mode=""></image> |
||||
<view>明细</view> |
||||
</view> |
||||
</view> |
||||
<view class="integral get-way acea-row row-column row-between"> |
||||
<view class="title">获取积分</view> |
||||
<view class="acea-row row-between"> |
||||
<view class="btn2">去签到</view> |
||||
<view class="btn2">去下单</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="list-box"> |
||||
<view class="title">积分兑换</view> |
||||
<PromotionGood :benefit="productList" :isIntegral="true" /> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from 'vuex'; |
||||
import store from '@/store'; |
||||
import PromotionGood from '@/components/PromotionGood'; |
||||
import { getProductsIntegral } from '@/api/store'; |
||||
export default { |
||||
components: { |
||||
PromotionGood |
||||
}, |
||||
data() { |
||||
return { |
||||
currents: 0, |
||||
imgUrls: 5, |
||||
integral: 0, |
||||
from: { |
||||
page: 1, |
||||
limit: 15, |
||||
// sid: 0, |
||||
news: 0, |
||||
isIntegral: 1 |
||||
}, |
||||
productList: [], |
||||
}; |
||||
}, |
||||
computed: mapGetters(['userInfo']), |
||||
onLoad() { |
||||
getProductsIntegral(this.from).then(res => { |
||||
this.productList.push.apply(this.productList, res.data); |
||||
}) |
||||
}, |
||||
onShow() { |
||||
if (this.$store.getters.token) { |
||||
this.$store.dispatch('getUser', true); |
||||
} |
||||
if(this.userInfo.integral === undefined) this.userInfo.integral = 0; |
||||
this.integral = this.prefixInteger(this.userInfo.integral, 5); |
||||
console.log('userInfo', this.userInfo); |
||||
}, |
||||
methods: { |
||||
handleChange(e) { |
||||
this.currents = e.mp.detail.current; |
||||
}, |
||||
// 给数字补0；num：需要补0的数字，length：长度（补到多少位） |
||||
prefixInteger(num, length) { |
||||
return (Array(length).join("0") + num).slice(-length).split(""); |
||||
}, |
||||
goIntegral() { |
||||
this.$yrouter.push('/pages/user/signIn/Integral/index') |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.header { |
||||
.tab-title { |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 600; |
||||
color: #2DB5AE; |
||||
line-height: 42rpx; |
||||
} |
||||
.backImg { |
||||
width: 88rpx; |
||||
height: 62rpx; |
||||
padding-left: 26rpx; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.banner-box { |
||||
padding: 20rpx 32rpx; |
||||
.swiper-wrapper { |
||||
width: 686rpx; |
||||
height: 398rpx; |
||||
border-radius: 16rpx; |
||||
.image { |
||||
width: 686rpx; |
||||
height: 398rpx; |
||||
border-radius: 16rpx; |
||||
background-color: #FFFFFF; |
||||
} |
||||
} |
||||
.dots-box { |
||||
padding-top: 26rpx; |
||||
.dot { |
||||
width: 92rpx; |
||||
height: 4rpx; |
||||
background: #CCEDEB; |
||||
margin: 0rpx 6rpx; |
||||
position: relative; |
||||
.active { |
||||
width: 0rpx; |
||||
height: 4rpx; |
||||
background: #2DB5AE; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
} |
||||
.active2 { |
||||
width: 0rpx; |
||||
height: 4rpx; |
||||
background: #2DB5AE; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 92rpx; |
||||
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
} |
||||
.active.on { |
||||
width: 92rpx; |
||||
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
} |
||||
.active.on2 { |
||||
width: 92rpx; |
||||
left: 0; |
||||
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.integral-box { |
||||
padding: 6rpx 32rpx 12rpx; |
||||
.title { |
||||
font-size: 26rpx; |
||||
font-family: PingFangTC; |
||||
font-weight: 600; |
||||
color: #F5F6F8; |
||||
line-height: 34rpx; |
||||
padding-bottom: 8rpx; |
||||
} |
||||
.integral { |
||||
width: 480rpx; |
||||
height: 130rpx; |
||||
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%); |
||||
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
||||
border-radius: 16rpx; |
||||
padding: 18rpx; |
||||
position: relative; |
||||
.item { |
||||
position: relative; |
||||
margin-right: 6rpx; |
||||
.top { |
||||
width: 40rpx; |
||||
height: 26rpx; |
||||
background: #3A3A3C; |
||||
border-radius: 8rpx 8rpx 0rpx 0rpx; |
||||
margin-bottom: 4rpx; |
||||
} |
||||
.bottom { |
||||
width: 40rpx; |
||||
height: 26rpx; |
||||
background: #3A3A3C; |
||||
border-radius: 0rpx 0rpx 8rpx 8rpx; |
||||
} |
||||
.num { |
||||
width: 40rpx; |
||||
height: 56rpx; |
||||
font-size: 40rpx; |
||||
font-family: Futura; |
||||
font-weight: 600; |
||||
color: #F5F6F8; |
||||
line-height: 56rpx; |
||||
text-align: center; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
position: absolute; |
||||
bottom: 18rpx; |
||||
right: 18rpx; |
||||
width: 70rpx; |
||||
height: 26rpx; |
||||
padding: 0rpx 8rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 16rpx; |
||||
font-size: 16rpx; |
||||
font-family: PingFangTC; |
||||
font-weight: 600; |
||||
color: #2DB5AE; |
||||
line-height: 26rpx; |
||||
image { |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.integral-box .get-way { |
||||
width: 184rpx; |
||||
height: 130rpx; |
||||
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%); |
||||
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
||||
border-radius: 16rpx; |
||||
.btn2 { |
||||
width: 70rpx; |
||||
height: 26rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 16rpx; |
||||
font-size: 16rpx; |
||||
font-family: PingFangTC; |
||||
font-weight: 600; |
||||
color: #2DB5AE; |
||||
line-height: 26rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.list-box { |
||||
.title { |
||||
font-size: 30rpx; |
||||
font-family: SourceHanSansSCVF; |
||||
font-weight: 600; |
||||
color: #3A3A3C; |
||||
line-height: 46rpx; |
||||
padding: 20rpx 32rpx; |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 457 B |
Loading…
Reference in new issue