From 04e5d9e5447fcbbd96aa5778c73b1291082d5886 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期六, 01 八月 2020 12:17:17 +0800 Subject: [PATCH] 应用最小化前保存应用快照用于桌面头部鼠标移入显示 --- src/pages/desktop/index/components/Tools.vue | 17 ++++++++++++++++- 1 files changed, 16 insertions(+), 1 deletions(-) diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue index 72b59ef..d49df91 100644 --- a/src/pages/desktop/index/components/Tools.vue +++ b/src/pages/desktop/index/components/Tools.vue @@ -15,8 +15,9 @@ </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)"> + <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> @@ -144,6 +145,7 @@ .tools .tools-middle { float: left; position: relative; + } .tools .tools-middle::before { width: 1px; @@ -161,6 +163,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 +179,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