cpdm_manage/src/views/manage/manageMain.vue

<template>
  <el-container style="height: 100vh; overflow: hidden">
    <el-aside style="width: auto; overflow: hidden">
      <el-menu
        :unique-opened="true"
        ref="menu"
        :collapse-transition="false"
        class="el-menu-vertical-demo shadow-menu aside-menu"
        :router="true"
        :default-active="active"
        :collapse="isCollapse"
        text-color="#333"
        active-text-color="#fff"
        @select="selectMenu"
      >
        <!-- <img  src="../../assets/img/commons/jhTop.png" /> -->
        <!-- <img
          v-show="!isCollapse"
          style="
            height: 40px;
            width: auto;
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
            margin-bottom: 20px;
          "
          src="../../assets/img/commons/jhTop1.png"
        /> -->
        <!-- <p class="aac">郑大计智</p>
        <p class="aac">心理测评系统</p> -->
        <div
          class="aac"
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <div>郑大计智</div>
          <div>心理测评系统</div>
        </div>
        <!-- <p class="aab"></p> -->
        <!-- <img
          v-show="!isCollapse"
          style="
            height: 40px;
            width: auto;
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
            margin-bottom: 20px;
          "
          src="../../assets/img/commons/jhTop1.png"
        /> -->
        <img
          v-show="isCollapse"
          style="menu_top_suo"
          src="../../assets/img/commons/jhTopSuo.png"
        />

        <div v-for="item in menuList" :key="item.id">
          <el-menu-item :index="item.path" v-if="!item.hasOwnProperty('child')"
            ><div class="menu_icon_mm">
              <img :src="item.icon" class="menu_icon_img" /><span>{{ item.name }}</span>
            </div></el-menu-item
          >
          <div v-if="item.hasOwnProperty('child')">
            <!-- v-for="item in menuList"
              :key="item.id"
              :index="item.path"
              v-show="item.showItem" -->

            <el-submenu :index="item.path">
              <template slot="title">
                <div class="menu_icon_mm">
                  <img :src="item.icon" class="menu_icon_img" />
                  <span class="menu_name">{{ item.name }}</span>
                </div>
              </template>
              <el-menu-item-group style="background-color: #000000">
                <el-menu-item v-for="el in item.child" :key="el.id" :index="el.path">
                  <span class="menu_sub_tt"
                    ><span class="menu_sub_t1">&nbsp;</span>{{ el.name }}</span
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </div>

        <!-- <el-menu-item index="1">用户管理</el-menu-item> -->
      </el-menu>
    </el-aside>
    <!-- style="height:100vh; display: flex; flex-direction: column; border-top-left-radius: 40px; border-bottom-left-radius: 40px;background-color:#000000" -->
    <el-container class="el-container-com">
      <el-header
        class="shadow-menu"
        style="
          background-color: #ffffff;
          border-top-left-radius: 40px;
          background-color: #f7f7f7;
        "
      >
        <el-row class="admin-header-content">
          <el-col :span="12">
            <el-row>
              <el-col :span="10">
                <div class="main_top_1">
                  <div class="blue">&nbsp;&nbsp;</div>
                  <el-breadcrumb class="admin-breadcrumb" separator=">>">
                    <el-breadcrumb-item>{{ crumbParent }}</el-breadcrumb-item>
                    <el-breadcrumb-item
                      style="font-weight: 700"
                      v-if="crumbChild && crumbChild != null"
                      >{{ crumbChild }}</el-breadcrumb-item
                    >
                  </el-breadcrumb>
                </div>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="12" class="just-right">
            <div style="display: flex; align-items: center; margin-right: 20px">
            <img v-show="isFullscreen"  src="../../assets/img/home/suo.png" alt="" style='cursor:pointer;width:20px' @click='fullScreenFun'>
            <img v-show="!isFullscreen" src="../../assets/img/home/quan.png" alt="" style='cursor:pointer;width:20px' @click='fullScreenFun'>
            </div>
            <div class="user_out" @mouseenter="mouseenterFun" @mouseleave="mouseLeaveFun">
              <img class="user_out_img" src="../../assets/menu/userAdmin.png" />
              <div class="user_out_des">{{ userInfo.userName }}老师</div>
              <div v-if="isShowMenu" class="user_out_ab">
                <div class="exit" @click="escape()">退出</div>
                <div class="update_pass" @click="changePwd()">修改密码</div>
              </div>
            </div>

            <!-- <vue-qr
              v-show="false"
              :ref="userInfo.name + '-' + userInfo.userNumber"
              :text="urlJump + userInfo.invitationCode"
              :size="500"
              :width="1"
            ></vue-qr> -->
          </el-col>
        </el-row>
      </el-header>
      <el-container style="flex: 1; overflow: auto">
        <el-main style="background-color: #f5f5f5; display: flex">
          <div
            class="el-main-inner"
            :style="{
              backgroundColor:
                isTmpPath == '/manage/generalSituation' ? '#F7F7F7' : '#ffffff',
            }"
          >
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>

    <!---lxh-修改密码-->
    <div class="dig_update">
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="40%"
        style="border-radius: 40px"
      >
        <div slot="title">
          <el-form
            :model="ruleForm"
            :rules="rules"
            :inline="true"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <p class="dig_title">修改密码</p>
            <div slot=""></div>
            <div slot="footer"></div>
            <el-form-item label="请输入旧密码" prop="oldpass">
              <el-input
                type="password"
                v-model="ruleForm.oldpass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="dig_button">
              <el-button type="info" round @click="resetForm('ruleForm')">重置</el-button>
              <el-button type="success" round @click="submitForm('ruleForm')"
                >提交</el-button
              >
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </el-container>
</template>
<script>
import md5 from "md5";
import vueQr from "vue-qr";
import { mapGetters, mapActions } from "vuex";
import { oSessionStorage } from "@/utils/utils";
import register from "@/components/Register";
import screenfull from "screenfull";
export default {
  name: "manageMain",
  components: {
    vueQr,
  },
  computed: {
    // ...mapGetters(['sacleListName']),
    // ...mapGetters(['menuActive']),
  },
  data() {
    var validatePassOld = (rule, value, callback) => {
      // if (value === "") {
      //   callback(new Error("请输入密码"));
      // } else {
      //   let juPassword = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/;
      //   if (!juPassword.test(this.ruleForm.oldpass)) {
      //     callback(new Error("格式为数字+英文字母+特殊字符(~!@#$%^&*)8-16位"));
      //   } else {
      //     callback();
      //   }
      // }
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error("密码长度需在6~18位之间"));
        } else {
          this.$refs.ruleForm.validateField("pass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      // if (value === "") {
      //   callback(new Error("请输入密码"));
      // } else {
      //   let juPassword = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,16}$/;
      //   if (!juPassword.test(this.ruleForm.pass)) {
      //     callback(new Error("格式为数字+英文字母+特殊字符(~!@#$%^&*)8-16位"));
      //   } else {
      //     callback();
      //   }
      // }
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error("密码长度需在6~18位之间"));
        } else {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else if (value == this.ruleForm.oldpass) {
        callback(new Error("旧密码和新密码相同!"));
      } else {
        callback();
      }
    };

    return {
      //是否全屏的标志
      isFullscreen:false,
      isTmpPath: "",
      //是否显示退出菜单
      isShowMenu: false,
      userInfo: {}, //用户信息
      dialogVisible: false, //弹出窗是否可见
      size: "small",
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      activeIndex: "10",
      activeIndex2: "1",
      isCollapse: false,
      userType: "",
      menuList: [
        {
          id: "0",
          name: "用户管理",
          icon: require("../../assets/menu/user.png"),
          showItem: true,
          path: "/manage/userManage",
        },
        {
          id: "1",
          name: "管理员管理",
          icon: require("../../assets/menu/yuan.png"),
          showItem: true,
          path: "/manage/principal",
        },
        {
          id: "2",
          name: "组织架构",
          icon: require("../../assets/menu/zu.png"),
          showItem: true,
          path: "/manage/organizational",
        },
        {
          id: "3",
          name: "测试计划",
          icon: require("../../assets/menu/plan.png"),
          showItem: true,
          path: "/manage/testPlan",
        },
        {
          id: "4",
          name: "报告分析",
          icon: require("../../assets/menu/asy.png"),
          showItem: true,
          path: "/manage/recordListAll",
          child: [
            {
              id: "41",
              name: "用户报告",
              parentName: "报告分析",
              icon: "el-icon-user-solid",
              path: "/manage/userReport",
              showItem: true,
            },
            {
              id: "42",
              name: "计划报告",
              parentName: "报告分析",
              icon: "el-icon-user-solid",
              path: "/manage/planReport",
              showItem: true,
            },
            {
              id: "43",
              name: "对比分析",
              parentName: "报告分析",
              icon: "el-icon-user-solid",
              path: "/manage/comparaAnalysis",
              showItem: true,
            },
          ],
        },
      ],
      //面包屑页签
      crumbParent: "首页",
      crumbChild: null,
      //修改密码
      ruleForm: {
        pass: "",
        checkPass: "",
        oldpass: "",
      },
      upPass: {
        institutionNo: "",
        password: "",
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
        oldpass: [{ required: true, validator: validatePassOld, trigger: "blur" }],
      },
      ifAdmin: false,
      ifSupAdmin: false,
      active: "/manage/adminHome",
      urlJump: "http://152.136.24.101:8997?invitationCode=", //二维码跳转链接
    };
  },
  created() {
    if (oSessionStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
      this.userType = this.userInfo.roleType;
      //假如当前的用户是管理员
      if (this.userType == "5") {
        this.menuList = [
          {
            id: "10",
            name: "概况",
            icon: require("../../assets/menu/user.png"),
            showItem: true,
            path: "/manage/generalSituation",
          },
          // {
          //   id: "0",
          //   name: "用户管理",
          //   icon: require("../../assets/menu/user.png"),
          //   showItem: true,
          //   path: "/manage/userManage",
          // },
          {
            id: "1",
            name: "管理员管理",
            icon: require("../../assets/menu/yuan.png"),
            showItem: true,
            path: "/manage/principal",
          },
          {
            id: "2",
            name: "组织架构",
            icon: require("../../assets/menu/zu.png"),
            showItem: true,
            path: "/manage/organizational",
          },
          {
            id: "3",
            name: "测试计划",
            icon: require("../../assets/menu/plan.png"),
            showItem: true,
            path: "/manage/testPlan",
          },
          {
            id: "4",
            name: "报告分析",
            icon: require("../../assets/menu/asy.png"),
            showItem: true,
            path: "/manage/recordListAll",
            child: [
              {
                id: "41",
                name: "用户报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/userReport",
                showItem: true,
              },
              {
                id: "42",
                name: "计划报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/planReport",
                showItem: true,
              },
              {
                id: "43",
                name: "对比分析",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/comparaAnalysis",
                showItem: true,
              },
              {
                id: "44",
                name: "趋势统计",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/tendency",
                showItem: true,
              },
            ],
          },
        ];
        // for (let i = 0; i < this.menuList.length; i++) {
        //   if (
        //     this.menuList[i].id == "5" ||
        //     this.menuList[i].id == "6" ||
        //     this.menuList[i].id == "2" ||
        //     this.menuList[i].id == "3" ||
        //     this.menuList[i].id == "1"
        //   ) {
        //     this.menuList[i].showItem = false;
        //   }
        // }
      } else if (this.userType == "4") {
        //
        this.menuList = [
          {
            id: "10",
            name: "概况",
            icon: require("../../assets/menu/user.png"),
            showItem: true,
            path: "/manage/generalSituation",
          },
          {
            id: "0",
            name: "学生管理",
            icon: require("../../assets/menu/yuan.png"),
            showItem: true,
            path: "/manage/userManage",
          },
          // {
          //   id: "5",
          //   name: "教师管理",
          //   icon: require("../../assets/menu/yuan.png"),
          //   showItem: true,
          //   path: "/manage/teacherManage",
          // },
          {
            id: "6",
            name: "辅导员管理",
            icon: require("../../assets/menu/yuan.png"),
            showItem: true,
            path: "/manage/instructorManage",
          },
          {
            id: "2",
            name: "组织架构",
            icon: require("../../assets/menu/zu.png"),
            showItem: true,
            path: "/manage/organizational",
          },
          {
            id: "3",
            name: "测试计划",
            icon: require("../../assets/menu/plan.png"),
            showItem: true,
            path: "/manage/testPlan",
          },
          {
            id: "4",
            name: "报告分析",
            icon: require("../../assets/menu/asy.png"),
            showItem: true,
            path: "/manage/recordListAll",
            child: [
              {
                id: "41",
                name: "用户报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/userReport",
                showItem: true,
              },
              {
                id: "42",
                name: "计划报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/planReport",
                showItem: true,
              },
              {
                id: "43",
                name: "对比分析",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/comparaAnalysis",
                showItem: true,
              },
              {
                id: "44",
                name: "趋势统计",
                parentName: "趋势统计",
                icon: "el-icon-user-solid",
                path: "/manage/tendency",
                showItem: true,
              },
            ],
          },
        ];
      } else if (this.userType == "3") {
        this.menuList = [
          // {
          //   id: "10",
          //   name: "概况",
          //   icon: require("../../assets/menu/user.png"),
          //   showItem: true,
          //   path: "/manage/generalSituation",
          // },
          {
            id: "0",
            name: "学生管理",
            icon: require("../../assets/menu/yuan.png"),
            showItem: true,
            path: "/manage/userManage",
          },
          // {
          //   id: "5",
          //   name: "教师管理",
          //   icon: require("../../assets/menu/user.png"),
          //   showItem: true,
          //   path: "/manage/teacherManage",
          // },
          // {
          //   id: "6",
          //   name: "辅导员管理",
          //   icon: require("../../assets/menu/user.png"),
          //   showItem: true,
          //   path: "/manage/instructorManage",
          // },
          {
            id: "2",
            name: "组织架构",
            icon: require("../../assets/menu/zu.png"),
            showItem: true,
            path: "/manage/organizational",
          },
          {
            id: "3",
            name: "测试计划",
            icon: require("../../assets/menu/plan.png"),
            showItem: true,
            path: "/manage/testPlan",
          },
          {
            id: "4",
            name: "报告分析",
            icon: require("../../assets/menu/asy.png"),
            showItem: true,
            path: "/manage/recordListAll",
            child: [
              {
                id: "41",
                name: "用户报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/userReport",
                showItem: true,
              },
              {
                id: "42",
                name: "计划报告",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/planReport",
                showItem: true,
              },
              {
                id: "43",
                name: "对比分析",
                parentName: "报告分析",
                icon: "el-icon-user-solid",
                path: "/manage/comparaAnalysis",
                showItem: true,
              },
              {
                id: "44",
                name: "趋势统计",
                parentName: "趋势统计",
                icon: "el-icon-user-solid",
                path: "/manage/tendency",
                showItem: true,
              },
            ],
          },
        ];
      }
    }
  },
  mounted() {
    //获取当前的路由信息

    let codeImage = sessionStorage.getItem("codeImage");
    this.urlJump = codeImage + "?invitationCode=";
    let that = this;
    // 页面初始化或者刷新页面初始化页签及激活菜单-2020-03-17
    this.active = this.$route.path;
    this.selectMenu(this.$route.path);
    this.bus.$on("menuStatusUpdate", (e) => {
      that.$refs.menu.activeIndex = e;
      that.active = e;
      console.log("-----------------");
      console.log(that.active);
      //  that.$forceUpdate()
      that.selectMenu(e);
    });

    //开始设置全屏的监听方法
    screenfull.on("change", this.change);
    //得到用户信息，根据角色信息判断哪个显示哪个不显示
  },
  destroyed(){
    screenfull.off("change", this.change);
  },
  methods: {
    ...mapActions({
      // setSacleListName:"setSacleListName",
      // setMenuActive:"setMenuActive"
    }),

    fullScreenFun(){
      console.log(screenfull)
      // debugger;

      if(!screenfull.isEnabled){
        this.$message.error('该浏览不支持缩放')
      }
      if( this.isFullscreen){
        screenfull.exit()
      }else{
        screenfull.request()
      }
      // screenfull.toggle()
      // screenfull.request()
    },
    change(){
      this.isFullscreen =screenfull.isFullscreen
    },

    changeMenu: function () {
      this.isCollapse = !this.isCollapse;
    },

    mouseenterFun() {
      this.isShowMenu = true;
    },
    mouseLeaveFun() {
      this.isShowMenu = false;
    },
    //匹配获取页签名称-2020-03-17 lwl
    selectMenu(param) {
      
      // console.log("-----------selectMenu");
      // console.log(param);
      this.isTmpPath = param;
      this.menuList.forEach((item) => {
        if (item.path == param) {
          this.crumbParent = item.name;
          this.crumbChild = null;
          // return;
        } else {
          //先判断是否有child
          //如果没有
          if (item.hasOwnProperty("child")) {
            item.child.forEach((i) => {
              if (i.path == param) {
                this.crumbParent = i.parentName;
                this.crumbChild = i.name;
              }
            });
          }
        }
      });
    },
    //下载专属二维码
    downCode(linkId) {
      const iconUrl = this.$refs[linkId].$el.src;
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = linkId;
      a.href = iconUrl;
      a.dispatchEvent(event);
    },
    // 退出
    escape() {
      // localStorage.clear();
      // sessionStorage.clear();
      //
      // this.$router.push({
      //   path: "/",
      // });

      oSessionStorage.removeItem("userInfo");
      oSessionStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },

    /*lxh-修改密码*/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.get(
            `/system/updatePassword?userNo=${this.userInfo.userNo}&password=${md5(
              this.ruleForm.pass
            )}&oldPassword=${md5(this.ruleForm.oldpass)}`,
            // {
            //   userNo: this.userInfo.userNo,
            //   password: md5(this.ruleForm.pass),
            //   oldPassword: md5(this.ruleForm.oldpass),
            // },
            {},
            (res) => {
              if (res.code == 2001) {
                this.$message({
                  message: "旧密码错误",
                  type: "error",
                });
              }
              if (res.code == 200) {
                this.ruleForm.oldpass = "";
                this.ruleForm.pass = "";
                this.ruleForm.checkPass = "";
                this.dialogVisible = false;
                this.$message({
                  message: "密码修改完成！",
                  type: "success",
                });
                sessionStorage.clear();
                this.$router.push({
                  path: "/",
                });
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改密码
    changePwd() {
      this.dialogVisible = true;
    },
  },
};
</script>
>
<style>
.side_class {
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  /* padding: 0 45px; */
  min-width: auto !important;
}
.aside-menu .el-menu-item {
  margin-left: 20px;
  color: #ffffff !important;
  margin-right: 20px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  padding-left: 0px !important;
}
.el-menu--popup {
  /* min-width:100px */
}
.el-submenu__title:hover {
  background: #00bf78 !important;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  padding-left: 0px !important;
}
.el-submenu__title {
  /* background-color: #158824; */
  /* margin-left:20px; */
  margin-right: 20px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
  border-radius: 40px;
}
.el-menu {
  background-color: #070707;
  border-right: 0px;
}
.el-menu-item-group .el-menu-item.is-active {
  background-color: #00bf78 !important;
}
.el-menu-item-group .el-menu-item:hover {
  background-color: #00bf78 !important;
  padding-left: 0px !important;
}
.el-menu-item-group__title {
  padding: 0px !important;
  line-height: normal;
  font-size: 12px;
  color: #909399;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  /* background-color: transparent !important; */
  background-color: #00bf78 !important;
  padding-left: 0px !important;
}
.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #00bf78 !important;
}
</style>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}

