From 60462fb27d7a6f7dfd6f729819cad8a1626a7efb Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Wed, 6 Nov 2024 18:09:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=A3=85=E4=BF=AE=E4=B8=8E?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E6=A0=B7=E5=BC=8F=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/CouponCard/index.vue    |  22 +-
 .../components/mobile/MenuGrid/index.vue      |  13 +-
 .../components/mobile/MenuGridTow/config.ts   |  80 +++++++
 .../components/mobile/MenuGridTow/index.vue   | 201 ++++++++++++++++++
 .../mobile/MenuGridTow/property.vue           |  66 ++++++
 .../components/mobile/NoticeBar/index.vue     |   2 +-
 .../components/mobile/ProductCard/index.vue   |  60 +++++-
 .../mobile/PromotionCombination/index.vue     |  18 +-
 .../mobile/PromotionSeckill/index.vue         |  68 ++++--
 .../src/components/DiyEditor/util.ts          |   3 +-
 10 files changed, 492 insertions(+), 41 deletions(-)
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/config.ts
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/index.vue
 create mode 100644 yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue

diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
index dd557fd..3e134e7 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
     <div
-      class="new-class flex flex-row text-12px"
+      class="new-class  flex-row text-12px"
       :style="{
         gap: `${property.space}px`,
         width: scrollbarWidth
@@ -13,11 +13,13 @@
           background: property.bgImg
             ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
             : '#fff',
-          width: `${couponWidth}px`,
+          width: `150px`,
+		  padding: `10px 10px`,
           color: property.textColor
         }"
         v-for="(coupon, index) in couponList"
         :key="index"
+		style="padding-left: 0px;padding-right: 4px;"
       >
         <!-- 布局1：1列-->
         <!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
@@ -41,16 +43,17 @@
         <!-- 布局2：2列-->
 		<!-- v-else-if="property.columns === 2"s -->
         <div
-          class="m-l-16px flex flex-row justify-between"
+          class="flex flex-row justify-between"
+		  style=""
         >
-          <div class="flex flex-col justify-evenly gap-4px">
+          <div class="flex flex-col justify-evenly gap-4px" style="flex:1;">
             <!-- 优惠值 -->
-            <CouponDiscount :coupon="coupon" />
-            <div>{{ coupon.name }}</div>
+            <CouponDiscount :coupon="coupon" style="text-align:center;" />
+            <div style="text-align:center;">{{ coupon.name }}</div>
           </div>
-          <div class="flex flex-col">
+          <div class="flex flex-col" style="writing-mode: vertical-rl;">
             <div
-              class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
+              class="h-full w-20px rounded-20px text-center"
               :style="{
                 color: property.button.color,
                 background: property.button.bgColor
