0.0.17

修改样式完成

src/styles/global.less

@@ -1,4 +1,5 @@
  /*1.页面布局 start------------------------------------------------------------>*/
+ //页面布局样式
 .layerBox_search {
   margin:30px 30px 10px 30px;
   background: #fff;
@@ -16,6 +17,9 @@
     .el-cascader--medium {
       width:100%;
     }
+    .el-select {
+      width:100%;
+    }
   }
   .el-row {
     >div:nth-child(1){
@@ -51,6 +55,7 @@
   padding-right:30px;
   padding-bottom:30px;
 }
+
 //列表中的按钮样式
 .listBtnBox{
   display:flex;
@@ -58,9 +63,9 @@
   justify-content: center;
 }
 .listDeleteBtn,.listEditBtn,.listMainBtn {
-  width:76px;
-  height:36px;
-  line-height:36px;
+  width:70px;
+  height:28px;
+  line-height:28px;
   text-align:center;
   border-radius: 8px;
   margin-left:10px;
@@ -90,6 +95,111 @@
 .listMainBtn:hover {
   background:#CAD9CB;
 }
+
+//表单样式微调
+//1.网站列表
+.footerBtnbox {
+  text-align: center;
+}
+.formDiv {
+  .el-cascader {
+    width:100%;
+  }
+}
+.delete-button {
+  width:30px;
+  height:30px;
+  line-height: 30px;
+  text-align:center;
+  border-radius: 50%;
+  position: absolute;
+  top: 60px;
+  left: 60px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  z-index: 999; /* 确保删除按钮在图片上方 */
+}
+.delete-button:hover {
+  background: rgba(255, 0, 0, 0.7);
+}
+.askBox {
+  position: relative;
+  i {
+    position: absolute;
+    top:1px;
+    right:-5px;
+    width:10px;
+    height:10px;
+    color:#A9A9A9;
+  }
+}
+
+//logo上传
+.chooseImgDiv {
+  width: 140px;
+  height:140px;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  color:#5570F1;
+  font-size:14px;
+  img {
+    display:block;
+  }
+}
+.uploaderBox {
+  .avatar-uploader{
+    width: 140px;
+    height:140px;
+    border: 1px solid #d9d9d9;
+    border-radius: 12px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader {
+    border-color: #d9d9d9;
+  }
+}
+.avatar-uploader-icon {
+  font-size: 20px;
+  color: #8c939d;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+}
+.avatar {
+  width: 140px;
+  height: 140px;
+  display: block;
+}
+
+//2.导航池
+.windowTitle {
+  display:flex;
+  padding-bottom:20px;
+  font-size:16px;
+  font-weight: bold;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+  .webNavTitle {
+    width:120px;
+    text-align:right;
+    margin-right:20px;
+  }
+  .webNavTitleRight {
+    width:100%;
+    text-align: center;
+  }
+}
+//关联导航池
+.layerBoxLineTwo{
+  padding-top: 30px;
+}
+
 /*页面布局 end------------------------------------------------------------>*/
 
 

src/styles/index.scss

@@ -211,4 +211,22 @@ aside {
 .el-pagination .btn-prev, .el-pagination .btn-next {
   background:none
 }
+.el-dialog__headerbtn .el-dialog__close {
+  color: #1C1D22;
+  background: #FFF2E2;
+  border-radius: 8px;
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  font-size: 18px;
+}
+.el-tag.el-tag--info .el-tag__close:hover {
+  background: #8b8b8b;
+}
+.el-tag.el-tag--info {
+  color: #333333;
+  border: 1px solid #dcdfe6;
+  background: #f2f2f2;
+}
 //此处为element的全局覆盖样式 end---------------------------------------->

src/views/news/NewList.vue

@@ -2,57 +2,67 @@
   <div class="mainBox">
     <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
-      <el-row>
-        <el-col :span="8">
-          <div class="searchBox">
-            <div class="searchTitle">资讯题目：</div>
-            <el-input placeholder="请输入资讯题目" autocomplete="off" v-model="getApiData.title"/>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="searchBox">
-            <div class="searchTitle">导航池名称：</div>
-            <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.catid"/>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="searchBox">
-            <div class="searchTitle">作者：</div>
-            <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.author"/>
-          </div>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <div class="searchBox">
-            <div class="searchTitle">是否引用外链：</div>
-            <el-select v-model="getApiData.islink" placeholder="请选择..">
-              <el-option label="否" value="0"></el-option>
-              <el-option label="是" value="1"></el-option>
-            </el-select>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="searchBox">
-            <div class="searchTitle">资讯状态：</div>
-            <el-select v-model="getApiData.status" placeholder="请选择..">
-              <el-option label="隐藏" value="0"></el-option>
-              <el-option label="显示" value="1"></el-option>
-              <el-option label="已删除" value="404"></el-option>
-            </el-select>
-          </div>
-        </el-col>
-      </el-row>
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">资讯题目：</div>
+              <el-input placeholder="请输入资讯题目" autocomplete="off" v-model="getApiData.title"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">导航池名称：</div>
+              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.catid"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">作者：</div>
+              <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.author"/>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="layerBoxLineTwo">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">引用外链：</div>
+              <el-select v-model="getApiData.islink" placeholder="请选择..">
+                <el-option label="否" value="0"></el-option>
+                <el-option label="是" value="1"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">资讯状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择..">
+                <el-option label="隐藏" value="0"></el-option>
+                <el-option label="显示" value="1"></el-option>
+                <el-option label="已删除" value="404"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
     </div>
+    
     <div class="layerBoxNoBg">
-      <el-button @click="clearSearchList">重置</el-button>
-      <el-button type="primary" style="margin-right:20px" @click="getData">搜索</el-button>
-      <el-button type="success" @click="goCreat">发布资讯</el-button>
+      <div>
+        <el-button type="primary" @click="goCreat">发布资讯</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData">搜索</el-button>
+      </div>
     </div>
     <!--搜索功能 end------------------------------------------------------------>
 
     <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
@@ -77,10 +87,12 @@
             <el-table-column prop="level" label="排序" width=""></el-table-column>
             <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
             <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
-            <el-table-column fixed="right" label="操作" width="120">
+            <el-table-column fixed="right" label="操作" width="200">
               <template slot-scope="scope">
-                <el-button @click.native.prevent="deleteRow(scope.row.id, tableData)" type="text" size="small">移除</el-button>
-                <el-button @click.native.prevent="goEdit(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
               </template>
             </el-table-column>
           </el-table>
@@ -88,7 +100,7 @@
       </el-row>
     </div>
     <!--分页 start------------------------------------------------------------>
-    <div class="layerBox alignBox">
+    <div class="alignBox">
       <el-row>
         <el-col :span="24">
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
@@ -101,10 +113,19 @@
 </template>
 
 <script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
 export default {
+  components: {
+    tableTitle,//表格标题
+  },
   data() {
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"资讯列表",
       tableData:[],//内容
       editId:0,//要修改的网站id
       getApiData:{
@@ -140,7 +161,7 @@ export default {
         this.allCount = res.data.count; //给与总条数
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
@@ -161,13 +182,13 @@ export default {
           });
         }).catch(() => {
           this.$message({
-            type: 'info',
+            type: 'warning',
             message: '网络错误，请重试！'
           });
         })
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '已取消删除'
         });
       });
@@ -187,7 +208,7 @@ export default {
         }
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '已取消删除'
         });
       });
