修改点赞与样式

src/views/appStoreCopy/index.vue

@@ -61,14 +61,16 @@
             <template v-if="dataList.length">
               <div v-for="(i, ind) in dataList" @click="openUrl(i.url)" :key="ind + 'a'" class="appBlock">
                 <div class="appBlockTop">
-                  <img class="appBlockTopImg" :src="i.json.icon" alt="" />
+                  <div style="position: relative;">
+                    <img class="appBlockTopImg" :src="i.json.icon" alt="" />
+                    <img style="position: absolute;top: 0;right: 0;width: 16px;" src="../../assets/images/appStoreCopy/appde.svg" alt="" />
+                  </div>
                   <div class="appBlockTopTit">{{ i.name }}</div>
                   <div style="display: flex;align-items: center;">
-                    <img src="../../assets/images/appStoreCopy/appde.svg" alt="" />
-                    <div style="display: flex;gap: 5px;margin-left: 8px;">
+                    <div style="display: flex;gap: 5px;">
                       <span class="ATag">{{ i.label == 'workflow' ? '工作流' :'智能体' }}</span>
-                      <span class="ATag">
-                        <img :src="i.tag == 1 || !i.tag ?
+                      <span class="ATag" v-if="i.tag">
+                        <img style="width: 30%;" :src="i.tag == 1 || !i.tag ?
                               require('../../assets/images/appStoreCopy/dul.svg') 
                               : require('../../assets/images/appStoreCopy/hz.svg')" 
                               alt=""> {{ i.tag == '1' || !i.tag ? '官方' :'精选' }}
@@ -345,6 +347,8 @@ export default {
     },
     // 添加收藏0 喜欢2
     addAllOP(val,typeL){
+      console.log(val,typeL);
+
       let params = [
           {
             uid: this.userinfo.userid, 
@@ -355,10 +359,22 @@ export default {
         ]
         insert_appStoreSave(params)
           .then(res => {
-            console.log(res);
-            this.getData(this.tabPage)
-            // this.getAllOP(0)
-            // this.getAllOP(2)
+            // console.log(res);
+            // this.getData(this.tabPage)
+            if (typeL == 0) {
+                this.dataList.forEach(e=>{
+                  if (e.id == val.id) {
+                    e.collectCount = e.collectCount + 1
+                  }
+                })
+            }else{
+                this.dataList.forEach(e=>{
+                  if (e.id == val.id) {
+                    e.likeCount = e.likeCount+1
+                  }
+                })
+            }
+            this.getAllOP(typeL)
           })
           .catch(err => {
             console.log(err)
@@ -367,6 +383,8 @@ export default {
     },
     // 删除收藏0 喜欢2
     delAllOP(val,type){
+      console.log(val,type);
+      
         let kD = ''
         if (type == 0) {
            kD = this.collList.find(e => val === e.id )
@@ -384,8 +402,22 @@ export default {
         delete_appStoreSave(params)
           .then(res => {
             console.log(res);
-              this.getData(this.tabPage)
-              // this.getAllOP(0)
+              // this.getData(this.tabPage)
+
+              if (type == 0) {
+                  this.dataList.forEach(e=>{
+                    if (e.id == val) {
+                      e.collectCount = e.collectCount-1
+                    }
+                  })
+              }else{
+                  this.dataList.forEach(e=>{
+                    if (e.id == val) {
+                      e.likeCount = e.likeCount-1
+                    }
+                  })
+              }
+              this.getAllOP(type)
               // this.getAllOP(2)
           })
           .catch(err => {
@@ -556,19 +588,21 @@ export default {
   }
 }
 .appBlocks {
-  display: grid;
   position: relative;
-  grid-template-columns: repeat(2, 1fr);
-  // grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+ 
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); /* 自适应列 */
+  align-items: start;
   padding: 10px;
   box-sizing: border-box;
-  gap: 10px;
-  grid-auto-rows: 150px; /* 统一高度 */
   background: #f9f8f8;
   overflow: auto;
+  gap: 10px;
   .appBlock {
-    min-width: 100px;
-    height: 100%;
+    //  align-self: center;
+    // width: calc(50% - 10px);
+    width: 100%;
+    // height: 100%;
     background: #f8f8f8;
     border-radius: 10px;
     display: flex;
@@ -610,6 +644,7 @@ export default {
         box-sizing: border-box;
         display: flex;
         align-items: center;
+        flex-shrink: 0;
         img{
           margin-right: 2px;
         }
@@ -619,14 +654,18 @@ export default {
       background: #f8f8f8;
       display: flex;
       padding: 10px;
-      flex: 1;
       align-items: center;
       border-radius: 0 0 10px 10px;
       justify-content: space-between;
+      font-size: 14px !important;
       box-sizing: border-box;
       .appBlockBotCol {
         display: flex;
+        align-items: center;
         gap: 8px;
+        img{
+          width: 20px;
+        }
       }
     }
   }