From d13cfad70c9fe8a5cd8388e1f57b31e712131ac4 Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Sat, 12 Oct 2024 15:20:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=E4=B8=8E=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9B=BE=E6=A0=87=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiyEditor/components/ComponentLibrary.vue |  12 +-
 .../components/mobile/Carousel/config.ts      |   5 +-
 .../components/mobile/CouponCard/config.ts    |   5 +-
 .../components/mobile/Divider/config.ts       |   5 +-
 .../mobile/FloatingActionButton/config.ts     |   5 +-
 .../components/mobile/HotZone/config.ts       |   5 +-
 .../components/mobile/ImageBar/config.ts      |   5 +-
 .../components/mobile/MagicCube/config.ts     |   5 +-
 .../components/mobile/MenuGrid/config.ts      |   5 +-
 .../components/mobile/MenuList/config.ts      |   5 +-
 .../components/mobile/MenuSwiper/config.ts    |   5 +-
 .../components/mobile/NoticeBar/config.ts     |   5 +-
 .../components/mobile/Popover/config.ts       |   5 +-
 .../components/mobile/ProductCard/config.ts   |   5 +-
 .../components/mobile/ProductList/config.ts   |   5 +-
 .../mobile/PromotionArticle/config.ts         |   5 +-
 .../mobile/PromotionCombination/config.ts     |   5 +-
 .../mobile/PromotionPoint/config.ts           |   5 +-
 .../mobile/PromotionSeckill/config.ts         |   5 +-
 .../components/mobile/SearchBar/config.ts     |   4 +-
 .../components/mobile/TitleBar/config.ts      |   3 +-
 .../components/mobile/UserCard/index.vue      | 124 ++-
 .../components/mobile/UserOrder/index.vue     |   3 +-
 .../components/mobile/VideoPlayer/config.ts   |   5 +-
 .../src/components/DiyEditor/index.vue        | 975 +++++++++---------
 .../mall/promotion/diy/template/decorate1.vue |  26 +-
 26 files changed, 651 insertions(+), 591 deletions(-)

diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue b/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
index f2af137..bf57a14 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -23,8 +23,11 @@
               <div>
                 <div class="drag-placement">组件放置区域</div>
                 <div class="component">
-                  <Icon :icon="element.icon" :size="32" />
-                  <span class="mt-4px text-12px">{{ element.name }}</span>
+                  <!-- <Icon :icon="element.icon" :size="32" /> -->
+				  <div>
+					  <img :src="element.icon" />
+				  </div>
+                  <span class="text-12px">{{ element.name }}</span>
                 </div>
               </div>
             </template>
