zk-driver-wechat-applet/pages/ucenter/car.vue

<template>
	<view>
		<view class="car-box">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<view class="top">
								<view>渝SUT5U8</view>
								<view><image src="../../static/icon-car.png"></image></view>
							</view>
							<view class="bottom">
								<view class="carpic"><image src="../../static/car.jpg"></image></view>
								<view class="list">
									<view>车型：</view><view>陕汽S5000自卸车</view>
								</view>
								<view class="list">
									<view>VIN码：</view><view>LSPRR083929778273</view>
								</view>
								<view class="list">
									<view>累计行驶里程：</view><view>7463km</view>
								</view>
								<view class="list">
									<view>累计换电：</view><view>520次</view>
								</view>
								<view class="list">
									<view>累计换电量：</view><view>10890(kW/h)</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<tab-bar></tab-bar>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				dotsStyles:{
					backgroundColor: 'rgba(88, 190, 107,0.6)',
					selectedBackgroundColor: 'rgba(88, 190, 107,0.9)',
				}
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-box{
		padding: 0 30rpx;
		.swiper-box{
			width: 100%;
			display: flex;
			background-color:#fff;
			border-radius: 20rpx;
			border-top-right-radius: 40rpx;
			min-height: 1050rpx;
			margin-top: 15rpx;
			.swiper-item{
				display: flex;
				flex-direction: column;
				.top{
					display: flex;
					padding-left: 50rpx;
					justify-content: space-between;
					view:first-child{
						padding-top: 40rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
					image{
						width: 110rpx;
						height: 98rpx;
					}
				}
				.bottom{
					padding:0 30rpx;
					display: flex;
					flex-direction: column;
					.carpic{
						text-align: center;
						margin-bottom: 30rpx;
					}
					image{
						width: 630rpx;
						height: 480rpx;
						border-radius:28rpx;
					}
					.list{
						width: 100%;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						height: 80rpx;
						justify-content: space-between;
						font-size: 30rpx;
						view:first-child{
							color: #86909c;
						}
						view:last-child{
							color: #1d2129;
							
						}
					}
				}
			}
		}
	}
</style>