@@ -243,56 +264,5 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .layerBox_search {
-    margin:30px 30px 10px 30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 0 20px;
-    box-sizing: border-box;
-    overflow:hidden;
-    .el-row {
-      margin-bottom:20px;
-    }
-    .searchTitle {
-      font-size:14px;
-      white-space:nowrap;
-    }
-    .searchBox {
-      display:flex;
-      align-items: center;
-      padding-right:20px;
-    }
-  }
-  .layerBox {
-    margin:30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 20px 20px;
-    box-sizing: border-box;
-  }
-  .layerBoxNoBg {
-    margin:0 30px 0 30px;
-    text-align: right;
-  }
-  .alignBox {
-    text-align:center
-  }
-  /*弹出窗口*/
-  .windowTitle {
-    display:flex;
-    padding-bottom:20px;
-    font-size:16px;
-    font-weight: bold;
-    box-sizing: border-box;
-    margin-bottom: 20px;
-    .webNavTitle {
-      width:120px;
-      text-align:right;
-      margin-right:20px;
-    }
-    .webNavTitleRight {
-      width:100%;
-      text-align: center;
-    }
-  }
+
 </style>

src/views/news/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/news/creatNews.vue

@@ -1,98 +1,139 @@
 <template>
   <div class="mainBox">
     <div class="layerBox">
-      <el-form :model="form" ref="form" :rules="formRules">
-        <el-form-item label="资讯题目：" prop="title">
-          <el-input v-model="form.title" autocomplete="off"></el-input>
-          <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
-        </el-form-item>
-        <div v-if="form.islink==1">
-          <el-form-item label="导航池名称：" prop="category_name">
-            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+          <el-form-item label="资讯题目：" prop="title" class="custom-align-right">
+            <template #label>
+              <span class="askBox">
+                资讯题目：
+                <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </span>
+            </template>
+            <el-input v-model="form.title" autocomplete="off"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
           </el-form-item>
