From 2b7b4e2ea52a17eda4eca7ada4a139ad20785631 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 04 三月 2024 14:36:57 +0800
Subject: [PATCH] fix:修改地图以及细节部分
---
src/views/HomeView.vue | 15 +
src/views/daoAnOffice/right/analysis/index.vue | 49 ++++-
src/assets/img/test_img/t4.jpg | 0
src/views/daoAnOffice/left-top.vue | 6
src/assets/img/test_img/t2.png | 0
src/assets/img/test_img/t7.jpg | 0
src/views/daoAnOffice/center/map.vue | 327 ++++++++++++++++++++++++++++++++++++
src/assets/img/test_img/t3.png | 0
src/assets/img/test_img/t5.jpg | 0
src/views/daoAnOffice/center-map.vue | 4
src/assets/img/test_img/t1.jpg | 0
src/views/daoAnOffice/right/danger/dataTable.vue | 24 +-
src/views/daoAnOffice/right/publicize/index.vue | 14
index.html | 2
src/assets/img/test_img/t6.jpg | 0
src/views/daoAnOffice/right/danger/index.vue | 2
src/utils/require.js | 8
src/views/daoAnOffice/index.vue | 31 ++-
src/views/daoAnOffice/right/danger/infoView.vue | 35 ++-
19 files changed, 452 insertions(+), 65 deletions(-)
diff --git a/index.html b/index.html
index 938a73e..b31619e 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
<script type="module" src="/src/main.ts"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
- securityJsCode: '22a08b696f47f78270366d5294c8f66e', //
+ securityJsCode: 'd60cb542f11231fc9ceddcf2f3e45530', //
}
</script>
</body>
diff --git a/src/assets/img/test_img/t1.jpg b/src/assets/img/test_img/t1.jpg
new file mode 100644
index 0000000..740b605
--- /dev/null
+++ b/src/assets/img/test_img/t1.jpg
Binary files differ
diff --git a/src/assets/img/test_img/t2.png b/src/assets/img/test_img/t2.png
new file mode 100644
index 0000000..1f29de8
--- /dev/null
+++ b/src/assets/img/test_img/t2.png
Binary files differ
diff --git a/src/assets/img/test_img/t3.png b/src/assets/img/test_img/t3.png
new file mode 100644
index 0000000..33f6a20
--- /dev/null
+++ b/src/assets/img/test_img/t3.png
Binary files differ
diff --git a/src/assets/img/test_img/t4.jpg b/src/assets/img/test_img/t4.jpg
new file mode 100644
index 0000000..5e58504
--- /dev/null
+++ b/src/assets/img/test_img/t4.jpg
Binary files differ
diff --git a/src/assets/img/test_img/t5.jpg b/src/assets/img/test_img/t5.jpg
new file mode 100644
index 0000000..852f353
--- /dev/null
+++ b/src/assets/img/test_img/t5.jpg
Binary files differ
diff --git a/src/assets/img/test_img/t6.jpg b/src/assets/img/test_img/t6.jpg
new file mode 100644
index 0000000..11ebf3c
--- /dev/null
+++ b/src/assets/img/test_img/t6.jpg
Binary files differ
diff --git a/src/assets/img/test_img/t7.jpg b/src/assets/img/test_img/t7.jpg
new file mode 100644
index 0000000..371979f
--- /dev/null
+++ b/src/assets/img/test_img/t7.jpg
Binary files differ
diff --git a/src/utils/require.js b/src/utils/require.js
new file mode 100644
index 0000000..27709ce
--- /dev/null
+++ b/src/utils/require.js
@@ -0,0 +1,8 @@
+export const require = (imgPath) => {
+ try {
+ const handlePath = imgPath.replace('@', '..');
+ return new URL(handlePath, import.meta.url).href;
+ } catch(err) {
+ console.warn(err);
+ }
+}
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 842401e..82ad977 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -12,6 +12,9 @@
// import Chartgd from "@/views/daoAnOffice/chartgd.vue";
+// 涓績鍦板浘
+import Map from './daoAnOffice/center/map.vue';
+
const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
@@ -33,6 +36,7 @@
>
<div class="content_wrap">
<!-- <chartgd class="gddt" v-show="!mapState"></chartgd> -->
+ <Map v-if="!mapState"></Map>
<Headers />
<RouterView />
<MessageContent />
@@ -59,12 +63,15 @@
background-position: center center;
}
.d-bottom{
- position: relative;
+ position: absolute;
//width: 120px;
- bottom: 140px;
- height: 80px;
+ width: 1920px;
+ height: 41px;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 0;
background-image: url("@/assets/img/bottombg.png");
- background-size: cover;
+ background-size: contain;
background-position: center center;
margin-bottom: 4px;
}
diff --git a/src/views/daoAnOffice/center-map.vue b/src/views/daoAnOffice/center-map.vue
index 6203b40..d06b1cc 100644
--- a/src/views/daoAnOffice/center-map.vue
+++ b/src/views/daoAnOffice/center-map.vue
@@ -81,7 +81,7 @@
geo3D: {
map: "dujiangyan", //娉ㄥ唽鍦板浘鐨勫悕瀛�
roam: true, //寮�鍚紶鏍囩缉鏀惧拰骞崇Щ婕父銆傞粯璁や笉寮�鍚�
- bottom: 120,
+ bottom: 80,
left: 10,
itemStyle: {
color: "#4189f2", // 鑳屾櫙
@@ -181,7 +181,7 @@
width: 225px;
position: absolute;
right: 0;
- bottom: 150px;
+ bottom: 200px;
background: rgba(17, 34, 58, 0.6);
border: 1px solid #29466A;
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
new file mode 100644
index 0000000..2adb5ef
--- /dev/null
+++ b/src/views/daoAnOffice/center/map.vue
@@ -0,0 +1,327 @@
+<template>
+ <div class="map-container">
+ <div class="map-content" id="map" ref="map"></div>
+
+
+ <!-- 鍥炬爣鑿滃崟 -->
+ <div class="info-box">
+ <!-- right鑿滃崟-->
+ <div class="info-div" :class="{ 'info-active': item.isActive }" v-for="item in legendList" :key="item.id"
+ @click="selectLegend(item)">
+ <img :src="item.icon" alt="" class="item-tb-img">
+ <div class="info-div-p">
+ <p class="info-label">{{ item.name }}</p>
+ <p class="info-num">{{ item.num }}</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ <!-- 瀹炴椂璺喌 -->
+ <div class="road" @click="showRoad">
+ <div class="item-tb">
+ <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
+ <p class="item-tb-p">瀹炴椂璺喌</p>
+ </div>
+
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+import { require } from '@/utils/require.js';
+
+
+const map = ref(null);
+let mapInstance = null;
+let trafficLayer = null;;
+
+// 鏄惁鏄剧ず瀹炴椂璺喌
+let isVisible = true;
+
+// 鍦板浘鐨勫浘鏍囨暟缁�
+const markers = [];
+
+// 鍥惧垪
+const legendList = ref([
+ {
+ id: 1,
+ name: '浜嬫晠鏄撳彂澶氬彂璺',
+ num: 78,
+ type: 1,
+ icon: require('@/assets/img/sgyfd.png'),
+ positions: [[103.647593, 30.981856], [103.646627, 30.988235], [103.650077, 30.988074]],
+ isActive: false
+ },
+ {
+ id: 2,
+ name: '閲嶇偣鏃呮父閫氶亾',
+ type: 2,
+ num: 178,
+ positions: [[103.647888, 30.985006], [103.650983, 30.986252], [103.641461, 30.984588]],
+ icon: require('@/assets/img/zdlytd.png'),
+ isActive: false
+ },
+ {
+ id: 3,
+ name: '閮芥睙鍫版櫙鍖�',
+ num: 278,
+ positions: [[103.637916, 30.986298], [103.636751, 30.989508], [103.64093, 30.99344]],
+ type: 3,
+ icon: require('@/assets/img/djyjq.png'),
+ isActive: false
+ },
+ {
+ id: 4,
+ name: '璀﹀姏閰嶅',
+ num: 348,
+ positions: [[103.646413, 30.996714], [103.634337, 31.0026], [103.620841, 31.001253]],
+ type: 4,
+ icon: require('@/assets/img/jlpb.png'),
+ isActive: false
+ },
+ {
+ id: 5,
+ name: '鎵撳洿鏂藉伐',
+ num: 578,
+ positions: [[103.62134, 30.996972], [103.622005, 30.991923], [103.63062, 30.986588]],
+ type: 5,
+ icon: require('@/assets/img/dwsg.png'),
+ isActive: false
+ },
+ {
+ id: 6,
+ name: '浜ら�氫簨鏁呮槗鍙戠偣',
+ num: 788,
+ positions: [[103.640319, 30.984486], [103.644916, 30.986956], [103.646853, 30.992143]],
+ type: 1,
+ icon: require('@/assets/img/jtysqy.png'),
+ isActive: false
+ },
+ {
+ id: 7,
+ name: '閲嶇偣杩愯緭浼佷笟',
+ num: 758,
+ positions: [[103.651482, 30.995956], [103.639654, 30.995206], [103.631119, 30.987425]],
+ type: 7,
+ icon: require('@/assets/img/zdlytd.png'),
+ isActive: false
+ },
+ {
+ id: 8,
+ name: '鍏氦绾胯矾',
+ num: 758,
+ positions: [[103.652716, 30.974745], [103.668166, 30.976447], [103.672511, 30.979961]],
+ type: 8,
+ icon: require('@/assets/img/gjxl.png'),
+ isActive: false
+ },
+ {
+ id: 9,
+ name: '瀹夊叏闅愭偅',
+ num: 718,
+ positions: [[103.674056, 30.988625], [103.668155, 30.996379], [103.660333, 30.998098]],
+ type: 9,
+ icon: require('@/assets/img/aqyh.png'),
+ isActive: false
+ },
+
+]);
+
+// 鍒囨崲鐘舵��
+const selectLegend = (item) => {
+ item.isActive = !item.isActive;
+ const list = hasMarker(item.type);
+ if (list) {
+ if (item.isActive) {
+ list.markerList.map((mark) => {
+ mark.show();
+ })
+ } else {
+ list.markerList.map((mark) => {
+ mark.hide();
+ })
+ }
+ } else {
+ filterLegend(item);
+ }
+}
+
+// 杩囨护鍥惧垪
+const filterLegend = (item) => {
+ const { icon, positions, type } = item;
+ const tempList = [];
+ positions.map(position => {
+ const markerIcon = createIcon(icon);
+ const marker = ceateMarker(markerIcon, position);
+ tempList.push(marker);
+ });
+ markers.push({ type: type, markerList: tempList })
+ mapInstance.add(tempList);
+}
+
+// 鍒涘缓鍥炬爣
+const createIcon = (img) => {
+ return new AMap.Icon({
+ size: new AMap.Size(34, 41), // 鍥炬爣灏哄
+ image: img, // Icon鐨勫浘鍍�
+ imageSize: new AMap.Size(34, 41) // 鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
+ });
+}
+
+
+// 鍒涘缓marker
+const ceateMarker = (icon, position) => {
+ return new AMap.Marker({
+ icon: icon,
+ position: new AMap.LngLat(position[0], position[1]),
+ zooms: [2, 20],
+ });
+}
+
+const hasMarker = (type) => {
+ return markers.find(item => item.type === type);
+}
+
+const showRoad = () => {
+ if (isVisible) {
+ trafficLayer.hide();
+ isVisible = false;
+ } else {
+ trafficLayer.show();
+ isVisible = true;
+ }
+}
+
+// 娴嬭瘯
+const test = () => {
+ const { icon, positions, type } = legendList.value[0];
+ const tempList = [];
+ positions.map(position => {
+ const markerIcon = createIcon(icon);
+ const marker = ceateMarker(markerIcon, position);
+ tempList.push(marker);
+ });
+
+ markers.value.push({ type: type, markerList: tempList })
+
+}
+
+
+onMounted(() => {
+ AMapLoader.load({
+ key: "2898109c22191c3969957500934169dc", //鐢宠濂界殑 Web 绔紑鍙戣�� Key锛岄娆¤皟鐢� load 鏃跺繀濉�
+ version: "2.0", //鎸囧畾瑕佸姞杞界殑 JS API 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
+ plugins: ["AMap.Scale"], //闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'锛屾敮鎸佹坊鍔犲涓锛歔'AMap.Scale','...','...']
+ })
+ .then((AMap) => {
+ mapInstance = new AMap.Map(map.value, {
+ viewMode: '3D',
+ mapStyle: "amap://styles/grey",
+ center: [103.647193, 30.988763],
+ pitch: 60, //鍦板浘淇话瑙掑害锛屾湁鏁堣寖鍥� 0 搴�- 83 搴�
+ zoom: 19, //鍒濆鍖栧湴鍥惧眰绾�
+ });
+ trafficLayer = new AMap.TileLayer.Traffic({
+ zIndex: 10,
+ zooms: [7, 22],
+ });
+
+ trafficLayer.setMap(mapInstance);
+
+ // test();
+ // console.log(markers.value[0]);
+ // mapInstance.add(markers.value[0].markerList);
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+})
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 0;
+
+ .map-content {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+
+.info-div {
+ align-items: center;
+ display: flex;
+ cursor: pointer;
+ margin-top: 0.5rem;
+ height: 2.5rem;
+ line-height: 2.5rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ font-family: PingFang SC;
+ font-weight: 800;
+ border-radius: 6px;
+
+ .item-tb-img {
+ width: 20px;
+ height: 20px;
+ }
+
+ .info-div-p {
+ flex: 1;
+ margin-left: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.info-box {
+ position: absolute;
+ top: 142px;
+ left: 2220px;
+ width: 300px;
+ background: rgba(17, 34, 58, 0.6);
+ border: 1px solid #29466A;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+}
+
+.info-label {
+ color: #74A6F2;
+}
+
+.info-num {
+ color: #fff;
+}
+
+.info-active {
+ background-color: rgba(68, 129, 221, 0.4);
+}
+
+.road {
+ position: absolute;
+ bottom: 202px;
+ left: 2434px;
+ z-index: 999;
+ width: 65px;
+ cursor: pointer;
+
+ .item-tb-p {
+ font-family: PingFang SC;
+ font-weight: 400;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 42px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/index.vue b/src/views/daoAnOffice/index.vue
index 7e22a4d..35302c3 100644
--- a/src/views/daoAnOffice/index.vue
+++ b/src/views/daoAnOffice/index.vue
@@ -22,7 +22,7 @@
import CenterMap from "./center-map.vue";
// 鎺у埗鍦板浘鏄剧ず
-import {mapState} from '@/stores/map.js';
+import { mapState } from '@/stores/map.js';
import { ref } from "vue";
@@ -113,17 +113,10 @@
</div>
</div>
- <div class="contetn_center">
-
+ <div class="contetn_center" v-if="mapState">
<!-- echart鍦板浘 -->
- <CenterMap class="contetn_center_top" v-show="mapState" />
+ <CenterMap class="contetn_center_top" />
- <div class="map-change-button" @click="mapChange">
- <div class="button-title">鍦板浘鍒囨崲</div>
- <div class="button-img">
- <img src="@/assets/img/dtqh.png" alt="">
- </div>
- </div>
</div>
<!-- 鍙宠竟鍖哄煙 -->
@@ -138,6 +131,14 @@
<div class="right_wrapper_content">
<Publicize />
</div>
+ </div>
+ </div>
+
+ <!-- 鍒囨崲鍦板浘鎸夐挳 -->
+ <div class="map-change-button" @click="mapChange">
+ <div class="button-title">鍦板浘鍒囨崲</div>
+ <div class="button-img">
+ <img src="@/assets/img/dtqh.png" alt="">
</div>
</div>
@@ -269,8 +270,8 @@
.map-change-button {
width: 94px;
position: absolute;
- bottom: 120px;
- right: 0;
+ bottom: 100px;
+ left: 2416px;
font-size: 16px;
color: #FFFFFF;
z-index: 99;
@@ -290,6 +291,8 @@
display: flex;
min-height: calc(100% - 64px);
justify-content: space-between;
+ margin-top: -40px;
+ padding: 0 22px;
}
//宸﹁竟 鍙宠竟 缁撴瀯涓�鏍�
@@ -327,6 +330,7 @@
.contetn_lr-item_left {
width: 50%;
+ margin-right: 26px;
}
.contetn_lr-item_contetn {
@@ -414,4 +418,5 @@
.right_wrapper_content {
width: 617px;
-}</style>
+}
+</style>
diff --git a/src/views/daoAnOffice/left-top.vue b/src/views/daoAnOffice/left-top.vue
index 36ce323..d4cdde4 100644
--- a/src/views/daoAnOffice/left-top.vue
+++ b/src/views/daoAnOffice/left-top.vue
@@ -104,6 +104,12 @@
//height: 16px;
font-size: 16px;
}
+ &:first-of-type {
+ margin-left: 0;
+ }
+ &:last-of-type {
+ margin-right: 0;
+ }
.user_Overview_nums {
display: flex;
diff --git a/src/views/daoAnOffice/right/analysis/index.vue b/src/views/daoAnOffice/right/analysis/index.vue
index 6787b1a..85010c9 100644
--- a/src/views/daoAnOffice/right/analysis/index.vue
+++ b/src/views/daoAnOffice/right/analysis/index.vue
@@ -3,8 +3,8 @@
<RightTitle title="浜ら�氬畨鍏ㄥ舰鍔跨爺鍒ゅ垎鏋�">
<template #top>
<div class="select-container flex">
- <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
- @click="changeChart(item)">
+ <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
+ v-for="item in selectItems" :key="item.itemIndex" @click="changeChart(item)">
{{ item.name }}
</div>
</div>
@@ -59,12 +59,36 @@
]);
const testData1 = ref([
- { name: '閮芥睙鍫板競', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '濂庡厜濉旇閬�', state: { '2023-1': 1000, '2023-2': 6000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '钂查槼琛楅亾', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '鑱氭簮闀�', state: { '2023-1': 1000, '2023-2': 8000, '2023-3': 12233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '閾舵潖琛楅亾', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
- { name: '鐭崇緤闀�', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 12313 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
+ {
+ name: '閮芥睙鍫板競',
+ state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 2999 },
+ state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '濂庡厜濉旇閬�',
+ state: { '2023-1': 21, '2023-2': 12, '2023-3': 224,'2023-4': 662, '2023-5': 71 },
+ state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '钂查槼琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233,'2023-4': 2132, '2023-5': 3211 },
+ state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '鑱氭簮闀�',
+ state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111,'2023-4': 2132, '2023-5': 2999 },
+ state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
+ },
+ {
+ name: '閾舵潖琛楅亾',
+ state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 12 },
+ state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123,'2023-4': 321, '2023-5': 2999 }
+ },
+ {
+ name: '鐭崇緤闀�',
+ state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233,'2023-4': 123, '2023-5': 0 },
+ state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241,'2023-4': 2132, '2023-5': 2999 }
+ },
]);
let acitveData = ref(testData1.value[0]);
@@ -291,15 +315,17 @@
.item {
margin: 0 8px;
padding: 10px 14px;
- font-size: 12px;
+ font-size: 14px;
background: rgba(67, 102, 155, 0.4);
border: 1px solid rgba(47, 91, 157, 0.8);
flex-shrink: 0;
color: #5B83BD;
}
+
.select-active {
- color: #fff;
+ color: #fff;
}
+
.item:last-child {
margin-right: 0;
}
@@ -336,5 +362,4 @@
.el-input__inner {
color: #4481DD;
}
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/right/danger/dataTable.vue b/src/views/daoAnOffice/right/danger/dataTable.vue
index 9df40e7..f532285 100644
--- a/src/views/daoAnOffice/right/danger/dataTable.vue
+++ b/src/views/daoAnOffice/right/danger/dataTable.vue
@@ -4,7 +4,8 @@
<div class="top-title">瀹夊叏浜嬫晠鍒楄〃</div>
<div class="table-select flex">
<div class="select-item mr-2 ml-2 cursor-pointer flex items-center"
- :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id">{{
+ :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id"
+ @click="changeSelect(selectItem)">{{
selectItem.type }}</div>
</div>
</div>
@@ -102,21 +103,31 @@
num3: 2
},
];
+
+const changeSelect = (selectItem) => {
+ tableType.value.forEach((item) => {
+ item.isActive = false;
+ });
+ selectItem.isActive = true;
+}
</script>
<style lang="scss" scoped>
.container {
height: 360px;
}
+
.table-container {
position: relative;
}
+
.table-content {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
+
.table-top {
height: 51px;
background-color: rgba(17, 34, 58, 0.6);
@@ -135,7 +146,7 @@
}
.select-item {
- padding: 0 14px;
+ padding: 0 16px;
height: 100%;
border-bottom: 2px solid RGBA(98, 137, 230, 0);
color: rgba(94, 134, 194, 1);
@@ -147,16 +158,12 @@
}
.data-table {
- font-size: 14px;
+ font-size: 16px;
border: 1px solid #29466A;
width: 100%;
height: 100%;
background: transparent;
}
-
-.table-color1 {}
-
-
::v-deep .el-table__inner-wrapper::before {
background-color: transparent;
@@ -173,5 +180,4 @@
.el-table__fixed-right {
height: 100% !important;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/src/views/daoAnOffice/right/danger/index.vue b/src/views/daoAnOffice/right/danger/index.vue
index 07ab4b4..89a7bb1 100644
--- a/src/views/daoAnOffice/right/danger/index.vue
+++ b/src/views/daoAnOffice/right/danger/index.vue
@@ -51,7 +51,7 @@
.item {
margin: 0 8px;
padding: 10px 14px;
- font-size: 12px;
+ font-size: 14px;
background: rgba(67, 102, 155, 0.4);
border: 1px solid rgba(47, 91, 157, 0.8);
flex-shrink: 0;
diff --git a/src/views/daoAnOffice/right/danger/infoView.vue b/src/views/daoAnOffice/right/danger/infoView.vue
index 146c1c8..1cd21ee 100644
--- a/src/views/daoAnOffice/right/danger/infoView.vue
+++ b/src/views/daoAnOffice/right/danger/infoView.vue
@@ -37,7 +37,7 @@
</template>
<script setup>
-import testImage from '@/assets/img/test_img/閬撳畨鍔�.png';
+import { require } from '@/utils/require.js';
import ImageSwiper from './imageSwiper.vue';
import { ref } from 'vue';
@@ -51,11 +51,12 @@
rectTime: '2023-13-23',
state: '鎶慨涓�',
images: [
- testImage,
- testImage,
- testImage,
- testImage,
- testImage,
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
]
},
{
@@ -66,11 +67,12 @@
rectTime: '2023-13-23',
state: '鎶慨涓�',
images: [
- testImage,
- testImage,
- testImage,
- testImage,
- testImage,
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
]
},
{
@@ -81,11 +83,12 @@
rectTime: '2023-13-23',
state: '鎶慨涓�',
images: [
- testImage,
- testImage,
- testImage,
- testImage,
- testImage,
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
+ require('@/assets/img/test_img/t1.jpg'),
+ require('@/assets/img/test_img/t2.png'),
+ require('@/assets/img/test_img/t3.png'),
]
}
]);
diff --git a/src/views/daoAnOffice/right/publicize/index.vue b/src/views/daoAnOffice/right/publicize/index.vue
index ef7c5dd..6a7d87b 100644
--- a/src/views/daoAnOffice/right/publicize/index.vue
+++ b/src/views/daoAnOffice/right/publicize/index.vue
@@ -41,7 +41,7 @@
</template>
<script setup>
-import testImage from '@/assets/img/test_img/閬撳畨鍔�.png';
+import { require } from '@/utils/require.js';
import RightTitle from "@/components/right-title";
import { ref } from 'vue';
@@ -63,7 +63,7 @@
unit: '閮芥睙鍫板競鍏畨灞�',
rectTime: '2023-13-23',
state: '鎶慨涓�',
- image: testImage
+ image: require('@/assets/img/test_img/t4.jpg'),
},
{
itemIndex: 2,
@@ -72,7 +72,7 @@
unit: '閮芥睙鍫板競鍏畨灞�',
rectTime: '2023-13-23',
state: '鎶慨涓�',
- image: testImage
+ image: require('@/assets/img/test_img/t5.jpg'),
},
{
itemIndex: 3,
@@ -81,7 +81,7 @@
unit: '閮芥睙鍫板競鍏畨灞�',
rectTime: '2023-13-23',
state: '鎶慨涓�',
- image: testImage
+ image: require('@/assets/img/test_img/t6.jpg'),
},
{
itemIndex: 4,
@@ -90,7 +90,7 @@
unit: '閮芥睙鍫板競鍏畨灞�',
rectTime: '2023-13-23',
state: '鎶慨涓�',
- image: testImage
+ image: require('@/assets/img/test_img/t7.jpg'),
},
]);
@@ -120,7 +120,7 @@
.item {
margin: 0 8px;
padding: 10px 14px;
- font-size: 12px;
+ font-size: 14px;
background: rgba(67, 102, 155, 0.4);
border: 1px solid rgba(47, 91, 157, 0.8);
flex-shrink: 0;
@@ -178,7 +178,7 @@
.content-video-name {
text-align: center;
margin-top: 16px;
- font-size: 12px;
+ font-size: 14px;
color: rgba(91, 131, 189, 1);
}
--
Gitblit v1.8.0