12-18-zl-前端

src/views/platform/decoration/brand/index.vue

@@ -1,44 +1,67 @@
 <template>
   <div class="brand-container">
-    <el-card shadow="hover">
-      <!-- 操作栏 -->
-      <div class="action-bar mb-[16px]">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">添加品牌</el-button>
-        <el-button icon="Refresh" @click="getList">刷新</el-button>
+    <!-- 标题区域（可点击编辑） -->
+    <div class="brand-header" @click="handleEditHeader">
+      <div class="header-left">
+        <span class="brand-title">{{ headerConfig.title }}</span>
+        <span class="brand-subtitle">{{ headerConfig.subtitle }}</span>
       </div>
+      <div class="header-right">
+        <span class="more-link" @click.stop="handleLinkClick">{{ headerConfig.linkText }} ></span>
+      </div>
+    </div>
 
-      <!-- 品牌卡片网格 -->
-      <div class="brand-grid">
-        <div v-for="item in brandList" :key="item.id" class="brand-card">
-          <el-image :src="item.imageUrl" fit="cover" lazy class="brand-image">
-            <template #error>
-              <div class="image-slot">
-                <el-icon><Picture /></el-icon>
-              </div>
-            </template>
-          </el-image>
-          <!-- 悬浮操作 -->
-          <div class="card-overlay">
-            <el-button type="primary" size="small" icon="Edit" @click="handleUpdate(item)">编辑</el-button>
-            <el-button type="danger" size="small" icon="Delete" @click="handleDelete(item)">删除</el-button>
-          </div>
-        </div>
+    <!-- 品牌图片网格（和商城一模一样） -->
+    <div class="brand-grid">
+      <div v-for="item in brandList" :key="item.id" class="brand-card" @click="handleUpdate(item)">
+        <el-image :src="item.imageUrl || item.image_url" fit="cover" lazy class="brand-image">
+          <template #error>
+            <div class="image-slot">
+              <el-icon><Picture /></el-icon>
+            </div>
+          </template>
+        </el-image>
       </div>
+    </div>
 
-      <!-- 空状态 -->
-      <el-empty v-if="!loading && brandList.length === 0" description="暂无品牌数据" />
+    <!-- 空状态 -->
+    <el-empty v-if="!loading && brandList.length === 0" description="暂无品牌数据" />
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+    <!-- 编辑标题对话框 -->
+    <el-dialog v-model="headerDialog.visible" title="编辑标题" width="600px" append-to-body>
+      <el-form :model="headerForm" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="标题名称">
+              <el-input v-model="headerForm.title" placeholder="请输入标题名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="副标题">
+              <el-input v-model="headerForm.subtitle" placeholder="请输入副标题" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="链接文字">
+              <el-input v-model="headerForm.linkText" placeholder="请输入链接文字" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="链接">
+              <el-input v-model="headerForm.linkUrl" placeholder="请输入链接地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <el-button type="primary" @click="saveHeaderConfig">确 认</el-button>
+        <el-button @click="headerDialog.visible = false">取 消</el-button>
+      </template>
+    </el-dialog>
 
-    <!-- 添加或修改对话框 -->
+    <!-- 编辑对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body @close="cancel">
       <el-form ref="brandFormRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="品牌名称" prop="title">
@@ -65,14 +88,78 @@
 
 <script setup name="Brand" lang="ts">
 import { reactive, ref, onMounted } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { Picture } from '@element-plus/icons-vue';
-import { listAdContent, addAdContent, updateAdContent, delAdContent } from '@/api/ad/content';
+import { listAdContent, updateAdContent } from '@/api/ad/content';
+import { getDecorationSectionByType, addDecorationSection, updateDecorationSection } from '@/api/decoration/section';
 import { listByIds } from '@/api/system/oss';
 
 const adType = 'decoration_brand';
 
-const queryParams = reactive({ pageNum: 1, pageSize: 10, adType });
+// 标题配置
+const headerConfig = ref({
+  id: null as number | null,
+  title: '品牌中心',
+  subtitle: '精选优质品牌',
+  linkText: '更多品牌',
+  linkUrl: ''
+});
+
+const headerDialog = reactive({ visible: false });
+const headerForm = reactive({
+  id: null as number | null,
+  title: '',
+  subtitle: '',
+  linkText: '',
+  linkUrl: ''
+});
+
+// 加载标题配置
+const loadHeaderConfig = async () => {
+  try {
+    const res = await getDecorationSectionByType('brand');
+    if (res.rows && res.rows.length > 0) {
+      const data = res.rows[0];
+      headerConfig.value = {
+        id: data.id,
+        title: data.title || '品牌中心',
+        subtitle: data.subtitle || '精选优质品牌',
+        linkText: data.linkText || '更多品牌',
+        linkUrl: data.linkUrl || ''
+      };
+    }
+  } catch (error) {
+    console.error('加载标题配置失败', error);
+  }
+};
+
+const handleEditHeader = () => {
+  Object.assign(headerForm, headerConfig.value);
+  headerDialog.visible = true;
+};
+
+const saveHeaderConfig = async () => {
+  try {
+    const data = { ...headerForm, sectionType: 'brand' };
+    if (headerForm.id) {
+      await updateDecorationSection(data);
+    } else {
+      await addDecorationSection(data);
+    }
+    await loadHeaderConfig();
+    headerDialog.visible = false;
+    ElMessage.success('标题配置已保存');
+  } catch (error) {
+    ElMessage.error('保存失败');
+  }
+};
+
+const handleLinkClick = () => {
+  if (headerConfig.value.linkUrl) {
+    window.open(headerConfig.value.linkUrl, '_blank');
+  }
+};
+
 const form = reactive({
   id: undefined as number | undefined,
   title: '',
@@ -88,84 +175,63 @@ const rules = {
 
 const dialog = reactive({ visible: false, title: '' });
 const loading = ref(false);
-const total = ref(0);
 const brandList = ref<any[]>([]);
 const brandFormRef = ref();
 
+// 获取品牌广告列表
 const getList = async () => {
   loading.value = true;
   try {
-    const res = await listAdContent(queryParams);
+    const res = await listAdContent({ adType });
     const rows = res.rows || [];
-    // 把 ossId 转换成真正的图片 URL
-    const ossIds = rows.map((item: any) => item.imageUrl).filter((id: any) => id).join(',');
-    if (ossIds) {
-      try {
-        const ossRes = await listByIds(ossIds);
-        const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
-        rows.forEach((item: any) => {
-          if (item.imageUrl && ossMap.has(String(item.imageUrl))) {
-            item.imageUrl = ossMap.get(String(item.imageUrl));
-          }
-        });
-      } catch (e) {
-        console.error('获取图片URL失败', e);
-      }
+    // 收集所有ossId，批量查询真实URL
+    const ossIds = rows.map((item: any) => item.imageUrl).filter((id: string) => id && /^\d+$/.test(id));
+    if (ossIds.length > 0) {
+      const ossRes = await listByIds(ossIds.join(','));
+      const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
+      rows.forEach((item: any) => {
+        // 保存原始ossId用于编辑回显
+        item.imageOssId = item.imageUrl;
+        if (item.imageUrl && ossMap.has(item.imageUrl)) {
+          item.imageUrl = ossMap.get(item.imageUrl);
+        }
+      });
     }
     brandList.value = rows;
-    total.value = res.total || 0;
   } catch (error) {
-    console.error('获取列表失败', error);
+    console.error('获取品牌列表失败', error);
+    brandList.value = [];
   } finally {
     loading.value = false;
   }
 };
 
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加品牌广告';
-};
-
 const handleUpdate = (row: any) => {
   reset();
-  Object.assign(form, row);
+  // 编辑时用ossId，这样image-upload组件才能正确回显
+  Object.assign(form, {
+    ...row,
+    imageUrl: row.imageOssId || row.imageUrl || ''
+  });
   dialog.visible = true;
-  dialog.title = '修改品牌广告';
+  dialog.title = '编辑品牌广告';
 };
 
 const submitForm = async () => {
   brandFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       try {
-        if (form.id) {
-          await updateAdContent(form);
-          ElMessage.success('修改成功');
-        } else {
-          await addAdContent(form);
-          ElMessage.success('添加成功');
-        }
+        await updateAdContent(form);
+        ElMessage.success('保存成功');
         dialog.visible = false;
         getList();
       } catch (error) {
-        ElMessage.error('操作失败');
+        ElMessage.error('保存失败');
       }
     }
   });
 };
 