-          <el-form-item label="外链地址：" prop="linkurl">
-            <el-input v-model="form.linkurl" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="作者：" prop="author">
-            <el-input v-model="form.author" autocomplete="off"></el-input>
-          </el-form-item>
-        </div>
-        <div v-if="form.islink==0">
-          <el-form-item label="导航池名称：" prop="category_name">
-            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
-          </el-form-item>
-          <el-form-item label="推荐等级：" prop="level">
-            <el-input v-model="form.level" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="缩略图：">
-            <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-                <img v-if="imgUrl" :src="imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-            </div>
-          </el-form-item>
-          <el-form-item label="资讯关键词：" prop="keyword">
-            <el-input v-model="form.keyword" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="资讯描述：" prop="introduce">
-            <el-input type="textarea" v-model="form.introduce"></el-input>
-          </el-form-item>
-          <div class="QuillTitle">
-            <span>* </span>资讯内容：
-            <el-button @click="toggleSourceMode">
-              {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
-            </el-button>
+          <div v-if="form.islink==1"> 
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
+              <el-input v-model="form.linkurl" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off"></el-input>
+            </el-form-item>
           </div>
-          <el-form-item label="" prop="content">
-            <div class="editor-container">
-              <div v-if="showHtml">
-                <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
+          <div v-if="form.islink==0">
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="推荐等级：" prop="level" class="custom-align-right">
+              <el-input v-model="form.level" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="缩略图：" class="custom-align-right">
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
               </div>
-              <div v-else>
-                <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
+            </el-form-item>
+            <el-form-item label="资讯关键词：" prop="keyword" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  网站关键词：
+                  <el-tooltip class="item" effect="dark" content="资讯关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input v-model="form.keyword" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="资讯描述：" prop="introduce" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯描述：
+                  <el-tooltip class="item" effect="dark" content="网站描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input type="textarea" v-model="form.introduce" class="custom-textarea"></el-input>
+            </el-form-item>
+            <div class="QuillTitle">
+              <span>* </span>资讯内容：
+              <div @click="toggleSourceMode" class="QuillModelBtn">
+                {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
               </div>
-              <!-- 多图上传隐藏的input -->
-              <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
             </div>
-          </el-form-item>
-          <el-form-item label="作者：" prop="author">
-            <el-input v-model="form.author" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="浏览量：">
-            <el-input v-model="form.hits" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="是否为原创：" prop="is_original">
-            <el-radio v-model="form.is_original" label="1">是</el-radio>
-            <el-radio v-model="form.is_original" label="0">不是</el-radio>
-          </el-form-item>
-          <div v-if="form.is_original==0">
-            <el-form-item label="来源名称：" prop="copyfrom">
-              <el-input v-model="form.copyfrom" autocomplete="off"></el-input>
+            <el-form-item label="" prop="content">
+              <div class="editor-container">
+                <div v-if="showHtml">
+                  <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
+                </div>
+                <div v-else>
+                  <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
+                </div>
+                <!-- 多图上传隐藏的input -->
+                <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
+              </div>
             </el-form-item>
-            <el-form-item label="来源链接：" prop="linkurl">
-              <el-input v-model="form.linkurl" autocomplete="off"></el-input>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="浏览量：" class="custom-align-right">
+              <el-input v-model="form.hits" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
+              <el-radio v-model="form.is_original" label="1">是</el-radio>
+              <el-radio v-model="form.is_original" label="0">不是</el-radio>
+            </el-form-item>
+            <div v-if="form.is_original==0">
+              <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
+                <el-input v-model="form.copyfrom" autocomplete="off"></el-input>
+              </el-form-item>
+              <el-form-item label="来源链接：" prop="linkurl" class="custom-align-right">
+                <el-input v-model="form.linkurl" autocomplete="off"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item label="资讯状态：" class="custom-align-right" style="width: 100%;">
+              <el-select v-model="form.status" placeholder="请选择..">
+                <el-option label="已发布" :value="1"></el-option>
+                <el-option label="待发布" :value="0"></el-option>
+              </el-select>
             </el-form-item>
           </div>
-          <el-form-item label="资讯状态：">
-            <el-select v-model="form.status" placeholder="请选择..">
-              <el-option label="隐藏" :value="0"></el-option>
-              <el-option label="显示" :value="1"></el-option>
-              <el-option label="404" :value="404"></el-option>
-            </el-select>
-          </el-form-item>
         </div>
       </el-form>
     </div>
     <div class="bottomBtnBox">
-      <el-button type="warning" @click="editToServe" v-if="editStatus==true">修改资讯</el-button>
-      <el-button type="success" @click="addToServe" v-else>发布资讯</el-button>
-      <el-button @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">编辑资讯</el-button>
+      <el-button type="primary" @click="addToServe" v-else>发布资讯</el-button>
+      <el-button type="info" @click="returnPage">返回</el-button>
     </div>
   </div>
 </template>
 
 <script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
 import { quillEditor } from 'vue-quill-editor';
 import 'quill/dist/quill.snow.css';
 import ImageResize from 'quill-image-resize-module';
@@ -104,7 +145,8 @@ Quill.register('modules/imageResize', ImageResize);
 
 export default {
   components: {
-    quillEditor
+    quillEditor,
+    tableTitle
   },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -128,7 +170,7 @@ export default {
     return {
       //1.表单项 start ------------------------------------------------------------>
       editStatus:false,
-
+      tableDivTitle:"添加资讯",
       //提交表单
       form: {
         //1.1使用了外链
@@ -147,7 +189,7 @@ export default {
         is_original:"",//是否为原创 0非 1是
         copyfrom:"",//来源名称
         fromurl:"",//来源地址
-        status:""//状态 0隐藏 1显示 404已删除
+        status:""//状态 0待发布 1已发布 404已删除
       },
       //1.2 表单验证规则
       formRules: {
@@ -605,36 +647,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .layerBox_search {
-    margin:30px 30px 10px 30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 20px 20px;
-    box-sizing: border-box;
-    .searchTitle {
-      font-size:14px;
-      white-space:nowrap;
-    }
-    .searchBox {
-      display:flex;
-      align-items: center;
-      padding-right:20px;
-    }
-  }
-  .layerBox {
-    margin:30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 20px 20px;
-    box-sizing: border-box;
-  }
-  .layerBoxNoBg {
-    margin:0 30px 0 30px;
-    text-align: right;
-  }
-  .alignBox {
-    text-align:center
-  }
   .bottomBtnBox {
     margin:0 30px 30px 30px;
     text-align:center;
@@ -645,6 +657,17 @@ export default {
     font-size: 14px;
     color: #606266;
     font-weight:bold;
+    padding-left: 30px;
+    span{
+      color: #ff4949
+    }
+    .QuillModelBtn {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
   }
   .editor-container {
     height: 420px;
@@ -656,36 +679,19 @@ export default {
   .ql-editor {
     height: 320px;
   }
-  //文件上传
-  .uploaderBox {
-    .avatar-uploader{
-      width: 300px;
-      border: 1px dashed #d9d9d9;
-      height: 150px;
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-uploader {
-      border-color: #409EFF;
-    }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
   }
-  .avatar-uploader-icon {
-    font-size: 20px;
-    color: #8c939d;
-    width: 300px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
   }
-  .avatar {
-    width: 300px;
-    height: 150px;
-    display: block;
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
   }
-
-  .my-quill-editor {
-    height: 320px;
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
   }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>

src/views/website/WebsiteList.vue

@@ -2,7 +2,8 @@
   <div class="mainBox">
     <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
-      <el-row>
+      <div class="layerBoxLine">
+        <el-row>
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">网站名称：</div>
@@ -22,6 +23,7 @@
           </div>
         </el-col>
       </el-row>
+      </div>
     </div>
     <div class="layerBoxNoBg">
       <div>
@@ -42,7 +44,15 @@
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
             <el-table-column prop="column_name" label="上级网系"></el-table-column>
-            <el-table-column prop="website_url" label="网站地址"></el-table-column>
+            <el-table-column label="网站地址">
+              <template slot-scope="scope">
+                <div>
+                  <div v-for="(url, index) in scope.row.website_url" :key="index">
+                    {{ url }}
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="city_name" label="网站城市"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column prop="updated_at" label="修改时间"></el-table-column>
@@ -72,7 +82,7 @@
     <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
     <el-dialog title="添加网站" :visible.sync="windowStatus">
       <!--弹出框2：内部模板弹出框 start------------------------------------------------------------>
-      <el-dialog width="32%" title="皮肤库" :visible.sync="innerVisible" append-to-body>
+      <el-dialog width="39%" title="皮肤库" :visible.sync="innerVisible" append-to-body>
         <div class="templateListBox">
           <div v-for="item in TemplateList" class="templateList" @click="useThatTemplate(item.id,item.template_name,item.template_img)">
             <img :src="item.template_img" class="templateImg">
@@ -128,7 +138,7 @@
             </div>
           </el-form-item>
           <el-form-item label="上级网系：" :label-width="formLabelWidth" prop="website_column_arr_id" class="custom-align-right">
-            <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr" @change="AppointWebsiteColumn"></el-cascader>
+            <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr"></el-cascader>
           </el-form-item>
           <el-form-item label="城市：" :label-width="formLabelWidth" class="custom-align-right">
             <CityCascader v-model="form.city_arr_id" @update-city-id="updateFormCityId"></CityCascader>
@@ -157,7 +167,6 @@
                       <div>选择图片</div>
                     </div>
                   </div>
-
                 </el-upload>
                 <!-- 删除按钮，当鼠标悬浮时显示 -->
                 <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
@@ -202,8 +211,13 @@
           <div class="webSiteTemplate" @click="getTemplateList">
             <div class="webSiteTitle">模板：</div>
             <div class="webSiteTemplateImg">
-              <img v-if="TemplateImg" :src="TemplateImg" alt="Selected Template Image" class="selectWebSiteTemplateImg">
-              <img v-else src="@/assets/public/upload/noImage.png" alt="No Image">
+              <div>
+                <img v-if="TemplateImg" :src="TemplateImg" class="selectWebSiteTemplateImg">
+                <div v-else>
+                  <img src="@/assets/public/upload/noImage.png">
+                  <div class="webSiteTemplateText">皮肤库</div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -260,7 +274,7 @@ export default {
       }
     }
     let self = this;
-    //0.全局操作 end ------------------------------------------------------------>
+    //0.全局操�� end ------------------------------------------------------------>
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
       tableDivTitle:"网站列表",
@@ -287,7 +301,7 @@ export default {
       //3.1 表单收集的数据
       form: {
         website_name: '',//需要提交的网站名称
-        website_url:[//需要绑定的网站地址
+        website_url:[//需要绑定的网站���址
           {url:"",show:true},
           {url:"",show:false},
           {url:"",show:false},
@@ -337,16 +351,6 @@ export default {
     }
   },
   methods: {
-    updateCityId(value) {
-      // 这里可以处理选择后的回调逻辑
-      console.log("城市ID已更新:", value);
-      // 可以在此处执行额外逻辑
-      this.getApiData.city_id = value;
-    },
-    updateFormCityId(value){
-      console.log("城市ID已更新:", value);
-      this.form.city_arr_id = value;
-    },
     //1.列表和分页相关 start ------------------------------------------------------------>
     //1.1 开始请求列表信息方法
     getData(type){
@@ -375,6 +379,10 @@ export default {
           if(item.city_name==null){item.city_name="--"}
           newData.push(item)
         }
+        //格式化网站地址
+        // res.data.rows.forEach(item => {
+        //   item.website_url = item.website_url.join(', ');
+        // });
         this.tableData = newData; //给与内容
         this.allCount = res.data.count; //给与总条数
       }).catch(() => {
@@ -400,13 +408,13 @@ export default {
           });
         }).catch(() => {
           this.$message({
-            type: 'info',
+            type: 'warning',
             message: '网络错误，请重试！'
           });
         })
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '已取消删除'
         });
       });
@@ -432,6 +440,13 @@ export default {
       this.getApiData.pageSize = 10;
       this.getData();
     },
+    //1.7搜索栏的城市选择器
+    updateCityId(value) {
+      // 这里可以处理选择后的回调逻辑
+      console.log("城市ID已更新:", value);
+      // 可以在此处执行额外逻辑
+      this.getApiData.city_id = value;
+    },
     //列表和分页相关 end ------------------------------------------------------------>
 
     //2.弹出框设置 start ------------------------------------------------------------>
@@ -445,6 +460,32 @@ export default {
       this.windowStatus = false;
       this.clearToServe();
     },
+    //2.3 重置窗口内容
+    clearToServe(){
+      //还原表单
+      this.form.website_name = "";
+      this.form.website_column_arr_id = "";
+      this.form.website_url = [
+        {url:"",show:true},
+        {url:"",show:false},
+        {url:"",show:false},
+        {url:"",show:false},
+        {url:"",show:false}
+      ];
+      this.form.city_arr_id = [0];
+      this.form.logo = "";
+      this.form.title = "";
+      this.form.keywords = "";
+      this.form.description = "";
+      this.form.template_id = "";
+      //还原logo缩略图
+      this.logoUrl = "";
+      //还原模板
+      this.TemplateList = [];
+      this.getTemplateData.page = 1;
+      this.TemplateImg = "";
+      this.TemplateallCount = 0;
+    },
     //弹出框设置 end ------------------------------------------------------------>
 
     //3.添加新网站 start ------------------------------------------------------------>
@@ -480,10 +521,6 @@ export default {
         return newItem;
       });
     },
-    //3.2 当网系发生变化的时候
-    AppointWebsiteColumn(value){
-      console.log(value);
-    },
     //3.2 开始添加内容
     addData(){
       //先获取所有网系
@@ -504,7 +541,12 @@ export default {
       this.form.website_url[key].show=false;
       this.form.website_url[key].url="";
     },
-    //3.5 上传图片操作
+    //3.5 弹出框的城市选择器
+    updateFormCityId(value){
+      console.log("城市ID已更新:", value);
+      this.form.city_arr_id = value;
+    },
+    //3.6 上传图片操作
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
       const isPNG = file.type === 'image/png';
@@ -540,7 +582,7 @@ export default {
       // 删除图片
       this.logoUrl = ''; // 清空图片 URL
     },
-    //3.6 提交表单
+    //3.7 提交表单
     addToServe(){
       //先进行验证
       this.$refs.form.validate(valid => {
@@ -573,34 +615,8 @@ export default {
             });
           })
         }
-
       })
     },
-    //3.7 清空提交窗口
-    clearToServe(){
-      //重置窗口
-      this.form.website_name = "";
-      this.form.website_column_arr_id = "";
-      this.form.website_url = [
-        {url:"",show:true},
-        {url:"",show:false},
-        {url:"",show:false},
-        {url:"",show:false},
-        {url:"",show:false}
-      ];
-      this.form.city_arr_id = [0];
-      this.form.logo = "";
-      this.form.title = "";
-      this.form.keywords = "";
-      this.form.description = "";
-      this.form.template_id = "";
-      //还原logo缩略图
-      this.logoUrl = "";
-      //还原模板
-      this.TemplateList = [];
-      this.getTemplateData.page = 1;
-      this.TemplateallCount = 0;
-    },
     //添加新网站 end ------------------------------------------------------------>
 
     //4.选择模板 start ------------------------------------------------------------>
@@ -616,7 +632,7 @@ export default {
         let data = res.data.rows;
         for(let item of data){
           //item.template_img
-          let imgSrc = item.template_img.replace(/^{|}$/g, '').split(',').map(item => item.replace(/"/g, ''));
+          let imgSrc = item.template_img;
           item.template_img = imgSrc[0];
         }
         this.TemplateList = data;
@@ -624,7 +640,7 @@ export default {
         this.TemplateallCount = res.data.count;
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
@@ -700,37 +716,43 @@ export default {
         //回显模板信息
         this.form.template_id = res.data.template_id;
         this.TemplateName = res.data.template_name;
+        this.TemplateImg = JSON.parse(res.data.template_img)[0];
       })
 
       this.editBtn = true;//显示编辑按钮
     },
     //5.2修改表单
     editToServe(){
-      //提交之前把域名列表转换成数组
-      let webSiteArray = [];
-      for(let item of this.form.website_url){
-        if(item.url!=""){
-          webSiteArray.push(item.url)
+      //执行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //提交之前把域名列表转换成数组
+          let webSiteArray = [];
+          for(let item of this.form.website_url){
+            if(item.url!=""){
+              webSiteArray.push(item.url)
+            }
+          }
+          //循环完毕 重置提交的url
+          this.form.website_url = webSiteArray;
+          this.form.id = this.editId;
+          //提交表单
+          this.$store.dispatch('pool/updateWebsite',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功修改网站信息！'
+            });
+            //清空并退出
+            this.closeWindow();
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
         }
-      }
-      //循环完毕 重置提交的url
-      this.form.website_url = webSiteArray;
-      this.form.id = this.editId;
-      //提交表单
-      this.$store.dispatch('pool/updateWebsite',this.form).then(res=> {
-        //汇报结果
-        this.$message({
-          type: 'success',
-          message: '已成功修改网站信息！'
-        });
-        //清空并退出
-        this.closeWindow();
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
-      })
+      }) 
     },
     //编辑旧网站 end ------------------------------------------------------------>
   },
@@ -746,8 +768,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-  /*表单样式 start------------------------------------------------------------>*/
-  //1.模板
+  /*表单特殊样式 start------------------------------------------------------------>*/
+  //1.1 模板表单
   .webSite {
     background:#f0f2f5;
     width:200px;
@@ -767,7 +789,7 @@ export default {
     }
   }
   .webSiteBtn {
-    padding:20px 0;
+    padding:50px 0 0 0;
     text-align:center;
   }
   .formLabelFloatBox {
@@ -799,18 +821,15 @@ export default {
       margin-bottom: 10px;
       border:1px solid #fff;
       padding: 5px;
-      &:hover {
-        border:1px solid #1890ff;
-        cursor: pointer;
-      }
-      box-sizing: border-box;
       .templateImg {
-        width: 100px;
-        height:65px;
+        width: 129px;
+        height:157px;
+        border-radius: 8px;
+        cursor: pointer;
       }
     }
   }
-  //2.弹窗分页
+  //1.1 模板分页
   .pageNumBox {
     text-align: center;
     padding-top:20px;
@@ -819,47 +838,7 @@ export default {
     margin-left: 10px;
     line-height: 36px;
   }
-  //3.logo上传
-  .chooseImgDiv {
-    width: 140px;
-    height:140px;
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    color:#5570F1;
-    font-size:14px;
-    img {
-      display:block;
-    }
-  }
-  .uploaderBox {
-    .avatar-uploader{
-      width: 140px;
-      height:140px;
-      border: 1px solid #d9d9d9;
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-uploader {
-      border-color: #d9d9d9;
-    }
-  }
-  .avatar-uploader-icon {
-    font-size: 20px;
-    color: #8c939d;
-    width: 60px;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-  }
-  .avatar {
-    width: 140px;
-    height: 140px;
-    display: block;
-  }
-  //选择模板
+  //1.2 模板缩略图
   .webSiteTemplateImg {
     width: 140px;
     height: 140px;
@@ -871,41 +850,22 @@ export default {
     .selectWebSiteTemplateImg {
       width: 140px;
       height: 140px;
+      border-radius: 12px;
       display: block;
     }
+    .webSiteTemplateText {
+      color: #5570F1;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+    }
     img {
       display: block;
     }
   }
   /*表单样式 end------------------------------------------------------------>*/
 
-  //表单微调 start------------------------------------------------------------>*/
-  .footerBtnbox {
-    text-align: center;
-  }
-  .formDiv {
-    .el-cascader {
-      width:100%;
-    }
-  }
-  .delete-button {
-    width:30px;
-    height:30px;
-    line-height: 30px;
-    text-align:center;
-    border-radius: 50%;
-    position: absolute;
-    top: 60px;
-    left: 60px;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    cursor: pointer;
-    transition: background 0.3s ease;
-    z-index: 999; /* 确保删除按钮在图片上方 */
-  }
-  .delete-button:hover {
-    background: rgba(255, 0, 0, 0.7);
-  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;
   }
@@ -915,17 +875,6 @@ export default {
   ::v-deep .custom-align-right .el-form-item__label {
     text-align: right; /* 设置标签文字右对齐 */
   }
-  .askBox {
-    position: relative;
-    i {
-      position: absolute;
-      top:0;
-      right:-5px;
-      width:12px;
-      height:12px;
-      color:#A9A9A9;
-    }
-  }
-  //表单微调 end------------------------------------------------------------>*/
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>
 

src/views/website/categoryList.vue

@@ -25,7 +25,7 @@
     </div>
     <div class="layerBoxNoBg">
       <div>
-        <el-button type="success" @click="openWindow">添加导航池名称</el-button>
+        <el-button type="primary" @click="openWindow">添加导航池名称</el-button>
       </div>
       <div>
         <el-button @click="clearSearchList">重置</el-button>
@@ -36,6 +36,7 @@
 
     <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
@@ -43,6 +44,7 @@
             <el-table-column prop="name" label="导航池名称"></el-table-column>
             <el-table-column prop="department_name" label="行政职能部门"></el-table-column>
             <el-table-column prop="city_name" label="行政区划"></el-table-column>
+            <el-table-column prop="sort" label="权重"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column prop="updated_at" label="修改时间"></el-table-column>
             <el-table-column fixed="right" label="操作" width="200"  header-align="center">
@@ -78,7 +80,7 @@
             <el-input v-model="form.name" autocomplete="off"></el-input>
             <el-checkbox v-model="show_url" @change="ifUrl">引用外链</el-checkbox>
           </el-form-item>
-          <div v-if="form.is_url==1">
+          <div v-if="show_url==1">
             <el-form-item label="外链地址：" :label-width="formLabelWidth" prop="web_url" class="custom-align-right">
               <el-input v-model="form.web_url" autocomplete="off"></el-input>
             </el-form-item>
@@ -95,7 +97,7 @@
               <el-input v-model="form.sort" autocomplete="off"></el-input>
             </el-form-item>
           </div>
-          <div v-if="form.is_url==0">
+          <div v-if="show_url==0">
             <el-form-item label="关联职能部门：" :label-width="formLabelWidth" prop="department_arr_id" class="custom-align-right">
               <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader>
             </el-form-item>
@@ -156,10 +158,15 @@
 </template>
 
 <script>
+//表格标题
+import tableTitle from './components/tableTitle';
 //引入公用样式
 import '@/styles/global.less';
 
 export default {
+  components: {
+    tableTitle,//表格标题
+  },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
     //表单验证
@@ -195,6 +202,7 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"导航列表",
       tableData:[],//内容
       allCount:0,//总条数
       editId:0,//要修改的网站id
@@ -292,7 +300,7 @@ export default {
       formRules: {
         //网站名称不能为空
         name:[{required:true,trigger:'blur',validator:validateEmpty}],//导航池名称不能为空
-        web_url:[{required:true,trigger:'blur',validator:validateEmpty}],//外链地址不能为空
+        web_url:[{required:true,trigger:'blur',validator:validateEmpty}],//外链地址���能为空
         department_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择职能部门！',validator:validateDepartment}],
         city_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择行政区划！',validator:validateCity}],
         pid_arr: [{type:'array',required:true,trigger:'change',message:'请选择父级导航！',validator:validatePid}],
@@ -410,11 +418,11 @@ export default {
       }
 
       this.$store.dispatch('pool/getCategoryList',this.getApiData).then(res=> {
-        this.tableData = res.data.rows; //给与内容
+        this.tableData = res.data.rows; //��与内容
         this.allCount = res.data.count; //给与总条数
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
@@ -435,20 +443,20 @@ export default {
             });
           }else if(res.code==0){
             this.$message({
-              type: 'info',
+              type: 'warning',
               message: res.message
             });
           }
           this.getData();
         }).catch(() => {
           this.$message({
-            type: 'info',
+            type: 'warning',
             message: '网络错误，请重试！'
           });
         })
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '已取消删除'
         });
       });
@@ -504,7 +512,10 @@ export default {
         this.form.seo_keywords = "";
         this.form.seo_description = "";
         this.form.pid_arr = [];
-        this.$refs.form.clearValidate();
+        //存在验证的时候再清理
+        if (this.$refs.form && this.$refs.form.fields.some(field => field.validateState === 'error')) {
+          this.$refs.form.clearValidate();
+        }
       }
     },
     //弹出框设置 end ------------------------------------------------------------>
@@ -534,9 +545,10 @@ export default {
             });
             //清空并退出
             this.closeWindow();
+            this.getData();
           }).catch(() => {
             this.$message({
-              type: 'info',
+              type: 'warning',
               message: '网络错误，请重试！'
             });
           })
