web-website/src/views/resource/resource.vue

<template>
  <div id="resource">
    <el-row>
      <el-col :span="24">
        <div id="container">
          <!-- 自定义列表 -->
          <div style="width:200px" class="menus">
            <el-menu @select="typeSelect">
              <el-submenu index="1">
                <template #title>
                  <span>科技部门</span>
                </template>
                <el-menu-item index="1-1">科技部门</el-menu-item>
                <!-- <el-menu-item-group>
                  <el-submenu index="1-1">
                    <template #title>
                      <span>科技部门</span>
                    </template>
                    <el-menu-item index="1-1-1">力旺系</el-menu-item>
                    <el-menu-item index="1-2-2">南湖系</el-menu-item>
                  </el-submenu>
                </el-menu-item-group> -->
              </el-submenu>
              <el-submenu index="2">
                <template #title>
                  <span>科研院所</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="2-1">
                    <template #title>
                      <span>科研院所</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template #title>
                  <span>大专院校</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="3-1">
                    <template #title>
                      <span>大专院校</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template #title>
                  <span>科技企业</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="4-1">
                    <template #title>
                      <span>高新技术企业</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="4-2">
                    <template #title>
                      <span>创新型企业</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <!-- <el-submenu index="4-3">
                    <template #title>
                      <span>科技小巨人</span>
                    </template>
                  </el-submenu> -->
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template #title>
                  <span>条件平台</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="5-1">
                    <template #title>
                      <span>重点实验室</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-2">
                    <template #title>
                      <span>工程技术研究中心</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-3">
                    <template #title>
                      <span>大学科技园</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-4">
                    <template #title>
                      <span>科技企业孵化器</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-5">
                    <template #title>
                      <span>产业化基地</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-6">
                    <template #title>
                      <span>技术转移示范机构</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-7">
                    <template #title>
                      <span>科技合作基地</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-8">
                    <template #title>
                      <span>院士工作站</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-9">
                    <template #title>
                      <span>技术创新联盟</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-10">
                    <template #title>
                      <span>科技创新中心</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="5-11">
                    <template #title>
                      <span>科技成果转化中试中心</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template #title>
                  <span>服务机构(科技)</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="6-1">
                    <template #title>
                      <span>生产力促进中心</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="6-2">
                    <template #title>
                      <span>技术合同登记点</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="6-3">
                    <template #title>
                      <span>技术大市场</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                  <el-submenu index="6-4">
                    <template #title>
                      <span>科技成功评价试点</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="7">
                <template #title>
                  <span>重大项目</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="7-1">
                    <template #title>
                      <span>重大项目</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="8">
                <template #title>
                  <span>科技奖励</span>
                </template>
                <el-menu-item-group>
                  <el-submenu index="8-1">
                    <template #title>
                      <span>科技奖励</span>
                    </template>
                    <!-- <el-menu-item index="2-1-1">农大系</el-menu-item> -->
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
          <!-- 搜索框 -->
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="center" :plugin="plugin">
            <!-- mark上方文字 -->
            <el-amap-text v-for="(t, index) in marktext" :key="`text${index}`" :text="t.text" :offset="[0, -50]" :position="t.position"></el-amap-text>
            <!-- 标记 -->
            <el-amap-marker
              v-for="(i, index) in markers"
              :key="`mark${index}`"
              :position="i.position"
              :events="i.events"
              :title="i.title"
              :address="i.address"
              :vid="index"
            ></el-amap-marker>
            <!-- 信息框体 -->
            <el-amap-info-window :position="window.position" :visible="window.visible" :events="window.events" :autoMove="true">
              <el-row>
                <el-col :span="24">
                  <el-link type="primary">标题:{{ windowInfo.title }}</el-link>
                </el-col>
                <el-col :span="24">图片:{{ windowInfo.pic }}</el-col>
                <el-col :span="24">地址:{{ windowInfo.address }}</el-col>
              </el-row>
            </el-amap-info-window>
          </el-amap>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
