dy-admin-manager/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
    <router-link
      key="collapse"
      style="display: flex; align-items: center; padding-left: 30px"
      to="/"
    >
      <img
        v-if="tenantLogo"
        :src="tenantLogo"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <img
        v-else
        src="@/assets/images/base/smallLogo.png"
        class="sidebar-logo"
        style="width: 36px; height: 36px"
      />
      <span class="tenantName" :title="tenantName">{{ tenantName }}</span>
    </router-link>
    <!-- <breadcrumb class="breadcrumb-container" /> -->
    <div class="indexlayout-top-menu">
      <!-- :class="{'active': getTopMenuActive === route.path}" -->
      <!-- el-scrollbar -->
      <el-scrollbar
        class="horizontal-scrollbar"
        style="overflow: hidden; height: 100%"
      >
        <template v-for="route in permission_routes">
          <app-link
            v-if="!route.hidden"
            :key="route.id"
            :to="route.path"
            class="indexlayout-top-menu-li"
            :class="{ active: getTopMenuActive === route.path }"
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 76px;
              "
            >
              <i :class="[route.meta.icon, 'menuSize']" />
              <span style="line-height: 1.2">{{ route.meta.title }}</span>
            </div>
          </app-link>
        </template>
      </el-scrollbar>
    </div>
    <div class="right-menu">
      <el-tooltip
        v-if="tenantForm.tenantId == 1"
        style="display: flex"
        effect="dark"
        content="点击进入商城系统"
        placement="bottom"
      >
        <div class="msginfo right-position" @click="gotoMall">
          <i class="icon_admin_mall operationSize" />
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="tenantForm.tenantId == 1"
        style="display: flex"
        effect="dark"
        content="点击进入OA系统"
        placement="bottom"
      >
        <div class="msginfo right-position" @click="gotoOa">
          <i class="icon_admin_oa operationSize" />
        </div>
      </el-tooltip>

      <!-- <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
        v-if="tenantForm.tenantId == 1"
      >
        <div class="popover-container" style="text-align: center">OA审批</div>

        <div
          class="msginfo right-position"
          @click="gotoOa"
          slot="reference"
        >
          <i class="icon_admin_oa operationSize"></i>
        </div>
      </el-popover> -->
      <!-- <el-popover
        v-if="isShowIns"
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">操作手册</div>

        <div
          class="msginfo right-position"
          @click="openIns"
          slot="reference"
        >
          <i class="icon_admin_book operationSize"></i>
        </div>
      </el-popover> -->

      <!-- <el-popover
        placement="bottom"
        trigger="hover"
        style="display: flex;"
      >
        <div class="popover-container" style="text-align: center">系统日志</div>
        <div
          class="msginfo right-position"
          v-permission="'/journal'"
          @click="gotoRecode"
          slot="reference"
        >
          <i class="icon_admin_message operationSize"></i>
        </div>
      </el-popover> -->
      <el-tooltip
        style="display: flex"
        effect="dark"
        content="点击查看系统日志"
        placement="bottom"
      >
        <div
          v-permission="'/journal'"
          class="msginfo right-position"
          @click="gotoRecode"
        >
          <i class="icon_admin_message operationSize" />
        </div>
      </el-tooltip>
      <el-tooltip
        style="display: flex"
        effect="dark"
        content="点击打开聊天"
        placement="bottom"
      >
        <el-badge :is-dot="noReadNum > 0 ? true : false" class="item">
          <div class="msginfo right-position" @click="gotoChart">
            <i class="icon_admin_chart operationSize" />
          </div>
        </el-badge>
      </el-tooltip>
      <div v-if="organNameList && organNameList.length > 0" class="left-menu">
        <el-popover
          placement="top-start"
          width="300"
          trigger="hover"
          style="display: flex"
        >
          <div class="popover-container">
            <el-tag
              v-for="item in organNameList"
              :key="item"
              class="navbar_tag"
              type="info"
            >
              {{ item }}
            </el-tag>
          </div>
          <span slot="reference" class="msginfo right-position">
            <i class="icon_admin_orgin operationSize" />
          </span>
        </el-popover>
      </div>
      <el-dropdown
        class="avatar-container"
        trigger="hover"
        style="margin-left: 12px"
      >
        <div class="avatar-wrapper">
          <img
            v-if="$store.getters.avatar"
            :src="$store.getters.avatar"
            class="user-avatar"
          />
          <img
            v-else
            class="user-avatar"
            src="@/assets/images/base/placehorder-icon.png"
          />
          <span>{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <div class="drop_userInfo">
            <div class="avatar-wrapper">
              <img
                v-if="$store.getters.avatar"
                :src="$store.getters.avatar"
                class="user-avatar"
              />
              <img
                v-else
                class="user-avatar"
                src="@/assets/images/base/placehorder-icon.png"
              />
              <div>
                <span>{{ name }}</span>
                <p class="positionName" :title="positionName">
                  {{ positionName }}
                </p>
              </div>
            </div>
          </div>
          <div v-if="!tenantStatus" class="tenantService">
            <div class="serviceName">
              <p class="name">
                {{ tenantInfo.serverName }}
              </p>
              <div
                v-if="
                  $helpers.permission('/ productService') &&
                    $helpers.permission('/serviceRenew')
                "
                class="serviceRenew"
                @click="onRenew"
              >
                立即续费
              </div>
            </div>
            <div v-if="tenantInfo.validRemaining > 0" class="serviceTime">
              剩余{{ tenantInfo.validRemaining }}天（{{
                tenantInfo.expiryDateEnd
              }}）到期
            </div>
            <div v-else class="serviceTime">
              已过期
            </div>
          </div>
          <!-- divided -->
          <el-dropdown-item v-if="tenantStatus" @click.native="onTenantChange">
            <i class="icon_admin_tenant userSize" />
            <span class="dropdown-text">{{ tenantName }}</span>
            <i style="margin-left: 3px" class="icon_admin_change userSize" />
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="
              () => {
                nocloseable = false;
                resetPassWord();
              }
            "
          >
            <i class="icon_admin_edit userSize" />
            <span class="dropdown-text">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item
            v-if="$helpers.permission('employee/simpleUpdate')"
            @click.native="accountStatus = true"
          >
            <i class="icon_admin_account userSize" />
            <span class="dropdown-text">账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item
            style="border-top: 1px solid #e5e5e5"
            @click.native="logout"
          >
            <i class="icon_admin_exit userSize" />
            <span class="dropdown-text">安全退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      width="500px"
      append-to-body
      :visible.sync="resetVisible"
      :show-close="!nocloseable"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="pwdForm"
        :model="resetForm"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="手机号" prop="phone">
          <div>{{ this.$store.getters.phone }}</div>
        </el-form-item>
        <el-form-item
          label="新密码"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur'
            }
          ]"
          prop="password"
        >
          <el-input
            v-model.trim="resetForm.password"
            type="password"
            style="width: 180px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="再次输入"
          :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {
              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
              message: '密码为6-20位数字和字母组合',
              trigger: 'blur'
            }
          ]"
          prop="password2"
        >
          <el-input
            v-model.trim="resetForm.password2"
            type="password"
            style="width: 180px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="验证码"
          :rules="[
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]"
          prop="authCode"
          style=""
        >
          <el-input
            v-model.trim="resetForm.authCode"
            style="width: 180px"
            autocomplete="off"
            :maxlength="6"
          />
          <el-button :disabled="isDisable" @click="getCode">
            {{ btnName }}
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!nocloseable" @click="resetVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitResetPassWord">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="请输入图形验证码"
      width="360px"
      append-to-body
      :visible.sync="smsCodeVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="smsForm"
        :model="smsCodeForm"
        label-position="right"
        label-width="100px"
      >
        <el-row :gutter="12">
          <el-col :span="16">
            <el-form-item
              label-width="0"
              :rules="[
                { required: true, message: '图形验证码', trigger: 'blur' }
              ]"
              prop="code"
            >
              <el-input
                v-model="smsCodeForm.code"
                placeholder="请输入验证码"
                :maxlength="4"
                auto-complete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div @click="updateIdentifyingCode">
              <img :src="identifyingCode" class="smsImg" />
            </div>

            <span class="imgChange" @click="updateIdentifyingCode">
              看不清？换一换
            </span>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSendSms">
          取 消
        </el-button>
        <el-button type="primary" @click="submitSendSms">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="tenantVisible"
      title="切换机构"
      width="500px"
      append-to-body
      :visible.sync="tenantVisible"
    >
      <el-form
        ref="tenantForm"
        :model="tenantForm"
        label-position="right"
        label-width="100px"
      >
        <el-form-item
          label="选择机构"
          :rules="[
            { required: true, message: '请选择机构', trigger: 'change' }
          ]"
          prop="tenantId"
        >
          <el-select
            v-model.trim="tenantForm.tenantId"
            filterable
            placeholder="请选择机构"
            clearable
            style="width: 100% !important"
          >
            <el-option
              v-for="(item, index) in tenantList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tenantVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitTenant">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="accountStatus"
      title="账号设置"
      append-to-body
      :visible.sync="accountStatus"
      width="650px"
    >
      <user-model @close="accountStatus = false" />
    </el-dialog>
    <!-- <portal-target name="AppMain" ref="target">
      <instructions ref="instructions" @checkShow="checkShow" />
    </portal-target> -->

    <el-dialog
      :visible.sync="authVisible"
      append-to-body
      width="699px"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      class="theAuthDialog"
    >
      <TheAuth @close="authVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
