0.0.16

保存样式

src/layout/components/Navbar.vue

@@ -27,9 +27,11 @@
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/profile/index">
-            <el-dropdown-item>
-              {{ $t('navbar.profile') }}
-            </el-dropdown-item>
+            <div class="userMenuDownItem">
+              <el-dropdown-item>
+                <span style="display:block;">{{ $t('navbar.profile') }}</span>
+              </el-dropdown-item>
+            </div>
           </router-link>
           <!-- <router-link to="/">
             <el-dropdown-item>
@@ -45,7 +47,10 @@
             <el-dropdown-item>Docs</el-dropdown-item>
           </a> -->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">{{$t('navbar.logOut')}}222</span>
+            <div class="userMenuDownItem">
+              <span style="display:block;">{{$t('navbar.logOut')}}</span>
+              <img src="@/assets/public/nav/Logout.png">
+            </div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -122,6 +127,7 @@ export default {
     font-weight: bold;
   }
 
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -208,6 +214,15 @@ export default {
     }
   }
 }
-
+.userMenuDownItem {
+  width: 100px;
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background: none;
+  color:#606266;
+}
 
 </style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -90,9 +90,23 @@ export default {
     },
     // 动态获取图标
     getIcon(item) {
-      return this.$route.path === this.resolvePath(item.path)
-        ? item.meta.iconSelected // 选中状态
-        : item.meta.iconDefault  // 未选中状态
+      const currentPath = this.$route.path;
+
+      // 递归检查是否存在子路径匹配当前路径
+      const isPathInChildren = (children) => {
+        return children.some(child => {
+          if (this.resolvePath(child.path) === currentPath) {
+            return true;
+          }
+          return child.children ? isPathInChildren(child.children) : false;
+        });
+      };
+
+      // 如果当前路径匹配第一级菜单的子路径，返回 selected_icon
+      if (isPathInChildren(item.children || [])) {
+        return item.meta.selected_icon;
+      }
+      return item.meta.icon;
     }
   }
 }

src/router/index.js

@@ -82,8 +82,8 @@ export const constantRoutes = [
         meta: {
           title: '首页',
           //icon: require('@/assets/public/sidebar/select/index.png'),
-          iconDefault: require('@/assets/public/sidebar/default/index.png'),
-          iconSelected: require('@/assets/public/sidebar/select/index.png'),
+          icon: require('@/assets/public/sidebar/default/index.png'),
+          selected_icon: require('@/assets/public/sidebar/select/index.png'),
           affix: true ,
         }
       }

src/store/modules/permission.js

