yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue

@@ -1,12 +1,9 @@
 <template>
 	<div class="min-h-42px flex flex-col">
-    <div
+		<div v-for="(item, index) in property.list" :key="index"
-      v-for="(item, index) in property.list"
+			class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
-      :key="index"
-      class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
-    >
 			<div class="flex flex-1 flex-row items-center gap-8px">
-        <el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
+				<el-image v-if="item.iconUrl" class="wh" :src="item.iconUrl" />
 				<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
 			</div>
 			<div class="item-center flex flex-row justify-center gap-4px">
@@ -28,4 +25,21 @@ defineProps<{ property: MenuListProperty }>()
 	.item+.item {
 		border-top: 1px solid #eee;
 	}
+
+	.wh {
+		width: 77px;
+		height: 20px;
+		position: relative;
+		padding-right: 10px;
+		&::after{
+			position:absolute;
+			content:'';
+			top:50%;
+			right:0;
+			width:1px;
+			height:57%;
+			border-right:1px solid #ababab;
+			transform: translateY(-50%);
+		}
+	}
 </style>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue

@@ -1,46 +1,60 @@
 <template>
-  <el-carousel
+	<!-- <el-carousel :height="`${carouselHeight}px`" :autoplay="false" arrow="hover" indicator-position="outside">
-    :height="`${carouselHeight}px`"
-    :autoplay="false"
-    arrow="hover"
-    indicator-position="outside"
-  >
 		<el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
 			<div class="flex flex-row flex-wrap">
-        <div
+				<div v-for="(item, index) in page" :key="index"
-          v-for="(item, index) in page"
-          :key="index"
 					class="relative flex flex-col items-center justify-center"
-          :style="{ width: columnWidth, height: `${rowHeight}px` }"
+					:style="{ width: columnWidth, height: `${rowHeight}px` }"> -->
-        >
 					<!-- 图标 + 角标 -->
-          <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
+					<!-- <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`"> -->
 						<!-- 右上角角标 -->
-            <span
+						<!-- <span v-if="item.badge?.show"
-              v-if="item.badge?.show"
 							class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
-              :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
+							:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
-            >
 							{{ item.badge.text }}
 						</span>
 						<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
-          </div>
+					</div> -->
 					<!-- 标题 -->
-          <span
+					<!-- <span v-if="property.layout === 'iconText'" class="text-12px" :style="{
-            v-if="property.layout === 'iconText'"
-            class="text-12px"
-            :style="{
 					  color: item.titleColor,
 					  height: `${TITLE_HEIGHT}px`,
 					  lineHeight: `${TITLE_HEIGHT}px`
-            }"
+					}">
-          >
 						{{ item.title }}
 					</span>
 				</div>
 			</div>
 		</el-carousel-item>
-  </el-carousel>
+	</el-carousel> -->
+	<view class="title">
+		我的服务
+	</view>
+	<view class="newList">
+		
+		<view class="new_menu" v-for="(page, pageIndex) in pages" :key="pageIndex">
+			<view v-for="(item, index) in page" :key="index" class="new_items" :style="{ width: columnWidth}">
+				<!-- 图标 + 角标 -->
+				<div class="relative" :class="`h-24px w-24px`">
+					<!-- 右上角角标 -->
+					<span v-if="item.badge?.show"
+						class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
+						:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
+						{{ item.badge.text }}
+					</span>
+					<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
+				</div>
+				<!-- 标题 -->
+				<span v-if="property.layout === 'iconText'" class="text-12px new_title" :style="{
+				  color: item.titleColor,
+				  height: `${TITLE_HEIGHT}px`,
+				  lineHeight: `${TITLE_HEIGHT}px`
+				}">
+					{{ item.title }}
+				</span>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup lang="ts">
@@ -98,11 +112,38 @@ watch(
 </script>
 
 <style lang="scss">
+	.title {
+		padding: 10px 20px;
+		height: 20px;
+		line-height: 20px;
+		font-size: 12px;
+		font-weight: 600;
+		// border-bottom: 1px solid #dcdcdc;
+		margin-bottom:20px;
+	}
+	.new_menu {
+		display: flex;
+		flex-wrap: wrap;
+
+		.new_items {
+			width: 25%;
+			margin-bottom: 20px;
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
+			.new_title{
+				width:100%;
+				text-align: center;
+			}
+		}
+	}
+
 	// 重写指示器样式，与 APP 保持一致
 	:root {
 		.el-carousel__indicator {
 			padding-top: 0;
 			padding-bottom: 0;
+
 			.el-carousel__button {
 				--el-carousel-indicator-height: 6px;
 				--el-carousel-indicator-width: 6px;
@@ -110,6 +151,7 @@ watch(
 				border-radius: 6px;
 			}
 		}
+
 		.el-carousel__indicator.is-active {
 			.el-carousel__button {
 				--el-carousel-indicator-width: 12px;

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue

@@ -1,7 +1,27 @@
 <template>
-  <div class="min-h-30px" v-html="article?.content"></div>
+  <div class="min-h-30px" >
+	  <view class="floxt">
+	  	<view class="addClass" v-for="(item, index) in article?.list" :key="index" >
+	  		<view class="image">
+	  			<img
+	  				:src="item.picUrl"
+	  				alt="" />
+	  		</view>
+	  		<view class="text">
+	  			<view class="top">
+	  				{{item.title}}
+	  			</view>
+	  			<view class="bottom">
+	  				<!-- {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }} -->
+					{{ formatDate(item.createTime) }}
+	  			</view>
+	  		</view>
+	  	</view>
+	  </view>
+  </div>
 </template>
 <script setup lang="ts">
+	import { formatDate } from '@/utils/formatTime'
 import { PromotionArticleProperty } from './config'
 import * as ArticleApi from '@/api/mall/promotion/article/index'
 
@@ -15,7 +35,9 @@ watch(
   () => props.property.id,
   async () => {
     if (props.property.id) {
-      article.value = await ArticleApi.getArticle(props.property.id)
+      // article.value = await ArticleApi.getArticle(props.property.id)
+      article.value = await ArticleApi.getArticlePage()
+	  console.log(article.value,"article.value");
     }
   },
   {
@@ -24,4 +46,44 @@ watch(
 )
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	.floxt {
+		width: 100%;
+		.addClass {
+			background:white;
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			margin:8px 0;
+			// padding: 40px;
+			// padding-right: 0;
+			// height: 200px;
+			.image {
+				width: 130px;
+				height: 81px;
+				margin-right: 18px;
+				padding:8px 8px;
+				display:flex;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+	
+			.text {
+				display: flex;
+				width: 100%;
+				// text-align: center;
+				padding:20px 20px;
+				flex:1;
+				flex-direction: column;
+				justify-content: space-between;
+				.bottom{
+					color: #999;
+					font-size: 12px;
+				}
+				
+			}
+		}
+	}
+</style>

yudao-admin-vue3/src/components/DiyEditor/util.ts

@@ -135,11 +135,11 @@ export const PAGE_LIBS = [
     ]
   },
   { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
-  {
+  // {
-    name: '用户组件',
+  //   name: '用户组件',
-    extended: true,
+  //   extended: true,
-    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
+  //   components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
-  },
+  // },
   {
     name: '营销组件',
     extended: true,