diff --git a/manager/public/demo/double11/banner-1.png b/manager/public/demo/double11/banner-1.png new file mode 100644 index 000000000..f6b0a2463 Binary files /dev/null and b/manager/public/demo/double11/banner-1.png differ diff --git a/manager/public/demo/double11/banner-2.png b/manager/public/demo/double11/banner-2.png new file mode 100644 index 000000000..3ea0c6bfa Binary files /dev/null and b/manager/public/demo/double11/banner-2.png differ diff --git a/manager/public/demo/double11/banner-3.png b/manager/public/demo/double11/banner-3.png new file mode 100644 index 000000000..99c90123c Binary files /dev/null and b/manager/public/demo/double11/banner-3.png differ diff --git a/manager/public/demo/double11/banner-4.png b/manager/public/demo/double11/banner-4.png new file mode 100644 index 000000000..ad4c41b91 Binary files /dev/null and b/manager/public/demo/double11/banner-4.png differ diff --git a/manager/public/demo/double11/cube-left.png b/manager/public/demo/double11/cube-left.png new file mode 100644 index 000000000..f60861bcf Binary files /dev/null and b/manager/public/demo/double11/cube-left.png differ diff --git a/manager/public/demo/double11/cube-right-1.png b/manager/public/demo/double11/cube-right-1.png new file mode 100644 index 000000000..bd29544ce Binary files /dev/null and b/manager/public/demo/double11/cube-right-1.png differ diff --git a/manager/public/demo/double11/cube-right-2.png b/manager/public/demo/double11/cube-right-2.png new file mode 100644 index 000000000..9c8516177 Binary files /dev/null and b/manager/public/demo/double11/cube-right-2.png differ diff --git a/manager/public/demo/double11/logo-1111-fix.png b/manager/public/demo/double11/logo-1111-fix.png new file mode 100644 index 000000000..4c889eb64 Binary files /dev/null and b/manager/public/demo/double11/logo-1111-fix.png differ diff --git a/manager/public/demo/double11/logo-1111.png b/manager/public/demo/double11/logo-1111.png new file mode 100644 index 000000000..84f441ae8 Binary files /dev/null and b/manager/public/demo/double11/logo-1111.png differ diff --git a/manager/public/demo/double11/nav-1.png b/manager/public/demo/double11/nav-1.png new file mode 100644 index 000000000..3d60b6cc8 Binary files /dev/null and b/manager/public/demo/double11/nav-1.png differ diff --git a/manager/public/demo/double11/nav-10.png b/manager/public/demo/double11/nav-10.png new file mode 100644 index 000000000..d8deff9ef Binary files /dev/null and b/manager/public/demo/double11/nav-10.png differ diff --git a/manager/public/demo/double11/nav-2.png b/manager/public/demo/double11/nav-2.png new file mode 100644 index 000000000..1269e8271 Binary files /dev/null and b/manager/public/demo/double11/nav-2.png differ diff --git a/manager/public/demo/double11/nav-3.png b/manager/public/demo/double11/nav-3.png new file mode 100644 index 000000000..9664c192b Binary files /dev/null and b/manager/public/demo/double11/nav-3.png differ diff --git a/manager/public/demo/double11/nav-4.png b/manager/public/demo/double11/nav-4.png new file mode 100644 index 000000000..becd0d39f Binary files /dev/null and b/manager/public/demo/double11/nav-4.png differ diff --git a/manager/public/demo/double11/nav-5.png b/manager/public/demo/double11/nav-5.png new file mode 100644 index 000000000..03661d575 Binary files /dev/null and b/manager/public/demo/double11/nav-5.png differ diff --git a/manager/public/demo/double11/nav-6.png b/manager/public/demo/double11/nav-6.png new file mode 100644 index 000000000..859abd1ad Binary files /dev/null and b/manager/public/demo/double11/nav-6.png differ diff --git a/manager/public/demo/double11/nav-7.png b/manager/public/demo/double11/nav-7.png new file mode 100644 index 000000000..da88034fe Binary files /dev/null and b/manager/public/demo/double11/nav-7.png differ diff --git a/manager/public/demo/double11/nav-8.png b/manager/public/demo/double11/nav-8.png new file mode 100644 index 000000000..a606f859d Binary files /dev/null and b/manager/public/demo/double11/nav-8.png differ diff --git a/manager/public/demo/double11/nav-9.png b/manager/public/demo/double11/nav-9.png new file mode 100644 index 000000000..29fbcaf76 Binary files /dev/null and b/manager/public/demo/double11/nav-9.png differ diff --git a/manager/public/demo/double11/notice-1111.png b/manager/public/demo/double11/notice-1111.png new file mode 100644 index 000000000..43e6adfb7 Binary files /dev/null and b/manager/public/demo/double11/notice-1111.png differ diff --git a/manager/public/demo/double11/strip-1111.png b/manager/public/demo/double11/strip-1111.png new file mode 100644 index 000000000..d3c4fe339 Binary files /dev/null and b/manager/public/demo/double11/strip-1111.png differ diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelGoods.vue b/manager/src/views/page-decoration/wap/config-panel/PanelGoods.vue index abde9e7b4..d19b81267 100644 --- a/manager/src/views/page-decoration/wap/config-panel/PanelGoods.vue +++ b/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( diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelHomeComb.vue b/manager/src/views/page-decoration/wap/config-panel/PanelHomeComb.vue new file mode 100644 index 000000000..f0dac00a6 --- /dev/null +++ b/manager/src/views/page-decoration/wap/config-panel/PanelHomeComb.vue @@ -0,0 +1,841 @@ + + + + + diff --git a/manager/src/views/page-decoration/wap/config-panel/index.js b/manager/src/views/page-decoration/wap/config-panel/index.js index e9fb1fd63..ed3ca8af3 100644 --- a/manager/src/views/page-decoration/wap/config-panel/index.js +++ b/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, diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js index c7120e75a..2774a91c2 100644 --- a/manager/src/views/page-decoration/wap/config.js +++ b/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", diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue index 2a06c734d..4630a8aaf 100644 --- a/manager/src/views/page-decoration/wap/index.vue +++ b/manager/src/views/page-decoration/wap/index.vue @@ -100,7 +100,7 @@ diff --git a/manager/src/views/page-decoration/wap/template/tpl_integral.vue b/manager/src/views/page-decoration/wap/template/tpl_integral.vue index 73085bfd0..6892a271a 100644 --- a/manager/src/views/page-decoration/wap/template/tpl_integral.vue +++ b/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(() => - styled.value ? { gap: px(props.res.contentGap) } : {} -); +const gapStyle = computed(() => { + 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; diff --git a/manager/src/views/page-decoration/wap/template/tpl_line.vue b/manager/src/views/page-decoration/wap/template/tpl_line.vue index db8ee59ab..6428ec8fd 100644 --- a/manager/src/views/page-decoration/wap/template/tpl_line.vue +++ b/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`, - marginBottom: (res.pageGap ?? 10) + 'px', + padding: `0 ${px(res.paddingX ?? 0)}`, + marginBottom: px(res.pageGap ?? 10), }" >