@@ -138,8 +141,11 @@ onMounted(() => {
 <style scoped lang="scss">
 	.new-class{
 		margin-left: 10px;
+		overflow-x:scroll;
+		white-space: nowrap;
 		.box-content{
 			margin-right:10px;
+			display:inline-block;
 		}
 	}
 </style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
index 1c5ef1d..1ac4dea 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
@@ -3,7 +3,7 @@
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="relative flex flex-col items-center p-b-14px p-t-20px"
+      class="relative flex flex-col items-center"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
       <!-- 右上角角标 -->
@@ -14,11 +14,11 @@
       >
         {{ item.badge.text }}
       </span>
-      <el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
+      <el-image v-if="item.iconUrl" class="h-40px w-40px" :src="item.iconUrl" />
       <span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
         {{ item.title }}
       </span>
-      <span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
+      <span v-if="item.subtitle" class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
         {{ item.subtitle }}
       </span>
     </div>
@@ -32,4 +32,9 @@ defineOptions({ name: 'MenuGrid' })
 defineProps<{ property: MenuGridProperty }>()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	
+	.items-center{
+		margin:5px 0;
+	}
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/config.ts
new file mode 100644
index 0000000..52adcc9
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/config.ts
@@ -0,0 +1,80 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { cloneDeep } from 'lodash-es'
+
+/** 宫格导航属性 */
+export interface MenuGridProperty {
+  // 列数
+  column: number
+  // 导航菜单列表
+  list: MenuGridItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+/** 宫格导航项目属性 */
+export interface MenuGridItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 副标题
+  subtitle: string
+  // 副标题颜色
+  subtitleColor: string
+  // 链接
+  url: string
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标文字
+    text: string
+    // 角标文字颜色
+    textColor: string
+    // 角标背景颜色
+    bgColor: string
+  }
+}
+
+export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000'
+  }
+} as MenuGridItemProperty
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
+// 定义组件
+export const component = {
+  id: 'MenuGridTow',
+  name: '魔方',
+  // icon: 'bi:grid-3x3-gap',
+  icon: logo,
+  property: {
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      marginLeft: 8,
+      marginRight: 8,
+      padding: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+      borderRadius: 8,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuGridProperty>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/index.vue
new file mode 100644
index 0000000..b7cf31d
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class='new_czbk'>
+  	<div class="t">
+  		<text class="left-font">超值爆款</text>
+  		<div class="sub">美好生活由此开始</div>
+  	</div>
+  	<div class="new-list">
+  		<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
+              activityType: 'recommendBest',
+          });"> -->
+  		<div class="item" >
+  			<div class="nei">
+  				<div class="l">
+  					<div class="t">今日推荐</div>
+  					<div class="c">店主诚意推荐品质商品</div>
+  					<div class="b">
+  						<!-- GO! -->
+  						<img src="https://zysc.fjptzykj.com:3000/shangcheng/40a7582be7aeb5a6047415ab3a6728439a2798a4752ffcc1c063d66a534aa630.png"
+  							class="img"/>
+  						
+  					</div>
+  				</div>
+  				<div class="r">
+  					<img
+  						src="https://zysc.fjptzykj.com:3000/shangcheng/c80faeeeb2d6dadcdbe7e6d1a4caa06869b94301612cdf157414a10559b38267.png"
+  						class="img"/>
+  				</div>
+  			</div>
+  		</div>
+  		<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
+              activityType: 'recommendHot',
+          });"> -->
+  		<div class="item">
+  			<div class="nei">
+  				<div class="l">
+  					<div class="t">热门榜单</div>
+  					<div class="c">店主诚意推荐品质商品</div>
+  					<div class="b">
+  						<!-- GO! -->
+  						<img
+  							src="https://zysc.fjptzykj.com:3000/shangcheng/5c72fc99989bf0a7e59b57f519c76c9a98cb20478384e20b1b934aa8f80cc598.png"
+  							class="img"/>
+  					</div>
+  				</div>
+  				<div class="r">
+  					<img
+  						src="https://zysc.fjptzykj.com:3000/shangcheng/904fd4848fde8025ccc17693662efd5b7bf5ec3f2656ecc7de407c8c46f910b2.png"
+  						class="img"/>
+  				</div>
+  			</div>
+  		</div>
+  		<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
+              activityType: 'recommendNew',
+          });"> -->
+  		<div class="item">
+  			<div class="nei">
+  				<div class="l">
+  					<div class="t">首发新品</div>
+  					<div class="c">新品上架等 你来拿</div>
+  					<div class="b">
+  						<!-- GO! -->
+  						<img
+  							src="https://zysc.fjptzykj.com:3000/shangcheng/ebb2fc0512d1bd6a6d21a2c07f6603bfd2ea6f7e23377eb4cd8118d89d666589.png"
+  							class="img"/>
+  					</div>
+  				</div>
+  				<div class="r">
+  					<img
+  						src="https://zysc.fjptzykj.com:3000/shangcheng/7c71cbf2c757418302ea9ef2952893c24e1d46c4cc35a821f56be0f315bcabb0.png"
+  						class="img"/>
+  				</div>
+  			</div>
+  		</div>
+  		<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
+              activityType: 'recommendGood',
+          });"> -->
+  		<div class="item">
+  			<div class="nei">
+  				<div class="l">
+  					<div class="t">促销单品</div>
+  					<div class="c">综合评选好 产品</div>
+  					<div class="b">
+  						<!-- GO! -->
+  						<img
+  							src="https://zysc.fjptzykj.com:3000/shangcheng/aac8baa7a6feb9ee3459d1cf75ba9a7e8bacb5d93c88ac95c1b0ecd29b847f96.png"
+  							class="img"/>
+  					</div>
+  				</div>
+  				<div class="r">
+  					<img
+  						src="https://zysc.fjptzykj.com:3000/shangcheng/8a61c35d82702c61f97ef3db43a8d6755b2eca3d78a22dbaa55851e815e96a23.png"
+  						class="img" />
+  				</div>
+  			</div>
+  		</div>
+  		<div style="clear:both;"></div>
+  	</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuGridProperty } from './config'
+/** 宫格导航 */
+defineOptions({ name: 'MenuGridTow' })
+defineProps<{ property: MenuGridProperty }>()
+</script>
+
+<style scoped lang="scss">
+	.new_czbk {
+		width: 100%;
+		background: rgba(255, 229, 227);
+		border-radius: 5px;
+		margin: 0 auto;
+		padding: 5px 0;
+		margin-top: 10px;
+		padding-bottom: 10px;
+		padding-top: 10px;
+		&>.t {
+			display: flex;
+			align-items: center;
+			padding:0 10px;
+			.left-font {
+				color: rgba(252, 60, 62);
+				font-size: 17px;
+				font-weight: 700;
+			}
+	
+			.sub {
+				background: rgba(248, 79, 43);
+				color: white;
+				border-radius: 20px 0px 20px 0px;
+				padding: 0 13px;
+				margin-left: 10px;
+				font-size: 13px;
+			}
+		}
+	
+		.new-list {
+			// width: 100%;
+			margin-right:10px;
+			.item {
+				float: left;
+				width: 50%;
+	
+				.nei {
+					margin: 10px;
+					margin-right:0;
+					margin-bottom: 0;
+					background: white;
+					border-radius: 10px;
+					padding: 8px 10px;
+					display: flex;
+	
+					.l {
+						width: 50%;
+	
+						.t {
+							// font-size: 17px;
+						}
+	
+						.c {
+							color: rgba(153, 153, 153);
+							font-size: 12px;
+							margin: 3px 0;
+						}
+	
+						.b {
+							// display: flex;
+							// align-items: center;
+							// justify-content: space-around;
+							// background: #329cff;
+							// margin: 0 3px;
+							// border-radius: 15px;
+							// color: white;
+							// font-weight: 700;
+							// padding: 0px 9px;
+							// font-style: oblique;
+	
+							.img {
+								width: 76%;
+								height: 20px;
+							}
+						}
+					}
+	
+					.r {
+						width: 49%;
+	
+						.img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+	
+			}
+		}
+	
+	}
+	
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue
new file mode 100644
index 0000000..f127127
--- /dev/null
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue
@@ -0,0 +1,66 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-form-item label="每行数量" prop="column">
+        <el-radio-group v-model="formData.column">
+          <el-radio :label="3">3个</el-radio>
+          <el-radio :label="4">4个</el-radio>
+          <el-radio :label="5">5个</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-card header="菜单设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
+          <template #default="{ element }">
+            <el-form-item label="图标" prop="iconUrl">
+              <UploadImg v-model="element.iconUrl" height="80px" width="80px">
+                <template #tip> 建议尺寸：44 * 44 </template>
+              </UploadImg>
+            </el-form-item>
+            <el-form-item label="标题" prop="title">
+              <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+            </el-form-item>
+            <el-form-item label="副标题" prop="subtitle">
+              <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
+            </el-form-item>
+            <el-form-item label="链接" prop="url">
+              <AppLinkInput v-model="element.url" />
+            </el-form-item>
+            <el-form-item label="显示角标" prop="badge.show">
+              <el-switch v-model="element.badge.show" />
+            </el-form-item>
+            <template v-if="element.badge.show">
+              <el-form-item label="角标内容" prop="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </el-form-item>
+              <el-form-item label="背景颜色" prop="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </el-form-item>
+            </template>
+          </template>
+        </Draggable>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import {
+  EMPTY_MENU_GRID_ITEM_PROPERTY,
+  MenuGridProperty
+} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
+
+/** 宫格导航属性面板 */
+defineOptions({ name: 'MenuGridProperty' })
+
+const props = defineProps<{ modelValue: MenuGridProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
index fce1afb..0058b91 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
@@ -10,7 +10,7 @@
         <div class="h-24px truncate leading-24px">{{ item.text }}</div>
       </el-carousel-item>
     </el-carousel>
-    <Icon icon="ep:arrow-right" />
+    <!-- <Icon icon="ep:arrow-right" /> -->
   </div>
 </template>
 
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
index a7f0de4..998c5aa 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
@@ -1,5 +1,23 @@
 <template>
   <div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef">
+	  <view class="new-fenlei">
+	  	<view class="list on">
+	  		<view class="t">首页新品</view>
+	  		<view class="b">最新出炉</view>
+	  	</view>
+	  	<view class="list">
+	  		<view class="t">精品推荐</view>
+	  		<view class="b">猜你喜欢</view>
+	  	</view>
+	  	<view class="list">
+	  		<view class="t">热门榜单</view>
+	  		<view class="b">好评如云</view>
+	  	</view>
+	  	<view class="list">
+	  		<view class="t">促销单品</view>
+	  		<view class="b">多买多销</view>
+	  	</view>
+	  </view>
     <div
       class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
       :style="{
@@ -164,4 +182,44 @@ const calculateWidth = () => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	
+	.new-fenlei {
+		width: 100%;
+		display: flex;
+		margin:10px 0;
+		justify-content: space-around;
+		.list {
+			width: 100%;
+			display:flex;
+			flex-wrap:wrap;
+			&.on{
+				.t {
+					color: #e93422;
+				}
+				
+				.b {
+					background: #e93422;
+					color:white;
+				}
+			}
+			.t {
+				width:100%;
+				text-align: center;
+				font-size: 16px;
+			}
+	
+			.b {
+				// background: rgba(255, 102, 7);
+				text-align: center;
+				color: rgba(153,153,153);
+				border-radius: 15px;
+				width: 63%;
+				margin: 0 auto;
+				font-size: 12px;
+				margin-top:5px;
+			}
+		}
+	}
+	
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
index fce5090..8661d2c 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@@ -27,8 +27,8 @@
       :style="{
         gridGap: `${property.space}px`,
         gridTemplateColumns,
-        width: scrollbarWidth
       }"
+	  style="padding:0 10px;padding-bottom: 8px;"
     >
       <!-- 商品 -->
       <div
@@ -53,7 +53,7 @@
         <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
         <div
           :class="[
-            'flex flex-col gap-8px p-8px box-border',
+            'flex flex-col  p-8px box-border',
             {
               'w-[calc(100%-64px)]': columns === 2,
               'w-full': columns === 3
@@ -79,6 +79,7 @@
             </span>
           </div>
         </div>
+		<view class="sss">参与拼团</view>
       </div>
     </div>
   </el-scrollbar>
@@ -145,9 +146,18 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-	
+	.sss {
+		width: 100%;
+		// margin-top: 10px;
+		padding: 3px;
+		font-size: 13px;
+		background: #e93422;
+		text-align: center;
+		color: white;
+		border-radius: 0px 0px 5px 5px;
+	}
 	.new-class{
-		    padding: 10px;
+		    padding:0 0;
 		// width:42%;
 	}
 	
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
index ec2670b..eef7131 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@@ -10,7 +10,12 @@
 									src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
 								<span class="new-text">限时秒杀</span>
 							</div>
-							<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
+							<div style="color:  rgba(255, 51, 35, 1); font-size:15px;" class="title-text">
+								<span class="time">05</span>:
+								<span class="time">00</span>:
+								<span class="time">00</span>
+
+							</div>
 						</div>
 						<div class="item-center flex flex-row justify-center gap-4px">
 							<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
@@ -23,10 +28,8 @@
 		<!-- 商品网格 -->
 		<!-- gridGap: `${property.space}px`, -->
 		<div class="new-main" :style="{
-        
-        gridTemplateColumns,
-        width: scrollbarWidth
-      }">
+			gridTemplateColumns,
+		  }" style="padding:0 10px;">
 			<!-- 商品 -->
 			<!-- 
 	   :style="{
@@ -44,19 +47,14 @@
 				</div>
 				<!-- 商品封面图 -->
 				<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
-				<div :class="[
-            'flex flex-col gap-8px p-8px box-border',
-            {
-              'w-[calc(100%-64px)]': columns === 2,
-              'w-full': columns === 3
-            }
-          ]">
+				<div>
 					<!-- 商品名称 -->
 					<div v-if="property.fields.name.show" class="truncate text-12px"
