1

common/css/font-icon.css

@@ -2,9 +2,9 @@
   font-family: "iconfont"; /* Project id 3674157 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_3674157_evo2852vx7i.woff2?t=1664245623882') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3674157_evo2852vx7i.woff?t=1664245623882') format('woff'),
-       url('//at.alicdn.com/t/c/font_3674157_evo2852vx7i.ttf?t=1664245623882') format('truetype');
+       url('//at.alicdn.com/t/c/font_3674157_9pin6i3kqr8.woff2?t=1664261708242') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3674157_9pin6i3kqr8.woff?t=1664261708242') format('woff'),
+       url('//at.alicdn.com/t/c/font_3674157_9pin6i3kqr8.ttf?t=1664261708242') format('truetype');
 }
 
 .iconfont {
@@ -15,6 +15,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-del:before {
+  content: "\e616";
+}
+
+.icon-fanhuidingbu:before {
+  content: "\e713";
+}
+
 .icon-gouwuche:before {
   content: "\e628";
 }
@@ -46,4 +54,3 @@
 .icon-daipinglun:before {
   content: "\e602";
 }
-

pages/home/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
-		<view class="main">
+		<view class="main" id="top">
 			<view class="zero one">
 				<input type="text" placeholder="搜索商品">
 			</view>
@@ -20,28 +20,38 @@
 				</view>
 			</view>
 			<view class="zero four">
-				<view v-for="(item,index) in data" :key="index">
-					
-				</view>
-				<!-- <view class="recomList" v-for="(item,index) in recomList" :key="index">
-					<view class="title">
-						<text>{{item.title}}</text>
-						<text>{{item.titles}}</text>
-					</view>
-					<view class="market">
-						<view class="list" v-for="(tag,indexs) in item.list" :key="indexs">
-							<image class="image" :src="tag.url" mode=""></image>
-							<view class="name">
-								{{tag.name}}
-							</view>
+				<view class="recomList" v-for="(item,index) in recomList" :key="index">
+					<view class="list" v-for="(tag,indexs) in item.list" :key="indexs">
+						<view class="title">
+							<text>{{tag.title||'&nbsp;'}}</text>
+						</view>
+						<image class="image" :src="tag.url" mode=""></image>
+						<view class="textOver name">
+							{{tag.name}}
 						</view>
 					</view>
-				</view> -->
+				</view>
 			</view>
 			<view class="zero five">
-				数据列表
+				<view class="list" v-for="(item,index) in marketList" :key="index">
+					<image class="image" :src="item.url" mode=""></image>
+					<view class="name">
+						{{item.name}}
+					</view>
+					<view class="other">
+						<view class="money">
+							<text>¥</text><text>{{item.money}}</text>
+						</view>
+						<view class="btn">
+							<button type="default" size="mini">购买</button>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
+		<view class="backTop">
+			<text class="iconfont icon-fanhuidingbu"></text>
+		</view>
 	</mobile-frame>
 </template>
 
@@ -54,16 +64,16 @@
 				},
 				bannerList: [ // 轮播图
 					{
-						url: require('@/static/logo.png')
+						url: require('@/static/test.png')
 					},
 					{
-						url: require('@/static/logo.png')
+						url: require('@/static/test.png')
 					},
 					{
-						url: require('@/static/logo.png')
+						url: require('@/static/test.png')
 					},
 					{
-						url: require('@/static/logo.png')
+						url: require('@/static/test.png')
 					},
 				],
 				btnList: [ //功能按钮
@@ -120,61 +130,89 @@
 				],
 				recomList: [ //推荐好物
 					{
-						title: '新品上架',
-						titles: '',
-						list: [ //产品
+						list: [ //商品
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '新品上架',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 						]
 					},
 					{
-						title: '发现好货',
-						titles: '热销爆款',
-						list: [ //产品
+						list: [ //商品
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '发现好货',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '热销爆款',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 						]
 					},
 					{
-						title: '首农精选',
-						titles: '居家常备',
-						list: [ //产品
+						list: [ //商品
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '首农精选',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '居家常备',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 						]
 					},
 					{
-						title: '人气单品',
-						titles: '夏季畅销',
-						list: [ //产品
+						list: [ //商品
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '人气单品',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 							{
-								url: require('@/static/logo.png'),
-								name: '产品名称'
+								title: '夏季畅销',
+								url: require('@/static/test.png'),
+								name: '商品名称'
 							},
 						]
 					}
+
+				],
+				marketList: [ //商品列表
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 10
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 10
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 10
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 10
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 10
+					},
 				]
 			};
 		},
@@ -257,38 +295,116 @@
 			flex-direction: row;
 			justify-content: space-around;
 			flex-wrap: wrap;
+			background-color: var(--f2Color);
+			padding: 2vw 0 0 0;
+
+			.recomList {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-around;
+				width: 41vw;
+				margin: 0 0 2vw 0;
+				padding: 2vw;
+				border-radius: 10px;
+				background-image: linear-gradient(to bottom, rgba(250, 216, 213, 1) 5%, rgba(255, 255, 255, 1) 22%);
+
+				.list {
+					width: 20vw;
+					text-align: center;
+
+					.title {
+						text-align: center;
+						font-weight: bold;
+						font-size: var(--font15Size);
+						;
+						margin: 0 0 1vw 0;
+					}
+
+					.image {
+						width: 18vw;
+						height: 20vw;
+						margin: 0 0 1vw 0;
+					}
+
+					.name {
+						width: 17vw;
+						font-size: var(--font12Size);
+						;
+						border: 1px solid var(--fFB1Color);
+						border-radius: 25px;
+						padding: 0 1vw;
+						text-align: center;
+					}
+				}
+			}
+		}
+
+		.five {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			background-color: var(--f2Color);
+			padding: 2vw 0 0 0;
+
+			.list {
+				width: 40vw;
+				background-color: var(--fffColor);
+				padding: 2vw;
+				margin: 0 2vw 2vw 2vw;
+				border-radius: 10px;
+
+				.image {
+					width: 100%;
+					height: 35vw;
+				}
+
+				.name {
+					font-size: var(--font14Size);
+					margin: 0 0 1vw 0;
+				}
+
+				.other {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					.money {
+						color: var(--fFB1Color);
+
+						text:nth-child(1) {
+							font-size: var(--font12Size);
+						}
+					}
+
+					.btn {
+						button {
+							color: var(--fffColor);
+							background-color: var(--fFB1Color);
+							padding: 5px 2vw;
+							font-size: var(--font14Size);
+							line-height: 1;
+							border-radius: 90px;
+
+						}
+					}
+				}
+			}
+
+			.list:nth-child(2n) {
+				margin: 0 0 2vw 2vw;
+			}
+		}
+	}
+
+	.backTop {
+		position: fixed;
+		bottom: 20vw;
+		right: 5vw;
 
-			// .recomList {
-			// 	width: 41vw;
-			// 	margin: 0 0 3vw 0;
-			// 	padding: 1vw 2vw;
-			// 	box-shadow: 0 0 2px #ff0000;
-			// 	border-radius: 5px;
-
-			// 	.title {
-			// 		font-size: 16px;
-			// 		margin: 0 0 1vw 0;
-			// 		text-align: center;
-
-			// 		text {
-			// 			padding: 0 1vw;
-			// 			font-weight: bold;
-			// 		}
-			// 	}
-
-			// 	.market {
-			// 		.list {
-			// 			text-align: center;
-
-			// 			.image {
-			// 				width: 5vw;
-			// 				height: 5vw;
-			// 			}
-
-			// 			.name {}
-			// 		}
-			// 	}
-			// }
+		text {
+			font-size: 30px;
+			background-color: #0000005f;
+			border-radius: 90px;
 		}
 	}
 </style>