feat(page-decoration): 新增移动端头部综合组件并重构各楼层模板尺寸与排版

manager/src/views/page-decoration/wap/config-panel/PanelGoods.vue

@@ -482,9 +482,11 @@ export default {
       if (!Array.isArray(val) || !val.length) return;
       const list = val.map((item) => ({
         id: item.id,
+        goodsId: item.goodsId,
         goodsName: item.goodsName,
         price: item.price,
         thumbnail: item.thumbnail,
+        buyCount: item.buyCount,
       }));
       const exist = new Set(this.firstItem.goodsList.map((g) => g.id));
       const merged = this.firstItem.goodsList.concat(

manager/src/views/page-decoration/wap/config-panel/PanelHomeComb.vue

@@ -0,0 +1,841 @@
+<template>
+  <div class="panel-home-comb">
+    <div class="panel-header">
+      <span class="panel-name">{{ res.name || "头部组件" }}</span>
+    </div>
+
+    <!-- 顶部子组件切换：搜索框 / 选项卡 / 轮播图 -->
+    <div class="panel-card">
+      <div class="section-title">设置内容</div>
+      <div class="ctrl-row">
+        <div class="ctrl-label">选择组件</div>
+        <div class="ctrl-body">
+          <div class="seg layout-seg-3">
+            <div
+              v-for="tab in subTabs"
+              :key="tab.key"
+              class="seg-item"
+              :class="{ active: activeSub === tab.key }"
+              @click="activeSub = tab.key"
+            >
+              {{ tab.title }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ==================== 1. 搜索框 ==================== -->
+    <template v-if="activeSub === 'search'">
+      <div class="panel-card">
+        <div class="section-title">布局设置</div>
+        <div class="ctrl-row">
+          <div class="ctrl-label">选择模板</div>
+          <div class="ctrl-body">
+            <div class="seg layout-seg">
+              <div
+                class="seg-item"
+                :class="{ active: res.options.searType !== 'logo' }"
+                @click="res.options.searType = 'full'"
+              >
+                通栏
+              </div>
+              <div
+                class="seg-item"
+                :class="{ active: res.options.searType === 'logo' }"
+                @click="res.options.searType = 'logo'"
+              >
+                logo
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <template v-if="res.options.searType === 'logo'">
+          <div class="logo-row">
+            <div class="logo-label">
+              <div>默认logo图</div>
+              <div class="logo-tip">建议 138*48px</div>
+            </div>
+            <div class="logo-box" @click="pickLogo('logoUrl')">
+              <img v-if="res.options.logoUrl" :src="res.options.logoUrl" alt="logo" />
+              <span v-else class="logo-add">+ 选择图片</span>
+            </div>
+          </div>
+          <div class="logo-row">
+            <div class="logo-label">
+              <div>吸顶logo图</div>
+              <div class="logo-tip">建议 138*48px</div>
+            </div>
+            <div class="logo-box" @click="pickLogo('logoFixUrl')">
+              <img v-if="res.options.logoFixUrl" :src="res.options.logoFixUrl" alt="logo" />
+              <span v-else class="logo-add">+ 选择图片</span>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div class="panel-card">
+        <div class="section-title">提示文字设置</div>
+        <div class="field-row">
+          <div class="field-label">提示文字</div>
+          <el-input
+            v-model="res.options.placeWords"
+            maxlength="20"
+            placeholder="搜索商品名称"
+          />
+        </div>
+      </div>
+
+      <div class="panel-card">
+        <div class="section-title">搜索热词</div>
+        <div class="section-tip">最多可设置 20 个热词，前端按切换时间轮播显示</div>
+        <div
+          class="hot-word"
+          v-for="(word, index) in res.options.hotWords"
+          :key="index"
+        >
+          <el-input
+            v-model="res.options.hotWords[index]"
+            maxlength="10"
+            placeholder="选填，不超过10个字"
+          />
+          <el-icon class="del" @click="removeHotWord(index)"><CircleClose /></el-icon>
+        </div>
+        <el-button
+          v-if="res.options.hotWords.length < 20"
+          class="add-btn"
+          plain
+          type="primary"
+          @click="addHotWord"
+        >
+          + 添加热词
+        </el-button>
+        <div class="field-row interval-row">
+          <div class="field-label">切换时间</div>
+          <el-input-number
+            class="interval-input"
+            v-model="res.options.hotInterval"
+            :min="1"
+            :max="60"
+            controls-position="right"
+          />
+          <span class="unit">秒</span>
+        </div>
+      </div>
+
+      <div class="panel-card panel-card-fill">
+        <div class="section-title">样式设置</div>
+        <color-field
+          v-model="res.options.textColor"
+          label="文字颜色"
+          :default-value="defaults.textColor"
+        />
+        <color-field
+          v-model="res.options.boxColor"
+          label="框体颜色"
+          :default-value="defaults.boxColor"
+        />
+        <div class="ctrl-row">
+          <div class="ctrl-label">文本位置</div>
+          <div class="ctrl-body">
+            <div class="seg layout-seg-3">
+              <div
+                v-for="opt in textAlignOptions"
+                :key="opt.value"
+                class="seg-item"
+                :class="{ active: res.options.textAlign === opt.value }"
+                @click="res.options.textAlign = opt.value"
+              >
+                {{ opt.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <slider-field
+          v-model="res.options.searchRadius"
+          label="内容圆角"
+          :min="0"
+          :max="60"
+        />
+      </div>
+    </template>
+
+    <!-- ==================== 2. 选项卡 ==================== -->
+    <template v-else-if="activeSub === 'tabs'">
+      <div class="panel-card">
+        <div class="section-title">选项卡设置</div>
+        <div class="ctrl-row">
+          <div class="ctrl-label">选项卡</div>
+          <div class="ctrl-body">
+            <el-radio-group v-model="res.options.showTabs">
+              <el-radio :value="true">显示</el-radio>
+              <el-radio :value="false">隐藏</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <color-field
+          v-model="res.options.tabColor"
+          label="文字颜色"
+          :default-value="defaults.tabColor"
+        />
+        <color-field
+          v-model="res.options.tabActiveColor"
+          label="选中颜色"
+          :default-value="defaults.tabActiveColor"
+        />
+      </div>
+
+      <div class="panel-card panel-card-fill">
+        <div class="section-title">分类导航列表</div>
+        <div class="section-tip">首项默认固定为「首页」，最多可添加 10 个分类选项卡</div>
+        <div
+          class="tab-card"
+          v-for="(tab, index) in res.options.tabList"
+          :key="index"
+        >
+          <div class="tab-card-head">
+            <span>选项卡 {{ index + 1 }}</span>
+            <div class="tab-card-ops">
+              <el-icon
+                :class="{ disabled: index === 0 }"
+                @click="moveTab(index, -1)"
+                ><Top
+              /></el-icon>
+              <el-icon
+                :class="{ disabled: index === res.options.tabList.length - 1 }"
+                @click="moveTab(index, 1)"
+                ><Bottom
+              /></el-icon>
+              <el-icon class="del" @click="removeTab(index)"><Delete /></el-icon>
+            </div>
+          </div>
+
+          <div class="ctrl-row">
+            <div class="ctrl-label">显示文字</div>
+            <div class="ctrl-body">
+              <el-input
+                v-model="tab.title"
+                maxlength="5"
+                placeholder="请输入标签名称，5字以内"
+              />
+            </div>
+          </div>
+
+          <div class="ctrl-row">
+            <div class="ctrl-label">数据类型</div>
+            <div class="ctrl-body">
+              <el-radio-group v-model="tab.dataType" @change="tab.value = ''">
+                <el-radio value="special">微页面</el-radio>
+                <el-radio value="category">商品分类</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+
+          <div class="ctrl-row" v-if="tab.dataType === 'special'">
+            <div class="ctrl-label">微页面</div>
+            <div class="ctrl-body">
+              <el-select
+                v-model="tab.value"
+                placeholder="请选择专题微页面"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="sp in specialList"
+                  :key="sp.id"
+                  :label="sp.name"
+                  :value="sp.id"
+                />
+              </el-select>
+            </div>
+          </div>
+
+          <div class="ctrl-row" v-else>
+            <div class="ctrl-label">商品分类</div>
+            <div class="ctrl-body">
+              <el-cascader
+                v-model="tab.value"
+                :options="categoryTree"
+                :props="cascaderProps"
+                placeholder="请选择商品分类"
+                clearable
+              />
+            </div>
+          </div>
+        </div>
+
+        <el-button
+          v-if="res.options.tabList.length < 10"
+          class="add-btn"
+          plain
+          type="primary"
+          @click="addTab"
+        >
+          + 添加模块
+        </el-button>
+      </div>
+    </template>
+
+    <!-- ==================== 3. 轮播图 ==================== -->
+    <template v-else>
+      <div class="panel-card">
+        <div class="section-title">内容设置</div>
+        <div class="ctrl-row">
+          <div class="ctrl-label">选择风格</div>
+          <div class="ctrl-body">
+            <el-radio-group v-model="res.options.swiperStyle">
+              <el-radio value="card">样式1（卡片露边）</el-radio>
+              <el-radio value="full">样式2（通栏）</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="section-tip">最多可添加 10 张图片，建议尺寸 750*332px</div>
+
+        <div
+          class="img-item"
+          v-for="(item, index) in res.options.list"
+          :key="index"
+        >
+          <div class="img-item-head">
+            <span>图片 {{ index + 1 }}</span>
+            <div class="img-item-ops">
+              <el-icon
+                :class="{ disabled: index === 0 }"
+                @click="moveBanner(index, -1)"
+                ><Top
+              /></el-icon>
+              <el-icon
+                :class="{ disabled: index === res.options.list.length - 1 }"
+                @click="moveBanner(index, 1)"
+                ><Bottom
+              /></el-icon>
+              <el-icon class="del" @click="removeBanner(index)"><Delete /></el-icon>
+            </div>
+          </div>
+          <div class="img-item-body">
+            <div class="img-thumb" v-if="item.img">
+              <img :src="item.img" alt="" />
+            </div>
+            <div class="img-thumb placeholder" v-else>750*332</div>
+            <div class="img-item-fields">
+              <div class="btn-row">
+                <el-button plain type="primary" @click="pickBannerImage(item)"
+                  >选择照片</el-button
+                >
+                <el-button plain type="primary" @click="pickBannerLink(item)"
+                  >选择链接</el-button
+                >
+              </div>
+              <div class="link-view" v-if="item.url && item.url.___type">
+                已选链接：{{ linkText(item.url) }}
+              </div>
+              <div class="link-view empty" v-else>未设置链接</div>
+            </div>
+          </div>
+        </div>
+
+        <el-button
+          v-if="res.options.list.length < 10"
+          class="add-btn"
+          plain
+          type="primary"
+          @click="addBanner"
+        >
+          + 添加图片
+        </el-button>
+      </div>
+
+      <div class="panel-card panel-card-fill">
+        <div class="section-title">样式设置</div>
+        <div class="ctrl-row">
+          <div class="ctrl-label">指示器样式</div>
+          <div class="ctrl-body">
+            <div class="seg layout-seg-3">
+              <div
+                v-for="opt in indicatorStyleOptions"
+                :key="opt.value"
+                class="seg-item"
+                :class="{ active: res.options.indicatorStyle === opt.value }"
+                @click="res.options.indicatorStyle = opt.value"
+              >
+                {{ opt.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="ctrl-row" v-if="res.options.indicatorStyle !== 'none'">
+          <div class="ctrl-label">指示器位置</div>
+          <div class="ctrl-body">
+            <div class="seg layout-seg-3">
+              <div
+                v-for="opt in indicatorPositionOptions"
+                :key="opt.value"
+                class="seg-item"
+                :class="{ active: res.options.indicatorPosition === opt.value }"
+                @click="res.options.indicatorPosition = opt.value"
+              >
+                {{ opt.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <color-field
+          v-if="res.options.indicatorStyle !== 'none'"
+          v-model="res.options.indicatorColor"
+          label="指示器颜色"
+          :default-value="defaults.indicatorColor"
+        />
+        <slider-field
+          v-model="res.options.bannerRadius"
+          label="内容圆角"
+          :min="0"
+          :max="40"
+        />
+        <slider-field
+          v-model="res.options.pageGap"
+          label="下边距"
+          :min="0"
+          :max="60"
+        />
+      </div>
+    </template>
+
+    <liliDialog ref="liliDialogRef" @selectedLink="onSelectedLink" />
+
+    <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
+      <ossManage
+        @callback="onOssSelected"
+        :is-component="true"
+        :initialize="picModelFlag"
+        :max-select="1"
+        ref="ossManageRef"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Top, Bottom, Delete, CircleClose } from "@element-plus/icons-vue";
+import ColorField from "../controls/ColorField.vue";
+import SliderField from "../controls/SliderField.vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import ways from "@/components/lili-dialog/wap.js";
+import { getCategoryTree } from "@/api/goods";
+import { getHomeList } from "@/api/other";
+
+const DEFAULTS = {
+  // 搜索框
+  searType: "full", // "full" 通栏 | "logo" logo
+  logoUrl: "",
+  logoFixUrl: "",
+  placeWords: "搜索商品名称",
+  hotWords: ["兰蔻小黑瓶"],
+  hotInterval: 3,
+  textColor: "#303133",
+  boxColor: "#FFFFFF",
+  textAlign: "left",
+  searchRadius: 30,
+  // 选项卡
+  showTabs: true,
+  tabColor: "#FFFFFF",
+  tabActiveColor: "#E93323",
+  tabList: [
+    { title: "精选", dataType: "category", value: "" },
+    { title: "靓丽美妆", dataType: "category", value: "" },
+  ],
+  // 轮播图
+  swiperStyle: "card", // "card" 样式1 | "full" 样式2
+  indicatorStyle: "round", // "round" | "line" | "none"
+  indicatorPosition: "center", // "left" | "center" | "right"
+  indicatorColor: "#E93323",
+  bannerRadius: 14,
+  pageGap: 0,
+};
+
+export default {
+  name: "PanelHomeComb",
+  hideDecorateTitle: true,
+  components: { ColorField, SliderField, ossManage, Top, Bottom, Delete, CircleClose },
+  props: {
+    res: { type: Object, required: true },
+  },
+  data() {
+    return {
+      defaults: DEFAULTS,
+      activeSub: "search",
+      subTabs: [
+        { key: "search", title: "搜索框" },
+        { key: "tabs", title: "选项卡" },
+        { key: "banner", title: "轮播图" },
+      ],
+      textAlignOptions: [
+        { value: "left", title: "居左" },
+        { value: "center", title: "居中" },
+        { value: "right", title: "居右" },
+      ],
+      indicatorStyleOptions: [
+        { value: "round", title: "圆形" },
+        { value: "line", title: "直线" },
+        { value: "none", title: "无" },
+      ],
+      indicatorPositionOptions: [
+        { value: "left", title: "居左" },
+        { value: "center", title: "居中" },
+        { value: "right", title: "居右" },
+      ],
+      cascaderProps: {
+        value: "id",
+        label: "name",
+        children: "children",
+        emitPath: false,
+        checkStrictly: true,
+      },
+      categoryTree: [],
+      specialList: [],
+      picModelFlag: false,
+      picTarget: null, // { type: 'logo', key } | { type: 'banner', item }
+      currentBannerItem: null,
+    };
+  },
+  created() {
+    this.res.options = Object.assign(
+      {},
+      JSON.parse(JSON.stringify(DEFAULTS)),
+      this.res.options
+    );
+    if (!Array.isArray(this.res.options.hotWords)) {
+      this.res.options.hotWords = ["兰蔻小黑瓶"];
+    }
+    if (!Array.isArray(this.res.options.tabList)) {
+      this.res.options.tabList = JSON.parse(JSON.stringify(DEFAULTS.tabList));
+    }
+    if (!Array.isArray(this.res.options.list) || !this.res.options.list.length) {
+      this.res.options.list = [
+        {
+          img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
+          url: "",
+          link: "",
+          size: "750*332",
+          model: "link",
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
+          url: "",
+          link: "",
+          size: "750*332",
+          model: "link",
+        },
+      ];
+    }
+    this.loadSelectData();
+  },
+  methods: {
+    loadSelectData() {
+      getCategoryTree()
+        .then((res) => {
+          if (res && res.success) {
+            this.categoryTree = res.result || [];
+          }
+        })
+        .catch(() => {});
+      getHomeList({
+        pageClientType: "H5",
+        pageType: "SPECIAL",
+        pageNumber: 1,
+        pageSize: 100,
+      })
+        .then((res) => {
+          if (res && res.success && res.result) {
+            this.specialList = res.result.records || [];
+          }
+        })
+        .catch(() => {});
+    },
+    // 热词操作
+    addHotWord() {
+      this.res.options.hotWords.push("");
+    },
+    removeHotWord(index) {
+      this.res.options.hotWords.splice(index, 1);
+    },
+    // 选项卡操作
+    addTab() {
+      this.res.options.tabList.push({
+        title: "新分类",
+        dataType: "category",
+        value: "",
+      });
+    },
+    removeTab(index) {
+      this.res.options.tabList.splice(index, 1);
+    },
+    moveTab(index, dir) {
+      const list = this.res.options.tabList;
+      const target = index + dir;
+      if (target < 0 || target >= list.length) return;
+      list.splice(target, 1, ...list.splice(index, 1, list[target]));
+    },
+    // 轮播图操作
+    addBanner() {
+      this.res.options.list.push({
+        img: "",
+        url: "",
+        link: "",
+        size: "750*332",
+        model: "link",
+      });
+    },
+    removeBanner(index) {
+      this.res.options.list.splice(index, 1);
+    },
+    moveBanner(index, dir) {
+      const list = this.res.options.list;
+      const target = index + dir;
+      if (target < 0 || target >= list.length) return;
+      list.splice(target, 1, ...list.splice(index, 1, list[target]));
+    },
+    // 图片选择（Logo 或 轮播图）
+    pickLogo(key) {
+      this.picTarget = { type: "logo", key };
+      this.openOssDialog();
+    },
+    pickBannerImage(item) {
+      this.picTarget = { type: "banner", item };
+      this.openOssDialog();
+    },
+    openOssDialog() {
+      this.picModelFlag = true;
+      this.$nextTick(() => {
+        const oss = this.$refs.ossManageRef;
+        if (!oss) return;
+        oss.selectImage = true;
+        oss.fileType = "pic";
+        oss.changeFileType();
+      });
+    },
+    onOssSelected(val) {
+      this.picModelFlag = false;
+      if (!val || !val.url || !this.picTarget) return;
+      if (this.picTarget.type === "logo") {
+        this.res.options[this.picTarget.key] = val.url;
+      } else if (this.picTarget.type === "banner" && this.picTarget.item) {
+        this.picTarget.item.img = val.url;
+      }
+    },
+    // 链接选择
+    pickBannerLink(item) {
+      this.currentBannerItem = item;
+      const dialog = this.$refs.liliDialogRef;
+      dialog.clearGoodsSelected();
+      dialog.goodsFlag = false;
+      dialog.flag = true;
+    },
+    onSelectedLink(val) {
+      if (!this.currentBannerItem || !val) return;
+      delete val.selected;
+      delete val.intro;
+      delete val.mobileIntro;
+      this.currentBannerItem.url = val;
+    },
+    linkText(url) {
+      const way = ways.find((e) => e.name === url.___type);
+      const typeTitle = way ? way.title : "链接";
+      const name =
+        url.name || url.goodsName || url.memberName || url.title || "";
+      return name ? `${typeTitle} - ${name}` : typeTitle;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../controls/field-common.scss";
+@import "../controls/panel-common.scss";
+
+.panel-home-comb {
+  background: #f5f7fa;
+  margin: 0 -20px;
+  padding: 0 12px 12px;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+.logo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+  .logo-label {
+    font-size: 13px;
+    color: #606266;
+    .logo-tip {
+      font-size: 12px;
+      color: #909399;
+      margin-top: 2px;
+    }
+  }
+  .logo-box {
+    width: 120px;
+    height: 44px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    background: #fafafa;
+    &:hover {
+      border-color: #409eff;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .logo-add {
+      font-size: 12px;
+      color: #409eff;
+    }
+  }
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+  .field-label {
+    font-size: 14px;
+    color: #606266;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+}
+
+.hot-word {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  .del {
+    cursor: pointer;
+    color: #909399;
+    font-size: 18px;
+    flex-shrink: 0;
+    &:hover {
+      color: #e1251b;
+    }
+  }
+}
+
+.interval-row {
+  margin-top: 12px;
+  .interval-input {
+    flex: 1;
+    min-width: 0;
+  }
+  .unit {
+    margin-left: 8px;
+    font-size: 13px;
+    color: #909399;
+  }
+}
+
+.tab-card,
+.img-item {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #fafafa;
+}
+
+.tab-card-head,
+.img-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.tab-card-ops,
+.img-item-ops {
+  display: flex;
+  gap: 4px;
+  .el-icon {
+    padding: 4px;
+    cursor: pointer;
+    color: #606266;
+    &:hover {
+      color: #409eff;
+    }
+    &.del:hover {
+      color: #e1251b;
+    }
+    &.disabled {
+      color: #dcdfe6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.img-item-body {
+  display: flex;
+  gap: 10px;
+}
+
+.img-thumb {
+  width: 132px;
+  height: 62px;
+  border: 1px dashed #dcdfe6;
+  border-radius: 6px;
+  padding: 3px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: #fff;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 4px;
+    object-fit: cover;
+  }
+  &.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    font-size: 12px;
+  }
+}
+
+.img-item-fields {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+}
+
+.btn-row {
+  display: flex;
+  gap: 8px;
+}
+
+.link-view {
+  font-size: 12px;
+  color: #909399;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-btn {
+  width: 100%;
+  margin-top: 4px;
+}
+</style>

manager/src/views/page-decoration/wap/config-panel/index.js

@@ -17,6 +17,7 @@ import PanelVideo from "./PanelVideo.vue";
 import PanelTitle from "./PanelTitle.vue";
 import PanelPromotion from "./PanelPromotion.vue";
 import PanelGoods from "./PanelGoods.vue";
+import PanelHomeComb from "./PanelHomeComb.vue";
 
 // 图片魔方及其全部可选风格共用 PanelAdCube
 const adCubeTypes = [
@@ -33,6 +34,7 @@ const adCubeTypes = [
 ];
 
 export default {
+  homeComb: PanelHomeComb,
   blank: PanelBlank,
   line: PanelLine,
   richText: PanelRichText,

manager/src/views/page-decoration/wap/config.js

@@ -9,6 +9,63 @@
  * group: 'base' | 'marketing' | 'tools'  组件面板分组（无 group 的条目不在面板显示，仅供抽屉使用）
  */
 export const modelData = [
+  {
+    type: "homeComb",
+    name: "头部组件",
+    icon: "Menu",
+    group: "base",
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    options: {
+      searType: "full",
+      logoUrl: "",
+      logoFixUrl: "",
+      placeWords: "搜索商品名称",
+      hotWords: ["兰蔻小黑瓶"],
+      hotInterval: 3,
+      textColor: "#303133",
+      boxColor: "#FFFFFF",
+      textAlign: "left",
+      searchRadius: 30,
+      showTabs: true,
+      tabColor: "#FFFFFF",
+      tabActiveColor: "#E93323",
+      tabList: [
+        { title: "精选", dataType: "category", value: "" },
+        { title: "靓丽美妆", dataType: "category", value: "" }
+      ],
+      swiperStyle: "card",
+      indicatorStyle: "round",
+      indicatorPosition: "center",
+      indicatorColor: "#E93323",
+      bannerRadius: 14,
+      pageGap: 0,
+      list: [
+        {
+          img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
+          url: "",
+          link: "",
+          size: "750*332",
+          model: "link"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
+          url: "",
+          link: "",
+          size: "750*332",
+          model: "link"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/ZlzcCdnpejtN9gL.png",
+          url: "",
+          link: "",
+          size: "750*332",
+          model: "link"
+        }
+      ]
+    }
+  },
 
   {
     type: "flexOne",

manager/src/views/page-decoration/wap/index.vue

@@ -100,7 +100,7 @@
 </template>
 <script setup>
 import { ref, watch, nextTick, onMounted, computed } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import {
   Picture,
   PictureFilled,
@@ -142,6 +142,7 @@ import { Message, Modal } from "@/utils/message";
 import { useAppStore } from "@/stores/app";
 
 const route = useRoute();
+const router = useRouter();
 const appStore = useAppStore();
 
 // script setup 下 :is 无法按字符串解析局部导入，用映射表渲染组件图标
@@ -291,6 +292,40 @@ function init() {
 
     }
   if (!route.query.id) {
+    if (route.query.mode !== "add" && (!route.query.pagetype || route.query.pagetype === "INDEX")) {
+      API_Other.getHomeList({
+        pageNumber: 1,
+        pageSize: 10,
+        pageType: "INDEX",
+        pageClientType: "H5",
+      }).then((res) => {
+        const records = (res && res.result && res.result.records) || [];
+        const active = records.find((r) => r.pageShow === "OPEN") || records[0];
+        if (!active || !active.id) return;
+        router.replace({
+          path: route.path,
+          query: {
+            ...route.query,
+            id: active.id,
+            name: active.name,
+            type: active.pageShow === "OPEN",
+            pagetype: "INDEX",
+          },
+        });
+        API_Other.getHomeData(active.id).then((detail) => {
+          const parsed = JSON.parse(detail.result.pageData);
+          contentData.value = mergePageData(parsed);
+          if (!contentData.value.name) {
+            contentData.value.name = active.name || "";
+          }
+          const first = contentData.value.list[0];
+          if (first && templates[first.type]) {
+            handleComponent(first, 0);
+          }
+        });
+      });
+      return false;
+    }
     // 新建页面：模板名称取路由参数
     if (!contentData.value.name) {
       contentData.value.name = route.query.name || "";

manager/src/views/page-decoration/wap/template/index.js

@@ -29,8 +29,10 @@ import tpl_rich_text from "./tpl_rich_text";
 import tpl_coupon from "./tpl_coupon";
 import tpl_article from "./tpl_article";
 import tpl_shop from "./tpl_shop";
+import tpl_home_comb from "./tpl_home_comb";
 
 export default {
+  homeComb: tpl_home_comb,
   notice: tpl_notice,
   carousel: tpl_banner,
   title: tpl_title,

manager/src/views/page-decoration/wap/template/tpl_blank.vue

@@ -3,18 +3,23 @@
     class="tpl-blank"
     :style="{
       background: blankBg,
-      height: (res.height ?? 10) + 'px',
+      height: px(res.height ?? 10),
-      margin: `0 ${res.paddingX ?? 0}px ${res.pageGap ?? 10}px`,
+      margin: `0 ${px(res.paddingX ?? 0)} ${px(res.pageGap ?? 10)}`,
     }"
   ></div>
 </template>
 
 <script>
+const px = (v) => `${(Number(v) || 0) / 2}px`;
+
 export default {
   name: "tpl_blank",
   props: {
     res: { type: Object, default: () => ({}) },
   },
+  methods: {
+    px,
+  },
   computed: {
     blankBg() {
       const res = this.res || {};

manager/src/views/page-decoration/wap/template/tpl_flex_one.vue

@@ -2,20 +2,31 @@
     <div
         class="layout"
         :style="{
-            background: res.bgColor ?? 'transparent',
+            background: wrapperBg,
-            padding: `${res.paddingTop ?? 0}px ${res.paddingX ?? 0}px ${res.paddingBottom ?? 0}px`,
+            padding: `${px(res.paddingTop ?? 0)} ${px(res.paddingX ?? 0)} ${px(res.paddingBottom ?? 0)}`,
-            marginBottom: (res.pageGap ?? 0) + 'px',
+            marginBottom: px(res.pageGap ?? 0),
-            borderRadius: (res.borderRadius ?? 0) + 'px',
+            borderRadius: px(res.borderRadius ?? 0),
             overflow: (res.borderRadius ?? 0) > 0 ? 'hidden' : 'visible',
         }"
     >
-        <div class="flex-one" :style="{ borderRadius: (res.imgRadius ?? 0) + 'px' }">
+        <div class="flex-one" :style="{ borderRadius: px(res.imgRadius ?? 0) }">
             <img :src="res.list[0].img" alt="">
         </div>
     </div>
 </template>
 <script setup>
-defineProps(['res'])
+import { computed } from 'vue'
+const props = defineProps(['res'])
+const px = (v) => `${(Number(v) || 0) / 2}px`
+const wrapperBg = computed(() => {
+    const r = props.res || {}
+    if (r.bgColor1 !== undefined) {
+        return !r.bgColor2 || r.bgColor1 === r.bgColor2
+            ? r.bgColor1
+            : `linear-gradient(180deg, ${r.bgColor1}, ${r.bgColor2})`
+    }
+    return r.bgColor ?? 'transparent'
+})
 </script>
 <style lang="scss" scoped>
 @import './tpl.scss';

manager/src/views/page-decoration/wap/template/tpl_goods.vue

@@ -27,7 +27,7 @@
               >
                 <template v-if="cartStyle === 'text'">加购</template>
                 <template v-else-if="cartStyle === 'plus'">+</template>
-                <svg v-else viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
+                <svg v-else viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                   <path
                     d="M7 4h-2l-1 2h2l2.4 9.6a2 2 0 0 0 1.9 1.4h7.9a2 2 0 0 0 1.9-1.5l1.6-6.5h-12l-.8-3h11.5l.5-2h-13.4zM10 20a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
                   />
@@ -156,7 +156,8 @@ export default {
       };
     },
     listStyle() {
-      return { gap: this.px(this.res.contentGap) };
+      const gap = this.px(this.res.contentGap ?? 10);
+      return { gap, "--g-gap": gap };
     },
     itemStyle() {
       const r = this.px(this.res.contentRadius);
@@ -306,7 +307,7 @@ export default {
 }
 
 .g-name {
-  font-size: 12px;
+  font-size: 13px;
   color: #282828;
   line-height: 1.4;
   display: -webkit-box;
@@ -323,7 +324,7 @@ export default {
 
 .g-price {
   color: $theme_color;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 600;
   margin-bottom: 2px;
 }
@@ -344,41 +345,81 @@ export default {
   color: #fff;
   &.cart-plus,
   &.cart-cart {
-    width: 18px;
+    width: 24px;
-    height: 18px;
+    height: 24px;
     border-radius: 50%;
-    font-size: 13px;
+    font-size: 15px;
     line-height: 1;
   }
   &.cart-text {
-    border-radius: 9px;
+    border-radius: 12px;
-    padding: 2px 8px;
+    padding: 3px 10px;
-    font-size: 11px;
+    font-size: 12px;
   }
 }
 
-/* 卡片：左图右文 */
+/* 卡片：左图右文（参考 CRMEB 详细列表，左侧 112x112 缩略图，右侧标题置顶、价格销量置底） */
 .mode-card {
   flex-direction: column;
   .g-item {
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
-    padding: 6px;
+    padding: 10px;
   }
   .g-imgbox {
-    width: 55px;
+    width: 112px;
-    height: 55px;
+    height: 112px;
-    margin-right: 8px;
+    margin-right: 12px;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .g-info {
+    min-height: 112px;
+    justify-content: space-between;
   }
   .g-name {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    margin-bottom: 6px;
+  }
+  .g-price {
+    font-size: 16px;
+    font-weight: 700;
+    margin-top: auto;
     margin-bottom: 4px;
   }
+  .g-bottom {
+    margin-top: 0;
+  }
+  .g-sales {
+    font-size: 12px;
+  }
 }
 
 /* 列表：两列网格 */
 .mode-list {
   .g-item {
-    width: calc(50% - 3px);
+    width: calc((100% - var(--g-gap, 5px)) / 2);
+    flex-direction: column;
+  }
+  .g-imgbox {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+  .g-info {
+    padding: 8px 10px 10px;
+    min-height: 64px;
+  }
+  .g-name {
+    margin-bottom: 6px;
+  }
+}
+
+/* 三列 */
+.mode-three {
+  .g-item {
+    width: calc((100% - var(--g-gap, 5px) * 2) / 3);
     flex-direction: column;
   }
   .g-imgbox {
@@ -387,26 +428,7 @@ export default {
   }
   .g-info {
     padding: 6px;
-    min-height: 52px;
+    min-height: 48px;
-  }
-  .g-name {
-    margin-bottom: 4px;
-  }
-}
-
-/* 三列 */
-.mode-three {
-  .g-item {
-    width: calc(33.33% - 4px);
-    flex-direction: column;
-  }
-  .g-imgbox {
-    width: 100%;
-    aspect-ratio: 1;
-  }
-  .g-info {
-    padding: 4px;
-    min-height: 44px;
   }
   .g-name {
     -webkit-line-clamp: 1;
@@ -419,6 +441,14 @@ export default {
   .g-sales {
     font-size: 10px;
   }
+  .g-cart {
+    &.cart-plus,
+    &.cart-cart {
+      width: 20px;
+      height: 20px;
+      font-size: 13px;
+    }
+  }
 }
 
 /* 大图：一行一个 */
@@ -433,10 +463,17 @@ export default {
     aspect-ratio: 3 / 2;
   }
   .g-info {
-    padding: 6px;
+    padding: 10px 12px 12px;
-    min-height: 44px;
+    min-height: 64px;
   }
   .g-name {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 6px;
+  }
+  .g-price {
+    font-size: 16px;
+    font-weight: 700;
     margin-bottom: 4px;
   }
 }

manager/src/views/page-decoration/wap/template/tpl_home_comb.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="tpl-home-comb" :style="wrapperStyle">
+    <!-- 高斯模糊轮播图背景 + 底部渐变遮罩 -->
+    <div class="comb-bg">
+      <img v-if="currentBannerImg" :src="currentBannerImg" alt="" />
+      <div class="comb-mask"></div>
+    </div>
+
+    <!-- 1. 搜索栏（可选左侧 Logo + 搜索框 + 小程序胶囊） -->
+    <div class="comb-search-row">
+      <img
+        v-if="res.searType === 'logo' && res.logoUrl"
+        class="comb-logo"
+        :src="res.logoUrl"
+        alt="logo"
+      />
+      <div class="comb-search-box" :style="searchBoxStyle">
+        <el-icon class="search-ico"><Search /></el-icon>
+        <span class="search-text">{{ displayHotWord }}</span>
+      </div>
+      <div class="capsule">
+        <span class="cap-icon">
+          <svg width="18" height="5" viewBox="0 0 18 5" fill="currentColor">
+            <circle cx="2.5" cy="2.5" r="2" />
+            <circle cx="9" cy="2.5" r="2" />
+            <circle cx="15.5" cy="2.5" r="2" />
+          </svg>
+        </span>
+        <span class="cap-divider"></span>
+        <span class="cap-icon">
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+            <circle cx="7.5" cy="7.5" r="6" stroke="currentColor" stroke-width="1.6" />
+            <circle cx="7.5" cy="7.5" r="2.2" fill="currentColor" />
+          </svg>
+        </span>
+      </div>
+    </div>
+
+    <!-- 2. 分类选项卡 -->
+    <div v-if="res.showTabs !== false" class="comb-tabs">
+      <div class="comb-tabs-scroll">
+        <div
+          v-for="(tab, idx) in displayTabs"
+          :key="idx"
+          class="comb-tab-item"
+          :class="{ active: activeTabIndex === idx }"
+          :style="{
+            color:
+              activeTabIndex === idx
+                ? res.tabActiveColor || '#E93323'
+                : res.tabColor || '#FFFFFF',
+          }"
+          @click.stop="activeTabIndex = idx"
+        >
+          {{ tab.title || "未命名" }}
+          <span
+            v-if="activeTabIndex === idx"
+            class="tab-line"
+            :style="{ background: res.tabActiveColor || '#E93323' }"
+          ></span>
+        </div>
+      </div>
+      <div class="comb-tab-more" :style="{ color: res.tabColor || '#FFFFFF' }">
+        <el-icon><ArrowDown /></el-icon>
+      </div>
+    </div>
+
+    <!-- 3. 轮播图区域（样式1：卡片露边 / 样式2：通栏） -->
+    <div class="comb-banner" :class="{ 'no-tabs': res.showTabs === false, 'is-card': cardMode }">
+      <!-- 样式2：通栏轮播 -->
+      <el-carousel
+        v-if="!cardMode && bannerList.length"
+        class="comb-carousel"
+        autoplay
+        :interval="5000"
+        height="146px"
+        indicator-position="none"
+        @change="onSlideChange"
+      >
+        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+          <div class="slide-wrap">
+            <img
+              v-if="item.img"
+              class="slide-img"
+              :style="bannerImgStyle"
+              :src="item.img"
+              alt=""
+            />
+            <div v-else class="slide-empty" :style="bannerImgStyle">750*332</div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+
+      <!-- 样式1：卡片风格（两侧露出前后图片） -->
+      <div
+        v-else-if="cardMode && bannerList.length"
+        ref="cardPreview"
+        class="card-preview"
+        @mouseenter="stopBannerTimer"
+        @mouseleave="startBannerTimer"
+      >
+        <div
+          class="card-track"
+          :style="{ transform: `translateX(${trackOffset}px)` }"
+        >
+          <div
+            v-for="(item, index) in cardSlides"
+            :key="index"
+            class="card-slide"
+            :class="{ active: index === activeTrackIndex }"
+          >
+            <img
+              v-if="item.img"
+              class="card-img"
+              :style="bannerImgStyle"
+              :src="item.img"
+              alt=""
+            />
+            <div v-else class="slide-empty" :style="bannerImgStyle">750*332</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="slide-empty" :style="bannerImgStyle">请添加轮播图</div>
+
+      <!-- 自定义指示器 -->
+      <div
+        v-if="res.indicatorStyle !== 'none' && bannerList.length > 1"
+        class="comb-indicator"
+        :class="'pos-' + (res.indicatorPosition || 'center')"
+      >
+        <div
+          v-for="(item, i) in bannerList"
+          :key="i"
+          class="dot"
+          :class="[res.indicatorStyle || 'round', { active: i === currentSlide }]"
+          :style="
+            i === currentSlide
+              ? { background: res.indicatorColor || '#E93323' }
+              : {}
+          "
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { Search, ArrowDown } from "@element-plus/icons-vue";
+
+defineOptions({ title: "头部组件" });
+const props = defineProps(["res"]);
+
+const px = (v) => `${(Number(v) || 0) / 2}px`;
+
+// 搜索热词轮换
+const hotIndex = ref(0);
+let hotTimer = null;
+const validHotWords = computed(() =>
+  (props.res?.hotWords || []).filter((w) => w && String(w).trim())
+);
+const displayHotWord = computed(() => {
+  if (validHotWords.value.length) {
+    return validHotWords.value[hotIndex.value % validHotWords.value.length];
+  }
+  return props.res?.placeWords || "搜索商品名称";
+});
+
+function stopHotTimer() {
+  if (hotTimer) {
+    clearInterval(hotTimer);
+    hotTimer = null;
+  }
+}
+
+watch(
+  () => [validHotWords.value.length, props.res?.hotInterval],
+  () => {
+    stopHotTimer();
+    hotIndex.value = 0;
+    if (validHotWords.value.length > 1) {
+      hotTimer = setInterval(() => {
+        hotIndex.value = (hotIndex.value + 1) % validHotWords.value.length;
+      }, (Number(props.res?.hotInterval) || 3) * 1000);
+    }
+  },
+  { immediate: true }
+);
+
+// 选项卡
+const activeTabIndex = ref(0);
+const displayTabs = computed(() => {
+  const custom = Array.isArray(props.res?.tabList) ? props.res.tabList : [];
+  return [{ title: "首页", isHome: true }, ...custom];
+});
+
+// 轮播图
+const currentSlide = ref(0);
+const previewWidth = ref(375);
+const cardPreview = ref(null);
+let bannerTimer = null;
+
+const bannerList = computed(() =>
+  Array.isArray(props.res?.list) ? props.res.list : []
+);
+const cardMode = computed(() => (props.res?.swiperStyle || "card") === "card");
+const currentBannerImg = computed(() => {
+  const list = bannerList.value;
+  if (!list.length) return "";
+  const item = list[currentSlide.value % list.length] || list[0];
+  return item?.img || "";
+});
+
+const cardSlides = computed(() => {
+  const list = bannerList.value;
+  if (list.length <= 1) return list;
+  return [list[list.length - 1], ...list, list[0]];
+});
+
+const activeTrackIndex = computed(() =>
+  bannerList.value.length > 1 ? currentSlide.value + 1 : currentSlide.value
+);
+
+const trackOffset = computed(
+  () =>
+    previewWidth.value * 0.06 -
+    activeTrackIndex.value * previewWidth.value * 0.88
+);
+
+function measureCard() {
+  if (cardPreview.value) {
+    previewWidth.value = cardPreview.value.offsetWidth || 375;
+  }
+}
+
+function startBannerTimer() {
+  stopBannerTimer();
+  if (!cardMode.value || bannerList.value.length < 2) return;
+  bannerTimer = setInterval(() => {
+    currentSlide.value = (currentSlide.value + 1) % bannerList.value.length;
+  }, 4000);
+}
+
+function stopBannerTimer() {
+  if (bannerTimer) {
+    clearInterval(bannerTimer);
+    bannerTimer = null;
+  }
+}
+
+function onSlideChange(idx) {
+  currentSlide.value = idx;
+}
+
+watch(
+  () => [cardMode.value, bannerList.value.length],
+  () => {
+    if (currentSlide.value >= bannerList.value.length) {
+      currentSlide.value = 0;
+    }
+    stopBannerTimer();
+    if (cardMode.value) {
+      measureCard();
+      startBannerTimer();
+    }
+  },
+  { immediate: true, flush: "post" }
+);
+
+onMounted(() => {
+  measureCard();
+  startBannerTimer();
+});
+
+onBeforeUnmount(() => {
+  stopHotTimer();
+  stopBannerTimer();
+});
+
+// 样式计算
+const wrapperStyle = computed(() => ({
+  marginBottom: px(props.res?.pageGap ?? 0),
+}));
+
+const searchBoxStyle = computed(() => {
+  const r = props.res || {};
+  const align = r.textAlign || "left";
+  return {
+    background: r.boxColor || "#FFFFFF",
+    color: r.textColor || "#303133",
+    borderRadius: px(r.searchRadius ?? 30),
+    justifyContent:
+      align === "center"
+        ? "center"
+        : align === "right"
+          ? "flex-end"
+          : "flex-start",
+  };
+});
+
+const bannerImgStyle = computed(() => ({
+  borderRadius: px(props.res?.bannerRadius ?? 14),
+}));
+</script>
+
+<style scoped lang="scss">
+.tpl-home-comb {
+  position: relative;
+  overflow: hidden;
+  padding: 8px 10px 10px;
+  box-sizing: border-box;
+}
+
+.comb-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  background: linear-gradient(180deg, #e93323 0%, #f5f5f5 100%);
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1.25);
+    filter: blur(22px);
+    display: block;
+  }
+  .comb-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 90px;
+    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 100%);
+  }
+}
+
+.comb-search-row {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.comb-logo {
+  width: 69px;
+  height: 24px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.comb-search-box {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .search-ico {
+    font-size: 13px;
+    flex-shrink: 0;
+  }
+  .search-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.capsule {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.6);
+  box-sizing: border-box;
+  color: #303133;
+  .cap-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      display: block;
+    }
+  }
+  .cap-divider {
+    width: 1px;
+    height: 14px;
+    background: rgba(0, 0, 0, 0.12);
+    margin: 0 8px;
+  }
+}
+
+.comb-tabs {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin-top: 4px;
+}
+
+.comb-tabs-scroll {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.comb-tab-item {
+  position: relative;
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 34px;
+  cursor: pointer;
+  white-space: nowrap;
+  &.active {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .tab-line {
+    position: absolute;
+    left: 50%;
+    bottom: 2px;
+    transform: translateX(-50%);
+    width: 18px;
+    height: 2px;
+    border-radius: 2px;
+  }
+}
+
+.comb-tab-more {
+  flex-shrink: 0;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.comb-banner {
+  position: relative;
+  z-index: 2;
+  margin-top: 6px;
+  height: 146px;
+  overflow: hidden;
+  &.is-card {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+  &.no-tabs {
+    margin-top: 10px;
+  }
+}
+
+.comb-carousel {
+  height: 146px;
+}
+
+.slide-wrap {
+  width: 100%;
+  height: 146px;
+}
+
+.slide-img {
+  width: 100%;
+  height: 146px;
+  object-fit: fill;
+  display: block;
+}
+
+.slide-empty {
+  width: 100%;
+  height: 146px;
+  background: rgba(255, 255, 255, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #909399;
+}
+
+.card-preview {
+  width: 100%;
+  height: 146px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.card-track {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  transition: transform 0.45s ease;
+}
+
+.card-slide {
+  flex: 0 0 88%;
+  padding: 0 3px;
+  box-sizing: border-box;
+  transform: scale(0.92);
+  transition: transform 0.35s ease;
+  &.active {
+    transform: scale(1);
+  }
+}
+
+.card-img {
+  width: 100%;
+  height: 146px;
+  object-fit: fill;
+  display: block;
+}
+
+.comb-indicator {
+  position: absolute;
+  bottom: 8px;
+  display: flex;
+  align-items: center;
+  z-index: 3;
+  &.pos-left {
+    left: 16px;
+  }
+  &.pos-center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.pos-right {
+    right: 16px;
+  }
+  .dot {
+    background: rgba(255, 255, 255, 0.65);
+    transition: all 0.25s ease;
+    &.round {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin: 0 3px;
+    }
+    &.line {
+      width: 12px;
+      height: 3px;
+      border-radius: 2px;
+      margin: 0 2px;
+    }
+  }
+}
+</style>

manager/src/views/page-decoration/wap/template/tpl_integral.vue

@@ -149,9 +149,11 @@ const pointStyle = computed(() =>
 const nameStyle = computed(() =>
   styled.value && props.res.nameColor ? { color: props.res.nameColor } : {}
 );
-const gapStyle = computed(() =>
+const gapStyle = computed(() => {
-  styled.value ? { gap: px(props.res.contentGap) } : {}
+  if (!styled.value) return {};
-);
+  const gap = px(props.res.contentGap ?? 10);
+  return { gap, "--ig-gap": gap };
+});
 const imgRadiusStyle = computed(() =>
   styled.value ? { borderRadius: px(props.res.imgRadius), overflow: "hidden" } : {}
 );
@@ -230,7 +232,7 @@ const imgRadiusStyle = computed(() =>
   flex-wrap: wrap;
 }
 .ig-g2-item {
-  width: calc(50% - 5px);
+  width: calc((100% - var(--ig-gap, 5px)) / 2);
   background: #fff;
   border-radius: 8px;
   overflow: hidden;
@@ -298,7 +300,7 @@ const imgRadiusStyle = computed(() =>
   flex-wrap: wrap;
 }
 .ig-g3-item {
-  width: calc(33.33% - 7px);
+  width: calc((100% - var(--ig-gap, 5px) * 2) / 3);
   background: #fff;
   border-radius: 8px;
   overflow: hidden;

manager/src/views/page-decoration/wap/template/tpl_line.vue

@@ -3,24 +3,29 @@
     class="tpl-line"
     :style="{
       background: lineBg,
-      padding: `0 ${res.paddingX ?? 0}px`,
+      padding: `0 ${px(res.paddingX ?? 0)}`,
-      marginBottom: (res.pageGap ?? 10) + 'px',
+      marginBottom: px(res.pageGap ?? 10),
     }"
   >
     <div
       :style="{
-        borderTop: `${res.lineHeight ?? 1}px ${res.lineStyle ?? 'dashed'} ${res.lineColor ?? '#979797'}`,
+        borderTop: `${Math.max(1, (Number(res.lineHeight ?? 1) || 1) / 2)}px ${res.lineStyle ?? 'dashed'} ${res.lineColor ?? '#979797'}`,
       }"
     ></div>
   </div>
 </template>
 
 <script>
+const px = (v) => `${(Number(v) || 0) / 2}px`;
+
 export default {
   name: "tpl_line",
   props: {
     res: { type: Object, default: () => ({}) },
   },
+  methods: {
+    px,
+  },
   computed: {
     lineBg() {
       const res = this.res || {};

manager/src/views/page-decoration/wap/template/tpl_rich_text.vue

@@ -3,9 +3,9 @@
     class="tpl-rich-text"
     :style="{
       background: richBg,
-      padding: `0 ${res.paddingX ?? 12}px`,
+      padding: `0 ${px(res.paddingX ?? 12)}`,
-      marginBottom: (res.pageGap ?? 10) + 'px',
+      marginBottom: px(res.pageGap ?? 10),
-      borderRadius: (res.borderRadius ?? 0) + 'px',
+      borderRadius: px(res.borderRadius ?? 0),
       overflow: 'hidden',
     }"
   >
@@ -14,11 +14,16 @@
 </template>
 
 <script>
+const px = (v) => `${(Number(v) || 0) / 2}px`;
+
 export default {
   name: "tpl_rich_text",
   props: {
     res: { type: Object, default: () => ({}) },
   },
+  methods: {
+    px,
+  },
   computed: {
     richBg() {
       const res = this.res || {};

manager/src/views/page-decoration/wap/template/tpl_title.vue

@@ -62,17 +62,17 @@ const barStyle = computed(() => {
 });
 const mainStyle = computed(() => ({
   color: item.value.color || "#282828",
-  fontSize: px(item.value.fontSize || 20),
+  fontSize: `${Number(item.value.fontSize) || 20}px`,
   fontWeight: item.value.textStyle === "bold" ? "bold" : "normal",
   fontStyle: item.value.textStyle === "italic" ? "italic" : "normal",
 }));
 const subStyle = computed(() => ({
   color: item.value.color1 || "#282828",
-  fontSize: px(item.value.subFontSize || 14),
+  fontSize: `${Number(item.value.subFontSize) || 14}px`,
 }));
 const moreStyle = computed(() => ({
   color: item.value.moreColor || "#282828",
-  fontSize: px(item.value.moreFontSize || 12),
+  fontSize: `${Number(item.value.moreFontSize) || 12}px`,
 }));
 </script>
 <style lang="scss" scoped>

manager/src/views/page-decoration/wap/wapList.vue

@@ -177,7 +177,7 @@ const addHref = computed(
   () =>
     router.resolve({
       path: "/floorList/main",
-      query: { pagetype: params.pageType },
+      query: { pagetype: params.pageType, mode: "add" },
     }).href
 );
 function changePageSize(v) {