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 @@
组件放置区域
- - {{ element.name }} + +
+ +
+ {{ element.name }}
@@ -142,8 +145,9 @@ const handleCloneComponent = (component: DiyComponent) => { .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 @@ - + \ 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 @@ + .el-tag__content { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + + .el-icon { + margin-right: 4px; + } + } + } + } + } + } + } + \ 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 @@ + :preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :isShow="false"> @@ -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()