minDock高亮显示

hanbaoshan

2020-08-05 a51a787a5ecb7d249dba434be74160c85516c555

 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 />
      <div class="tools-icon no-hover-style">
        <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">
      <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}">
        <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>
@@ -55,7 +44,9 @@
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: ''
    };
  },
  created() {
@@ -69,6 +60,22 @@
      }, 600)
    ];
  },
  // watch:{
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         debugger;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
  //           }
  //         });
  //       }
  //     },
  //     deep: true
  //   }
  // },
  
  methods: {
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
@@ -101,6 +108,7 @@
      })
    },
    dockClick(dock) {
      debugger
      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
@@ -112,6 +120,9 @@
        });
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        //点击的iframe置顶并高亮
        debugger
        this.$store.commit("desktop/refreshFrame", dock);
      }
    }
  }
@@ -161,13 +172,14 @@
  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 {
.tools .tools-middle .dock-item-wrap:hover{
  color: white;
  background-color: #98aabe;
}
.tools-middle .dock-item-wrap.actived{
  border-color: #40c3ff;
  cursor: pointer;
}
.dock-item-wrap a {
  height: 100%;
@@ -175,6 +187,18 @@
.dock-item-wrap img {
  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;
@@ -185,8 +209,8 @@
  padding: 0 15px;
}

.tools .tools-icon:hover,
.tools .tools-icon.clicked {
.tools .tools-icon:not(.no-hover-style):hover,
.tools .tools-icon:not(.no-hover-style).clicked {
  color: white;
  background-color: #98aabe;
  cursor: pointer;