hxj-adrioid/pages/index/components/scroll-list.vue

<template>
	<view>
		<scroll-view class="scroll_list" :style="{'background': background}" scroll-x="true">
			<view class="main-left" style="padding-left: 40rpx;">
				<view v-for="(item,index) in list" :key="index" @click="goPage(item.id)">
					<view class="box" :style="{'width':itemWidth,'height':itemHeight}" >
						<image class="image-bg" :src="item.cover_img" mode="aspectFill"></image>
						<view class="text t-omit">{{item.title?item.title:''}}</view>
					</view>
					<view class="tag_list" v-if="item.tag">
						<text class="tag">{{item.tag}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let defaultList = [{
			image: 'https://t17.9026.com/web/statics/image/index/2.png',
			title: '定制产品',
			tag: '定制',
			link:''
		},
		{
			image: 'https://t17.9026.com/web/statics/image/index/2.png',
			title: '热销方案',
			tag: '热销',
			link:'/pages/case/hot_sale_project'
		},
		{
			image: 'https://t17.9026.com/web/statics/image/index/2.png',
			title: '主题专区',
			tag: '主题',
			link:'/pages/case/themeArea'
		},
		{
			image: 'https://t17.9026.com/web/statics/image/index/2.png',
			title: '定制产品',
			tag: '定制'
		}
	];
	export default {
		name: "app-scroll-list",
		props: {
			list: {
				type: Array,
				default: () => {
					return defaultList
				}
			},
			background: {
				type: String,
				default: ''
			},
			itemWidth:{
				type:[String,Number],
				default:'207rpx'
			},
			itemHeight:{
				type:[String,Number],
				default:'250rpx'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			goPage(id){
				uni.navigateTo({
					url:"/pages/program/program?id="+id
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll_list {
		padding: 15rpx 0 28rpx;

		.box {
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			margin-right: 20rpx;

			.image-bg {
				position: absolute;
				z-index: -1;
				left: 0;
				right: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}

			.text {
				width: 115rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #FEFFFE;
				text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.17);
				position: absolute;
				top: 30rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
			}
		}

		.tag_list {
			margin-top: 20rpx;

			.tag {
				background-color: rgba(238, 235, 222, 1);
				color: rgb(167, 133, 79);
				border-radius: 0 50% 50% 50%;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
			}
		}
	}
</style>