.shadow-menu {
  // box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.1);
}

#app {
  margin-top: 0px;
}

.el-header {
  padding: 0 0px !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

.menu-top-left {
  background-color: black;
  height: 3.75rem;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 2;
}

.menu-top-left i img {
  width: 30px;
  height: 30px;
}

.menu-top-left-title {
  color: #ffffff;
  font-size: 1rem;
}
.el-menu--horizontal {
  // position: absolute;
  // top: 60px;
  // z-index: 2003;
  // left: 975px !important;
}

/*.el-menu--horizontal > .el-submenu {*/
/*float: right;*/
/*}*/

// el-menu--horizontal > .el-menu-item {
//   color:#000000
// }

.top-menu-control {
  float: left;
}

.aside-menu {
  background-color: #000000;
  /*height: 98vh;*/
  height: 100vh;
  text-align: left;
  // background: url('../../assets/img/side/side_bg.png') no-repeat;
  // background-size: 100% 100vh;
  /*padding-top: 60px;*/
  // border-top-right-radius: 40px;
  // border-bottom-right-radius: 40px;
}

.aside-menu .el-menu-item.is-active {
  background: #00bf78 !important;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}
.aside-menu .el-menu-item {
  // background: #00BF78 !important;
  margin-left: 20px;
  color: #ffffff !important;
  margin-right: 20px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}

.el-menu-item-group .el-menu-item.is-active {
  background: #00bf78 !important;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 0px !important;
}

.fade-enter {
  opacity: 0;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: opacity 0s;
}

/*.rightExit {*/
/*float: right !important;*/
/*}*/

.main-header {
  height: 40px !important;
  padding: 20px 0 0 20px !important;

  .menu-hide {
    height: 20px !important;
    text-align: left;
    line-height: 20px !important;
  }
}

.admin-header-content {
  // background: #57acbb;
  background: transparent;
  height: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.admin-header-content .el-col {
  height: 100% !important;
}

.admin-header-content .admin-logo-content {
  /*box-sizing: border-box;*/
  /*width: 100%;*/
  /*height: 100%;*/
  width: 165px;
  height: 45px;
  padding: 8px 0 8px 20px;
  font-size: 18px;
  color: #fff;
  text-align: left;
  line-height: 45px;
}

.admin-header-content .admin-logo-content img {
  width: 100%;
  height: 100%;
}

.admin-header-content .admin-head-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.admin-header-content .el-menu-demo {
  height: 100%;
}

.el-menu--horizontal > .el-submenu .el-submenu__title,
/deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: none !important;
  margin-left: 20px;
  margin-right: 20px;
}

/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  color: #161616;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.admin-breadcrumb {
  padding-top: 3px;
  margin-left: -18px;
  font-weight: 700;
}

.just-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .user_out {
    min-width: 150px;
    position: relative;
    display: flex;
    align-items: center;
    .user_out_img {
      width: 40px;
    }
    .user_out_des {
      margin-right: 40px;
      font-size: 16px;
      font-weight: 700;
    }
    .user_out_ab {
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      position: absolute;
      background-color: #ffffff;
      margin-top: 150px;
      z-index: 100;
      .exit {
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
      }
      .update_pass {
        padding: 20px 40px;
      }
      .exit:hover {
        color: #00bf78;
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
      }
      .update_pass:hover {
        color: #00bf78;
        padding: 20px 40px;
      }
    }
  }
}
.el-main-inner {
  display: flex;
  width: 100%;
  padding: 20px;
  border-radius: 40px;
}
.el-main {
  box-sizing: border-box !important;
  display: flex !important;
  overflow: hidden !important;
  border-bottom-left-radius: 40px;
}
.menu_name {
  color: #ffffff;
}
.menu_sub_tt {
  margin-left: 10px;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  .menu_sub_t1 {
    // background-color: #ffffff;
    // border-radius: 50%;
    width: 5px;
    height: 5px;
    margin-right: 20px;
  }
}
.el-container-com {
  height: 100vh;
  display: flex;
  flex-direction: column;
  // border-top-left-radius: 40px;
  // border-bottom-left-radius: 40px;
  background-color: #000000;
  // background: url('../../assets/img/side/side_bg.png') no-repeat;
  // background-size: 100% 100vh;
}
.main_top_1 {
  border-top-left-radius: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
  .blue {
    background-color: #00bf78;
    width: 10px;
    margin-right: 30px;
    height: 20px;
    border-radius: 5px;
  }
}

