资源目录后台管理页面开发

src/pages/homepage/components/cardWrap.vue

@@ -38,7 +38,7 @@
       </div>
       <div style="height: 72px; text-align: center; background: #fff; padding-top: 10px;">
         <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
-          <el-button slot="append" class="searchbtn" @click="jumpToSearchPage">
+          <el-button slot="append" class="searchbtn" @click="jumpToSearchPage()">
             <img src="../../../../static/homepage/u432.svg" alt="">
           </el-button>
         </el-input>

src/pages/homepage/components/searchPage.vue

@@ -27,13 +27,37 @@
             </div>
             <div :class="getCardClass()" v-for="(item, idx) in list" :key="idx" @click="jumpToDetailPage(item.id)">
               <!-- 主题库和专题库块 -->
-              <p v-if="activeName === 'first' || activeName === 'second'" class="title">
-                <span  @click.stop="">
-                  <el-checkbox v-if="pageType === 'collect' || pageType === 'background'" class="checkbox" v-model="item.checked" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
-                </span>
-                <img src="../../../assets/image/u652.svg" alt="">
-                实体名称：{{item.logicTbName}}
-              </p>
+              <div v-if="activeName === 'first' || activeName === 'second'" class="title title-block clearfix">
+                <p class="left">
+                  <span  @click.stop="">
+                    <el-checkbox v-if="pageType === 'collect' || pageType === 'background'" class="checkbox" v-model="item.checked" @change="(e) => checkboxChange(e, item.id)"></el-checkbox>
+                  </span>
+                  <img src="../../../assets/image/u652.svg" alt="">
+                  实体名称：{{item.logicTbName}}
+                </p>
+                <div class="right">
+                  <span v-if="item.isListing" class="right-item">
+                    <img src="../../../assets/image/u1723.png" alt="">
+                    已上架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="!item.isListing" class="active right-item"  @click="handleUp(item.id)">
+                      <img src="../../../assets/image/u1723.png" alt="">
+                      上架
+                    </span>
+                  </span>
+                  <span v-if="!item.isListing"  class="right-item">
+                    <img src="../../../assets/image/u1720.png" alt="">
+                    已下架
+                  </span>
+                  <span @click.stop="">
+                    <span v-if="item.isListing" class="active right-item" @click="handleDown(item.id)">
+                      <img src="../../../assets/image/u1720.png" alt="">
+                      下架
+                    </span>
+                  </span>
+                </div>
+              </div>
               <el-row v-if="activeName === 'first' || activeName === 'second'" style="color: rgb(91,91,91);line-height: 40px;">
                 <el-col :span="12">
                   英文名称：{{item.tbName}}
@@ -202,7 +226,8 @@ export default {
           apiDesc: 'degegwgwgwg',
           useDepart: '部门XXX',
           sysName: 'app-tfs',
-          desc: '暂无'
+          desc: '暂无',
+          isListing: true
         },
         {
           id: '222',
@@ -215,7 +240,8 @@ export default {
           apiDesc: 'degegwgwgwg',
           useDepart: '部门XXX',
           sysName: 'app-tfs',
-          desc: '暂无'
+          desc: '暂无',
+          isListing: false
         },
         {
           id: '333',
@@ -228,7 +254,8 @@ export default {
           apiDesc: 'degegwgwgwg',
           useDepart: '部门XXX',
           sysName: 'app-tfs',
-          desc: '暂无'
+          desc: '暂无',
+          isListing: true
         },
         {
           id: '444',
@@ -241,7 +268,8 @@ export default {
           apiDesc: 'degegwgwgwg',
           useDepart: '部门XXX',
           sysName: 'app-tfs',
-          desc: '暂无'
+          desc: '暂无',
+          isListing: true
         },
         {
           id: '555',
@@ -254,7 +282,8 @@ export default {
           apiDesc: 'degegwgwgwg',
           useDepart: '部门XXX',
           sysName: 'app-tfs',
-          desc: '暂无'
+          desc: '暂无',
+          isListing: true
         },
       ],
       currentPage: 1,
@@ -313,6 +342,12 @@ export default {
     batchOffShelf() {},
     checkboxChange(e, id) {
       console.log('e', e, 'id', id)
+    },
+    handleDown() {
+      console.log('down')
+    },
+    handleUp() {
+      console.log('up')
     }
   }
 };
@@ -363,6 +398,30 @@ export default {
           font-size: 18px;
           line-height: 30px;
         }
+        .title-block{
+          .left{
+            float: left;
+          }
+          .right{
+            float: right;
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            color: #666666;
+            font-size: 14px;
+            .right-item{
+              img{
+                width: 24px;
+                height: 21px;
+                vertical-align: middle;
+              }
+              margin-right: 10px;
+            }
+            .active{
+              color: #0000FF;
+              z-index: 10;
+            }
+          }
+        }
       }
       .heighten{
         height: 190px;
@@ -375,5 +434,12 @@ export default {
       }
     }
   }
+  .clearfix{
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
 }
 </style>