zhongwin/pages/category/category.vue

<template>
	<view class="content">
		<view class="main">
			<view v-for="(item, index) in list">
				<view class="first" v-if="index == 0" @click="navToList(item.id)">
					<view class="title">{{item.title}}</view>
					<view class="image"><image :src="item.image_input[0]" mode=""></image></view>
					<view class="time">更新时间:{{item.add_time}}</view>
				</view>
				<view class="item flex" @click="navToList(item.id)" v-else>
					<view class="item-left"><image :src="item.image_input[0]" mode=""></image></view>
					<view class="item-right">
						<view class="item-font clamp">{{item.title}}</view>
						<view class="item-time">更新时间:{{item.add_time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { article } from '@/api/user.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		// 载入数据
		async loadData() {
			let obj = this;
			article({page:1,limit:1000},4).then(({data}) =>{
				this.list = data
			})
		},
		navToList(id) {
			uni.navigateTo({
				url: '/pages/category/detail?id=' + id
			});
		}
	}
};
</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;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-right {
			width: 458rpx;
			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>