<template>
|
<div class="tools-entry">
|
<div class="entry-wrap">
|
<div class="app-list clearFix">
|
<div
|
class="app"
|
v-for="dock in this.$store.state.desktop.docks"
|
:key="dock.id"
|
@click="dockClick(dock)"
|
>
|
<div class="wrap">
|
<div class="app-icon">
|
<img :src="dock.src" :alt="dock.alt" />
|
</div>
|
<div class="app-name">{{dock.name}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'toolsEntry',
|
data() {
|
return {
|
publicPath: process.env.BASE_URL,
|
}
|
},
|
methods: {
|
dockClick(dock) {
|
if (dock.type === '1') {
|
window.open(dock.url);
|
} else if (dock.type === '2') {
|
let ids = this.$store.getters["desktop/frames"].map(item => item.id);
|
if (ids.indexOf(dock.id) > -1) {
|
this.$store.commit('desktop/resetMinFrame', dock.id);
|
this.resetDockItem();
|
return;
|
}
|
|
let ret = this.$store.dispatch('desktop/addFrame', {
|
id: dock.id,
|
icon: dock.src,
|
title: dock.name,
|
url: dock.url
|
});
|
}
|
},
|
resetDockItem() {
|
const dockItems = document.getElementsByClassName('dock-item');
|
const dockMask = document.getElementsByClassName('dock-mask')[0];
|
for (let i = 0; i < dockItems.length; i++) {
|
dockItems[i].width = 60;
|
if (dockItems[i].parentNode.nextElementSibling) {
|
dockItems[i].parentNode.nextElementSibling.style.marginLeft = "-35px";
|
}
|
}
|
dockMask.style.width = dockItems.length * 60 + 40 + 'px';
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.tools-entry {
|
//margin-top: 130px;
|
position: absolute;
|
top: 142px;
|
left: 50%;
|
transform: translateX(-50%);
|
.entry-wrap {
|
width: 1180px;
|
padding: 0 60px;
|
margin: 0 auto;
|
.app-list {
|
.app {
|
width: 16.6%;
|
margin-bottom: 54px;
|
float: left;
|
.wrap {
|
.app-icon {
|
text-align: center;
|
line-height: 110px;
|
width: 110px;
|
height: 110px;
|
margin: auto;
|
img {
|
vertical-align: middle;
|
margin-right: -3px;
|
}
|
}
|
.app-name {
|
padding-top: 10px;
|
text-align: center;
|
font: Bold 16px/16px Microsoft JhengHei;
|
color: #fff;
|
}
|
}
|
|
&:hover {
|
.app-icon {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
