RZGY/src/renderer/components/Menu.vue

<template>
  <div>
    <TopPage></TopPage>
    <el-row class="main_right_height">
      <el-col :span="4" class="menu_style" style="position: relative">
        <div class="menu_title_top">
          <span class="menu_title_top_des">心理与认知干预系统</span>
        </div>
        <div class="menu_feature">
          <div style="margin-left: 10%">
            <img
              v-show="userType === 1"
              width="60px"
              height="60px"
              src="../assets/newImage/peopleUser.png"
            />
            <img
              v-show="userType === 2"
              width="60px"
              height="60px"
              src="../assets/newImage/peopleAdmin.png"
            />
          </div>
          <div class="update_pass">
            <div style="color: #ffffff; margin-bottom: 10px">
              {{ acount }}
            </div>
            <div>
              <span
                @click="updatePass()"
                style="cursor: pointer; color: #ffffff; font-size: 12px"
                >个人中心</span
              >
            </div>
          </div>
        </div>
        <el-menu
          :default-active="defaultUrl"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#d9dbdc"
          active-text-color="#ffffff"
          :popper-append-to-body="false"
          :router="true"
        >
          <!-- <p align="center">
            <img
              width="60px"
              height="60px"
              src="../assets/newImage/home_ndcj.png"
              style="border-radius: 50%"
            />
          </p>
          <p align="center" style="color: #ffffff">
            <i
              title="修改密码"
              @click="updatePass()"
              style="cursor: pointer"
              class="el-icon-lock"
            ></i
            >&nbsp;&nbsp; {{ acount }} &nbsp;&nbsp;
            <i
              title="返回主页"
              @click="goMain"
              style="cursor: pointer"
              class="el-icon-s-home"
            ></i>
          </p> -->
          <el-menu-item index="" @click="goMain" v-show="true">
            <!-- <i class="el-icon-menu"></i> -->
            <img class="menu_icon_cla" src="../assets/menuIcon/main.png" />
            <span slot="title" class="menu_text_cla">主页</span>
          </el-menu-item>
          <el-menu-item
            index="/menu/smart1"
            v-show="userType === 1"
            @click="menuClick('rjdh')"
          >
            <!-- @mouseover="menuClick('rjdh')" -->
            <!-- @click="menuClick('rjdh')" -->
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + rjdhUrl)"
            />
            <span
              slot="title"
              class="menu_text_span"
              :style="{ color: rjdh ? '#ffffff' : '#0FB577' }"
              >智能对话</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/evaluation"
            v-show="userType === 1"
            @click="menuClick('xlcp')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + xlcpUrl)"
            />
            <span
              slot="title"
              class=""
              :style="{ color: xlcp ? '#ffffff' : '#0FB577' }"
              >心理测评</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/relax"
            v-show="userType === 1"
            @click="menuClick('xlfs')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + xlfsUrl)"
            />
            <span
              slot="title"
              :style="{ color: xlfs ? '#ffffff' : '#0FB577' }"
              class="menu_text_cla"
              >心理放松</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/intervene"
            v-show="userType === 1"
            @click="menuClick('rzgy')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + rzgyUrl)"
            />
            <span
              slot="title"
              :style="{ color: rzgy ? '#ffffff' : '#0FB577' }"
              class="menu_text_cla"
              >认知行为干预</span
            >
          </el-menu-item>
          <!-- <el-menu-item index="/menu/pulse" v-show="userType === 1">
            <i class="el-icon-menu"></i>
            <span slot="title">脉搏采集</span>
          </el-menu-item> -->
          <el-menu-item
            index="/menu/animation"
            v-show="userType === 1"
            @click="menuClick('swfk')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + swfkUrl)"
            />
            <span slot="title" :style="{ color: swfk ? '#ffffff' : '#0FB577' }"
              >生物反馈训练</span
            >
          </el-menu-item>

          <el-menu-item
            index="/menu/manageUser"
            v-show="userType === 2"
            @click="menuManageClick('yhgl')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhglUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhgl ? '#ffffff' : '#0FB577' }"
              >用户管理</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageUserScale"
            v-show="userType === 2"
            @click="menuManageClick('yhlt')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhltUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhlt ? '#ffffff' : '#0FB577' }"
              >用户聊天记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageScaleUser"
            v-show="userType === 2"
            @click="menuManageClick('yhcp')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhcpUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhcp ? '#ffffff' : '#0FB577' }"
              >量表测评记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageElectrical"
            v-show="userType === 2"
            @click="menuManageClick('yhfk')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhfkUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhfk ? '#ffffff' : '#0FB577' }"
              >生物反馈记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/managePluse"
            v-show="userType === 2"
            @click="menuManageClick('yhgy')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhgyUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhgy ? '#ffffff' : '#0FB577' }"
              >认知行为干预记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageEquipment"
            v-show="userType === 2"
            @click="menuManageClick('yhsb')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhsbUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhsb ? '#ffffff' : '#0FB577' }"
              >设备管理</span
            >
          </el-menu-item>
        </el-menu>
        <div class="foot_main_exit">
          <div class="menu_main_exit">
            <img
              @click="userExit"
              class="imgStyle"
              align="center"
              src="../assets/newImage/exit1.png"
            />&nbsp;&nbsp;
            <span class="exitLogin" @click="userExit" style="font-size: 14px"
              >退出登录</span
            >
          </div>
        </div>
        <!-- <div class="foot_main_menu">&nbsp;</div> -->
      </el-col>
      <el-col
        style="
          height: 100vh;
          overflow-y: no;
          overflow-x: no;
          position: relative;
        "
        :span="20"
      >
        <div class="menu_left_new">
          <router-view
            v-if="!$route.meta.keepAlive"
            class="menu_left_keep"
          ></router-view>
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" class="menu_left_keep" />
          </keep-alive>
        </div>

        <!-- <div class="foot_main">Copyright© 北京决明科技有限公司</div> -->
        <div class="foot_main">Copyright© 2024</div>
      </el-col>
    </el-row>

    <el-dialog
      title="个人中心"
      :visible.sync="centerDialogPass"
      width="45%"
      center
    >
      <el-tabs type="border-card">
        <el-tab-pane label="个人信息">
          <div>
            <el-form
              :model="ruleUserForm"
              :rules="userRules"
              ref="ruleUserForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="昵称" prop="name">
                <el-input
                  type="text"
                  v-model="ruleUserForm.name"
                  placeholder="请输入昵称"
                ></el-input>
              </el-form-item>
              <el-form-item label="编号" prop="num">
                <el-input
                  :disabled="true"
                  v-model="ruleUserForm.num"
                  placeholder="请输入编号"
                ></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input
                  type="age"
                  v-model="ruleUserForm.age"
                  placeholder="请输入年龄"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="unit">
                <el-input
                  type="unit"
                  v-model="ruleUserForm.unit"
                  placeholder="请输入单位"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别" class="registerInput" prop="sex">
                <el-select
                  style="width: 100%"
                  v-model="ruleUserForm.sex"
                  placeholder="请选择"
                >
                  <el-option label="女" value="0"></el-option>
                  <el-option label="男" value="1"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="婚恋情况" prop="marriageSituation">
                <el-select
                  style="width: 100%"
                  v-model="ruleUserForm.marriageSituation"
                  placeholder="请选择"
                >
                  <el-option label="已婚" value="0"></el-option>
                  <el-option label="未婚" value="1"></el-option>
                  <el-option label="离异" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="updatePassword">
              <el-button @click="centerDialogPass = false">取 消</el-button>
              <el-button type="primary" @click="submitUserForm('ruleUserForm')"
                >确 定</el-button
              >
            </span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="密码修改">
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="旧密码" prop="oldPass">
                <el-input
                  type="password"
                  v-model="ruleForm.oldPass"
                  autocomplete="off"
                  placeholder="请输入旧密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  placeholder="请输入新密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                  placeholder="请输入确认密码"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="updatePassword">
              <el-button @click="centerDialogPass = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