@@ -549,7 +561,7 @@ export default {
     //编辑导航池 start ------------------------------------------------------------>
     getDataMain(id){
       //先清空窗口
-      //this.clearToServe()
+      this.clearToServe(2)
       //打开输入窗口
       this.openWindow();
       //添加修改id
@@ -566,11 +578,10 @@ export default {
         //回显示是否使用外链
         if(res.data.is_url==1){
           this.show_url = true;
-        }else if(res.data.is_url==0){
+        }else if(res.data.is_url==0||res.data.is_url==null){
           this.show_url = false;
         }
         //回显外链
-        this.form.is_url=1;
         this.form.web_url = res.data.web_url;
 
         //回显行政区划
@@ -623,22 +634,29 @@ export default {
     },
     //修改表单
     editToServe(){
+
       this.form.id = this.editId;
-      //提交表单
-      this.$store.dispatch('pool/updateCategory',this.form).then(res=> {
-        //汇报结果
-        this.$message({
-          type: 'success',
-          message: '已成功修改导航池信息！'
-        });
-        //清空并退出
-        this.closeWindow();
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //提交表单
+          this.$store.dispatch('pool/updateCategory',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功修改导航池信息！'
+            });
+            //清空并退出
+            this.closeWindow();
+            this.getData();
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
       })
+
     }
     //编辑导航池 end ------------------------------------------------------------>
   },
@@ -654,72 +672,16 @@ export default {
 </script>
 
 <style scoped lang="less">
-  /*表单样式 start------------------------------------------------------------>*/
-  .windowTitle {
-    display:flex;
-    padding-bottom:20px;
-    font-size:16px;
-    font-weight: bold;
-    box-sizing: border-box;
-    margin-bottom: 20px;
-    .webNavTitle {
-      width:120px;
-      text-align:right;
-      margin-right:20px;
-    }
-    .webNavTitleRight {
-      width:100%;
-      text-align: center;
-    }
-  }
-  /*表单样式 end------------------------------------------------------------>*/
-
   //表单微调 start------------------------------------------------------------>*/
-  .footerBtnbox {
-    text-align: center;
-  }
-  .formDiv {
-    .el-cascader {
-      width:100%;
-    }
-  }
-  .delete-button {
-    width:30px;
-    height:30px;
-    line-height: 30px;
-    text-align:center;
-    border-radius: 50%;
-    position: absolute;
-    top: 60px;
-    left: 60px;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    cursor: pointer;
-    transition: background 0.3s ease;
-    z-index: 999; /* 确保删除按钮在图片上方 */
-  }
-  .delete-button:hover {
-    background: rgba(255, 0, 0, 0.7);
-  }
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;
   }
   ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
+    resize: none; /* 禁止用���拖拽调整大小 */
   }
   ::v-deep .custom-align-right .el-form-item__label {
     text-align: right; /* 设置标签文字右对齐 */
   }
