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

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

@ -8,3 +8,10 @@
.myui_btn_prev { .myui_btn_prev {
margin-top: 20rpx; 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);
}