From b50dfd566774dea66153f97fe300b46de0baed1c Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 07 三月 2024 14:43:25 +0800
Subject: [PATCH] chore:排除视频提交
---
src/views/daoAnOffice/center-map copy 2.vue | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 255 insertions(+), 0 deletions(-)
diff --git a/src/views/daoAnOffice/center-map copy 2.vue b/src/views/daoAnOffice/center-map copy 2.vue
new file mode 100644
index 0000000..81a6dfc
--- /dev/null
+++ b/src/views/daoAnOffice/center-map copy 2.vue
@@ -0,0 +1,255 @@
+<template>
+ <div class="centermap">
+ <div class="maptitle">
+ <img src="@/assets/img/icon/map_title.png" alt="">
+ </div>
+ <div class="mapwrap">
+ <div ref="map" class="map-style"></div>
+ </div>
+
+ <div class="map-info-container">
+ <div class="info-title-container">
+ <div class="img-bg">
+ <img src="@/assets/img/icon/map_info_title.png" alt="">
+ </div>
+ <div class="info-title">
+ <div class="icon">
+ <img src="@/assets/img/icon/arrow_right.png" alt="">
+ </div>
+ <span class="title">閮芥睙鍫板競</span>
+ </div>
+ </div>
+ <div class="info-content-container">
+ <div class="info-item">
+ <div class="info-lable">浜嬫晠鏄撳彂澶氬彂璺锛�</div>
+ <div class="info-text">78</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閲嶇偣鏃呮父閫氶亾锛�</div>
+ <div class="info-text">12</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閮芥睙鍫版櫙鍖猴細</div>
+ <div class="info-text">5</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">璀﹀姏閰嶅锛�</div>
+ <div class="info-text">265</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">鎵撳洿鏂藉伐锛�</div>
+ <div class="info-text">12</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">浜ら�氫簨鏁呮槗鍙戠偣锛�</div>
+ <div class="info-text">31</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閲嶇偣杩愯緭浼佷笟锛�</div>
+ <div class="info-text">19</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">鍏氦绾胯矾锛�</div>
+ <div class="info-text">89</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">瀹夊叏闅愭偅锛�</div>
+ <div class="info-text">3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+
+<script setup>
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { ref, onMounted, nextTick } from "vue";
+
+import mapData from '@/assets/map/dujiangyan.json';
+
+
+echarts.registerMap('dujiangyan', mapData);
+
+const map = ref(null);
+let mapChart = null;
+
+const mapConfig = {
+ geo3D: {
+ map: "dujiangyan", //娉ㄥ唽鍦板浘鐨勫悕瀛�
+ roam: true, //寮�鍚紶鏍囩缉鏀惧拰骞崇Щ婕父銆傞粯璁や笉寮�鍚�
+ bottom: 80,
+ left: 10,
+ itemStyle: {
+ color: "#4189f2", // 鑳屾櫙
+ opacity: 0.7, //閫忔槑搴�
+ borderWidth: 1.5, // 杈规瀹藉害
+ borderColor: "#fff", // 杈规棰滆壊
+ fontSize: 16, //
+ },
+ // 鏍囩
+ label: {
+ show: true,
+ color: "#fff", //鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
+ fontSize: 18,
+ formatter: function (params) {
+ return params.name
+ },
+ },
+ // 鎺у埗鍣�
+ viewControl: {
+ beta: 80,
+ alpha: 55,
+ distance: 210,
+ maxBeta: 180
+ },
+ // 鐏厜
+ light: {
+ main: {
+ shadow: true,
+ intensity: 1
+ }
+ },
+ // 榧犳爣绉诲叆鏃舵牱寮�
+ emphasis: {
+ itemStyle: {
+ color: "#F63545"
+ }
+ }
+ }
+};
+
+const testClick = () => {
+ console.log(11231);
+}
+
+onMounted(() => {
+ nextTick(() => {
+ setTimeout(() => {
+ mapChart = echarts.init(map.value);
+ mapChart.setOption(mapConfig, true);
+ }, 1000);
+ })
+})
+</script>
+
+<style scoped lang="scss">
+.centermap {
+ margin-bottom: 30px;
+ position: relative;
+
+ .mapwrap {
+ //height: 580px;
+ height: 900px;
+ width: 100%;
+ // padding: 0 0 10px 0;
+ box-sizing: border-box;
+ position: relative;
+
+ .quanguo {
+ position: absolute;
+ right: 20px;
+ top: -46px;
+ width: 80px;
+ height: 28px;
+ border: 1px solid #00eded;
+ border-radius: 10px;
+ color: #00f7f6;
+ text-align: center;
+ line-height: 26px;
+ letter-spacing: 6px;
+ cursor: pointer;
+ box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+ 0 0 6px rgba(0, 237, 237, 0.4);
+ z-index: 10;
+ }
+ }
+}
+
+.map-style {
+ width: 100%;
+ height: 100%;
+}
+
+.maptitle {
+ width: 308px;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.map-info-container {
+ width: 225px;
+ position: absolute;
+ right: 0;
+ bottom: 200px;
+ background: rgba(17, 34, 58, 0.6);
+ border: 1px solid #29466A;
+
+ .info-title-container {
+ width: 100%;
+ position: relative;
+
+ .img-bg {
+ width: 100%;
+ }
+
+ .info-title {
+
+ width: 100%;
+ position: absolute;
+ top: 5px;
+ left: 0;
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 15px;
+ margin: 0 5px 0 12px;
+ }
+
+ .title {
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFF;
+ text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
+ font-style: italic;
+ background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
+ -webkit-background-clip: text;
+ // -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+
+ .info-content-container {
+ padding: 18px 20px;
+ margin-top: -40px;
+ font-size: 14px;
+
+ .info-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #4481DD;
+ line-height: 28px;
+
+ .info-text {
+ color: #fff;
+ }
+ }
+ }
+
+}
+
+.info-lable {
+ font-family: 'PingFang SC' !important;
+}
+
+.test {
+ position: absolute;
+ top: 0;
+}
+
+</style>
--
Gitblit v1.8.0