-  .askBox {
-    position: relative;
-    i {
-      position: absolute;
-      top:-10px;
-      right:-5px;
-      width:12px;
-      height:12px;
-      color:#A9A9A9;
-    }
-  }
   //表单微调 end------------------------------------------------------------>*/
 </style>
+

src/views/website/editNavigation.vue

@@ -24,7 +24,7 @@
           </el-col>
         </el-row>
       </div>
-      <div>
+      <div class="layerBoxLineTwo">
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
@@ -36,24 +36,30 @@
       </div>
     </div>
     <div class="layerBoxNoBg">
-      <el-button @click="clearSearchList">重置</el-button>
-      <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      <div></div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      </div>
     </div>
     <!--搜索功能 end------------------------------------------------------------>
 
     <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
-            <el-table-column prop="alias" label="网站导航" width="160"></el-table-column>
-            <el-table-column prop="name" label="导航名称" width="160"></el-table-column>
-            <el-table-column prop="created_at" label="创建时间" width="170"></el-table-column>
-            <el-table-column prop="updated_at" label="修改时间" width="170"></el-table-column>
-            <el-table-column fixed="right" label="操作" width="120">
+            <el-table-column prop="alias" label="网站导航"></el-table-column>
+            <el-table-column prop="name" label="导航名称"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间"></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="120" header-align="center">
               <template slot-scope="scope">
