From 7633cfbb1d9d75b316a004b69f7f9feea4233934 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期三, 28 二月 2024 16:42:21 +0800
Subject: [PATCH] 大屏左侧
---
src/assets/img/gaosu.png | 0
src/assets/img/mtc.png | 0
src/views/daoAnOffice/left-bottom.vue | 92 ++++++++++++++++++
src/assets/img/fjbg.png | 0
src/assets/img/gjky.png | 0
src/components/item-wrap/item-wrap.vue | 1
src/views/header.vue | 12 +-
src/assets/img/xxqc.png | 0
src/views/daoAnOffice/left-center.vue | 147 ++++++++++++++++++++++++++++-
src/assets/img/qclc.png | 0
src/views/daoAnOffice/index.vue | 8 +
src/assets/img/hycl.png | 0
12 files changed, 243 insertions(+), 17 deletions(-)
diff --git a/src/assets/img/fjbg.png b/src/assets/img/fjbg.png
new file mode 100644
index 0000000..ed066f7
--- /dev/null
+++ b/src/assets/img/fjbg.png
Binary files differ
diff --git a/src/assets/img/gaosu.png b/src/assets/img/gaosu.png
new file mode 100644
index 0000000..6d2cc02
--- /dev/null
+++ b/src/assets/img/gaosu.png
Binary files differ
diff --git a/src/assets/img/gjky.png b/src/assets/img/gjky.png
new file mode 100644
index 0000000..c94cafe
--- /dev/null
+++ b/src/assets/img/gjky.png
Binary files differ
diff --git a/src/assets/img/hycl.png b/src/assets/img/hycl.png
new file mode 100644
index 0000000..f8a6106
--- /dev/null
+++ b/src/assets/img/hycl.png
Binary files differ
diff --git a/src/assets/img/mtc.png b/src/assets/img/mtc.png
new file mode 100644
index 0000000..04c3633
--- /dev/null
+++ b/src/assets/img/mtc.png
Binary files differ
diff --git a/src/assets/img/qclc.png b/src/assets/img/qclc.png
new file mode 100644
index 0000000..417bae2
--- /dev/null
+++ b/src/assets/img/qclc.png
Binary files differ
diff --git a/src/assets/img/xxqc.png b/src/assets/img/xxqc.png
new file mode 100644
index 0000000..59357d6
--- /dev/null
+++ b/src/assets/img/xxqc.png
Binary files differ
diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index 4352584..3e630a1 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -79,6 +79,7 @@
.item_title_content {
//height: $item_title_content-height;
margin: 20px 0;
+
}
.item_title_content_def {
diff --git a/src/views/daoAnOffice/index.vue b/src/views/daoAnOffice/index.vue
index 56e75c5..99f8e63 100644
--- a/src/views/daoAnOffice/index.vue
+++ b/src/views/daoAnOffice/index.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";
-import MenuHeader from "@/components/menu-header.vue";
+// import MenuHeader from "@/components/menu-header.vue";
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
@@ -279,11 +279,11 @@
}
.contetn_lr-item_right {
- flex: auto;
+ width: 48%;
}
.contetn_lr-item_left {
- flex: 1;
+ width: 50%;
}
.contetn_lr-item_contetn {
@@ -350,6 +350,8 @@
.item_title_content {
//height: $item_title_content-height;
margin: 20px 0;
+ border: 1px solid #29466A;
+ //background: #11223A;
}
.item_title_content_def {
diff --git a/src/views/daoAnOffice/left-bottom.vue b/src/views/daoAnOffice/left-bottom.vue
index 2c2b4a8..43187d9 100644
--- a/src/views/daoAnOffice/left-bottom.vue
+++ b/src/views/daoAnOffice/left-bottom.vue
@@ -5,20 +5,108 @@
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com"
-
+const options = reactive([
+ {
+ title:"闈掑煄灞遍鏅尯",
+ num1:56,
+ num2:54,
+ num3:47,
+ num4:35,
+ num5:48,
+ num6:21,
+ num7:87,
+ },
+ {
+ title:"閮芥睙鍫伴鏅尯",
+ num1:356,
+ num2:354,
+ num3:347,
+ num4:335,
+ num5:348,
+ num6:321,
+ num7:387,
+ },
+ {
+ title:"铏瑰彛鏃呮父鏅尯",
+ num1:256,
+ num2:254,
+ num3:247,
+ num4:235,
+ num5:248,
+ num6:221,
+ num7:287,
+ },
+ {
+ title:"鐏屽幙鍙ゅ煄",
+ num1:156,
+ num2:154,
+ num3:147,
+ num4:135,
+ num5:148,
+ num6:121,
+ num7:187,
+ }
+])
</script>
<template>
<div class="left_boottom_wrap beautify-scroll-def" >
- 閲嶇偣鏅尯
+ <div class="left-bottom-fj" v-for="(item,index) in options" :key="index">
+ <div>
+ <div class="left-bottom-fj-title">{{item.title}}</div>
+ <div class="left-bottom-fj-info">
+ <p class="left-fj-p">杞︽祦閲�:<span class="left-p">{{ item.num1 }}</span><span class="left-fj-sp">杈�</span></p>
+ <p class="left-fj-p">娓稿棰勭害:<span class="left-p">{{ item.num2 }}</span><span class="left-fj-sp">浜�</span></p>
+ <p class="left-fj-p">鍦ㄥ矖璀﹀姏:<span class="left-p">{{ item.num3 }}</span><span class="left-fj-sp">浜�</span></p>
+ <p class="left-fj-p">澶囩敤璀﹀姏:<span class="left-p">{{ item.num4 }}</span><span class="left-fj-sp">杈�</span></p>
+ <p class="left-fj-p">浜烘祦閲�:<span class="left-p">{{ item.num5 }}</span><span class="left-fj-sp">浜�</span></p>
+ <p class="left-fj-p">鍏ュ洯浜烘暟:<span class="left-p">{{ item.num6 }}</span><span class="left-fj-sp">浜�</span></p>
+ <p class="left-fj-p">鍦ㄥ矖璀﹁溅:<span class="left-p">{{ item.num7 }}</span><span class="left-fj-sp">杈�</span></p>
+ </div>
+ </div>
+
+ </div>
</div>
</template>
<style scoped lang="scss">
.left_boottom_wrap {
+ margin-left: 10px;
overflow: hidden;
width: 100%;
height: 100%;
+ .left-bottom-fj{
+ margin-bottom:20px ;
+ border: 1px solid #29466A;
+ .left-bottom-fj-info{
+ padding: 10px;
+ .left-fj-p{
+ margin-top: 3px;
+ margin-right: 10px;
+ color: #4481DD;
+ .left-fj-sp{
+ color: #fff;
+ }
+ }
+ display: flex;
+ flex-wrap: wrap;
+ .left-p{
+ color: #FAE67D;
+ }
+ }
+ .left-bottom-fj-title{
+ font-family: PingFang SC;
+ font-weight: 800;
+ color: #44DBDD;
+ line-height: 40px;
+ height: 80px;
+ text-align: center;
+ background-image: url("@/assets/img/fjbg.png");
+ background-position: center; /* 姘村钩鍜屽瀭鐩撮兘灞呬腑瀵归綈 */
+ background-repeat: no-repeat; /* 涓嶉噸澶嶅钩閾鸿儗鏅浘鍍� */
+ background-size: cover; /* 鑷姩璋冩暣澶у皬浠ュ畬鍏ㄨ鐩栧厓绱� */
+ }
+ }
}
.doudong {
diff --git a/src/views/daoAnOffice/left-center.vue b/src/views/daoAnOffice/left-center.vue
index 548f41d..142be88 100644
--- a/src/views/daoAnOffice/left-center.vue
+++ b/src/views/daoAnOffice/left-center.vue
@@ -2,14 +2,149 @@
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";
-
-
+const options = reactive ( [
+ {
+ title: "楂橀�熻矾",
+ name: "1",
+ num: "195",
+ img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
+ {
+ title: "鍥界渷閬�",
+ name: "1",
+ num: "167",
+ img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
+ {
+ title: "鍘夸埂閬�",
+ name: "1",
+ num: "188",
+ img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
+ {
+ title: "鍐滄潙閬撹矾",
+ name: "1",
+ num: "128",
+ img:new URL('../../assets/img/gaosu.png', import.meta.url).href,
+ }
+])
+const optionsT = reactive ( [
+ {
+ title: "璐ц繍杞﹁締",
+ name: "1",
+ num: "619",
+ img:new URL('../../assets/img/hycl.png', import.meta.url).href,},
+ {
+ title: "鍏氦瀹㈣繍",
+ name: "1",
+ num: "258",
+ img:new URL('../../assets/img/gjky.png', import.meta.url).href,},
+ {
+ title: "灏忓瀷楠戣溅",
+ name: "1",
+ num: "1234",
+ img:new URL('../../assets/img/xxqc.png', import.meta.url).href,},
+ {
+ title: "鎽╂墭杞�",
+ name: "1",
+ num: "2355",
+ img:new URL('../../assets/img/mtc.png', import.meta.url).href,
+ }
+])
+const optionsS = reactive ( [
+ {
+ title: "璐ф簮杞﹁締椹鹃┒浜�",
+ name: "1",
+ num: "619",
+ img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
+ {
+ title: "鍏氦瀹㈣繍椹鹃┒浜�",
+ name: "1",
+ num: "258",
+ img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
+ {
+ title: "灏忓瀷姹借溅椹鹃┒浜�",
+ name: "1",
+ num: "1234",
+ img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
+ {
+ title: "鎽╂墭杞﹂┚椹朵汉",
+ name: "1",
+ num: "2355",
+ img:new URL('../../assets/img/qclc.png', import.meta.url).href,
+ }
+])
</script>
<template>
-<div>
- 閬撹矾閲岀▼鏁伴噺
-</div>
+<div class="x-a">
+ <div class="roadMileage">
+ <p class="roadMileage-title">閬撹矾閲岀▼鏁伴噺</p>
+ <div style="display:flex;justify-content: space-between">
+ <div v-for="(item,index) in options" :key="index" class="roadMileage-item">
+ <img :src="item.img" alt="" class="roadMileage-item-img">
+ <p class="roadMileage-item-title">{{item.title}}</p>
+ <p class="roadMileage-item-num">{{item.num}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="roadMileage">
+ <p class="roadMileage-title">閬撹矾閲岀▼鏁伴噺</p>
+ <div style="display:flex;justify-content: space-between">
+ <div v-for="(item,index) in optionsT" :key="index" class="roadMileage-item">
+ <img :src="item.img" alt="" class="roadMileage-item-img">
+ <p class="roadMileage-item-title">{{item.title}}</p>
+ <p class="roadMileage-item-num">{{item.num}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="roadMileage">
+ <p class="roadMileage-title">閬撹矾閲岀▼鏁伴噺</p>
+ <div style="display:flex;justify-content: space-between">
+ <div v-for="(item,index) in optionsS" :key="index" class="roadMileage-item">
+ <img :src="item.img" alt="" class="roadMileage-item-img">
+ <p class="roadMileage-item-title">{{item.title}}</p>
+ <p class="roadMileage-item-num">{{item.num}}</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
</template>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.x-a{
+ background-color: #111E3C;
+ border: 1px solid #29466A;
+ padding: 10px 10px 20px;
+}
+.roadMileage{
+ //display: flex;
+ .roadMileage-title{
+ margin: 10px 0;
+ font-family: PingFang SC;
+ font-weight: 600;
+ color: #447ED6;
+ line-height: 22px;
+
+ }
+ .roadMileage-item{
+ padding: 15px 0;
+ background: linear-gradient(0deg, rgba(13,29,50,0.55), rgba(34,82,154,0.55));
+ //border: 1px solid #29466A;
+ //opacity: 0.6;
+ //background: #11223A;
+ .roadMileage-item-img{
+ width: 130px;
+ }
+ .roadMileage-item-title{
+ text-align: center;
+ font-family: PingFang SC;
+ color: #44DBDD;
+ }
+ .roadMileage-item-num{
+ text-align: center;
+ font-weight: 800;
+ font-family: PingFang SC;
+ color: #FAE67D;
+ }
+ }
+}
+</style>
diff --git a/src/views/header.vue b/src/views/header.vue
index 2bfa9a7..16ed804 100644
--- a/src/views/header.vue
+++ b/src/views/header.vue
@@ -35,13 +35,13 @@
<span class="title-text">閬撳畨鍔炲競鍩熸不鐞嗘暟鎹ぇ灞�</span>
</div>
</div>
- <div class="timers">
- {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
+<!-- <div class="timers">-->
+<!-- {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}-->
- <div class="setting_icon" @click="setSettingShow(true)">
- <img src="@/assets/img/headers/setting.png" alt="璁剧疆">
- </div>
- </div>
+<!-- <div class="setting_icon" @click="setSettingShow(true)">-->
+<!-- <img src="@/assets/img/headers/setting.png" alt="璁剧疆">-->
+<!-- </div>-->
+<!-- </div>-->
</div>
</template>
--
Gitblit v1.8.0