point-app/pagesHome/place/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<image class="image" :src="oneUrl" mode=""></image>
			</view>
			<view class="two">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="list" v-for="(item,index) in list" :key="index" :style="{background:item.bgColor}">
							<view class="name">
								<text>{{item.name}}</text>
							</view>
							<image class="image" :src="item.url" mode=""></image>
							<view class="no_use" v-if="item.is_use==false">
								&nbsp;
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				oneUrl: require('@/static/test.png'),
				list: [ //
					{
						name: '北京特产',
						url: require('@/static/test.png'),
						bgColor: '#FF6573',
						is_use: true
					},
					{
						name: '河北特产',
						url: require('@/static/test.png'),
						bgColor: '#448E51',
						is_use: false
					},
					{
						name: '天津特产',
						url: require('@/static/test.png'),
						bgColor: '#8A59B4',
						is_use: false
					},
					{
						name: '辽宁特产',
						url: require('@/static/test.png'),
						bgColor: '#2A669A',
						is_use: false
					},
					{
						name: '山西特产',
						url: require('@/static/test.png'),
						bgColor: '#794537',
						is_use: false
					},
					{
						name: '内蒙特产',
						url: require('@/static/test.png'),
						bgColor: '#397126',
						is_use: false
					},
					{
						name: '吉林特产',
						url: require('@/static/test.png'),
						bgColor: '#965400',
						is_use: false
					},
					{
						name: '黑龙江特产',
						url: require('@/static/test.png'),
						bgColor: '#005854',
						is_use: false
					},
					{
						name: '湖北特产',
						url: require('@/static/test.png'),
						bgColor: '#55C5C5',
						is_use: false
					},
					{
						name: '湖南特产',
						url: require('@/static/test.png'),
						bgColor: '#659100',
						is_use: false
					},
					{
						name: '江西特产',
						url: require('@/static/test.png'),
						bgColor: '#CF4779',
						is_use: false
					},
					{
						name: '河南特产',
						url: require('@/static/test.png'),
						bgColor: '#1F83B7',
						is_use: false
					},
					{
						name: '安徽特产',
						url: require('@/static/test.png'),
						bgColor: '#302760',
						is_use: false
					},
					{
						name: '上海特产',
						url: require('@/static/test.png'),
						bgColor: '#8E8A64',
						is_use: false
					},
					{
						name: '江苏特产',
						url: require('@/static/test.png'),
						bgColor: '#CF6B54',
						is_use: false
					},
					{
						name: '浙江特产',
						url: require('@/static/test.png'),
						bgColor: '#0B4864',
						is_use: false
					},
					{
						name: '山东特产',
						url: require('@/static/test.png'),
						bgColor: '#892557',
						is_use: false
					},
					{
						name: '福建特产',
						url: require('@/static/test.png'),
						bgColor: '#13607A',
						is_use: false
					},
					{
						name: '广东特产',
						url: require('@/static/test.png'),
						bgColor: '#FF6A52',
						is_use: false
					},
					{
						name: '海南特产',
						url: require('@/static/test.png'),
						bgColor: '#1D2F79',
						is_use: false
					},
					{
						name: '广西特产',
						url: require('@/static/test.png'),
						bgColor: '#DD863F',
						is_use: false
					},
					{
						name: '甘肃特产',
						url: require('@/static/test.png'),
						bgColor: '#118582',
						is_use: false
					},
					{
						name: '青海特产',
						url: require('@/static/test.png'),
						bgColor: '#9744B6',
						is_use: false
					},
					{
						name: '宁夏特产',
						url: require('@/static/test.png'),
						bgColor: '#048B50',
						is_use: false
					},
					{
						name: '新疆特产',
						url: require('@/static/test.png'),
						bgColor: '#5D832C',
						is_use: false
					},
					{
						name: '重庆特产',
						url: require('@/static/test.png'),
						bgColor: '#32A6BF',
						is_use: false
					},
					{
						name: '陕西特产',
						url: require('@/static/test.png'),
						bgColor: '#145342',
						is_use: false
					},
					{
						name: '四川特产',
						url: require('@/static/test.png'),
						bgColor: '#9C3140',
						is_use: false
					},
					{
						name: '贵州特产',
						url: require('@/static/test.png'),
						bgColor: '#7F8D02',
						is_use: false
					},
					{
						name: '云南特产',
						url: require('@/static/test.png'),
						bgColor: '#019585',
						is_use: false
					},
					{
						name: '西藏特产',
						url: require('@/static/test.png'),
						bgColor: '#B4A52E',
						is_use: false
					}
				]
			};
		},
		onShow: function() {},
		methods: {

		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 96vw;
		height: 97vh;
		padding: 2vw;

		.one {
			margin: 0 0 2vw 0;

			.image {
				width: 100%;
				height: 50vw;
			}
		}

		.two {
			position: relative;
			flex-grow: 1;

			.list {
				position: relative;
				width: 27vw;
				margin: 0 0 2vw 0;
				border: 1px solid var(--f1Color);
				text-align: center;
				padding: 2vw;

				.name {
					text {
						font-size: var(--font16Size);
						border: 2px solid var(--f1Color);
						display: inline-block;
						color: var(--fffColor);
						padding: 1vw 2vw;
						margin: 0 0 2vw;
						border-radius: 5px;
					}
				}

				.image {
					width: 90%;
					height: 22vw;
					border-radius: 90px;
				}

				.no_use {
					position: absolute;
					top: 0;
					z-index: 999;
					width: 100%;
					height: 100%;
					left: 0;
					background-color: #f1f1f19f;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}
</style>