const { ipcRenderer } = require("electron");
import Utils from "./util.js";
export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("旧密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("旧密码不能小于6位"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("新密码不能小于6位"));
      } else {
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("新密码不能小于6位"));
      } else if (value !== this.ruleForm.pass) {
        return callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("编号不能为空"));
      } else if (value.length > 20) {
        return callback(new Error("编号不能超过20位"));
      } else {
        callback();
      }
    };
    var checkUnit = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("单位不能为空"));
      } else {
        callback();
      }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      } else {
        callback();
      }
    };
    return {
      id: "",
      role: "",
      queryPassword: "",
      //人机对话
      rjdhUrl: "rjdh1.png",
      rjdh: true,
      //心理测评
      xlcpUrl: "rjdh.png",
      xlcp: true,
      xlfsUrl: "xlfs.png",
      xlfs: true,
      //认知干预
      rzgyUrl: "rzgy.png",
      rzgy: true,
      //生物反馈
      swfkUrl: "swfk.png",
      swfk: true,

      //管理页面
      //用户管理
      yhglUrl: "yhgl.png",
      yhgl: true,
      //用户聊天记录
      yhltUrl: "yhlt.png",
      yhlt: true,
      //用户测评
      yhcpUrl: "yhcp.png",
      yhcp: true,
      //用户反馈
      yhfkUrl: "yhfk.png",
      yhfk: true,
      //用户干预
      yhgyUrl: "yhgy.png",
      yhgy: true,
      //设别管理
      yhsbUrl: "yhgy.png",
      yhsb: true,
      userType: 0,
      defaultUrl: "",
      acount: "",
      centerDialogPass: false,
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        oldPass: [
          { validator: validateOldPass, trigger: "blur", required: true },
        ],
        pass: [{ validator: validatePass, trigger: "blur", required: true }],
        checkPass: [
          { validator: validateCheckPass, trigger: "blur", required: true },
        ],
      },
      ruleUserForm: {
        name: "",
        num: "",
        age: "",
        unit: "",
        sex: "男",
        marriageSituation: "0",
      },
      userRules: {
        name: [
          {
            validator: checkName,
            required: true,
            message: "请填写昵称",
            trigger: "blur",
          },
        ],
        num: [
          {
            validator: checkNum,
            required: true,
            message: "请填写编号",
            trigger: "blur",
          },
        ],
        unit: [
          {
            validator: checkUnit,
            required: true,
            message: "请填写单位",
            trigger: "blur",
          },
        ],
        age: [
          {
            validator: checkAge,
            required: true,
            message: "请填写年龄",
            trigger: "blur",
          },
        ],
        // marriageSituation: [
        //   { required: true, message: "请填写婚恋情况", trigger: "change" },
        // ]
      },
    };
  },
  mounted() {
    this.acount = sessionStorage.getItem("num");
    this.defaultUrl = sessionStorage.getItem("defaultUrl");
    //sessionStorage

    let queryUrl = this.$route.query.url;
    this.menuClick(queryUrl);
    this.menuManageClick(queryUrl);
    this.userType = sessionStorage.getItem("userType");
    this.userType = parseInt(this.userType);

    this.$root.topPageFlag = true;
    //根据用户编号查询用户信息
  },
  methods: {
    //根据用户编号查询用户信息
    // queryUserMessage(){
    //   let that=this;
    //   that.$http.get(
    //         `v1/user/getUser/${that.acount}`,
    //         {
    //           identifier: that.acount,

    //         },
    //         (res) => {
    //           if (res.data.code == 200) {
    //             that.centerDialogPass = false;
    //             that.$message.success("修改成功");
    //             that.$router.push("/");
    //           } else {
    //             this.$message.error("访问服务器失败！");
    //           }
    //         }
    //       );
    // },

    menuManageClick(val) {
      if (val == "yhgl") {
        this.yhglUrl = "yhgl1.png";
        this.yhgl = false;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhlt") {
        this.yhltUrl = "yhlt1.png";
        this.yhlt = false;

        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhcp") {
        this.yhcpUrl = "yhcp1.png";
        this.yhcp = false;

        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhfk") {
        this.yhfkUrl = "yhfk1.png";
        this.yhfk = false;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhgy") {
        this.yhgyUrl = "yhgy1.png";
        this.yhgy = false;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;
        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhsb") {
        this.yhsbUrl = "yhgy1.png";
        this.yhsb = false;
        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;
        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;
      }
    },
    menuClick(val) {
      console.log(val);
      if (val == "rjdh") {
        this.rjdhUrl = "rjdh1.png";
        this.rjdh = false;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "xlcp") {
        this.xlcpUrl = "xlcp1.png";
        this.xlcp = false;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "xlfs") {
        this.xlfsUrl = "xlfs1.png";
        this.xlfs = false;

        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;

        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "rzgy") {
        this.rzgyUrl = "rzgy1.png";
        this.rzgy = false;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "swfk") {
        this.swfkUrl = "swfk1.png";
        this.swfk = false;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
      }
    },
    submitForm(formName) {
      let that = this;
      let num = sessionStorage.getItem("num");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.$http.post(
            `v1/user/change/password`,
            {
              identifier: num,
              password: that.$md5(that.ruleForm.oldPass),
              newPassword: that.$md5(that.ruleForm.pass),
            },
            (res) => {
              if (res.data.code == 200) {
                that.centerDialogPass = false;
                that.$message.success("修改成功");
                that.$router.push("/");
              } else {
                this.$message.error("访问服务器失败！");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    submitUserForm(formName) {
      let that = this;
      let num = sessionStorage.getItem("num");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //修改个人信息
          that.$http.post(
            `v1/user/update`,
            {
              userName: that.ruleUserForm.name,
              identifier: that.ruleUserForm.num,
              profession: that.ruleUserForm.unit,
              age: that.ruleUserForm.age,
              gender: that.ruleUserForm.sex == "男" ? "1" : "0",
              marriageSituation: that.ruleUserForm.marriageSituation,
              id: that.id,
              role: that.role + "",
              password: that.queryPassword,
            },
            (res) => {
              if (res.data.code == 200) {
                that.centerDialogPass = false;
                that.$message.success("修改成功");
                // that.$router.push("/");
              } else {
                this.$message.error("访问服务器失败！");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    queryUserInfo() {
      let that = this;
      that.$http.get(
        `v1/user/getUser/${that.acount}`,
        {
          identifier: that.acount,
        },
        (res) => {
          if (res.code == 200) {
            that.ruleUserForm.name = res.data.userName;
            that.ruleUserForm.num = res.data.identifier;
            that.ruleUserForm.age = res.data.age;
            that.ruleUserForm.unit = res.data.profession;
            that.ruleUserForm.sex = res.data.gender == "1" ? "男" : "女";
            that.ruleUserForm.marriageSituation = res.data.marriageSituation;
            that.id = res.data.id;
            that.role = res.data.role;
            that.queryPassword = res.data.password;
            //修改文本
            //将data赋予给数据
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    updatePass() {
      //调用查询用户信息的方法
      let that = this;
      this.queryUserInfo();
      //将校验去掉
      this.centerDialogPass = true;
      this.$nextTick(() => {
        that.$refs["ruleUserForm"].resetFields();
        that.$refs["ruleForm"].resetFields();
      });
    },
    //销毁所有定时器
    desTimer() {
      for (let i = 1; i < 100000; i++) {
        clearInterval(i);
      }
    },
    goMain() {
      this.$router.push("/mainTable");
      ipcRenderer.removeAllListeners();
      Utils.$off();
      this.desTimer();
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    userExit() {
      this.$router.push("/");
      ipcRenderer.removeAllListeners();
      Utils.$off();
      this.desTimer();
    },
  },
};
</script>
<style scoped>
.imgStyle {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.exitLogin {
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  display: block;
}
.el-menu-item {
  margin-left: 10px !important;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.el-menu-item:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

.el-menu-item:focus {
  color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
  /* margin-top:5px;
  margin-bottom:5px; */
}
.el-menu-item.is-active {
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
}
.el-menu-item:active {
  color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
}
.el-menu-item {
  /* color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 20px;
  margin-left: 10px; */
  border-radius: 10px;
  width: 170px;
}
/* .el-menu-item:active {
  color: #ffffff !important;
  background-color: #ffffff !important;
} */

li.hover {
}
ul {
  background-color: transparent !important ;

  /* background: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%)  !important */
  /* background-color: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important;  */
  /* background-color:linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important; */
  /* background-color: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important; */
}
.menu_style {
  background: linear-gradient(0deg, #09b3ff 0%, #04d1a7 100%) !important;
  height: 100vh;
}
.foot_main {
  width: 100%;
  position: absolute;
  bottom: 0px;
  line-height: 35px;
  display: block;
  font-size: 14px;
  background-color: transparent;
  text-align: center;
  color: #0f0f0f;
}
.foot_main_menu {
  width: 100%;
  position: absolute;
  bottom: 0px;
  line-height: 40px;
  display: block;
  font-size: 10px;
  background-color: rgb(94, 125, 221);
  text-align: center;
}
.el-menu {
  border-right: solid 0px #e6e6e6 !important;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #fff;
}
.foot_main_exit {
  line-height: 300px;
  width: 100%;
  position: absolute;
  bottom: 40px;
  left: -40px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  /* background-color: rgb(94, 125, 221); */
  /* text-align: center; */
}
/* .main_right_height {
  height: 95vh !important;
  display: block !important;
  overflow-y: auto !important;
} */
.menu_left_new {
  background: linear-gradient(0deg, #09b3ff 0%, #04d1a7 100%) !important;
  height: 100vh;
  /* background: linear-gradient(0deg,#09B3FF 0%, #04D1A7 100%) !important; */
}
.menu_left_keep {
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  /* background: #09b3ff; */

  height: 100vh;

  /* background: linear-gradient(0deg,#09B3FF 0%, #04D1A7 100%) !important; */
}
.menu_title_top {
  display: flex;
  justify-content: center;
  color: #ffffff;
  margin-top: 40px;
}
.menu_title_top_des {
  border-bottom: 1px solid #ffffff;
  padding-bottom: 10px;
  padding-left: 4px;
  padding-right: 4px;
}
.menu_feature {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.update_pass {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
}
.menu_main_exit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.menu_icon_cla {
  height: 14px;
  margin-right: 4px;
}
.menu_text_cla {
  color: #ffffff;
}
.updatePassword {
  display: flex;
  justify-content: center;
}
</style>