WashingCar-frontend-Ver3.0/pages/handle/handle.vue

<template>
	<navss :titles="titles" :color="color"></navss>

	<view class="list">
		<view class="tops">

		</view>
	<view class="headers">
		<view class="list-header">
			<img class="list-header-i" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
			<input type="text" class="list-header-input" placeholder="请输入洗车点关键词">
		</view>
	</view>
		<scroll-view class="list-body" scroll-y="true">
			<view class="datas" v-for="(item,index) in demo" :key="index" @click="demos">
				<img class="datas-img" src="https://www.jiubaotongxue.love/image/bannas.png" alt="" />
				<view class="datas-r">
					<view class="datas-title">
						<text class="t">中石化顺达加油站</text>
						<img class="i" src="https://www.jiubaotongxue.love/image/map1.png" alt="" />
					</view>
					<view class="datas-address">

						<view class="t">
							杭州市余杭区良渚街道比根教育教育教育教育
						</view>
					</view>
					<view class="datas-state">
						<view class="sum">
							总共位：5
						</view>
						<view class="surplus">
							空闲：5
						</view>
					</view>
					<view class="datas-navigation">
						<view class="left-d">
							<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
								class="colors">5.4km|</text>
						</view>
						<view class="left-x">
							<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text
								class="colors">24小时营业</text>
						</view>
					</view>

				</view>
			</view>
			<view class="ding">

			</view>

		</scroll-view>
	</view>

	<view class="promptbgk" v-if="promptbgk===1">
		<view class="prompt">
			<view class="prompt-title">
				温馨提示
			</view>
			<view class="prompt-body">
				门店暂未开通次卡活动，请在平台上办理
			</view>
			<view class="prompt-bottom">
				<view class="left-btn" @click="leftBtn">
					取消
				</view>
				<view class="right-btn" @click="rightBtn">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const titles = ref('我的信息')
	const color = ref('#2264dc')
	onLoad(() => {
		titles.value = '我的信息'
		color.value = '#2264dc'
	})
	const demo = ref([0, 1, 2, 3, 4, 5])
	const promptbgk = ref(0)
	const demos = () => {
		promptbgk.value = 1
	}
	const leftBtn = () => {
		promptbgk.value = 0
	}

	const rightBtn = () => {
		promptbgk.value = 0
		uni.navigateTo({
			url: "/pages/charge/charge"
		})
	}
</script>
<style lang="scss">
	.list {
		position: absolute;
		width: 100%;
		height: 100%;
		// background: linear-gradient(to bottom, #f8f8f8,#ffffff,#ffffff, #FFFCCC);
		background-color: #ededed;
		overflow: hidden;
		// overflow-y: auto;

		.tops {
			width: 100%;
			height: 11%;
			position: relative;
		}

		.headers{
			width: 100%;
			height: 90rpx;
			position: relative;
			.list-header {
				width: 90%;
				height: 70rpx;
				border: 1rpx solid #ffffff;
				background-color: #ffffff;
				margin-top: 20rpx;
				position: relative;
				margin-left: 50%;
				transform: translateX(-50%);
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				display: flex;
			
				.list-header-i {
					width: 50rpx;
					height: 50rpx;
					margin-top: 10rpx;
					margin-left: 20rpx;
				}
			
				.list-header-input {
					width: 80%;
					height: 70rpx;
					line-height: 70rpx;
					margin-left: 30rpx;
					font-size: 28rpx;
				}
			}
		}
		.list-body{
			width: 100%;
			height:90%;
			.datas {
				position: relative;
				width: 94%;
				// height: 360rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				background-color: #ffffff;
				margin-top: 25rpx;
				display: flex;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			
				.datas-img {
					width: 176rpx;
					height: 176rpx;
					margin-left: 25rpx;
					margin-top: 40rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
				}
			
				.datas-r {
					width: 70%;
					margin-top: 20rpx;
			
					.datas-title {
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						box-sizing: border-box;
						padding-left: 28rpx;
						font-size: 32rpx;
						font-weight: 600;
						margin-top: 15rpx;
						display: flex;
						justify-content: space-between;
			
						.i {
							width: 50rpx;
							height: 50rpx;
							margin-top: -20rpx;
			
							// background-color: salmon;
						}
					}
			
					.datas-address {
						width: 100%;
						height: 38rpx;
						display: flex;
						align-items: center;
						margin-left: 20rpx;
						margin-top: 10rpx;
						color: #999;
			
						.t {
							width: 90%;
							height: 38rpx;
							line-height: 38rpx;
							font-size: 24rpx;
							margin-left: 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
			
					}
			
					.datas-navigation {
						width: 100%;
						height: 70rpx;
						display: flex;
						align-items: center;
			
						.left-d {
							height: 38rpx;
							display: flex;
							align-items: center;
							// background-color: rebeccapurple;
							margin-left: 28rpx;
			
							.i {
								width: 24rpx;
								height: 24rpx;
								// background-color: red;
							}
			
							.colors {
								font-size: 24rpx;
							}
						}
			
						.left-x {
							height: 38rpx;
							display: flex;
							align-items: center;
							// background-color: rebeccapurple;
							margin-left: 5rpx;
			
							.i {
								width: 24rpx;
								height: 24rpx;
								// background-color: red;
							}
			
							.colors {
								font-size: 24rpx;
							}
						}
					}
			
					.datas-state {
						width: 100%;
						// height: 70rpx;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						color: white;
			
						.sum {
							width: 138rpx;
							height: 36rpx;
							background: #4993FF;
							font-size: 22rpx;
							border: 1rpx solid #4993FF;
							text-align: center;
							line-height: 36rpx;
							margin-left: 28rpx;
							border-radius: 7rpx 7rpx 7rpx 7rpx;
						}
			
						.surplus {
							width: 138rpx;
							height: 36rpx;
							background: #42BE45;
							border: 1rpx solid #42BE45;
							font-size: 22rpx;
							text-align: center;
							line-height: 36rpx;
							margin-left: 20rpx;
							border-radius: 7rpx 7rpx 7rpx 7rpx;
						}
					}
				}
			
			}
			.ding{
				width: 100%;
				height: 200rpx;
			}
		}
	}

	.promptbgk {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);

		.prompt {
			position: absolute;
			width: 515rpx;
			// height: 400rpx;
			background-color: #ffffff;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			/* 默认为 column，但这里明确指定 */
			align-items: center;
			/* 水平居中 */
			justify-content: space-around;

			.prompt-title {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				height: 120rpx;
				line-height: 120rpx;
				box-sizing: border-box;
				padding-top: 10rpx;

			}

			.prompt-body {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.prompt-bottom {
				position: relative;
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.left-btn {
					width: 180rpx;
					height: 75rpx;
					background-color: #f2f2f2;
					font-size: 28rpx;
					text-align: center;
					line-height: 75rpx;
					margin-right: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.right-btn {
					width: 180rpx;
					height: 75rpx;
					background-color: #f2f2f2;
					font-size: 28rpx;
					color: #57aff7;
					text-align: center;
					line-height: 75rpx;
					margin-left: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}
		}
	}
</style>