-                <el-button @click.native.prevent="editRow(scope.row.category_id)" type="text" size="small">编辑</el-button>
+                <div class="listBtnBox">
+                  <div class="listEditBtn" @click="editRow(scope.row.category_id)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
               </template>
             </el-table-column>
           </el-table>
@@ -62,7 +68,7 @@
     </div>
 
     <!--分页 start------------------------------------------------------------>
-    <div class="layerBox alignBox">
+    <div class="alignBox">
       <el-row>
         <el-col :span="24">
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
@@ -75,22 +81,24 @@
     <!--弹出框start------------------------------------------------------------>
     <el-dialog title="编辑导航池" :visible.sync="windowStatus">
       <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-        <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="alias">
-          <el-input v-model="form.alias" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="导航seo名称：" :label-width="formLabelWidth" prop="seo_title">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
-          </div>
-        </el-form-item>
-        <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
-          </div>
-        </el-form-item>
-        <el-form-item label="导航描述：" :label-width="formLabelWidth" prop="seo_description">
-          <el-input type="textarea" v-model="form.seo_description"></el-input>
-        </el-form-item>
+        <div class="formDiv">
+          <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
+            <el-input v-model="form.alias" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="导航seo名称：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="导航描述：" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
+            <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"></el-input>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
@@ -106,7 +114,15 @@
 </template>
 
 <script>
