From 5d152dbd84722beeec5b2d5977333bd1e2cc6809 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 28 二月 2024 16:46:29 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice
---
src/views/daoAnOffice/left-center.vue | 147 +++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 141 insertions(+), 6 deletions(-)
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>
--
Gitblit v1.8.0