From 27c5590aab433687c58dbf41e9271f71008834f0 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 27 二月 2023 11:48:05 +0800
Subject: [PATCH] 修改大屏首页
---
src/components/chart/ProjectCategory.vue | 116 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 77 insertions(+), 39 deletions(-)
diff --git a/src/components/chart/ProjectCategory.vue b/src/components/chart/ProjectCategory.vue
index ef36fd9..34ff6f9 100644
--- a/src/components/chart/ProjectCategory.vue
+++ b/src/components/chart/ProjectCategory.vue
@@ -1,19 +1,16 @@
<template>
<div class="project-category">
<div class="content">
-
- <div
- :class="i % 2 ? 'rank2' : 'rank1'"
- v-for="(item, i) in datalist.slice(0, 8)"
- :key="item.projtype"
- >
- <div class="num">{{ item.count }}涓�</div>
- <div class="name">{{ item.projtype }}</div>
- <div class="bar">
- <img src="~@/assets/img/Screen/leftBar.png" alt="" />
- </div>
- </div>
-
+ <div
+ :class="'rank' + i"
+ class="rank"
+ v-for="(item, i) in datalist.slice(0, 8)"
+ :key="item.projtype"
+ >
+ <div class="num">{{ item.count }}涓�</div>
+ <div class="name">{{ item.projtype }}</div>
+ <div class="bar"></div>
+ </div>
<!-- <div class="rank rank2">
<div class="num">2涓�</div>
@@ -80,57 +77,98 @@
.project-category {
position: relative;
width: 100%;
- height: 100%;
+ height: calc(100% - 30px);
background: url("~@/assets/img/Screen/projectBg.png") center center;
- background-size: 330px 227px;
- .content {
- position: relative;
- display: flex;
- flex-wrap: wrap;
- margin: 0 auto;
- height: 90%;
- justify-content: space-between;
- .rank1, .rank2 {
- // box-sizing: border-box;
- // display: flex;
- // flex-direction: column;
- // width: 160px;
- // flex: 1;
- height: 25px;
- // align-items: end;
+ background-size: 100% 100%;
+ .content {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ // height: 85%;
+ height: 100%;
+
+ .rank {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ div {
+ margin: 2px 0px;
+ }
.num {
color: #839ecb;
}
.name {
- // margin: 6px;
color: #fff;
}
+
.bar {
width: 61px;
height: 3px;
- // background: url("~@/assets/img/Screen/leftBar.png");
- // background-size: 100% 100%;
- img {
- width: 100%;
- height: 100%;
- }
+ background-image: url(../../assets/img/Screen/leftBar.png);
+ background-size: 100% 100%;
}
}
- .rank1 {
+
+ .rank0,
+ .rank6 {
width: 35%;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
- .rank2 {
+
+ .rank1,
+ .rank7 {
width: 35%;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
+
+ .rank2,
+ .rank4 {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ justify-items: flex-end;
+
+ div {
+ width: 80%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ }
+ .bar {
+ margin-left: calc(80% - 61px);
+ }
+ }
+
+ .rank3,
+ .rank5 {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ justify-items: flex-end;
+
+ div {
+ margin-left: 20%;
+ width: 80%;
+ align-items: flex-end;
+ text-align: left;
+
+ .bar {
+ display: flex;
+ align-items: center;
+ justify-items: flex-end;
+ }
+ }
+ }
}
}
</style>
--
Gitblit v1.9.3