+//引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+
 export default {
+  components: {
+    tableTitle,//表格标题
+  },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
     //表单验证
@@ -122,6 +138,7 @@ export default {
 
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"导航详情",
       tableData: [],//列表
       allCount:0,//总条数
       editId:0,//要修改的网站id
@@ -350,37 +367,14 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .layerBox_search {
-    margin:30px 30px 10px 30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 20px 20px;
-    box-sizing: border-box;
-    .layerBoxLine {
-      margin-bottom: 20px;
-    }
-    .searchTitle {
-      font-size:14px;
-      white-space:nowrap;
-    }
-    .searchBox {
-      display:flex;
-      align-items: center;
-      padding-right:20px;
-    }
-  }
-  .layerBox {
-    margin:30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 20px 20px;
-    box-sizing: border-box;
-  }
-  .layerBoxNoBg {
-    margin:0 30px 0 30px;
-    text-align: right;
-  }
-  .alignBox {
-    text-align:center
-  }
+//表单微调 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用���拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
 </style>

src/views/website/websiteColumn.vue

@@ -19,7 +19,7 @@
     </div>
     <div class="layerBoxNoBg">
       <div>
-        <el-button type="success" @click="openWindow">添加导航名称</el-button>
+        <el-button type="primary" @click="openWindow">添加导航名称</el-button>
       </div>
       <div>
         <el-button @click="clearSearch">重置</el-button>
@@ -30,6 +30,7 @@
 
     <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
@@ -42,7 +43,7 @@
               <template slot-scope="scope">
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
-                  <div class="listEditBtn" @click="editRow(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listEditBtn" @click="editRow(scope.row.id, scope.row.website_name)"><i class="el-icon-edit-outline"></i>编辑</div>
                   <div class="listMainBtn" @click="manageRow(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>详情</div>
                 </div>
                 <!-- <el-button @click.native.prevent="deleteRow(scope.row.id, tableData)" type="text" size="small">移除</el-button>
@@ -56,7 +57,7 @@
     </div>
 
     <!--分页 start------------------------------------------------------------>
-    <div class="layerBox alignBox">
+    <div class="alignBox">
       <el-row>
         <el-col :span="24">
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
@@ -68,29 +69,31 @@
 
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="编辑导航名称" :visible.sync="windowStatus">
-      <el-form :model="form" ref="form" :rules="formRules">
-        <el-form-item label="关联网站名称：" :label-width="formLabelWidth" prop="webSiteName">
-          <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入关键词"
-              :remote-method="getWebNavList" :loading="webSiteLoading">
-              <el-option
-                v-for="item in webSiteList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="navNames">
-          <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入关键词"
-              :remote-method="getWebsiteList" :loading="navNamesLoading">
-              <el-option
-                v-for="item in navList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-        </el-form-item>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="关联网站名称：" :label-width="formLabelWidth" prop="webSiteName" class="custom-align-right">
+            <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入关键词"
+                :remote-method="getWebNavList" :loading="webSiteLoading">
+                <el-option
+                  v-for="item in webSiteList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="navNames" class="custom-align-right">
+            <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入关键词"
+                :remote-method="getWebsiteList" :loading="navNamesLoading">
+                <el-option
+                  v-for="item in navList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
@@ -107,8 +110,13 @@
 <script>
 //引入公用样式
 import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
 
 export default {
+  components: {
+    tableTitle,//表格标题
+  },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
     const validateWebSiteName = (rule,value,callback) => {
@@ -128,6 +136,7 @@ export default {
      //0.全局操作 end ------------------------------------------------------------>
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"导航池列表",
       tableData: [],//列表
       allCount:0,//总条数
       editId:0,//要修改的网站id
@@ -183,12 +192,11 @@ export default {
           if (item.website_category && item.website_category.length > 0) {
             // 如果 website_category 有值，提取 name 并用逗号隔开
             const categoryNames = item.website_category.map(category => category.name);
-            //console.log(`[${categoryNames.join(', ')}]`);
-            // 你也可以将结果存储在一个新的属性上
-            item.website_category = `[${categoryNames.join(', ')}]`;
+            // 将结果存储在一个新的属性上，去掉两端的方括号
+            item.website_category = categoryNames.join(', ');
           } else {
             // 如果没有值，可以设置为空数组或其他处理
-            item.website_category = '[]';
+            item.website_category = '';
           }
         });
         console.log(data)
@@ -197,7 +205,7 @@ export default {
       })
     },
     //1.2 删除内容
-    deleteData(id){
+    deleteRow(id){
       this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -212,13 +220,13 @@ export default {
           });
         }).catch(() => {
           this.$message({
-            type: 'info',
+            type: 'warning',
             message: '网络错误，请重试！'
           });
         })
       }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '已取消删除'
         });
       });