@@ -77,6 +77,7 @@ export function convertToRoutes(routeData) {
       meta: {
         title: item.label || `Unnamed Route ${item.id}`, // Ensure title in meta
         icon: item.icon || 'default-icon', // Set default icon if not provided
+        selected_icon : item.selected_icon || 'default-icon', //选中时候的icon
         hidden: item.hidden === '1'
       },
       children: []

src/styles/element-variables.scss

@@ -4,11 +4,13 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
+$--color-primary: #5570F1; //主要
+$--color-success: #13ce66; //成功
+$--color-warning: #ffba00; //警告
+$--color-danger: #ff4949;  //错误
+$--color-info: #F5F7FB;
+$--button-info-border-color: #E3E8FA;
+$--button-info-text-color: #333333 !default;
 
 $--button-font-weight: 400;
 

src/styles/global.less

@@ -0,0 +1,96 @@
+ /*1.页面布局 start------------------------------------------------------------>*/
+.layerBox_search {
+  margin:30px 30px 10px 30px;
+  background: #fff;
+  border-radius: 20px;
+  border:1px solid #E9EDF7;
+  padding: 20px 0;
+  box-sizing: border-box;
+  .searchTitle {
+    font-size:14px;
+    color:#999999;
+    margin-bottom:10px;
+    white-space:nowrap;
+  }
+  .searchBox {
+    .el-cascader--medium {
+      width:100%;
+    }
+  }
+  .el-row {
+    >div:nth-child(1){
+      padding-left:20px;
+      padding-right:20px;
+    }
+    >div:nth-child(2){
+      padding-right:20px
+    }
+    >div:nth-child(3){
+      padding-right:20px
+    }
+  }
+}
+.layerBox {
+  margin:30px;
+  border-radius: 20px;
+  background:#fff;
+  border:1px solid #E9EDF7;
+  padding: 20px 20px 20px 20px;
+  box-sizing: border-box;
+}
+.layerBoxNoBg {
+  margin:0 30px 0 30px;
+  text-align: right;
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+}
+//分页
+.alignBox {
+  text-align:right;
+  padding-right:30px;
+  padding-bottom:30px;
+}
+//列表中的按钮样式
+.listBtnBox{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+}
+.listDeleteBtn,.listEditBtn,.listMainBtn {
+  width:76px;
+  height:36px;
+  line-height:36px;
+  text-align:center;
+  border-radius: 8px;
+  margin-left:10px;
+  cursor:pointer;
+  i {
+    margin-right:8px;
+  }
+}
+.listDeleteBtn{
+  color:#CC5F5F;
+  background:#F7E5E5;
+}
+.listDeleteBtn:hover {
+ background:#EFCFCF;
+}
+.listEditBtn{
+  color:#5570F1;
+  background:#E4E8FD;
+}
+.listEditBtn:hover {
+  background:#CCD1F1;
+}
+.listMainBtn{
+  color:#519C66;
+  background:#E3EFE6;
+}
+.listMainBtn:hover {
+  background:#CAD9CB;
+}
+/*页面布局 end------------------------------------------------------------>*/
+
+
+

src/styles/index.scss

@@ -189,3 +189,26 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+//此处为element的全局覆盖样式 start---------------------------------------->
+.el-button--info {
+  color: #333333 !important;  // 确保覆盖文字颜色
+}
+.el-button {
+  border-radius: 8px !important; // 使用你想要的圆角角度值
+}
+//表格修改
+.el-table thead tr .is-leaf{
+  background-color: #F1F4F7;  // 设置你想要的背景颜色
+}
+//分页修改
+.el-pagination button:disabled {
+  background:none
+}
+.el-pager li {
+  background:none
+}
+.el-pagination .btn-prev, .el-pagination .btn-next {
+  background:none
+}
+//此处为element的全局覆盖样式 end---------------------------------------->

src/styles/sidebar.scss

@@ -235,10 +235,39 @@
               }
             }
           }
+          ul {
+            margin-bottom: 10px;
+            li{
+              padding-left:50px !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .el-scrollbar {
+    .scrollbar-wrapper {
+      .el-scrollbar__view {
+        ul.el-menu {
+          position: relative;
+          ul.el-menu::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 10px; /* 距离最右边 10px */
+            width: 1px; /* 竖线的宽度 */
+            background-color: #3A4269; /* 竖线颜色 */
+            left:30px;
+            height:100%;
+          }
         }
       }
     }
   }
+
+
   /*二次开发部分 end by 党云龙-----------------------------*/
 }
 

src/views/login/index.vue

@@ -76,7 +76,7 @@
               </div>
               <div class="inputBoxRight greyBg">
                 <div class="submitCode">
-                  <img :src="codeImg" class="codeImg">
+                  <img :src="codeImg" class="codeImg" @click="getImgCode">
                 </div>
                 <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
               </div>
