766 lines
17 KiB
Vue
766 lines
17 KiB
Vue
<template>
|
|
<!-- 水印 -->
|
|
<view v-if="$isVip()">
|
|
<watermark dark="light" source="uni_alipay_pay-successful" />
|
|
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_pay-successful')">
|
|
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
|
</liu-drag-button>
|
|
</view>
|
|
<view class="container">
|
|
<!-- 蓝色背景区域 -->
|
|
<view class="header-section">
|
|
<nav-bar ref="navBarRef" bgColor="transparent" :isBack="false" :buttonGroup="buttonGroup"
|
|
tipLayerType="pay-successful-tip" isTipLayer tipLayerText="修改支付数据" @button-click="handleButtonClick">
|
|
<template v-slot:right>
|
|
<view class="nav-link w100"
|
|
style="display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 0;">
|
|
<text @click="util.goBack()" style="margin-right: 20rpx;">回首页</text>
|
|
</view>
|
|
</template>
|
|
<template v-slot:center>
|
|
<view class="status-box">
|
|
<image class="image" src="/static/image/balance/transfer/success.png"></image>
|
|
<text class="status-text">支付成功</text>
|
|
</view>
|
|
</template>
|
|
</nav-bar>
|
|
|
|
<!-- 转账状态信息 -->
|
|
<view class="success-info">
|
|
<view class="amount-box" @click="goEdit">
|
|
<text class="symbol">¥</text>
|
|
<text class="amount alipay-font">{{ Number(payData.money).toFixed(2) }}</text>
|
|
</view>
|
|
|
|
<!-- 收款方/付款方式 -->
|
|
<view class="details-box">
|
|
<view class="detail-item">
|
|
<text class="label">{{ payData.user }}</text>
|
|
<text class="value">{{ Number(payData.money).toFixed(2) }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="label">付款方式</text>
|
|
<text class="value">{{ payData.payMethod }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="main-content" :style="{ top: `${190 + statusBarHeight}px` }">
|
|
<!-- 样式1 -->
|
|
<template v-if="payData.styleType == 'style1'">
|
|
<view class="pay-success-card">
|
|
<image class="title-img" style="width: 106rpx;height: 28rpx;"
|
|
src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
|
|
<view class="banner-footer" style="padding: 0 16rpx;">
|
|
<view class="logo-box">
|
|
<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
|
|
mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info" style="border-top: none;">
|
|
<view class="text-content">
|
|
<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
|
|
<text class="b-desc">领优惠，支付更省钱</text>
|
|
</view>
|
|
<view class="b-btn">去看看</view>
|
|
</view>
|
|
</view>
|
|
<view class="banner-footer" style="padding: 0 16rpx;">
|
|
<view class="logo-box">
|
|
<image class="logo" :src="payData.style1.couponlist[0].imgUrl" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info">
|
|
<view class="text-content">
|
|
<text class="b-title">
|
|
<text
|
|
v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0"
|
|
style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}元</text>
|
|
{{ payData.style1.couponlist[0].title }}
|
|
</text>
|
|
<text class="b-desc">
|
|
<text class="b-desc-tag">{{ payData.style1.couponlist[0].tag }}</text>
|
|
{{ payData.style1.couponlist[0].desc }}
|
|
</text>
|
|
</view>
|
|
<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="content-section">
|
|
<!-- 飞猪广告 -->
|
|
<view class="card fliggy-card">
|
|
<image class="banner-img" :src="payData.style1.bannerUrl" mode="widthFix" @click="toggleBanner">
|
|
</image>
|
|
<view class="guanggao-tag">
|
|
<image style="width: 70rpx;height: 32rpx;"
|
|
src="/static/image/balance/transfer/guanggao.png">
|
|
</image>
|
|
</view>
|
|
<view class="yaoyiyao-container">
|
|
<view class="yaoyiyao-box">
|
|
<image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
|
|
</image>
|
|
<text class="text">摇动或点击查看详情</text>
|
|
</view>
|
|
</view>
|
|
<view class="banner-footer"
|
|
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
|
|
<view class="logo-box">
|
|
<image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info" style="padding: 0;">
|
|
<view class="text-content">
|
|
<text class="b-title">飞猪旅行</text>
|
|
<text class="b-desc">飞猪出行 超多折扣</text>
|
|
</view>
|
|
<view class="b-btn">领优惠</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="banner-footer"
|
|
v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
|
|
<view class="logo-box">
|
|
<image class="logo" src="/static/image/balance/transfer/taobaoshangou.png"
|
|
mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info" style="padding: 0;">
|
|
<view class="text-content">
|
|
<text class="b-title">淘宝闪购</text>
|
|
<text class="b-desc">每天领大额外面红包</text>
|
|
</view>
|
|
<view class="b-btn">去领取</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 样式2 -->
|
|
<template v-if="payData.styleType == 'style2'">
|
|
<view class="pay-success-card">
|
|
<image class="title-img" style="width: 106rpx;height: 28rpx;"
|
|
src="/static/image/balance/pay-successful/zhifuyouli.png" mode="widthFix"></image>
|
|
<view class="banner-footer" style="padding: 0 16rpx;">
|
|
<view class="logo-box">
|
|
<image class="logo" src="/static/image/balance/pay-successful/zhifufuli.png"
|
|
mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info" style="border-top: none;">
|
|
<view class="text-content">
|
|
<text class="b-title">领取<text style="color: #EA4833;">今日</text>支付福利</text>
|
|
<text class="b-desc">领优惠，支付更省钱</text>
|
|
</view>
|
|
<view class="b-btn">去看看</view>
|
|
</view>
|
|
</view>
|
|
<view class="banner-footer" style="padding: 0 16rpx;"
|
|
v-for="item, index in payData.style2.couponlist" :key="index">
|
|
<view class="logo-box">
|
|
<image class="logo" :src="item.imgUrl" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="banner-info">
|
|
<view class="text-content">
|
|
<text class="b-title">
|
|
<text v-if="item.price" style="color: #EA4833;">{{ item.price }}元</text>{{
|
|
item.title
|
|
}}</text>
|
|
<text class="b-desc">
|
|
<text class="b-desc-tag">{{ item.tag }}</text>
|
|
{{ item.desc }}</text>
|
|
</view>
|
|
<view class="b-btn">{{ payData.style1.couponlist[0].butText }}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="payData.styleType == 'style3'">
|
|
<view style="padding: 24rpx 20rpx;margin-bottom: 24rpx;" class="pay-success-card">
|
|
<text class="title">支付有礼</text>
|
|
<view class="banner-box">
|
|
<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
|
|
<image src="/static/image/balance/pay-successful/pengyipengbanner.png" style="width: 100%;"
|
|
mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="promo-card" v-for="item, index in payData.style3.couponlist" :key="index">
|
|
<view class="promo-left-box">
|
|
<image class="img" :src="item.imgUrl" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="promo-right">
|
|
<view class="promo-content">
|
|
<text class="promo-title">{{ item.title }}</text>
|
|
<view class="promo-tags">
|
|
<text class="tag">{{ item.tag }}</text>
|
|
<text class="tag-desc">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="promo-right-box">
|
|
|
|
<view class="price-box">
|
|
<text class="p-num alipay-font">{{ item.price }}</text>
|
|
<text class="p-unit">元</text>
|
|
</view>
|
|
<view class="free-btn">{{ item.butText }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
|
|
<!-- 底部操作区 -->
|
|
<view class="footer-section">
|
|
<view class="finish-btn" @click="goBack">完成</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
reactive,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import {
|
|
onShow,
|
|
onLoad
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
util
|
|
} from '@/utils/common.js';
|
|
import {
|
|
defaultData
|
|
} from './data.json';
|
|
const {
|
|
appContext,
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
const statusBarHeight = ref(0);
|
|
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
|
|
const payData = ref(defaultData);
|
|
|
|
const bannerImages = [
|
|
'/static/image/balance/transfer/bottom-banner-1.png',
|
|
'/static/image/balance/transfer/bottom-banner-2.png'
|
|
];
|
|
|
|
// 从缓存加载数据
|
|
const loadStorageData = () => {
|
|
const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
|
|
if (savedData) {
|
|
payData.value = savedData;
|
|
}
|
|
};
|
|
loadStorageData();
|
|
|
|
const navBarRef = ref(null);
|
|
const buttonGroup = ref([{
|
|
name: '编辑支付数据',
|
|
action: 'edit'
|
|
}]);
|
|
const handleButtonClick = (button) => {
|
|
if (button.action === 'edit') {
|
|
goEdit()
|
|
}
|
|
};
|
|
|
|
const goEdit = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/balance/pay-successful/edit'
|
|
});
|
|
}
|
|
|
|
const toggleBanner = () => {
|
|
const currentIndex = bannerImages.indexOf(payData.value.style1.bannerUrl);
|
|
const nextIndex = (currentIndex + 1) % bannerImages.length;
|
|
payData.value.style1.bannerUrl = bannerImages[nextIndex];
|
|
uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
|
|
};
|
|
|
|
onLoad(() => {
|
|
// 进入支付成功页面埋点
|
|
proxy.$apiUserEvent('all', {
|
|
type: 'click',
|
|
key: 'pay-successful',
|
|
value: "支付成功"
|
|
})
|
|
})
|
|
|
|
onMounted(() => {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
if (systemInfo.statusBarHeight) {
|
|
statusBarHeight.value = systemInfo.statusBarHeight;
|
|
}
|
|
});
|
|
|
|
onShow(() => {
|
|
loadStorageData();
|
|
// #ifdef APP-PLUS
|
|
util.setAndroidSystemBarColor('#F5F5F5')
|
|
uni.setNavigationBarColor({
|
|
animation: { // 动画效果
|
|
duration: 100,
|
|
timingFunc: 'easeIn'
|
|
}
|
|
})
|
|
setTimeout(() => {
|
|
plus.navigator.setStatusBarStyle("light");
|
|
}, 500);
|
|
// #endif
|
|
})
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "@/common/main.css";
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.header-section {
|
|
height: 860rpx;
|
|
background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);
|
|
|
|
::v-deep .nav-bar-container {
|
|
position: relative !important;
|
|
}
|
|
|
|
::v-deep .placeholder-box {
|
|
display: none !important;
|
|
background: transparent;
|
|
}
|
|
|
|
::v-deep .tipLayer {
|
|
position: absolute;
|
|
}
|
|
|
|
::v-deep .uni-navbar__header-btns {
|
|
width: 100px !important;
|
|
}
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
|
|
.nav-link {
|
|
padding: 0 30rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.success-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.pay-success-card {
|
|
margin: 24rpx;
|
|
margin-top: 16rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 0;
|
|
|
|
.title-img {
|
|
width: 106rpx;
|
|
height: 28rpx;
|
|
margin-top: 22rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 24rpx;
|
|
color: #252525;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.banner-box {
|
|
position: relative;
|
|
width: 660rpx;
|
|
height: 166rpx;
|
|
margin-top: 18rpx;
|
|
|
|
.banner-time {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 156rpx;
|
|
top: 68rpx;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #C70B0C;
|
|
line-height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
height: 34rpx;
|
|
|
|
.image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 34rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
|
|
.amount-box {
|
|
display: flex;
|
|
align-items: baseline;
|
|
color: #fff;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 60rpx;
|
|
|
|
.symbol {
|
|
font-size: 68rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 92rpx;
|
|
line-height: 92rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.details-box {
|
|
width: 100%;
|
|
padding: 0 46rpx;
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
height: 26rpx;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
line-height: 26rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.content-section {
|
|
padding: 24rpx;
|
|
padding-bottom: 16rpx;
|
|
// background-color: #F5F5F5;
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
}
|
|
|
|
.card {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.fliggy-card {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
}
|
|
|
|
.guanggao-tag {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 16rpx;
|
|
}
|
|
|
|
.yaoyiyao-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -80rpx;
|
|
padding-bottom: 16rpx;
|
|
|
|
.yaoyiyao-box {
|
|
padding: 12rpx 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #000000;
|
|
border-radius: 28rpx;
|
|
opacity: 0.5;
|
|
|
|
.img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.banner-footer {
|
|
padding: 24rpx;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.logo-box {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
|
|
.logo {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.banner-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1rpx solid #F6F6F6;
|
|
padding: 30rpx 0;
|
|
|
|
|
|
.text-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.b-title {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.b-desc {
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #969696;
|
|
|
|
.b-desc-tag {
|
|
font-size: 24rpx;
|
|
color: #E4711F;
|
|
background-color: #FDF6F3;
|
|
line-height: 24rpx;
|
|
padding: 2px 4px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.b-btn {
|
|
padding: 0 20rpx;
|
|
background-color: #FF3A31;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: url('/static/image/balance/pay-successful/more.png');
|
|
top: 16rpx;
|
|
right: 20rpx;
|
|
width: 24rpx;
|
|
height: 12rpx;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.footer-section {
|
|
padding: 0px 40rpx 0;
|
|
margin-top: 50rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-bottom: 24rpx;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
|
|
|
.finish-btn {
|
|
height: 84rpx;
|
|
width: 390rpx;
|
|
line-height: 84rpx;
|
|
text-align: center;
|
|
border: 1px solid #2172CA;
|
|
border-radius: 42rpx;
|
|
color: #2172CA;
|
|
font-size: 32rpx;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 190px;
|
|
width: 100%;
|
|
}
|
|
|
|
.promo-card {
|
|
// padding: 30rpx;
|
|
margin: 16rpx;
|
|
margin-bottom: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.promo-left-box {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 34rpx;
|
|
background-image: url("/static/image/balance/transfer/card-bg-2-left.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
height: 144rpx;
|
|
margin-right: -1px;
|
|
|
|
|
|
.img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.promo-right {
|
|
height: 144rpx;
|
|
background-image: url("/static/image/balance/transfer/card-bg-2-right.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx 32rpx 24rpx;
|
|
|
|
.promo-title {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.promo-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8rpx;
|
|
|
|
.tag {
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
height: 34rpx;
|
|
color: #EF673C;
|
|
background-color: #FFF2F1;
|
|
border-radius: 4rpx;
|
|
margin-right: 12rpx;
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.tag-desc {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #969696;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.promo-right-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.price-box {
|
|
color: #F93950;
|
|
|
|
.p-num {
|
|
font-size: 34rpx;
|
|
line-height: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.p-unit {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
margin-left: 2rpx;
|
|
}
|
|
}
|
|
|
|
.free-btn {
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
padding: 0 24rpx;
|
|
background-color: #FA3A49;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border-radius: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |