feat:模型点击、免登录页面处理

shuishen

2026-01-05 451237feb7f3446d93d29bdf0a396503c928b349

feat:模型点击、免登录页面处理

 src/pages/sign.vue

New file
@@ -0,0 +1,54 @@
<!--
 * @Author       : yuan
 * @Date         : 2026-01-04 11:13:59
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-04 16:59:19
 * @FilePath     : \src\pages\sign.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
 * 2026-01-04 11:13:59
-->
<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        //租户ID
        tenantId: "000000",
        //部门ID
        deptId: "",
        //角色ID
        roleId: "",
        //用户名
        username: "xishi",
        //密码
        password: "xishi@110",
        //账号类型
        type: "account",
        //验证码的值
        code: "",
        //验证码的索引
        key: "",
        //预加载白色背景
        image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
      },
    }
  },
  created () {
    this.$store.dispatch("LoginByUsername", this.loginForm).then((res) => {
      this.$store.dispatch("GetButtons")

      //跳转首页
      this.$router.push({ path: "/layoutT/house" })
    })
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped></style>

 src/router/page/index.js

@@ -5,40 +5,41 @@
 * @Last Modified time: 2022-07-29 09:15:23
 */

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

const layout = () => import("../../views/layout/index.vue");
const site = () => import("../../views/site/index.vue");
const home = () => import("../../views/home/index.vue");
const house = () => import("../../views/house/index.vue");
const police = () => import("../../views/police/index.vue");
const video = () => import("../../views/video/index.vue");
const videoList = () => import("../../views/video/list.vue");
const videoRegion = () => import("../../views/video/region.vue");
const activity = () => import("../../views/activity/index.vue");
const policeInfor = () => import("../../views/policeInfor/index.vue");
const scanOrCode = () => import("../../views/scanOrCode/index.vue");
const rentalInfo = () => import("../../views/rentalInfo/index.vue");
const antiFraudShow = () => import("../../views/antiFraudShow/index.vue");
const layout = () => import("../../views/layout/index.vue")
const layoutT = () => import("../../views/layoutT/index.vue")
const site = () => import("../../views/site/index.vue")
const home = () => import("../../views/home/index.vue")
const house = () => import("../../views/house/index.vue")
const police = () => import("../../views/police/index.vue")
const video = () => import("../../views/video/index.vue")
const videoList = () => import("../../views/video/list.vue")
const videoRegion = () => import("../../views/video/region.vue")
const activity = () => import("../../views/activity/index.vue")
const policeInfor = () => import("../../views/policeInfor/index.vue")
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const rentalInfo = () => import("../../views/rentalInfo/index.vue")
const antiFraudShow = () => import("../../views/antiFraudShow/index.vue")
const contradictionEventShow = () =>
  import("../../views/contradictionEventShow/index.vue");
const positionManage = () => import("../../views/positionManage/index.vue");
  import("../../views/contradictionEventShow/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const practitionersManage = () =>
  import("../../views/practitionersManage/index.vue");
  import("../../views/practitionersManage/index.vue")
const policeAlarmRecordsManage = () =>
  import("../../views/policeAlarmRecordsManage/index.vue");
  import("../../views/policeAlarmRecordsManage/index.vue")

const comprehensiveSearch = () =>
  import("../../views/comprehensiveSearch/index.vue");
const available = () => import("../../views/available/index.vue");
const risk = () => import("../../views/risk/index.vue");
  import("../../views/comprehensiveSearch/index.vue")
const available = () => import("../../views/available/index.vue")
const risk = () => import("../../views/risk/index.vue")

const intelligentSearch = () =>
  import("../../views/intelligentSearch/index.vue");
  import("../../views/intelligentSearch/index.vue")

const login = () => import("../../views/login/index.vue");
const login = () => import("../../views/login/index.vue")

const routes = [
  {
@@ -50,13 +51,26 @@
      isAuth: false,
    },
  },

  {
    path: '/sign',
    name: '免登录',
    component: () => import('@/pages/sign.vue'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false,
    },
  },

  {
    path: "/",
    redirect: "/layout",
  },

  {
    path: "/layout",
    redirect: "/layout/home",
    redirect: "/layout/house",
    meta: {
      title: "导航菜单",
    },
@@ -207,16 +221,34 @@
      },
    ],
  },

  {
    path: "/layoutT",
    redirect: "/layoutT/house",
    meta: {
      title: "导航菜单",
    },
    component: layoutT,
    children: [
      {
        path: "house",
        meta: {
          title: "社区感知",
        },
        component: house,
      },
    ],
  },
  // {
  //     path: '*',
  //     redirect: '/404',
  //     isAuth: false
  // }
];
]

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
});
})

export default router;
export default router

 src/views/house/index.vue

@@ -432,7 +432,7 @@
      <div class="item">
        <div class="key">名称:</div>
        <div class="value">{{ businessChooseItem.placeName
          }}</div>
        }}</div>
      </div>
      <div class="item">
        <div class="key">类型:</div>
@@ -449,12 +449,12 @@
      <div class="item">
        <div class="key">经度:</div>
        <div class="value">{{ businessChooseItem.x
          }}</div>
        }}</div>
      </div>
      <div class="item">
        <div class="key">纬度:</div>
        <div class="value">{{ businessChooseItem.y
          }}</div>
        }}</div>
      </div>
    </div>
    <map-search-box></map-search-box>
@@ -1635,7 +1635,7 @@
    },

    // 大搜之搜索面详细数据（停车场出入口商场、 小区名称类型地址、楼栋数据）
    getSearchExtensivelyBgAoiDeepdata (ak, region, ids, infos) {
    getSearchExtensivelyBgAoiDeepdata (ak, region, ids, infos, bgId = '') {
      this.villageInfoLoading = true
      this.BuildListLoading = true
      this.buildingList = []
@@ -1738,9 +1738,20 @@
            })
            setTimeout(() => {
              this.BuildListLoading = false
            }, 500)

            // this.buildingClick(this.buildingList[0])
              if (bgId !== '') {
                let chooseBuildItem = []
                this.buildingList.forEach((item) => {
                  if (item.build_std_addr_id == bgId) {
                    chooseBuildItem = item
                  }
                })

                if (chooseBuildItem.length !== 0) {
                  this.buildingClick(chooseBuildItem)
                }
              }
            }, 500)
          } else if (res.data.result[0].children_infos[0].exttype == 'unit') {
            console.log('search---unit')
            this.isShowHouseBox = true
@@ -1883,6 +1894,11 @@
        })
        this.unitChoosed3DList = houseData.nwwqd.features
        this.curHousingHWTXAYjpca = houseData.hwtxa.features[0].properties.yjpca

        if (Math.ceil(this.unitChoosedArr.length / 5) > 3) {
          this.nextFloorShow = true
        }

        if (aoiArr) {
          this.unitChoosed3DList.forEach(item => {
            let aoiHeight = aoiArr[1]
@@ -2069,6 +2085,7 @@
      this.floorsType = 1
      document.querySelector(".floor-num").style.left = "0px"
      this.lastFloorShow = false

      this.unitValue = 1
    },

@@ -2726,6 +2743,7 @@
        "0.00001"
      ).then((res) => {
        let bgId = res.data.data.properties.ijnnl
        let aoiId = res.data.data.properties.bnhqh
        getSearchExtensively(
          "ebf48ecaa1fd436fa3d40c4600aa051f",
          "361100",
@@ -2738,10 +2756,22 @@
              chooseBuildItem = item
            }
          })
          this.buildingClick(chooseBuildItem, [
            [e.wgs84Position.lng, e.wgs84Position.lat],
            e.wgs84Position.alt,
          ])

          if (chooseBuildItem.length !== 0) {
            this.buildingClick(chooseBuildItem, [
              [e.wgs84Position.lng, e.wgs84Position.lat],
              e.wgs84Position.alt,
            ])
          } else {
            this.getSearchExtensivelyBgAoiDeepdata(
              "ebf48ecaa1fd436fa3d40c4600aa051f",
              "361100",
              aoiId,
              "1|3",
              res.data.result[0].std_addr_id.split("|")[1]
            )
            this.getVillageInfo(aoiId)
          }
        })
      })
    },

 src/views/layoutT/index.vue

New file
@@ -0,0 +1,837 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-02-20 17:46:48
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
  <div class="wrapper">
    <div class="main-header">
      <!-- <div class="menu-list left">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
          <span :class="{ on: showChange(item) }">{{ item.menuName }}</span>

          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
              {{
                subItem.menuName
              }}
            </div>
          </div>
        </div>
      </div> -->

      <div class="title">
        <h3>信州公安社区感知平台</h3>
      </div>

      <!-- 菜单导航 -->
      <!-- <div class="menu-list right">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
          <span :class="{ on: showChange(item) }">
            {{
              item.menuName }}
          </span>

          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }" v-for="(subItem, subIndex) in item.children"
              :key="subIndex" @click.stop="goToPath(subItem, 4)">
              {{
                subItem.menuName
              }}
            </div>
          </div>
        </div>
      </div> -->

      <!-- 用户登录展示的 -->
      <!-- <div class="user-infor" @click="openUser">
        <div class="userIcon" :class="{ on: userOn == true }">
          <i class="el-icon-more"></i>
        </div>
        <div class="userDetail" v-if="isShowUserDetail">
          <div class="triangle"></div>
          <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
          <div class="userBtn">
            <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
              <i class="el-icon-user-back"></i>
              运维管理
            </div>
            <div class="back-system" :style="{ color: currentUrl == '/layout/available' ? '#fcbd56' : '#fff' }"
              @click="goToPage('/layout/available')">
              <i class="el-icon-s-grid"></i>
              可用资源
            </div>
            <div class="back-system" :style="{ color: currentUrl == '/layout/risk' ? '#fcbd56' : '#fff' }"
              @click="goToPage('/layout/risk')">
              <i class="el-icon-s-grid"></i>
              风险隐患
            </div>
            <div class="edit" @click="resetPsd">
              <i class="el-icon-edit"></i>
              修改密码
            </div>
            <div class="edit" @click="goTOLogout">
              <i class="el-icon-user-quit"></i>
              退出登录
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{userName}}</div>
                    <div class="userBtn">
                        <div class="edit" @click="goTOLogin">
                            >
                            <img src="../../../public/img/editLogin.webp" alt />
                        </div>
                        <div class="return" @click="goTOFllow">返回引导页</div>
                    </div>
                </div>
            </div>-->
    </div>

    <div class="main-container">
      <!-- 地图区域 -->
      <map-box ref="modalForm">
        <!-- 主体内容区域 -->
        <div slot="mainContent" class="main-content" id="MainContent"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
          <router-view ref="target-name"></router-view>
        </div>

        <div slot="copyrightText">
          <div class="copyright-box" v-show="!this.$store.state.popupParams.isShowHomeContent">版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
          <div :class="{ 'copyright-box-shouye': isShouYe, 'copyright-box': !isShouYe, }"
            v-show="this.$store.state.popupParams.isShowHomeContent">
            版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
        </div>

        <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
          :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
          @click="flexibelClick"></el-button>
        <div slot="resetPopup">
          <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true" :before-close="resetBeforeClose"
            :modal-append-to-body="false" :close-on-click-modal="false" class="reset-popup-box">
            <div class="reset-popup-body">
              <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="form.oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="form.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newPassword1">
                  <el-input v-model="form.newPassword1" type="password"></el-input>
                </el-form-item>
                <div class="btn-box">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="cancelSF">取消</el-button>
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
      </map-box>
    </div>
  </div>
</template>

<script>
let HTUrl = ''

if (process.env.NODE_ENV == 'development') {
  // 开发
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_HTURL
} else {
  // 部署
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
}


import { validatenull } from "@/utils/validate"
import { calcDate } from "@/utils/date.js"
import { getStore } from "@/utils/store.js"
import { updatePassword } from "@/api/user/index.js"
import md5 from "js-md5"

import { getUserInfo, getToken } from '@/utils/auth'
import { mapGetters } from "vuex"

export default {
  provide () {
    return {
      userInfo: JSON.parse(getUserInfo()),
    }
  },

  data () {
    return {
      form: {},
      rules: {
        oldPassword: [{ required: true, message: "必填" }],
        newPassword: [{ required: true, message: "必填" }],
        newPassword1: [{ required: true, message: "必填" }]
      },
      resetPsdPopupShow: false,
      menuLeftList: [
        {
          menuName: '首页',
          path: '/layout/home'
        },
        {
          menuName: '社区感知',
          path: '/layout/house'
        },
        {
          menuName: '警力资源',
          path: '/layout/policeresouce'

        },
        {
          menuName: '视频监控',
          path: '/layout/video/list',
          childrenFlag: false,
          children: [
            {
              menuName: '视频预览',
              path: '/layout/video/list'
            },
            {
              menuName: '视频巡逻',
              path: '/layout/video/region'
            }
          ]
        },
      ],
      menuRightList: [
        {
          menuName: '电子沙盘',
          path: '/layout/activity'
        },
        {
          menuName: '警情信息',
          path: '/layout/policeinfor'
        },
        {
          menuName: '扫码应用',
          path: '/layout/scanOrCode',
          childrenFlag: false,
          children: [
            {
              menuName: '群众上报',
              path: '/layout/scanOrCode'
            },
            {
              menuName: '九小场所',
              path: '/layout/site'
            },
            {
              menuName: '矛盾纠纷',
              path: '/layout/contradictionEventShow'
            },
            {
              menuName: '反诈宣防',
              path: '/layout/antiFraudShow'
            },
            {
              menuName: '租赁信息',
              path: '/layout/rentalInfo'
            },
            {
              menuName: '阵地管理',
              path: '/layout/positionManage'
            },
            {
              menuName: '从业人员',
              path: '/layout/practitionersManage'
            },
            {
              menuName: '扫码报警',
              path: '/layout/policeAlarmRecordsManage'
            },
            /* {
                menuName: '综合搜索',
                path: '/layout/comprehensiveSearch'
            }, */
          ]
        },
        {
          menuName: '智能搜索',
          path: '/layout/intelligentSearch'
        }
      ],

      show: true,

      leftShow: true,

      boxWidth: 0,

      currentUrl: '/layout/home',
      userOn: false,
      isShowUserDetail: false,
      user: {},

      currentUserInfo: JSON.parse(getUserInfo()),

      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      isShouYe: true,
    }
  },

  computed: {
    ...mapGetters(['permission']),

    showChange () {
      return (item) => {
        if ('children' in item && item.children.length) {
          return item.children.some(i => this.currentUrl == i.path)
        } else {
          return this.currentUrl.indexOf(item.path) != -1
        }
      }
    }
  },

  created () {
    this.currentUrl = this.$route.path
    this.init()

    //实时检测刷新token
    this.refreshToken()
  },

  watch: {
    $route: {
      handler (newPath, oldPath) {
        this.currentUrl = newPath.path

        this.$nextTick(() => {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        })

        if (this.currentUrl == '/layout/home') {
          this.leftShow = false
          this.isShouYe = true
        } else {
          this.leftShow = true
          this.isShouYe = false
        }
      },
      immediate: true
    }
  },

  mounted () {
  },

  methods: {
    // 重置密码
    resetPsd () {
      this.resetPsdPopupShow = true
    },

    // 提交修改
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改密码成功!"
              })
              this.resetBeforeClose()
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              })
            }
          }, error => {
            window.console.log(error)
          })
        } else {
          return false
        }
      })
    },

    // 取消提交
    cancelSF () {
      this.resetBeforeClose()
    },

    // 弹窗关闭事件
    resetBeforeClose () {
      this.$refs.form.resetFields()
      this.resetPsdPopupShow = false
    },

    init () {
      this.user = this.$store.state.user.userInfo
    },
    //登出
    goTOLogout () {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ path: "/login" })
      })
    },

    // 跳转页面
    goToPage (pagePath) {
      this.$router.push(pagePath)
    },

    /**
     * @description: 跳转运维管理平台
     * @return {*}
     */
    goToBack () {
      var path = HTUrl + "?token=" + getToken()
      window.open(path)
    },
    /**
     * @description: 路由跳转的事件
     *                  通过给父元素绑定事件-子元素触发，并传入参数
     * @param {*} e 子元素上绑定的的自定义属性
     * @return {*} 没有返回值
     */
    goToPath (params, key = 0) {
      console.log(params, key, 465)

      if (params.path) {
        if (this.$route.path == params.path) return
        this.$router.push(params.path)
      } else {
        params.childrenFlag = !params.childrenFlag
      }
    },

    flexibelClick () {
      this.show = !this.show

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      if (this.show) {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
        document.querySelector('.screen-full-btn').classList.add('shrink-btn')
        document.querySelector('.over-look-btn').classList.add('shrink-btn')
        document.querySelector('.compass-btn').classList.add('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
      } else {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
        document.querySelector('.over-look-btn').classList.remove('shrink-btn')
        document.querySelector('.compass-btn').classList.remove('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
      }
    },

    resize (val, flag = false) {
      this.boxWidth = val

      this.show = flag

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      this.$nextTick(() => {
        if (this.show) {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
          document.querySelector('.screen-full-btn').classList.add('shrink-btn')
          document.querySelector('.over-look-btn').classList.add('shrink-btn')
          document.querySelector('.compass-btn').classList.add('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
        } else {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        }
      })
    },

    openUser () {
      this.userOn = !this.userOn
      this.isShowUserDetail = !this.isShowUserDetail
    },

    // 定时检测token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "store-token",
          debug: true
        }) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (validatenull(date)) return
        if (date.seconds >= 3000 && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false
            })
            .catch(() => {
              this.refreshLock = false
            })
        }
      }, 10000)
    }
  }
}
</script>

