admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(welcome): 调整页面布局和样式以提升用户体验 

重新组织待办事项、数据统计、智能设备和商品信息的布局，优化页面结构，使其更直观和易于使用。同时调整样式细节，确保各模块在不同屏幕尺寸下显示一致。
This commit is contained in:
dzq 2025-05-20 11:57:17 +08:00
parent 2c319bae8f
commit 14cca119a9
1 changed files with 113 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/welcome/index.vue
View File

@ -59,6 +59,8 @@ onMounted(async () => {
<template> <template>
<div class="welcome-container"> <div class="welcome-container">
<el-row :gutter="12">
<el-col :span="17">
<!-- 待办事项 --> <!-- 待办事项 -->
<div class="section-container todo-container"> <div class="section-container todo-container">
<div class="section-title"> <div class="section-title">
@ -125,8 +127,37 @@ onMounted(async () => {
<!-- 商品信息 --> <!-- 商品信息 -->
<el-row :gutter="12"> <el-row :gutter="12">
<!-- 热门商品 -->
<!-- 今日最新订单 -->
<el-col :span="12"> <el-col :span="12">
<div class="section-container order-container">
<div class="section-title">
<div class="title-bar"></div>
<div class="title-text">今日数据</div>
</div>
<div class="goods-list">
<el-card shadow="never" class="goods-item" v-for="item in todayLatestOrderGoods"
:key="item.orderGoodsId" :body-style="{ padding: '0' }">
<div class="goods-item-content">
<div class="goods-left">
<el-image :src="item.coverImg" fit="contain" class="goods-image" />
<div class="goods-name">{{ item.goodsName }}</div>
</div>
<div class="goods-right">
<div class="goods-count">数量：{{ item.quantity }}</div>
<div class="goods-count">{{ item.totalAmount }}元</div>
<div class="goods-count buyer-name">{{ item.buyerName }}</div>
<div class="goods-count">{{ item.createTimeStr }}</div>
</div>
</div>
</el-card>
</div>
</div>
</el-col>
</el-row>
</el-col>
<!-- 热门商品 -->
<el-col :span="7">
<div class="section-container goods-container"> <div class="section-container goods-container">
<div class="section-title"> <div class="section-title">
<div class="title-bar"></div> <div class="title-bar"></div>
@ -150,33 +181,6 @@ onMounted(async () => {
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 今日最新订单 -->
<el-col :span="12">
<div class="section-container order-container">
<div class="section-title">
<div class="title-bar"></div>
<div class="title-text">今日数据</div>
</div>
<div class="goods-list">
<el-card shadow="never" class="goods-item" v-for="item in todayLatestOrderGoods" :key="item.orderGoodsId"
:body-style="{ padding: '0' }">
<div class="goods-item-content">
<div class="goods-left">
<el-image :src="item.coverImg" fit="contain" class="goods-image" />
<div class="goods-name">{{ item.goodsName }}</div>
</div>
<div class="goods-right">
<div class="goods-count">数量：{{ item.quantity }}</div>
<div class="goods-count">{{ item.totalAmount }}元</div>
<div class="goods-count buyer-name">{{ item.buyerName }}</div>
<div class="goods-count">{{ item.createTimeStr }}</div>
</div>
</div>
</el-card>
</div>
</div>
</el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
@ -321,15 +325,13 @@ onMounted(async () => {
.goods-right { .goods-right {
display: flex; display: flex;
align-items: center; align-items: center;
width: 450px;
.goods-progress { .goods-progress {
flex: 1; flex: 1;
margin-right: 12px; margin-right: 2px;
} }
.goods-count { .goods-count {
width: 60px;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
@ -344,5 +346,22 @@ onMounted(async () => {
} }
} }
} }
.goods-container {
.goods-right {
width: 150px;
}
.goods-count {
width: 45px;
}
}
.order-container {
.goods-right {
width: 250px;
}
.goods-count {
width: 60px;
}
}
} }
</style> </style>