yicangzongtai_app_240321/pages/government/subNVue/mapModule/swiperList.vue

<template>
	<view :class="['swiper-box' , DataType === 1 && addressList.length > 0 ? '' : 'hide-element' ]" @touchmove="(e) => {return false}" :style="{'bottom':  bottom }">
		<esc-swiper ref="swiper" :autoplay="false" :circular="false" :current.sync="current" :size="addressList.length"
			:plus="2" :width="750" :height="317" :itemWidth="623" :space="20">
			<esc-swiper-item v-for="(item, idx) in addressList" :index="idx" :key="`swiper_${idx}`">
				<view class="swiper-content" id="details" @click.stop="e => {onViewDetails(item , e)}">
					<view class="content-info">
						<image v-if="item.icon" class="info-logo" :src="item.icon" mode="scaleToFill"></image>
						<image v-else class="info-logo" src="@/static/map/default-icon.png" mode="scaleToFill"></image>

						<view class="info-text">
							<text class="info-name nvue-one-row">{{item.name}}</text>
							<view class="info-more">
								<view class="more-text">
									<view class="auto-width-item">
										<view class="bottomTextView">
											<text class="bottomText nvue-one-row">{{getTypeName(item)}}</text>
										</view>
									</view>
									<text class="info-site nvue-one-row">{{(item.distance/1000).toFixed(1)}}公里</text>
									<text class="info-site nvue-one-row">{{item.detailedAddress}}</text>
								</view>
								<view class="more-btn" id="goMap" @click.stop="toHere(item)">
									<image class="toimg" src="@/static/map/location.png" mode="scaleToFill">
									</image>
									<text class="btn-text">到这里</text>
								</view>
							</view>
						</view>
					</view>
					<text class="content-details nvue-two-row">{{item.intro}}</text>
				</view>
			</esc-swiper-item>
		</esc-swiper>
	</view>
</template>

<script>
	import Mixin from "./Mixin.js"
	export default {
		mixins: [Mixin],
		props: {

		},

		// classifyList
		data() {
			return {
				current: 0,
				bottom: '40px'
			}
		},
		watch: {
			current: {
				handler: function(newC, oldC) {
					this.$emit('onCurrent', newC)
				},
				immediate: true
			}
		},
		created() {
			const platform = uni.getSystemInfoSync().platform + '';
			// ios 系统
			if (platform.toLowerCase() == "ios") {
				this.bottom = '70px'
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./style.scss");

	.swiper-box {
		position: absolute;
		left: 0;

		z-index: 1;

		// background-color: skyblue;
		.swiper-content {
			width: 623rpx;
			height: 317rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx;

			.content-info {
				height: 168rpx;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-between;

				.info-logo {
					width: 168rpx;
					height: 168rpx;
					border-radius: 20rpx;
				}

				.info-text {
					width: 390rpx;
					height: 168rpx;
					flex-direction: column;

					.info-name {
						font-size: 30rpx;
						height: 42rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
					}

					.info-more {
						height: 126rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: flex-end;

						.more-text {
							height: 126rpx;
							flex-direction: column;
							justify-content: space-between;
							width: 268rpx;
							padding-right: 20rpx;

							// .info-tag {
							// 	height: 42rpx;
							// 	font-size: 24rpx;
							// 	background-color: #E3FCFC;
							// }

							.bottomTextView {
								border-radius: 20rpx 0px;
								height: 42rpx;
								font-size: 24rpx;
								background-color: #E3FCFC;

								.bottomText {
									line-height: 42rpx;
									padding: 0 22rpx;
									font-size: 24rpx;
									color: #43BDD6;
								}
							}

							.info-site {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								color: #666666;
							}
						}

						.more-btn {
							width: 122rpx;
							height: 50rpx;
							// background: linear-gradient(90deg,#45c7d5 4%, #3cb7d1 93%);
							background-color: #45c7d5;
							border-radius: 25rpx;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.toimg {
								width: 22rpx;
								height: 24rpx;
							}

							.btn-text {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								font-weight: 400;
								color: #ffffff;
							}
						}
					}

				}


			}

			.content-details {
				padding-top: 25rpx;
				height: 109rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
			}

		}
	}

	.auto-width-item {
		overflow: hidden;
		flex-direction: row;
	}
</style>