From f5a0751be938eefbd3c327fd50b9234f49b98440 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期二, 04 八月 2020 14:49:33 +0800
Subject: [PATCH] 修改iconfont 引入方式,添加到index.html
---
src/pages/desktop/index/components/Tools.vue | 38 ++++++++++++++++++++------------------
1 files changed, 20 insertions(+), 18 deletions(-)
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 72b59ef..b02a46b 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -5,44 +5,33 @@
:class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
@click="togglePreference()"
>
- <img class="system" :src="`${publicPath}images/header-icon/system.png`" />
- <!-- <span class="fa fa-apple"></span> -->
+ <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
</div>
<div class="tools-icon">
- <!-- <span class="fa fa-safari"></span> -->
- <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt />
+ <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt />
</div>
</div>
<div class="tools-middle">
<div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap">
<a @click="dockClick(dock)">
<img class="dock-item" :src="dock.src" :alt="dock.alt" />
+ <img class="dock-shot" :src="dock.screenshot" :alt="dock.name" />
</a>
</div>
</div>
<div class="tools-right">
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/search.png`" alt />
+ <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
</div>
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/help.png`" alt />
+ <img :src="`${publicPath}images/desktop/header-icon/help.png`" alt />
</div>
<div class="tools-icon" @click="notificationCenterClick()">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/notice.png`" alt />
+ <img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt />
</div>
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/header-icon/user.png`" alt />
+ <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
</div>
- <!-- <timer></timer> -->
- <!-- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
- <span
- :class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
- ></span>
- </div>-->
</div>
</div>
</template>
@@ -161,6 +150,7 @@
line-height: 54px;
margin-right: 1px;
border-bottom: 2px solid transparent;
+ position: relative;
}
.tools .tools-middle .dock-item-wrap:hover,
.tools .tools-middle .dock-item-wrap.clicked {
@@ -176,6 +166,18 @@
width: auto;
height: 70%;
}
+.dock-item-wrap .dock-shot {
+ visibility: hidden;
+ width: 100px;
+ height: 46px;
+ position: absolute;
+ top: 44px;
+ left: -50%;
+}
+.tools .tools-middle .dock-item-wrap:hover .dock-shot,
+.tools .tools-middle .dock-item-wrap.clicked .dock-shot {
+ visibility: visible;
+}
.tools-icon {
text-align: center;
height: 100%;
--
Gitblit v1.8.0