import VueAMap from 'vue-amap';
import Vue from 'vue';
Vue.use(VueAMap);
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'resource',
  props: {},
  components: {},
  data: function() {
    return {
      zoom: '17',
      center: [125.291162, 43.838597], //初始定位到中心
      // 标记点列表
      markers: [],
      // 标记点提示
      marktext: [],
      // 窗体信息
      window: {
        position: [125.291162, 43.838597],
        visible: false,
      },
      windowInfo: { name: 'an', pic: 'pic' },
      // 搜索框
      searchOption: {
        city: '长春',
        citylimit: true,
      },
      // 插件
      plugin: [
        {
          pName: 'Scale',
          events: {
            init(instance) {},
          },
        },
      ],
      // 数据
      list: [
        {
          id: 'B0FFGY6JEE',
          name: '力旺广场',
          type: '购物服务;商场;普通商场',
          location: { Q: 43.840745, R: 125.290821, lng: 125.290821, lat: 43.840745 },
          address: '前进大街旁',
          tel: '0431-81338098',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.840745,
          lng: 125.290821,
        },
        {
          id: 'B0FFH2A0ZH',
          name: '力旺广场B座',
          type: '商务住宅;楼宇;商务写字楼',
          location: { Q: 43.840772, R: 125.29062299999998, lng: 125.290623, lat: 43.840772 },
          address: '前进大街996号力旺广场',
          tel: '0431-81296666',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.840772,
          lng: 125.290623,
        },
        {
          id: 'B0FFH62X6K',
          name: '力旺广场',
          type: '风景名胜;公园广场;公园广场',
          location: { Q: 43.942781, R: 125.36932200000001, lng: 125.369322, lat: 43.942781 },
          address: '金钱路力旺康城1期',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.942781,
          lng: 125.369322,
        },
        {
          id: 'B0FFH29EHL',
          name: '力旺广场写字楼C栋',
          type: '商务住宅;楼宇;商务写字楼',
          location: { Q: 43.840163, R: 125.29054100000002, lng: 125.290541, lat: 43.840163 },
          address: '前进大街996号力旺广场',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.840163,
          lng: 125.290541,
        },
        {
          id: 'B0FFL7FPXU',
          name: '力旺广场(1号门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.84039, R: 125.29037, lng: 125.29037, lat: 43.84039 },
          address: '前进大街996号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.84039,
          lng: 125.29037,
        },
        {
          id: 'B0FFHZXXDI',
          name: '力旺广场(西门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.84208, R: 125.29029200000002, lng: 125.290292, lat: 43.84208 },
          address: '前进大街990号附近',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.84208,
          lng: 125.290292,
        },
        {
          id: 'B0FFM88ZHZ',
          name: '力旺广场(3号门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.840071, R: 125.29147, lng: 125.29147, lat: 43.840071 },
          address: '前进大街996号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.840071,
          lng: 125.29147,
        },
        {
          id: 'B0FFLD96C2',
          name: '力旺广场(3A号门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.840601, R: 125.29088999999999, lng: 125.29089, lat: 43.840601 },
          address: '前进大街996号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.840601,
          lng: 125.29089,
        },
        {
          id: 'B0FFIR6YOH',
          name: '力旺广场A座',
          type: '商务住宅;商务住宅相关;商务住宅相关',
          location: { Q: 43.841961, R: 125.29061100000001, lng: 125.290611, lat: 43.841961 },
          address: '前进大街996号力旺广场',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.841961,
          lng: 125.290611,
        },
        {
          id: 'B0FFIR6YOB',
          name: '力旺广场D座',
          type: '商务住宅;商务住宅相关;商务住宅相关',
          location: { Q: 43.840163, R: 125.29054200000002, lng: 125.290542, lat: 43.840163 },
          address: '前进大街996号力旺广场d栋',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.840163,
          lng: 125.290542,
        },
      ],
      list2: [
        {
          id: 'B01AF07OT6',
          name: '南湖公园',
          type: '风景名胜;公园广场;公园',
          location: { Q: 43.856452, R: 125.30678899999998, lng: 125.306789, lat: 43.856452 },
          address: '工农大路2715号',
          tel: '0431-85663059;0431-85664455',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.856452,
          lng: 125.306789,
        },
        {
          id: 'BV10111530',
          name: '南湖公园(公交站)',
          type: '交通设施服务;公交车站;公交车站相关',
          location: { Q: 43.859222, R: 125.31698599999999, lng: 125.316986, lat: 43.859222 },
          address: '232路;270路;277路;315路;62路',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.859222,
          lng: 125.316986,
        },
        {
          id: 'B01AF02511',
          name: '南湖公园-长春解放纪念碑',
          type: '风景名胜;风景名胜;风景名胜',
          location: { Q: 43.862086, R: 125.30811299999999, lng: 125.308113, lat: 43.862086 },
          address: '工农大路51号南湖公园(近建昌街)',
          tel: '0431-85664455',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.862086,
          lng: 125.308113,
        },
        {
          id: 'B01AF0CKC8',
          name: '南湖公园(3号门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.862941, R: 125.30814399999997, lng: 125.308144, lat: 43.862941 },
          address: '工农大路51号南湖公园附近',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.862941,
          lng: 125.308144,
        },
        {
          id: 'B01AF0B6EB',
          name: '南湖公园-沙滩浴场',
          type: '体育休闲服务;运动场馆;海滨浴场',
          location: { Q: 43.852974, R: 125.31971099999998, lng: 125.319711, lat: 43.852974 },
          address: '工农大路与昂昂溪路交汇处西100米',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.852974,
          lng: 125.319711,
        },
        {
          id: 'B0FFFRCYR9',
          name: '南湖公园-荷花池',
          type: '风景名胜;风景名胜相关;旅游景点',
          location: { Q: 43.859825, R: 125.30918099999997, lng: 125.309181, lat: 43.859825 },
          address: '南湖公园内',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.859825,
          lng: 125.309181,
        },
        {
          id: 'B0FFFTN0A1',
          name: '南湖公园(南3门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.850824, R: 125.293613, lng: 125.293613, lat: 43.850824 },
          address: '南湖大路南湖公园',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.850824,
          lng: 125.293613,
        },
        {
          id: 'B0FFIC9UPB',
          name: '南湖公园(南1号门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.851119, R: 125.31657200000001, lng: 125.316572, lat: 43.851119 },
          address: '南湖大路南湖大桥东',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.851119,
          lng: 125.316572,
        },
        {
          id: 'B0FFJO7O4R',
          name: '南湖公园(西北5门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.862738, R: 125.30659100000003, lng: 125.306591, lat: 43.862738 },
          address: '工农大路2715号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.862738,
          lng: 125.306591,
        },
        {
          id: 'B0FFH2ITPR',
          name: '南湖公园(东北1门)',
          type: '通行设施;临街院门;临街院门',
          location: { Q: 43.858587, R: 125.31510400000002, lng: 125.315104, lat: 43.858587 },
          address: '同志街与工农大路交叉口西北100米',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.858587,
          lng: 125.315104,
        },
      ],
      list3: [
        {
          id: 'B01AF09G3A',
          name: '吉林农业大学',
          type: '科教文化服务;学校;高等院校',
          location: { Q: 43.809821, R: 125.41048699999999, lng: 125.410487, lat: 43.809821 },
          address: '新城大街2888号',
          tel: '0431-84533101;0431-84532980;0431-84532983',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.809821,
          lng: 125.410487,
        },
        {
          id: 'BV10110500',
          name: '农大(公交站)',
          type: '交通设施服务;公交车站;公交车站相关',
          location: { Q: 43.816765, R: 125.40742499999999, lng: 125.407425, lat: 43.816765 },
          address: '341路;349路',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.816765,
          lng: 125.407425,
        },
        {
          id: 'BV10110589',
          name: '吉林农大(公交站)',
          type: '交通设施服务;公交车站;公交车站相关',
          location: { Q: 43.816803, R: 125.40744000000001, lng: 125.40744, lat: 43.816803 },
          address: '103路;115路;341路;342路;343路;345路;346路;348路;349路;350路',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.816803,
          lng: 125.40744,
        },
        {
          id: 'B0FFH2KIYR',
          name: '农大社区',
          type: '商务住宅;住宅区;住宅小区',
          location: { Q: 43.817344, R: 125.41352699999999, lng: 125.413527, lat: 43.817344 },
          address: '净月旅游开发区新城大街与博学路交汇',
          tel: '13179045829',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.817344,
          lng: 125.413527,
        },
        {
          id: 'B0FFKDO9ZT',
          name: '农大老区',
          type: '商务住宅;住宅区;住宅小区',
          location: { Q: 43.817121, R: 125.41370599999999, lng: 125.413706, lat: 43.817121 },
          address: '净月旅游开发区',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.817121,
          lng: 125.413706,
        },
        {
          id: 'BV10454240',
          name: '农大宿舍(公交站)',
          type: '交通设施服务;公交车站;公交车站相关',
          location: { Q: 43.820824, R: 125.41961700000002, lng: 125.419617, lat: 43.820824 },
          address: '158路东环',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '2',
          lat: 43.820824,
          lng: 125.419617,
        },
        {
          id: 'B0FFFGXVEZ',
          name: '君安驾校农大直属分校',
          type: '科教文化服务;驾校;驾校',
          location: { Q: 43.821857, R: 125.41017499999998, lng: 125.410175, lat: 43.821857 },
          address: '新城大街1888号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '1',
          lat: 43.821857,
          lng: 125.410175,
        },
        {
          id: 'B0FFLC02A9',
          name: '农大老区42号楼双凤学堂',
          type: '科教文化服务;科教文化场所;科教文化场所',
          location: { Q: 43.818345, R: 125.41272200000003, lng: 125.412722, lat: 43.818345 },
          address: '紫薇街',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.818345,
          lng: 125.412722,
        },
        {
          id: 'B0FFH6FRPL',
          name: '永兴街道办事处农大社区党校',
          type: '科教文化服务;学校;学校',
          location: { Q: 43.818295, R: 125.41407500000003, lng: 125.414075, lat: 43.818295 },
          address: '博学路南200米',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.818295,
          lng: 125.414075,
        },
        {
          id: 'B01AF0ZQXP',
          name: '吉林农业大学教学科研基地',
          type: '科教文化服务;科研机构;科研机构',
          location: { Q: 43.816967, R: 125.406455, lng: 125.406455, lat: 43.816967 },
          address: '新城大街2555号',
          tel: '',
          distance: '__vue_devtool_nan__',
          shopinfo: '0',
          lat: 43.816967,
          lng: 125.406455,
        },
      ],
    };
  },
  created() {
    this.handlemyMapFn();
  },
  methods: {
    // 搜索框回调
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        // 只处理第一个结果了
        const r = this.setMark(_.head(pois));
        const { position } = r;
        this.center = position;
      }
    },
    // 添加标记
    setMark(place) {
      let name = _.get(place, 'name');
      let address = _.get(place, 'address');
      let lng = _.get(place, 'lng');
      let lat = _.get(place, 'lat');
      let position = [lng, lat];
      let obj = {
        position: position,
        events: {
          click: () => {
            this.markClick(position);
          },
        },
        title: `${name}`,
        address: `${address}`,
        label: { content: 'lable', offset: [3, 3] },
        desc: 'abc',
      };
      let text = {
        position: position,
        text: name,
      };
      let isDiff = this.markers.find(f => _.isEqual(f.position, position));
      if (!isDiff) {
        this.markers.push(obj);
        this.marktext.push(text);
      }
      return obj;
    },
    // 初始化地图
    handlemyMapFn() {
      VueAMap.initAMapApiLoader({
        key: '47947a002b2cddf99df02a1a5b1bc198',
        plugin: [
          'AMap.PolyEditor', //编辑 折线多，边形
          'AMap.PlaceSearch', // 查询
          'AMap.Autocomplete',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.PolyEditor',
          'AMap.CircleEditor',
        ], // 默认高德 sdk 版本为 1.4.4
        v: '1.4.4',
      });
    },
    // 标记点击
    markClick(posi) {
      console.log(this.markers);
      const r = this.markers.find(f => _.isEqual(f.position, posi));
      console.log(r);
      // 设置窗口信息,自定义.反正在slot里的字段对上
      const info = {
        title: r.title,
        address: r.address,
        pic: 'pic',
      };
      this.$set(this, `windowInfo`, info);
      // 设置窗口信息
      const obj = {
        position: r.position,
        visible: true,
        events: {
          close: () => {
            // 初始化
            this.$set(this, `window`, { position: [125.291162, 43.838597], visible: false });
          },
        },
      };
      this.$set(this, `window`, obj);
    },
    // 点击导航菜单
    typeSelect(index) {
      this.$set(this, `markers`, []);
      this.$set(this, `marktext`, []);
      if (index === '2-1-1') {
        for (const i of this.list3) {
          this.setMark(i);
        }
      } else if (index === '1-1-1') {
        for (const i of this.list) {
          this.setMark(i);
        }
      } else {
        for (const i of this.list2) {
          this.setMark(i);
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100vh;
}
.search-box {
  position: absolute;
  top: 25px;
  right: 20px;
}
.menus {
  position: absolute;
  top: 25px;
  left: 20px;
  z-index: 200;
}
</style>