.menu_icon_mm {
  display: flex;
  flex-direction: row;
  align-items: center;
  .menu_icon_img {
    width: 15px;
    margin-right: 10px;
    padding-left: 10px;
  }
}

.dig_update /deep/.el-dialog {
  box-shadow: none !important;
  background: transparent !important;
}
.demo-ruleForm /deep/ .el-form-item {
  margin-right: 10px;
  vertical-align: top;
  display: flex !important;
  flex-direction: column;
}
.demo-ruleForm /deep/.el-form-item__label {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.demo-ruleForm /deep/.el-input {
  width: 100% !important;
}

.demo-ruleForm /deep/.el-input__inner {
  width: 100% !important;
  background-color: #f7f7f7;
  border: 0px;
}

.dig_button {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.demo-ruleForm {
  background-color: #ffffff;
  // border-radius: 20px;
  margin-right: -10px;
  margin-top: -10px;
  padding-right: 100px;
  padding-left: 100px;
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 40px;
  .dig_title {
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
  }
}
.aab {
  color: #48d68e;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 24px;
  -webkit-transform: skew(-10deg);
  letter-spacing: 2px;
  /* for Chrome||Safari */
  -ms-transform: skew(-10deg);
  /* for IE */
  -moz-transform: skew(-10deg);
  /* for Firefox */
  -o-transform: skew(-10deg);
  /* for Opera */
}
.aac {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  color: #48d68e;
  // margin-left: 20px;
  margin-top: 40px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  // -webkit-transform: skew(-10deg);

  // /* for Chrome||Safari */
  // -ms-transform: skew(-10deg);
  // /* for IE */
  // -moz-transform: skew(-10deg);
  // /* for Firefox */
  // -o-transform: skew(-10deg);
  /* for Opera */
}
</style>