From b3d89f70b2fefd7438eec61f7662da30ff8923c1 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 15 三月 2024 14:35:46 +0800
Subject: [PATCH] feat:道路数据接口
---
src/views/daoAnOffice/left-center.vue | 229 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 224 insertions(+), 5 deletions(-)
diff --git a/src/views/daoAnOffice/left-center.vue b/src/views/daoAnOffice/left-center.vue
index 548f41d..1104504 100644
--- a/src/views/daoAnOffice/left-center.vue
+++ b/src/views/daoAnOffice/left-center.vue
@@ -1,15 +1,234 @@
<script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } 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,
+ }
+])
+const iconList = ref([
+ {
+ id: 1,
+ iconName: '閬撹矾閲岀▼鏁伴噺',
+ icon: new URL('../../assets/img/gaosu.png', import.meta.url).href
+ },
+ {
+ id: 2,
+ iconName: '鏈哄姩杞︿繚鏈夐噺',
+ icon: [
+ {
+ key: 'indexOneName',
+ img: new URL('../../assets/img/hycl.png', import.meta.url).href
+ },
+ {
+ key: 'indexTwoName',
+ img: new URL('../../assets/img/gjky.png', import.meta.url).href
+ },
+ {
+ key: 'indexThreeName',
+ img: new URL('../../assets/img/xxqc.png', import.meta.url).href
+ },
+ {
+ key: 'indexFourName',
+ img: new URL('../../assets/img/mtc.png', import.meta.url).href
+ },
+ ],
+ },
+ {
+ id: 3,
+ iconName: '椹鹃┒浜轰繚鏈夐噺',
+ icon: new URL('../../assets/img/qclc.png', import.meta.url).href
+ }
+])
+const dataInfo = ref({});
+const getData = () => {
+ currentGET('mileage').then((res) => {
+ if (res.code === 200) {
+ dataInfo.value = res.data
+ } else {
+
+ }
+ });
+}
+
+getData();
+
+computed(() => {
+
+})
</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 class="roadMileage" v-for="item in dataInfo">
+ <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>
</template>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.x-a {
+ background-color: rgba(17, 34, 58, 0.6);
+
+ 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;
+ }
+ }
+}
+
+.roadMileage-item-num {
+ font-family: 'PangMenZhengDao' !important;
+ letter-spacing: 1px !important;
+}
+</style>
--
Gitblit v1.8.0