2021-12-06

pages/category/category.vue

@@ -1,6 +1,21 @@
 <template>
 	<view class="content">
-		
+		<view class="main">
+			<view v-for="(item, index) in 10">
+				<view class="first" v-if="index == 0">
+					<view class="title">【鼎立足行】鼎立足行足垫走姿矫正器研发相关 纪录大揭秘</view>
+					<view class="image"></view>
+					<view class="time">更新时间:2021-12-06</view>
+				</view>
+				<view class="item flex" v-else>
+					<view class="item-left"></view>
+					<view class="item-right">
+						<view class="item-font clamp">信愿行如三足鼎立，缺一不可</view>
+						<view class="item-time">更新时间:2021-12-06</view>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -9,6 +24,7 @@ import { getCategoryList } from '@/api/product.js';
 export default {
 	data() {
 		return {
+			list: []
 		};
 	},
 	onLoad() {
@@ -22,7 +38,7 @@ export default {
 		navToList(sid, tid) {
 			// 点击导航跳转到详细页面
 			uni.navigateTo({
-				url: '/pages/product/list?fid='+this.currentId+'&sid='+sid+'&tid='+tid
+				url: '/pages/product/list?fid=' + this.currentId + '&sid=' + sid + '&tid=' + tid
 			});
 		}
 	}
@@ -32,11 +48,76 @@ export default {
 <style lang="scss">
 page,
 .content {
-	height: 100%;
-	background-color: #f8f8f8;
+	height: auto;
+	min-height: 100%;
+	background: #f5f5f5;
 }
-
-.content {
-	display: flex;
+.main {
+	margin-top: 20rpx;
+	background: #ffffff;
+	.first {
+		padding: 50rpx 0 18rpx;
+		margin: 0 22rpx;
+		border-bottom: 1px solid #e0e0e0;
+		.title {
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.image {
+			width: 710rpx;
+			height: 400rpx;
+			background: #4cd964;
+			margin-top: 20rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.time {
+			margin-top: 20rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+		}
+	}
+	.item {
+		padding: 26rpx 0 18rpx;
+		margin: 0 22rpx;
+		justify-content: flex-start;
+		align-items: flex-start;
+		border-bottom: 1px solid #e0e0e0;
+		.item-left {
+			width: 224rpx;
+			height: 160rpx;
+			background: #DC4D46;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.item-right {
+			height: 160rpx;
+			margin-left: 24rpx;
+			padding: 18rpx 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			.item-font {
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+			.item-time {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
+		}
+	}
 }
 </style>

pages/index/index.vue

@@ -24,19 +24,19 @@
 		<view class="cate-section">
 			<view class="cate-item">
 				<image src="/static/icon/c3.png"></image>
-				<view class="cate-font">联盟礼包</view>
+				<view class="cate-font">品牌介绍</view>
 			</view>
 			<view class="cate-item">
 				<image src="/static/icon/c5.png"></image>
-				<view class="cate-font">超值拼团</view>
+				<view class="cate-font">产品百科</view>
 			</view>
 			<view class="cate-item">
 				<image src="/static/icon/c7.png"></image>
-				<view class="cate-font">限时秒杀</view>
+				<view class="cate-font">免费咨询</view>
 			</view>
 			<view class="cate-item">
 				<image src="/static/icon/c8.png"></image>
-				<view class="cate-font">每日签到</view>
+				<view class="cate-font">邀请有礼</view>
 			</view>
 		</view>
 		<view class="xian"></view>