front/merchapp
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 数据UI细化

Browse Source
This commit is contained in:
mixtan 2025-07-19 16:06:18 +08:00
parent beb5c6c2d6
commit 99e1d51a98
2 changed files with 80 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="view-container">
<status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
<view class="item-content">
<view class="myui_card item-content">
<view class="title">待办事处</view>
<view class="item-list">
<view class="item">
@ -20,7 +20,7 @@
</view>
</view>
</view>
<view class="order-content">
<view class="myui_card order-content">
<view class="title">销量统计</view>
<view class="order-list">
<view class="order-item">
@ -28,44 +28,47 @@
<view class="order-item-num">{{ orderSalesAmoutInfo.today }}</view>
<view class="order-bottom">
昨日
{{
orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
? "+"
: "-"
}}
{{
<text :class="[orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
? 'up'
: 'down']">
{{
orderSalesAmoutInfo.daym2m == null
? "-"
? "N/A"
: Number(orderSalesAmoutInfo.daym2m * 100).toFixed(0) + "%"
}}
</text>
</view>
</view>
<view class="order-item order-item-1">
<view class="order-title">订单量</view>
<view class="order-item-num">{{ orderNumInfo.today }}</view>
<view class="order-bottom">
昨日{{ orderNumInfo.daym2m && orderNumInfo.daym2m > 0 ? "+" : "-" }}
{{
昨日
<text :class="[orderNumInfo.daym2m && orderNumInfo.daym2m > 0
? 'up'
: 'down']">
{{
orderNumInfo.daym2m == null
? "-"
? "N/A"
: Number(orderNumInfo.daym2m * 100).toFixed(0) + "%"
}}
</text>
</view>
</view>
<view class="order-item order-item-2">
<view class="order-title">退货单数</view>
<view class="order-item-num">{{ orderReturnNumInfo.today }}</view>
<view class="order-bottom">
昨日{{
orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
? "+"
: "-"
}}
{{
昨日
<text :class="[orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
? 'up'
: 'down']">
{{
orderReturnNumInfo.daym2m == null
? "-"
? "N/A"
: Number(orderReturnNumInfo.daym2m * 100).toFixed(0) + "%"
}}
</text>
</view>
</view>
</view>
@ -166,28 +169,25 @@ export default {
background: #fff;
.item-content {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
.item-list {
display: flex;
justify-content: space-around;
margin: 40rpx 0;
// margin: 40rpx 0;
.item {
text-align: center;
.item-value {
margin-bottom: 16rpx;
font-size: 48rpx;
font-size: 56rpx;
font-weight: bold;
color: #222;
font-family: math;
}
.item-title {
min-width: 160rpx;
color: #b1b1b1;
color: #999;
font-size: 24rpx;
}
}
}
@ -195,23 +195,24 @@ export default {
.title {
position: relative;
padding-left: 20rpx; /* 给条状留出空间 */
// padding-left: 20rpx; /* 给条状留出空间 */
font-size: 32rpx;
color: #333;
color: #222;
font-weight: bold;
margin-bottom: 30rpx;
/* 通过伪元素添加左侧条状 */
&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx; /* 条状宽度 */
height: 32rpx; /* 条状高度 */
background-color: $base-color; /* 条状颜色 */
border-radius: 4rpx; /* 可选圆角 */
}
// &::before {
// content: "";
// position: absolute;
// left: 0;
// top: 50%;
// transform: translateY(-50%);
// width: 8rpx; /* 条状宽度 */
// height: 32rpx; /* 条状高度 */
// background-color: $base-color; /* 条状颜色 */
// border-radius: 4rpx; /* 可选圆角 */
// }
}
.order-content {
@ -219,42 +220,56 @@ export default {
.order-list {
display: flex;
margin: 40rpx 0;
// margin: 40rpx 0;
.order-item {
margin-right: 40rpx;
padding: 12rpx;
min-width: 26%;
border-radius: 12rpx;
background: #41e6f9;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
color: #fff;
// border-radius: 12rpx;
// background: #41e6f9;
// box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
// color: #fff;
text-align: center;
.order-title {
font-size: 24rpx;
font-size: 28rpx;
}
.order-item-num {
padding: 8rpx 0;
font-family: math;
text-align: center;
padding: 12rpx 0;
height: 56rpx;
font-size: 56rpx;
font-weight: bold;
font-size: 44rpx;
font-family: math;
color: #222;
}
.up{
color: #cf1322;
}
.down{
color: #3f8600;
}
.order-bottom {
font-size: 24rpx;
text-align: right;
color: #999;
display: flex;
gap: 4rpx;
justify-content: center;
}
}
.order-item-1 {
background: #de41f6;
}
// .order-item-1 {
// background: #de41f6;
// }
.order-item-2 {
background: #6b7bfa;
}
// .order-item-2 {
// background: #6b7bfa;
// }
}
}
}

7
java-mall-app-shop-admin/styles/myui.scss
View File

@ -7,4 +7,11 @@
.myui_btn_prev {
margin-top: 20rpx;
}
.myui_card{
padding: 30rpx 20rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 2rpx 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
}