主页布局添加勾选框和发布按钮

src/layout/components/Header/QRcodePopover.vue

@@ -28,7 +28,6 @@
       <el-button
         style="width: 102px; background-color: rgb(24, 144, 255); border: none"
         type="primary"
-        round
         >保存到相册
       </el-button>
     </div>

src/views/page-config/PageConfig.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="flex flex-col page-config-content">
     <el-card shadow="never">
-      <div style="display: flex">
+      <div style="display: flex; justify-content: space-between">
         <el-input v-model="searchCom" class="search-btn w-50" placeholder="搜索公司主页">
           <template #suffix>
             <el-icon @click="searchPageConfig" @keyup.enter="searchPageConfig"><Search /></el-icon>
           </template>
         </el-input>
+        <el-button
+          style="width: 102px; background-color: rgb(24, 144, 255); border: none"
+          type="primary"
+          @click="broadcast"
+        >
+          主页发布
+        </el-button>
       </div>
     </el-card>
     <el-card shadow="never" class="flex-1" style="margin-top: 8px">
@@ -16,12 +23,20 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
   import { Search } from '@element-plus/icons-vue';
   import PageMain from './component/PageMain.vue';
 
   const searchCom = ref('');
 
   const searchPageConfig = () => {};
+
+  const broadcast = () => {
+    ElMessage({
+      message: '发布已勾选的主页',
+      type: 'success',
+    });
+  };
 </script>
 
 <style lang="scss" sctep>

src/views/page-config/component/PageMain.vue

@@ -28,14 +28,15 @@
         </div>
 
         <div class="pic-word">
-          <img src="~@/assets/icons/file.png" alt="" />
+          <el-checkbox @change="toSend(item.id, $event)" />
+          <img src="~@/assets/icons/file.png" alt="" style="margin-left: 5px" />
           <div class="pic-name">{{ item.name }}</div>
           <img
             v-show="item.id === IconId"
             src="~@/assets/icons/del.png"
             alt=""
+            style="margin-left: 20px"
             @click.stop="deleteItem(item)"
-            class="del-icon"
           />
         </div>
       </div> </div
@@ -96,6 +97,17 @@
     });
   };
 
+  let sendId = new Set();
+  const toSend = (id, v) => {
+    if (v) {
+      sendId.add(id);
+    } else {
+      if (sendId.has(id)) {
+        sendId.delete(id);
+      }
+    }
+  };
+
   const deleteItem = (item) => {
     // 处理删除逻辑
     delCompanyLayout(item.id).then(() => {
@@ -196,10 +208,10 @@
   }
 
   .pic-word {
-    position: relative;
     display: flex;
-    padding-left: 16px;
-    padding-top: 13px;
+    flex-direction: row;
+    align-items: center;
+    padding: 5px 15px;
   }
   .pic-name {
     margin-left: 8px;
@@ -207,9 +219,9 @@
     font-size: 12px;
   }
 
-  .del-icon {
-    position: absolute;
-    right: 17px;
-    bottom: 3px;
-  }
+  // .del-icon {
+  //   position: absolute;
+  //   right: 17px;
+  //   bottom: 3px;
+  // }
 </style>