Jingde-town-wechat-uniapp/components/tourGuide/locations.vue

<template>
	<view class="Locations">
		
		<view class="Locations-list">
			<view class="main">
				<image 
				class="main-image"
				src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
				mode="aspectFill"></image>
				
				<view class="info">
					<view class="title">
						陶阳里景区
					</view>
					<view class="tips">
						6个遗产点
					</view>
					<view class="btn">
						<image src="/static/image/tourGuide/a.png" 
						mode=""></image>
						<text class="">
							语音讲解
						</text>
					</view>
				</view>
				
				<view class="controls">
					<view class="f">
						<image src="/static/image/tourGuide/f.png" mode=""></image>
					</view>
					<view class="btn"
					@click="show = !show">
						<text class="">
							{{ show ? '收起' : '展开' }}
						</text>
						<uv-icon
						:name="show ? 'arrow-up' : 'arrow-down'"
						size="30rpx"></uv-icon>
					</view>
				</view>
			</view>
			<view class="list"
			v-if="show">
				<view class="main"
				v-for="(item, index) in 10"
				:key="index">
					<image 
					class="main-image"
					src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
					mode="aspectFill"></image>
					
					<view class="info">
						<view class="title">
							陶阳里景区
						</view>
						<view class="tips">
							6个遗产点
						</view>
					</view>
					
					<view class="controls">
						<view class="f">
							<image src="/static/image/tourGuide/f.png" mode=""></image>
						</view>
						<view class="f">
							<image src="/static/image/tourGuide/a.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show : true,
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.Locations{
	.Locations-list{
		.main{
			display: flex;
			margin: 20rpx;
			.main-image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
			.info{
				margin-left: 20rpx;
				.title{
					font-size: 30rpx;
					font-weight: 900;
				}
				.tips{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			.controls{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.f{
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			.btn{
				padding: 10rpx;
				font-size: 22rpx;
				color: $uni-color;
				border: 1rpx solid $uni-color;
				background-color: #F4E4C4;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				border-radius: 15rpx;
				image{
					width: 25rpx;
					height: 25rpx;
				}
				text{
					margin: 0 10rpx;
				}
			}
		}
		.list{
			padding-left: 40rpx;
			.main{
				align-items: center;
				.main-image{
					width: 140rpx;
					height: 140rpx;
				}
				.controls{
					flex-direction: row;
					.f{
						margin: 30rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>