-						:style="{ color: property.fields.name.color }">
+						:style="{ color: property.fields.name.color }" style="margin: 5px 0;">
 						{{ spu.name }}
 					</div>
-					<div>
+					<div style="display: flex;">
+						<div class="fff">抢</div>
 						<!-- 商品价格 -->
 						<span v-if="property.fields.price.show" class="text-12px"
 							:style="{ color: property.fields.price.color }">
@@ -129,6 +127,24 @@
 </script>
 
 <style scoped lang="scss">
+	.fff {
+		padding: 1px 3px;
+		font-size: 8px;
+		background: #e93422;
+		color: white;
+		border-radius: 2px;
+		margin-right: 2px;
+	}
+
+	.time {
+		width: 20px;
+		height: 20px;
+		background: rgba(255, 237, 238, 1);
+		color: rgba(255, 51, 35, 1);
+		text-align: center;
+		padding: 0 3px;
+	}
+
 	:deep(.el-scrollbar__view) {
 		background-color: white;
 		border-radius: 12px;
@@ -136,28 +152,36 @@
 
 	.new-class {
 		width: 33%;
-		padding: 10px;
+		border-radius: 8px 8px 8px 0px;
+		padding-bottom: 10px;
+		// padding: 10px;
 		// width:42%;
 	}
 
 	.new-main {
 		display: flex;
+		gap: 8px;
+		grid-template-columns: repeat(3, auto);
+		padding: 0px 10px 8px;
+		padding-bottom: 10px;
 	}
 
-	:deep(.el-image) {
-		width: 100% !important;
-	}
+	// :deep(.el-image) {
+	// 	width: 100% !important;
+	// }
 
 	.wh {
 		position: relative;
 		padding-right: 10px;
 		display: flex;
 		align-items: center;
-		.new-text1{
-			width:30px;
+
+		.new-text1 {
+			width: 30px;
 		}
-		.new-text{
-			font-weight: 700;	
+
+		.new-text {
+			font-weight: 700;
 		}
 	}
 
diff --git a/yudao-admin-vue3/src/components/DiyEditor/util.ts b/yudao-admin-vue3/src/components/DiyEditor/util.ts
index c75945f..3287496 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/util.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/util.ts
@@ -118,7 +118,8 @@ export const PAGE_LIBS = [
       'MenuGrid',
       'MenuList',
       'Popover',
-      'FloatingActionButton'
+      'FloatingActionButton',
+	  "MenuGridTow"
     ]
   },
   {