<template>
  <div class="top-nav">
    <div id="topContainer" class="container">
      <div class="logo">
        <img v-if="JSON.stringify(logoInfoNew)!=='{}'" @click="$router.push('/homePage/index')"
             style="cursor:pointer;margin-right: 71px" class="logoImg"
             :src=" logoInfoNew.home.logoImg || '' "
             alt="">

        <nav class="main-nav" v-if="!isNcmatchHome">
          <ul >
            <li  :class="{ active: $route.path.includes('/index') }">
              <a @click="$router.push('/homePage/index')">首页</a>
            </li>
            <li @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)"><a>产品与服务</a></li>
            <!--            <li :class="{ active: $route.path.includes('/new') }" @mouseleave="sildeOut"-->
            <!--            ><a-->
            <!--            >政策解读</a></li>-->
            <!--            <li :class="{ active: $route.path.includes('/sale') }" @mouseleave="sildeOut"-->
            <!--            ><a-->
            <!--            >促销活动</a></li>-->
            <!--            <li @mouseleave="sildeOut"  @mouseenter="sildeIn(storageData())"><a href="#">解决方案</a></li>-->
            <li :class="{ active: $route.path.includes('/about') }" @mouseleave="sildeOut"
                @click="$router.push('/homePage/about')"><a
            >关于我们</a></li>


          </ul>
        </nav>
      </div>


      <div class="user-area">
        <a @click="$router.push('/product/productHome')" v-if="loginState" class="login-btn">控制台</a>
        <a @click="$router.push({
        path:'/login',
    query:{
              fromPath:'homePage'
    }
        })"
           v-if="!loginState"
           class="login-btn">登录</a>
        <a @click="$router.push('/registrationPage')"
           v-if="!loginState"
           class="register-btn">立即注册</a>
        <!--        <span style="text-decoration: underline; text-decoration-color: #1b5bff" v-if="!showRegisterButton">{{-->
        <!--            username-->
        <!--          }}</span>-->
        <el-dropdown v-if="loginState " @visible-change="handleShow"
                     class="avatar-container right-menu-item hover-effect nick-name-style"
                     style="margin-right: 0"
                     trigger="click">
          <div class="avatar-wrapper">
            <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
            <i
              style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-end;align-items: center">
              <div class="imgUser">{{ nick_name.charAt(0) }}</div>
              {{ nick_name }}
              <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
              <!--            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->

            </i>
            <!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
          </div>
          <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
            <div
              style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
              <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
              <span
                style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:  <span
                ref="contentToCopy">
              {{
                  userId
                }}

            </span>
                <svg
                  @click="copyBtn"
                  class="copy-btn"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  width="12"
                  height="12"
                  style="fill: #1019ab;"
                >