@@ -429,6 +429,7 @@ export default {
           box-sizing: border-box;
           padding-top: 5px;
           padding-left: 10px;
+          cursor:pointer;
           .codeImg{
             display: block;
             width: 120px;

src/views/news/NewList.vue

@@ -57,9 +57,9 @@
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
-            <el-table-column prop="title" label="资讯题目" width="250"></el-table-column>
-            <el-table-column prop="category_name" label="导航池名称" width="140"></el-table-column>
-            <el-table-column prop="status" label="状态" width="170">
+            <el-table-column prop="title" label="资讯题目" width=""></el-table-column>
+            <el-table-column prop="category_name" label="导航池名称" width=""></el-table-column>
+            <el-table-column prop="status" label="状态" width="">
               <template slot-scope="scope">
                 <span v-if="scope.row.status==404">404</span>
                 <el-switch
@@ -71,12 +71,12 @@
                 ></el-switch>
               </template>
             </el-table-column>
-            <el-table-column prop="islink" label="是否引用外链" width="150"></el-table-column>
-            <el-table-column prop="fromurl" label="来源" width="170"></el-table-column>
-            <el-table-column prop="author" label="作者" width="80"></el-table-column>
-            <el-table-column prop="level" label="排序" width="100"></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 prop="islink" label="是否引用外链" width=""></el-table-column>
+            <el-table-column prop="fromurl" label="来源" width=""></el-table-column>
+            <el-table-column prop="author" label="作者" width=""></el-table-column>
+            <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">
               <template slot-scope="scope">
                 <el-button @click.native.prevent="deleteRow(scope.row.id, tableData)" type="text" size="small">移除</el-button>

src/views/website/WebsiteList.vue

@@ -24,53 +24,57 @@
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <el-button @click="clearSearchList">重置</el-button>
-      <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
-      <el-button type="success" icon="el-icon-circle-plus-outline" @click="addData">添加网站</el-button>
+      <div>
+        <el-button type="primary" @click="addData">添加网站</el-button>
+      </div>
+      <div>
+        <el-button type="info" @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</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="website_name" label="网站名称" width="130"></el-table-column>
-            <el-table-column prop="column_name" label="上级网系" width="150"></el-table-column>
-            <el-table-column prop="website_url" label="网站地址" width="170"></el-table-column>
-            <el-table-column prop="city_name" label="网站城市" width="250"></el-table-column>
-            <el-table-column prop="created_at" label="创建时间" width="160"></el-table-column>
-            <el-table-column prop="updated_at" label="修改时间" width="160"></el-table-column>
-            <el-table-column fixed="right" label="操作" width="120">
+            <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 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>
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
               <template slot-scope="scope">
-                <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
-                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+                <!-- <div class="listMainBtn"><i class="el-icon-view"></i>详情</div> -->
+                <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
+                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
               </template>
             </el-table-column>
           </el-table>
         </template>
       </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>
         </el-col>
       </el-row>
     </div>
-    <!--分页 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
-
-
     <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
     <el-dialog title="添加网站" :visible.sync="windowStatus">
       <!--弹出框2：内部模板弹出框 start------------------------------------------------------------>
-      <el-dialog width="32%" title="请选择模板" :visible.sync="innerVisible" append-to-body>
+      <el-dialog width="32%" 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)">
+          <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">
             <div>{{item.template_name}}</div>
           </div>
@@ -84,85 +88,135 @@
       </el-dialog>
       <!--弹出框2：内部模板弹出框 end------------------------------------------------------------>
       <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-        <el-form-item label="网站名称：" :label-width="formLabelWidth" prop="website_name">
-          <el-input v-model="form.website_name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="网站地址1：" :label-width="formLabelWidth" prop="website_url[0].url">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url[0].url" autocomplete="off"></el-input>
-            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(1)" class="formLabeladdIcon"></el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="网站地址2：" :label-width="formLabelWidth" v-if="form.website_url[1].show==true">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url[1].url" autocomplete="off"></el-input>
-            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(2)" class="formLabeladdIcon"></el-button>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(1)" class="formLabelDelIcon"></el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="网站地址3：" :label-width="formLabelWidth" v-if="form.website_url[2].show==true">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url[2].url" autocomplete="off"></el-input>
-            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(3)" class="formLabeladdIcon"></el-button>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(2)" class="formLabelDelIcon"></el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="网站地址4：" :label-width="formLabelWidth" v-if="form.website_url[3].show==true">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url[3].url" autocomplete="off"></el-input>
-            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(4)" class="formLabeladdIcon"></el-button>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(3)" class="formLabelDelIcon"></el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="网站地址5：" :label-width="formLabelWidth" v-if="form.website_url[4].show==true">
-          <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url[4].url" autocomplete="off"></el-input>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(4)" class="formLabelDelIcon"></el-button>
-          </div>
-        </el-form-item>
-        <el-form-item label="上级网系：" :label-width="formLabelWidth" prop="website_column_arr_id">
-          <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr" @change="AppointWebsiteColumn"></el-cascader>
-        </el-form-item>
-        <el-form-item label="城市：" :label-width="formLabelWidth">
-          <!-- <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择您要绑定的城市" :props="cityData" filterable clearable></el-cascader> -->
-          <CityCascader v-model="form.city_arr_id" @update-city-id="updateFormCityId"></CityCascader>
-        </el-form-item>
-        <el-form-item label="网站logo：" :label-width="formLabelWidth">
-          <div class="uploaderBox">
-            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-              <img v-if="logoUrl" :src="logoUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+        <div class="formDiv">
+          <el-form-item label="网站名称：" :label-width="formLabelWidth" prop="website_name" class="custom-align-right">
+            <el-input v-model="form.website_name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="网站地址1：" :label-width="formLabelWidth" prop="website_url[0].url" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.website_url[0].url" autocomplete="off"></el-input>
+              <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(1)" class="formLabeladdIcon"></el-button>
+              <el-button type="info" icon="el-icon-delete" circle size="mini" @click="" class="formLabelDelIcon" disabled></el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="网站地址2：" :label-width="formLabelWidth" v-if="form.website_url[1].show==true" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.website_url[1].url" autocomplete="off"></el-input>
+              <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(2)" class="formLabeladdIcon"></el-button>
+              <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(1)" class="formLabelDelIcon"></el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="网站地址3：" :label-width="formLabelWidth" v-if="form.website_url[2].show==true" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.website_url[2].url" autocomplete="off"></el-input>
+              <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(3)" class="formLabeladdIcon"></el-button>
+              <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(2)" class="formLabelDelIcon"></el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="网站地址4：" :label-width="formLabelWidth" v-if="form.website_url[3].show==true" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.website_url[3].url" autocomplete="off"></el-input>
+              <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(4)" class="formLabeladdIcon"></el-button>
+              <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(3)" class="formLabelDelIcon"></el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="网站地址5：" :label-width="formLabelWidth" v-if="form.website_url[4].show==true" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.website_url[4].url" autocomplete="off"></el-input>
+              <el-button type="info" icon="el-icon-plus" circle size="mini" @click="" class="formLabeladdIcon" disabled></el-button>
+              <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(4)" class="formLabelDelIcon"></el-button>
+            </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-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>
+          </el-form-item>
+          <el-form-item label="网站logo：" :label-width="formLabelWidth" :class="['custom-form-item']" class="custom-align-right">
+            <div class="uploaderBox">
+              <!-- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload> -->
+              <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
+                <!-- 上传组件 -->
+                <el-upload
+                  class="avatar-uploader"
+                  action="#"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                >
+                  <!-- 预览图片 -->
+                  <img v-if="logoUrl" :src="logoUrl" 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 v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="网站标题：" :label-width="formLabelWidth" 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-form-item>
+          <el-form-item label="网站关键词：" :label-width="formLabelWidth" prop="keywords" 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.keywords" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="网站描述：" :label-width="formLabelWidth" prop="description" 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.description" class="custom-textarea"></el-input>
+          </el-form-item>
+          <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>
           </div>
-        </el-form-item>
-        <el-form-item label="网站标题：" :label-width="formLabelWidth" prop="title">
-          <!-- <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
-            <i class="el-icon-question"></i>
-          </el-tooltip> -->
-          <el-input v-model="form.title" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="网站关键词：" :label-width="formLabelWidth" prop="keywords">
-          <el-input v-model="form.keywords" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="网站描述：" :label-width="formLabelWidth" prop="description">
-          <el-input type="textarea" v-model="form.description"></el-input>
-        </el-form-item>
-        <div class="webSiteTemplate">
-          <div class="webSiteTitle">模板：</div>
-          <el-button type="text" @click="getTemplateList">选择模板</el-button>
-          <div class="webSiteTemplateName">{{TemplateName}}</div>
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <div>
-          <el-button @click="closeWindow">取 消</el-button>
-          <el-button type="warning" @click="editToServe" v-if="editBtn==true">编辑</el-button>
+        <div class="footerBtnbox">
+          <el-button @click="closeWindow" type="info">取 消</el-button>
+          <el-button type="primary" @click="editToServe" v-if="editBtn==true">确定</el-button>
           <el-button type="primary" @click="addToServe" v-else>提交</el-button>
         </div>
       </div>
     </el-dialog>
     <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
-
   </div>
 </template>
 
@@ -171,10 +225,15 @@
 //import getLocationNameById from '@/utils/citytocode';
 //城市级联选择器
 import CityCascader from './components/CityCascader';
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
 
 export default {
   components: {
     CityCascader, //城市级联选择器
+    tableTitle,//表格标题
   },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -204,6 +263,7 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"网站列表",
       tableData:[],//内容
       editId:0,//要修改的网站id
       getApiData:{
@@ -260,36 +320,9 @@ export default {
       },
       //3.3 通过api获的的数据 弹窗
       website_column_arr:[],//api获得的网系列表
-      //城市列表
-      cascaderKey:0,//弹窗用的key
-      cityData: {
-        checkStrictly: true,
-        lazy: true,
-        async lazyLoad (node, resolve) {
-          const { level, data } = node;
-          if (data && data.children && data.children.length !== 0) {
-            return resolve(node)
-          }
-          console.log(level)
-          let parentId = level == 0 ? 0 : data.value
-          let parames = {
-            'pid':parentId
-          }
-          self.$store.dispatch('pool/getcityList',parames).then(res=> {
-            if (res.data) {
-              const nodes = res.data.map(item => ({
-                value: item.id,
-                label: item.name,
-                leaf: level >= 3,
-                children: []
-              }))
-              resolve(nodes)
-            }
-          })
-        }
-      },
       //3.4 上传logo图片
       logoUrl:'',
+      hovering: false, // 鼠标悬浮状态 悬浮时显示删除
       //3.5 模板列表
       TemplateList:[],
       getTemplateData:{
@@ -298,7 +331,8 @@ export default {
         pageSize:9,//请求多少条
       },
       TemplateallCount:0,//总条数
-      TemplateName:"未选择模板.."//选择的模板名称
+      TemplateName:"未选择模板..",//选择的模板名称
+      TemplateImg:"",//选择的模板图片
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }
   },
@@ -502,6 +536,10 @@ export default {
       // 阻止默认的上传行为
       return false;
     },
+    handleDelete() {
+      // 删除图片
+      this.logoUrl = ''; // 清空图片 URL
+    },
     //3.6 提交表单
     addToServe(){
       //先进行验证
@@ -524,6 +562,8 @@ export default {
               type: 'success',
               message: '已成功添加网站！'
             });
+            //重新获取表单
+            this.getData();
             //清空并退出
             this.closeWindow();
           }).catch(() => {
@@ -590,14 +630,17 @@ export default {
       })
     },
     //4.2 选择一个模板
