From b0530ed9211230227a8f94e394eda779d5ae5fc1 Mon Sep 17 00:00:00 2001 From: birt <2499248221@qq.com> Date: 星期日, 13 四月 2025 01:51:52 +0800 Subject: [PATCH] birtzhang --- zhitan-vue/src/views/index.vue | 684 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 427 insertions(+), 257 deletions(-) diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue index 84f2c80..95f164a 100644 --- a/zhitan-vue/src/views/index.vue +++ b/zhitan-vue/src/views/index.vue @@ -1,51 +1,55 @@ <template> <div class="page" style="padding-left: 8px; padding-top: 8px"> <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType"> - <span> + <span class="card-header-title"> 鍏ㄥ巶鑳借�楃粺璁� - <el-button @click="dialogVisible = true" v-if="list.length > 1"> 鏌ョ湅鏇村 </el-button> + <el-button @click="dialogVisible = true" v-if="list.length > 1" type="primary" size="small" class="header-more-btn"> 鏌ョ湅鏇村 </el-button> </span> </CardHeader> <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02"> <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"> <template v-for="(item, index) in row" :key="index"> - <div - class="card-list-item" - :style="{ - backgroundImage: 'url(' + bgList[index].bg + ')', - }" - > - <div class="item-top"> - <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }" /> + <div class="card-list-item"> + <div class="item-left"> + <div class="top-icon" + :style="{ + backgroundImage: 'url(' + bgList[index].icon + ')', + backgroundColor: bgList[index].iconBg, + width: '73px', + height: '73px', + backgroundSize: '40px' + }" + /> + </div> + <div class="item-right"> <div class="top-right"> <div class="right-name"> {{ item.energyName }} <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span> </div> <div class="right-value"> - <span> {{ item.count }}</span> - <!-- <span class="unit">{{ item.energyUnit }}</span> --> + <span>{{ item.count }}</span> </div> </div> - </div> - <div class="item-bottom"> - <div class="bottom-left"> - <span> - 鍚屾瘮: {{ Math.abs(item.tongbi) }} - <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''"> - <Top v-if="item.tongbi > 0" /> - <Bottom v-if="item.tongbi < 0" /> - </el-icon> - </span> - </div> - <div class="bottom-right"> - <span - >鐜瘮: {{ Math.abs(item.huanbi) }} - <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''"> - <Top v-if="item.huanbi > 0" /> - <Bottom v-if="item.huanbi < 0" /> - </el-icon> - </span> + <div class="item-bottom"> + <div class="bottom-left"> + <span> + 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }} + <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''"> + <Top v-if="item.tongbi > 0" /> + <Bottom v-if="item.tongbi < 0" /> + </el-icon> + </span> + </div> + <div class="bottom-right"> + <span> + 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }} + <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''"> + <Top v-if="item.huanbi > 0" /> + <Bottom v-if="item.huanbi < 0" /> + </el-icon> + </span> + </div> </div> </div> </div> @@ -54,36 +58,46 @@ <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"> <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0"> <div class="card-list-item"> - <div class="item-top"> - <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }" /> + <div class="item-left"> + <div class="top-icon" + :style="{ + backgroundImage: 'url(' + bgList[index].icon2 + ')', + backgroundColor: bgList[index].iconBg, + width: '73px', + height: '73px', + backgroundSize: '40px' + }" + /> + </div> + <div class="item-right"> <div class="top-right"> <div class="right-name"> {{ item.energyName }} + <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span> </div> <div class="right-value"> <span>{{ item.count }}</span> - <span class="unit">{{ item.energyUnit }}</span> </div> </div> - </div> - <div class="item-bottom"> - <div class="bottom-left"> - <span> - 鍚屾瘮: {{ Math.abs(item.tongbi) }} - <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''"> - <Top v-if="item.tongbi > 0" /> - <Bottom v-if="item.tongbi < 0" /> - </el-icon> - </span> - </div> - <div class="bottom-right"> - <span - >鐜瘮: {{ Math.abs(item.huanbi) }} - <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''"> - <Top v-if="item.huanbi > 0" /> - <Bottom v-if="item.huanbi < 0" /> - </el-icon> - </span> + <div class="item-bottom"> + <div class="bottom-left"> + <span> + 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }} + <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''"> + <Top v-if="item.tongbi > 0" /> + <Bottom v-if="item.tongbi < 0" /> + </el-icon> + </span> + </div> + <div class="bottom-right"> + <span> + 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }} + <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''"> + <Top v-if="item.huanbi > 0" /> + <Bottom v-if="item.huanbi < 0" /> + </el-icon> + </span> + </div> </div> </div> </div> @@ -133,66 +147,71 @@ </el-col> </el-row> </div> - <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="80%" v-if="dialogVisible"> + <el-dialog v-model="dialogVisible" title="鏌ョ湅鍏ㄥ巶鑳借�楃粺璁�" width="90%" v-if="dialogVisible"> <template v-for="(row, rowIndex) in list" :key="rowIndex"> <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'"> <template v-for="(item, index) in row" :key="index"> - <div - class="card-list-item" - :style="{ - backgroundImage: 'url(' + bgList[index].bg + ')', - }" - > - <div class="item-top"> - <div - class="top-icon" + <div class="card-list-item"> + <div class="item-left"> + <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon + ')', + backgroundColor: bgList[index].iconBg, + width: '73px', + height: '73px', + backgroundSize: '40px' }" /> + </div> + <div class="item-right"> <div class="top-right"> <div class="right-name"> {{ item.energyName }} + <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span> </div> <div class="right-value"> <span> {{ item.count }}</span> - <span class="unit">{{ item.energyUnit }}</span> </div> </div> - </div> - <div class="item-bottom"> - <div class="bottom-left"> - <span> - 鍚屾瘮: {{ Math.abs(item.tongbi) }} - <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''"> - <Top v-if="item.tongbi > 0" /> - <Bottom v-if="item.tongbi < 0" /> - </el-icon> - </span> - </div> - <div class="bottom-right"> - <span - >鐜瘮: {{ Math.abs(item.huanbi) }} - <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''"> - <Top v-if="item.huanbi > 0" /> - <Bottom v-if="item.huanbi < 0" /> - </el-icon> - </span> + <div class="item-bottom"> + <div class="bottom-left"> + <span> + 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }} + <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''"> + <Top v-if="item.tongbi > 0" /> + <Bottom v-if="item.tongbi < 0" /> + </el-icon> + </span> + </div> + <div class="bottom-right"> + <span> + 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }} + <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''"> + <Top v-if="item.huanbi > 0" /> + <Bottom v-if="item.huanbi < 0" /> + </el-icon> + </span> + </div> </div> </div> </div> </template> </div> <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark'"> - <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0"> + <template v-for="(item, index) in row" :key="index"> <div class="card-list-item"> - <div class="item-top"> - <div - class="top-icon" + <div class="item-left"> + <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')', + backgroundColor: bgList[index].iconBg, + width: '73px', + height: '73px', + backgroundSize: '40px' }" /> + </div> + <div class="item-right"> <div class="top-right"> <div class="right-name"> {{ item.energyName }} @@ -202,29 +221,28 @@ <span class="unit">{{ item.energyUnit }}</span> </div> </div> - </div> - <div class="item-bottom"> - <div class="bottom-left"> - <span> - 鍚屾瘮: {{ Math.abs(item.tongbi) }} - <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''"> - <Top v-if="item.tongbi > 0" /> - <Bottom v-if="item.tongbi < 0" /> - </el-icon> - </span> - </div> - <div class="bottom-right"> - <span - >鐜瘮: {{ Math.abs(item.huanbi) }} - <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''"> - <Top v-if="item.huanbi > 0" /> - <Bottom v-if="item.huanbi < 0" /> - </el-icon> - </span> + <div class="item-bottom"> + <div class="bottom-left"> + <span> + 鍚屾瘮: {{ Math.abs(item.tongbi).toFixed(1) }} + <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''"> + <Top v-if="item.tongbi > 0" /> + <Bottom v-if="item.tongbi < 0" /> + </el-icon> + </span> + </div> + <div class="bottom-right"> + <span> + 鐜瘮: {{ Math.abs(item.huanbi).toFixed(1) }} + <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''"> + <Top v-if="item.huanbi > 0" /> + <Bottom v-if="item.huanbi < 0" /> + </el-icon> + </span> + </div> </div> </div> </div> - <div class="line"></div> </template> </div> </template> @@ -258,42 +276,47 @@ import index_card_3 from "@/assets/images/home/index-card-3.png" import index_card_4 from "@/assets/images/home/index-card-4.png" import index_card_5 from "@/assets/images/home/index-card-5.png" -import card_icon_1 from "@/assets/images/home/card-icon-1.png" -import card_icon_2 from "@/assets/images/home/card-icon-2.png" -import card_icon_3 from "@/assets/images/home/card-icon-3.png" -import card_icon_4 from "@/assets/images/home/card-icon-4.png" -import card_icon_5 from "@/assets/images/home/card-icon-5.png" -import card_icon2_1 from "@/assets/images/home/card-icon2-1.png" -import card_icon2_2 from "@/assets/images/home/card-icon2-2.png" -import card_icon2_3 from "@/assets/images/home/card-icon2-3.png" -import card_icon2_4 from "@/assets/images/home/card-icon2-4.png" -import card_icon2_5 from "@/assets/images/home/card-icon2-5.png" +import card_icon_1 from "@/assets/images/2.png" +import card_icon_2 from "@/assets/images/3.png" +import card_icon_3 from "@/assets/images/5.png" +import card_icon_4 from "@/assets/images/6.png" +import card_icon_5 from "@/assets/images/7.png" +import card_icon2_1 from "@/assets/images/2.png" +import card_icon2_2 from "@/assets/images/3.png" +import card_icon2_3 from "@/assets/images/5.png" +import card_icon2_4 from "@/assets/images/6.png" +import card_icon2_5 from "@/assets/images/7.png" import { fa } from "element-plus/es/locales.mjs" const bgList = ref([ { bg: index_card_1, icon: card_icon_1, icon2: card_icon2_1, + iconBg: "#3F7EE8" }, { bg: index_card_2, icon: card_icon_2, icon2: card_icon2_2, + iconBg: "#FFA024" }, { bg: index_card_3, icon: card_icon_3, icon2: card_icon2_3, + iconBg: "#FFCC00" }, { bg: index_card_4, icon: card_icon_4, icon2: card_icon2_4, + iconBg: "#3CC8D9" }, { bg: index_card_5, icon: card_icon_5, icon2: card_icon2_5, + iconBg: "#8833FF" }, ]) const list = ref([[{}, {}, {}, {}, {}]]) @@ -857,10 +880,24 @@ } </script> <style scoped lang="scss"> +.card-header-title { + font-size: 18px; + font-weight: bold; + display: flex; + align-items: center; + + .header-more-btn { + margin-left: 12px; + padding: 4px 10px; + font-size: 12px; + height: 28px; + } +} + .themeDark { .page { padding: 20px; - background: #120f2e; + background: #05234A; .card-title { width: 132px; @@ -873,70 +910,138 @@ .card-list { margin-top: 14px; display: flex; - // justify-content: space-between; width: 100%; flex-wrap: wrap; + justify-content: space-between; + gap: 15px; + + &:after { + content: ""; + flex: auto; + } .card-list-item { - width: 19%; - margin-right: 1%; - height: 157px; - background-size: 100% 100%; + width: 320px; + height: 127px; + background: rgba(242, 246, 250, 0.1); box-sizing: border-box; - padding: 25px 18px 12px 16px; + padding: 16px; color: #fff; - - .item-top { - display: flex; - - .top-icon { - width: 50px; - height: 50px; - background-size: 100% 100%; - } - - .top-right { - margin-left: 12px; - - .right-name { - font-weight: bold; - font-size: 16px; - font-family: OPPOSans-Bold; - .unit { - margin-left: 2px; - font-size: 16px; - font-weight: normal; - } - } - - .right-value { - font-weight: 800; - font-size: 25px; - margin-top: 10px; - font-family: OPPOSans-Medium; - - .unit { - margin-left: 5px; - font-size: 16px; - font-weight: normal; - } - } - } + border-radius: 9px; + box-shadow: none; + border: none; + display: flex; + flex-direction: row; + align-items: center; + + &:hover { + background: rgba(242, 246, 250, 0.15); } - .item-bottom { + .item-left { + margin-right: 16px; + + .top-icon { + width: 73px; + height: 73px; + background-size: 40px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + } + } + + .item-right { + flex: 1; display: flex; - justify-content: space-between; - margin-top: 18px; - font-family: OPPOSans, OPPOSans; - font-weight: bold; - font-size: 14px; + flex-direction: column; + + .top-right { + display: flex; + flex-direction: column; + + .right-name { + font-weight: 400; + font-size: 14px; + font-family: OPPOSans-Regular; + color: rgba(255, 255, 255, 0.65); + .unit { + color: rgba(255, 255, 255, 0.65); + margin-left: 2px; + font-size: 12px; + font-weight: normal; + } + } + + .right-value { + font-weight: 500; + font-size: 26px; + margin-top: 4px; + font-family: OPPOSans-Medium; + color: #fff; + line-height: 1; + } + } + + .item-bottom { + display: flex; + justify-content: space-between; + margin-top: 14px; + font-family: OPPOSans, OPPOSans; + font-weight: normal; + font-size: 12px; + color: rgba(255, 255, 255, 0.5); + line-height: 1; + + .bottom-left, .bottom-right { + display: flex; + align-items: center; + + :deep(.el-icon) { + margin-left: 4px; + font-size: 12px; + } + } + } } } } .page-main { - margin-top: 23px; + margin-top: 20px; + + .el-card { + background-color: #0E2E5E; + border: none; + border-radius: 6px; + + :deep(.el-card__body) { + padding: 12px; + } + } + } + + .top-header { + margin-top: 12px; + height: 32px; + font-family: OPPOSans, OPPOSans; + font-weight: 500; + font-size: 14px; + color: rgba(255, 255, 255, 0.8); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10px; + + .header-left { + display: flex; + + .name { + margin-left: 7px; + margin-right: 7px; + } + } } } @@ -946,25 +1051,29 @@ margin-top: 10px; } - .top-header { - margin-top: 15px; - height: 23px; - font-family: OPPOSans, OPPOSans; - font-weight: 500; - font-size: 14px; - color: rgba(196, 213, 255, 0.6); - border-bottom: 1px solid rgba(196, 213, 255, 0.6); - display: flex; - justify-content: space-between; - - .header-left { - display: flex; - - .name { - margin-left: 7px; - margin-right: 7px; - } + :deep(.el-button--primary) { + background-color: #1976D2; + border-color: #1976D2; + } + + :deep(.el-card__header) { + padding: 10px 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) { + border-color: rgba(255, 255, 255, 0.1); + background-color: transparent; + color: #fff; + + &.is-active { + background-color: #1976D2; + border-color: #1976D2; } + } + + :deep(.el-tabs--card > .el-tabs__header) { + border-color: rgba(255, 255, 255, 0.1); } } @@ -978,82 +1087,140 @@ height: 29px; font-weight: bold; font-size: 22px; - color: #ffffff; + color: #333; } .card-list { - width: 100%; margin-top: 14px; display: flex; - // justify-content: space-between; - align-items: center; - background-image: url("@/assets/images/home/index-card-bg2.png"); - background-size: 100% 100%; + width: 100%; flex-wrap: wrap; - border-radius: 20px; + justify-content: space-between; + gap: 15px; + + &:after { + content: ""; + flex: auto; + } .card-list-item { - width: 19%; - margin-right: 0.5%; - height: 157px; - background-size: 100% 100%; + width: 320px; + height: 127px; + background: #fff; box-sizing: border-box; - padding: 25px 18px 12px 16px; - color: #fff; - - .item-top { - display: flex; - + padding: 16px; + color: #333; + border-radius: 9px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: row; + align-items: center; + + .item-left { + margin-right: 16px; + .top-icon { - width: 69px; - height: 69px; - background-size: 100% 100%; + width: 73px; + height: 73px; + background-size: 40px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; } - + } + + .item-right { + flex: 1; + display: flex; + flex-direction: column; + .top-right { - margin-left: 16px; - + display: flex; + flex-direction: column; + .right-name { - font-weight: bold; - font-size: 16px; - font-family: OPPOSans-Bold; - } - - .right-value { - font-weight: 800; - font-size: 30px; - margin-top: 10px; - font-family: OPPOSans-Medium; - + font-weight: 400; + font-size: 14px; + font-family: OPPOSans-Regular; + color: rgba(0, 0, 0, 0.65); .unit { - margin-left: 5px; - font-size: 16px; + color: rgba(0, 0, 0, 0.65); + margin-left: 2px; + font-size: 12px; font-weight: normal; + } + } + + .right-value { + font-weight: 500; + font-size: 26px; + margin-top: 4px; + font-family: OPPOSans-Medium; + color: #333; + line-height: 1; + } + } + + .item-bottom { + display: flex; + justify-content: space-between; + margin-top: 14px; + font-family: OPPOSans, OPPOSans; + font-weight: normal; + font-size: 12px; + color: rgba(0, 0, 0, 0.5); + line-height: 1; + + .bottom-left, .bottom-right { + display: flex; + align-items: center; + + :deep(.el-icon) { + margin-left: 4px; + font-size: 12px; } } } } - - .item-bottom { - display: flex; - justify-content: space-between; - margin-top: 18px; - font-family: OPPOSans, OPPOSans; - font-weight: bold; - font-size: 14px; - } - } - - .line { - width: 1px; - height: 64px; - background-image: url("@/assets/images/home/line@2x.png"); - background-size: 100% 100%; } } .page-main { - margin-top: 23px; + margin-top: 20px; + + .el-card { + background-color: #fff; + border: none; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); + + :deep(.el-card__body) { + padding: 12px; + } + } + } + + .top-header { + margin-top: 12px; + height: 32px; + font-family: OPPOSans, OPPOSans; + font-weight: 500; + font-size: 14px; + color: rgba(0, 0, 0, 0.6); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10px; + + .header-left { + display: flex; + + .name { + margin-left: 7px; + margin-right: 7px; + } + } } } @@ -1063,25 +1230,28 @@ margin-top: 10px; } - .top-header { - margin-top: 15px; - height: 23px; - font-family: OPPOSans, OPPOSans; - font-weight: 500; - font-size: 14px; - color: rgba(29, 29, 29, 0.6); - border-bottom: 1px solid rgba(196, 213, 255, 0.6); - display: flex; - justify-content: space-between; - - .header-left { - display: flex; - - .name { - margin-left: 7px; - margin-right: 7px; - } + :deep(.el-button--primary) { + background-color: #1976D2; + border-color: #1976D2; + } + + :deep(.el-card__header) { + padding: 10px 15px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + + :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) { + border-color: rgba(0, 0, 0, 0.1); + + &.is-active { + background-color: #1976D2; + border-color: #1976D2; + color: #fff; } } + + :deep(.el-tabs--card > .el-tabs__header) { + border-color: rgba(0, 0, 0, 0.1); + } } </style> -- Gitblit v1.9.3