From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
pages/territory/territory.vue | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 225 insertions(+), 11 deletions(-)
diff --git a/pages/territory/territory.vue b/pages/territory/territory.vue
index b0258f9..817d29e 100644
--- a/pages/territory/territory.vue
+++ b/pages/territory/territory.vue
@@ -1,8 +1,37 @@
<template>
<view>
<!-- 椤堕儴瀵艰埅 -->
- <headNav />
- <view id="main" style="width: 100vw;height: 1000rpx;position: relative;"></view>
+ <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨"/>
+ <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
+ <advancedSearch class="Search" placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" />
+ <ul class="flex">
+ <li style="" v-for="(item,index) in dynasty" :key="item.id">
+ <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
+ :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
+ style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
+ <view class="" :style="{background:item.color}"
+ style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
+ <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
+ </view>
+ </li>
+ </ul>
+ </view>
+ <view id="main" style="width: 100vw;position: relative;"></view>
+ <!-- 鏈濅唬 -->
+ <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
+ <ul class="flex">
+ <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id">
+ <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
+ {{item.coord}}
+ </view>
+ <view class="flex flex-center font-family"
+ style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
+ :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}">
+ {{item.name}}
+ </view>
+ </li>
+ </ul>
+ </view>
</view>
</template>
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
@@ -16,11 +45,108 @@
export default {
data() {
return {
-
-
+ // 涓嬮潰鐨勬湞浠�1
+ dynasty1Color:1,
+ dynasty1: [{
+ name: '澶忔湞',
+ coord: '2070BC',
+ id: 1
+ }, {
+ name: '鍟嗘湞',
+ id: 2,
+ coord: '1600BC',
+ }, {
+ name: '瑗垮懆',
+ id: 3,
+ coord: '1600BC'
+ }, {
+ name: '鏄ョ鎴樺浗',
+ id: 4,
+ coord: '770BC'
+ }, {
+ name: '绉︽湞',
+ id: 5,
+ coord: '221BC'
+ }, {
+ name: '姹夋湞',
+ id: 6,
+ coord: '202BC'
+ }, {
+ name: '涓夊浗涓ゆ檵鍗楀寳鏈�',
+ id: 7,
+ coord: '184'
+ }, {
+ name: '闅嬫湞',
+ id: 8,
+ coord: '581'
+ }, {
+ name: '鍞愭湞',
+ id: 9,
+ coord: '618'
+ }, {
+ name: '浜斾唬鍗佸浗',
+ id: 10,
+ coord: '907'
+ }, {
+ name: '杈藉閲�',
+ id: 11,
+ coord: '907'
+ }, {
+ name: '瀹嬫湞',
+ id: 12,
+ coord: '960'
+ }, {
+ name: '鍏冩湞',
+ id: 13,
+ coord: '1271'
+ }, {
+ name: '鏄庢湞',
+ id: 14,
+ coord: '1368'
+ }, {
+ name: '娓呮湞',
+ id: 15,
+ coord: '1636'
+ }],
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ // 鏈濅唬
+ dynasty: [{
+ name: '澶忔湞',
+ color: '#90BBD8',
+ id: 1
+ }, {
+ name: '鍟嗘湞',
+ color: '#EDD28B',
+ id: 2
+ }, {
+ name: '瑗垮懆',
+ color: '#CF746D',
+ id: 3
+ }, {
+ name: '绉︽湞',
+ color: '#9CC27A',
+ id: 4
+ }, {
+ name: '姹夋湞',
+ color: '#5B6CB9',
+ id: 5
+ }, {
+ name: '闅嬫湞',
+ color: '#8860A8',
+ id: 6
+ }, {
+ name: '鍞愭湞',
+ color: '#DE8E66',
+ id: 7
+ }],
+
}
},
-
+ onLoad(options) {
+ this.idIndex = options.id
+ console.log('optionsoptionsoptions', options.id);
+ },
mounted() {
console.log('ss');
// this.$nextTick(() => {
@@ -30,6 +156,14 @@
// })
},
methods: {
+ // 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
+ dynastyBottomClick(id) {
+ console.log(id);
+ this.dynasty1Color= id
+ },
+ onSearch(val) {
+ console.log(val);
+ },
innt() {
this.$nextTick(() => {
@@ -1010,16 +1144,16 @@
// sublink: 'http://www.pm25.in',
left: 'center'
},
- legend: {
- icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
- },
+ // legend: {
+ // icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
+ // },
// color:['#000'],
tooltip: {
trigger: 'item'
},
bmap: {
- center: [104.114129, 37.550339],
- zoom: 5,
+ // center: [104.114129, 37.550339],
+ zoom: 4, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒�
roam: true,
mapStyle: {
styleJson: [{
@@ -1201,7 +1335,7 @@
})
},
-
+
}
}
</script>
@@ -1211,4 +1345,84 @@
box-sizing: border-box;
}
+ /* 鍦板浘涓婄殑宸︿笅瑙� */
+ ::v-deep .anchorBL {
+ display: none;
+ }
+
+ @media screen and (min-width:2560px)and (max-width:3840px) {
+ .Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: .26rem;
+ width: 4rem;
+ }
+
+ .Search ::v-deep .ffff {
+ width: 3rem;
+ height: .36rem;
+ padding: .01rem;
+ border-radius: .3rem !important;
+ }
+
+ .Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: .14rem;
+ padding: 0;
+ border-radius: .3rem !important;
+ }
+
+ .Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .Search ::v-deep .uni-input-placeholder {
+ font-size: .13rem;
+ /* height: 100%; */
+ line-height: 1;
+ }
+
+ .Search ::v-deep .uni-input-input {
+ margin-left: .19rem;
+ }
+ }
+
+ #main {
+ height: 6.2rem;
+ }
+
+ .Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: .26rem;
+ width: 4rem;
+ }
+
+ .Search ::v-deep .ffff {
+ width: 3rem;
+ height: .36rem;
+ padding: .01rem;
+ }
+
+ .Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: .14rem;
+ padding: 0;
+ background-color: #597AA5;
+ }
+
+ .Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .Search ::v-deep .uni-input-placeholder {
+ font-size: .13rem;
+ /* height: 100%; */
+ line-height: 1;
+ margin-left: .19rem;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1