-    useThatTemplate(id,template_name){
-      console.log(template_name)
-      //关闭弹出框
-      this.innerVisible = false;
-      //显示用户选择的名称
-      this.TemplateName = template_name;
-      //记录选择的模板id
-      this.form.template_id = id;
+    useThatTemplate(id, template_name, template_img) {
+        console.log(template_name);
+        console.log(template_img);
+        // 关闭弹出框
+        this.innerVisible = false;
+        // 显示用户选择的名称
+        this.TemplateName = template_name;
+        // 确保这里设置了 TemplateImg
+        this.TemplateImg = template_img; // 确保 template_img 是有效的路径
+        // 记录选择的模板id
+        this.form.template_id = id;
     },
     //4.1 模板列表分页
     //直接跳转
@@ -649,8 +692,8 @@ export default {
         this.form.city_arr_id = res.data.city_arr_id;
         //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
         this.cascaderKey += 1;
-        this.loadCascaderPath(this.form.city_arr_id);
         //回显网站标题，描述，关键词
+        console.log(res.data.title,res.data.keywords,res.data.description)
         this.form.title = res.data.title;
         this.form.keywords = res.data.keywords;
         this.form.description = res.data.description;
@@ -703,54 +746,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-  /*1.页面布局 start------------------------------------------------------------>*/
-  .layerBox_search {
-    margin:30px 30px 10px 30px;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px 0;
-    box-sizing: border-box;
-    .searchTitle {
-      font-size:14px;
-      color:#999999;
-      margin-bottom:10px;
-      white-space:nowrap;
-    }
-    .searchBox {
-      .el-cascader--medium {
-        width:100%;
-      }
-    }
-    .el-row {
-      >div:nth-child(1){
-        padding-left:20px;
-        padding-right:20px;
-      }
-      >div:nth-child(2){
-        padding-right:20px
-      }
-      >div:nth-child(3){
-        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
-  }
-  /*页面布局 end------------------------------------------------------------>*/
-
-  /*2.弹窗框 start------------------------------------------------------------>*/
+  /*表单样式 start------------------------------------------------------------>*/
+  //1.模板
   .webSite {
     background:#f0f2f5;
     width:200px;
@@ -763,7 +760,7 @@ export default {
     display:flex;
     .webSiteTitle {
       width:120px;
-      line-height: 36px;
+      line-height: 140px;
       text-align: right;
       padding-right:12px;
       font-weight: bold;
@@ -777,13 +774,17 @@ export default {
     position: relative;
     .formLabeladdIcon {
       position: absolute;
-      right:35px;
+      right:45px;
       top:5px;
+      width:38px;
+      height:24px;
     }
     .formLabelDelIcon {
       position: absolute;
       right:5px;
       top:5px;
+      width:38px;
+      height:24px;
     }
   }
   .templateListBox {
@@ -809,6 +810,7 @@ export default {
       }
     }
   }
+  //2.弹窗分页
   .pageNumBox {
     text-align: center;
     padding-top:20px;
@@ -817,18 +819,31 @@ 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: 60px;
-      border: 1px dashed #d9d9d9;
+      width: 140px;
+      height:140px;
+      border: 1px solid #d9d9d9;
       border-radius: 6px;
       cursor: pointer;
       position: relative;
       overflow: hidden;
     }
     .avatar-uploader {
-      border-color: #409EFF;
+      border-color: #d9d9d9;
     }
   }
   .avatar-uploader-icon {
@@ -840,9 +855,77 @@ export default {
     text-align: center;
   }
   .avatar {
-    width: 60px;
-    height: 60px;
+    width: 140px;
+    height: 140px;
     display: block;
   }
-  /*弹窗框 end------------------------------------------------------------>*/
+  //选择模板
+  .webSiteTemplateImg {
+    width: 140px;
+    height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    border: 1px solid #E1E2E9;
+    .selectWebSiteTemplateImg {
+      width: 140px;
+      height: 140px;
+      display: block;
+    }
+    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 .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; /* 设置标签文字右对齐 */
+  }
+  .askBox {
+    position: relative;
+    i {
+      position: absolute;
+      top:0;
+      right:-5px;
+      width:12px;
+      height:12px;
+      color:#A9A9A9;
+    }
+  }
+  //表单微调 end------------------------------------------------------------>*/
 </style>
+

src/views/website/categoryList.vue

@@ -24,9 +24,13 @@
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <el-button @click="clearSearchList">重置</el-button>
-      <el-button type="primary" style="margin-right:20px"  @click="getData('search')">搜索</el-button>
-      <el-button type="success" icon="el-icon-link" @click="openWindow">添加导航池名称</el-button>
+      <div>
+        <el-button type="success" @click="openWindow">添加导航池名称</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px"  @click="getData('search')">搜索</el-button>
+      </div>
     </div>
     <!--搜索功能 end------------------------------------------------------------>
 
@@ -36,15 +40,19 @@
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
-            <el-table-column prop="name" label="导航池名称" width="140"></el-table-column>
-            <el-table-column prop="department_name" label="行政职能部门" width="140"></el-table-column>
-            <el-table-column prop="city_name" label="行政区划" width="170"></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="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="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">
               <template slot-scope="scope">
-                <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
-                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+                <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
+                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
               </template>
             </el-table-column>
           </el-table>
@@ -52,7 +60,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>
@@ -65,54 +73,80 @@
     <!--弹出框 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="name">
-          <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">
-          <el-form-item label="外链地址：" :label-width="formLabelWidth" prop="web_url">
-            <el-input v-model="form.web_url" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title">
-            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
-            <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
-          </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>
-          <el-form-item label="排序：" :label-width="formLabelWidth">
-            <el-input v-model="form.sort" autocomplete="off"></el-input>
-          </el-form-item>
-        </div>
-        <div v-if="form.is_url==0">
-          <el-form-item label="关联职能部门：" :label-width="formLabelWidth" prop="department_arr_id">
-            <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader>
-          </el-form-item>
-          <el-form-item label="关联行政区划：" :label-width="formLabelWidth" prop="city_arr_id">
-            <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
-          </el-form-item>
-          <el-form-item label="父级导航：" :label-width="formLabelWidth" prop="pid_arr">
-            <el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
-          </el-form-item>
-          <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title">
-            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
-            <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
-          </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>
-          <el-form-item label="排序：" :label-width="formLabelWidth">
-            <el-input v-model="form.sort" autocomplete="off"></el-input>
+        <div class="formDiv">
+          <el-form-item label="导航池名称：" :label-width="formLabelWidth" prop="name" class="custom-align-right">
+            <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">
+            <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>
+            <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
+              <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
+              <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
+            </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"></el-input>
+            </el-form-item>
+            <el-form-item label="排序：" :label-width="formLabelWidth">
+              <el-input v-model="form.sort" autocomplete="off"></el-input>
+            </el-form-item>
+          </div>
+          <div v-if="form.is_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>
+            <el-form-item label="关联行政区划：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
+              <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="父级导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_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.seo_title" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords" 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.seo_keywords" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="导航描述：" :label-width="formLabelWidth" prop="seo_description" 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.seo_description" class="custom-textarea"></el-input>
+            </el-form-item>
+            <el-form-item label="排序：" :label-width="formLabelWidth" class="custom-align-right">
+              <el-input v-model="form.sort" autocomplete="off"></el-input>
+            </el-form-item>
+          </div>
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeWindow">取 消</el-button>
-        <el-button type="warning" @click="editToServe" v-if="editBtn==true">编辑</el-button>
+        <el-button type="primary" @click="editToServe" v-if="editBtn==true">确定</el-button>
         <el-button type="primary" @click="addToServe" v-else>提交</el-button>
       </div>
     </el-dialog>
@@ -122,6 +156,9 @@
 </template>
 
 <script>
+//引入公用样式
+import '@/styles/global.less';
+
 export default {
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -617,41 +654,7 @@ 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
-  }
-  /*弹出窗口*/
+  /*表单样式 start------------------------------------------------------------>*/
   .windowTitle {
     display:flex;
     padding-bottom:20px;
@@ -669,4 +672,54 @@ export default {
       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; /* 禁止用户拖拽调整大小 */
+  }
+  ::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/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/website/websiteColumn.vue

@@ -18,9 +18,13 @@
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <el-button @click="clearSearch">重置</el-button>
-      <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
-      <el-button type="success" @click="openWindow">添加导航名称</el-button>
+      <div>
+        <el-button type="success" @click="openWindow">添加导航名称</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearch">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      </div>
     </div>
     <!--搜索功能 end------------------------------------------------------------>
 
@@ -30,16 +34,20 @@
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
-            <el-table-column prop="website_category" label="导航名称" width="340"></el-table-column>
-            <el-table-column prop="website_name" label="网站名称" width="150"></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="website_category" label="导航名称"></el-table-column>
+            <el-table-column prop="website_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="280" header-align="center">
               <template slot-scope="scope">
-                <el-button @click.native.prevent="deleteRow(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="editRow(scope.row.id, tableData)"><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>
                 <el-button @click.native.prevent="editRow(scope.row.id, scope.row.website_name)" type="text" size="small">编辑</el-button>
-                <!--从这里开始开发 跳转到新页面然后使用那三个新的接口-->
-                <el-button @click.native.prevent="manageRow(scope.row.id)" type="text" size="small">详情</el-button>
+                <el-button @click.native.prevent="manageRow(scope.row.id)" type="text" size="small">详情</el-button> -->
               </template>
             </el-table-column>
           </el-table>
@@ -97,6 +105,9 @@
 </template>
 
 <script>
+//引入公用样式
+import '@/styles/global.less';
+
 export default {
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -493,34 +504,5 @@ 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
-  }
+
 </style>