523 lines
13 KiB
Vue
523 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="main" style="padding-bottom: 160rpx;">
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<status-nav :ifReturn="false" :ifTitle="false" :backgroudColor="backgroudColor"></status-nav>
|
|||
|
|
<!-- 顶部按钮 -->
|
|||
|
|
<view class="top-btns" :style="{top:statusHeight+'px'}">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="btn" @tap="backEv">
|
|||
|
|
<image src="/static/icon/icon-arrow-top.png" mode="heightFix"
|
|||
|
|
style="height: 28rpx;margin-right:4rpx"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<!-- 内容区 -->
|
|||
|
|
<view :style="{marginTop: -statusHeight-50+'px'}">
|
|||
|
|
<!-- 轮播 -->
|
|||
|
|
<view class="goods-banner">
|
|||
|
|
<swiper-pu newRadius="0rpx" :bannerList="goodsInfo.images" :newHeight="goodsBannerHeight+'px'"
|
|||
|
|
:newBottom="'18rpx'" :isplay="isplay" :isDot="false" :isNum="true"></swiper-pu>
|
|||
|
|
</view>
|
|||
|
|
<!-- 简介 -->
|
|||
|
|
<view class="section-other goods-info" v-if="isLoading">
|
|||
|
|
<view class="detail-price">
|
|||
|
|
<view class="price" v-if="goodsInfo.price != 0">
|
|||
|
|
<text>￥</text>
|
|||
|
|
<text>{{goodsInfo.price.substr(0,goodsInfo.price.indexOf('.'))}}</text>
|
|||
|
|
<text>{{goodsInfo.price.substr(goodsInfo.price.indexOf('.'),goodsInfo.price.length)}}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="amount">销量：{{goodsInfo.total_amount}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">{{goodsInfo.name}}</view>
|
|||
|
|
<view class="subtitle">{{goodsInfo.subtitle}}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 选择 -->
|
|||
|
|
<view class="section-other goods-chose" v-if="isLoading">
|
|||
|
|
<view class="chose-item" @click="popupShow = true">
|
|||
|
|
<view class="tit">
|
|||
|
|
<text>选择</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn">
|
|||
|
|
<u-icon color="#999" size="18" name="arrow-right"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<view class="pull-title">商品详情</view>
|
|||
|
|
<!-- 详情 -->
|
|||
|
|
<view class="section-other goods-details" v-if="isLoading">
|
|||
|
|
<view class="rich">
|
|||
|
|
<rich-text :nodes="goodsInfo.content"></rich-text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<!-- <view class="pull-title">相关推荐</view>
|
|||
|
|
<view class="relevant-goods">
|
|||
|
|
<view class="content">
|
|||
|
|
<waterfallsFlow :list="goodsList" ref="waterfallsFlow">
|
|||
|
|
<view v-for="(item, index) of goodsList" :key="index" slot="slot{{index}}"></view>
|
|||
|
|
</waterfallsFlow>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 返回顶部 -->
|
|||
|
|
<view class="back-top" :style="{zIndex:zIndex,opacity:zIndex==-1?0:1}" @tap="goTop">
|
|||
|
|
<image src="/static/icon/icon-back-top.jpg" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<!-- 尾部 -->
|
|||
|
|
<view class="detail-foot">
|
|||
|
|
<view class="collection-btn" @tap="goHome">
|
|||
|
|
<u-icon name="home" color="#999" size="24"></u-icon>
|
|||
|
|
<text>首页</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="collection-btn" @tap="recordEv" v-if="goodsInfo.collected==0">
|
|||
|
|
<u-icon name="star" color="#999" size="24"></u-icon>
|
|||
|
|
<text>收藏</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="collection-btn" @tap="unRecordEv" v-if="goodsInfo.collected==1">
|
|||
|
|
<u-icon name="star-fill" color="#bd1121" size="24"></u-icon>
|
|||
|
|
<text style="color: #bd1121;">已收藏</text>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<view class="collection-btn pr">
|
|||
|
|
<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
|
|||
|
|
class="service-btns"></button>
|
|||
|
|
<u-icon name="kefu-ermai" color="#999" size="24"></u-icon>
|
|||
|
|
<text>客服</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="cart-btn">
|
|||
|
|
<!-- <view class="btn" @tap="addCart">加入购物车</view> -->
|
|||
|
|
<view class="btn" @tap="popupShow = true">立即购买</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--底部选择层-->
|
|||
|
|
<u-popup :show="popupShow" tui-popup-class="tui-popup" @close="close">
|
|||
|
|
<view class="tui-popup-box">
|
|||
|
|
<view class="tui-product-box tui-padding mb20">
|
|||
|
|
<image :src="baseHttps + goodsInfo.cover" class="tui-popup-img"></image>
|
|||
|
|
<view class="tui-popup-price goods-info">
|
|||
|
|
<view class="title line-2">
|
|||
|
|
{{goodsInfo.name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-price m-t-10">
|
|||
|
|
<view class="price">
|
|||
|
|
<text>￥</text>
|
|||
|
|
<text>{{specData.price}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="selectSpec" v-if="specData.title">
|
|||
|
|
已选：{{specData.title}}
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-y class="tui-popup-scroll tui-padding" style="max-height: 600rpx;">
|
|||
|
|
<view v-for="(item,index) in goodsInfo.spec.spec">
|
|||
|
|
<view class="tui-scrollview-box">
|
|||
|
|
<view class="tui-attr-title">{{item.title}}</view>
|
|||
|
|
<view :class="itemed.show ? 'tui-attr-active':'tui-attr-item'" v-for="(itemed,indexed) in item.children"
|
|||
|
|
:key="indexed" @click.stop="speClick(index,itemed.id)">
|
|||
|
|
{{itemed.title}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tui-number-box tui-bold tui-attr-title">
|
|||
|
|
<view class="tui-attr-title">数量</view>
|
|||
|
|
<u-number-box :max="99" integer :min="1" v-model="sku_list.num"></u-number-box>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="detail-foot">
|
|||
|
|
<view class="cart-btn" style="width: 90%;margin: 0 auto;">
|
|||
|
|
<view class="btn" @tap="byNow">立即购买</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { getGoodsDetail, postCreate, getSpuList } from "@/api/index";
|
|||
|
|
import swiperPu from '@/components/swipers/swiper-pu';
|
|||
|
|
import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
swiperPu,
|
|||
|
|
waterfallsFlow
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
|||
|
|
baseHttps: `${getApp().globalData.hostapi}`, //接口链接
|
|||
|
|
backgroudColor: 'none', //状态栏背景颜色
|
|||
|
|
isplay: false, //是否自动轮播
|
|||
|
|
playTimer: null, //间隔时间
|
|||
|
|
goodsBannerHeight: 0, //轮播高度
|
|||
|
|
zIndex: -1, //层级
|
|||
|
|
goodsInfo: {}, //商品详情
|
|||
|
|
id: 0, //商品id
|
|||
|
|
isLoading: false,
|
|||
|
|
address: '', //地址
|
|||
|
|
|
|||
|
|
goodsList: [], //相关商品
|
|||
|
|
cartCount: 0, //购物车数量
|
|||
|
|
userInfo: {}, //用户信息
|
|||
|
|
|
|||
|
|
|
|||
|
|
popupShow: false,
|
|||
|
|
|
|||
|
|
sku_list:{
|
|||
|
|
sku_id:'',
|
|||
|
|
num:1
|
|||
|
|
}, //选择的规格参数
|
|||
|
|
|
|||
|
|
allSpecsList:[], //所有的规格列表
|
|||
|
|
specData:{}, //最后选择的规格信息
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(op) {
|
|||
|
|
|
|||
|
|
// 获取商品id
|
|||
|
|
if (op.id) this.id = op.id;
|
|||
|
|
// 判断是否有定位
|
|||
|
|
if (uni.getStorageSync('baseAddress')) {
|
|||
|
|
this.address = uni.getStorageSync('baseAddress');
|
|||
|
|
}
|
|||
|
|
// 获取商品信息
|
|||
|
|
this.getGoodsInfo();
|
|||
|
|
// 获取购物车数量
|
|||
|
|
// this.getCartCount();
|
|||
|
|
const query = wx.createSelectorQuery().in(this);
|
|||
|
|
query.select('.goods-banner').boundingClientRect((rect) => {
|
|||
|
|
this.goodsBannerHeight = rect.height;
|
|||
|
|
}).exec()
|
|||
|
|
},
|
|||
|
|
onPageScroll(object) {
|
|||
|
|
if (object.scrollTop >= 5) {
|
|||
|
|
this.backgroudColor = '#f7f7f7';
|
|||
|
|
}
|
|||
|
|
if (object.scrollTop <= 0) {
|
|||
|
|
this.backgroudColor = 'none';
|
|||
|
|
}
|
|||
|
|
if (object.scrollTop > uni.getSystemInfoSync().windowHeight) {
|
|||
|
|
this.zIndex = 999;
|
|||
|
|
} else {
|
|||
|
|
this.zIndex = -1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShareAppMessage(res) {
|
|||
|
|
return {
|
|||
|
|
title: this.goodsInfo.name,
|
|||
|
|
path: `${uni.getStorageSync('page-path-options')}?account_id=${uni.getStorageSync('accountId')}`,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onHide() {
|
|||
|
|
clearTimeout(this.playTimer);
|
|||
|
|
this.isplay = false;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//解析二维码
|
|||
|
|
analysis(val) {
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
let str = unescape(val);
|
|||
|
|
str = str.split('account_id=')[1];
|
|||
|
|
uni.setStorageSync('account_id', str);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取商品详情
|
|||
|
|
getGoodsInfo() {
|
|||
|
|
let pargams = {
|
|||
|
|
id :this.id
|
|||
|
|
}
|
|||
|
|
getGoodsDetail(pargams).then(res => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
let bannerArr = [];
|
|||
|
|
res.data.images.forEach(item => {
|
|||
|
|
let obj = {
|
|||
|
|
imgSrc: this.baseHttps + item,
|
|||
|
|
}
|
|||
|
|
bannerArr.push(obj);
|
|||
|
|
})
|
|||
|
|
res.data.images = bannerArr;
|
|||
|
|
|
|||
|
|
// 给每个规格添加show 标签
|
|||
|
|
if(res.data.spec.is_multi == 1) {
|
|||
|
|
this.sku_list.sku_id = res.data.spec.sku.id; //多规格默认的id
|
|||
|
|
res.data.spec.spec.map(item => {
|
|||
|
|
item.children.map(itemed => {
|
|||
|
|
itemed.show = false;
|
|||
|
|
})
|
|||
|
|
item.children[0].show = true
|
|||
|
|
})
|
|||
|
|
}else {
|
|||
|
|
this.sku_list.sku_id = res.data.spec.sku.id //单规格默认的id
|
|||
|
|
this.specData = res.data.spec.sku;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.goodsInfo = res.data;
|
|||
|
|
this.goodsInfo.content = this.$toolAll.tools.escape2Html(res.data.content);
|
|||
|
|
console.log(this.goodsInfo,'商品详情');
|
|||
|
|
|
|||
|
|
this.allSpecsList = this.goodsInfo.spec.sku_list;
|
|||
|
|
if(this.goodsInfo.spec.is_multi == 1) {
|
|||
|
|
this.getPrice(); //初始获取价格
|
|||
|
|
}
|
|||
|
|
this.isLoading = true;
|
|||
|
|
// 获取商品列表
|
|||
|
|
// this.getGoodsList();
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//返回事件
|
|||
|
|
backEv() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
fail: () => {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/home/home'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 页面跳转
|
|||
|
|
goPage(url) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: url
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回顶部
|
|||
|
|
goTop() {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: 0,
|
|||
|
|
duration: 300
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
goHome() {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/home/home'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭弹框
|
|||
|
|
close() {
|
|||
|
|
this.popupShow = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 选择规格 index 为第几个规格列表，id 为当前规格列表的某个id
|
|||
|
|
speClick(index,id) {
|
|||
|
|
console.log(index,'当前id为: ' + id)
|
|||
|
|
this.goodsInfo.spec.spec[index].children.forEach((item)=> {
|
|||
|
|
if(item.id == id) {
|
|||
|
|
item.show = true
|
|||
|
|
}else {
|
|||
|
|
item.show = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.getSkuId();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取多规格最终提交的id
|
|||
|
|
getSkuId() {
|
|||
|
|
let skuArr = [];
|
|||
|
|
this.goodsInfo.spec.spec.forEach((item,index) => {
|
|||
|
|
const filteredItems = item.children.filter(item => item.show);
|
|||
|
|
const ids = filteredItems.map(item => item.id);
|
|||
|
|
skuArr.push(...ids)
|
|||
|
|
})
|
|||
|
|
let sku_id = skuArr.join('-');
|
|||
|
|
const foundPerson = this.goodsInfo.spec.sku_list.find(person => person.indexes === sku_id);
|
|||
|
|
this.sku_list.sku_id = foundPerson.id;
|
|||
|
|
this.getPrice();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 多规格最终的id 的价格
|
|||
|
|
getPrice() {
|
|||
|
|
const filteredArray = this.goodsInfo.spec.sku_list.filter(item => {
|
|||
|
|
return item.id == this.sku_list.sku_id;
|
|||
|
|
})
|
|||
|
|
this.specData = filteredArray[0];
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 立即购买
|
|||
|
|
byNow() {
|
|||
|
|
if (this.$toolAll.tools.judgeAuth()) {
|
|||
|
|
let newData = {
|
|||
|
|
sku_list: this.sku_list,
|
|||
|
|
type: this.goodsInfo.type
|
|||
|
|
}
|
|||
|
|
let queryString = `?data=${encodeURIComponent(JSON.stringify(newData))}`;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/cart/orderConfirm${queryString}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.tui-popup {
|
|||
|
|
border-top-left-radius: 24rpx;
|
|||
|
|
border-top-right-radius: 24rpx;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-popup-box {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 34rpx 0 140rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-popup-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-icon-close {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-product-box {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-popup-img {
|
|||
|
|
height: 160rpx;
|
|||
|
|
width: 160rpx;
|
|||
|
|
border-radius: 14rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-popup-price {
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-bottom: 8rpx;
|
|||
|
|
margin-top: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: calc(100% - 186rpx);
|
|||
|
|
}
|
|||
|
|
.tui-popup-price .title {
|
|||
|
|
margin: 0;
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-amount {
|
|||
|
|
color: #ff201f;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-number {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 24rpx;
|
|||
|
|
padding-top: 12rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-popup-scroll {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-scrollview-box {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-attr-title {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-attr-box {
|
|||
|
|
font-size: 0;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-attr-item {
|
|||
|
|
max-width: 100%;
|
|||
|
|
min-width: 200rpx;
|
|||
|
|
height: 62rpx;
|
|||
|
|
display: -webkit-inline-flex;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #f7f7f7;
|
|||
|
|
padding: 0 26rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
border: 1rpx solid #f7f7f7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-attr-active {
|
|||
|
|
background: #fcedea !important;
|
|||
|
|
color: #e41f19;
|
|||
|
|
position: relative;
|
|||
|
|
max-width: 100%;
|
|||
|
|
min-width: 200rpx;
|
|||
|
|
height: 62rpx;
|
|||
|
|
display: -webkit-inline-flex;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 26rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
border: 1rpx solid #e41f19;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-number-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20rpx 0 30rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-padding {
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rich img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSpec {
|
|||
|
|
margin:0 0 10rpx 30rpx;
|
|||
|
|
background-color: #eee;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
line-height: 54rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|