691 lines
25 KiB
Vue
691 lines
25 KiB
Vue
<template>
|
|
<view class="container">
|
|
<nav-bar bgColor="#F5F5F5" :isBack="true" title="编辑账单详情" isRightButton @right-click="saveData"></nav-bar>
|
|
|
|
<view class="tabs">
|
|
<view class="tab-item" :class="{ active: payData.styleType == 'style1' }"
|
|
@click="payData.styleType = 'style1'">样式1
|
|
</view>
|
|
<view class="tab-item" :class="{ active: payData.styleType == 'style2' }"
|
|
@click="payData.styleType = 'style2'">样式2
|
|
</view>
|
|
<view class="tab-item" :class="{ active: payData.styleType == 'style3' }"
|
|
@click="payData.styleType = 'style3'">样式3
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main-content">
|
|
<!-- 基础信息卡片 -->
|
|
<view class="card basic-card">
|
|
<view class="amount-wrap">
|
|
<text class="symbol">¥</text>
|
|
<auto-width-input class="alipay-font" type="digit" v-model="payData.money" fontSize="88rpx"
|
|
fontWeight="500" color="#1A1A1A" :showEdit="true"></auto-width-input>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<auto-width-input v-model="payData.user" fontSize="28rpx" color="#333"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
<view class="info-item" style="justify-content: flex-end;">
|
|
<text class="value-symbol">¥ </text>
|
|
<auto-width-input type="digit" v-model="payData.money" fontSize="28rpx" color="#333"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-row" style="margin-top: 16rpx;">
|
|
<view class="info-item">
|
|
<text class="label">付款方式</text>
|
|
</view>
|
|
<view class="info-item" style="justify-content: flex-end;">
|
|
<auto-width-input v-model="payData.payMethod" fontSize="28rpx" color="#333"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 样式1 -->
|
|
<template v-if="payData.styleType == 'style1'">
|
|
<view class="card list-card">
|
|
<view class="card-title" style="display: flex; justify-content: space-between;">
|
|
支付有礼
|
|
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
|
|
mode="widthFix" @click="randomCoupon('style1')"></image>
|
|
</view>
|
|
<!-- 券1 -->
|
|
<view class="list-item" v-if="payData.style1.couponlist && payData.style1.couponlist[0]">
|
|
<view class="left-icon-wrap" @click="chooseImage('style1_coupon_0')">
|
|
<image v-if="payData.style1.couponlist[0].imgUrl" class="item-img"
|
|
:src="payData.style1.couponlist[0].imgUrl" mode="aspectFill"></image>
|
|
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="row-flex" style="flex-wrap: wrap;">
|
|
<view class="row-flex" style="margin-right: 12rpx;"
|
|
v-if="payData.style1.couponlist[0].price !== undefined">
|
|
<auto-width-input v-model="payData.style1.couponlist[0].price" fontSize="28rpx"
|
|
color="#E6372D" fontWeight="500"></auto-width-input>
|
|
<text class="main-title" style="color: #E6372D; width: auto;">元</text>
|
|
<image class="edit-icon" src="/static/image/common/edit.png"
|
|
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
|
</view>
|
|
<view class="row-flex">
|
|
<auto-width-input v-model="payData.style1.couponlist[0].title" fontSize="28rpx"
|
|
color="#333" fontWeight="500" :showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
<view class="row-flex mt">
|
|
<view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
|
|
v-if="payData.style1.couponlist[0].tag !== undefined">
|
|
<auto-width-input v-model="payData.style1.couponlist[0].tag" fontSize="20rpx"
|
|
color="#E6372D" :showEdit="true"></auto-width-input>
|
|
</view>
|
|
<view class="row-flex" v-if="payData.style1.couponlist[0].desc !== undefined">
|
|
<auto-width-input v-model="payData.style1.couponlist[0].desc" fontSize="24rpx"
|
|
color="#999" :showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-btn btn-get"
|
|
style="display: flex; align-items: center; justify-content: center;"
|
|
@click="toggleBtnText(payData.style1.couponlist[0])">
|
|
<text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{
|
|
payData.style1.couponlist[0].butText || '免费领' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 飞猪广告 -->
|
|
<view class="card fliggy-card">
|
|
<view class="banner-wrap" @click="toggleBanner">
|
|
<image class="banner-img"
|
|
:src="payData.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png'"
|
|
mode="widthFix"></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>
|
|
<view class="fliggy-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">
|
|
<view class="text-content">
|
|
<text class="b-title">飞猪旅行</text>
|
|
<text class="b-desc">飞猪出行 超多折扣</text>
|
|
</view>
|
|
<view class="b-btn">领优惠</view>
|
|
</view>
|
|
</view>
|
|
<view class="fliggy-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>
|
|
</template>
|
|
|
|
<!-- 样式2 -->
|
|
<template v-if="payData.styleType == 'style2'">
|
|
<view class="card list-card">
|
|
<view class="card-title" style="display: flex; justify-content: space-between;">支付有礼
|
|
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
|
|
mode="widthFix" @click="randomCoupon('style2')"></image>
|
|
</view>
|
|
|
|
<view class="list-item" v-for="(item, index) in payData.style2.couponlist" :key="index">
|
|
<view class="left-icon-wrap" @click="chooseImage('style2_coupon_' + index)">
|
|
<image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
|
|
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="row-flex" style="flex-wrap: wrap;">
|
|
<view class="row-flex" style="margin-right: 12rpx;" v-if="item.price !== undefined">
|
|
<auto-width-input v-model="item.price" fontSize="28rpx"
|
|
:color="item.price.includes('g') ? '#333' : '#E6372D'"
|
|
fontWeight="500"></auto-width-input>
|
|
<text class="main-title"
|
|
:style="{ color: item.price.includes('g') ? '#333' : '#E6372D', width: 'auto' }">{{
|
|
item.price.includes('g') ? '' : '元' }}</text>
|
|
<image class="edit-icon" src="/static/image/common/edit.png"
|
|
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
|
</view>
|
|
<view class="row-flex">
|
|
<auto-width-input v-model="item.title" fontSize="28rpx" color="#333"
|
|
fontWeight="500" :showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
<view class="row-flex mt">
|
|
<view class="tag-red" :class="{ 'tag-orange': item.tag == '芭芭农场' }"
|
|
style="margin-right: 12rpx; display: flex; align-items: center;"
|
|
v-if="item.tag !== undefined">
|
|
<auto-width-input v-model="item.tag" fontSize="20rpx"
|
|
:color="item.tag == '芭芭农场' ? '#EF673C' : '#E6372D'"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
<view class="row-flex" v-if="item.desc !== undefined">
|
|
<auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-btn btn-get" :class="{ 'btn-look': item.butText == '去看看' }"
|
|
style="display: flex; align-items: center; justify-content: center;"
|
|
@click="toggleBtnText(item)">
|
|
<text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{ item.butText || '免费领'
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 样式3 -->
|
|
<template v-if="payData.styleType == 'style3'">
|
|
<view class="card list-card" style="padding-bottom: 24rpx;">
|
|
<view class="flex-between" style="margin-bottom: 24rpx;">
|
|
<text class="card-title" style="margin-bottom: 0;">碰一下立减</text>
|
|
<view class="row-flex">
|
|
<auto-width-input v-model="payData.style3.bannerTime" fontSize="24rpx"
|
|
color="#666"></auto-width-input>
|
|
<text class="time-text" style="width: auto;">后过期</text>
|
|
<image class="edit-icon" src="/static/image/common/edit.png"
|
|
style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
|
|
</view>
|
|
</view>
|
|
<view class="banner-box">
|
|
<text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
|
|
<image src="/static/image/balance/pay-successful/pengyipengbanner.png"
|
|
style="width: 100%; border-radius: 12rpx; display: block;" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="card-title" style="display: flex; justify-content: flex-end;padding: 0 16px;">
|
|
<image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png" mode="widthFix"
|
|
@click="randomCoupon('style3')">
|
|
</image>
|
|
</view>
|
|
|
|
<view class="card list-card" style="margin-top: 24rpx;">
|
|
<view class="list-item" v-for="(item, index) in payData.style3.couponlist" :key="index">
|
|
<view class="left-icon-wrap" @click="chooseImage('style3_coupon_' + index)">
|
|
<image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
|
|
<image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
|
|
</view>
|
|
<view class="item-content" style="flex: 1;">
|
|
<view class="row-flex">
|
|
<auto-width-input v-model="item.title" fontSize="28rpx" color="#333" fontWeight="500"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
<view class="row-flex mt">
|
|
<view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
|
|
v-if="item.tag !== undefined">
|
|
<auto-width-input v-model="item.tag" fontSize="20rpx" color="#E6372D"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
<view class="row-flex" v-if="item.desc !== undefined">
|
|
<auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="row-flex" style="align-items: baseline;" v-if="item.price !== undefined">
|
|
<auto-width-input v-model="item.price" fontSize="40rpx" color="#E6372D" fontWeight="500"
|
|
:showEdit="true"></auto-width-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { defaultData, randomData } from './data.json';
|
|
import { util } from '@/utils/common.js';
|
|
import autoWidthInput from '@/components/common/auto-width-input.vue';
|
|
|
|
const payData = ref(JSON.parse(JSON.stringify(defaultData)));
|
|
|
|
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
|
|
|
|
const randomCoupon = (styleName) => {
|
|
// #ifdef APP-PLUS
|
|
const oldList = payData.value[styleName].couponlist || [];
|
|
oldList.forEach(item => {
|
|
if (item.imgUrl && !item.imgUrl.startsWith('/static') && !item.imgUrl.startsWith('http')) {
|
|
uni.removeSavedFile({ filePath: item.imgUrl });
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
const count = payData.value[styleName].couponlist.length;
|
|
const shuffled = [...randomData].sort(() => 0.5 - Math.random());
|
|
const selected = shuffled.slice(0, count);
|
|
payData.value[styleName].couponlist = JSON.parse(JSON.stringify(selected));
|
|
};
|
|
const loadStorageData = () => {
|
|
const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
|
|
if (savedData) {
|
|
payData.value = Object.assign({}, payData.value, savedData);
|
|
}
|
|
};
|
|
|
|
onLoad(() => {
|
|
loadStorageData();
|
|
});
|
|
|
|
const saveData = () => {
|
|
uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
|
|
uni.navigateBack();
|
|
};
|
|
|
|
const chooseImage = (type) => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
const tempPath = res.tempFilePaths[0];
|
|
|
|
let oldPath = '';
|
|
if (type === 'style1_coupon_0') {
|
|
oldPath = payData.value.style1.couponlist[0].imgUrl;
|
|
} else if (type.startsWith('style2_coupon_')) {
|
|
const idx = parseInt(type.split('_')[2]);
|
|
oldPath = payData.value.style2.couponlist[idx].imgUrl;
|
|
} else if (type.startsWith('style3_coupon_')) {
|
|
const idx = parseInt(type.split('_')[2]);
|
|
oldPath = payData.value.style3.couponlist[idx].imgUrl;
|
|
}
|
|
|
|
const updateImgUrl = (path) => {
|
|
if (type === 'style1_coupon_0') {
|
|
payData.value.style1.couponlist[0].imgUrl = path;
|
|
} else if (type.startsWith('style2_coupon_')) {
|
|
const idx = parseInt(type.split('_')[2]);
|
|
payData.value.style2.couponlist[idx].imgUrl = path;
|
|
} else if (type.startsWith('style3_coupon_')) {
|
|
const idx = parseInt(type.split('_')[2]);
|
|
payData.value.style3.couponlist[idx].imgUrl = path;
|
|
}
|
|
};
|
|
|
|
// #ifdef APP-PLUS
|
|
if (oldPath && !oldPath.startsWith('/static') && !oldPath.startsWith('http')) {
|
|
// 尝试删除旧的本地文件，避免存储空间堆积
|
|
uni.removeSavedFile({ filePath: oldPath });
|
|
}
|
|
uni.saveFile({
|
|
tempFilePath: tempPath,
|
|
success: (saveRes) => {
|
|
updateImgUrl(saveRes.savedFilePath);
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifndef APP-PLUS
|
|
updateImgUrl(tempPath);
|
|
// #endif
|
|
}
|
|
});
|
|
};
|
|
|
|
const toggleBtnText = (item) => {
|
|
const textList = ['免费领', '去看看', '去领取'];
|
|
const currentIndex = textList.indexOf(item.butText);
|
|
if (currentIndex > -1) {
|
|
item.butText = textList[(currentIndex + 1) % textList.length];
|
|
} else {
|
|
item.butText = '免费领';
|
|
}
|
|
};
|
|
|
|
const toggleBanner = () => {
|
|
const current = payData.value.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png';
|
|
if (current.includes('bottom-banner-1.png')) {
|
|
payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-2.png';
|
|
} else {
|
|
payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-1.png';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "@/common/main.css";
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
padding-bottom: 60rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #3884FD;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 32rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20rpx;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 12rpx 40rpx;
|
|
background-color: #fff;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #3884FD;
|
|
border-color: #3884FD;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 0 0;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: 24rpx;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.basic-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.amount-wrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
color: #1A1A1A;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 50rpx;
|
|
|
|
.symbol {
|
|
font-size: 60rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.info-row {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.value-symbol {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.edit-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.edit-icon-center {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.left-icon-wrap {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
background-color: #F5F5F5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.list-card {
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #1A1A1A;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.row-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.mt {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.tag-red {
|
|
font-size: 20rpx;
|
|
color: #E6372D;
|
|
background: #FFF1F0;
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.tag-orange {
|
|
color: #EF673C;
|
|
background: #FFF2F1;
|
|
}
|
|
|
|
.right-btn {
|
|
padding: 10rpx 28rpx;
|
|
border-radius: 26rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-get {
|
|
background-color: #E6372D;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-look {
|
|
background-color: #E6372D;
|
|
color: #fff;
|
|
}
|
|
|
|
.fliggy-card {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
|
|
.banner-wrap {
|
|
position: relative;
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.guanggao-tag {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 16rpx;
|
|
}
|
|
|
|
.yaoyiyao-container {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.yaoyiyao-box {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 10rpx 24rpx;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 24rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fliggy-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx;
|
|
|
|
.logo-box {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
margin-right: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
|
|
.logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.banner-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.text-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.b-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.b-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 6rpx;
|
|
}
|
|
}
|
|
|
|
.b-btn {
|
|
background-color: #E6372D;
|
|
color: #fff;
|
|
padding: 10rpx 28rpx;
|
|
border-radius: 26rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.banner-box {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.banner-time {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 170rpx;
|
|
top: 68rpx;
|
|
font-size: 20rpx;
|
|
color: #C70B0C;
|
|
}
|
|
}
|
|
</style> |