@@ -142,8 +145,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
   .component.active,
   .component:hover {
-    color: var(--el-color-white);
-    background: var(--el-color-primary);
+    // color: var(--el-color-white);
+    // background: var(--el-color-primary);
+    background: #f6f6f6;
 
     .el-icon {
       color: var(--el-color-white);
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts
index 3e74a51..ab9c23a 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts
@@ -26,12 +26,13 @@ export interface CarouselItemProperty {
   // 跳转链接
   url: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-09.png'
 // 定义组件
 export const component = {
   id: 'Carousel',
   name: '轮播图',
-  icon: 'system-uicons:carousel',
+  // icon: 'system-uicons:carousel',
+  icon: logo,
   property: {
     type: 'default',
     indicator: 'dot',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts
index 304533d..fde9fb3 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts
@@ -22,12 +22,13 @@ export interface CouponCardProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-19.png'
 // 定义组件
 export const component = {
   id: 'CouponCard',
   name: '优惠券',
-  icon: 'ep:ticket',
+  // icon: 'ep:ticket',
+  icon: logo,
   property: {
     columns: 1,
     bgImg: '',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts
index 9b55360..f2b9a29 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts
@@ -13,12 +13,13 @@ export interface DividerProperty {
   // 类型
   borderType: 'solid' | 'dashed' | 'dotted' | 'none'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-12.png'
 // 定义组件
 export const component = {
   id: 'Divider',
   name: '分割线',
-  icon: 'tdesign:component-divider-vertical',
+  // icon: 'tdesign:component-divider-vertical',
+  icon: logo,
   property: {
     height: 30,
     lineWidth: 1,
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
index fcf129f..e640be1 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
@@ -21,12 +21,13 @@ export interface FloatingActionButtonItemProperty {
   // 文字颜色
   textColor: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-07.png'
 // 定义组件
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',
-  icon: 'tabler:float-right',
+  // icon: 'tabler:float-right',
+  icon: logo,
   position: 'fixed',
   property: {
     direction: 'vertical',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts
index 80ed855..685e2e3 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts
@@ -25,12 +25,13 @@ export interface HotZoneItemProperty {
   // 左
   left: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-14.png'
 // 定义组件
 export const component = {
   id: 'HotZone',
   name: '热区',
-  icon: 'tabler:hand-click',
+  // icon: 'tabler:hand-click',
+  icon: logo,
   property: {
     imgUrl: '',
     list: [] as HotZoneItemProperty[],
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts
index 68edf72..c7801b9 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts
@@ -9,12 +9,13 @@ export interface ImageBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-08.png'
 // 定义组件
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  // icon: 'ep:picture',
+  icon: logo,
   property: {
     imgUrl: '',
     url: '',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts
index 5e10ab5..d006799 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts
@@ -29,12 +29,13 @@ export interface MagicCubeItemProperty {
   // 左
   left: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-13.png'
 // 定义组件
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
-  icon: 'bi:columns',
+  // icon: 'bi:columns',
+  icon: logo,
   property: {
     borderRadiusTop: 0,
     borderRadiusBottom: 0,
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
index 9f91ceb..d010707 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
@@ -49,12 +49,13 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuGridItemProperty
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
 // 定义组件
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
-  icon: 'bi:grid-3x3-gap',
+  // icon: 'bi:grid-3x3-gap',
+  icon: logo,
   property: {
     column: 3,
     list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts
index f96fd0a..c8fcb2b 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts
@@ -31,12 +31,13 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitle: '副标题',
   subtitleColor: '#bbb'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-05.png'
 // 定义组件
 export const component = {
   id: 'MenuList',
   name: '列表导航',
-  icon: 'fa-solid:list',
+  // icon: 'fa-solid:list',
+  icon: logo,
   property: {
     list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
     style: {
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
index fe5f4e8..3cc4bcd 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
@@ -46,12 +46,13 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuSwiperItemProperty
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-03.png'
 // 定义组件
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',
-  icon: 'bi:grid-3x2-gap',
+  // icon: 'bi:grid-3x2-gap',
+  icon: logo,
   property: {
     layout: 'iconText',
     row: 1,
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
index b6b0860..03b38c9 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
@@ -21,12 +21,13 @@ export interface NoticeContentProperty {
   // 链接地址
   url: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-02.png'
 // 定义组件
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  // icon: 'ep:bell',
+  icon: logo,
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts
index e814090..75e8d28 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts
@@ -13,12 +13,13 @@ export interface PopoverItemProperty {
   // 显示类型：仅显示一次、每次启动都会显示
   showType: 'once' | 'always'
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-06.png'
 // 定义组件
 export const component = {
   id: 'Popover',
   name: '弹窗广告',
-  icon: 'carbon:popup',
+  // icon: 'carbon:popup',
+  icon: logo,
   position: 'fixed',
   property: {
     list: [{ showType: 'once' }]
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts
index 735b6ba..00f3d38 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts
@@ -57,12 +57,13 @@ export interface ProductCardFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-15.png'
 // 定义组件
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  // icon: 'fluent:text-column-two-left-24-filled',
+  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts
index 1f16832..553bec5 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts
@@ -36,12 +36,13 @@ export interface ProductListFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-16.png'
 // 定义组件
 export const component = {
   id: 'ProductList',
   name: '商品栏',
-  icon: 'fluent:text-column-two-24-filled',
+  // icon: 'fluent:text-column-two-24-filled',
+  icon: logo,
   property: {
     layoutType: 'twoCol',
     fields: {
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
index c6270c2..3af408f 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
@@ -7,12 +7,13 @@ export interface PromotionArticleProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-20.png'
 // 定义组件
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',
-  icon: 'ph:article-medium',
+  // icon: 'ph:article-medium',
+  icon: logo,
   property: {
     style: {
       bgType: 'color',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
index 0c7e9ff..8a8e2bc 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
@@ -37,12 +37,13 @@ export interface PromotionCombinationFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-17.png'
 // 定义组件
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',
-  icon: 'mdi:account-group',
+  // icon: 'mdi:account-group',
+  icon: logo,
   property: {
     layoutType: 'oneCol',
     fields: {
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
index 75aa0ff..c8ac992 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
@@ -58,12 +58,13 @@ export interface PromotionPointFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-21.png'
 // 定义组件
 export const component = {
   id: 'PromotionPoint',
   name: '积分商城',
-  icon: 'ep:present',
+  // icon: 'ep:present',
+  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
index 800398b..ba115c5 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
@@ -36,12 +36,13 @@ export interface PromotionSeckillFieldProperty {
   // 颜色
   color: string
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-18.png'
 // 定义组件
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',
-  icon: 'mdi:calendar-time',
+  // icon: 'mdi:calendar-time',
+  icon: logo,
   property: {
     activityId: undefined,
     layoutType: 'oneCol',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts
index ef47b27..a6cb18c 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -15,12 +15,12 @@ export interface SearchProperty {
 
 // 文字位置
 export type PlaceholderPosition = 'left' | 'center'
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-01.png'
 // 定义组件
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: logo,
   property: {
     height: 28,
     showScan: false,
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts
index d9f0672..7a490f6 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts
@@ -38,12 +38,13 @@ export interface TitleBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-10.png'
 // 定义组件
 export const component = {
   id: 'TitleBar',
   name: '标题栏',
   icon: 'material-symbols:line-start',
+  icon: logo,
   property: {
     title: '主标题',
     description: '副标题',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue
index 14b447c..5b225a1 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue
@@ -1,29 +1,115 @@
 <template>
-  <div class="flex flex-col">
-    <div class="flex items-center justify-between p-x-18px p-y-24px">
-      <div class="flex flex-1 items-center gap-16px">
-        <el-avatar :size="60">
-          <Icon icon="ep:avatar" :size="60" />
-        </el-avatar>
-        <span class="text-18px font-bold">芋道源码</span>
-      </div>
-      <Icon icon="tdesign:qrcode" :size="20" />
-    </div>
-    <div
+	<div class="flex flex-col" style="    margin-bottom: 27px;">
+
+		<div class="new-main">
+			<div class="flex items-center justify-between p-x-18px p-y-24px " style="padding-bottom:15px;">
+				<div class="flex flex-1 items-center gap-16px">
+					<el-avatar :size="60">
+						<Icon icon="ep:avatar" :size="60" />
+					</el-avatar>
+					<span class="text-18px font-bold">用户名称</span>
+				</div>
+				<Icon icon="tdesign:qrcode" :size="20" />
+			</div>
+
+			<div class="new-usercard" style="z-index: 9999;">
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text ss-line-1">0.00</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 元 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">余额</div>
+				</div>
+
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text">0</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 张 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">优惠券</div>
+				</div>
+				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
+					<div class="value-box ss-flex ss-col-bottom">
+						<div class="value-text">0</div>
+						<div class="unit-text ss-m-l-6">
+							<!-- 个 -->
+						</div>
+					</div>
+					<div class="menu-title ss-m-t-28">积分</div>
+				</div>
+			</div>
+
+			<div class="new-bottom">
+				<img src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
+					alt="" />
+				<div class="btn">
+					立即开通
+				</div>
+			</div>
+		</div>
+		<!-- <div
       class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
     >
       <span class="color-#ff690d">点击绑定手机号</span>
       <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
-    </div>
-  </div>
+    </div> -->
+	</div>
 </template>
 <script setup lang="ts">
-import { UserCardProperty } from './config'
+	import { UserCardProperty } from './config'
 
-/** 用户卡片 */
-defineOptions({ name: 'UserCard' })
-// 定义属性
-defineProps<{ property: UserCardProperty }>()
+	/** 用户卡片 */
+	defineOptions({ name: 'UserCard' })
+	// 定义属性
+	defineProps<{ property : UserCardProperty }>()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	.new-main {
+		position: relative;
+		background: url('@/assets/imgs/userCar/seckilbg.png') no-repeat;
+		background-size: cover;
+		padding-bottom: 53px;
+
+		.value-box {
+			margin-bottom: 6px;
+		}
+
+		.new-usercard {
+			width: 100%;
+			display: flex;
+			justify-content: space-around;
+		}
+
+		div {
+			text-align: center;
+			color: white;
+		}
+
+		.new-bottom {
+			position: absolute;
+			bottom: -28px;
+			width: 100%;
+			z-index: 999999999999999;
+
+			img {
+				width: 92%;
+			}
+
+			.btn {
+				position: absolute;
+				bottom: 19px;
+				right: 29px;
+				background: white;
+				border-radius: 12px;
+				padding: 4px 8px;
+				font-size: 14px;
+				color: #946d2d;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue
index 450ae54..0b4c240 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" />
+  <!-- <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" /> -->
+  <el-image src="  https://zysc.fjptzykj.com:3000/shangcheng/0ba158a1a2de7d39c6cec22cfe54736237438f63893b09c7453b5b5e3482f826.png" />
 </template>
 <script setup lang="ts">
 import { UserOrderProperty } from './config'
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
index 02f0374..ecd1092 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
@@ -17,12 +17,13 @@ export interface VideoPlayerStyle extends ComponentStyle {
   // 视频高度
   height: number
 }
-
+import logo from '@/assets/imgs/DiyEditorImges/组件图标-11.png'
 // 定义组件
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  // icon: 'ep:video-play',
+  icon: logo,
   property: {
     videoUrl: '',
     posterUrl: '',
diff --git a/yudao-admin-vue3/src/components/DiyEditor/index.vue b/yudao-admin-vue3/src/components/DiyEditor/index.vue
index 942a153..c01f6a9 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/index.vue
@@ -1,566 +1,515 @@
 <template>
-  <el-container class="editor">
-    <!-- 顶部：工具栏 -->
-    <el-header class="editor-header">
-      <!-- 左侧操作区 -->
-      <slot name="toolBarLeft"></slot>
-      <!-- 中心操作区 -->
-      <div class="header-center flex flex-1 items-center justify-center">
-        <span>{{ title }}</span>
-      </div>
-      <!-- 右侧操作区 -->
-      <el-button-group class="header-right">
-        <el-tooltip content="重置">
-          <el-button @click="handleReset">
-            <Icon icon="system-uicons:reset-alt" :size="24" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip content="预览" v-if="previewUrl">
-          <el-button @click="handlePreview">
-            <Icon icon="ep:view" :size="24" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip content="保存">
-          <el-button @click="handleSave">
-            <Icon icon="ep:check" :size="24" />
-          </el-button>
-        </el-tooltip>
-      </el-button-group>
-    </el-header>
+	<el-container class="editor">
+		<!-- 顶部：工具栏 -->
+		<el-header class="editor-header">
+			<!-- 左侧操作区 -->
+			<slot name="toolBarLeft"></slot>
+			<!-- 中心操作区 -->
+			<div class="header-center flex flex-1 items-center justify-center">
+				<span>{{ title }}</span>
+			</div>
+			<!-- 右侧操作区 -->
+			<el-button-group class="header-right">
+				<el-tooltip content="重置">
+					<el-button @click="handleReset">
+						<Icon icon="system-uicons:reset-alt" :size="24" />
+					</el-button>
+				</el-tooltip>
+				<el-tooltip content="预览" v-if="previewUrl">
+					<el-button @click="handlePreview">
+						<Icon icon="ep:view" :size="24" />
+					</el-button>
+				</el-tooltip>
+				<el-tooltip content="保存">
+					<el-button @click="handleSave">
+						<Icon icon="ep:check" :size="24" />
+					</el-button>
+				</el-tooltip>
+			</el-button-group>
+		</el-header>
 
-    <!-- 中心区域 -->
-    <el-container class="editor-container">
-      <!-- 左侧：组件库（ComponentLibrary） -->
-      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
-      <!-- 中心：设计区域（ComponentContainer） -->
-      <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <!-- 手机顶部 -->
-        <div class="editor-design-top">
-          <!-- 手机顶部状态栏 -->
-          <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
-          <!-- 手机顶部导航栏 -->
-          <ComponentContainer
-            v-if="showNavigationBar"
-            :component="navigationBarComponent"
-            :show-toolbar="false"
-            :active="selectedComponent?.id === navigationBarComponent.id"
-            @click="handleNavigationBarSelected"
-            class="cursor-pointer!"
-          />
-        </div>
-        <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
-        <div
-          v-for="(component, index) in pageComponents"
-          :key="index"
-          @click="handleComponentSelected(component, index)"
-        >
-          <component
-            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
-            :is="component.id"
-            :property="component.property"
-          />
-        </div>
-        <!-- 手机页面编辑区域 -->
-        <el-scrollbar
-          height="100%"
-          wrap-class="editor-design-center page-prop-area"
-          view-class="phone-container"
-          :view-style="{
-            backgroundColor: pageConfigComponent.property.backgroundColor,
-            backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
-          }"
-        >
-          <draggable
-            class="page-prop-area drag-area"
-            v-model="pageComponents"
-            item-key="index"
-            :animation="200"
-            filter=".component-toolbar"
-            ghost-class="draggable-ghost"
-            :force-fallback="true"
-            group="component"
-            @change="handleComponentChange"
-          >
-            <template #item="{ element, index }">
-              <ComponentContainer
-                v-if="!element.position || element.position === 'center'"
-                :component="element"
-                :active="selectedComponentIndex === index"
-                :can-move-up="index > 0"
-                :can-move-down="index < pageComponents.length - 1"
-                @move="(direction) => handleMoveComponent(index, direction)"
-                @copy="handleCopyComponent(index)"
-                @delete="handleDeleteComponent(index)"
-                @click="handleComponentSelected(element, index)"
-              />
-            </template>
-          </draggable>
-        </el-scrollbar>
-        <!-- 手机底部导航 -->
-        <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
-          <ComponentContainer
-            :component="tabBarComponent"
-            :show-toolbar="false"
-            :active="selectedComponent?.id === tabBarComponent.id"
-            @click="handleTabBarSelected"
-          />
-        </div>
-        <!-- 固定布局的组件 操作按钮区 -->
-        <div class="fixed-component-action-group">
-          <el-tag
-            v-if="showPageConfig"
-            size="large"
-            :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
-            :type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
-            @click="handleComponentSelected(pageConfigComponent)"
-          >
-            <Icon :icon="pageConfigComponent.icon" :size="12" />
-            <span>{{ pageConfigComponent.name }}</span>
-          </el-tag>
-          <template v-for="(component, index) in pageComponents" :key="index">
-            <el-tag
-              v-if="component.position === 'fixed'"
-              size="large"
-              closable
-              :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
-              :type="selectedComponent?.uid === component.uid ? '' : 'info'"
-              @click="handleComponentSelected(component)"
-              @close="handleDeleteComponent(index)"
-            >
-              <Icon :icon="component.icon" :size="12" />
-              <span>{{ component.name }}</span>
-            </el-tag>
-          </template>
-        </div>
-      </div>
-      <!-- 右侧：属性面板（ComponentContainerProperty） -->
-      <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
-        <el-card
-          shadow="never"
-          body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
-          class="h-full"
-        >
-          <!-- 组件名称 -->
-          <template #header>
-            <div class="flex items-center gap-8px">
-              <Icon :icon="selectedComponent?.icon" color="gray" />
-              <span>{{ selectedComponent?.name }}</span>
-            </div>
-          </template>
-          <el-scrollbar
-            class="m-[calc(0px-var(--el-card-padding))]"
-            view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
-          >
-            <component
-              :key="selectedComponent?.uid || selectedComponent?.id"
-              :is="selectedComponent?.id + 'Property'"
-              v-model="selectedComponent.property"
-            />
-          </el-scrollbar>
-        </el-card>
-      </el-aside>
-    </el-container>
-  </el-container>
+		<!-- 中心区域 -->
+		<el-container class="editor-container">
+			<!-- 左侧：组件库（ComponentLibrary） -->
+			<ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0 && isShow" />
+			<!-- 中心：设计区域（ComponentContainer） -->
+			<div class="editor-center page-prop-area" @click="handlePageSelected">
+				<!-- 手机顶部 -->
+				<div class="editor-design-top">
+					<!-- 手机顶部状态栏 -->
+					<img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+					<!-- 手机顶部导航栏 -->
+					<ComponentContainer v-if="showNavigationBar" :component="navigationBarComponent"
+						:show-toolbar="false" :active="selectedComponent?.id === navigationBarComponent.id"
+						@click="handleNavigationBarSelected" class="cursor-pointer!" />
+				</div>
+				<!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
+				<div v-for="(component, index) in pageComponents" :key="index"
+					@click="handleComponentSelected(component, index)">
+					<component v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
+						:is="component.id" :property="component.property" />
+				</div>
+				<!-- 手机页面编辑区域 -->
+				<el-scrollbar height="100%" wrap-class="editor-design-center page-prop-area"
+					view-class="phone-container" :view-style="{
+						backgroundColor: pageConfigComponent.property.backgroundColor,
+						backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
+					  }">
+					<draggable class="page-prop-area drag-area" v-model="pageComponents" item-key="index"
+						:animation="200" filter=".component-toolbar" ghost-class="draggable-ghost"
+						:force-fallback="true" group="component" @change="handleComponentChange">
+						<template #item="{ element, index }">
+							<ComponentContainer v-if="!element.position || element.position === 'center'"
+								:component="element" :active="selectedComponentIndex === index" :can-move-up="index > 0"
+								:can-move-down="index < pageComponents.length - 1"
+								@move="(direction) => handleMoveComponent(index, direction)"
+								@copy="handleCopyComponent(index)" @delete="handleDeleteComponent(index)"
+								@click="handleComponentSelected(element, index)" />
+						</template>
+					</draggable>
+				</el-scrollbar>
+				<!-- 手机底部导航 -->
+				<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
+					<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
+						:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
+				</div>
+				<!-- 固定布局的组件 操作按钮区 -->
+				<div class="fixed-component-action-group">
+					<el-tag v-if="showPageConfig" size="large"
+						:effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
+						:type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
+						@click="handleComponentSelected(pageConfigComponent)">
+						<Icon :icon="pageConfigComponent.icon" :size="12" />
+						<span>{{ pageConfigComponent.name }}</span>
+					</el-tag>
+					<template v-for="(component, index) in pageComponents" :key="index">
+						<el-tag v-if="component.position === 'fixed'" size="large" closable
+							:effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
+							:type="selectedComponent?.uid === component.uid ? '' : 'info'"
+							@click="handleComponentSelected(component)" @close="handleDeleteComponent(index)">
+							<Icon :icon="component.icon" :size="12" />
+							<span>{{ component.name }}</span>
+						</el-tag>
+					</template>
+				</div>
+			</div>
+			<!-- 右侧：属性面板（ComponentContainerProperty） -->
+			<el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
+				<el-card shadow="never" body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+					class="h-full">
+					<!-- 组件名称 -->
+					<template #header>
+						<div class="flex items-center gap-8px">
+							<Icon :icon="selectedComponent?.icon" color="gray" />
+							<span>{{ selectedComponent?.name }}</span>
+						</div>
+					</template>
+					<el-scrollbar class="m-[calc(0px-var(--el-card-padding))]"
+						view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property">
+						<component :key="selectedComponent?.uid || selectedComponent?.id"
+							:is="selectedComponent?.id + 'Property'" v-model="selectedComponent.property" />
+					</el-scrollbar>
+				</el-card>
+			</el-aside>
+		</el-container>
+	</el-container>
 
-  <!-- 预览弹框 -->
-  <Dialog v-model="previewDialogVisible" title="预览" width="700">
-    <div class="flex justify-around">
-      <IFrame
-        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
-        :src="previewUrl"
-      />
-      <div class="flex flex-col">
-        <el-text>手机扫码预览</el-text>
-        <Qrcode :text="previewUrl" logo="/logo.gif" />
-      </div>
-    </div>
-  </Dialog>
+	<!-- 预览弹框 -->
+	<Dialog v-model="previewDialogVisible" title="预览" width="700">
+		<div class="flex justify-around">
+			<IFrame class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!" :src="previewUrl" />
+			<div class="flex flex-col">
+				<el-text>手机扫码预览</el-text>
+				<Qrcode :text="previewUrl" logo="/logo.gif" />
+			</div>
+		</div>
+	</Dialog>
 </template>
 <script lang="ts">
-// 注册所有的组件
-import { components } from './components/mobile/index'
-export default {
-  components: { ...components }
-}
+	// 注册所有的组件
+	import { components } from './components/mobile/index'
+	export default {
+		components: { ...components }
+	}
 </script>
 <script lang="ts" setup>
-import draggable from 'vuedraggable'
-import ComponentLibrary from './components/ComponentLibrary.vue'
-import { cloneDeep, includes } from 'lodash-es'
-import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
-import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
-import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
-import { isString } from '@/utils/is'
-import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
-import { componentConfigs } from '@/components/DiyEditor/components/mobile'
-import { array, oneOfType } from 'vue-types'
-import { propTypes } from '@/utils/propTypes'
+	import draggable from 'vuedraggable'
+	import ComponentLibrary from './components/ComponentLibrary.vue'
+	import { cloneDeep, includes } from 'lodash-es'
+	import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
+	import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
+	import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
+	import { isString } from '@/utils/is'
+	import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
+	import { componentConfigs } from '@/components/DiyEditor/components/mobile'
+	import { array, oneOfType } from 'vue-types'
+	import { propTypes } from '@/utils/propTypes'
 
-/** 页面装修详情页 */
-defineOptions({ name: 'DiyPageDetail' })
+	/** 页面装修详情页 */
+	defineOptions({ name: 'DiyPageDetail' })
 
-// 左侧组件库
-const componentLibrary = ref()
-// 页面设置组件
-const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
-// 顶部导航栏
-const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
-// 底部导航菜单
-const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
+	// 左侧组件库
+	const componentLibrary = ref()
+	// 页面设置组件
+	const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
+	// 顶部导航栏
+	const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
+	// 底部导航菜单
+	const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
 
-// 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>()
-// 选中的组件索引
-const selectedComponentIndex = ref<number>(-1)
-// 组件列表
-const pageComponents = ref<DiyComponent<any>[]>([])
-// 定义属性
-const props = defineProps({
-  // 页面配置，支持Json字符串
-  modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
-  // 标题
-  title: propTypes.string.def(''),
-  // 组件库
-  libs: array<DiyComponentLibrary>(),
-  // 是否显示顶部导航栏
-  showNavigationBar: propTypes.bool.def(true),
-  // 是否显示底部导航菜单
-  showTabBar: propTypes.bool.def(false),
-  // 是否显示页面配置
-  showPageConfig: propTypes.bool.def(true),
-  // 预览地址：提供了预览地址，才会显示预览按钮
-  previewUrl: propTypes.string.def('')
-})
+	// 选中的组件，默认选中顶部导航栏
+	const selectedComponent = ref<DiyComponent<any>>()
+	// 选中的组件索引
+	const selectedComponentIndex = ref<number>(-1)
+	// 组件列表
+	const pageComponents = ref<DiyComponent<any>[]>([])
+	// 定义属性
+	const props = defineProps({
+		// 页面配置，支持Json字符串
+		modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
+		// 标题
+		title: propTypes.string.def(''),
+		// 组件库
+		libs: array<DiyComponentLibrary>(),
+		// 是否显示顶部导航栏
+		showNavigationBar: propTypes.bool.def(true),
+		// 是否显示底部导航菜单
+		showTabBar: propTypes.bool.def(false),
+		// 是否显示页面配置
+		showPageConfig: propTypes.bool.def(true),
+		// 预览地址：提供了预览地址，才会显示预览按钮
+		previewUrl: propTypes.string.def(''),
+		//是否显示左侧导航栏
+		isShow:propTypes.bool.def(true),
+	})
 
-// 监听传入的页面配置
-// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
-watch(
-  () => props.modelValue,
-  () => {
-    const modelValue = isString(props.modelValue)
-      ? (JSON.parse(props.modelValue) as PageConfig)
-      : props.modelValue
-    pageConfigComponent.value.property = modelValue?.page || PAGE_CONFIG_COMPONENT.property
-    navigationBarComponent.value.property =
-      modelValue?.navigationBar || NAVIGATION_BAR_COMPONENT.property
-    tabBarComponent.value.property = modelValue?.tabBar || TAB_BAR_COMPONENT.property
-    // 查找对应的页面组件
-    pageComponents.value = (modelValue?.components || []).map((item) => {
-      const component = componentConfigs[item.id]
-      return { ...component, property: item.property }
-    })
-	console.log(modelValue,"pageComponents.value")
-  },
-  {
-    immediate: true
-  }
-)
+	// 监听传入的页面配置
+	// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+	watch(
+		() => props.modelValue,
+		() => {
+			const modelValue = isString(props.modelValue)
+				? (JSON.parse(props.modelValue) as PageConfig)
+				: props.modelValue
+			pageConfigComponent.value.property = modelValue?.page || PAGE_CONFIG_COMPONENT.property
+			navigationBarComponent.value.property =
+				modelValue?.navigationBar || NAVIGATION_BAR_COMPONENT.property
+			tabBarComponent.value.property = modelValue?.tabBar || TAB_BAR_COMPONENT.property
+			// 查找对应的页面组件
+			pageComponents.value = (modelValue?.components || []).map((item) => {
+				const component = componentConfigs[item.id]
+				return { ...component, property: item.property }
+			})
+			console.log(modelValue, "pageComponents.value")
+		},
+		{
+			immediate: true
+		}
+	)
 
-// 保存
-const handleSave = () => {
-  const pageConfig = {
-    page: pageConfigComponent.value.property,
-    navigationBar: navigationBarComponent.value.property,
-    tabBar: tabBarComponent.value.property,
-    components: pageComponents.value.map((component) => {
-      // 只保留APP有用的字段
-      return { id: component.id, property: component.property }
-    })
-  } as PageConfig
-  if (!props.showTabBar) {
-    delete pageConfig.tabBar
-  }
-  // 发送数据更新通知
-  const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
-  emits('update:modelValue', modelValue)
-  // 发送保存通知
-  emits('save', pageConfig)
-}
+	// 保存
+	const handleSave = () => {
+		const pageConfig = {
+			page: pageConfigComponent.value.property,
+			navigationBar: navigationBarComponent.value.property,
+			tabBar: tabBarComponent.value.property,
+			components: pageComponents.value.map((component) => {
+				// 只保留APP有用的字段
+				return { id: component.id, property: component.property }
+			})
+		} as PageConfig
+		if (!props.showTabBar) {
+			delete pageConfig.tabBar
+		}
+		// 发送数据更新通知
+		const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
+		emits('update:modelValue', modelValue)
+		// 发送保存通知
+		emits('save', pageConfig)
+	}
 
-// 处理页面选中：显示属性表单
-const handlePageSelected = (event: any) => {
-  if (!props.showPageConfig) return
+	// 处理页面选中：显示属性表单
+	const handlePageSelected = (event : any) => {
+		if (!props.showPageConfig) return
 
-  // 配置了样式 page-prop-area 的元素，才显示页面设置
-  if (includes(event?.target?.classList, 'page-prop-area')) {
-    handleComponentSelected(unref(pageConfigComponent))
-  }
-}
+		// 配置了样式 page-prop-area 的元素，才显示页面设置
+		if (includes(event?.target?.classList, 'page-prop-area')) {
+			handleComponentSelected(unref(pageConfigComponent))
+		}
+	}
 
-/**
- * 选中组件
- *
- * @param component 组件
- * @param index 组件的索引
- */
-const handleComponentSelected = (component: DiyComponent<any>, index: number = -1) => {
-  selectedComponent.value = component
-  selectedComponentIndex.value = index
-}
+	/**
+	 * 选中组件
+	 *
+	 * @param component 组件
+	 * @param index 组件的索引
+	 */
+	const handleComponentSelected = (component : DiyComponent<any>, index : number = -1) => {
+		selectedComponent.value = component
+		selectedComponentIndex.value = index
+	}
 
-// 选中顶部导航栏
-const handleNavigationBarSelected = () => {
-  handleComponentSelected(unref(navigationBarComponent))
-}
+	// 选中顶部导航栏
+	const handleNavigationBarSelected = () => {
+		handleComponentSelected(unref(navigationBarComponent))
+	}
 
-// 选中底部导航菜单
-const handleTabBarSelected = () => {
-  handleComponentSelected(unref(tabBarComponent))
-}
+	// 选中底部导航菜单
+	const handleTabBarSelected = () => {
+		handleComponentSelected(unref(tabBarComponent))
+	}
 
-// 组件变动（拖拽）
-const handleComponentChange = (dragEvent: any) => {
-  // 新增，即从组件库拖拽添加组件
-  if (dragEvent.added) {
-    const { element, newIndex } = dragEvent.added
-    handleComponentSelected(element, newIndex)
-  } else if (dragEvent.moved) {
-    // 拖拽排序
-    const { newIndex } = dragEvent.moved
-    // 保持选中
-    selectedComponentIndex.value = newIndex
-  }
-}
+	// 组件变动（拖拽）
+	const handleComponentChange = (dragEvent : any) => {
+		// 新增，即从组件库拖拽添加组件
+		if (dragEvent.added) {
+			const { element, newIndex } = dragEvent.added
+			handleComponentSelected(element, newIndex)
+		} else if (dragEvent.moved) {
+			// 拖拽排序
+			const { newIndex } = dragEvent.moved
+			// 保持选中
+			selectedComponentIndex.value = newIndex
+		}
+	}
 
-// 交换组件
-const swapComponent = (oldIndex: number, newIndex: number) => {
-  ;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
-    pageComponents.value[newIndex],
-    pageComponents.value[oldIndex]
-  ]
-  // 保持选中
-  selectedComponentIndex.value = newIndex
-}
+	// 交换组件
+	const swapComponent = (oldIndex : number, newIndex : number) => {
+		;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
+			pageComponents.value[newIndex],
+			pageComponents.value[oldIndex]
+		]
+		// 保持选中
+		selectedComponentIndex.value = newIndex
+	}
 
-/** 移动组件（上移、下移） */
-const handleMoveComponent = (index: number, direction: number) => {
-  const newIndex = index + direction
-  if (newIndex < 0 || newIndex >= pageComponents.value.length) return
+	/** 移动组件（上移、下移） */
+	const handleMoveComponent = (index : number, direction : number) => {
+		const newIndex = index + direction
+		if (newIndex < 0 || newIndex >= pageComponents.value.length) return
 
-  swapComponent(index, newIndex)
-}
+		swapComponent(index, newIndex)
+	}
 
-/** 复制组件 */
-const handleCopyComponent = (index: number) => {
-  const component = cloneDeep(pageComponents.value[index])
-  component.uid = new Date().getTime()
-  pageComponents.value.splice(index + 1, 0, component)
-}
+	/** 复制组件 */
+	const handleCopyComponent = (index : number) => {
+		const component = cloneDeep(pageComponents.value[index])
+		component.uid = new Date().getTime()
+		pageComponents.value.splice(index + 1, 0, component)
+	}
 
-/**
- * 删除组件
- * @param index 当前组件index
- */
-const handleDeleteComponent = (index: number) => {
-  // 删除组件
-  pageComponents.value.splice(index, 1)
-  if (index < pageComponents.value.length) {
-    // 1. 不是最后一个组件时，删除后选中下面的组件
-    let bottomIndex = index
-    handleComponentSelected(pageComponents.value[bottomIndex], bottomIndex)
-  } else if (pageComponents.value.length > 0) {
-    // 2. 不是第一个组件时，删除后选中上面的组件
-    let topIndex = index - 1
-    handleComponentSelected(pageComponents.value[topIndex], topIndex)
-  } else {
-    // 3. 组件全部删除之后，显示页面设置
-    handleComponentSelected(unref(pageConfigComponent))
-  }
-}
+	/**
+	 * 删除组件
+	 * @param index 当前组件index
+	 */
+	const handleDeleteComponent = (index : number) => {
+		// 删除组件
+		pageComponents.value.splice(index, 1)
+		if (index < pageComponents.value.length) {
+			// 1. 不是最后一个组件时，删除后选中下面的组件
+			let bottomIndex = index
+			handleComponentSelected(pageComponents.value[bottomIndex], bottomIndex)
+		} else if (pageComponents.value.length > 0) {
+			// 2. 不是第一个组件时，删除后选中上面的组件
+			let topIndex = index - 1
+			handleComponentSelected(pageComponents.value[topIndex], topIndex)
+		} else {
+			// 3. 组件全部删除之后，显示页面设置
+			handleComponentSelected(unref(pageConfigComponent))
+		}
+	}
 
-// 工具栏操作
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
+	// 工具栏操作
+	const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
 
-// 注入无感刷新页面函数
-const reload = inject<() => void>('reload')
-// 重置
-const handleReset = () => {
-  if (reload) reload()
-  emits('reset')
-}
+	// 注入无感刷新页面函数
+	const reload = inject<() => void>('reload')
+	// 重置
+	const handleReset = () => {
+		if (reload) reload()
+		emits('reset')
+	}
 
-// 预览
-const previewDialogVisible = ref(false)
-const handlePreview = () => {
-  previewDialogVisible.value = true
-  emits('preview')
-}
+	// 预览
+	const previewDialogVisible = ref(false)
+	const handlePreview = () => {
+		previewDialogVisible.value = true
+		emits('preview')
+	}
 
-// 设置默认选中的组件
-const setDefaultSelectedComponent = () => {
-  if (props.showPageConfig) {
-    selectedComponent.value = unref(pageConfigComponent)
-  } else if (props.showNavigationBar) {
-    selectedComponent.value = unref(navigationBarComponent)
-  } else if (props.showTabBar) {
-    selectedComponent.value = unref(tabBarComponent)
-  }
-}
+	// 设置默认选中的组件
+	const setDefaultSelectedComponent = () => {
+		if (props.showPageConfig) {
+			selectedComponent.value = unref(pageConfigComponent)
+		} else if (props.showNavigationBar) {
+			selectedComponent.value = unref(navigationBarComponent)
+		} else if (props.showTabBar) {
+			selectedComponent.value = unref(tabBarComponent)
+		}
+	}
 
-watch(
-  () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
-  () => setDefaultSelectedComponent()
-)
+	watch(
+		() => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
+		() => setDefaultSelectedComponent()
+	)
 
-onMounted(() => setDefaultSelectedComponent())
+	onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
-/* 手机宽度 */
-$phone-width: 375px;
-$toolbar-height: 42px;
+	/* 手机宽度 */
+	$phone-width: 375px;
+	$toolbar-height: 42px;
 
-/* 根节点样式 */
-.editor {
-  display: flex;
-  height: 100%;
-  margin: calc(0px - var(--app-content-padding));
-  flex-direction: column;
+	/* 根节点样式 */
+	.editor {
+		display: flex;
+		height: 100%;
+		margin: calc(0px - var(--app-content-padding));
+		flex-direction: column;
 
-  /* 顶部：工具栏 */
-  .editor-header {
-    display: flex;
-    height: $toolbar-height;
-    padding: 0;
-    background-color: var(--el-bg-color);
-    border-bottom: solid 1px var(--el-border-color);
-    align-items: center;
-    justify-content: space-between;
+		/* 顶部：工具栏 */
+		.editor-header {
+			display: flex;
+			height: $toolbar-height;
+			padding: 0;
+			background-color: var(--el-bg-color);
+			border-bottom: solid 1px var(--el-border-color);
+			align-items: center;
+			justify-content: space-between;
 
-    /* 工具栏：右侧按钮 */
-    .header-right {
-      height: 100%;
+			/* 工具栏：右侧按钮 */
+			.header-right {
+				height: 100%;
 
-      .el-button {
-        height: 100%;
-      }
-    }
+				.el-button {
+					height: 100%;
+				}
+			}
 
-    /* 隐藏工具栏按钮的边框 */
-    :deep(.el-radio-button__inner),
-    :deep(.el-button) {
-      border-top: none !important;
-      border-bottom: none !important;
-      border-radius: 0 !important;
-    }
-  }
+			/* 隐藏工具栏按钮的边框 */
+			:deep(.el-radio-button__inner),
+			:deep(.el-button) {
+				border-top: none !important;
+				border-bottom: none !important;
+				border-radius: 0 !important;
+			}
+		}
 
-  /* 中心操作区 */
-  .editor-container {
-    height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
-        $toolbar-height
-    );
+		/* 中心操作区 */
+		.editor-container {
+			height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - $toolbar-height );
 
-    /* 右侧属性面板 */
-    .editor-right {
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-      flex-shrink: 0;
+			/* 右侧属性面板 */
+			.editor-right {
+				overflow: hidden;
+				box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
+				flex-shrink: 0;
 
-      /* 属性面板顶部：减少内边距 */
-      :deep(.el-card__header) {
-        padding: 8px 16px;
-      }
+				/* 属性面板顶部：减少内边距 */
+				:deep(.el-card__header) {
+					padding: 8px 16px;
+				}
 
-      /* 属性面板分组 */
-      :deep(.property-group) {
-        margin: 0 -20px;
+				/* 属性面板分组 */
+				:deep(.property-group) {
+					margin: 0 -20px;
 
-        &.el-card {
-          border: none;
-        }
+					&.el-card {
+						border: none;
+					}
 
-        /* 属性分组名称 */
-        .el-card__header {
-          padding: 8px 32px;
-          background: var(--el-bg-color-page);
-          border: none;
-        }
+					/* 属性分组名称 */
+					.el-card__header {
+						padding: 8px 32px;
+						background: var(--el-bg-color-page);
+						border: none;
+					}
 
-        .el-card__body {
-          border: none;
-        }
-      }
-    }
+					.el-card__body {
+						border: none;
+					}
+				}
+			}
 
-    /* 中心区域 */
-    .editor-center {
-      position: relative;
-      display: flex;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--app-content-bg-color);
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
+			/* 中心区域 */
+			.editor-center {
+				position: relative;
+				display: flex;
+				width: 100%;
+				margin: 16px 0 0;
+				overflow: hidden;
+				background-color: var(--app-content-bg-color);
+				flex: 1 1 0;
+				flex-direction: column;
+				justify-content: center;
 
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        width: $phone-width;
-        margin: 0 auto;
-        flex-direction: column;
+				/* 手机顶部 */
+				.editor-design-top {
+					display: flex;
+					width: $phone-width;
+					margin: 0 auto;
+					flex-direction: column;
 
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
+					/* 手机顶部状态栏 */
+					.status-bar {
+						width: $phone-width;
+						height: 20px;
+						background-color: #fff;
+					}
+				}
 
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
+				/* 手机底部导航 */
+				.editor-design-bottom {
+					width: $phone-width;
+					margin: 0 auto;
+				}
 
-      /* 手机页面编辑区域 */
-      :deep(.editor-design-center) {
-        width: 100%;
+				/* 手机页面编辑区域 */
+				:deep(.editor-design-center) {
+					width: 100%;
 
-        /* 主体内容 */
-        .phone-container {
-          position: relative;
-          width: $phone-width;
-          height: 100%;
-          margin: 0 auto;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
+					/* 主体内容 */
+					.phone-container {
+						position: relative;
+						width: $phone-width;
+						height: 100%;
+						margin: 0 auto;
+						background-repeat: no-repeat;
+						background-size: 100% 100%;
 
-          .drag-area {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
+						.drag-area {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
 
-      /* 固定布局的组件 操作按钮区 */
-      .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
+				/* 固定布局的组件 操作按钮区 */
+				.fixed-component-action-group {
+					position: absolute;
+					top: 0;
+					right: 16px;
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
 
-        :deep(.el-tag) {
-          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-          border: none;
-          .el-tag__content {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
+					:deep(.el-tag) {
+						box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+						border: none;
 
-            .el-icon {
-              margin-right: 4px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+						.el-tag__content {
+							width: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: flex-start;
+
+							.el-icon {
+								margin-right: 4px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
index 42502fa..54b0404 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
@@ -2,19 +2,19 @@
 	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
 		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
 		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
-		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :isShow="false">
 		<template #toolBarLeft>
 			<!-- <el-radio-group
-        v-model="selectedTemplateItem"
-        class="h-full!"
-        @change="handleTemplateItemChange"
-      >
-        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
-          <el-radio-button :label="index">
-            <Icon :icon="item.icon" :size="24" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group> -->
+				v-model="selectedTemplateItem"
+				class="h-full!"
+				@change="handleTemplateItemChange"
+			  >
+				<el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+				  <el-radio-button :label="index">
+					<Icon :icon="item.icon" :size="24" />
+				  </el-radio-button>
+				</el-tooltip>
+			  </el-radio-group> -->
 		</template>
 	</DiyEditor>
 </template>
@@ -147,7 +147,7 @@
 		}
 	}
 	//#endregion
-		
+
 
 	onMounted(async () => {
 		resetForm()
@@ -167,7 +167,7 @@
 		console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
 
 	})
-	
+
 	// watch(() => route.path, (newPath, oldPath) => {
 	// console.log(newPath,'newPathnewPath');
 	// // handleTemplateItemChange()