<style scoped lang="scss">
$bg-blue: rgba(24, 33, 92, 0.9);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .main-header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: left;
    font-size: 44px;
    font-weight: bold;
    color: #fff;
    z-index: 99;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(/img/box/title-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: -1;
      opacity: 0.85;
    }

    .title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 450px;
      font-size: 24px;
      // text-align: center;
      overflow: hidden;
      letter-spacing: 6px;

      &>img {
        // width: 100%;
        height: 80%;
        margin: 0 10px 0 10px;
        // margin-top: -5px;
      }
    }

    .menu-list.left {
      margin-left: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 10px 16px 10px 16px;
        transform: skew(61.5deg);

        &>span {
          transform: skew(-61.5deg);
        }
      }
    }

    .menu-list.right {
      margin-right: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 16px 10px 16px 10px;
        transform: skew(-61.5deg);

        &>span {
          transform: skew(61.5deg);
        }
      }
    }

    .menu-list {
      display: flex;
      align-items: center;

      &>.nav-list {

        // color: rgba(32, 106, 181, 1);
        // border-bottom: 2px solid #409eff;
        &>span.on {
          color: rgba(252, 189, 86, 1);
        }
      }

      .nav-list {
        margin: 0 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 36px;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.5px;
        cursor: pointer;
      }

      .sub-nav-list {
        border-top: 14px solid transparent;
        position: absolute;
        top: 28px;
        width: 100%;
        cursor: default;
        z-index: 999;
        transform-origin: top;

        div {
          height: 36px;
          text-align: center;
          line-height: 36px;
          font-size: 16px;
          // background: $bg-blue;
          background: $table-body-tr-n-color;
          cursor: pointer;
          box-sizing: content-box;

          &.on {
            color: rgba(252, 189, 86, 1);
          }
        }

        div:first-child {
          padding-top: 10px;
        }

        div:last-child {
          padding-bottom: 10px;
        }

        div:hover {
          background: $table-body-tr-2n-color !important;
        }
      }

      &.left {
        .sub-nav-list {
          left: 12px;
          transform: skew(-61.5deg);
        }
      }

      &.right {
        .sub-nav-list {
          left: -12px;
          transform: skew(61.5deg);
        }
      }
    }

    .user-infor {
      position: absolute;
      top: 0;
      right: 0;
      width: 42px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      cursor: pointer;

      .userIcon {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: $menu-tab-bg-color;
        box-shadow: inset 0 0 10px $menu-tab-shadow;
        border-radius: 50%;
      }

      .userIcon.on {
        color: rgba(252, 189, 86, 1);
      }

      .userDetail {
        width: 160px;
        position: absolute;
        top: 64px;
        right: 4px;
        background: $menu-tab-bg-color;
        border-radius: 8px;
        cursor: default;

        .triangle {
          position: absolute;
          top: -16px;
          right: 20px;
          width: 0px;
          height: 0px;
          border: 8px solid #000;
          border-top-color: transparent;
          border-bottom-color: rgba(3, 82, 102, 0.8);
          border-left-color: transparent;
          border-right-color: transparent;
        }

        .userName {
          margin-top: 4px;
          width: 100%;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          font-weight: 500;
          box-sizing: content-box;
          color: #fff;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        .userBtn {
          margin-bottom: 4px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;
          font-weight: normal;

          &>div {
            margin-top: 4px;
            width: 100px;
            height: 32px;
            line-height: 32px;
            background-color: rgba(159, 165, 255, 0.6);
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .main-container {
    position: relative;
    width: 100%;
    height: 100%;

    .main-content.spread {
      position: absolute;
      top: 60px;
      height: calc(100% - 60px);
      width: 400px;
      z-index: 99;
    }

    .main-content.take-back {
      width: 0px;
    }


    .copyright-box {
      position: fixed;
      bottom: 1%;
      right: 1%;
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
    }

    .copyright-box-shouye {
      position: absolute;
      bottom: calc((100% - maxCountSizeVh(120)) / 3);
      right: calc(400 / 1920 * 100vw);
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
    }
  }
}

.flexible-btn {
  padding: 0 2px;
  position: fixed;
  top: 50%;
  left: 0px;
  // z-index: 11;
  z-index: 99;
  width: 32px;
  height: 64px;
  color: #fff;
  background: $bg-color;
  border-color: $bg-color;
  text-align: center;
  line-height: 32px;
  border-radius: 0 5px 5px 0;
  white-space: inherit !important;
  box-shadow: 1px 0px 4px 1px $bg-color;
  transform: translate(0px, -50%);

  i {
    font-size: 16px;
  }
}

.flexible-btn.spread {
  left: 400px;
}

.flexible-btn.take-back {
  left: 0px;
}
</style>