<path
  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
  p-id="1521"></path>
    </svg>
            </span>
            </div>
            <el-divider style="margin: 0!important;"></el-divider>
            <div
              v-if="role.includes('客户')"
              style="padding: 0 18px;  width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">

            <span style="color:#666;display: block;font-size: 14px;"
                  class="moneyNow"><span style="display: block;margin-bottom: 5px">余额</span>{{
                mybalance ? mybalance : initMybalance()
              }} ￥</span>
              <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
                         style="padding: 8px; ">
                充值
              </el-button>
            </div>
            <el-dropdown-item v-if="role.includes('客户')"
                              @click.native="$router.push('/customer/customerInformation')">
              <span style="display: block">个人中心</span>
            </el-dropdown-item>
            <!--           channelManagementShow=true-->
            <!--          v-if="role.includes('客户')"-->
            <!--            <el-dropdown-item v-if="role.includes('客户')"-->
            <!--                              @click.native="channelFirstBtn">-->
            <!--              <span style="display: block">渠道管理</span>-->
            <!--            </el-dropdown-item>-->
            <!--            <el-dropdown-item v-if="role.includes('客户')">-->
            <!--              <span style="display: block" @click="showCode">促销邀请码</span>-->
            <!--            </el-dropdown-item>-->
            <!--            <el-dropdown-item @click.native="edituserPassword()">-->
            <!--              <span style="display: block">修改密码</span>-->
            <!--            </el-dropdown-item>-->

            <!-- <el-dropdown-item @click.native="personalMessage" v-if="org_type == 2 || org_type == 3">
              <span style="display: block">个人信息</span>
            </el-dropdown-item> -->
            <el-dropdown-item @click.native="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
            <!--          <el-dropdown-item v-if="isLocalhost" @click.native="logout1">-->
            <!--            <span style="display: block">退登</span>-->
            <!--          </el-dropdown-item>-->

          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!--    <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">-->
    <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">
      <div class="inPanel">
        <div class="panelLeft">
          <ul class="outUl">
            <li style="cursor: default" class="outLi"
                v-for="item in showPanelData"
                :key="item.firTitle">
              <!--              @mouseenter="sildeItemIn(item)"-->
              <span style="cursor: default!important;" :class="['tilte','activeFir']">
              {{
                  item.firTitle
                }}
            </span>
              <ul class="inUl">
                <li class="inLi" v-for="i in item.secMenu" :key="i.id">
            <span style="position: relative" @mouseenter="sildeSecMenu(i)"
                  :class="['twoMenuStyle',secId===i.id?'activeSec':'']">{{ i.secTitle }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <span class="ge"></span>
        <div
          v-if="secMenuData[0].thrMenu[0].thrTitle!=null&&secMenuData[0].secTitle!==secMenuData[0].thrMenu[0].thrTitle"
          class="panelLeft">
          <ul>
            <li style="font-size: 14px!important;" @mouseenter="sildeThrMenu(thr)" v-for="(thr ,index)  in threeData"
                :key="index">
              {{ thr.thrTitle }}
            </li>
          </ul>
        </div>
        <span
          v-if="secMenuData[0].thrMenu[0].thrTitle!=null&&secMenuData[0].secTitle!==secMenuData[0].thrMenu[0].thrTitle"
          class="ge"></span>
        <div class="panelRight">
          <!--          <span class="subTitle">{{ showPanelRightData[0].thrTitle }}</span>-->
          <ul class="leastMenu inBox">

            <li class="clickItem"
                style="font-size: 14px!important;margin: 8px 0;cursor: pointer"
                v-for="itemR in showPanelRightData[0].value"
                :key="itemR.id"
                @click="clickGo(itemR)"
            >

              {{ itemR.name }} <span v-if="itemR.discount" class="zhe">{{ itemR.discount }}折</span>

            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {computingData, networkData, storageData, testData} from "@/views/homePage/components/topBox/testData";
import {reqNavList, reqNewHomeFestival, reqNewHomeSync} from "@/api/newHome";
import {mapGetters, mapState} from "vuex";
import {getLogoAPI, getUserInfoAPI} from "@/api/login";
import {reqApplyChannel} from "@/api/customer/channel";
import store from "@/store";
import { windows } from 'codemirror/src/util/browser';

export default Vue.extend({
  name: "TopBox",
  data() {
    return {
      isShowKbossCharge: false,
      role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
      userId: sessionStorage.getItem("userId"),
      firId: "",
      secId: "",
      nick_name: "", // 初始化为空字符串
      showTimer: null,
      hideTimer: null,
      showPanelData: [],
      secMenuData: [],
      showPanelRightData: [],
      threeData: [],
      fourData: [],
      product_service: []
    }
  },
  created() {
    if (sessionStorage.getItem('userId')) {
      this.$store.commit('setLoginState', true); // 同步到 Vuex
    }
    !this.showRegisterButton && this.getUserInfo();


    this.init()
  },
  mounted() {
    if (sessionStorage.getItem("username")) {
      this.nick_name = sessionStorage.getItem("username");
    }
    this.$nextTick(() => {
      const topContainer = document.getElementById('topContainer');
      if (topContainer) {
        topContainer.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });

    this.initData()

    // this.showPanelData = this.testData()
    // this.secMenuData = this.testData()[0].secMenu || []
    // this.threeData = this.secMenuData[0].thrMenu || []
    // let res = []
    // res.push(this.secMenuData[0].thrMenu[0])
    // this.showPanelRightData = res || []

  },
  watch: {},
  computed: {
    isNcmatchHome() {
      return window.location.href.includes('ncmatchHome')
    },
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      isShowPanel: (state) => state.product.showHomeNav,
      navIndex: (state) => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginStateVuex: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew,


    }),
    loginState() {
      const userId = sessionStorage.getItem('userId');
      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
    },
    showRegisterButton() {
      const orgType = window.sessionStorage.getItem('org_type');
      const userId = window.sessionStorage.getItem('userId');
      console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
      return orgType !== '2' && orgType !== '3' && userId === null;
    },
    username() {
      return sessionStorage.getItem('username') || '';
    },

  },
  // watch: {
  //   navIndex: {
  //     immediate: true, // Optional: if you want to run the handler immediately on component creation
  //     handler(newVal, oldVal) {
  //       console.log("newValue", newVal)
  //       if (newVal === 0) {
  //         this.secId = '10'
  //       } else if (newVal === 1) {
  //         this.secId = '12'
  //       }
  //       // this.changeData(this.product_service);
  //     }
  //   }
  // },

  methods: {
    init() {
      // let params = {
      //   url_link: this.GetQueryString(window.location.href)
      // }
      let remoteUrl = ''
      if (window.location.href.includes("dev")) {
        remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy'
      } else if (window.location.href.includes("localhost")) {
        remoteUrl = 'http://localhost:9527/'
      } else {
        remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy'
      }


      let params = {
        url_link: window.location.href.split("#")[0]
        // url_link: 'https://www.baidu.com'
      }
      getLogoAPI(params).then((res) => {
        console.log("获取接口触发了")
        // if (res.data.status == true && res.data.data && res.data.data.length) {
        //   this.photosUrl = res.data.data[0];

        if (res.status == true && res.data && res.data.length) {
          console.log("res.data[0].additional_msg", res.data[0].additional_msg)
          // this.$store.commit('setLogoInfo', res.data[0]);
          this.$store.commit('setLogoInfoNew', res.data[0].additional_msg);
          this.isShow = true
          if (res.data[0].orgname == '中关村数智人工智能产业联盟') {
            this.logoUrlOut = 'https://www.ncmatch.cn'
          }

          this.photosUrl = res.data[0];
          if (this.photosUrl.orgname != '业主机构') {
            this.isLogo = true
            this.logoImg = this.photosUrl.logo;

            this.$store.commit('setLogo', this.photosUrl.logo)
            this.logoText = this.photosUrl.orgname;
          } else {
            this.$store.commit('setLogo', "")
          }
        } else {
          this.$message({
            // message: res.msg,
            message: "获取ipc失败~",
            type: "error",
          });
        }
      });
    },
    async logout() {//退出登录
      this.$store.commit('setLoginState', false)
      // logout() {
      // await this.$store.dispatch('auth/removeToken')
      // logoutAPI().then((res) => {
      //   // console.log(res);
      // });

      //获取当前url
      let url = window.location.href;
      //判断url中是否包含domain_name字段
      // if (!url.includes('domain_name')) {
      //   //跳转到https://www.opencomputing.cn/
      //   window.location.href = 'https://www.opencomputing.cn/';
      //
      // } else {
      //   await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`);
      // }

      // this.showRegisterButton = fa

      // if (this.logoutUrl) {
      //   window.location.href = this.logoutUrl
      // } else {mo
      //   window.location.href = 'https://www.opencomputing.cn/';
      // }
      store.commit('tagsView/resetBreadcrumbState');
      sessionStorage.removeItem("auths");
      sessionStorage.removeItem("routes");
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("userId");
      sessionStorage.removeItem("org_type")

      localStorage.removeItem("auths");
      localStorage.removeItem("routes");
      localStorage.removeItem("user");
      localStorage.removeItem("userId");
      localStorage.removeItem("org_type")
      localStorage.removeItem('userId')

      if (!window.location.href.includes('homePage/index')) {
        await this.$router.push(`/homePage/index`);
      }
    },
    edituserPassword() {//修改密码
      this.passwordDialog = true;
    },
    channelFirstBtn() {
      reqApplyChannel({user_id: this.userId}).then(res => {
        if (res.code == "100" || res.code == "210") {
          this.$message.success(res.msg)
        } else if (res.code == "300") {
          this.channelManagementShow = true
        } else if (res.code == "200") {
          this.$router.push('/customer/channelMangement')
        }
      })
    },
    initMybalance() {
      return sessionStorage.getItem('mybalance')
    },
    copyBtn() {//个人信息复制id
      const textToCopy = this.$refs.contentToCopy.innerText;
      navigator.clipboard.writeText(textToCopy).then(() => {
        this.$message.success('复制成功！')

      }).catch((error) => {
        console.error('复制失败', error);
      });

    },
    async getUserInfo() {  //获取个人信息
      getUserInfoAPI({id: this.userId}).then((res) => {
        if (res.status) {
          // this.nick_name = res.data[0].nick_name;
          this.userInfoList = res.data;
          sessionStorage.setItem("orgid", res.data[0].orgid);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handleShow(isShow) {

      let resverNode = document.getElementById('resverIcon')

      if (isShow) {
        if (this.role.includes('客户')) {
          this.$store.dispatch('user/getCustmoersMoney')
        }

        resverNode.style.transform = 'rotate(180deg)'
      } else {
        resverNode.style.transform = 'rotate(0)'
      }
    },
    sildeThrMenu(item) {
      console.log("it", item)
      let res = []
      res.push(item)
      this.showPanelRightData = res
    },
    clickGo(item) {
      this.$store.commit('setShowHomeNav', false)
      console.log("电机的item是", item)
      let userId = sessionStorage.getItem('userId')
      const orgType = window.sessionStorage.getItem('org_type');
      let isKehu = orgType === '2' || orgType === '3';
      console.log("userId", userId)
      if (item.type === '百度云') {
        if (this.loginState) {
          this.$store.commit('setRedirectUrl', item.url)
          localStorage.setItem('redirectUrl', item.url)
          localStorage.setItem('userRescourseUrl', item.listUrl)
          this.$router.push({
            name: 'baiduProductShow',
            params: {
              listUrl: item.listUrl,
              url: item.url
            }
          })
        } else {
          this.$router.push({
            path: "/login",
            query: {
              fromPath: 'homePage',
              type: 'bd',
              listUrl: item.listUrl,
              url: item.url
            }
          })
        }
      } else if (item.type === '阿里云') {
        if (this.loginState) {
          reqNewHomeSync().then(response => {
            if (response.status) {
              reqNewHomeFestival().then(res => {
                if (res.status) {
                  window.open(res.data)
                } else {
                  this.$message.warning(res.msg)
                }
              })

            } else {
              this.$message.warning(response.msg)
            }
          })

        } else {
          this.$router.push({
            path: "/login",
            query: {
              fromPath: 'homePage',
              type: 'ali',
            }
          })
        }
      } else if (item.type === '智算' || item.type === '算力网络') {
        if (item.name === '容器云') {
          if (this.loginState) {
            this.$router.push('/product/productHome/k8s/createK8s')
          } else {
            this.$router.push({
              path: "/login",
              query: {
                fromPath: 'homePage',
                type: 'rqy',
              }
            })
          }
        } else {
          this.$router.push({
            path: '/homePage/detail',
            query: {
              id: item.id,
            }
          })
        }

      } else if (item.name === '灵医智能体') {
        this.$router.push('/homePage/hospital')
      } else if (item.name === '客悦·智能客服') {
        this.$router.push('/homePage/customerService')
      }
    },
    changeData(data) {
      this.showPanelData = data

      // 更安全的初始化方式
      this.secMenuData = data?.[0]?.secMenu || []

      // 初始化threeData和showPanelRightData
      if (this.secMenuData.length > 0) {
        const firstSecMenu = this.secMenuData[0]
        this.threeData = firstSecMenu.thrMenu || []

        // 处理thrTitle为null的情况
        if (this.threeData.length > 0) {
          this.showPanelRightData = this.threeData.map(item => ({
            ...item,
            thrTitle: item.thrTitle || firstSecMenu.secTitle
          }))
        } else {
          this.showPanelRightData = [{
            thrTitle: firstSecMenu.secTitle,
            value: []
          }]
        }
      } else {
        this.threeData = []
        this.showPanelRightData = []
      }
    },
    initData() {
      reqNavList({url_link: window.location.href}).then(res => {
        console.log("res", res.data.product_service)
        if (res.status) {
          this.product_service = this.buildData(res.data.product_service)
          this.changeData(this.product_service)
        }
      }).catch(error => {
        console.error("获取导航数据失败:", error)
        // 可以设置一些默认数据或显示错误信息
      })
    },
    buildData(data) {
      let res = [];
      data.forEach(item => {
        if (item.secMenu && Array.isArray(item.secMenu)) {
          item.secMenu.forEach(secItem => {
            if (secItem.thrMenu && Array.isArray(secItem.thrMenu)) {
              secItem.thrMenu.forEach(thrItem => {
                if (thrItem.value && Array.isArray(thrItem.value)) {
                  thrItem.value.forEach(valueItem => {
                    valueItem.type = secItem.secTitle; // 添加type属性，值为secTitle
                  });
                }
              });
            }
          });
        }
      });
      return data; // 返回修改后的原始数据
      // 或者如果你想返回新的res数组，可以根据需要调整
    },
    sildeSecMenu(item) {
      console.log("获取的item时", item)
      this.secId = item.id

      // 处理thrMenu可能为空或thrTitle为null的情况
      if (!item.thrMenu || item.thrMenu.length === 0) {
        this.threeData = []
        this.showPanelRightData = [{
          thrTitle: item.secTitle,
          value: []
        }]
        return
      }

      // 处理thrTitle为null的情况
      this.threeData = item.thrMenu.map(menu => ({
        ...menu,
        thrTitle: menu.thrTitle || item.secTitle
      }))

      this.showPanelRightData = this.threeData
    },
    networkData() {
      return networkData
    },
    storageData() {
      return storageData
    },
    testData() {
      return testData
    },
    sildeItemIn(item) {
      this.firId = item.id
      this.secId = item.secMenu[0].id
      console.log("获取的item时", item)
      this.secMenuData = item.secMenu || []
      this.showPanelRightData = this.secMenuData[0].thrMenu || []


    },
    computingData() {
      return computingData
    },
    sildeIn(item) {
      console.log("sildeIn", item)
      this.changeData(item)
      // this.showPanelData = item
      // this.showPanelRightData = item[0].subMenu || []
      if (this.hideTimer) {
        clearTimeout(this.hideTimer)
      }
      // 延时显示面板，避免鼠标快速移动时面板闪烁
      this.showTimer = setTimeout(() => {
        // this.isShowPanel = true
        this.$store.commit('setShowHomeNav', true)
      }, 100)
    },
    sildeOut() {
      // return
      if (this.showTimer) {
        clearTimeout(this.showTimer)
      }
      // 延时隐藏面板，给鼠标移动到面板上的时间
      this.hideTimer = setTimeout(() => {
        this.$store.commit('setShowHomeNav', false)
      }, 200)
    },
    keepPanel() {
      // 鼠标进入面板时取消隐藏
      if (this.hideTimer) {
        clearTimeout(this.hideTimer)
      }
    }
  },
})
</script>

<style scoped lang="scss">
.top-nav {
  font-size: 18px !important;

  * {
    font-size: 18px !important;
  }

  font-weight: 500; /* 使用数字值代替bold更精确 */
  color: #222F60 !important;
  position: relative;
  height: 84px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .container {
    font-size: 18px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
  }

  .logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .main-nav {

    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        height: 100%;
        padding: 0 15px;
        position: relative;

        a {
          text-decoration: none;
          font-size: 14px;
          padding: 5px 0;
          transition: all 0.3s;

          &:hover {
            color: #1E6FFF;
          }
        }

        &.active a {
          color: #1E6FFF;
          font-weight: bold;
        }

        //&.active:after {
        //  content: '';
        //  position: absolute;
        //  bottom: -10px;
        //  left: 0;
        //  width: 100%;
        //  height: 2px;
        //  background: #1E6FFF;
        //}
      }
    }
  }

  .user-area {
    display: flex;
    align-items: center;

    a {
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      text-decoration: none;
      margin-left: 10px;
      transition: all 0.3s;
    }

    .login-btn {
      color: #333;

      &:hover {
        color: #1E6FFF;
      }
    }

    .register-btn {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      border-radius: 12px 12px 12px 12px;
      color: white;

      &:hover {
        opacity: 0.9;
      }
    }
  }
}

.panel {

  .inPanel {
    padding: 20px;
    border-radius: 8px;

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: calc(100vh - 100px);
    background: #fff;
    margin: 10px 20px 20px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
  }

  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  align-items: center;
  color: #091221;
  position: absolute;
  top: 84px;
  left: 0;
  width: calc(100% - 450px);
  margin-left: 250px;
  z-index: 999;
  overflow-y: auto;

  .panelLeft {
    height: 100% !important;
    justify-content: stretch;
    font-size: 14px !important;
    width: 200px;
    overflow-y: auto;

    li {
      padding: 10px;
      //cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        cursor: pointer;
        color: blue;
      }
    }
  }

  .panelRight {
    flex: 1;
    padding-left: 20px;
    overflow-y: auto;
  }
}

.activeFir {
  background-image: linear-gradient(90deg, rgba(210, 228, 253, .6), hsla(0, 0%, 100%, .6));
  border-radius: 4px;
  cursor: pointer;
}

.twoMenuStyle {
  cursor: pointer;
  position: relative;
  color: #091221;
  font-size: 14px !important;

  &::after {
    transition: all .3s ease-in-out;
    content: '';
    width: 0;
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 2px;
    background: #091221;
    border-radius: 1px;
  }
}

.activeSec {
  font-weight: 600;

  &::after {
    width: 100% !important;
  }
}

.subTitle {
  font-size: 16px;
  color: #2468f2;
  font-weight: 600;
  margin: 5px 0;
  display: inline-block;
}

.leastMenu {

  overflow-y: auto;

  .inBox {
    li {
      font-size: 14px !important;
      margin: 6px 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;

      &:hover {
        cursor: pointer;
        color: #1E6FFF !important;
      }
    }
  }
}

.ge {
  background-image: url('https://bce.bdstatic.com/portal-cloud-server/images/nav/dropdown_bar_middle.png');
  box-sizing: border-box;
  display: block;
  height: 100%;
  width: 20px;
  margin: 0 10px;
}

.zhe {
  font-size: 12px !important;
  border-radius: 4px;
  padding: 1px 2px;
  color: red;
  display: inline-block;
  margin-left: 3px;
}

.outUl {
  .outLi {
    padding: 10px;

    .tilte {
      width: 100%;
      display: inline-block;
      padding: 5px;
    }

    .inUl {
      .inLi {
        padding: 10px 10px 10px 5px;
      }
    }
  }
}

.logoImg {
  width: 148px;
  height: 48px;
}

.clickItem {
  //margin: 30px 0 !important;
  margin-bottom: 15px !important;

  &:hover {
    color: #1E6FFF !important;
  }
}

.imgUser {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #081020;
  color: white;
}
</style>
