三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 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>