import Logo from "./Sidebar/Logo";
import TheAuth from "@/components/TheAuth/index.vue";
import { mapGetters } from "vuex";
import { resetPassword } from "@/api/buildTeam";
import AppLink from "./Sidebar/Link";
import { getBelongTopMenuPath } from "@/utils/permission";
import { validOaUrl, validMallUrl } from "@/utils/validate";
import { tenantInfoQueryPage } from "@/views/organManager/api";
import { sendSmsCode } from "./api";
import axios from "axios";
import userModel from "./modal/userModal";
import { eventGlobal } from "@/utils";
export default {
  components: {
    AppLink,
    userModel,
    TheAuth
    // instructions,
    // Breadcrumb,
    // Hamburger
  },
  data() {
    let tenantConfig = sessionStorage.getItem("tenantConfig");
    tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
    return {
      authVisible: false,
      accountStatus: false,
      organName: this.$store.getters.organName,
      organNameList: [],
      resetVisible: false,
      resetForm: {
        phone: "",
        authCode: "",
        password: "",
        password2: ""
      },
      smsCodeForm: {
        code: ""
      },
      identifyingCode: "",
      smsCodeVisible: false,
      isDisable: false, // 是否允许发送验证码
      timerCount: 60,
      btnName: "获取验证码",
      isShowIns: false,
      tenantVisible: false,
      tenantName: tenantConfig.tenantName || null,
      tenantForm: {
        tenantId: Number(tenantConfig.tenantId) || null
      },
      tenantList: [],
      tenantLogo: tenantConfig.tenantLogo || null,
      noReadNum: 0,
      nocloseable: false
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "positionName",
      "permission_routes",
      "tenantInfo"
    ]),
    getTopMenuActive() {
      let route = this.$route;
      //  (route, getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    },
    tenantStatus() {
      // 判断是否是平台账号 true 是
      const baseTenantId = sessionStorage.getItem("baseTenantId");
      return baseTenantId < 0 ? true : false;
    }
  },
  watch: {
    resetVisible(val) {
      if (!val) {
        this.resetForm = {
          phone: "",
          authCode: "",
          password: "",
          password2: ""
        };
      }
    }
  },
  mounted() {
    if (this.$store.getters.pwdflag) {
      // this.$confirm("当前账号存在安全风险是否修改密码", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //   })
      //   .catch(() => {});
      this.nocloseable = true;
      this.resetPassWord();
    }
    this.$bus.$on("getShowNums", obj => {
      this.noReadNum = obj;
    });

    // 监听证书提示
    eventGlobal.on("auth-not-installed", () => {
      this.authVisible = true;
    });
    // 手动加入
    this.toggleSideBar();
    this.organNameList = this.organName ? this.organName.split(",") : [];
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      localStorage.removeItem("firstMenuUrl");
      // await this.$store.dispatch("permission/removePermission")
      this.$router.push(`/login`);
      window.location.reload();
    },
    async onTenantChange() {
      try {
        const res = await tenantInfoQueryPage({
          page: 1,
          rows: 999,
          payState: 1,
          state: 1
        });
        this.tenantList = res.data?.rows || [];
        this.tenantVisible = true;
      } catch (e) {}
    },
    onRenew() {
      this.$router.push("/productService");
    },
    submitTenant() {
      this.$refs["tenantForm"].validate(res => {
        if (res) {
          const tenantForm = this.tenantForm;
          let tenantName = null;
          let tenantLogo = null;
          this.tenantList.forEach(item => {
            if (item.id == tenantForm.tenantId) {
              tenantName = item.name;
              tenantLogo = item.logo;
              this.tenantName = item.name;
              this.tenantLogo = item.logo;
            }
          });
          let tenantConfig = sessionStorage.getItem("tenantConfig");
          tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
          if (tenantConfig.tenantId != tenantForm.tenantId) {
            //判断是否是当前路由
            // if(url == this.$route.path) {
            tenantConfig.tenantId = tenantForm.tenantId;
            tenantConfig.tenantName = tenantName;
            tenantConfig.tenantLogo = tenantLogo;
            sessionStorage.setItem(
              "tenantConfig",
              JSON.stringify(tenantConfig)
            );
            this.$router.push({
              path: "/redirect",
              query: this.$route.fullPath
            });
            // } else {
            //     this.$router.push({
            //     path: url
            //     })
            // }

            // 需要重置数据
            this.$store.commit("commit_branchs", []);
            this.$store.commit("commit_subjects", []);
            this.$store.commit("commit_teachers", []);
            this.$store.commit("commit_schools", []);
            this.$store.commit("commit_vip_group_category", []);
            this.$store.commit("commit_educations", []);
            this.$store.commit("commit_technician", []);
            this.$store.commit("commit_roles", []);
            this.$store.commit("commit_employs", []);
            // 移除
            localStorage.removeItem("searchs");
          }
        }
      });
    },
    gotoRecode() {
      this.$router.push("/journal/journal");
    },
    resetPassWord() {
      this.resetVisible = true;
    },
    submitResetPassWord() {
      if (this.resetForm.password !== this.resetForm.password2) {
        this.$message.error("两次密码必须相同");
        return;
      }
      this.$refs["pwdForm"].validate(res => {
        if (res) {
          // 发请求
          resetPassword({
            authCode: this.resetForm.authCode,
            mobile: this.$store.getters.phone,
            newPassword: this.resetForm.password
          }).then(res => {
            if (res.code == 200) {
              // 修改成功
              this.$message.success("修改成功");
              this.logout();
            }
          });
        }
      });
    },
    getCode() {
      // 获取验证码
      if (!this.$store.getters.phone) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      // if (!this.isDisable) {
      //   this.isDisable = true;
      //   // 发请求成功后开启定时器
      //   // 发送验证码
      //   axios
      //     .post(
      //       "/api-web/code/sendSms",
      //       qs.stringify({ mobile: this.$store.getters.phone })
      //     )
      //     .then(res => {
      //       if (res.data.code == 200) {
      //         let timer = setInterval(res => {
      //           if (this.timerCount <= 0) {
      //             clearInterval(timer);
      //             this.isDisable = false;
      //             this.btnName = "获取验证码";
      //             this.timerCount = 60;
      //           } else {
      //             this.timerCount--;
      //             this.btnName = `${this.timerCount}s后重试`;
      //           }
      //         }, 1000);
      //       }
      //     });
      // }
      this.smsCodeForm.code = "";
      this.updateIdentifyingCode();
      this.smsCodeVisible = true;
    },
    openIns() {
      // this.$refs.instructions.showInstructions();
    },
    checkShow(val) {
      this.isShowIns = val;
    },
    gotoOa() {
      // console.log(validOaUrl())
      // const Token = Cookies.get('cross-Token')
      // console.log(Token, validOaUrl().split('//')[1])
      // Cookies.set('Admin-Token', Token, { domain: `.${validOaUrl().split('//')[1]}`, path: '/' })
      // document.cookie = `Adminoken=${Token};domain=oadev.dayaedu.com;`
      window.open(validOaUrl());
    },
    gotoMall() {
      window.open(validMallUrl());
    },
    gotoChart() {
      // 初始化未读数
      this.$bus.$emit("openChart", true);
    },
    updateIdentifyingCode() {
      let origin = window.location.origin;
      this.identifyingCode = `${origin}/api-web/code/getLoginImage?phone=${
        this.$store.getters.phone
      }&toen=${new Date().getTime()}`;
    },
    cancelSendSms() {
      this.smsCodeVisible = false;
      this.smsCodeForm.code = "";
    },
    // 发送验证码
    submitSendSms() {
      this.$refs["smsForm"].validate(async res => {
        if (!res) return;
        try {
          await sendSmsCode({
            code: this.smsCodeForm.code,
            mobile: this.$store.getters.phone
          });

          let timer = setInterval(res => {
            if (this.timerCount <= 0) {
              clearInterval(timer);
              this.isDisable = false;
              this.btnName = "获取验证码";
              this.timerCount = 60;
            } else {
              this.timerCount--;
              this.btnName = `${this.timerCount}s后重试`;
            }
          }, 1000);
          this.$message.success("验证码已发送");
          this.smsCodeVisible = false;
        } catch (e) {
          console.log(e);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar_tag {
  margin: 0 5px 8px;
}
::v-deep .el-scrollbar__thumb {
  background-color: rgba(255, 255, 255, 0.3);
  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}
.indexlayout-top-menu {
  padding-left: 57px;
  height: 76px;
  line-height: 76px;
  flex: 1;
  display: flex;
  overflow: hidden;
  /* overflow-x: auto; */
  .indexlayout-top-menu-li {
    display: table-cell;
    padding: 0 5px;
    height: 76px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 16px;
    transition: all 0.3s ease;
    span {
      // display: block;
      transition: all 0.3s ease;
      // padding: 10px 20px;
      padding: 8px 20px 3px;
    }
    &:hover,
    &.active {
      span {
        font-weight: 500;
        //   border-radius: 6px;
      }
    }
    // &.active span {
    //   font-weight: bold;
    // }
  }
  .breadcrumb {
    line-height: 76px;
    margin-left: 10px;
    .el-breadcrumb__item {
      display: inline-block;
      float: none;
    }
  }
}
.popover-container {
  max-height: 350px;
  overflow-y: scroll;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 76px;
  overflow: hidden;
  position: relative;
  z-index: 2000;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 18px;
    line-height: 76px;
    margin: 0 0 0 30px;
    display: inline-block;
  }
  .hamburger-container {
    line-height: 76px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }
  .left-menu {
    line-height: 76px;
    // padding-right: 22px;
    font-size: 16px;
    .topIcon {
      width: 20px;
      height: 25px;
    }
  }
  .right-menu {
    min-width: 154px;
    float: right;
    height: 100%;
    line-height: 76px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &:focus {
      outline: none;
    }
    .msginfo.ins {
      img {
        width: 18px;
        height: 23px;
      }
    }
    .msginfo {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 12px;
      position: relative;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
      .active {
        position: absolute;
        width: 7px;
        height: 7px;
        background-color: #f97215;
        border-radius: 50%;
        top: 20px;
        right: -4px;
      }
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 14px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      height: 76px;
      margin-right: 42px;
      cursor: pointer;

      .avatar-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span {
          margin-left: 8px;
          font-size: 14px;
          font-weight: 500;
          // color: rgba(68, 68, 68, 1);
          color: #fff;
        }

        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border: 2px solid #f0f2f5;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 14px;
        }
      }
    }
  }
}
.user-dropdown {
  width: 258px;
  padding-top: 0 !important;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.05);
  ::v-deep .popper__arrow {
    border-bottom-color: var(--color-primary) !important;
    &::after {
      border-bottom-color: var(--color-primary) !important;
    }
  }
  .drop_userInfo {
    background-color: var(--color-primary);
    height: 64px;
    color: #fff;
    padding: 0 12px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      align-items: center;
      background: url("../../assets/images/user_tips.png") no-repeat right
        center;
      background-size: 45%;
      width: 100%;
      .user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .tenantService {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 17px 12px;
    .serviceName {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-primary);
        line-height: 25px;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .serviceRenew {
        width: 63px;
        height: 22px;
        background: linear-gradient(270deg, #ffc65e 0%, #ffe8a6 100%);
        border-radius: 11px;
        line-height: 22px;
        font-size: 11px;
        font-weight: 400;
        color: #981e13;
        text-align: center;
        cursor: pointer;
      }
    }
    .serviceTime {
      margin-top: 15px;
      font-size: 13px;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
    }
  }
  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    // margin: 3px 17px;
    padding: 7px 17px;
  }
  .dropdown-text {
    display: block;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.right-position {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
}
.sidebar-logo {
  margin-right: 8px;
}
.tenantName {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 28px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.positionName {
  padding-top: 5px;
  font-size: 12px;
  width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.el-badge__content.is-fixed.is-dot {
  top: 28px !important;
}

.smsImg {
  width: 100%;
  height: 36px;
  cursor: pointer;
}

.imgChange {
  cursor: pointer;
  display: block;
  text-align: center;
  font-size: 12px;
  color: #198cfe;
  line-height: 17px;
}

.theAuthDialog {
  /deep/ .el-dialog {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }
  /deep/ .el-dialog__header {
    display: none;
  }
  /deep/ .el-dialog__body {
    padding: 0;
  }
}
</style>