dlzx/pages/category/category.vue

<template>
	<view class="content">
		<view class="main">
			<view v-for="(item, index) in 10">
				<view class="first" v-if="index == 0" @click="navToList()">
					<view class="title">【鼎立足行】鼎立足行足垫走姿矫正器研发相关 纪录大揭秘</view>
					<view class="image"></view>
					<view class="time">更新时间:2021-12-06</view>
				</view>
				<view class="item flex" @click="navToList()" 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>

<script>
import { getCategoryList } from '@/api/product.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		// 载入数据
		async loadData() {
			let obj = this;
		},
		navToList() {
			uni.navigateTo({
				url: '/pages/category/detail'
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
	background: #f5f5f5;
}
.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>