-const handleDelete = (row: any) => {
-  ElMessageBox.confirm('是否确认删除品牌广告"' + row.title + '"？').then(async () => {
-    try {
-      await delAdContent(row.id);
-      ElMessage.success('删除成功');
-      getList();
-    } catch (error) {
-      ElMessage.error('删除失败');
-    }
-  }).catch(() => {});
-};
-
 const cancel = () => {
   dialog.visible = false;
   reset();
@@ -177,6 +243,7 @@ const reset = () => {
 };
 
 onMounted(() => {
+  loadHeaderConfig();
   getList();
 });
 </script>
@@ -184,44 +251,79 @@ onMounted(() => {
 <style scoped lang="scss">
 .brand-container {
   height: 100%;
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
 }
 
-.action-bar {
+.brand-header {
   display: flex;
-  gap: 10px;
-}
-
-.brand-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 16px;
-  margin-bottom: 20px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  max-width: 920px;
+  margin: 0 auto 12px;
+  margin-bottom: 10px;
 
-  @media (max-width: 1400px) {
-    grid-template-columns: repeat(4, 1fr);
+  &:hover {
+    background: #fafafa;
   }
-  @media (max-width: 1100px) {
-    grid-template-columns: repeat(3, 1fr);
+
+  .header-left {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+
+    .brand-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .brand-subtitle {
+      font-size: 12px;
+      color: #999;
+    }
   }
-  @media (max-width: 800px) {
-    grid-template-columns: repeat(2, 1fr);
+
+  .header-right {
+    .more-link {
+      font-size: 12px;
+      color: #666;
+      cursor: pointer;
+
+      &:hover {
+        color: #333;
+      }
+    }
   }
 }
 
+.brand-grid {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  max-width: 920px;
+  margin: 0 auto;
+}
+
 .brand-card {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
+  width: 180px;
   cursor: pointer;
-  aspect-ratio: 4 / 3;
+  transition: all 0.3s;
+  background: #fff;
 
-  &:hover .card-overlay {
-    opacity: 1;
+  &:hover {
+    opacity: 0.9;
   }
 
   .brand-image {
     width: 100%;
-    height: 100%;
+    height: 240px;
+    display: block;
   }
 
   .image-slot {
@@ -234,21 +336,6 @@ onMounted(() => {
     color: #c0c4cc;
     font-size: 40px;
   }
-
-  .card-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
 }
 
 .upload-tip {

src/views/platform/decoration/carousel/index.vue

@@ -1,53 +1,44 @@
 <template>
-  <div class="carousel-container">
-    <el-card shadow="hover">
-      <!-- 搜索区域 -->
-      <transition
-        :enter-active-class="proxy?.animate.searchAnimate.enter"
-        :leave-active-class="proxy?.animate.searchAnimate.leave"
-      >
-        <div v-show="showSearch" class="mb-[10px]">
-          <el-card shadow="hover">
-            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
-              <el-form-item label="广告名称" prop="adName">
-                <el-input
-                  v-model="queryParams.adName"
-                  placeholder="请输入广告名称"
-                  clearable
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item>
-              <el-form-item label="起始时间" prop="dateRange">
-                <el-date-picker
-                  v-model="dateRange"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  value-format="YYYY-MM-DD"
-                  style="width: 240px"
-                />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
+  <div class="carousel-page">
+    <div class="carousel-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="广告名称" prop="adName">
+            <el-input
+              v-model="queryParams.adName"
+              placeholder="请输入广告名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="起始时间" prop="dateRange">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="YYYY-MM-DD"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
         </div>
-      </transition>
-
-      <!-- 操作栏 -->
-      <el-row :gutter="10" class="mb8">
-        <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-      </el-row>
-
-      <!-- 表格标题 -->
-      <div class="table-title mb-[10px]">
-        <span>轮播广告信息列表</span>
       </div>
 
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格标题 -->
+        <div class="table-title">轮播广告信息列表</div>
+
       <!-- 表格 -->
       <el-table v-loading="loading" :data="carouselList" border>
         <el-table-column label="广告图片" align="center" width="120">
@@ -77,23 +68,24 @@
         </el-table-column>
         <el-table-column label="排序" align="center" prop="sort" width="80" />
         <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="cancel">
@@ -218,6 +210,8 @@ const getList = async () => {
       const ossRes = await listByIds(ossIds);
       const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
       rows.forEach((item: any) => {
+        // 保存原始ossId用于编辑回显
+        item.imageOssId = item.imageUrl;
         if (item.imageUrl && ossMap.has(String(item.imageUrl))) {
           item.imageUrl = ossMap.get(String(item.imageUrl));
         }
@@ -275,6 +269,8 @@ const handleUpdate = (row: any) => {
   form.value = {
     ...row,
     adType: 'decoration_banner',
+    // 编辑时用ossId，这样image-upload组件才能正确回显
+    imageUrl: row.imageOssId || row.imageUrl || '',
     status: row.status ?? 1,
     color: row.color || '#ffffff',
     remark: row.remark || '',
@@ -316,15 +312,61 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.carousel-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .carousel-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .el-form {
+    flex: 1;
+  }
+
+  .toolbar {
+    flex-shrink: 0;
+  }
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .table-title {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
-  padding: 0 4px;
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
 }
 </style>
 

src/views/platform/decoration/case/index.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="case-page">
+    <div class="case-container">
+      <!-- 项目案例区域（独立卡片） -->
+      <div class="case-card">
+        <div class="case-header">
+          <div class="case-title">
+            <span class="title-text">项目案例</span>
+            <span class="title-desc">为近5000家终端企业提供户提供电商化集采服务</span>
+          </div>
+          <span class="view-more" @click="handleViewMore">更多案例 &gt;</span>
+        </div>
+        <div class="case-content">
+          <div class="case-grid">
+            <div
+              v-for="item in caseList"
+              :key="item.id"
+              class="case-item"
+            >
+              <div class="case-image">
+                <el-image :src="item.imageUrl" fit="cover" lazy class="image">
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="case-info">
+                <h4 class="case-name">{{ item.name }}</h4>
+                <p class="case-desc">{{ item.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 项目案例搜索列表区域（独立卡片） -->
+      <div class="list-card">
+        <div class="list-title">项目案例搜索列表</div>
+        
+        <!-- 搜索区域 -->
+        <div class="search-area">
+          <el-form :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-input v-model="queryParams.keyword" placeholder="请输入项目案例编号/名称" clearable style="width: 280px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="searchList" border>
+          <el-table-column label="编号" align="center" prop="id" width="120" />
+          <el-table-column label="案例图片" align="center" width="120">
+            <template #default="scope">
+              <el-image :src="scope.row.imageUrl" fit="cover" style="width: 80px; height: 60px; border-radius: 4px" lazy />
+            </template>
+          </el-table-column>
+          <el-table-column label="案例名称" align="center" prop="name" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="案例描述" align="center" prop="description" :show-overflow-tooltip="true" min-width="250" />
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationCase" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 项目案例列表
+const caseList = ref([
+  {
+    id: '1',
+    name: '邮储市武汉分行资产管理系统案例分享！',
+    description: '优易365针对以邮储市武汉分行的资产管理服务的痛点，为其量身定制一款固定资产管理系统，以信息化、数字化、透明化、规范化为...',
+    imageUrl: '/img/品牌广告图片.jpg'
+  },
+  {
+    id: '2',
+    name: '长江工程职业技术学院云机房升级改造项目案例分享！',
+    description: '优易365年初【长江工程职业技术学院云机房升级改造项目】，此次合作项目中，优易选为长江工程职业技术学院提供云机房软件、高端监控...',
+    imageUrl: '/img/MAXHUB.jpg'
+  },
+  {
+    id: '3',
+    name: '邮政鄂州分公司健身房案例分享！',
+    description: '邮政鄂州分公司本着"以人为本"的发展方向，希望员工专注努力工作的同时，也要关注自身身心健康，优易365根据健身房场地情境...',
+    imageUrl: '/img/联想.jpg'
+  },
+  {
+    id: '4',
+    name: '湖北省妇幼保健光谷园区医疗房2栋电器项目案例分享！',
+    description: '为了给出更加符合客户实际需求的电器设备安装项目方案，前期优易365营业员到现场人员到现场勘查调研（开关面板布线、走电），是否已...',
+    imageUrl: '/img/格力.jpg'
+  }
+]);
+
+// 查询参数
+const queryParams = reactive({
+  keyword: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 搜索列表数据
+const searchList = ref<any[]>([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    searchList.value = [];
+    total.value = 0;
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 查看更多
+const handleViewMore = () => {
+  ElMessage.info('更多案例功能开发中...');
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  ElMessage.info('编辑功能开发中...');
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('是否确认删除该项目案例？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.case-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.case-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.case-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.case-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.case-title {
+  .title-text {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+    margin-right: 15px;
+  }
+  
+  .title-desc {
+    font-size: 14px;
+    color: #909399;
+  }
+}
+
+.view-more {
+  font-size: 14px;
+  color: #409eff;
+  cursor: pointer;
+  
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.case-content {
+  .case-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+  }
+}
+
+.case-item {
+  cursor: pointer;
+  
+  &:hover {
+    .case-image .image {
+      transform: scale(1.02);
+    }
+  }
+  
+  .case-image {
+    width: 100%;
+    height: 140px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      transition: transform 0.3s;
+    }
+    
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background: #f5f7fa;
+      color: #909399;
+      font-size: 30px;
+    }
+  }
+  
+  .case-info {
+    .case-name {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+    
+    .case-desc {
+      margin: 0;
+      font-size: 12px;
+      color: #909399;
+      line-height: 1.5;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
+.list-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 15px;
+}
+
+.search-area {
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/decoration/flashSale/index.vue

@@ -1,36 +1,37 @@
 <template>
-  <div class="flash-sale-container">
-    <el-card shadow="hover">
-      <!-- 标题区域（可点击编辑） -->
-      <div class="section-header" @click="handleEditHeader">
+  <div class="flash-sale-page">
+    <div class="flash-sale-container">
+      <!-- 标题区域（独立卡片） -->
+      <div class="section-header-card" @click="handleEditHeader">
         <div class="header-left">
-          <h2 class="section-title">{{ headerConfig.title }}</h2>
+          <span class="section-title">{{ headerConfig.title }}</span>
           <span class="section-subtitle">{{ headerConfig.subtitle }}</span>
         </div>
         <div class="header-right">
-          <el-link type="primary" :underline="false" @click.stop="handleLinkClick">{{ headerConfig.linkText }}></el-link>
+          <span class="more-link" @click.stop="handleLinkClick">{{ headerConfig.linkText }} ></span>
         </div>
       </div>
 
-      <!-- 品牌展示区域 -->
-      <div class="brand-showcase">
+      <!-- 品牌展示区域（独立卡片） -->
+      <div class="brand-showcase-card">
         <!-- 左侧大图（可点击编辑） -->
-        <div class="showcase-left">
-          <el-image :src="bannerConfig.imageUrl || 'https://via.placeholder.com/300x400/1a1a2e/FFFFFF?text=Featured'" fit="cover" class="featured-image">
+        <div class="showcase-left" @click="handleEditBanner">
+          <el-image :src="bannerConfig.imageUrl || defaultBannerUrl" fit="cover" class="featured-image">
             <template #error>
               <div class="image-slot"><el-icon><Picture /></el-icon></div>
             </template>
           </el-image>
-          <div class="edit-overlay" @click="handleEditBanner">
-            <span>点击编辑</span>
-          </div>
-          <el-button type="warning" class="view-all-btn" @click.stop="handleViewAll">查看全部></el-button>
+          <el-button type="warning" size="small" class="view-all-btn" @click.stop="handleViewAll">查看全部 ></el-button>
         </div>
 
         <!-- 右侧品牌网格 -->
         <div class="showcase-right">
-          <div v-for="item in brandList" :key="item.id" class="brand-item">
-            <el-icon class="close-icon" @click="handleRemove(item)"><Close /></el-icon>
+          <div v-for="(item, index) in brandList" :key="item.id" class="brand-item">
+            <el-icon class="close-icon" @click.stop="handleRemoveBrand(index)"><CircleClose /></el-icon>
+            <div class="sort-icon" @click.stop="handleSort(index)">
+              <span class="arrow-down">↓</span>
+              <span class="arrow-up">↑</span>
+            </div>
             <div class="brand-logo">
               <el-image :src="item.logoUrl" fit="contain" class="logo-image">
                 <template #error>
@@ -46,27 +47,27 @@
         </div>
       </div>
 
-      <!-- 搜索区域 -->
-      <div class="search-section">
-        <h3 class="search-title">品牌闪购搜索列表</h3>
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-section-card">
+        <div class="search-title">品牌闪购搜索列表</div>
         <div class="search-bar">
-          <el-input v-model="searchKeyword" placeholder="请输入品牌编号或名称" clearable style="width: 300px" @keyup.enter="handleSearch" />
+          <el-input v-model="searchKeyword" placeholder="请输入品牌编号或名称" clearable style="width: 280px" />
           <el-button type="primary" @click="handleSearch">搜索</el-button>
         </div>
       </div>
-    </el-card>
+    </div>
 
     <!-- 编辑标题对话框 -->
     <el-dialog v-model="headerDialog.visible" title="编辑标题" width="600px" append-to-body>
       <el-form :model="headerForm" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="标题名称" required>
+            <el-form-item label="标题名称">
               <el-input v-model="headerForm.title" placeholder="请输入标题名称" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="副标题" required>
+            <el-form-item label="副标题">
               <el-input v-model="headerForm.subtitle" placeholder="请输入副标题" />
             </el-form-item>
           </el-col>
@@ -83,18 +84,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="背景色">
-              <el-color-picker v-model="headerForm.bgColor" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="字体颜色">
-              <el-color-picker v-model="headerForm.textColor" />
-            </el-form-item>
-          </el-col>
-        </el-row>
       </el-form>
       <template #footer>
         <el-button type="primary" @click="saveHeaderConfig">确 认</el-button>
@@ -105,381 +94,303 @@
     <!-- 编辑左侧大图对话框 -->
     <el-dialog v-model="bannerDialog.visible" title="编辑品牌广告" width="500px" append-to-body>
       <el-form :model="bannerForm" label-width="80px">
-        <el-form-item label="链接">
-          <el-input v-model="bannerForm.link" placeholder="请输入跳转链接" />
-        </el-form-item>
         <el-form-item label="图片">
           <image-upload v-model="bannerForm.imageUrl" :limit="1" />
         </el-form-item>
+        <el-form-item label="链接">
+          <el-input v-model="bannerForm.link" placeholder="请输入跳转链接" />
+        </el-form-item>
       </el-form>
       <template #footer>
         <el-button type="primary" @click="saveBannerConfig">确 认</el-button>
         <el-button @click="bannerDialog.visible = false">取 消</el-button>
       </template>
     </el-dialog>
+
+    <!-- 排序对话框 -->
+    <el-dialog v-model="sortDialog.visible" title="排序商品" width="400px" append-to-body>
+      <el-form label-width="60px">
+        <el-form-item label="排序">
+          <el-input-number v-model="sortDialog.sortValue" :min="0" controls-position="right" style="width: 200px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="primary" @click="saveSortConfig">确 认</el-button>
+        <el-button @click="sortDialog.visible = false">取 消</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="FlashSale" lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { Picture, Close } from '@element-plus/icons-vue';
+import { Picture, CircleClose } from '@element-plus/icons-vue';
 import { getDecorationSectionByType, addDecorationSection, updateDecorationSection } from '@/api/decoration/section';
 import { listAdContent, addAdContent, updateAdContent } from '@/api/ad/content';
 import { listByIds } from '@/api/system/oss';
 
 const searchKeyword = ref('');
+const defaultBannerUrl = 'https://via.placeholder.com/200x300/1a237e/FFFFFF?text=品牌广告';
 
 // 左侧大图配置
-const bannerConfig = ref({
-  id: null as number | null,
-  imageUrl: '',
-  link: ''
-});
-
+const bannerConfig = ref({ id: null as number | null, imageUrl: '', imageOssId: '', link: '' });
 const bannerDialog = reactive({ visible: false });
-const bannerForm = reactive({
-  id: null as number | null,
-  title: '品牌闪购大图',
-  imageUrl: '',
-  link: '',
-  adType: 'flash_sale_banner',
-  status: 1
-});
-
-// 加载左侧大图
+const bannerForm = reactive({ id: null as number | null, title: '品牌闪购大图', imageUrl: '', link: '', adType: 'flash_sale_banner', status: 1 });
+
 const loadBannerConfig = async () => {
   try {
     const res = await listAdContent({ adType: 'flash_sale_banner', pageNum: 1, pageSize: 1 });
     if (res.rows && res.rows.length > 0) {
       const data = res.rows[0];
-      let imageUrl = data.imageUrl || '';
-      // 把 ossId 转换成真正的图片 URL
-      if (imageUrl && /^\d+$/.test(imageUrl)) {
+      const ossId = data.imageUrl || '';
+      let displayUrl = ossId;
+      if (ossId && /^\d+$/.test(ossId)) {
         try {
-          const ossRes = await listByIds(imageUrl);
-          if (ossRes.data && ossRes.data.length > 0) {
-            imageUrl = ossRes.data[0].url;
-          }
-        } catch (e) {
-          console.error('获取图片URL失败', e);
-        }
+          const ossRes = await listByIds(ossId);
+          if (ossRes.data && ossRes.data.length > 0) displayUrl = ossRes.data[0].url;
+        } catch (e) { console.error('获取图片URL失败', e); }
       }
-      bannerConfig.value = {
-        id: data.id,
-        imageUrl: imageUrl,
-        link: data.link || ''
-      };
+      bannerConfig.value = { id: data.id, imageUrl: displayUrl, imageOssId: ossId, link: data.link || '' };
     }
-  } catch (error) {
-    console.error('加载大图配置失败', error);
-  }
+  } catch (error) { console.error('加载大图配置失败', error); }
 };
 
 const handleEditBanner = () => {
-  Object.assign(bannerForm, bannerConfig.value, { adType: 'flash_sale_banner', status: 1 });
+  // 编辑时用ossId，这样image-upload组件才能正确回显
+  Object.assign(bannerForm, { 
+    id: bannerConfig.value.id, 
+    imageUrl: bannerConfig.value.imageOssId, 
+    link: bannerConfig.value.link,
+    adType: 'flash_sale_banner', 
+    status: 1 
+  });
   bannerDialog.visible = true;
 };
 
 const saveBannerConfig = async () => {
   try {
-    if (bannerForm.id) {
-      await updateAdContent(bannerForm);
-    } else {
-      await addAdContent(bannerForm);
-    }
+    if (bannerForm.id) await updateAdContent(bannerForm);
+    else await addAdContent(bannerForm);
     await loadBannerConfig();
     bannerDialog.visible = false;
-    ElMessage.success('大图配置已保存');
-  } catch (error) {
-    ElMessage.error('保存失败');
-  }
+    ElMessage.success('保存成功');
+  } catch (error) { ElMessage.error('保存失败'); }
 };
 
 // 标题配置
-const headerConfig = ref({
-  id: null as number | null,
-  title: '大牌推荐',
-  subtitle: '甄选大牌,优质好品',
-  linkText: '查看更多品牌信息',
-  linkUrl: 'https://www.yoe365.com/brand',
-  bgColor: '#ffffff',
-  textColor: '#303133'
-});
-
+const headerConfig = ref({ id: null as number | null, title: '大牌推荐', subtitle: '甄选大牌,优质好品', linkText: '查看更多品牌信息', linkUrl: '' });
 const headerDialog = reactive({ visible: false });
-const headerForm = reactive({
-  id: null as number | null,
-  title: '',
-  subtitle: '',
-  linkText: '',
-  linkUrl: '',
-  bgColor: '#ffffff',
-  textColor: '#303133'
-});
-
-// 加载标题配置
+const headerForm = reactive({ id: null as number | null, title: '', subtitle: '', linkText: '', linkUrl: '' });
+
 const loadHeaderConfig = async () => {
   try {
     const res = await getDecorationSectionByType('flash_sale');
     if (res.rows && res.rows.length > 0) {
       const data = res.rows[0];
-      headerConfig.value = {
-        id: data.id,
-        title: data.title || '大牌推荐',
-        subtitle: data.subtitle || '甄选大牌,优质好品',
-        linkText: data.linkText || '查看更多品牌信息',
-        linkUrl: data.linkUrl || 'https://www.yoe365.com/brand',
-        bgColor: data.bgColor || '#ffffff',
-        textColor: data.textColor || '#303133'
-      };
+      headerConfig.value = { id: data.id, title: data.title || '大牌推荐', subtitle: data.subtitle || '甄选大牌,优质好品', linkText: data.linkText || '查看更多品牌信息', linkUrl: data.linkUrl || '' };
     }
-  } catch (error) {
-    console.error('加载标题配置失败', error);
-  }
+  } catch (error) { console.error('加载标题配置失败', error); }
 };
 
-const handleEditHeader = () => {
-  Object.assign(headerForm, headerConfig.value);
-  headerDialog.visible = true;
-};
+const handleEditHeader = () => { Object.assign(headerForm, headerConfig.value); headerDialog.visible = true; };
 
 const saveHeaderConfig = async () => {
   try {
-    const data = {
-      ...headerForm,
-      sectionType: 'flash_sale'
-    };
-    if (headerForm.id) {
-      await updateDecorationSection(data);
-    } else {
-      await addDecorationSection(data);
-    }
+    const data = { ...headerForm, sectionType: 'flash_sale' };
+    if (headerForm.id) await updateDecorationSection(data);
+    else await addDecorationSection(data);
     await loadHeaderConfig();
     headerDialog.visible = false;
-    ElMessage.success('标题配置已保存');
-  } catch (error) {
-    ElMessage.error('保存失败');
-  }
+    ElMessage.success('保存成功');
+  } catch (error) { ElMessage.error('保存失败'); }
 };
 
-onMounted(() => {
-  loadHeaderConfig();
-  loadBannerConfig();
-});
-
+// 品牌列表（静态数据，等商品接口开发完成后再改）
 const brandList = ref([
-  { id: 1, title: '联想', description: '联想', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=Lenovo' },
-  { id: 2, title: '惠普', description: '惠普', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=HP' },
-  { id: 3, title: '奔图', description: '奔图', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=PANTUM' },
-  { id: 4, title: 'MAXHUB', description: 'MAXHUB', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=MAXHUB' },
-  { id: 5, title: '苹果', description: '苹果', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=Apple' },
-  { id: 6, title: '飞利浦', description: '飞利浦', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=PHILIPS' },
-  { id: 7, title: '美的', description: '美的', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=Midea' },
-  { id: 8, title: '格力', description: '<p><br></p>', logoUrl: 'https://via.placeholder.com/120x60/FFFFFF/333333?text=GREE' }
+  { id: 1, title: '联想', description: '联想', logoUrl: '/img/联想.jpg' },
+  { id: 2, title: '惠普', description: '惠普', logoUrl: '/img/惠普.jpg' },
+  { id: 3, title: '奔图', description: '奔图', logoUrl: '/img/奔图.jpg' },
+  { id: 4, title: 'MAXHUB', description: 'MAXHUB', logoUrl: '/img/MAXHUB.jpg' },
+  { id: 5, title: '飞利浦', description: '飞利浦', logoUrl: '/img/PHILIPS.jpg' },
+  { id: 6, title: '美的', description: '美的', logoUrl: '/img/Midea.jpg' },
+  { id: 7, title: '格力', description: '格力', logoUrl: '/img/格力.jpg' }
 ]);
 
-const handleViewAll = () => {
-  if (bannerConfig.value.link) {
-    window.open(bannerConfig.value.link, '_blank');
-  } else {
-    ElMessage.info('暂未配置跳转链接');
-  }
-};
+const handleViewAll = () => { if (bannerConfig.value.link) window.open(bannerConfig.value.link, '_blank'); else ElMessage.info('暂未配置跳转链接'); };
+const handleSearch = () => { ElMessage.info(`搜索: ${searchKeyword.value || '全部'}`); };
+const handleLinkClick = () => { if (headerConfig.value.linkUrl) window.open(headerConfig.value.linkUrl, '_blank'); };
 
-const handleRemove = (item: any) => {
-  ElMessage.success(`已移除品牌: ${item.title}`);
-};
+// 品牌操作
+const handleRemoveBrand = (index: number) => { brandList.value.splice(index, 1); ElMessage.success('已移除'); };
 
-const handleSearch = () => {
-  ElMessage.info(`搜索: ${searchKeyword.value || '全部'}`);
+// 排序对话框
+const sortDialog = reactive({ visible: false, index: 0, sortValue: 0 });
+const handleSort = (index: number) => {
+  sortDialog.index = index;
+  sortDialog.sortValue = index;
+  sortDialog.visible = true;
 };
-
-const handleLinkClick = () => {
-  if (headerConfig.value.linkUrl) {
-    window.open(headerConfig.value.linkUrl, '_blank');
-  }
+const saveSortConfig = () => {
+  // 这里可以保存排序值到后端，目前只是前端展示
+  sortDialog.visible = false;
+  ElMessage.success('排序已保存');
 };
+
+onMounted(() => { loadHeaderConfig(); loadBannerConfig(); });
 </script>
 
+
 <style scoped lang="scss">
+.flash-sale-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .flash-sale-container {
-  height: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
-.section-header {
+// 标题区域卡片
+.section-header-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding: 12px 16px;
-  background: #f8f9fa;
+  padding: 15px 20px;
+  background: #fff;
   border-radius: 4px;
+  margin-bottom: 12px;
   cursor: pointer;
-  transition: background 0.3s;
 
-  &:hover {
-    background: #ebeef5;
-  }
+  &:hover { background: #fafafa; }
 
   .header-left {
     display: flex;
     align-items: baseline;
     gap: 12px;
 
-    .section-title {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #303133;
-    }
-    .section-subtitle {
-      font-size: 14px;
-      color: #909399;
-    }
+    .section-title { font-size: 16px; font-weight: 600; color: #333; }
+    .section-subtitle { font-size: 12px; color: #999; }
+  }
+
+  .header-right {
+    .more-link { font-size: 12px; color: #666; cursor: pointer; &:hover { color: #333; } }
   }
 }
 
-.brand-showcase {
+// 品牌展示卡片
+.brand-showcase-card {
   display: flex;
-  gap: 16px;
-  margin-bottom: 30px;
-  padding: 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 
 .showcase-left {
   position: relative;
   width: 200px;
   flex-shrink: 0;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
 
-  .featured-image {
-    width: 100%;
-    height: 280px;
-    border-radius: 8px;
-  }
-
-  .edit-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 60px;
-    background: rgba(0, 0, 0, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px 8px 0 0;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
-    color: #fff;
-    font-size: 14px;
-  }
-
-  &:hover .edit-overlay {
-    opacity: 1;
-  }
-
-  .view-all-btn {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .image-slot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: #e0e0e0;
-    color: #999;
-    font-size: 40px;
-  }
+  .featured-image { width: 100%; height: 100%; min-height: 260px; display: block; }
+  .image-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 260px; background: #f5f5f5; color: #999; font-size: 40px; }
+  .view-all-btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; white-space: nowrap; }
 }
 
 .showcase-right {
   flex: 1;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-
-  @media (max-width: 1200px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 10px;
 }
 
 .brand-item {
   position: relative;
   background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 16px;
+  padding: 20px 15px;
   text-align: center;
-  transition: all 0.3s;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid #e8e8e8;
 
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    .close-icon { opacity: 1; }
+
+
+  &:hover { background: #fafafa; }
+
+  .close-icon { 
+    position: absolute; 
+    top: 8px; 
+    right: 8px; 
+    font-size: 18px; 
+    color: #999; 
+    cursor: pointer; 
+    &:hover { color: #f56c6c; } 
   }
 
-  .close-icon {
+  .sort-icon {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    font-size: 16px;
-    color: #909399;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
     cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.3s;
+    display: flex;
+    gap: 0;
 
-    &:hover { color: #f56c6c; }
+    .arrow-down, .arrow-up {
+      font-size: 16px;
+      font-weight: bold;
+      color: #999;
+      &:hover { color: #409eff; }
+    }
   }
 
   .brand-logo {
-    height: 50px;
+    height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
+
+    .logo-image {
+      max-height: 36px;
+      max-width: 90%;
 
-    .logo-image { max-height: 100%; max-width: 100%; }
-    .logo-text { font-size: 18px; font-weight: 600; color: #303133; }
+      :deep(img) {
+        object-fit: contain !important;
+        max-height: 36px;
+        max-width: 100%;
+      }
+    }
+    .logo-text { font-size: 14px; font-weight: 600; color: #333; }
   }
 
   .brand-info {
-    .brand-name {
-      margin: 0 0 4px 0;
-      font-size: 14px;
-      font-weight: 500;
-      color: #303133;
-    }
-    .brand-desc {
-      margin: 0;
-      font-size: 12px;
-      color: #909399;
-    }
+    .brand-name { margin: 0 0 4px 0; font-size: 13px; font-weight: 500; color: #333; }
+    .brand-desc { margin: 0; font-size: 11px; color: #999; }
   }
 }
 
-.search-section {
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-
-  .search-title {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-  }
+// 搜索区域卡片
+.search-section-card {
+  background: #fff;
+  border-radius: 4px;
 
-  .search-bar {
-    display: flex;
-    gap: 12px;
+  .search-title { 
+    font-size: 14px; 
+    font-weight: 500; 
+    color: #333; 
+    padding: 12px 20px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .search-bar { 
+    display: flex; 
+    gap: 10px; 
+    padding: 16px 20px;
   }
 }
 </style>

src/views/platform/decoration/floor/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="floor-page">
+    <div class="floor-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="广告名称">
+            <el-input v-model="queryParams.name" placeholder="请输入广告名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加楼层</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">分类楼层信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="floorList" border>
+          <el-table-column label="楼层名称" align="center" prop="name" min-width="200" />
+          <el-table-column label="排序" align="center" prop="sort" width="100" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="200" />
+          <el-table-column label="是否显示" align="center" width="100">
+            <template #default="scope">
+              <span :class="scope.row.visible ? 'status-show' : 'status-hide'">
+                {{ scope.row.visible ? '显示' : '不显示' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleManage(scope.row)">管理</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="楼层名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="是否显示" prop="visible">
+          <el-radio-group v-model="form.visible">
+            <el-radio :value="true">显示</el-radio>
+            <el-radio :value="false">不显示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="DecorationFloor" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const floorList = ref([
+  { id: '1', name: '3C家电', sort: 1, updateTime: '2023-04-23 11:49:57', visible: true },
+  { id: '2', name: '营销福利', sort: 2, updateTime: '2023-05-06 10:48:19', visible: true },
+  { id: '3', name: '固定资产', sort: 3, updateTime: '2023-05-11 22:49:38', visible: false },
+  { id: '4', name: '行政办公', sort: 7, updateTime: '2023-12-21 17:00:23', visible: true }
+]);
+const loading = ref(false);
+const total = ref(4);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  sort: 0,
+  visible: true
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加楼层';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑楼层';
+  dialog.visible = true;
+};
+
+// 管理
+const handleManage = (row: any) => {
+  ElMessage.info(`管理楼层：${row.name}`);
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.floor-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.floor-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.status-show {
+  color: #409eff;
+  cursor: pointer;
+}
+
+.status-hide {
+  color: #f56c6c;
+  cursor: pointer;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+}
+</style>

src/views/platform/decoration/floorAd/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="floor-ad-page">
+    <div class="floor-ad-container">
+      <!-- 楼层广告区域（独立卡片） -->
+      <div class="ad-card">
+        <!-- 标签页切换 -->
+        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+          <el-tab-pane label="首页三联广告" name="triple" />
+          <el-tab-pane label="首页图标广告" name="icon" />
+          <el-tab-pane label="首页横幅广告" name="banner" />
+        </el-tabs>
+
+        <!-- 广告展示区 -->
+        <div class="ad-preview">
+          <div class="ad-grid">
+            <div
+              v-for="(item, index) in adList"
+              :key="index"
+              class="ad-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <div class="ad-image">
+                <el-image :src="item.imageUrl" fit="cover" lazy class="image">
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="ad-info">
+                <h4 class="ad-title">{{ item.title }}</h4>
+                <span class="ad-link">查看方案▶</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 编辑表单 -->
+        <div class="ad-form">
+          <el-form :model="form" label-width="80px">
+            <el-form-item label="文字:" required>
+              <el-input v-model="form.text" placeholder="请输入文字" />
+            </el-form-item>
+            <el-form-item label="链接:" required>
+              <el-input v-model="form.link" placeholder="请输入链接地址" />
+            </el-form-item>
+            <el-form-item label="图片:">
+              <div class="image-preview" v-if="form.imageUrl">
+                <el-image :src="form.imageUrl" fit="cover" style="width: 120px; height: 80px; border-radius: 4px" />
+              </div>
+              <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
+            </el-form-item>
+            <el-form-item label="描述:" required>
+              <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSubmit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationFloorAd" lang="ts">
+import { ref, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 当前标签页
+const activeTab = ref('triple');
+
+// 当前选中的广告索引
+const selectedIndex = ref(0);
+
+// 广告列表数据
+const tripleAdList = ref([
+  { title: '书写用品', imageUrl: '/img/品牌广告图片.jpg', text: '文创商务推荐', link: 'https://www.yoe365.com/theme?t=000000098', description: '杯茶套装 咖啡套装 中式文具套装' },
+  { title: '办公电脑', imageUrl: '/img/联想.jpg', text: '办公电脑推荐', link: 'https://www.yoe365.com/theme?t=000000099', description: '笔记本电脑 台式机 一体机' },
+  { title: 'LED大屏', imageUrl: '/img/MAXHUB.jpg', text: 'LED大屏推荐', link: 'https://www.yoe365.com/theme?t=000000100', description: '会议大屏 广告屏 拼接屏' }
+]);
+
+const iconAdList = ref([
+  { title: '打印设备', imageUrl: '/img/奔图.jpg', text: '打印设备', link: '', description: '' },
+  { title: '办公家具', imageUrl: '/img/江润实验台.png', text: '办公家具', link: '', description: '' },
+  { title: '清洁用品', imageUrl: '/img/电饭煲.png', text: '清洁用品', link: '', description: '' }
+]);
+
+const bannerAdList = ref([
+  { title: '促销活动', imageUrl: '/img/格力.jpg', text: '年终大促', link: '', description: '' },
+  { title: '新品上市', imageUrl: '/img/Midea.jpg', text: '新品推荐', link: '', description: '' },
+  { title: '品牌专区', imageUrl: '/img/PHILIPS.jpg', text: '品牌专区', link: '', description: '' }
+]);
+
+// 当前显示的广告列表
+const adList = ref(tripleAdList.value);
+
+// 表单数据
+const form = reactive({
+  text: '',
+  link: '',
+  imageUrl: '',
+  description: ''
+});
+
+// 切换标签页
+const handleTabChange = (tab: string) => {
+  selectedIndex.value = 0;
+  if (tab === 'triple') {
+    adList.value = tripleAdList.value;
+  } else if (tab === 'icon') {
+    adList.value = iconAdList.value;
+  } else {
+    adList.value = bannerAdList.value;
+  }
+  loadFormData();
+};
+
+// 选择广告
+const selectAd = (index: number) => {
+  selectedIndex.value = index;
+  loadFormData();
+};
+
+// 加载表单数据
+const loadFormData = () => {
+  const item = adList.value[selectedIndex.value];
+  if (item) {
+    form.text = item.text;
+    form.link = item.link;
+    form.imageUrl = item.imageUrl;
+    form.description = item.description;
+  }
+};
+
+// 上传图片
+const handleUpload = () => {
+  ElMessage.info('上传功能开发中...');
+};
+
+// 提交
+const handleSubmit = () => {
+  if (!form.text) {
+    ElMessage.warning('请输入文字');
+    return;
+  }
+  // 更新数据
+  const item = adList.value[selectedIndex.value];
+  if (item) {
+    item.text = form.text;
+    item.link = form.link;
+    item.imageUrl = form.imageUrl;
+    item.description = form.description;
+  }
+  ElMessage.success('提交成功');
+};
+
+// 初始化加载
+loadFormData();
+</script>
+
+<style scoped lang="scss">
+.floor-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.floor-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.ad-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.ad-preview {
+  margin: 20px 0;
+  
+  .ad-grid {
+    display: flex;
+    gap: 20px;
+  }
+}
+
+.ad-item {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #f5f7fa;
+  }
+  
+  &.active {
+    border-color: #409eff;
+    background: #ecf5ff;
+  }
+  
+  .ad-image {
+    width: 100px;
+    height: 70px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-right: 15px;
+    flex-shrink: 0;
+    
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+    
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background: #f5f7fa;
+      color: #909399;
+      font-size: 24px;
+    }
+  }
+  
+  .ad-info {
+    .ad-title {
+      margin: 0 0 8px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+    
+    .ad-link {
+      font-size: 12px;
+      color: #409eff;
+      background: #ecf5ff;
+      padding: 2px 8px;
+      border-radius: 2px;
+    }
+  }
+}
+
+.ad-form {
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+  
+  .image-preview {
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/platform/decoration/fresh/index.vue

@@ -1,20 +1,53 @@
 <template>
-  <div class="fresh-container">
-    <el-card shadow="hover">
-      <!-- 标题区域（可点击编辑） -->
-      <div class="section-header" @click="handleEditHeader">
+  <div class="fresh-page">
+    <div class="fresh-container">
+      <!-- 标题区域（独立卡片） -->
+      <div class="section-header-card" @click="handleEditHeader">
         <div class="header-left">
-          <h2 class="section-title">{{ headerConfig.title }}</h2>
+          <span class="section-title">{{ headerConfig.title }}</span>
           <span class="section-subtitle">{{ headerConfig.subtitle }}</span>
         </div>
         <div class="header-right">
-          <el-link type="primary" :underline="false" @click.stop="handleLinkClick">{{ headerConfig.linkText }}></el-link>
+          <span class="more-link" @click.stop="handleLinkClick">{{ headerConfig.linkText }} ></span>
         </div>
       </div>
 
-      <!-- 商品列表区域（等同事接口） -->
-      <el-empty description="商品列表开发中，等待商品模块接口..." />
-    </el-card>
+      <!-- 商品列表区域 -->
+      <div class="product-grid">
+        <div v-for="item in productList" :key="item.id" class="product-item">
+          <el-icon class="close-icon" @click.stop="handleRemoveProduct(item.id)"><CircleClose /></el-icon>
+          <div class="sort-icon" @click.stop="handleSort(item.id)">
+            <span class="arrow-down">↓</span>
+            <span class="arrow-up">↑</span>
+          </div>
+          <div class="product-image">
+            <el-image :src="item.imageUrl" fit="contain">
+              <template #error>
+                <div class="image-placeholder"><el-icon><Picture /></el-icon></div>
+              </template>
+            </el-image>
+          </div>
+          <div class="product-info">
+            <p class="product-name">{{ item.name }}</p>
+            <p class="product-desc">{{ item.description }}</p>
+            <p class="product-price">¥{{ item.price }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 排序对话框 -->
+    <el-dialog v-model="sortDialog.visible" title="排序商品" width="400px" append-to-body>
+      <el-form label-width="60px">
+        <el-form-item label="排序">
+          <el-input-number v-model="sortDialog.sortValue" :min="0" controls-position="right" style="width: 200px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="primary" @click="saveSortConfig">确 认</el-button>
+        <el-button @click="sortDialog.visible = false">取 消</el-button>
+      </template>
+    </el-dialog>
 
     <!-- 编辑标题对话框 -->
     <el-dialog v-model="headerDialog.visible" title="编辑标题" width="600px" append-to-body>
@@ -67,6 +100,7 @@
 <script setup name="Fresh" lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
+import { Picture, CircleClose } from '@element-plus/icons-vue';
 import { getDecorationSectionByType, addDecorationSection, updateDecorationSection } from '@/api/decoration/section';
 
 // 标题配置
@@ -142,46 +176,168 @@ const handleLinkClick = () => {
   }
 };
 
+// 商品列表（模拟数据，等同事接口）- 在这里修改图片路径
+const productList = ref([
+  { id: 1, name: '联想笔记本电脑', description: '高性能商务本', price: '4999.00', imageUrl: '/img/联想.jpg' },
+  { id: 2, name: '惠普打印机', description: '高效办公打印', price: '1299.00', imageUrl: '/img/惠普.jpg' },
+  { id: 3, name: '奔图激光打印机', description: '国产高品质', price: '899.00', imageUrl: '/img/奔图.jpg' },
+  { id: 4, name: 'MAXHUB会议平板', description: '智能会议解决方案', price: '12999.00', imageUrl: '/img/MAXHUB.jpg' },
+  { id: 5, name: '飞利浦显示器', description: '护眼高清屏', price: '1599.00', imageUrl: '/img/PHILIPS.jpg' }
+]);
+
+// 商品操作
+const handleRemoveProduct = (id: number) => {
+  const index = productList.value.findIndex(item => item.id === id);
+  if (index > -1) {
+    productList.value.splice(index, 1);
+    ElMessage.success('已移除');
+  }
+};
+
+// 排序对话框
+const sortDialog = reactive({ visible: false, productId: 0, sortValue: 0 });
+const handleSort = (id: number) => {
+  sortDialog.productId = id;
+  sortDialog.sortValue = 0;
+  sortDialog.visible = true;
+};
+const saveSortConfig = () => {
+  sortDialog.visible = false;
+  ElMessage.success('排序已保存');
+};
+
 onMounted(() => {
   loadHeaderConfig();
 });
 </script>
 
 <style scoped lang="scss">
+.fresh-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .fresh-container {
-  height: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
-.section-header {
+.section-header-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding: 12px 16px;
-  background: #f8f9fa;
+  padding: 15px 20px;
+  background: #fff;
   border-radius: 4px;
+  margin-bottom: 12px;
   cursor: pointer;
-  transition: background 0.3s;
 
-  &:hover {
-    background: #ebeef5;
-  }
+  &:hover { background: #fafafa; }
 
   .header-left {
     display: flex;
     align-items: baseline;
     gap: 12px;
 
-    .section-title {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #303133;
+    .section-title { font-size: 16px; font-weight: 600; color: #333; }
+    .section-subtitle { font-size: 12px; color: #999; }
+  }
+
+  .header-right {
+    .more-link { font-size: 12px; color: #666; cursor: pointer; &:hover { color: #333; } }
+  }
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.product-item {
+  position: relative;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e8e8e8;
+  padding: 15px;
+  cursor: pointer;
+
+  &:hover { background: #fafafa; }
+
+  .close-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 18px;
+    color: #999;
+    cursor: pointer;
+    &:hover { color: #f56c6c; }
+  }
+
+  .sort-icon {
+    position: absolute;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    gap: 0;
+
+    .arrow-down, .arrow-up {
+      font-size: 16px;
+      font-weight: bold;
+      color: #999;
+      &:hover { color: #409eff; }
+    }
+  }
+
+  .product-image {
+    width: 100%;
+    height: 120px;
+    margin-bottom: 10px;
+
+    .el-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
     }
 
-    .section-subtitle {
+    .image-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f5f5f5;
+      color: #ccc;
+      font-size: 30px;
+    }
+  }
+
+  .product-info {
+    .product-name {
+      margin: 0 0 5px 0;
       font-size: 14px;
-      color: #909399;
+      font-weight: 500;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .product-desc {
+      margin: 0 0 5px 0;
+      font-size: 12px;
+      color: #999;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .product-price {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #f56c6c;
     }
   }
 }

src/views/platform/decoration/guide/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="guide-page">
+    <div class="guide-container">
+      <!-- 采购指南区域（独立卡片） -->
+      <div class="guide-card">
+        <div class="guide-header">
+          <div class="guide-title">
+            <span class="title-text">采购指南</span>
+            <span class="title-desc">提供智能选品搭配方案，帮助采购人在繁杂品类中快速选品，节省选品时间</span>
+          </div>
+          <span class="view-more" @click="handleViewMore">了解更多采购信息 &gt;</span>
+        </div>
+        <div class="guide-content">
+          <div class="guide-grid">
+            <div
+              v-for="item in guideList"
+              :key="item.id"
+              class="guide-item"
+            >
+              <el-icon class="delete-icon" @click="handleRemoveGuide(item.id)">
+                <Close />
+              </el-icon>
+              <div class="guide-image">
+                <el-image :src="item.imageUrl" fit="cover" lazy class="image">
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="guide-info">
+                <p class="guide-name">{{ item.name }}</p>
+                <p v-if="item.subTitle" class="guide-subtitle" :style="{ color: item.subTitleColor || '#f56c6c' }">{{ item.subTitle }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 采购指南搜索列表区域（独立卡片） -->
+      <div class="list-card">
+        <div class="list-title">采购指南搜索列表</div>
+        
+        <!-- 搜索区域 -->
+        <div class="search-area">
+          <el-form :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-input v-model="queryParams.keyword" placeholder="请输入采购指南编号/名称" clearable style="width: 280px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="searchList" border>
+          <el-table-column label="编号" align="center" prop="id" width="120" />
+          <el-table-column label="指南图片" align="center" width="120">
+            <template #default="scope">
+              <el-image :src="scope.row.imageUrl" fit="cover" style="width: 80px; height: 60px; border-radius: 4px" lazy />
+            </template>
+          </el-table-column>
+          <el-table-column label="指南名称" align="center" prop="name" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="副标题" align="center" prop="subTitle" :show-overflow-tooltip="true" min-width="150" />
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationGuide" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Close, Picture } from '@element-plus/icons-vue';
+
+// 采购指南列表
+const guideList = ref([
+  {
+    id: '1',
+    name: '全场景无人机 解决方案',
+    imageUrl: '/img/品牌广告图片.jpg',
+    subTitle: '',
+    subTitleColor: ''
+  },
+  {
+    id: '2',
+    name: '企业桌面现磨咖啡机',
+    imageUrl: '/img/MAXHUB.jpg',
+    subTitle: '不止咖啡更是关怀',
+    subTitleColor: '#f56c6c'
+  },
+  {
+    id: '3',
+    name: '人体工程学椅推荐产品',
+    imageUrl: '/img/联想.jpg',
+    subTitle: '',
+    subTitleColor: ''
+  }
+]);
+
+// 查询参数
+const queryParams = reactive({
+  keyword: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 搜索列表数据
+const searchList = ref<any[]>([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    searchList.value = [];
+    total.value = 0;
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 查看更多
+const handleViewMore = () => {
+  ElMessage.info('了解更多采购信息功能开发中...');
+};
+
+// 移除采购指南
+const handleRemoveGuide = (id: string) => {
+  ElMessageBox.confirm('是否确认移除该采购指南？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const index = guideList.value.findIndex(item => item.id === id);
+    if (index !== -1) {
+      guideList.value.splice(index, 1);
+      ElMessage.success('移除成功');
+    }
+  }).catch(() => {});
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  ElMessage.info('编辑功能开发中...');
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('是否确认删除该采购指南？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.guide-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.guide-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.guide-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.guide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.guide-title {
+  .title-text {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+    margin-right: 15px;
+  }
+  
+  .title-desc {
+    font-size: 14px;
+    color: #909399;
+  }
+}
+
+.view-more {
+  font-size: 14px;
+  color: #409eff;
+  cursor: pointer;
+  
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.guide-content {
+  .guide-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+  }
+}
+
+.guide-item {
+  position: relative;
+  cursor: pointer;
+  
+  &:hover {
+    .guide-image .image {
+      transform: scale(1.02);
+    }
+  }
+  
+  .delete-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 18px;
+    color: #fff;
+    cursor: pointer;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    padding: 4px;
+    
+    &:hover {
+      background: rgba(245, 108, 108, 0.8);
+    }
+  }
+  
+  .guide-image {
+    width: 100%;
+    height: 180px;
+    border-radius: 4px;
+    overflow: hidden;
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      transition: transform 0.3s;
+    }
+    
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background: #f5f7fa;
+      color: #909399;
+      font-size: 40px;
+    }
+  }
+  
+  .guide-info {
+    padding: 10px 0;
+    
+    .guide-name {
+      margin: 0 0 5px 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+    }
+    
+    .guide-subtitle {
+      margin: 0;
+      font-size: 13px;
+    }
+  }
+}
+
+.list-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 15px;
+}
+
+.search-area {
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/decoration/recommend/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="recommend-page">
+    <div class="recommend-container">
+      <!-- 场景采购区域（独立卡片） -->
+      <div class="scene-card">
+        <div class="scene-header">
+          <div class="scene-title">
+            <span class="title-text">场景采购</span>
+            <span class="title-desc">为采购人构建了一份取舍的推荐菜单</span>
+          </div>
+          <span class="view-more" @click="handleViewMore">更多推荐 &gt;</span>
+        </div>
+        <div class="scene-content">
+          <div class="scene-grid">
+            <div
+              v-for="item in sceneList"
+              :key="item.id"
+              class="scene-item"
+              :style="{ backgroundImage: `url(${item.imageUrl})` }"
+            >
+              <div class="scene-overlay">
+                <div class="scene-info">
+                  <h3 class="scene-name">{{ item.name }}</h3>
+                  <p class="scene-desc">{{ item.description }}</p>
+                </div>
+              </div>
+              <el-icon class="delete-icon" @click.stop="handleRemoveScene(item.id)">
+                <Close />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationRecommend" lang="ts">
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Close } from '@element-plus/icons-vue';
+
+// 场景列表
+const sceneList = ref([
+  {
+    id: '1',
+    name: '茶水间',
+    description: '商用净水解决方案',
+    imageUrl: '/img/Midea.jpg'
+  },
+  {
+    id: '2',
+    name: '办公室',
+    description: '商用家电解决方案',
+    imageUrl: '/img/格力.jpg'
+  },
+  {
+    id: '3',
+    name: '办公健身房',
+    description: '健身休闲解决方案',
+    imageUrl: '/img/PHILIPS.jpg'
+  },
+  {
+    id: '4',
+    name: '会议室',
+    description: '智能会议解决方案',
+    imageUrl: '/img/MAXHUB.jpg'
+  },
+  {
+    id: '5',
+    name: '钢制档案类',
+    description: '家具解决方案',
+    imageUrl: '/img/联想.jpg'
+  }
+]);
+
+// 查看更多
+const handleViewMore = () => {
+  ElMessage.info('更多推荐功能开发中...');
+};
+
+// 移除场景
+const handleRemoveScene = (id: string) => {
+  ElMessageBox.confirm('是否确认移除该场景？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const index = sceneList.value.findIndex(item => item.id === id);
+    if (index !== -1) {
+      sceneList.value.splice(index, 1);
+      ElMessage.success('移除成功');
+    }
+  }).catch(() => {});
+};
+</script>
+
+<style scoped lang="scss">
+.recommend-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.recommend-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.scene-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.scene-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.scene-title {
+  .title-text {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+    margin-right: 15px;
+  }
+  
+  .title-desc {
+    font-size: 14px;
+    color: #909399;
+  }
+}
+
+.view-more {
+  font-size: 14px;
+  color: #409eff;
+  cursor: pointer;
+  
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.scene-content {
+  .scene-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+  }
+}
+
+.scene-item {
+  position: relative;
+  height: 280px;
+  border-radius: 8px;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  
+  &:hover {
+    .scene-overlay {
+      background: rgba(0, 0, 0, 0.5);
+    }
+    
+    .delete-icon {
+      opacity: 1;
+    }
+  }
+  
+  .scene-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s;
+  }
+  
+  .scene-info {
+    text-align: center;
+    color: #fff;
+    
+    .scene-name {
+      margin: 0 0 10px 0;
+      font-size: 22px;
+      font-weight: 600;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+    
+    .scene-desc {
+      margin: 0;
+      font-size: 14px;
+      opacity: 0.9;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    }
+  }
+  
+  .delete-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 18px;
+    color: #fff;
+    cursor: pointer;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    padding: 4px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    
+    &:hover {
+      background: rgba(245, 108, 108, 0.8);
+    }
+  }
+}
+</style>

src/views/platform/decoration/solution/index.vue

@@ -4,28 +4,27 @@
       <!-- 标题区域（可点击编辑） -->
       <div class="solution-header" @click="handleEditHeader">
         <div class="header-left">
-          <h2 class="solution-title">{{ headerConfig.title }}</h2>
+          <span class="solution-title">{{ headerConfig.title }}</span>
           <span class="solution-subtitle">{{ headerConfig.subtitle }}</span>
         </div>
         <div class="header-right">
-          <el-link type="primary" :underline="false" @click.stop="handleLinkClick">{{ headerConfig.linkText }}></el-link>
+          <span class="more-link" @click.stop="handleLinkClick">{{ headerConfig.linkText }}></span>
         </div>
       </div>
 
-      <!-- 方案卡片网格 -->
+      <!-- 方案卡片网格（和商城一模一样） -->
       <div class="solution-grid">
         <div
           v-for="item in solutionList"
           :key="item.id"
           class="solution-card"
-          @click="handleCardClick(item)"
+          @click="handleUpdate(item)"
         >
-          <!-- 卡片上半部分：标题和描述 -->
-          <div class="card-header">
-            <h3 class="card-title">{{ item.title }}</h3>
-            <p class="card-description">{{ item.description }}</p>
-          </div>
-          <!-- 卡片下半部分：图片 -->
+          <!-- 标题 -->
+          <div class="card-title">{{ item.title }}</div>
+          <!-- 描述 -->
+          <div class="card-desc">{{ item.description }}</div>
+          <!-- 图片 -->
           <div class="card-image">
             <el-image :src="item.imageUrl" fit="contain" lazy class="solution-image">
               <template #error>
@@ -35,25 +34,11 @@
               </template>
             </el-image>
           </div>
-          <!-- 操作按钮 -->
-          <div class="card-actions">
-            <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click.stop="handleDelete(item)">删除</el-button>
-          </div>
         </div>
       </div>
 
       <!-- 空状态 -->
       <el-empty v-if="!loading && solutionList.length === 0" description="暂无方案数据" />
-
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
     </el-card>
 
     <!-- 编辑标题对话框 -->
@@ -130,14 +115,15 @@
 
 <script setup name="Solution" lang="ts">
 import { reactive, ref, onMounted } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { Picture } from '@element-plus/icons-vue';
 import { getDecorationSectionByType, addDecorationSection, updateDecorationSection } from '@/api/decoration/section';
+import { listAdContent, updateAdContent } from '@/api/ad/content';
+import { listByIds } from '@/api/system/oss';
+
+const adType = 'decoration_solution';
+
 
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10
-});
 
 // 标题配置
 const headerConfig = ref({
@@ -217,7 +203,9 @@ const form = reactive({
   title: '',
   description: '',
   imageUrl: '',
-  sort: 0
+  sort: 0,
+  adType,
+  status: 1
 });
 
 const rules = {
@@ -227,66 +215,75 @@ const rules = {
 
 const dialog = reactive({ visible: false, title: '' });
 const loading = ref(false);
-const total = ref(0);
 const solutionList = ref<any[]>([]);
 const solutionFormRef = ref();
 
-// 模拟数据
-const mockData = [
-  { id: 1, title: '50档/50-100档', description: '对公业务伴手礼', imageUrl: 'https://via.placeholder.com/200x150/F5F5F5/333333?text=耳机', sort: 1 },
-  { id: 2, title: '100-200元档', description: '对公业务伴手礼', imageUrl: 'https://via.placeholder.com/200x150/F5F5F5/333333?text=鼠标', sort: 2 },
-  { id: 3, title: '200-500元档', description: '对公业务伴手礼', imageUrl: 'https://via.placeholder.com/200x150/F5F5F5/333333?text=手表', sort: 3 },
-  { id: 4, title: '500-1000元档', description: '对公业务伴手礼', imageUrl: 'https://via.placeholder.com/200x150/F5F5F5/333333?text=耳机2', sort: 4 },
-  { id: 5, title: '开门红电器', description: '对公业务伴手礼', imageUrl: 'https://via.placeholder.com/200x150/F5F5F5/333333?text=电饭煲', sort: 5 }
-];
-
-const getList = () => {
+// 获取方案列表
+const getList = async () => {
   loading.value = true;
-  setTimeout(() => {
-    const start = (queryParams.pageNum - 1) * queryParams.pageSize;
-    const end = start + queryParams.pageSize;
-    solutionList.value = mockData.slice(start, end);
-    total.value = mockData.length;
+  try {
+    const res = await listAdContent({ adType });
+    const rows = res.rows || [];
+    // 收集所有ossId，批量查询真实URL
+    const ossIds = rows.map((item: any) => item.imageUrl).filter((id: string) => id && /^\d+$/.test(id));
+    if (ossIds.length > 0) {
+      const ossRes = await listByIds(ossIds.join(','));
+      const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
+      rows.forEach((item: any) => {
+        // 保存原始ossId用于编辑回显
+        item.imageOssId = item.imageUrl;
+        if (item.imageUrl && ossMap.has(item.imageUrl)) {
+          item.imageUrl = ossMap.get(item.imageUrl);
+        }
+      });
+    }
+    // 字段映射：remark -> description
+    rows.forEach((item: any) => {
+      item.description = item.remark || '';
+    });
+    solutionList.value = rows;
+  } catch (error) {
+    console.error('获取方案列表失败', error);
+    solutionList.value = [];
+  } finally {
     loading.value = false;
-  }, 300);
-};
-
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加方案';
+  }
 };
 
 const handleUpdate = (row: any) => {
   reset();
-  Object.assign(form, row);
+  Object.assign(form, {
+    ...row,
+    // 编辑时用ossId，这样image-upload组件才能正确回显
+    imageUrl: row.imageOssId || row.imageUrl || '',
+    description: row.description || row.remark || ''
+  });
   dialog.visible = true;
-  dialog.title = '修改方案';
+  dialog.title = '编辑方案';
 };
 
-const submitForm = () => {
-  solutionFormRef.value?.validate((valid: boolean) => {
+const submitForm = async () => {
+  solutionFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      ElMessage.success(form.id ? '修改成功' : '添加成功');
-      dialog.visible = false;
-      getList();
+      try {
+        // 字段映射：description -> remark
+        const data = {
+          ...form,
+          adType,
+          remark: form.description,
+          status: 1
+        };
+        await updateAdContent(data);
+        ElMessage.success('保存成功');
+        dialog.visible = false;
+        getList();
+      } catch (error) {
+        ElMessage.error('保存失败');
+      }
     }
   });
 };
 
-const handleDelete = (row: any) => {
-  ElMessageBox.confirm('是否确认删除方案"' + row.title + '"？').then(() => {
-    ElMessage.success('删除成功');
-    getList();
-  }).catch(() => {});
-};
-
-const handleCardClick = (item: any) => {
-  console.log('点击方案:', item);
-};
-
-
-
 const cancel = () => {
   dialog.visible = false;
   reset();
@@ -306,121 +303,144 @@ onMounted(() => {
 <style scoped lang="scss">
 .solution-container {
   height: 100%;
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+
+  :deep(.el-card) {
+    background: #f5f5f5;
+    border: none;
+    box-shadow: none;
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+
+  :deep(.el-card__body) {
+    padding: 0;
+  }
 }
 
 .solution-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding: 12px 16px;
-  background: #f8f9fa;
+  padding: 15px 20px;
+  background: #fff;
   border-radius: 4px;
   cursor: pointer;
-  transition: background 0.3s;
+  max-width: 1100px;
+  margin: 0 auto 12px;
 
   &:hover {
-    background: #ebeef5;
+    background: #fafafa;
   }
 
   .header-left {
     display: flex;
     align-items: baseline;
-    gap: 16px;
+    gap: 12px;
 
     .solution-title {
-      margin: 0;
-      font-size: 20px;
+      font-size: 16px;
       font-weight: 600;
-      color: #303133;
+      color: #333;
     }
 
     .solution-subtitle {
-      font-size: 14px;
-      color: #909399;
+      font-size: 12px;
+      color: #999;
     }
   }
-}
 
-.solution-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 20px;
+  .header-right {
+    .more-link {
+      font-size: 12px;
+      color: #666;
+      cursor: pointer;
 
-  @media (max-width: 1400px) {
-    grid-template-columns: repeat(3, 1fr);
+      &:hover {
+        color: #333;
+      }
+    }
   }
+}
 
-  @media (max-width: 1000px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.solution-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  background: #f5f5f5;
+  margin-top: 10px;
+  padding: 5px;
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
 .solution-card {
-  background: #f8f9fa;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 20px;
+  flex: 1 0 calc(20% - 4px);
+  max-width: calc(20% - 4px);
+  padding: 20px 16px;
+  text-align: center;
   cursor: pointer;
   transition: all 0.3s;
-  display: flex;
-  flex-direction: column;
+  box-sizing: border-box;
+  background: #fff;
 
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
+    background: #fafafa;
   }
 
-  .card-header {
-    margin-bottom: 16px;
+  @media (max-width: 1200px) {
+    flex: 1 0 calc(25% - 4px);
+    max-width: calc(25% - 4px);
+  }
 
-    .card-title {
-      margin: 0 0 8px 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: #303133;
-    }
+  @media (max-width: 900px) {
+    flex: 1 0 calc(33.33% - 4px);
+    max-width: calc(33.33% - 4px);
+  }
 
-    .card-description {
-      margin: 0;
-      font-size: 13px;
-      color: #909399;
-    }
+  .card-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 6px;
+  }
+
+  .card-desc {
+    font-size: 12px;
+    color: #999;
+    margin-bottom: 20px;
   }
 
   .card-image {
-    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 120px;
+    height: 100px;
 
     .solution-image {
-      max-width: 100%;
-      max-height: 120px;
+      width: 100%;
+      height: 100px;
+
+      :deep(img) {
+        object-fit: contain !important;
+        max-width: 100%;
+        max-height: 100px;
+      }
     }
 
     .image-slot {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 100px;
-      height: 100px;
-      background: #ebeef5;
-      border-radius: 8px;
-      color: #c0c4cc;
-      font-size: 30px;
+      width: 80px;
+      height: 80px;
+      background: #f5f5f5;
+      border-radius: 4px;
+      color: #ccc;
+      font-size: 24px;
     }
   }
-
-  .card-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid #e4e7ed;
-  }
 }
 </style>

src/views/platform/decoration/special/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="special-page">
+    <div class="special-container">
+      <!-- 行家精选区域（独立卡片） -->
+      <div class="expert-card">
+        <div class="expert-header">
+          <div class="expert-title">
+            <span class="title-text">行家精选</span>
+            <span class="title-desc">品质保证，厂家直供，性价比首选</span>
+          </div>
+          <span class="view-more" @click="handleViewMore">查看更多 &gt;</span>
+        </div>
+        <div class="expert-content">
+          <div class="product-grid">
+            <div
+              v-for="product in expertProducts"
+              :key="product.id"
+              class="product-card"
+            >
+              <el-icon class="delete-icon" @click="handleRemoveExpert(product.id)">
+                <Close />
+              </el-icon>
+              <div class="product-image">
+                <el-image :src="product.imageUrl" fit="contain" lazy class="image">
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="product-info">
+                <p class="product-name">{{ product.name }}</p>
+                <div class="product-price">
+                  <span class="current-price">¥{{ product.price }}</span>
+                  <span class="original-price">¥{{ product.originalPrice }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 特价信息列表区域（独立卡片） -->
+      <div class="list-card">
+        <div class="list-title">特价信息列表</div>
+        
+        <!-- 搜索区域 -->
+        <div class="search-area">
+          <el-form :model="queryParams" :inline="true">
+            <el-form-item>
+              <el-input v-model="queryParams.productId" placeholder="请输入商品编号" clearable style="width: 200px" />
+            </el-form-item>
+            <el-form-item>
+              <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable style="width: 200px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="specialList" border>
+          <el-table-column label="商品编号" align="center" prop="productId" width="120" />
+          <el-table-column label="商品图片" align="center" width="100">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                fit="cover"
+                style="width: 60px; height: 60px; border-radius: 4px"
+                lazy
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="特价" align="center" prop="specialPrice" width="120">
+            <template #default="scope">
+              <span class="price-text">¥{{ scope.row.specialPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="原价" align="center" prop="originalPrice" width="120">
+            <template #default="scope">
+              <span class="original-text">¥{{ scope.row.originalPrice }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationSpecial" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Close, Picture } from '@element-plus/icons-vue';
+
+// 行家精选商品列表
+const expertProducts = ref([
+  {
+    id: '1',
+    name: 'TCL-75Q60E超高清4K电视75寸',
+    imageUrl: '/img/创维100V5-HG1会议平板触控一体机.png',
+    price: '5599.00',
+    originalPrice: '6890.00'
+  },
+  {
+    id: '2',
+    name: '格力KFR-72LW(72532)NhAa-3空...',
+    imageUrl: '/img/格力.jpg',
+    price: '7519.22',
+    originalPrice: '8238.76'
+  },
+  {
+    id: '3',
+    name: '先锋DYT-Z9Pro电热油汀取暖器',
+    imageUrl: '/img/江润实验台.png',
+    price: '469',
+    originalPrice: '799.00'
+  },
+  {
+    id: '4',
+    name: '美菱MF-LC4009A砂电脑电饭煲4L',
+    imageUrl: '/img/电饭煲.png',
+    price: '399',
+    originalPrice: '499.00'
+  },
+  {
+    id: '5',
+    name: '富得P1106打印机',
+    imageUrl: '/img/奔图.jpg',
+    price: '1465.27',
+    originalPrice: '1798.80'
+  }
+]);
+
+// 查询参数
+const queryParams = reactive({
+  productId: '',
+  productName: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 特价列表数据
+const specialList = ref<any[]>([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  // 模拟数据
+  setTimeout(() => {
+    specialList.value = [];
+    total.value = 0;
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.productId = '';
+  queryParams.productName = '';
+  handleQuery();
+};
+
+// 查看更多
+const handleViewMore = () => {
+  ElMessage.info('查看更多功能开发中...');
+};
+
+// 移除行家精选商品
+const handleRemoveExpert = (id: string) => {
+  ElMessageBox.confirm('是否确认移除该商品？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    const index = expertProducts.value.findIndex(item => item.id === id);
+    if (index !== -1) {
+      expertProducts.value.splice(index, 1);
+      ElMessage.success('移除成功');
+    }
+  }).catch(() => {});
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  ElMessage.info('编辑功能开发中...');
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm('是否确认删除该特价商品？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.special-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.special-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.expert-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.expert-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.expert-title {
+  .title-text {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+    margin-right: 15px;
+  }
+  
+  .title-desc {
+    font-size: 14px;
+    color: #909399;
+  }
+}
+
+.view-more {
+  font-size: 14px;
+  color: #409eff;
+  cursor: pointer;
+  
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.expert-content {
+  .product-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 15px;
+  }
+}
+
+.product-card {
+  position: relative;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  cursor: pointer;
+  
+  &:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .delete-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 16px;
+    color: #909399;
+    cursor: pointer;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    padding: 2px;
+    
+    &:hover {
+      color: #f56c6c;
+    }
+  }
+  
+  .product-image {
+    width: 100%;
+    height: 150px;
+    margin-bottom: 10px;
+    
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+    
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background: #f5f7fa;
+      color: #909399;
+      font-size: 30px;
+    }
+  }
+  
+  .product-info {
+    .product-name {
+      margin: 0 0 8px 0;
+      font-size: 13px;
+      color: #303133;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      min-height: 36px;
+    }
+    
+    .product-price {
+      .current-price {
+        font-size: 16px;
+        font-weight: 600;
+        color: #f56c6c;
+        margin-right: 8px;
+      }
+      
+      .original-price {
+        font-size: 12px;
+        color: #909399;
+        text-decoration: line-through;
+      }
+    }
+  }
+}
+
+.list-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 15px;
+}
+
+.search-area {
+  margin-bottom: 15px;
+}
+
+.price-text {
+  color: #f56c6c;
+  font-weight: 600;
+}
+
+.original-text {
+  color: #909399;
+  text-decoration: line-through;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/banner/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="banner-page">
+    <div class="banner-container">
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">广告位信息列表</span>
+          <div class="table-actions">
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加广告</el-button>
+            <el-button icon="Refresh" circle size="small" @click="getList" />
+          </div>
+        </div>
+
+        <el-table v-loading="loading" :data="bannerList" border>
+          <el-table-column label="公告标题" align="center" prop="title" min-width="150" />
+          <el-table-column label="封面图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                :preview-src-list="[scope.row.imageUrl]"
+                preview-teleported
+              >
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="250">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="80">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="公告标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入公告标题" />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="imageUrl">
+          <div class="upload-area">
+            <div class="image-preview" v-if="form.imageUrl">
+              <el-image :src="form.imageUrl" fit="cover" style="width: 100px; height: 80px; border-radius: 4px" />
+            </div>
+            <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftBanner" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const bannerList = ref([
+  { id: '1', title: '轮播广告底部图片2', imageUrl: '/img/banner1.jpg', linkUrl: 'https://www.yoe365.com/goods-category?no=12', status: '显示', sort: 0 },
+  { id: '2', title: '轮播广告底部图片', imageUrl: '/img/banner2.jpg', linkUrl: 'https://www.yoe365.com/solve?t=00027', status: '显示', sort: 0 }
+]);
+const loading = ref(false);
+const total = ref(2);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  title: '',
+  imageUrl: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 上传图片
+const handleUpload = () => {
+  ElMessage.info('上传功能开发中...');
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加广告';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑广告';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除该广告？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.banner-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.banner-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.table-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 60px;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 20px;
+  border-radius: 4px;
+}
+
+.upload-area {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/carousel/index.vue

@@ -1,53 +1,44 @@
 <template>
-  <div class="carousel-container">
-    <el-card shadow="hover">
-      <!-- 搜索区域 -->
-      <transition
-        :enter-active-class="proxy?.animate.searchAnimate.enter"
-        :leave-active-class="proxy?.animate.searchAnimate.leave"
-      >
-        <div v-show="showSearch" class="mb-[10px]">
-          <el-card shadow="hover">
-            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
-              <el-form-item label="广告名称" prop="title">
-                <el-input
-                  v-model="queryParams.title"
-                  placeholder="请输入广告名称"
-                  clearable
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item>
-              <el-form-item label="起始时间" prop="dateRange">
-                <el-date-picker
-                  v-model="dateRange"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  value-format="YYYY-MM-DD"
-                  style="width: 240px"
-                />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
+  <div class="carousel-page">
+    <div class="carousel-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="广告名称" prop="title">
+            <el-input
+              v-model="queryParams.title"
+              placeholder="请输入广告名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="起始时间" prop="dateRange">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="YYYY-MM-DD"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
         </div>
-      </transition>
-
-      <!-- 操作栏 -->
-      <el-row :gutter="10" class="mb8">
-        <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-      </el-row>
-
-      <!-- 表格标题 -->
-      <div class="table-title mb-[10px]">
-        <span>轮播广告信息列表</span>
       </div>
 
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格标题 -->
+        <div class="table-title">轮播广告信息列表</div>
+
       <!-- 表格 -->
       <el-table v-loading="loading" :data="carouselList" border>
         <el-table-column label="广告图片" align="center" width="120">
@@ -77,23 +68,24 @@
         </el-table-column>
         <el-table-column label="排序" align="center" prop="sort" width="80" />
         <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="620px" append-to-body @close="cancel">
@@ -349,15 +341,56 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.carousel-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .carousel-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .el-form { flex: 1; }
+  .toolbar { flex-shrink: 0; }
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .table-title {
-  font-size: 18px;
-  font-weight: bold;
+  font-size: 16px;
+  font-weight: 600;
   color: #303133;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
 }
 </style>
 

src/views/platform/gift/category/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="category-page">
+    <div class="category-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="分类类型">
+            <el-select v-model="queryParams.categoryType" placeholder="请选择分类类型" style="width: 200px">
+              <el-option label="福礼分类" value="福礼分类" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd()">添加分类</el-button>
+            <el-button type="info" @click="toggleExpandAll">
+              <el-icon><ArrowDown v-if="!isExpandAll" /><ArrowUp v-else /></el-icon>
+              {{ isExpandAll ? '全部收起' : '全部展开' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <el-table
+          v-loading="loading"
+          :data="categoryList"
+          row-key="id"
+          border
+          :default-expand-all="isExpandAll"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+          <el-table-column label="分类名称" prop="name" min-width="200" />
+          <el-table-column label="分类级别" align="center" prop="level" width="120" />
+          <el-table-column label="是否显示" align="center" width="100">
+            <template #default="scope">
+              <el-link :type="scope.row.visible ? 'primary' : 'danger'">
+                {{ scope.row.visible ? '是' : '否' }}
+              </el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="100" />
+          <el-table-column label="操作" align="center" width="280">
+            <template #default="scope">
+              <span class="action-link success" @click="handleAdd(scope.row)">+新增分类</span>
+              <span class="action-link primary" @click="handleEdit(scope.row)">修改分类</span>
+              <span class="action-link warning" @click="handleConfigProduct(scope.row)">配置商品</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="上级分类" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'name', children: 'children' }"
+            value-key="id"
+            placeholder="请选择上级分类"
+            check-strictly
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="是否显示" prop="visible">
+          <el-radio-group v-model="form.visible">
+            <el-radio :value="true">是</el-radio>
+            <el-radio :value="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftCategory" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+
+// 查询参数
+const queryParams = reactive({
+  categoryType: '福礼分类'
+});
+
+// 是否全部展开
+const isExpandAll = ref(false);
+
+// 列表数据
+const categoryList = ref([
+  { id: '1', name: '家用电器', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '2', name: '食品饮料', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '3', name: '杯壶厨具', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '4', name: '家纺家居', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '5', name: '箱包服饰', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '6', name: '个护清洁', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '7', name: '运动户外', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '8', name: '通讯数码', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '9', name: '车载宠物', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '10', name: '母婴玩具', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '11', name: '卡册卡券', level: '1级', sort: 0, visible: true, children: [] },
+  { id: '12', name: '文房收藏', level: '1级', sort: 0, visible: true, children: [] }
+]);
+const loading = ref(false);
+
+// 分类选项（用于树形选择）
+const categoryOptions = ref<any[]>([]);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  parentId: '0',
+  name: '',
+  sort: 0,
+  visible: true
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    // 构建分类选项
+    categoryOptions.value = [{ id: '0', name: '顶级分类', children: categoryList.value }];
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.categoryType = '福礼分类';
+  handleQuery();
+};
+
+// 切换展开/收起
+const toggleExpandAll = () => {
+  isExpandAll.value = !isExpandAll.value;
+  // 重新渲染表格
+  const temp = categoryList.value;
+  categoryList.value = [];
+  setTimeout(() => {
+    categoryList.value = temp;
+  }, 0);
+};
+
+// 添加
+const handleAdd = (row?: any) => {
+  form.value = { ...initForm };
+  if (row) {
+    form.value.parentId = row.id;
+  }
+  dialog.title = '添加分类';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row, parentId: row.parentId || '0' };
+  dialog.title = '修改分类';
+  dialog.visible = true;
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.category-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.category-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  font-size: 13px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.success {
+    color: #67c23a;
+    &:hover { color: #85ce61; }
+  }
+  
+  &.warning {
+    color: #e6a23c;
+    &:hover { color: #ebb563; }
+  }
+}
+</style>

src/views/platform/gift/floorAd/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="floor-ad-page">
+    <div class="floor-ad-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="楼层名称">
+            <el-input v-model="queryParams.name" placeholder="请输入楼层名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加楼层</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">楼层信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="floorList" border>
+          <el-table-column label="楼层名称" align="center" prop="name" min-width="120" />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="280">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleConfigProduct(scope.row)">配置商品</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="楼层名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftFloorAd" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const floorList = ref([
+  { id: '1', name: '1家用电器', linkUrl: 'https://fuli.yoe365.com/goods-category?no=801', status: '显示', sort: 1, updateTime: '2025-12-18 15:19:35' },
+  { id: '2', name: '2食品饮料', linkUrl: 'https://fuli.yoe365.com/goods-category?no=802', status: '显示', sort: 2, updateTime: '2025-12-18 15:19:35' },
+  { id: '3', name: '3杯壶厨具', linkUrl: 'https://fuli.yoe365.com/goods-category?no=803', status: '显示', sort: 3, updateTime: '2025-12-18 15:19:35' },
+  { id: '4', name: '4家居家纺', linkUrl: 'https://fuli.yoe365.com/goods-category?no=804', status: '显示', sort: 4, updateTime: '2025-12-18 15:19:35' },
+  { id: '5', name: '5箱包服饰', linkUrl: 'https://fuli.yoe365.com/goods-category?no=805', status: '显示', sort: 5, updateTime: '2025-12-18 15:19:35' },
+  { id: '6', name: '6个护美妆', linkUrl: 'https://fuli.yoe365.com/goods-category?no=806', status: '显示', sort: 6, updateTime: '2025-12-18 15:19:35' },
+  { id: '7', name: '7运动户外', linkUrl: 'https://fuli.yoe365.com/goods-category?no=807', status: '显示', sort: 7, updateTime: '2025-12-18 15:19:35' },
+  { id: '8', name: '8通讯数码', linkUrl: 'https://fuli.yoe365.com/goods-category?no=808', status: '显示', sort: 8, updateTime: '2025-12-18 15:19:35' },
+  { id: '9', name: '9汽车用品', linkUrl: 'https://fuli.yoe365.com/goods-category?no=809', status: '显示', sort: 9, updateTime: '2025-12-18 15:19:35' }
+]);
+const loading = ref(false);
+const total = ref(9);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加楼层';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑楼层';
+  dialog.visible = true;
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除楼层"${row.name}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.floor-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.floor-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/forYou/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="for-you-page">
+    <div class="for-you-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="楼层名称">
+            <el-input v-model="queryParams.name" placeholder="请输入楼层名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加推荐楼层</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">推荐楼层信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="floorList" border>
+          <el-table-column label="楼层名称" align="center" prop="name" min-width="150" />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="200">
+            <template #default="scope">
+              <el-link v-if="scope.row.linkUrl" type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="80">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleConfigProduct(scope.row)">配置商品</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="楼层名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftForYou" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const floorList = ref([
+  { id: '1', name: '为你推荐楼层', linkUrl: '', status: '显示', sort: 0, updateTime: '2025-12-18 15:26:36' }
+]);
+const loading = ref(false);
+const total = ref(1);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加推荐楼层';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑推荐楼层';
+  dialog.visible = true;
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除楼层"${row.name}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.for-you-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.for-you-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/hotCustom/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="hot-custom-page">
+    <div class="hot-custom-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="楼层名称">
+            <el-input v-model="queryParams.name" placeholder="请输入楼层名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加热门楼层</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">热门楼层信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="floorList" border>
+          <el-table-column label="楼层名称" align="center" prop="name" min-width="150" />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="200">
+            <template #default="scope">
+              <el-link v-if="scope.row.linkUrl" type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="80">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleConfigProduct(scope.row)">配置商品</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="楼层名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftHotCustom" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const floorList = ref([
+  { id: '1', name: '热门定制楼层', linkUrl: '', status: '显示', sort: 0, updateTime: '2025-12-18 15:23:34' }
+]);
+const loading = ref(false);
+const total = ref(1);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加热门楼层';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑热门楼层';
+  dialog.visible = true;
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除楼层"${row.name}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.hot-custom-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.hot-custom-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/icon/index.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="icon-container">
-    <el-card shadow="hover">
-      <!-- 顶部操作 -->
-      <div class="action-bar mb-[10px]">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">添加图标广告</el-button>
-        <el-button icon="Refresh" @click="getList">刷新</el-button>
-      </div>
-
-      <!-- 表格标题 -->
-      <div class="table-title mb-[10px]">
-        <span>福礼图标广告信息列表</span>
+  <div class="icon-page">
+    <div class="icon-container">
+      <!-- 标题栏（独立卡片） -->
+      <div class="header-card">
+        <div class="table-title">福礼图标广告信息列表</div>
+        <div class="action-btns">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd">添加图标广告</el-button>
+          <el-button icon="Refresh" @click="getList">刷新</el-button>
+        </div>
       </div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="iconList" border>
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="iconList" border>
         <el-table-column label="分类标题" align="center" prop="title" min-width="160" />
         <el-table-column label="封面图片" align="center" width="140">
           <template #default="scope">
@@ -45,23 +45,24 @@
           </template>
         </el-table-column>
         <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="620px" append-to-body @close="cancel">
@@ -175,6 +176,8 @@ const getList = async () => {
       const ossRes = await listByIds(ossIds);
       const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
       rows.forEach((item: any) => {
+        // 保存原始ossId用于编辑回显
+        item.imageOssId = item.imageUrl;
         if (item.imageUrl && ossMap.has(String(item.imageUrl))) {
           item.imageUrl = ossMap.get(String(item.imageUrl));
         }
@@ -208,6 +211,8 @@ const handleUpdate = (row: any) => {
   form.value = {
     ...row,
     adType: 'gift_icon',
+    // 编辑时用ossId，这样image-upload组件才能正确回显
+    imageUrl: row.imageOssId || row.imageUrl || '',
     status: row.status ?? 1,
     color: row.color || '#ffffff',
     remark: row.remark || '',
@@ -252,20 +257,42 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.icon-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .icon-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-.action-bar {
+.header-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px 20px;
+  margin-bottom: 12px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .action-btns {
+    display: flex;
+    gap: 10px;
+  }
 }
 
-.table-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  padding: 0 4px;
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .image-slot {
@@ -282,5 +309,21 @@ onMounted(() => {
 .link-text {
   color: #409eff;
 }
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
 </style>
 
+

src/views/platform/gift/longAd/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="long-ad-page">
+    <div class="long-ad-container">
+      <!-- 广告区域（独立卡片） -->
+      <div class="ad-card">
+        <div class="ad-header">
+          <span class="ad-title">首页横幅广告</span>
+        </div>
+
+        <!-- 广告图片展示 -->
+        <div class="ad-preview">
+          <el-image :src="adData.imageUrl" fit="cover" lazy class="ad-image">
+            <template #error>
+              <div class="image-slot">
+                <el-icon><Picture /></el-icon>
+                <span>暂无图片</span>
+              </div>
+            </template>
+          </el-image>
+        </div>
+
+        <!-- 编辑表单 -->
+        <div class="ad-form">
+          <el-form :model="form" label-width="80px">
+            <el-form-item label="链接:">
+              <el-input v-model="form.link" placeholder="请输入链接地址" />
+            </el-form-item>
+            <el-form-item label="图片:">
+              <div class="upload-area">
+                <div class="image-preview" v-if="form.imageUrl">
+                  <el-image :src="form.imageUrl" fit="cover" style="width: 200px; height: 80px; border-radius: 4px" />
+                </div>
+                <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
+                <span class="upload-tip">建议尺寸：1200 x 300 像素</span>
+              </div>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSubmit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="GiftLongAd" lang="ts">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 广告数据
+const adData = ref({
+  imageUrl: '/img/长图广告.jpg',
+  link: ''
+});
+
+// 表单数据
+const form = reactive({
+  link: '',
+  imageUrl: '/img/长图广告.jpg'
+});
+
+// 上传图片
+const handleUpload = () => {
+  ElMessage.info('上传功能开发中...');
+};
+
+// 提交
+const handleSubmit = () => {
+  adData.value.imageUrl = form.imageUrl;
+  adData.value.link = form.link;
+  ElMessage.success('提交成功');
+};
+</script>
+
+<style scoped lang="scss">
+.long-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.long-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.ad-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.ad-header {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.ad-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409eff;
+}
+
+.ad-preview {
+  margin-bottom: 20px;
+  
+  .ad-image {
+    width: 100%;
+    height: 300px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
+.image-slot {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
+  
+  .el-icon {
+    font-size: 40px;
+    margin-bottom: 10px;
+  }
+}
+
+.ad-form {
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+}
+
+.upload-area {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  
+  .image-preview {
+    flex-shrink: 0;
+  }
+  
+  .upload-tip {
+    color: #909399;
+    font-size: 12px;
+  }
+}
+</style>

src/views/platform/gift/notice/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="notice-page">
+    <div class="notice-container">
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">福礼公告信息列表</span>
+          <div class="table-actions">
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加福礼公告</el-button>
+            <el-button icon="Refresh" circle size="small" @click="getList" />
+          </div>
+        </div>
+
+        <el-table v-loading="loading" :data="noticeList" border>
+          <el-table-column label="公告标题" align="center" prop="title" min-width="400" show-overflow-tooltip />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" width="180">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="80">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="公告标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入公告标题" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftNotice" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const noticeList = ref([
+  { id: '1', title: '喜讯 | 优易365成功中标"中国建设银行湖北省分行全省宣传营销用品采购项目"项目!', linkUrl: 'https://www.baidu.com', status: '显示', sort: 0 },
+  { id: '2', title: '喜讯 | 优易365成功中标"湖北烽火普天信息科技园（集团）有限公司办公用品项目"项目!', linkUrl: 'https://www.baidu.com', status: '显示', sort: 0 },
+  { id: '3', title: '喜讯 | 优易365成功中标"中国邮政储蓄银行武汉市分行生日福利项目"项目!', linkUrl: 'https://www.baidu.com', status: '显示', sort: 0 }
+]);
+const loading = ref(false);
+const total = ref(3);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  title: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加福礼公告';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑福礼公告';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除该公告？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.notice-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.notice-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.table-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/recommendAd/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="recommend-ad-page">
+    <div class="recommend-ad-container">
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">推荐广告信息列表</span>
+          <div class="table-actions">
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加推荐广告</el-button>
+            <el-button icon="Refresh" circle size="small" @click="getList" />
+          </div>
+        </div>
+
+        <el-table v-loading="loading" :data="adList" border>
+          <el-table-column label="公告标题" align="center" prop="title" min-width="150" />
+          <el-table-column label="封面图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                :preview-src-list="[scope.row.imageUrl]"
+                preview-teleported
+              >
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="250">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" width="80">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '显示' ? 'primary' : 'info'" size="small">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="公告标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入公告标题" />
+        </el-form-item>
+        <el-form-item label="封面图片" prop="imageUrl">
+          <div class="upload-area">
+            <div class="image-preview" v-if="form.imageUrl">
+              <el-image :src="form.imageUrl" fit="cover" style="width: 100px; height: 80px; border-radius: 4px" />
+            </div>
+            <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio value="显示">显示</el-radio>
+            <el-radio value="隐藏">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="GiftRecommendAd" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const adList = ref([
+  { id: '1', title: '推荐广告图片位4', imageUrl: '/img/推荐广告1.jpg', linkUrl: 'https://fuli.yoe365.com/goods-category?no=806007', status: '显示', sort: 0 },
+  { id: '2', title: '推荐广告图片位3', imageUrl: '/img/推荐广告2.jpg', linkUrl: 'https://www.yoe365.com/solve?t=00027', status: '显示', sort: 0 },
+  { id: '3', title: '推荐广告位图片2', imageUrl: '/img/推荐广告3.jpg', linkUrl: 'https://fuli.yoe365.com/goods-category?no=806', status: '显示', sort: 0 },
+  { id: '4', title: '推荐广告图片位1', imageUrl: '/img/推荐广告4.jpg', linkUrl: 'https://fuli.yoe365.com/goods-category?no=808001', status: '显示', sort: 0 }
+]);
+const loading = ref(false);
+const total = ref(4);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  title: '',
+  imageUrl: '',
+  linkUrl: '',
+  sort: 0,
+  status: '显示'
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 上传图片
+const handleUpload = () => {
+  ElMessage.info('上传功能开发中...');
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加推荐广告';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑推荐广告';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除该推荐广告？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.recommend-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.recommend-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.table-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80px;
+  height: 60px;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 20px;
+  border-radius: 4px;
+}
+
+.upload-area {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/siteProduct/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="site-product-page">
+    <div class="site-product-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true" label-width="80px">
+          <el-form-item label="名称/编号">
+            <el-input v-model="queryParams.keyword" placeholder="请输入商品名称/编号搜索" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="商品品牌">
+            <el-select v-model="queryParams.brand" placeholder="请选择" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商品来源">
+            <el-input v-model="queryParams.source" placeholder="请输入商品来源" clearable style="width: 140px" />
+          </el-form-item>
+          <el-form-item label="是否自营">
+            <el-select v-model="queryParams.isSelf" placeholder="请选择" clearable style="width: 100px">
+              <el-option label="全部" value="" />
+              <el-option label="是" value="1" />
+              <el-option label="否" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审核状态">
+            <el-select v-model="queryParams.auditStatus" placeholder="请选择" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+              <el-option label="待审核" value="0" />
+              <el-option label="已通过" value="1" />
+              <el-option label="已拒绝" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="上下架状态">
+            <el-select v-model="queryParams.shelfStatus" placeholder="请选择" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+              <el-option label="上架" value="1" />
+              <el-option label="下架" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商品类型">
+            <el-select v-model="queryParams.productType" placeholder="请选择" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商品类目">
+            <el-select v-model="queryParams.category1" placeholder="一级类目" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryParams.category2" placeholder="二级类目" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryParams.category3" placeholder="三级类目" clearable style="width: 120px">
+              <el-option label="全部" value="" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Upload" @click="handleImport">导入</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <el-table v-loading="loading" :data="productList" border>
+          <el-table-column label="商品编号" align="center" prop="productNo" width="100" />
+          <el-table-column label="商品图片" align="center" width="100">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                fit="cover"
+                style="width: 60px; height: 60px; border-radius: 4px"
+                :preview-src-list="[scope.row.imageUrl]"
+                preview-teleported
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品信息" align="left" min-width="200">
+            <template #default="scope">
+              <div class="product-info">
+                <div class="product-name">{{ scope.row.name }}</div>
+                <div class="product-brand">品牌：{{ scope.row.brand }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="主站分类" align="center" prop="mainCategory" width="80" />
+          <el-table-column label="赠礼分类" align="center" prop="giftCategory" width="80" />
+          <el-table-column label="场景标签" align="center" prop="sceneTag" width="80" />
+          <el-table-column label="单位" align="center" width="100">
+            <template #default="scope">
+              <div>单位：{{ scope.row.unit }}</div>
+              <div>起订量：{{ scope.row.minOrder }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="SKU价格" align="center" width="120">
+            <template #default="scope">
+              <div>市场价：<span class="price">¥{{ scope.row.marketPrice }}</span></div>
+              <div>会员价：<span class="price red">¥{{ scope.row.memberPrice }}</span></div>
+              <div>成本价：<span class="price">¥{{ scope.row.costPrice }}</span></div>
+            </template>
+          </el-table-column>
+          <el-table-column label="库存" align="center" width="120">
+            <template #default="scope">
+              <div>库存总数：<span class="stock">{{ scope.row.stock }}</span></div>
+              <div>可用库存：{{ scope.row.availableStock }}</div>
+              <div>虚拟库存：{{ scope.row.virtualStock }}</div>
+              <el-link type="primary" @click="handleViewStock(scope.row)">[可用库存明细]</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="上下架状态" align="center" width="90">
+            <template #default="scope">
+              <el-tag :type="scope.row.shelfStatus === '上架' ? 'success' : 'info'" size="small">
+                {{ scope.row.shelfStatus }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" width="80" />
+          <el-table-column label="操作" align="center" width="80">
+            <template #default="scope">
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="GiftSiteProduct" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  keyword: '',
+  brand: '',
+  source: '',
+  isSelf: '',
+  auditStatus: '',
+  shelfStatus: '',
+  productType: '',
+  category1: '',
+  category2: '',
+  category3: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const productList = ref([
+  {
+    id: '1',
+    productNo: '002063913',
+    imageUrl: '/img/商品1.jpg',
+    name: '水洗棉毛巾被四件套',
+    brand: '柠檬好梦',
+    mainCategory: '床品套件',
+    giftCategory: '家用电器',
+    sceneTag: '',
+    unit: '个',
+    minOrder: 1,
+    marketPrice: '688.00',
+    memberPrice: '165.00',
+    costPrice: '142.00',
+    stock: 999,
+    availableStock: 0,
+    virtualStock: 999,
+    shelfStatus: '上架',
+    remark: ''
+  },
+  {
+    id: '2',
+    productNo: '002065000',
+    imageUrl: '/img/商品2.jpg',
+    name: '雅兰家纺印花四件套（花色：绽放时光）YLT2203 被套200*230cm床单230*230cm枕套48*74cm*2',
+    brand: '国产',
+    mainCategory: '床品套件',
+    giftCategory: '四件套',
+    sceneTag: '',
+    unit: '个',
+    minOrder: 100,
+    marketPrice: '139.00',
+    memberPrice: '92.00',
+    costPrice: '71.00',
+    stock: 999,
+    availableStock: 0,
+    virtualStock: 999,
+    shelfStatus: '上架',
+    remark: ''
+  },
+  {
+    id: '3',
+    productNo: '002065001',
+    imageUrl: '/img/商品3.jpg',
+    name: '膳魔师精品JNL保温水杯有色男女便携304不锈钢直身保温杯 JNL-502版 游杯 500ml',
+    brand: '膳魔师',
+    mainCategory: '保温杯',
+    giftCategory: '保温杯',
+    sceneTag: '',
+    unit: '个',
+    minOrder: 12,
+    marketPrice: '445.00',
+    memberPrice: '202.00',
+    costPrice: '155.00',
+    stock: 999,
+    availableStock: 0,
+    virtualStock: 999,
+    shelfStatus: '上架',
+    remark: ''
+  }
+]);
+const loading = ref(false);
+const total = ref(3);
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  Object.assign(queryParams, {
+    keyword: '',
+    brand: '',
+    source: '',
+    isSelf: '',
+    auditStatus: '',
+    shelfStatus: '',
+    productType: '',
+    category1: '',
+    category2: '',
+    category3: ''
+  });
+  handleQuery();
+};
+
+// 导入
+const handleImport = () => {
+  ElMessage.info('导入功能开发中...');
+};
+
+// 查看库存明细
+const handleViewStock = (row: any) => {
+  ElMessage.info(`查看库存明细：${row.productNo}`);
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除商品"${row.productNo}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.site-product-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.site-product-container {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.product-info {
+  text-align: left;
+  
+  .product-name {
+    font-size: 13px;
+    color: #303133;
+    line-height: 1.4;
+    margin-bottom: 5px;
+  }
+  
+  .product-brand {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.price {
+  color: #303133;
+  
+  &.red {
+    color: #f56c6c;
+  }
+}
+
+.stock {
+  color: #e6a23c;
+}
+
+.action-link {
+  cursor: pointer;
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/gift/title/index.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="title-container">
-    <el-card shadow="hover">
-      <!-- 顶部操作 -->
-      <div class="action-bar mb-[10px]">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button icon="Refresh" @click="getList">刷新</el-button>
-      </div>
-
-      <!-- 表格标题 -->
-      <div class="table-title mb-[10px]">
-        <span>福礼标题信息列表</span>
+  <div class="title-page">
+    <div class="title-container">
+      <!-- 标题栏（独立卡片） -->
+      <div class="header-card">
+        <div class="table-title">福礼标题信息列表</div>
+        <div class="action-btns">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          <el-button icon="Refresh" @click="getList">刷新</el-button>
+        </div>
       </div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="titleList" border>
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="titleList" border>
         <el-table-column label="标题名称" align="center" prop="title" min-width="140" />
         <el-table-column label="导航类型" align="center" prop="remark" min-width="120" />
         <el-table-column label="链接地址" align="center" prop="link" :show-overflow-tooltip="true" min-width="240" />
@@ -25,23 +25,24 @@
           </template>
         </el-table-column>
         <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="620px" append-to-body @close="cancel">
@@ -231,20 +232,75 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.title-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .title-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-.action-bar {
+.header-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px 20px;
+  margin-bottom: 12px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .action-btns {
+    display: flex;
+    gap: 10px;
+  }
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .action-btns {
+    display: flex;
+    gap: 10px;
+  }
 }
 
-.table-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  padding: 0 4px;
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
 }
 </style>
 

src/views/platform/industrial/booth/index.vue

@@ -1,72 +1,77 @@
 <template>
-  <div class="booth-container">
-    <el-card shadow="hover">
-      <!-- 操作栏 -->
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" icon="View" @click="handleViewProducts">查看推荐商品</el-button>
-        </el-col>
-      </el-row>
-
-      <!-- 商品展示区域 -->
-      <div class="product-display-area">
-        <div class="product-grid">
-          <div
-            v-for="(product, index) in displayProducts"
-            :key="product.id"
-            class="product-card"
-          >
-            <el-icon class="delete-icon" @click="handleRemoveProduct(product.id)">
-              <Close />
-            </el-icon>
-            <div class="product-image">
-              <el-image
-                :src="product.imageUrl"
-                fit="cover"
-                lazy
-                class="image"
-              >
-                <template #error>
-                  <div class="image-slot">
-                    <el-icon><Picture /></el-icon>
+  <div class="booth-page">
+    <div class="booth-container">
+      <!-- 操作栏（独立卡片） -->
+      <div class="action-card">
+        <el-button type="primary" icon="View" @click="handleViewProducts">查看推荐商品</el-button>
+      </div>
+
+      <!-- 商品展示区域（独立卡片） -->
+      <div class="content-card" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
+        <div class="product-display-area">
+          <div class="carousel-viewport">
+            <transition name="slide-fade" mode="out-in">
+              <div class="product-grid" :key="currentPage">
+                <div
+                  v-for="product in displayProducts"
+                  :key="product.id"
+                  class="product-card"
+                >
+                  <el-icon class="delete-icon" @click="handleRemoveProduct(product.id)">
+                    <Close />
+                  </el-icon>
+                  <div class="product-image">
+                    <el-image
+                      :src="product.imageUrl"
+                      fit="cover"
+                      lazy
+                      class="image"
+                    >
+                      <template #error>
+                        <div class="image-slot">
+                          <el-icon><Picture /></el-icon>
+                        </div>
+                      </template>
+                    </el-image>
                   </div>
-                </template>
-              </el-image>
-            </div>
-            <div class="product-info">
-              <p class="product-name">{{ product.name }}</p>
-              <p class="product-price">¥{{ product.price }}</p>
-            </div>
+                  <div class="product-info">
+                    <p class="product-name">{{ product.name }}</p>
+                    <p class="product-price">¥{{ product.price }}</p>
+                  </div>
+                </div>
+              </div>
+            </transition>
           </div>
-        </div>
         
-        <!-- 导航箭头 -->
-        <el-icon
-          v-if="hasPrev"
-          class="nav-arrow nav-arrow-left"
-          @click="handlePrev"
-        >
-          <ArrowLeft />
-        </el-icon>
-        <el-icon
-          v-if="hasNext"
-          class="nav-arrow nav-arrow-right"
-          @click="handleNext"
-        >
-          <ArrowRight />
-        </el-icon>
-      </div>
+          <!-- 导航箭头 -->
+          <el-icon
+            v-if="hasPrev"
+            class="nav-arrow nav-arrow-left"
+            @click="handlePrev"
+          >
+            <ArrowLeft />
+          </el-icon>
+          <el-icon
+            v-if="hasNext"
+            class="nav-arrow nav-arrow-right"
+            @click="handleNext"
+          >
+            <ArrowRight />
+          </el-icon>
+        </div>
 
-      <!-- 空状态 -->
-      <el-empty v-if="displayProducts.length === 0" description="暂无商品，请点击查看推荐商品添加" />
-    </el-card>
+        <!-- 空状态 -->
+        <el-empty v-if="displayProducts.length === 0" description="暂无商品，请点击查看推荐商品添加" />
+      </div>
+    </div>
 
     <!-- 已选商品对话框 -->
     <el-dialog
       v-model="dialog.visible"
       title="已选商品"
-      width="1000px"
+      width="900px"
       append-to-body
+      destroy-on-close
       @close="handleDialogClose"
     >
       <!-- 操作按钮 -->
@@ -76,14 +81,14 @@
       </div>
 
       <!-- 商品表格 -->
-      <el-table :data="selectedProducts" border max-height="500">
-        <el-table-column label="轮播商品编号" align="center" prop="id" width="150" />
-        <el-table-column label="轮播商品图片" align="center" width="120">
+      <el-table :data="selectedProducts" border max-height="450" style="width: 100%">
+        <el-table-column label="商品编号" align="center" prop="id" width="100" />
+        <el-table-column label="商品图片" align="center" width="80">
           <template #default="scope">
             <el-image
               :src="scope.row.imageUrl"
               fit="cover"
-              style="width: 80px; height: 80px; border-radius: 4px"
+              style="width: 50px; height: 50px; border-radius: 4px"
               lazy
             >
               <template #error>
@@ -94,27 +99,28 @@
             </el-image>
           </template>
         </el-table-column>
-        <el-table-column label="轮播商品名称" align="center" prop="name" :show-overflow-tooltip="true" min-width="300" />
-        <el-table-column label="价格" align="center" prop="price" width="120">
+        <el-table-column label="商品名称" align="center" prop="name" :show-overflow-tooltip="true" min-width="180" />
+        <el-table-column label="价格" align="center" width="90">
           <template #default="scope">
             <span class="price-text">¥{{ scope.row.price }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="排序(值越大排越前)" align="center" width="200">
+        <el-table-column label="排序" align="center" width="100">
           <template #default="scope">
             <el-input-number
               v-model="scope.row.sort"
               :min="0"
               :max="999"
               controls-position="right"
-              style="width: 100%"
+              size="small"
+              style="width: 80px"
               @change="handleSortChange(scope.row)"
             />
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+        <el-table-column label="操作" align="center" width="70">
           <template #default="scope">
-            <el-button link type="danger" icon="Delete" @click="handleDeleteProduct(scope.row.id)">删除</el-button>
+            <span class="action-link danger" @click="handleDeleteProduct(scope.row.id)">删除</span>
           </template>
         </el-table-column>
       </el-table>
@@ -200,11 +206,39 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 导入商品对话框 -->
+    <el-dialog
+      v-model="importDialog.visible"
+      title="导入商品(商品编号逗号隔开)"
+      width="600px"
+      append-to-body
+      destroy-on-close
+      @close="handleImportDialogClose"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="商品编号:">
+          <el-input
+            v-model="importProductIds"
+            type="textarea"
+            :rows="6"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleConfirmImport">确 认</el-button>
+          <el-button @click="handleImportDialogClose">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="IndustrialBooth" lang="ts">
-import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue';
+import { ref, reactive, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { Close, Picture, ArrowLeft, ArrowRight, View, Plus, Upload } from '@element-plus/icons-vue';
 
@@ -218,6 +252,14 @@ const selectDialog = reactive({
   visible: false
 });
 
+// 导入商品对话框
+const importDialog = reactive({
+  visible: false
+});
+
+// 导入商品编号
+const importProductIds = ref('');
+
 // 搜索关键词
 const searchKeyword = ref('');
 
@@ -226,50 +268,50 @@ const availableProducts = ref([
   {
     id: '002169823',
     name: '江润双色塑钢培训椅',
-    imageUrl: 'https://via.placeholder.com/200x200/87CEEB/FFFFFF?text=培训椅',
+    imageUrl: '/img/江润双色塑钢培训椅.png',
     price: '299.00'
   },
   {
     id: '002169822',
-    name: '江润培训桌700*550*750mm',
-    imageUrl: 'https://via.placeholder.com/200x200/000000/FFFFFF?text=培训桌',
+    name: '江润多媒体讲台',
+    imageUrl: '/img/江润多媒体讲台.png',
     price: '799.00'
   },
   {
     id: '002169821',
     name: '江润六边形折叠培训桌 800*500*750mm (直径 1.6m)',
-    imageUrl: 'https://via.placeholder.com/200x200/FFFFFF/000000?text=折叠桌',
+    imageUrl: '/img/江润六边形折叠培训桌.png',
     price: '699.00'
   },
   {
     id: '002169820',
     name: '梦洁200*230cm锦玉梦韵四件套',
-    imageUrl: 'https://via.placeholder.com/200x200/4169E1/FFFFFF?text=四件套',
+    imageUrl: '/img/梦洁锦玉梦韵四件套.png',
     price: '1299.00'
   },
   {
     id: '002169819',
     name: '洁丽雅纯棉四件套2*2.3M',
-    imageUrl: 'https://via.placeholder.com/200x200/FFFFFF/000000?text=纯棉',
+    imageUrl: '/img/洁丽雅纯棉四件套.png',
     price: '249.00'
   },
   {
     id: '002169818',
-    name: '润实验台2000*750*800mm',
-    imageUrl: 'https://via.placeholder.com/200x200/808080/FFFFFF?text=实验台',
+    name: '江润实验台2000*750*800mm',
+    imageUrl: '/img/江润实验台.png',
     price: '3699.00'
   },
   {
     id: '002169817',
-    name: '工业级安全防护手套 防割防滑',
-    imageUrl: 'https://via.placeholder.com/200x200/FF6347/FFFFFF?text=手套',
-    price: '45.00'
+    name: '江润办公屏风办公桌',
+    imageUrl: '/img/江润办公屏风办公桌.png',
+    price: '1599.00'
   },
   {
     id: '002169816',
-    name: '专业级电钻套装 多功能工具箱',
-    imageUrl: 'https://via.placeholder.com/200x200/FFD700/000000?text=电钻',
-    price: '599.00'
+    name: '创维100V5-HG1会议平板触控一体机',
+    imageUrl: '/img/创维100V5-HG1会议平板触控一体机.png',
+    price: '12999.00'
   }
 ]);
 
@@ -290,59 +332,63 @@ const selectedProductPagination = reactive({
   total: 0
 });
 
-// 当前显示的商品索引
-const currentIndex = ref(0);
-const pageSize = ref(5); // 每页显示5个商品
+// 当前页码（从0开始）
+const currentPage = ref(0);
+const pageSize = 5; // 每页显示5个商品
+
+// 自动轮播定时器
+let autoPlayTimer: ReturnType<typeof setInterval> | null = null;
+const autoPlayInterval = 3000; // 3秒切换一次
 
 // 模拟数据 - 已选商品列表
 const selectedProducts = ref([
   {
     id: '000294732',
-    name: 'VICTOR/胜利 温度校验仪VC02+不支持第三方检定1台',
-    imageUrl: 'https://via.placeholder.com/200x200/FFD700/000000?text=VC02+',
-    price: '1997.00',
+    name: '江润双色塑钢培训椅',
+    imageUrl: '/img/江润双色塑钢培训椅.png',
+    price: '299.00',
     sort: 9
   },
   {
     id: '000130005',
-    name: 'CJ/超佳聚氨酯泡沫胶填缝剂 A2料 750mL(900g) 1罐',
-    imageUrl: 'https://via.placeholder.com/200x200/DC143C/FFFFFF?text=CJ',
-    price: '26.00',
+    name: '江润六边形折叠培训桌 800*500*750mm',
+    imageUrl: '/img/江润六边形折叠培训桌.png',
+    price: '699.00',
     sort: 8
   },
   {
     id: '000371498',
-    name: 'STANLEY/史丹利公制T形球头内六角扳手 94-288-23 4mm 1支',
-    imageUrl: 'https://via.placeholder.com/200x200/FFD700/000000?text=STANLEY',
-    price: '26.00',
+    name: '梦洁200*230cm锦玉梦韵四件套',
+    imageUrl: '/img/梦洁锦玉梦韵四件套.png',
+    price: '1299.00',
     sort: 7
   },
   {
     id: '000207453',
-    name: 'AIRTAC/亚德客 4V200系列电磁阀 4V21008B 两位五通 DIN插座式接口 Rc1/4 DC24V 1个',
-    imageUrl: 'https://via.placeholder.com/200x200/808080/FFFFFF?text=AIRTAC',
-    price: '77.00',
+    name: '洁丽雅纯棉四件套2*2.3M',
+    imageUrl: '/img/洁丽雅纯棉四件套.png',
+    price: '249.00',
     sort: 6
   },
   {
     id: '000359317',
-    name: 'CNFB/桥防 246系利铝青钢防爆克丝钳 T8246-1006-AL 8" 1把',
-    imageUrl: 'https://via.placeholder.com/200x200/DC143C/FFFFFF?text=CNFB',
-    price: '410.00',
+    name: '江润实验台2000*750*800mm',
+    imageUrl: '/img/江润实验台.png',
+    price: '3699.00',
     sort: 5
   },
   {
     id: '000123456',
-    name: 'DELIXI/德力西 DZ47sLE小型漏保护断路器 DZ47sLE 2P C 32A',
-    imageUrl: 'https://via.placeholder.com/200x200/FFFFFF/000000?text=DELIXI',
-    price: '38.00',
+    name: '江润办公屏风办公桌',
+    imageUrl: '/img/江润办公屏风办公桌.png',
+    price: '1599.00',
     sort: 4
   },
   {
     id: '000789012',
-    name: '工业级安全帽 白色 ABS材质 1顶',
-    imageUrl: 'https://via.placeholder.com/200x200/FFFFFF/000000?text=安全帽',
-    price: '45.00',
+    name: '创维100V5-HG1会议平板触控一体机',
+    imageUrl: '/img/创维100V5-HG1会议平板触控一体机.png',
+    price: '12999.00',
     sort: 3
   }
 ]);
@@ -352,22 +398,26 @@ const sortedProducts = computed(() => {
   return [...selectedProducts.value].sort((a, b) => b.sort - a.sort);
 });
 
+// 总页数
+const totalPages = computed(() => {
+  return Math.ceil(sortedProducts.value.length / pageSize);
+});
+
 // 当前页显示的商品
 const displayProducts = computed(() => {
-  const start = currentIndex.value * pageSize.value;
-  const end = start + pageSize.value;
+  const start = currentPage.value * pageSize;
+  const end = start + pageSize;
   return sortedProducts.value.slice(start, end);
 });
 
 // 是否有上一页
 const hasPrev = computed(() => {
-  return currentIndex.value > 0;
+  return currentPage.value > 0;
 });
 
 // 是否有下一页
 const hasNext = computed(() => {
-  const totalPages = Math.ceil(sortedProducts.value.length / pageSize.value);
-  return currentIndex.value < totalPages - 1;
+  return currentPage.value < totalPages.value - 1;
 });
 
 // 查看推荐商品
@@ -477,7 +527,57 @@ watch(
 
 // 导入商品
 const handleImportProduct = () => {
-  ElMessage.info('导入商品功能开发中...');
+  importDialog.visible = true;
+  importProductIds.value = '';
+};
+
+// 导入对话框关闭
+const handleImportDialogClose = () => {
+  importDialog.visible = false;
+  importProductIds.value = '';
+};
+
+// 确认导入商品
+const handleConfirmImport = () => {
+  if (!importProductIds.value.trim()) {
+    ElMessage.warning('请输入商品编号');
+    return;
+  }
+
+  // 解析商品编号（逗号隔开）
+  const ids = importProductIds.value
+    .split(/[,，]/)
+    .map((id) => id.trim())
+    .filter((id) => id);
+
+  if (ids.length === 0) {
+    ElMessage.warning('请输入有效的商品编号');
+    return;
+  }
+
+  // 模拟导入逻辑（实际应调用接口查询商品信息）
+  let addedCount = 0;
+  ids.forEach((id) => {
+    // 检查是否已存在
+    if (!selectedProducts.value.find((p) => p.id === id)) {
+      // 模拟添加商品（实际应从接口获取商品信息）
+      selectedProducts.value.push({
+        id: id,
+        name: `商品${id}`,
+        imageUrl: `https://via.placeholder.com/200x200/409EFF/FFFFFF?text=${id}`,
+        price: '0.00',
+        sort: Math.max(...selectedProducts.value.map((p) => p.sort), 0) + 1
+      });
+      addedCount++;
+    }
+  });
+
+  if (addedCount > 0) {
+    ElMessage.success(`成功导入 ${addedCount} 个商品`);
+  } else {
+    ElMessage.warning('所有商品编号已存在');
+  }
+  handleImportDialogClose();
 };
 
 // 删除商品
@@ -492,9 +592,9 @@ const handleDeleteProduct = (id: string) => {
       if (index !== -1) {
         selectedProducts.value.splice(index, 1);
         ElMessage.success('删除成功');
-        // 如果当前页没有商品了，回到上一页
-        if (displayProducts.value.length === 0 && currentIndex.value > 0) {
-          currentIndex.value--;
+        // 调整页码确保不越界
+        if (currentPage.value >= totalPages.value && currentPage.value > 0) {
+          currentPage.value = totalPages.value - 1;
         }
       }
     })
@@ -516,14 +616,14 @@ const handleConfirm = () => {
 // 上一页
 const handlePrev = () => {
   if (hasPrev.value) {
-    currentIndex.value--;
+    currentPage.value--;
   }
 };
 
 // 下一页
 const handleNext = () => {
   if (hasNext.value) {
-    currentIndex.value++;
+    currentPage.value++;
   }
 };
 
@@ -539,23 +639,76 @@ const handleRemoveProduct = (id: string) => {
       if (index !== -1) {
         selectedProducts.value.splice(index, 1);
         ElMessage.success('移除成功');
-        // 如果当前页没有商品了，回到上一页
-        if (displayProducts.value.length === 0 && currentIndex.value > 0) {
-          currentIndex.value--;
+        // 调整页码确保不越界
+        if (currentPage.value >= totalPages.value && currentPage.value > 0) {
+          currentPage.value = totalPages.value - 1;
         }
       }
     })
     .catch(() => {});
 };
 
+// 开始自动轮播
+const startAutoPlay = () => {
+  stopAutoPlay();
+  if (totalPages.value <= 1) return;
+  
+  autoPlayTimer = setInterval(() => {
+    if (totalPages.value <= 1) {
+      stopAutoPlay();
+      return;
+    }
+    // 循环播放：1 -> 2 -> 1 -> 2
+    if (currentPage.value >= totalPages.value - 1) {
+      currentPage.value = 0;
+    } else {
+      currentPage.value++;
+    }
+  }, autoPlayInterval);
+};
+
+// 停止自动轮播
+const stopAutoPlay = () => {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer);
+    autoPlayTimer = null;
+  }
+};
+
 onMounted(() => {
-  // 初始化
+  // 启动自动轮播
+  startAutoPlay();
+});
+
+onUnmounted(() => {
+  // 清理定时器
+  stopAutoPlay();
 });
 </script>
 
 <style scoped lang="scss">
+.booth-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .booth-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.action-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px 20px;
+  margin-bottom: 12px;
+}
+
+.content-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .product-display-area {
@@ -564,11 +717,33 @@ onMounted(() => {
   padding: 20px 0;
 }
 
+.carousel-viewport {
+  margin: 0 40px;
+}
+
 .product-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
-  padding: 0 40px;
+}
+
+// 滑动过渡动画
+.slide-fade-enter-active {
+  transition: all 0.4s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.slide-fade-enter-from {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateX(-30px);
+  opacity: 0;
 }
 
 .product-card {
@@ -712,4 +887,16 @@ onMounted(() => {
   padding: 20px;
 }
 
+.action-link {
+  cursor: pointer;
+  font-size: 14px;
+  
+  &.danger {
+    color: #f56c6c;
+    
+    &:hover {
+      color: #f78989;
+    }
+  }
+}
 </style>

src/views/platform/industrial/brandFloor/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="brand-floor-page">
+    <div class="brand-floor-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="楼层名称">
+            <el-input v-model="queryParams.name" placeholder="请输入楼层名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加楼层</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">楼层信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="floorList" border>
+          <el-table-column label="楼层名称" align="center" prop="name" min-width="200" />
+          <el-table-column label="是否显示" align="center" width="100">
+            <template #default="scope">
+              <span :class="scope.row.visible ? 'status-show' : 'status-hide'">
+                {{ scope.row.visible ? '显示' : '不显示' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="100" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
+          <el-table-column label="操作" align="center" width="280">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleDelete(scope.row)">删除</span>
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleConfigProduct(scope.row)">配置商品</span>
+              <span class="action-link primary" @click="handleConfigBrand(scope.row)">配置品牌</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="楼层名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入楼层名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="是否显示" prop="visible">
+          <el-radio-group v-model="form.visible">
+            <el-radio :value="true">显示</el-radio>
+            <el-radio :value="false">不显示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="IndustrialBrandFloor" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const floorList = ref([
+  { id: '1', name: '电气控制产品精选', sort: 3, updateTime: '2025-12-18 14:49:57', visible: true },
+  { id: '2', name: '工具及耗材产品精选', sort: 2, updateTime: '2025-12-18 14:49:57', visible: true },
+  { id: '3', name: '搬运、存储、包材产品精选', sort: 1, updateTime: '2025-12-18 14:49:57', visible: true }
+]);
+const loading = ref(false);
+const total = ref(3);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  sort: 0,
+  visible: true
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加楼层';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑楼层';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除楼层"${row.name}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 配置品牌
+const handleConfigBrand = (row: any) => {
+  ElMessage.info(`配置品牌：${row.name}`);
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.brand-floor-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.brand-floor-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.status-show {
+  color: #409eff;
+}
+
+.status-hide {
+  color: #f56c6c;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+}
+</style>

src/views/platform/industrial/carousel/index.vue

@@ -1,53 +1,44 @@
 <template>
-  <div class="carousel-container">
-    <el-card shadow="hover">
-      <!-- 搜索区域 -->
-      <transition
-        :enter-active-class="proxy?.animate.searchAnimate.enter"
-        :leave-active-class="proxy?.animate.searchAnimate.leave"
-      >
-        <div v-show="showSearch" class="mb-[10px]">
-          <el-card shadow="hover">
-            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
-              <el-form-item label="广告名称" prop="adName">
-                <el-input
-                  v-model="queryParams.adName"
-                  placeholder="请输入广告名称"
-                  clearable
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item>
-              <el-form-item label="起始时间" prop="dateRange">
-                <el-date-picker
-                  v-model="dateRange"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  value-format="YYYY-MM-DD"
-                  style="width: 240px"
-                />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
+  <div class="carousel-page">
+    <div class="carousel-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="广告名称" prop="adName">
+            <el-input
+              v-model="queryParams.adName"
+              placeholder="请输入广告名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="起始时间" prop="dateRange">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="YYYY-MM-DD"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
         </div>
-      </transition>
-
-      <!-- 操作栏 -->
-      <el-row :gutter="10" class="mb8">
-        <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-      </el-row>
-
-      <!-- 表格标题 -->
-      <div class="table-title mb-[10px]">
-        <span>轮播广告信息列表</span>
       </div>
 
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格标题 -->
+        <div class="table-title">轮播广告信息列表</div>
+
       <!-- 表格 -->
       <el-table v-loading="loading" :data="carouselList" border>
         <el-table-column label="广告图片" align="center" width="120">
@@ -77,23 +68,24 @@
         </el-table-column>
         <el-table-column label="排序" align="center" prop="sort" width="80" />
         <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
           </template>
         </el-table-column>
       </el-table>
 
-      <!-- 分页 -->
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </el-card>
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="cancel">
@@ -218,6 +210,8 @@ const getList = async () => {
       const ossRes = await listByIds(ossIds);
       const ossMap = new Map(ossRes.data.map((oss: any) => [String(oss.ossId), oss.url]));
       rows.forEach((item: any) => {
+        // 保存原始ossId用于编辑回显
+        item.imageOssId = item.imageUrl;
         if (item.imageUrl && ossMap.has(String(item.imageUrl))) {
           item.imageUrl = ossMap.get(String(item.imageUrl));
         }
@@ -275,6 +269,8 @@ const handleUpdate = (row: any) => {
   form.value = {
     ...row,
     adType: 'industrial_banner',
+    // 编辑时用ossId，这样image-upload组件才能正确回显
+    imageUrl: row.imageOssId || row.imageUrl || '',
     status: row.status ?? 1,
     color: row.color || '#ffffff',
     remark: row.remark || '',
@@ -316,14 +312,55 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.carousel-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
 .carousel-container {
-  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .el-form { flex: 1; }
+  .toolbar { flex-shrink: 0; }
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .table-title {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
-  padding: 0 4px;
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
 }
 </style>

src/views/platform/industrial/categoryProduct/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="category-product-page">
+    <div class="category-product-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="分类名称">
+            <el-input v-model="queryParams.name" placeholder="请输入分类名称" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">添加分类</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">分类分类信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="categoryList" border>
+          <el-table-column label="分类名称" align="center" prop="name" min-width="200" />
+          <el-table-column label="排序" align="center" prop="sort" width="120" />
+          <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleDelete(scope.row)">删除</span>
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link primary" @click="handleConfigProduct(scope.row)">配置商品</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="IndustrialCategoryProduct" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  name: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const categoryList = ref([
+  { id: '1', name: '劳保安防', sort: 7, updateTime: '2025-12-18 14:52:45' },
+  { id: '2', name: '电气工控', sort: 6, updateTime: '2025-12-18 14:52:45' },
+  { id: '3', name: '五金工具', sort: 5, updateTime: '2025-12-18 14:52:45' },
+  { id: '4', name: '气动油压', sort: 4, updateTime: '2025-12-18 14:52:45' },
+  { id: '5', name: '刀量磨仪', sort: 3, updateTime: '2025-12-18 14:52:45' },
+  { id: '6', name: '存储包材', sort: 2, updateTime: '2025-12-18 14:52:45' },
+  { id: '7', name: '润滑胶粘', sort: 1, updateTime: '2025-12-18 14:52:45' }
+]);
+const loading = ref(false);
+const total = ref(7);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  name: '',
+  sort: 0
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.name = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '添加分类';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑分类';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除分类"${row.name}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 配置商品
+const handleConfigProduct = (row: any) => {
+  ElMessage.info(`配置商品：${row.name}`);
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.category-product-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.category-product-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+}
+</style>

src/views/platform/industrial/floorAd/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="floor-ad-page">
+    <div class="floor-ad-container">
+      <!-- 楼层广告区域（独立卡片） -->
+      <div class="ad-card">
+        <!-- 标签页切换 -->
+        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+          <el-tab-pane label="首页三联广告" name="triple" />
+          <el-tab-pane label="首页图标广告" name="icon" />
+          <el-tab-pane label="首页logo" name="logo" />
+          <el-tab-pane label="首页联系电话" name="contact" />
+        </el-tabs>
+
+        <!-- 广告展示区 -->
+        <div class="ad-preview">
+          <div class="ad-grid" v-if="activeTab === 'triple'">
+            <div
+              v-for="(item, index) in tripleAdList"
+              :key="index"
+              class="ad-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <el-image :src="item.imageUrl" fit="cover" lazy class="ad-image">
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+
+          <div class="ad-grid" v-else-if="activeTab === 'icon'">
+            <div
+              v-for="(item, index) in iconAdList"
+              :key="index"
+              class="ad-item icon-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <el-image :src="item.imageUrl" fit="contain" lazy class="ad-image">
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+
+          <div class="logo-preview" v-else-if="activeTab === 'logo'">
+            <div class="logo-item">
+              <el-image :src="logoData.imageUrl" fit="contain" lazy class="logo-image">
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+
+          <div class="contact-preview" v-else>
+            <el-form :model="contactForm" label-width="100px">
+              <el-form-item label="联系电话:">
+                <el-input v-model="contactForm.phone" placeholder="请输入联系电话" style="width: 300px" />
+              </el-form-item>
+              <el-form-item label="服务时间:">
+                <el-input v-model="contactForm.serviceTime" placeholder="请输入服务时间" style="width: 300px" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+
+        <!-- 编辑表单（三联广告和图标广告） -->
+        <div class="ad-form" v-if="activeTab === 'triple' || activeTab === 'icon'">
+          <el-form :model="form" label-width="80px">
+            <el-form-item label="链接:">
+              <el-input v-model="form.link" placeholder="请输入链接地址" />
+            </el-form-item>
+            <el-form-item label="图片:">
+              <div class="image-preview" v-if="form.imageUrl">
+                <el-image :src="form.imageUrl" fit="cover" style="width: 120px; height: 80px; border-radius: 4px" />
+              </div>
+              <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSubmit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- logo编辑 -->
+        <div class="ad-form" v-else-if="activeTab === 'logo'">
+          <el-form label-width="80px">
+            <el-form-item label="Logo:">
+              <div class="image-preview" v-if="logoData.imageUrl">
+                <el-image :src="logoData.imageUrl" fit="contain" style="width: 120px; height: 60px" />
+              </div>
+              <el-button icon="Upload" @click="handleUploadLogo">选择上传文件</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSubmitLogo">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 联系电话编辑 -->
+        <div class="ad-form" v-else>
+          <el-form-item>
+            <el-button type="primary" @click="handleSubmitContact">提交</el-button>
+          </el-form-item>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="IndustrialFloorAd" lang="ts">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+
+// 当前标签页
+const activeTab = ref('triple');
+
+// 当前选中的广告索引
+const selectedIndex = ref(0);
+
+// 三联广告列表
+const tripleAdList = ref([
+  { imageUrl: '/img/什湖好米.jpg', link: '' },
+  { imageUrl: '/img/希诺杯壶.jpg', link: '' },
+  { imageUrl: '/img/摩飞小家电.jpg', link: '' }
+]);
+
+// 图标广告列表
+const iconAdList = ref([
+  { imageUrl: '/img/格力.jpg', link: '' },
+  { imageUrl: '/img/Midea.jpg', link: '' },
+  { imageUrl: '/img/PHILIPS.jpg', link: '' },
+  { imageUrl: '/img/联想.jpg', link: '' }
+]);
+
+// Logo数据
+const logoData = ref({
+  imageUrl: '/img/品牌广告图片.jpg'
+});
+
+// 联系电话表单
+const contactForm = reactive({
+  phone: '400-888-8888',
+  serviceTime: '周一至周五 9:00-18:00'
+});
+
+// 表单数据
+const form = reactive({
+  link: '',
+  imageUrl: ''
+});
+
+// 切换标签页
+const handleTabChange = () => {
+  selectedIndex.value = 0;
+  loadFormData();
+};
+
+// 选择广告
+const selectAd = (index: number) => {
+  selectedIndex.value = index;
+  loadFormData();
+};
+
+// 加载表单数据
+const loadFormData = () => {
+  const list = activeTab.value === 'triple' ? tripleAdList.value : iconAdList.value;
+  const item = list[selectedIndex.value];
+  if (item) {
+    form.link = item.link;
+    form.imageUrl = item.imageUrl;
+  }
+};
+
+// 上传图片
+const handleUpload = () => {
+  ElMessage.info('上传功能开发中...');
+};
+
+// 上传Logo
+const handleUploadLogo = () => {
+  ElMessage.info('上传Logo功能开发中...');
+};
+
+// 提交
+const handleSubmit = () => {
+  const list = activeTab.value === 'triple' ? tripleAdList.value : iconAdList.value;
+  const item = list[selectedIndex.value];
+  if (item) {
+    item.link = form.link;
+    item.imageUrl = form.imageUrl;
+  }
+  ElMessage.success('提交成功');
+};
+
+// 提交Logo
+const handleSubmitLogo = () => {
+  ElMessage.success('Logo提交成功');
+};
+
+// 提交联系电话
+const handleSubmitContact = () => {
+  ElMessage.success('联系电话提交成功');
+};
+
+// 初始化
+loadFormData();
+</script>
+
+<style scoped lang="scss">
+.floor-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.floor-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.ad-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.ad-preview {
+  margin: 20px 0;
+  min-height: 200px;
+}
+
+.ad-grid {
+  display: flex;
+  gap: 20px;
+}
+
+.ad-item {
+  width: 200px;
+  height: 140px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: #c0c4cc;
+  }
+  
+  &.active {
+    border-color: #409eff;
+  }
+  
+  &.icon-item {
+    width: 100px;
+    height: 100px;
+    background: #f5f7fa;
+  }
+  
+  .ad-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.logo-preview {
+  .logo-item {
+    width: 200px;
+    height: 80px;
+  }
+  
+  .logo-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.contact-preview {
+  padding: 20px 0;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 30px;
+}
+
+.ad-form {
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+  
+  .image-preview {
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/platform/industrial/navigation/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="navigation-page">
+    <div class="navigation-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="导航标题">
+            <el-input v-model="queryParams.title" placeholder="请输入导航标题" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">首页导航信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="navList" border>
+          <el-table-column label="导航标题" align="center" prop="title" min-width="120" />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="280">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="100" />
+          <el-table-column label="导航类型" align="center" prop="navType" width="120" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="导航标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入导航标题" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="导航类型" prop="navType">
+          <el-select v-model="form.navType" placeholder="请选择导航类型" style="width: 100%">
+            <el-option label="首页导航" value="首页导航" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="IndustrialNavigation" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  title: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const navList = ref([
+  { id: '1', title: '电动工具', linkUrl: 'https://mro.yoe365.com/goods-category?no=2121', sort: 8, navType: '首页导航' },
+  { id: '2', title: '劳保安防', linkUrl: 'https://mro.yoe365.com/goods-category?no=28', sort: 7, navType: '首页导航' },
+  { id: '3', title: '手动工具', linkUrl: 'https://mro.yoe365.com/goods-category?no=21', sort: 6, navType: '首页导航' },
+  { id: '4', title: '配电控制', linkUrl: 'https://mro.yoe365.com/goods-category?no=2001', sort: 9, navType: '首页导航' },
+  { id: '5', title: '节能照明设备', linkUrl: 'https://mro.yoe365.com/goods-category?no=1104', sort: 5, navType: '首页导航' },
+  { id: '6', title: '安全消防', linkUrl: 'https://mro.yoe365.com/goods-category?no=2813', sort: 4, navType: '首页导航' }
+]);
+const loading = ref(false);
+const total = ref(6);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  title: '',
+  linkUrl: '',
+  navType: '首页导航',
+  sort: 0
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  title: [{ required: true, message: '请输入导航标题', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.title = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '新增导航';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑导航';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除导航"${row.title}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.navigation-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.navigation-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/industrial/searchNav/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="search-nav-page">
+    <div class="search-nav-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form :model="queryParams" :inline="true">
+          <el-form-item label="导航标题">
+            <el-input v-model="queryParams.title" placeholder="请输入导航标题" clearable style="width: 240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <div class="table-header">
+          <span class="table-title">搜索导航信息列表</span>
+          <el-button icon="Refresh" circle size="small" @click="getList" />
+        </div>
+
+        <el-table v-loading="loading" :data="navList" border>
+          <el-table-column label="导航标题" align="center" prop="title" min-width="120" />
+          <el-table-column label="链接地址" align="center" prop="linkUrl" min-width="280">
+            <template #default="scope">
+              <el-link type="primary" :href="scope.row.linkUrl" target="_blank">{{ scope.row.linkUrl }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="100" />
+          <el-table-column label="导航类型" align="center" prop="navType" width="120" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleEdit(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="导航标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入导航标题" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="linkUrl">
+          <el-input v-model="form.linkUrl" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="导航类型" prop="navType">
+          <el-select v-model="form.navType" placeholder="请选择导航类型" style="width: 100%">
+            <el-option label="搜索导航" value="搜索导航" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="IndustrialSearchNav" lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 查询参数
+const queryParams = reactive({
+  title: '',
+  pageNum: 1,
+  pageSize: 10
+});
+
+// 列表数据
+const navList = ref([
+  { id: '1', title: '世达工具', linkUrl: 'https://mro.yoe365.com/', sort: 10, navType: '搜索导航' },
+  { id: '2', title: '劳保', linkUrl: 'https://mro.yoe365.com/', sort: 8, navType: '搜索导航' },
+  { id: '3', title: '电器辅材', linkUrl: 'https://mro.yoe365.com/theme?t=000000006', sort: 0, navType: '搜索导航' },
+  { id: '4', title: '施耐德电气超品周', linkUrl: '#', sort: 0, navType: '搜索导航' }
+]);
+const loading = ref(false);
+const total = ref(4);
+
+// 对话框
+const dialog = reactive({
+  visible: false,
+  title: ''
+});
+
+// 表单
+const formRef = ref();
+const initForm = {
+  id: undefined as string | undefined,
+  title: '',
+  linkUrl: '',
+  navType: '搜索导航',
+  sort: 0
+};
+const form = ref({ ...initForm });
+
+const rules = {
+  title: [{ required: true, message: '请输入导航标题', trigger: 'blur' }],
+  linkUrl: [{ required: true, message: '请输入链接地址', trigger: 'blur' }]
+};
+
+// 查询列表
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+};
+
+// 搜索
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+
+// 重置
+const resetQuery = () => {
+  queryParams.title = '';
+  handleQuery();
+};
+
+// 添加
+const handleAdd = () => {
+  form.value = { ...initForm };
+  dialog.title = '新增导航';
+  dialog.visible = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  form.value = { ...row };
+  dialog.title = '编辑导航';
+  dialog.visible = true;
+};
+
+// 删除
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`是否确认删除导航"${row.title}"？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功');
+    getList();
+  }).catch(() => {});
+};
+
+// 提交表单
+const submitForm = () => {
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success(form.value.id ? '修改成功' : '添加成功');
+      dialog.visible = false;
+      getList();
+    }
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.search-nav-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.search-nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 6px;
+  
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+  
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>

src/views/platform/industrial/tag/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="tag-page">
+    <div class="tag-container">
+      <!-- 商业标签区域（独立卡片） -->
+      <div class="tag-card">
+        <div class="tag-grid">
+          <div
+            v-for="item in tagList"
+            :key="item.id"
+            class="tag-item"
+          >
+            <div class="tag-content">
+              <div class="tag-text">
+                <h3 class="tag-title">{{ item.title }}</h3>
+                <p class="tag-desc">{{ item.description }}</p>
+                <el-button class="tag-btn" @click="handleView(item)">
+                  查看 <el-icon><ArrowRight /></el-icon>
+                </el-button>
+              </div>
+              <div class="tag-image">
+                <el-image :src="item.imageUrl" fit="contain" lazy class="image">
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="IndustrialTag" lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Picture, ArrowRight } from '@element-plus/icons-vue';
+
+// 标签列表
+const tagList = ref([
+  {
+    id: '1',
+    title: '新品推荐',
+    description: '品质卓越，严选新品，直击企业效能升级需求，多场景适配项目心！助力企业降本增效！',
+    imageUrl: '/img/耳机.png'
+  },
+  {
+    id: '2',
+    title: '季节爆款',
+    description: '聚焦当季爆款，严选被众工厂企业验证的爆用品牌，满足多场景作业需求。',
+    imageUrl: '/img/手表.png'
+  },
+  {
+    id: '3',
+    title: '五金工具',
+    description: '精选高硬度、抗腐蚀钢铁质，覆盖多场景作业需求，助力企业提效降本！',
+    imageUrl: '/img/江润双色塑钢培训椅.png'
+  },
+  {
+    id: '4',
+    title: '个护安防',
+    description: '严选防护等级认证产品，覆盖防尘保护装、环境监测防护等，守护企业作业安全！',
+    imageUrl: '/img/蓝牙音箱.png'
+  }
+]);
+
+// 查看
+const handleView = (item: any) => {
+  ElMessage.info(`查看：${item.title}`);
+};
+</script>
+
+<style scoped lang="scss">
+.tag-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.tag-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tag-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.tag-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.tag-item {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 20px;
+  background: #fff;
+  
+  &:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.tag-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.tag-text {
+  flex: 1;
+  padding-right: 15px;
+  
+  .tag-title {
+    margin: 0 0 12px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .tag-desc {
+    margin: 0 0 15px 0;
+    font-size: 13px;
+    color: #909399;
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  .tag-btn {
+    border: 1px solid #dcdfe6;
+    background: #fff;
+    color: #606266;
+    
+    &:hover {
+      border-color: #409eff;
+      color: #409eff;
+    }
+  }
+}
+
+.tag-image {
+  width: 100px;
+  height: 100px;
+  flex-shrink: 0;
+  
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: #f5f7fa;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>