refactor(welcome): 调整页面布局和样式以提升用户体验
重新组织待办事项、数据统计、智能设备和商品信息的布局，优化页面结构，使其更直观和易于使用。同时调整样式细节，确保各模块在不同屏幕尺寸下显示一致。
This commit is contained in:
dzq
parent
2c319bae8f
commit
14cca119a9
|
|
@ -59,74 +59,105 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="welcome-container">
|
||||
<!-- 待办事项 -->
|
||||
<div class="section-container todo-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">待办事项</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="todo-section">
|
||||
<el-col :span="4" v-for="item in todoItems" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<el-icon :size="30" class="todo-icon">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<div class="todo-count">{{ item.count }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="17">
|
||||
<!-- 待办事项 -->
|
||||
<div class="section-container todo-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">待办事项</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="todo-section">
|
||||
<el-col :span="4" v-for="item in todoItems" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<el-icon :size="30" class="todo-icon">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<div class="todo-count">{{ item.count }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="12">
|
||||
<!-- 数据统计 -->
|
||||
<el-col :span="12">
|
||||
<div class="section-container shop-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">数据统计</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<!-- 商店数据 -->
|
||||
<el-col :span="4" v-for="item in shopData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-row :gutter="12">
|
||||
<!-- 数据统计 -->
|
||||
<el-col :span="12">
|
||||
<div class="section-container shop-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">数据统计</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<!-- 商店数据 -->
|
||||
<el-col :span="4" v-for="item in shopData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 智能设备 -->
|
||||
<el-col :span="12">
|
||||
<div class="section-container device-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">智能设备</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<el-col :span="4" v-for="item in deviceData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<el-row :gutter="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="12">
|
||||
<div class="section-container device-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">智能设备</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<el-col :span="4" v-for="item in deviceData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<el-row :gutter="12">
|
||||
<!-- 热门商品 -->
|
||||
<el-col :span="12">
|
||||
<el-col :span="7">
|
||||
<div class="section-container goods-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
|
|
@ -150,33 +181,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -321,15 +325,13 @@ onMounted(async () => {
|
|||
.goods-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 450px;
|
||||
|
||||
.goods-progress {
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
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>
|
||||
Loading…
Reference in New Issue