桌面开始菜单

heyujie

2021-07-22 eca3bc0ecb283d9e9402441c6ed3e3580621990f

 src/pages/desktop/index/components/Tools.vue

@@ -15,23 +15,33 @@
        />
      </div>

      <div class="fast-path" :class="showFastPath?'fast-path-show':''" @click.stop>
      <div
        class="fast-path"
        :class="showFastPath ? 'fast-path-show' : ''"
        @click.stop
      >
        <div class="top">
          <img src="" alt="" />
          <span class="username">{{userInfo.username}}</span>
          <img :src="`data:image/png;base64,${userInfo.headpic}`" alt="" />

          <span class="username">{{ userInfo.username }}</span>
        </div>
        <div class="link-list">
          <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
          <div
            class="list-item"
            v-for="(x, i) in linkList"
            :key="i"
            @click="clickFastPath(x.name)"
          >
            {{ x.name }}
          </div>
        </div>
        <div class="bot">
          <div class="set" @click="gotoSet">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>设置</span>
          </div>
          <div class="exit" @click="toLogout">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>退出</span>
          </div>
        </div>
@@ -174,7 +184,11 @@
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      userInfo: {},
      linkList: [{name: "文档中心"}, {name: "系统监控器"}, { name: "日志管理" }],
      linkList: [
        { name: "文档中心" },
        { name: "系统监控器" },
        { name: "日志管理" },
      ],
      showPasswdForm: false,
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
@@ -183,7 +197,7 @@
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      showFastPath:false,
      showFastPath: false,
      passwdForm: {
        oldPwd: "",
        newPwd: "",
@@ -207,13 +221,13 @@
    ];
  },
  mounted() {
    document.addEventListener("click",(e) => {
    document.addEventListener("click", (e) => {
      // debugger
      // this.showFastPath=false
      if (this.showFastPath) {
        this.showFastPath=false
        this.showFastPath = false;
      }
    })
    });
  },
  methods: {
    submitForm(formName) {
@@ -260,7 +274,7 @@
    },

    togglePreference() {
      this.showFastPath = !this.showFastPath
      this.showFastPath = !this.showFastPath;
      this.$store.state.desktop.frames.forEach((frame) => {
        this.$store.commit("desktop/addMinDock", {
          id: frame.id,
@@ -287,23 +301,20 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    clickFastPath(name){
      debugger
      this.$emit("jumpToDock", name)

    clickFastPath(name) {
      this.$emit("jumpToDock", name);
    },
    gotoSet(){
      this.$emit("jumpToDock", "系统设置")

    gotoSet() {
      this.$emit("jumpToDock", "系统设置");
    },
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    },
    toLogout() {
      let _this = this;
      this.$confirm("确定退出登录吗？","提示", {
      this.$confirm("确定退出登录吗？", "提示", {
        // center: true,
        type:"warning",
        type: "warning",
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      })
@@ -430,74 +441,67 @@
  top: 55px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  transition: .2s;
  transition: 0.2s;
  display: none;
  .top{
        display: -webkit-box;
    display: -ms-flexbox;
  padding-top: 5px;
  box-sizing: border-box;
  .top {
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    /* justify-content: space-evenly; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    padding: 0 30px;
    img{
              height: 50px;
        width: 50px;
background-color: bisque;
        border-radius: 50%;
    img {
      height: 50px;
      width: 50px;
      background-color: bisque;
      border-radius: 50%;
    }
    .username{
    width: fit-content;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-left: 10px;
    .username {
      width: fit-content;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      margin-left: 15px;
    }
  }
  .link-list{
        height: 180px;
  .link-list {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-item{
          display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 25px;
    height: 25px;cursor: pointer;
    margin: 5px;
    .list-item {
      display: flex;
      width: 90%;
      box-sizing: border-box;
      padding: 0 20px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 25px;
      height: 25px;
      cursor: pointer;
      margin: 5px;
    }
    .list-item:hover{
    background-color: rgba(231, 231, 231, 1);
    .list-item:hover {
      background-color: rgba(231, 231, 231, 1);
    }
  }
  .bot{
        position: absolute;
  .bot {
    position: absolute;
    bottom: 0;
    height: 60px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    .set,.exit{
          display: flex;
    align-items: center;
    width: 28%;
    justify-content: space-evenly;
    font-size: 14px;
    cursor: pointer;
    .set,
    .exit {
      display: flex;
      align-items: center;
      width: 28%;
      justify-content: space-evenly;
      font-size: 14px;
      cursor: pointer;
    }

  }
}

@@ -512,7 +516,7 @@
}

.fast-path-show {
  animation: move linear .2s 1;
  animation: move linear 0.2s 1;
  display: block;
}