universal-wechat-uniapp-241007/components/list/dynamic/dynamicToShop.vue

<template>
	<view
	class="shop"
	@click.stop="toShop"
	v-if="shop">
		<view class="image">
			<image :src="shop.logoImage" mode=""></image>
		</view>
		<view class="shop-box"
		>
			<view class="title">
				{{ shop.title }}
			</view>
			<view class="desc">
				{{ shop.address }}
			</view>
		</view>
		<view class="arrow-right">
			进店
			<uv-icon
			name="arrow-right"
			size="40rpx"
			color="#5baaff"
			></uv-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props : {
			shop : {
				default : null,
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			toShop(){
				uni.navigateTo({
					url: '/pages_order/gourmet/gourmetDetail?id=' + this.shop.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.shop{
	display: flex;
	align-items: center;
	background-color: rgba($uni-color, 0.1);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	color: $uni-color;
	.image{
		width: 90rpx;
		height: 90rpx;
		margin-right: 10rpx;
		flex-shrink: 0;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.shop-box{
		flex: 1;
		width: calc(100% - 220rpx);
		.title{
			font-size: 28rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
		.desc{
			margin-top: 10rpx;
			color: rgba($uni-color, 0.6);
			font-size: 24rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
	}
	.arrow-right{
		flex-shrink: 0;
		margin-left: auto;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
}
</style>