shjz-applet/components/list/list-all.vue

<template>
	<view class="list-all border-box pad-zy20 flex">
		<!-- 视频列表 -->
		<view class="list-video" v-if="videoList.length">
			<view class="item radius8 border-box" :style="{padding:videoPadding}" v-for="(item,index) in videoList" :key="index">
				<view class="cover">
					<image :src="item.cover" mode="widthFix"></image>
				</view>
				<view class="play-btn" @tap="playEv(item.src)">
					<image src="/static/icon/icon-play.png" mode="widthFix" style="width: 70rpx; height: 70rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 线路列表 -->
		<view class="list-line" v-if="lineList.length">
			<view class="item pad-sx25 pad-zy20 border-box radius8 flex" v-for="(item,index) in lineList" :key="index">
				<view class="left">
					<view class="top flex">
						<view class="flag font24" v-if="item.flag!==''">{{item.flag}}</view>
						<view class="title font26 bold clips1">{{item.title}}</view>
					</view>
					<view class="addr font22 opacity-08 clips1">
						<text>始发地:{{item.start_addr}}</text>
						<text>目的地:{{item.arrive_addr}}</text>
					</view>
					<view class="time font22 opacity-08 clips1">
						<text>开始日期:{{item.start_time}}</text>
						<text>结束日期:{{item.end_time}}</text>
					</view>
				</view>
				<view class="right">
					<view class="price">
						<text class="font22 opacity-08">最高价:￥</text>
						<text class="font28" style="color: #e20615;">{{item.max_price}}</text>
					</view>
					<view class="price">
						<text class="font22 opacity-08">最低价:￥</text>
						<text class="font28" style="color: #e20615;">{{item.min_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 资讯列表 -->
		<view class="list-news pad-zy20 radius8 border-box" v-if="newsList.length">
			<view class="item pad-sx25 border-box flex" @tap="toDetail(item.id)" v-for="(item,index) in newsList" :key="index">
				<view class="img radius6">
					<image :src="item.cover" mode="widthFix"></image>
				</view>
				<view class="txt">
					<view class="title font26 bold clips1">{{item.title}}</view>
					<view class="info font22 opacity-08 clips2">{{item.info}}</view>
					<view class="look flex">
						<view class="icon flex"><image src="/static/icon/icon-look.png" mode="widthFix" style="width: 21rpx; height: 15rpx;"></image></view>
						<view class="font20">浏览 {{item.click}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'list-all',
		props: {
			// 视频列表
			videoList: {
				type: Array,
				default: []
			},
			// 内边距
			videoPadding: {
				type:String,
				default:'20rpx'
			},
			// 线路列表
			lineList: {
				type: Array,
				default: []
			},
			// 资讯列表
			newsList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 播放视频
			playEv(url){
				 uni.navigateTo({
					url: `/pagesA/video/playVideo?src=${url}`
				})
			},
			// 查看更多
			toDetail(id) {
				uni.navigateTo({
					url:`/pagesA/news/detail?id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	/* 视频列表 */
	.list-video{
		width: 100%;
	}
	.list-video>.item{
		height: 410rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		position: relative;
	}
	.list-video>.item .cover{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.list-video>.item .cover image{
		width: 100%;
		min-height: 100%;
	}
	.list-video>.item .play-btn{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	
	/* 线路列表 */
	.list-line{
		width: 100%;
	}
	.list-line>.item{
		justify-content: space-between;
		align-items: center;
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		line-height: 1.8;
	}
	.list-line>.item .left{
		min-width: calc(100% - 210rpx);
	}
	.list-line>.item .right{
		max-width: 200rpx;
	}
	.list-line>.item .top{
		align-items: center;
		width: 100%;
		margin-bottom: 15rpx;
		line-height: 1.5;
	}
	.list-line>.item .top>.flag{
		width: 62rpx;
		line-height: 32rpx;
		margin-right: 6rpx;
		text-align: center;
		background-color: #3b45b2;
		border: 2rpx solid #1551a0;
		border-radius: 4rpx;
		color: #ffffff;
	}
	.list-line>.item .top>.title{
		width: calc(100% - 68rpx);
	}
	.list-line>.item .addr>text:nth-of-type(1),
	.list-line>.item .time>text:nth-of-type(1){
		margin-right: 14rpx;
	}
	
	/* 资讯列表 */
	.list-news{
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
	}
	.list-news>.item{
		justify-content: space-between;
		border-bottom: 2rpx solid #ededed;
	}
	.list-news>.item:last-child{
		border-bottom: 0;
	}
	.list-news>.item .img{
		width: 152rpx;
		height: 152rpx;
		overflow: hidden;
	}
	.list-news>.item .img>image{
		width: 100%;
		min-height: 100%;
	}
	.list-news>.item .txt{
		width: calc(100% - 170rpx);
	}
	.list-news>.item .title{
		margin-bottom: 8rpx;
		line-height: 1.5;
	}
	.list-news>.item .info{
		line-height: 1.6;
	}
	.list-news>.item .look{
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 40rpx;
		margin-top: 6rpx;
	}
	.list-news>.item .look>.icon{
		align-items: center;
		margin-right: 8rpx;
	}
	.list-news>.item .look>.icon>image{
		margin-top: 4rpx;
	}
</style>