From eca3bc0ecb283d9e9402441c6ed3e3580621990f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 22 七月 2021 11:00:25 +0800
Subject: [PATCH] 桌面开始菜单
---
src/pages/desktop/index/components/Tools.vue | 142 ++++++++++++++++++++++++-----------------------
1 files changed, 73 insertions(+), 69 deletions(-)
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 5217034..063952c 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/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;
}
--
Gitblit v1.8.0