首页更新为自己绘制界面

mock/json/diy_res.json

@@ -1,5 +1,5 @@
 {
-    "name": "蓝色主题模板（官方演示勿动！）",
+    "name": "蓝色主题模板",
     "value": {
         "1666235374470008": {
             "name": "liveBroadcast",
@@ -313,116 +313,6 @@
             },
             "id": "id1665385357481001"
         },
-        "1666235374470002": {
-            "name": "news",
-            "timestamp": "1666235374470002",
-            "setUp": {
-                "tabVal": 1
-            },
-            "txtStyle": {
-                "title": "文本位置",
-                "name": "txtStyle",
-                "type": 0,
-                "list": [
-                    {
-                        "val": "居左",
-                        "icon": "icondoc_left",
-                        "style": "left"
-                    },
-                    {
-                        "val": "居中",
-                        "icon": "icondoc_center",
-                        "style": "center"
-                    },
-                    {
-                        "val": "居右",
-                        "icon": "icondoc_right",
-                        "style": "right"
-                    }
-                ]
-            },
-            "bgColor": {
-                "title": "背景颜色",
-                "default": [
-                    {
-                        "item": "#fff"
-                    }
-                ],
-                "color": [
-                    {
-                        "item": "#fff"
-                    }
-                ]
-            },
-            "txtColor": {
-                "title": "文字颜色",
-                "default": [
-                    {
-                        "item": "#333"
-                    }
-                ],
-                "color": [
-                    {
-                        "item": "#333"
-                    }
-                ]
-            },
-            "listConfig": {
-                "title": "最多可添加10个版块；鼠标拖拽左侧圆点可调整版块顺序",
-                "max": 10,
-                "list": [
-                    {
-                        "chiild": [
-                            {
-                                "title": "标题",
-                                "val": "标准版4.5正式发布，大家快来体验",
-                                "max": 30,
-                                "pla": "选填，不超过30个字",
-                                "empty": true
-                            },
-                            {
-                                "title": "链接",
-                                "val": "/pages/extension/news_details/index?id=128",
-                                "max": 200,
-                                "pla": "请输入连接"
-                            }
-                        ]
-                    }
-                ],
-                "tabCur": 0
-            },
-            "bgStyle": {
-                "title": "背景样式",
-                "name": "bgStyle",
-                "type": 1,
-                "list": [
-                    {
-                        "val": "直角",
-                        "icon": "iconPic_square"
-                    },
-                    {
-                        "val": "圆角",
-                        "icon": "iconPic_fillet"
-                    }
-                ]
-            },
-            "prConfig": {
-                "title": "背景边距",
-                "val": 10,
-                "min": 0
-            },
-            "mbConfig": {
-                "title": "页面间距",
-                "val": 10,
-                "min": 0
-            },
-            "logoConfig": {
-                "header": "图标设置",
-                "title": "最多可添加1张图片，建议宽度130 * 36px",
-                "url": "https://qiniu.crmeb.net/attach/2021/11/6d4fe202111181229083421.png"
-            },
-            "id": "id1665385357481002"
-        },
         "1666235374470003": {
             "name": "menus",
             "timestamp": "1666235374470003",
@@ -466,7 +356,7 @@
             "menuStyle": {
                 "title": "图标样式",
                 "name": "menuStyle",
-                "type": 1,
+                "type": 0,
                 "list": [
                     {
                         "val": "方形",
@@ -481,7 +371,7 @@
             "number": {
                 "title": "显示个数",
                 "name": "number",
-                "type": 2,
+                "type": 0,
                 "list": [
                     {
                         "val": "3个",
@@ -545,7 +435,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "预约自提",
+                                "value": "秒杀专区",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -562,7 +452,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "领优惠券",
+                                "value": "红包商城",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -579,7 +469,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "特价限购",
+                                "value": "积分专区",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -596,7 +486,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "新闻资讯",
+                                "value": "创客专区",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -613,7 +503,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "助力砍价",
+                                "value": "城市合伙人",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -630,7 +520,7 @@
                         "info": [
                             {
                                 "title": "标题",
-                                "value": "限时秒杀",
+                                "value": "抵扣专区",
                                 "tips": "选填，不超过4个字",
                                 "max": 4
                             },
@@ -641,74 +531,6 @@
                                 "max": 100
                             }
                         ]
-                    },
-                    {
-                        "img": "https://qiniu.crmeb.net/attach/2021/09/34f81202109101106357549.png",
-                        "info": [
-                            {
-                                "title": "标题",
-                                "value": "积分商城",
-                                "tips": "选填，不超过4个字",
-                                "max": 4
-                            },
-                            {
-                                "title": "链接",
-                                "value": "/pages/points_mall/index",
-                                "tips": "请输入链接",
-                                "max": 100
-                            }
-                        ]
-                    },
-                    {
-                        "img": "https://demo26.crmeb.net/uploads/attach/2022/09/20220916/06c63d52fc6772917540d47076606680.png",
-                        "info": [
-                            {
-                                "title": "标题",
-                                "value": "成团返佣",
-                                "tips": "选填，不超过4个字",
-                                "max": 4
-                            },
-                            {
-                                "title": "链接",
-                                "value": "/pages/activity/goods_combination_details/index?id=23",
-                                "tips": "请输入链接",
-                                "max": 100
-                            }
-                        ]
-                    },
-                    {
-                        "img": "https://demo26.crmeb.net/uploads/attach/2022/09/20220916/e31cdcb6fa7660aee45912ef572cc114.png",
-                        "info": [
-                            {
-                                "title": "标题",
-                                "value": "用户足迹",
-                                "tips": "选填，不超过4个字",
-                                "max": 4
-                            },
-                            {
-                                "title": "链接",
-                                "value": "/pages/users/visit_list/index",
-                                "tips": "请输入链接",
-                                "max": 100
-                            }
-                        ]
-                    },
-                    {
-                        "img": "https://qiniu.crmeb.net/attach/2021/09/f4598202109101106358762.png",
-                        "info": [
-                            {
-                                "title": "标题",
-                                "value": "幸运转盘",
-                                "tips": "选填，不超过4个字",
-                                "max": 4
-                            },
-                            {
-                                "title": "链接",
-                                "value": "/pages/goods/lottery/grids/index?type=1",
-                                "tips": "请输入链接",
-                                "max": 100
-                            }
-                        ]
                     }
                 ]
             },
@@ -761,6 +583,133 @@
             },
             "id": "id1665385357481003"
         },
+        "1666235374470002": {
+            "name": "news",
+            "timestamp": "1666235374470002",
+            "setUp": {
+                "tabVal": 1
+            },
+            "txtStyle": {
+                "title": "文本位置",
+                "name": "txtStyle",
+                "type": 0,
+                "list": [
+                    {
+                        "val": "居左",
+                        "icon": "icondoc_left",
+                        "style": "left"
+                    },
+                    {
+                        "val": "居中",
+                        "icon": "icondoc_center",
+                        "style": "center"
+                    },
+                    {
+                        "val": "居右",
+                        "icon": "icondoc_right",
+                        "style": "right"
+                    }
+                ]
+            },
+            "bgColor": {
+                "title": "背景颜色",
+                "default": [
+                    {
+                        "item": "#fff"
+                    }
+                ],
+                "color": [
+                    {
+                        "item": "#fff"
+                    }
+                ]
+            },
+            "txtColor": {
+                "title": "文字颜色",
+                "default": [
+                    {
+                        "item": "#333"
+                    }
+                ],
+                "color": [
+                    {
+                        "item": "#333"
+                    }
+                ]
+            },
+            "listConfig": {
+                "title": "最多可添加10个版块；鼠标拖拽左侧圆点可调整版块顺序",
+                "max": 10,
+                "list": [
+                    {
+                        "chiild": [
+                            {
+                                "title": "标题",
+                                "val": "标准版4.5正式发布，大家快来体验",
+                                "max": 30,
+                                "pla": "选填，不超过30个字",
+                                "empty": true
+                            },
+                            {
+                                "title": "链接",
+                                "val": "/pages/extension/news_details/index?id=128",
+                                "max": 200,
+                                "pla": "请输入连接"
+                            }
+                        ]
+                    },
+                    {
+                        "chiild": [
+                            {
+                                "title": "标题",
+                                "val": "标准版4.8正式发布，大家快来体验",
+                                "max": 30,
+                                "pla": "选填，不超过30个字",
+                                "empty": true
+                            },
+                            {
+                                "title": "链接",
+                                "val": "/pages/extension/news_details/index?id=128",
+                                "max": 200,
+                                "pla": "请输入连接"
+                            }
+                        ]
+                    }
+                ],
+                "tabCur": 0
+            },
+            "bgStyle": {
+                "title": "背景样式",
+                "name": "bgStyle",
+                "type": 1,
+                "list": [
+                    {
+                        "val": "直角",
+                        "icon": "iconPic_square"
+                    },
+                    {
+                        "val": "圆角",
+                        "icon": "iconPic_fillet"
+                    }
+                ]
+            },
+            "prConfig": {
+                "title": "背景边距",
+                "val": 10,
+                "min": 0
+            },
+            "mbConfig": {
+                "title": "页面间距",
+                "val": 10,
+                "min": 0
+            },
+            "logoConfig": {
+                "header": "图标设置",
+                "title": "最多可添加1张图片，建议宽度130 * 36px",
+                "url": "https://qiniu.crmeb.net/attach/2021/11/6d4fe202111181229083421.png"
+            },
+            "id": "id1665385357481002"
+        },
         "1666235374470004": {
             "name": "activeParty",
             "timestamp": "1666235374470004",

pages/index/diy/components/news.vue

@@ -1,7 +1,6 @@
 <template>
 	<view v-show="!isSortType">
 		<view class='news acea-row row-middle' :class="{pageOn:bgStyle===1}" v-if="itemNew.length" :style="'margin:0 '+prConfig*2+'rpx;margin-top:'+mbConfig*2+'rpx;color:'+txtColor+';background-color:'+bgColor+';'">
-			<!-- ../../../static/images/news.png -->
 			<view class='pictrue skeleton-rect'>
 				<image :src='logoConfig'></image>
 			</view>

pages/index/diy/index.vue

@@ -17,8 +17,8 @@
 
 				<!-- #ifdef MP || APP-PLUS -->
 				<block v-for="(item, index) in styleConfig" :key="index">
-					<!-- <activeParty v-if="item.name == 'activeParty'" :dataConfig="item" :isSortType="isSortType">
-					</activeParty> -->
+					<activeParty v-if="item.name == 'activeParty'" :dataConfig="item" :isSortType="isSortType">
+					</activeParty>
 					<!-- <articleList v-if="item.name == 'articleList'" :dataConfig="item" :isSortType="isSortType">
 					</articleList> -->
 					<!-- <bargain v-if="item.name == 'bargain'" :dataConfig="item" @changeBarg="changeBarg"

pages/index/diy/index_mall.vue

@@ -0,0 +1,580 @@
+<template>
+	<view>
+		<headerSerch :dataConfig="headItem"></headerSerch>
+		<view class="header-group">
+			<view class="tabs">
+				<u-tabs :list="navigationList" @click="clickNav" lineColor="#FFD373" :inactiveStyle="{color: '#FFF'}"
+					:activeStyle="{color: '#FFD373',fontWeight: 'bold'}"></u-tabs>
+			</view>
+		</view>
+		<!-- 内容切换 -->
+		<view class="tab-content" v-if="current == 0">
+			<!-- 轮播 -->
+			<view class="swiper-group">
+				<u-swiper :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
+			</view>
+			<!-- 宫格 -->
+			<view class="grid-box">
+				<view class="grid-group">
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区</text>
+					</view>
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区2</text>
+					</view>
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区</text>
+					</view>
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区</text>
+					</view>
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区</text>
+					</view>
+					<view class="grid-item">
+						<image src="../../../static/miaosha2x.png" mode="aspectFit"></image>
+						<text>秒杀专区</text>
+					</view>
+				</view>
+			</view>
+			<!-- 通知 -->
+			<view class="notice">
+				<u-notice-bar :text="notice" direction="column" duration="3000" fontSize="28"></u-notice-bar>
+			</view>
+			<!-- 爆款专区 -->
+			<view class="sale-group">
+				<view class="sale-content">
+					<view class="title">爆款专区 <view class="more">更多 <image src="../../static/arrow-r@2x.png"
+								mode="aspectFit"></image>
+						</view>
+					</view>
+					<view class="goods-scroll">
+						<scroll-view scroll-x="true">
+							<view class="goods-item">
+								<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+								<view class="goods-name">这里是商品名称这里是商品名称这里是商品名称</view>
+								<view class="tags">赠送20.54红积分</view>
+								<view class="price">¥10.44</view>
+							</view>
+							<view class="goods-item">
+								<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+								<view class="goods-name">这里是商品名称这里是商品名称这里是商品名称</view>
+								<view class="tags">赠送20.54红积分</view>
+								<view class="price">¥10.44</view>
+							</view>
+							<view class="goods-item">
+								<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+								<view class="goods-name">这里是商品名称这里是商品名称这里是商品名称</view>
+								<view class="tags">赠送20.54红积分</view>
+								<view class="price">¥10.44</view>
+							</view>
+
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+			<!-- 商品列表 -->
+			<view class="goods-list">
+				<view class="title">
+					<view class="line"></view>
+					商品推荐
+					<view class="line"></view>
+				</view>
+				<view class="list-group">
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="tab-content" v-if="current == 1">
+			<!-- 轮播 -->
+			<view class="swiper-group">
+				<u-swiper :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
+			</view>
+
+			<!-- 商品列表 -->
+			<view class="tabs">
+				<u-tabs :list="navigationList2" @click="" lineColor="#EB4C63" :inactiveStyle="{color: '#333'}"
+					:activeStyle="{color: '#EB4C63',fontWeight: 'bold'}"></u-tabs>
+			</view>
+			<view class="goods-list">
+				<view class="list-group">
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+					<view class="list-item-content">
+						<view class="list-item">
+							<image src="../../../static/goods@2x.png" mode="widthFix"></image>
+							<view class="goods-name">这里是商品名称这里是商品这里是商品名称这里是商品名称这里是商品名称名称这里是商品名称</view>
+							<view class="tags">赠送20.54红积分</view>
+							<view class="price">¥10.44</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import headerSerch from './components/headerSerch';
+export default {
+	components:{
+		headerSerch
+	},
+	data() {
+		return {
+			headItem: {
+				"name": "headerSerch",
+				"timestamp": "1666235374470000",
+				"setUp": {
+					"tabVal": 0
+				},
+				"bgColor": {
+					"title": "背景颜色(渐变)",
+					"name": "bgColor",
+					"default": [
+						{
+							"item": "#F62C2C"
+						},
+						{
+							"item": "#F96E29"
+						}
+					],
+					"color": [
+						{
+							"item": "rgba(242,16,78,1)"
+						},
+						{
+							"item": "rgba(210,41,87,1)"
+						}
+					]
+				},
+				"boxStyle": {
+					"title": "边框样式",
+					"name": "boxStyle",
+					"type": 0,
+					"list": [
+						{
+							"val": "圆角",
+							"icon": "iconPic_fillet"
+						},
+						{
+							"val": "直角",
+							"icon": "iconPic_square"
+						}
+					]
+				},
+				"txtStyle": {
+					"title": "文本位置",
+					"name": "txtStyle",
+					"type": 1,
+					"list": [
+						{
+							"val": "居左",
+							"icon": "icondoc_left"
+						},
+						{
+							"val": "居中",
+							"icon": "icondoc_center"
+						}
+					]
+				},
+				"prConfig": {
+					"title": "背景边距",
+					"val": 8,
+					"min": 0
+				},
+				"mbConfig": {
+					"title": "页面间距",
+					"val": 0,
+					"min": 0
+				},
+				"hotWords": {
+					"list": [
+						{
+							"val": ""
+						}
+					]
+				},
+				"logoConfig": {
+					"type": 1,
+					"header": "设置logo",
+					"title": "",
+					"url": "https://demo26.crmeb.net/uploads/attach/2022/10/20221009/7436ee5680bc5d67c46a6017939475e5.png"
+				},
+				"id": "id1665385357481000"
+			},
+			current: 0,
+			notice: ['uView UI众多组件覆盖开发过程的各个需求', '组件功能丰富，多端兼容。让您快速集成，开箱即用'],
+			swiperList: [
+				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+			],
+			navigationList: [{
+				name: '推荐',
+			}, {
+				name: '箱包皮具'
+			}, {
+				name: '家具家私'
+			}, {
+				name: '美妆护肤'
+			}, {
+				name: '日用百货'
+			}, {
+				name: '运动户外'
+			}, {
+				name: '珠宝首饰'
+			}, {
+				name: '家纺家饰'
+			}],
+			navigationList2: [{
+				name: 'Tab1',
+			}, {
+				name: 'Tab2'
+			}, {
+				name: 'Tab2'
+			}, {
+				name: 'Tab3'
+			}, {
+				name: 'Tab4'
+			}, {
+				name: 'Tab5'
+			}, {
+				name: 'Tab6'
+			}, {
+				name: 'Tab7'
+			}],
+		}
+	},
+	onLoad() {
+
+	},
+	methods: {
+		clickNav(e) {
+			console.log(e)
+			this.current = e.index
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+	background-color: #ee4040;
+}
+
+.header-group {
+	background-color: #EB4C63;
+
+	.search-group {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 30rpx 30rpx 10rpx 30rpx;
+
+
+		.logo {
+			width: 138rpx;
+			height: 46rpx;
+		}
+
+		.message {
+			line-height: 1;
+
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+		}
+
+		.search {
+			flex: 1;
+			padding: 0 30rpx;
+
+			.searchBox {
+				padding: 0 30rpx;
+				display: flex;
+				align-items: center;
+				background-color: #FFF;
+				border-radius: 100rpx;
+				height: 60rpx;
+
+				image {
+					width: 28rpx;
+					height: 28rpx;
+					padding-right: 20rpx;
+				}
+
+				text {
+					font-size: 24rpx;
+					color: #999;
+				}
+
+			}
+		}
+	}
+
+	.tabs {
+		padding: 0 20rpx;
+	}
+}
+
+.tab-content {
+	.swiper-group {
+		padding: 20rpx 30rpx 10rpx 30rpx;
+		background-image: linear-gradient(to bottom, #EB4C63, #F9F9F9);
+	}
+
+	.grid-box {
+		padding: 10rpx 30rpx 20rpx 30rpx;
+
+		.grid-group {
+			padding: 20rpx 0;
+			border-radius: 20rpx;
+			background-color: #FFF;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+
+			.grid-item {
+				width: 33.333%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin: 10rpx 0;
+
+				image {
+					width: 98rpx;
+					height: 98rpx;
+				}
+
+				text {
+					font-size: 24rpx;
+					color: #666;
+					margin-top: 10rpx;
+				}
+			}
+
+		}
+	}
+
+	.notice {
+		padding: 0 30rpx;
+	}
+
+	.sale-group {
+		padding: 20rpx 30rpx;
+
+		.sale-content {
+			border-radius: 20rpx;
+			background-image: linear-gradient(45deg, #EB4C63, #FFA470);
+			padding: 20rpx 0;
+
+			.title {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				color: #FFF;
+				font-weight: bold;
+				padding: 0 30rpx;
+
+				.more {
+					display: flex;
+					align-items: center;
+					font-size: 24rpx;
+					font-weight: normal;
+
+					image {
+						width: 24rpx;
+						height: 24rpx;
+					}
+				}
+			}
+
+			.goods-scroll {
+				white-space: nowrap;
+				padding: 20rpx 15rpx 0 15rpx;
+
+				.goods-item {
+					display: inline-block;
+					width: 240rpx;
+					padding: 15rpx;
+					margin: 0 10rpx;
+					background-color: #FFF;
+					border-radius: 10rpx;
+
+					image {
+						width: 210rpx;
+						height: 210rpx;
+					}
+
+					.goods-name {
+						font-size: 26rpx;
+						color: #333;
+						width: 240rpx;
+						margin: 6rpx 0;
+						word-break: break-all;
+						white-space: pre-wrap;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						line-height: 1.2;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+					}
+
+					.tags {
+						display: inline-block;
+						font-size: 20rpx;
+						padding: 6rpx;
+						background-color: #FCE9EC;
+						color: #EB4C63;
+						margin: 6rpx 0;
+					}
+
+					.price {
+						font-size: 32rpx;
+						font-weight: bold;
+						color: #EB4C63;
+					}
+				}
+
+
+			}
+		}
+	}
+
+	.goods-list {
+		.title {
+			text-align: center;
+			color: #333;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			font-weight: bold;
+
+			.line {
+				display: inline-block;
+				width: 200rpx;
+				height: 2rpx;
+				margin: 0 30rpx;
+				background-color: #FFA470;
+			}
+		}
+
+		.list-group {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			padding: 15rpx;
+			box-sizing: border-box;
+
+			.list-item-content {
+				width: 50%;
+				padding: 15rpx;
+				box-sizing: border-box;
+
+				.list-item {
+					padding: 15rpx;
+					background-color: #FFF;
+					border-radius: 10rpx;
+
+					image {
+						width: 100%;
+					}
+
+					.goods-name {
+						font-size: 28rpx;
+						color: #333;
+						margin: 6rpx 0;
+						word-break: break-all;
+						white-space: pre-wrap;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						line-height: 1.4;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+					}
+
+					.tags {
+						display: inline-block;
+						font-size: 20rpx;
+						padding: 6rpx;
+						background-color: #FCE9EC;
+						color: #EB4C63;
+						margin: 6rpx 0;
+					}
+
+					.price {
+						font-size: 32rpx;
+						font-weight: bold;
+						color: #EB4C63;
+					}
+				}
+			}
+		}
+	}
+
+}
+</style>

pages/index/index.vue

@@ -1,9 +1,10 @@
 <template>
-	<diy ref="diy" v-if="isDiy"></diy>
+	<diyC ref="diy" v-if="isDiy"></diyC>
 </template>
 
 <script>
 	import diy from './diy'
+	import diyC from './diy/index_mall.vue'
 	import {
 		getShare
 	} from "@/api/public.js";
@@ -15,7 +16,8 @@
 			}
 		},
 		components: {
-			diy
+			diy,
+			diyC
 		},
 		onShow() {
 			uni.$on('is_diy', (data) => {