fx-uniapp/pages/index/homeActivities/homeActivities.vue

<template>
	<view style="padding:30rpx 0;">
		<view class="list">
			<view class="listItem" @tap="goDetail(item)" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src="item.image" mode="heightFix"></image>
				</view>
				<view class="textContent">
					<view class="textTitle">{{item.title}}</view>
					<view class="eyes">
						<!-- <text></text> -->
						<image src="../../../static/images/eye.png" mode="widthFix"></image>
						
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="list.length==0">
			<image src="/static/images/empty.png" mode="widthFix"></image>
			<view class="emptyText">暂无内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		methods:{
			getList(){
				this.$http("common.homeActivity")
				.then(res => {
					console.log(res,"9999555599")
					this.list=res.data
				});
			},
			goDetail(item){
				console.log(item,"0000000")
				this.$Router.push(`/pages/public/richtext?id=${item.id}`)
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
.empty{
	margin:20% auto 0 auto;
	text-align: center;
	image{
		width:30%;
		height:auto;
	}
	.emptyText{
		color:#ffffff;
		margin:30upx;
	}
}
.listItem{
	margin:0 24upx;
	background: #aaaaaa;
	box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05);
	border-radius: 20upx;
	background-color: #191919;
	margin-bottom:20upx;
	overflow: hidden;
	.img{
		height: 382upx;
		image{
			height: 100%;
			width: auto;
		}
	}
	.textContent{
		padding:30upx 25upx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.textTitle{
			font-size: 34upx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			flex:1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.eyes{
			display: flex;
			width:41upx;
			align-items: center;
			justify-content: space-between;
			margin-left:30rpx;
			image{
				width:41upx;
				height:auto;
			}
			text{
				font-size: 24upx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #333333;
			}
		}
	}
}
</style>