jn_app/pages/common/stationListPage.vue

<template>
	<view class="stationList">
		<view class="stationList_top" @click="back">
			<text>退出</text>
		</view>
		<view class="stationList_logo flex justify-end">
			<view class="stationList_logo_sty flex">
				<image src="../../static/jnImage/loginPage/logo.png" mode=""></image>
				<text>请选择风场</text>
			</view>
		</view>
		<view class="stationList_List">
			<uni-list>
				<uni-list-item title="宝龙山风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" clickable
					@click="onClick('宝龙山风电场')" />
				<uni-list-item title="乌力吉风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" />
				<uni-list-item title="浩日格吐风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" />
				<uni-list-item title="开鲁风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" />
				<uni-list-item title="景观风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" />
				<uni-list-item title="高力板风电场" thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" />
			</uni-list>
		</view>
		<view class="stationListback flex justify-center">
			<image src="../../static/jnImage/commonPage/closed.png" mode="" @click="back"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			back() {
				this.$tab.navigateBack()
			},
			onClick(name) {
				this.$tab.navigateTo('/pages/home/stationIndex?stationName=' + name)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.stationList {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.stationList_top {
			width: 100vw;
			height: 60px;
			line-height: 60px;

			text {
				margin-left: 30px;
				font-size: 36upx;
				color: #4287FF;
			}
		}

		.stationList_logo {
			margin-bottom: 40px;

			.stationList_logo_sty {
				height: 80px;
				width: 60%;
				background: url('../../static/jnImage/commonPage/stationBack.png');
				background-size: cover;
				position: relative;

				image {
					width: 60px;
					height: 45px;
					position: absolute;
					top: 20px;
					left: 20px;
				}

				text {
					color: #4287FF;
					font-size: 34upx;
					position: absolute;
					top: 50px;
					left: 80px;
					font-style: italic;
				}
			}
		}

		.stationList_List {
			.uni-list {

				.uni-list--border-top,
				.uni-list--border-bottom {
					background-color: rgba(255, 255, 255, 0.3) !important;
				}

				.uni-list--border:after {
					background-color: rgba(255, 255, 255, 0.3) !important;
				}

				.uni-list-item {
					background-color: #021D64 !important;

					.uni-list-item__container {
						.uni-list-item__content {
							.uni-list-item__content-title {
								color: #fff;
							}
						}
					}
				}
			}
		}

		.stationListback {
			margin-top: 30px;

			image {
				width: 30px;
				height: 30px;
			}
		}
	}
</style>