feat(): 地图模块开发

pages.json

@@ -97,6 +97,12 @@
           ]
         }
       }
+    },
+     {
+      "path": "pages/sjc/index",
+      "style": {
+        "navigationBarTitleText": ""
+      }
     },
     {
       "path": "pages/mypage/compents/wtcl/index",

pages/sjc/index.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="container">
+        <u-navbar :title="name" :autoBack="true" :titleStyle="{
+				fontSize:'18px'
+			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
+		</u-navbar>
+      <view style="margin-top: 70px; padding: 10px;">
+          <SlTable :tableData="slData" v-if="name == '渗流监测'"></SlTable>
+          <ZwyTable :tableData="zwyData" v-else-if="name == '主坝位移监测'"></ZwyTable>
+          <ZsyTable :tableData="zsyData" v-else-if="name == '主坝渗压监测'"></ZsyTable>
+      </view>
+	</view>
+</template>
+<script>
+import SlTable from "./slTable.vue"
+import ZwyTable from "./zwyTable.vue"
+import ZsyTable from "./zsyTable.vue"
+export default {
+    components:{
+        SlTable,
+        ZwyTable,
+        ZsyTable
+    },
+    data() {
+        return {
+            slData:[], //渗流监测
+            zwyData:[],//主坝位移监测
+            zsyData:[],//主坝渗压监测
+            name:'',
+        }
+    },
+    methods: {
+        async getSlData(){
+            try {
+              const {data} =  await uni.$http.get('/gunshiApp/tsg/osmoticPressR/list/value?type=2')
+              if(data.code == 200){
+                this.slData = data.data;
+              }
+            } catch (error) {
+                uni.$showMsg();
+            }
+        },
+        async getZwyData(){
+            try {
+              const {data} =  await uni.$http.get('/gunshiApp/tsg/osmoticShiftR/list/value')
+              if(data.code == 200){
+                this.zwyData = data.data;
+              }
+            } catch (error) {
+                uni.$showMsg();
+            }
+        },
+        async getzsyData(){
+            try {
+              const {data} =  await uni.$http.get('/gunshiApp/tsg/osmoticPressR/list/value?type=1')
+              if(data.code == 200){
+                this.zsyData = data.data;
+              }
+            } catch (error) {
+                uni.$showMsg();
+            }
+        },
+    },
+    mounted() {
+        this.getSlData();
+        this.getZwyData();
+        this.getzsyData();
+    },
+    onLoad(options) {
+      this.name=options.name
+    }
+}
+</script>
+<style lang="scss" scoped>
+    
+</style>

pages/sjc/slTable.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="table_div">
+              <div class="table_cur">
+                <table style="width:100%;display:block">
+                  <tr>
+                    <th style="width: 30%;">
+                      监测点
+                      </th>
+                    <th style="width: 40%;">
+                      监测时间
+                      </th>
+                    <th style="width: 30%;">渗流量(L/s)</th>
+                  </tr>
+                  <!-- style="max-height: 480px; overflow-y: auto" -->
+                  <div class="scroll-table">
+                <tr v-for="(item, index) in tableData" :key="index">
+                      <td style="width: 30%;">{{item.stationCode}}</td>
+                      <td style="width: 40%;">{{simpleData(item.tm)}}</td>
+                      <td style="width:30%;">{{ item.value }}</td>
+                    </tr>
+                    <div style="height:180px"></div>
+                  </div>
+                </table>
+              </div>
+            </div>
+
+</template>
+
+<script>
+  import moment from "moment"
+   export default {
+     props:{
+       tableData:{
+         type:Array,
+         default:[],
+       }
+     },
+     methods: {
+         simpleData(tm){
+          return moment(tm).format("MM-DD HH:mm")
+         }
+     },
+   }
+</script>
+
+<style lang="scss" scoped>
+  .table_div {
+    height: 100%;
+    max-width: calc(100% - 0px);
+    // max-height: calc(80vh);
+    flex: 1;
+    padding-top: 0px;
+    // overflow-x: scroll;
+  }
+  /*table样式*/
+  .table_cur {
+    width: 100%;
+    empty-cells: show;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+   .scroll-table{
+    height: calc(55vh - 180px);
+    overflow-y: auto;
+    width:'100%'
+  }
+  .table_cur tr {
+    display: flex;
+    line-height: 75rpx;
+  }
+  .table_cur th {
+    height: 85rpx;
+    color: #3399ef;
+    background: #e1f3ff;
+    font-size: 14px;
+    // font-weight: bold;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center !important;
+  }
+  
+  .table_cur td {
+    height: 65rpx;
+    // border-bottom: 1px solid #d8ddeb;
+    font-size: 14px;
+    color: #2f4056;
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-align: center !important;
+  }
+  /*table样式 end*/
+</style>

pages/sjc/zsyTable.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="table_div">
+              <div class="table_cur">
+                <table style="width:100%;display:block">
+                  <tr>
+                    <th style="width: 19%;">
+                      监测点
+                      </th>
+                    <th style="width: 30%;">所属断面</th>
+                    <th style="width: 26%;">
+                      监测时间
+                      </th>
+                    <th style="width: 25%;">管水位(m)</th>
+                  </tr>
+                  <!-- style="max-height: 480px; overflow-y: auto" -->
+                  <div class="scroll-table">
+                <tr v-for="(item, index) in tableData" :key="index">
+                      <td style="width: 19%;">{{item.stationCode}}</td>
+                      <td style="width:30%;">{{ item.profileName }}</td>
+                      <td style="width: 26%;text-align: center;">{{simpleData(item.tm)}}</td>
+                      <td style="width:25%;">{{ item.value }}</td>
+                    </tr>
+                    <div style="height:180px"></div>
+                  </div>
+                </table>
+              </div>
+            </div>
+
+</template>
+
+<script>
+  import moment from "moment"
+   export default {
+     props:{
+       tableData:{
+         type:Array,
+         default:[],
+       }
+     },
+     methods: {
+         simpleData(tm){
+           if(!tm) return ''
+          return moment(tm).format("MM-DD HH:mm")
+         }
+     },
+   }
+</script>
+
+<style lang="scss" scoped>
+  .table_div {
+    height: 100%;
+    max-width: calc(100% - 0px);
+    // max-height: calc(80vh);
+    flex: 1;
+    padding-top: 0px;
+    // overflow-x: scroll;
+  }
+  /*table样式*/
+  .table_cur {
+    width: 100%;
+    empty-cells: show;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+   .scroll-table{
+    height: calc(100vh - 180px);
+    overflow-y: auto;
+    width:'100%'
+  }
+  .table_cur tr {
+    display: flex;
+  }
+  .table_cur th {
+    height: 50px;
+    color: #3399ef;
+    background: #e1f3ff;
+    font-size: 14px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    white-space: wrap;
+    display: flex;
+    align-items: center;
+    // text-align: center !important;
+  }
+  
+  .table_cur td {
+    height: 75rpx;
+    // border-bottom: 1px solid #d8ddeb;
+    font-size: 14px;
+    color: #2f4056;
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: wrap;
+    // text-align: center !important;
+  }
+  /*table样式 end*/
+</style>

pages/sjc/zwyTable.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="table_div">
+              <div class="table_cur">
+                <table style="width:100%;display:block">
+                  <tr>
+                    <th style="width: 19%;">
+                      监测点
+                      </th>
+                    <th style="width: 21%;">
+                      监测时间
+                      </th>
+                    <th style="width: 20%;">X方向(mm)</th>
+                    <th style="width: 20%;">Y方向(mm)</th>
+                    <th style="width: 20%;">H方向(mm)</th>
+                  </tr>
+                  <!-- style="max-height: 480px; overflow-y: auto" -->
+                  <div class="scroll-table">
+                <tr v-for="(item, index) in tableData" :key="index">
+                      <td style="width: 19%;">{{item.stationCode}}</td>
+                      <td style="width: 21%;">{{simpleData(item.tm)}}</td>
+                      <td style="width:20%;">{{ item.x }}</td>
+                      <td style="width:20%;">{{ item.y }}</td>
+                      <td style="width:20%;">{{ item.h }}</td>
+                    </tr>
+                    <div style="height:180px"></div>
+                  </div>
+                </table>
+              </div>
+            </div>
+
+</template>
+
+<script>
+  import moment from "moment"
+   export default {
+     props:{
+       tableData:{
+         type:Array,
+         default:[],
+       }
+     },
+     methods: {
+         simpleData(tm){
+           if(!tm) return ''
+          return moment(tm).format("MM-DD HH:mm")
+         }
+     },
+   }
+</script>
+
+<style lang="scss" scoped>
+  .table_div {
+    height: 100%;
+    max-width: calc(100% - 0px);
+    // max-height: calc(80vh);
+    flex: 1;
+    padding-top: 0px;
+    // overflow-x: scroll;
+  }
+  /*table样式*/
+  .table_cur {
+    width: 100%;
+    empty-cells: show;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+   .scroll-table{
+    height: calc(100vh - 180px);
+    overflow-y: auto;
+    width:'100%'
+  }
+  .table_cur tr {
+    display: flex;
+  }
+  .table_cur th {
+    color: #3399ef;
+    background: #e1f3ff;
+    font-size: 14px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    white-space: wrap;
+    text-align: center !important;
+    display: flex;
+    align-items: center;
+  }
+  
+  .table_cur td {
+    height: 75rpx;
+    // border-bottom: 1px solid #d8ddeb;
+    font-size: 14px;
+    color: #2f4056;
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: wrap;
+    text-align: center !important;
+  }
+  /*table样式 end*/
+</style>

pages/zhjs/subnvue/index.nvue

@@ -1,119 +1,386 @@
 <template>
-    <view class="zhjs-container">
-        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
+  <view class="zhjs-container">
+    <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
 				fontSize:'18px'
 			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
-        </u-navbar>
-        <map  :style="{
+    </u-navbar>
+    <map :style="{
     		height: windowHeight + 'px',
     		top: '-' + statusBarHeight + 'px'
-    	}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker"
-            :show-location="true" scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
-                <image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></image>
-                <view class="tc-style">
-                <image src="/static/tabs/tc.png" style="width: 45rpx;height: 45rpx;" @click="onControlTap"></image>
-                 <text style="font-size:12px;">图层</text>
-                </view>
-        </map>
-         
-    </view>
+    	}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker" :show-location="true"
+      scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">
+      <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
+      <view class="tc-style">
+        <cover-image src="/static/tabs/tc.png" style="width: 55rpx;height: 55rpx;"
+          @click="onTcControlTap"></cover-image>
+        <text style="font-size:12px;">图层</text>
+      </view>
+    </map>
+    <u-popup :show="popupOpen" mode="right" @close="popupOpen=false">
+      <view style="padding: 30px 10px 10px 10px; width: 300px;">
+        <view>
+          <text style="font-size: 16px;">底图类型</text>
+          <view style="display: flex;
+                          flex-direction: row; padding:10px;">
+            <view style="display: flex; align-items: center; margin-right: 20px;">
+              <cover-image src="/static/tabs/weix.png" style="width: 100rpx;height: 100rpx;"
+                @click="onMode(1)"></cover-image>
+              <text :style="typeChecked == 1 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">影像图</text>
+            </view>
+            <view style="display: flex; align-items: center;">
+              <cover-image src="/static/tabs/slt.jpg" style="width: 100rpx;height: 100rpx;"
+                @click="onMode(2)"></cover-image>
+              <text :style="typeChecked == 2 ? {color:'#227eff',fontSize:14} :{color:'#000',fontSize:14}">矢量图</text>
+            </view>
+          </view>
+        </view>
+
+        <view style="margin-top: 30px;">
+          <text style="font-size: 16px;">监视对象</text>
+          <view style="display: flex;flex-direction: row; padding:10px;">
+            <view v-for="item in watchObj" :key="item.id"
+              style="display: flex; align-items: center; margin-right: 10px;">
+              <cover-image :src="item.showIcon" style="width: 50rpx;height: 50rpx;"
+                @click="toggleIcon(item)"></cover-image>
+              <text :style="{color: item.textColor,fontSize:14}">{{item.name}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                latitude: 31.495,
-                longitude: 114.767,
-                enableSatellite:false,
-                markers: [
-                  {
-                    latitude: 31.4954,
-                    longitude: 114.7693,
-                    iconPath: '/static/tabs/shenliu1.png',
-                    width: "20",
-                    height: "20",
-                    id:1,
-                    title:"渗流监测"
-                },
-                ],
-                map:null,
-                windowHeight:0,
-                windowHeight:0
-            }
+  import moment from 'moment';
+  const iconObj = {
+    "渗流": {
+      1: '/static/tabs/shenliu1.png',
+      2: "/static/tabs/shenliu2.png"
+    },
+    "雨量": {
+      1: '/static/tabs/sl1.png',
+      2: "/static/tabs/sl2.png"
+    },
+    "水量": {
+      1: '/static/tabs/yl1.png',
+      2: "/static/tabs/yl2.png"
+    },
+    "主坝": {
+      1: '/static/tabs/zhuba1.png',
+      2: "/static/tabs/zhuba2.png"
+    },
+    "主坝位移": {
+      1: '/static/tabs/zweiyi1.png',
+      2: "/static/tabs/zweiyi2.png"
+    },
+    "主坝渗压": {
+      1: '/static/tabs/zshenya1.png',
+      2: "/static/tabs/zshenya2.png"
+    },
+    "视频监控": {
+      1: '/static/tabs/sxt1.png',
+      2: "/static/tabs/sxt2.png"
+    },
+  }
+  export default {
+    data() {
+      return {
+        latitude: 31.495,
+        longitude: 114.767,
+        enableSatellite: false,
+        popupOpen: false,
+        typeChecked: 2,
+        markers: [
+          {
+          latitude: 31.4954,
+          longitude: 114.7693,
+          iconPath: '/static/tabs/shenliu1.png',
+          width: 15,
+          height: 15,
+          id: 100,
+          title: "渗流监测",
+          pointType: "渗流",
+          name: "安全监测"
         },
-        created() {
-          let that = this;
-          			uni.getSystemInfo({
-          				success(res) {
-          					that.windowHeight = res.windowHeight;
-          					that.windowHeight = res.windowHeight + res.statusBarHeight;
-          					that.statusBarHeight = res.statusBarHeight;
-          					that.navTop = res.statusBarHeight + 10;
-          				}
-          			})
+        {
+          latitude: 31.4933000,
+          longitude: 114.7686000,
+          iconPath: '/static/tabs/zweiyi1.png',
+          width: 15,
+          height: 15,
+          id: 101,
+          title: "主坝位移监测",
+          pointType: "主坝位移",
+          name: "安全监测"
         },
-        onReady() {
-          this.map = uni.createMapContext("map")
+        {
+          latitude: 31.4917000,
+          longitude: 114.7686000,
+          iconPath: '/static/tabs/zshenya1.png',
+          width: 15,
+          height: 15,
+          id: 102,
+          title: "主坝渗压监测",
+          pointType: "主坝渗压",
+          name: "安全监测"
         },
-        methods: {
-          onControlTap(){
-            this.$refs.map.moveToLocation({
-              latitude: 31.495,
-              longitude: 114.767
-            })
+        {
+          latitude: 31.492300,
+          longitude: 114.7686000,
+          iconPath: '/static/tabs/zhuba1.png',
+          width: 15,
+          height: 15,
+          id: 103,
+          title: "主坝",
+          pointType: "主坝",
+          name: "安全监测"
+        },
+        ],
+        map: null,
+        windowHeight: 0,
+        windowHeight: 0,
+        watchObj: [{
+            icon1: "/static/tabs/shuiku1.png",
+            icon2: "/static/tabs/shuiku2.png",
+            name: "水库工程",
+            id: 1,
+            showIcon: "/static/tabs/shuiku2.png",
+            textColor: "#02a7f0",
+            isSelected1: true
           },
-          markertap(e){
-            const newMarker = this.markers
-            newMarker.forEach(((item,i) => {
-              if(item.id === e.detail.markerId){
-                item.height=55;
-                item.width=55;
-                // item.label={
-                //   content:"测试",
-                //   color:"#57a7f0",
-                //   bgColor:"transparent"
-                // }
-              }else{
-                item.height=25;
-                item.width=25;
-               // item.label={
-               //   content:" ",
-               //   bgColor:"transparent"
-               // }
-              }
-            }));
-            console.log("newMarker",newMarker);
-            this.markers = [...newMarker];
-          }
-        },
-        computed:{
-          marker(){
-          return this.markers.slice(0)
+          {
+            icon1: "/static/tabs/anquan1.png",
+            icon2: "/static/tabs/anquan2.png",
+            name: "安全监测",
+            id: 2,
+            showIcon: "/static/tabs/anquan2.png",
+            textColor: "#02a7f0",
+            isSelected2: true,
+          },
+          {
+            icon1: "/static/tabs/shuiyu1.png",
+            icon2: "/static/tabs/shuiyu2.png",
+            name: "水雨情监测",
+            id: 3,
+            showIcon: "/static/tabs/shuiyu2.png",
+            textColor: "#02a7f0",
+            isSelected3: true,
+
+          },
+          {
+            icon1: "/static/tabs/sxt1.png",
+            icon2: "/static/tabs/sxt2.png",
+            name: "视频监控",
+            id: 4,
+            showIcon: "/static/tabs/sxt2.png",
+            textColor: "#02a7f0",
+            isSelected4: true,
           }
+        ]
+      }
+    },
+    created() {
+      let that = this;
+      uni.getSystemInfo({
+        success(res) {
+          that.windowHeight = res.windowHeight;
+          that.windowHeight = res.windowHeight + res.statusBarHeight;
+          that.statusBarHeight = res.statusBarHeight;
+          that.navTop = res.statusBarHeight + 10;
         }
- }
+      })
+    },
+    onReady() {
+      this.map = uni.createMapContext("map")
+    },
+    methods: {
+      onControlTap() {
+        this.$refs.map.moveToLocation({
+          latitude: 31.495,
+          longitude: 114.767
+        })
+      },
+      onTcControlTap() {
+        this.popupOpen = true;
+      },
+      // 跳转详细信息
+      jumpDeatails(type, data) {
+        let url;
+        if (type == "视频监控") {
+          url=`/pages/spjk/spbf/index?info=${encodeURIComponent(JSON.stringify(data))}`
+        }else if( type == '雨量'){
+          url=`/pages/ylzList/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
+        }else if( type == '水量'){
+          url=`/pages/sws/detail/index?stnm=${data.stnm}&stcd=${data.stcd}`
+        }else if( type == '渗流'){
+          url=`/pages/sjc/index?name=渗流监测`
+        }else if(type == "主坝位移"){
+          url=`/pages/sjc/index?name=主坝位移监测`
+        }else if(type == "主坝渗压"){
+          url=`/pages/sjc/index?name=主坝渗压监测`
+        }else if(type == "主坝"){
+          url='/pages/skInfo/detail/index'
+        }
+        uni.navigateTo({url})
+      },
+      markertap(e) {
+        const newMarker = this.markers
+        newMarker.forEach(((item, i) => {
+          const type = item.pointType
+          if (item.id == e.detail.markerId) {
+            if (item.width == 25) {
+              this.jumpDeatails(type, item)
+              return;
+            }
+            item.height = 25;
+            item.width = 25;
+            item.iconPath = iconObj[type][2];
+          } else {
+            item.height = 15;
+            item.width = 15;
+            item.iconPath = iconObj[type][1];
+          }
+        }));
+        this.markers = [...newMarker];
+      },
+      // 模式切换
+      onMode(type) {
+        this.typeChecked = type
+        if (type == 1) {
+          this.enableSatellite = true
+
+        } else {
+          this.enableSatellite = false
+        }
+      },
+      toggleIcon(item) {
+        this.watchObj.forEach(i => {
+          if (i.id === item.id) {
+            i.showIcon = i["isSelected" + item.id] ? i.icon1 : i.icon2;;
+            i.textColor = i["isSelected" + item.id] ? "black" : "#02a7f0";
+            i["isSelected" + item.id] = !i["isSelected" + item.id];
+          }
+        });
+      },
+      // 获取视频点
+      async getVideoList() {
+        try {
+          const {
+            data
+          } = await uni.$http.post("/gunshiApp/tsg/attCctvBase/list")
+          if (data.code == 200) {
+            const videoList = data.data.map(item => ({
+              ...item,
+              latitude: item.lttd - 0,
+              longitude: item.lgtd - 0,
+              iconPath: '/static/tabs/sxt1.png',
+              width: 15,
+              height: 15,
+              title: item.name,
+              id: item.id,
+              pointType: "视频监控",
+              name: "视频监控"
+            }))
+            this.markers = [...this.markers, ...videoList]
+          }
+        } catch (error) {
+          uni.$showMsg();
+        }
+      },
+      // 获取雨情点
+      async getRainList() {
+        try {
+          const {
+            data
+          } = await uni.$http.post("/gunshiApp/tsg/real/rain/list", {
+            stm: moment().add(-1, 'days').format('YYYY-MM-DD 08:00:00'),
+            etm: moment(moment().format('YYYY-MM-DD 08:00:00'))
+          })
+          if (data.code == 200) {
+            const rainList = data.data.map(item => ({
+              ...item,
+              latitude: item.lttd - 0,
+              longitude: item.lgtd - 0,
+              iconPath: '/static/tabs/sl1.png',
+              width: 15,
+              height: 15,
+              title: item.stnm,
+              id: item.stcd,
+              pointType: "雨量",
+              name: "水雨情监测",
+               // joinCluster:true
+            }))
+            this.markers = [...this.markers, ...rainList]
+          }
+        } catch (error) {
+          uni.$showMsg();
+        }
+      },
+      // 获取水量点
+      async getWaterList() {
+        try {
+          const {
+            data
+          } = await uni.$http.post("/gunshiApp/tsg/reservoir/water/list", )
+          if (data.code == 200) {
+            const waterList = data.data.map(item => ({
+              ...item,
+              latitude: item.lttd - 0,
+              longitude: item.lgtd - 0,
+              iconPath: '/static/tabs/yl1.png',
+              width: 15,
+              height: 15,
+              title: item.stnm,
+              id: item.stcd,
+              pointType: "水量",
+              name: "水雨情监测",
+              // joinCluster:true
+            }))
+            this.markers = [...this.markers, ...waterList]
+          }
+        } catch (error) {
+          uni.$showMsg();
+        }
+      },
+    },
+    computed: {
+      marker() {
+        const filterCat = this.watchObj.filter((item, i) => item['isSelected' + (i + 1)])
+        const res = this.markers.filter(item => {
+          return filterCat.some((o => o.name == item.name))
+        })
+        return res.slice(0)
+      }
+    },
+    mounted() {
+      this.getVideoList();
+      this.getRainList();
+      this.getWaterList();
+    }
+  }
 </script>
 
 <style lang="scss">
-   .location{
+  .location {
     position: absolute;
     width: 35px;
-    height:35px;
+    height: 35px;
     bottom: 50px;
-    left:10px;
+    left: 10px;
     background-color: #fff;
     padding: 5px;
-   }
-   .tc-style{
-     display: flex;
-     align-items: center;
-     position: absolute;
-     font-size: 12px;
+  }
+
+  .tc-style {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    font-size: 12px;
     padding: 5px;
-     top: 200px;
-     right:10px;
-     background-color: #fff;
-    
-     // padding: 5px;
-   }
+    top: 200px;
+    right: 10px;
+    background-color: #fff;
+
+    // padding: 5px;
+  }
 </style>