@@ -417,7 +425,6 @@ export default {
       this.$store.dispatch('pool/getAdminWebsiteCategory',data).then(res=> {
         //先回显站点信息
         this.form.webSiteName = name;
-        this.getWebNavList(name);
         //把查询出来的导航回显到编辑窗口中
         let categories = res.data;
         // 将返回的数据处理成 {label:'',value:''} 格式，用于 el-select
@@ -444,7 +451,7 @@ export default {
     },
     //更新网站导航
     editToServe() {
-      //把老的和新的都提交过去
+      //把��的和新的都提交过去
       //检查新数组，如果新数组中包含老数组的数据，就把老数组中的数组删除掉
       this.ordArr = this.ordArr.filter(item => {
         // 只有当 item 不在 this.form.navNames 中时才保留
@@ -457,22 +464,26 @@ export default {
         new_category_arr_id:this.form.navNames,
         website_id:this.editId
       }
-      this.$store.dispatch('pool/upWebsiteCategory',data).then(res=> {
-        if(res.code==200){
-          this.$message({
-            type: 'success',
-            message: '导航修改成功！'
-          });
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('pool/upWebsiteCategory',data).then(res=> {
+            if(res.code==200){
+              this.$message({
+                type: 'success',
+                message: '导航修改成功！'
+              });
+            }
+            //关闭并重置窗口
+            this.closeWindow();
+            //重新请求页面
+            this.getData();
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
         }
-        //关闭并重置窗口
-        this.closeWindow();
-        //重新请求页面
-        this.getData();
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
       })
     },
     //编辑网站 end ------------------------------------------------------------>
@@ -504,5 +515,18 @@ export default {
 </script>
 
 <style scoped lang="less">
-
+//表单微调 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+.formDiv .el-select {
+  width: 100%;
+}
 </style>
+