Browse Source

样式修改

haojianlong 4 years ago
parent
commit
3ccbdce632
2 changed files with 44 additions and 20 deletions
  1. 21 15
      src/components/homeView/topoImageCard.vue
  2. 23 5
      src/views/home.vue

+ 21 - 15
src/components/homeView/topoImageCard.vue

@@ -1,9 +1,9 @@
 <!--拓扑图缩略图卡片-->
 <template>
-  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
+  <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }">
     <img :src="data.img" class="image">
     <div class="shadow image">
-      <el-checkbox v-model="data.checked" class="shadowCheck"></el-checkbox>
+      <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
     </div>
     <div class="content">
       <div>
@@ -33,10 +33,10 @@
 </template>
 <script>
 export default {
-  props:{
-    data:{
+  props: {
+    data: {
       type: Object,
-      default: ()=>{
+      default: () => {
         return {}
       }
     }
@@ -53,6 +53,11 @@ export default {
       checked: false
     };
   },
+  methods: {
+    changeCheck() {
+      this.$emit('changeCheck', this.data)
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -64,9 +69,18 @@ export default {
   margin-right: 20px;
   margin-bottom: 20px;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &.active {
     border-color: #0091ff80;
     box-shadow: 0px 8px 16px 0px rgba(195, 199, 203, 0.4);
+    .shadow {
+      display: block;
+    }
+    .content {
+      .func {
+        display: block;
+      }
+    }
   }
   .image {
     width: 100%;
@@ -79,7 +93,7 @@ export default {
     top: 0;
     left: 0;
     background-color: #8d939926;
-    .shadowCheck{
+    .shadowCheck {
       position: absolute;
       top: 8px;
       left: 12px;
@@ -125,14 +139,6 @@ export default {
       }
     }
   }
-  &:hover {
-    .shadow {
-      display: block;
-    }
-    .func {
-      display: block;
-    }
-  }
 }
 .customPop {
   p {

+ 23 - 5
src/views/home.vue

@@ -14,7 +14,7 @@
       <!-- 展示部分 -->
       <el-main class="main">
         <div class="main-head">
-          <div class="showType" v-show="!isShowCheck">
+          <div class="showType" v-show="!selectCard.length">
             <el-radio-group v-model="isPub" size="small">
               <el-radio-button label="已发布">已发布</el-radio-button>
               <el-radio-button label="未发布">未发布</el-radio-button>
@@ -27,18 +27,19 @@
               </Dropdown>
             </div>
           </div>
-          <div class="showAction" v-show="isShowCheck">
-            <el-checkbox v-model="checkAll">全选</el-checkbox>
+          <div class="showAction" v-show="selectCard.length">
+            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"  @change="handleCheckAllChange">全选</el-checkbox>
             <span style="margin-left: 10px;">|</span>
             <span class="sum">已选择<span style="color:#252b30;margin: 0 5px;">{{selectCard.length}}</span>项目</span>
             <el-button size="mini">移动到</el-button>
             <el-button size="mini">下载</el-button>
             <el-button size="mini">删除</el-button>
+            <i class="el-icon-close" style="float:right;line-height: 100%"></i>
           </div>
         </div>
         <div class="main-body">
           <template v-for="t in cardList">
-            <topoImageCard :data="t" :key="t.id"></topoImageCard>
+            <topoImageCard :data="t" :key="t.id" @changeCheck="changeCheck"></topoImageCard>
           </template>
         </div>
       </el-main>
@@ -187,7 +188,7 @@ export default {
       ],
       checkAll: false,
       selectCard: [],
-      isShowCheck: false,
+      isIndeterminate: true, // 全选按钮
     };
   },
   methods: {
@@ -213,6 +214,23 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
+    changeCheck(v){
+      const index = this.selectCard.indexOf(v);
+      console.log(index);
+      if (index > -1) {
+        this.selectCard.splice(index, 1);
+      } else {
+        this.selectCard.push(v);
+      }
+    },
+    handleCheckAllChange(val) {
+      this.cardList = this.cardList.map(t => {
+        t.checked = val
+        return t;
+      }) 
+      this.selectCard = val ? this.cardList.map(t => {t.checked = true}) : [];
+      this.isIndeterminate = false;
+    },
   },
   components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
 };