3 changed files with 796 additions and 0 deletions
@ -0,0 +1,337 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
|||
数据统计 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="margin-top: -60px;"> |
|||
<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" type="daterange" @change="searchList" /> |
|||
</view> |
|||
<view style="width: 100%;margin: 20rpx auto;background: #fff;"> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="cart" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销售金额 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalAmount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="cart" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销量 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalJCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="wallet" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销售利润 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalProfit==null?0:shopInfo.totalProfit}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
|||
</view> |
|||
退货金额 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalAmount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
|||
</view> |
|||
退货数 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
|
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="staff" size="24" color="red"></uni-icons> |
|||
</view> |
|||
下单客户 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalCCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<!-- <view class="box" @tap="goDetail('rexiao')"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="fire" size="24" color="red"></uni-icons> |
|||
</view> |
|||
热销商品 |
|||
</view> |
|||
<view style="width: 30%;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;"></text> |
|||
<uni-icons type="right" size="24" color="#777"></uni-icons> |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: {}, |
|||
range:[], |
|||
shopInfo:{ |
|||
totalProfit:0, |
|||
returnTotalAmount:0, |
|||
saleReturnCost:0 |
|||
} |
|||
}; |
|||
}, |
|||
onShow(){ |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
if(this.range ==''){ |
|||
this.getMonth(); |
|||
} |
|||
this.getSaleInfo(); |
|||
}, |
|||
methods: { |
|||
getSaleInfo() { |
|||
this.shopInfo = { |
|||
totalProfit:0, |
|||
returnTotalAmount:0, |
|||
saleReturnCost:0 |
|||
} |
|||
this.tui.request("/app/sale/getShopAll", "POST", { |
|||
pageVo: { |
|||
pageSize: 5, |
|||
pageNumber: 1 |
|||
}, |
|||
shopId:uni.getStorageSync('shopId'), |
|||
startTime:this.range[0], |
|||
endTime:this.range[1] |
|||
}, false, false).then((res) => { |
|||
if (res.code == 200) { |
|||
this.shopInfo = res.result |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
//获取当月1日到当前时间 |
|||
getMonth() { |
|||
let date = new Date() |
|||
let year = date.getFullYear().toString() //'年' |
|||
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月' |
|||
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日' |
|||
let end = year + '-' + month + '-' + da //当天 |
|||
let beg = year + '-' + month + '-01' //当月第一天 |
|||
this.range = [beg,end] |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
searchList() { |
|||
this.priceList = []; |
|||
this.getSaleInfo() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 55px; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.contentPadding { |
|||
padding: 28rpx 20rpx; |
|||
background-color: #fff; |
|||
color: #909399; |
|||
|
|||
.title { |
|||
padding-left: 20rpx; |
|||
font-size: 32rpx; |
|||
color: #303133; |
|||
margin-bottom: 26rpx; |
|||
line-height: 66rpx; |
|||
|
|||
image { |
|||
display: inline-block; |
|||
width: 40rpx; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.btn { |
|||
text-align: right; |
|||
width: 24%; |
|||
float: right; |
|||
font-size: 26rpx; |
|||
color: $u-primary; |
|||
} |
|||
} |
|||
.grid-text { |
|||
font-size: 28rpx; |
|||
margin-bottom: 26rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.u-grid-item { |
|||
width: 30% !important; |
|||
height: 160rpx; |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
margin-left: 3%; |
|||
border-radius: 30rpx; |
|||
margin-top: 20rpx !important; |
|||
color: #fff !important; |
|||
|
|||
} |
|||
.cardText { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.priceText { |
|||
color: $u-primary; |
|||
font-size: 28rpx; |
|||
} |
|||
.u-grid-item:nth-child(2) { |
|||
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
|||
} |
|||
|
|||
.u-grid-item:nth-child(3) { |
|||
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
|||
} |
|||
|
|||
.u-grid-item:nth-child(4) { |
|||
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
|||
} |
|||
.u-grid-item:nth-child(5) { |
|||
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
|||
} |
|||
.u-grid-item:nth-child(6) { |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
} |
|||
.u-count-num { |
|||
color: #FFF !important; |
|||
text-align:center; |
|||
} |
|||
.uni-date{ |
|||
background: #fff; |
|||
} |
|||
.uni-tooltip-popup{ |
|||
width: 180rpx; |
|||
} |
|||
.u-icon{ |
|||
padding: 0 0 0 16rpx !important; |
|||
} |
|||
.u-zidingyi{ |
|||
width: 22% !important; |
|||
height: 160rpx; |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
margin-left: 3%; |
|||
border-radius: 30rpx; |
|||
margin-top: 20rpx !important; |
|||
color: #fff !important; |
|||
text-align: center; |
|||
padding-top: 20rpx; |
|||
} |
|||
.u-zidingyi:nth-child(2) { |
|||
background: linear-gradient(#FFBB77, #C4E1FF) !important; |
|||
} |
|||
.u-zidingyi:nth-child(3) { |
|||
background: linear-gradient(#84C1FF, #7AFEC6) !important; |
|||
} |
|||
.u-zidingyi:nth-child(4) { |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
} |
|||
.box{ |
|||
width: 100%; |
|||
height: 100rpx; |
|||
padding-left: 20rpx; |
|||
display: flex; |
|||
line-height: 100rpx; |
|||
font-size: 34rpx; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
.tan-lirun{ |
|||
margin-top: 20rpx; |
|||
width: 45%; |
|||
height: 120rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
float: left; |
|||
background-image: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
color: #fff; |
|||
border-radius: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
|||
账单结算 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="margin: -60px auto 0;"> |
|||
<view class=""> |
|||
<view class="content11"> |
|||
2026 |
|||
</view> |
|||
<view class="box1"> |
|||
<view class="content22"> |
|||
<view class=""> |
|||
10/25-10/25账单 |
|||
</view> |
|||
<view class=""> |
|||
共<text>0</text>单 |
|||
<uni-icons type="right" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view style="border-bottom: 1px solid #eee;"> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
商品金额 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
餐盒费 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
活动成本 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
平台服务费 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
结算金额 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
本期期初 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
实际打款金额 |
|||
</view> |
|||
<view class=""> |
|||
$0.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: {} |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 55px; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.box1 { |
|||
width: 95%; |
|||
margin: 0 auto 20rpx; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
.content11{ |
|||
height: 35px; |
|||
line-height: 35px; |
|||
padding-left: 20px; |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
} |
|||
.content22{ |
|||
display: flex; |
|||
height: 30px; |
|||
line-height: 22px; |
|||
border-bottom: 1px solid #eee; |
|||
font-size: 13px; |
|||
font-weight: 600; |
|||
} |
|||
.content33{ |
|||
height: 25px; |
|||
line-height: 25px; |
|||
display: flex; |
|||
} |
|||
.content44{ |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
|||
商家订单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="title-tab"> |
|||
<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false" |
|||
:scroll-with-animation="true"> |
|||
<view class="status-list"> |
|||
<view v-for="(item, index) in statusList" :key="index" class="status-item" |
|||
:class="{ 'active': currentIndex === index }" @click="handleStatusClick(index)"> |
|||
<text class="status-text">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="box1" @tap="goDetail"> |
|||
<view style="display: flex;height: 25px;border-bottom: 1px solid #eee;"> |
|||
<view> |
|||
#0001 |
|||
</view> |
|||
<view style="flex: 1;display: flex;padding-left: 10px;"> |
|||
2026-02-28 16:08 <text>已退款</text> |
|||
</view> |
|||
<view> |
|||
已关闭 |
|||
</view> |
|||
</view> |
|||
<view style="height: 60px;padding-top: 10px;"> |
|||
<view style="height: 25px;line-height: 25px;font-size: 14px;font-weight: 700;"> |
|||
商品 <text>共<text>1</text>件</text> |
|||
</view> |
|||
<view style="display: flex;"> |
|||
<view style="flex: 1;"> |
|||
鱼香肉丝 |
|||
</view> |
|||
<view style="width: 50px;"> |
|||
X1 |
|||
</view> |
|||
<view> |
|||
¥5.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box1" @tap="goDetail"> |
|||
<view style="display: flex;height: 25px;border-bottom: 1px solid #eee;"> |
|||
<view> |
|||
#0001 |
|||
</view> |
|||
<view style="flex: 1;display: flex;padding-left: 10px;"> |
|||
2026-02-28 16:08 <text>已退款</text> |
|||
</view> |
|||
<view> |
|||
已关闭 |
|||
</view> |
|||
</view> |
|||
<view style="height: 60px;padding-top: 10px;"> |
|||
<view style="height: 25px;line-height: 25px;font-size: 14px;font-weight: 700;"> |
|||
商品 <text>共<text>1</text>件</text> |
|||
</view> |
|||
<view style="display: flex;"> |
|||
<view style="flex: 1;"> |
|||
鱼香肉丝 |
|||
</view> |
|||
<view style="width: 50px;"> |
|||
X1 |
|||
</view> |
|||
<view> |
|||
¥5.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
menuButtonInfo: {}, |
|||
statusList: [{ |
|||
name: '待接单', |
|||
value: 0, |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: '待发货', |
|||
value: 1, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待退款', |
|||
value: 2, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待售后', |
|||
value: 3, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已发货', |
|||
value: 4, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已完成', |
|||
value: 5, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已取消', |
|||
value: 6, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已售后', |
|||
value: 7, |
|||
checked: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
methods: { |
|||
goDetail(){ |
|||
uni.navigateTo({ |
|||
url:'/package1/order/orderDetail' |
|||
}) |
|||
}, |
|||
handleStatusClick(index) { |
|||
if (this.currentIndex === index) return; |
|||
this.currentIndex = index; |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 55px; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.title-tab { |
|||
display: flex; |
|||
margin: -60px auto 0; |
|||
} |
|||
|
|||
.status-scroll-view { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
/* 辅助滚动,与 flex 配合确保不换行 */ |
|||
height: auto; |
|||
} |
|||
|
|||
.status-list { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
padding: 0 0; |
|||
/* 可根据设计添加左右留白,但会影响“一排5个”精准计算,故留白为0 */ |
|||
min-height: 88rpx; |
|||
/* 保证内部项撑开高度 */ |
|||
} |
|||
|
|||
/* 每个状态项:宽度为屏幕宽度的1/5,保证一行正好显示5个,超出滚动 */ |
|||
.status-item { |
|||
flex-shrink: 0; |
|||
width: 20vw; |
|||
/* 关键:屏幕宽度的1/5,正好一排5个 */ |
|||
text-align: center; |
|||
padding: 20rpx 0; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|||
/* 点击反馈 */ |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
|
|||
.status-text { |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
font-weight: normal; |
|||
line-height: 1.4; |
|||
transition: color 0.2s, font-weight 0.2s; |
|||
} |
|||
|
|||
/* 激活状态样式 */ |
|||
.status-item.active .status-text { |
|||
color: #ff6b35; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 激活指示条(下划线) */ |
|||
.status-item.active::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 40rpx; |
|||
height: 4rpx; |
|||
background-color: #ff6b35; |
|||
border-radius: 2rpx; |
|||
transition: width 0.2s ease; |
|||
} |
|||
|
|||
.box1 { |
|||
width: 95%; |
|||
margin: 20rpx auto; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue