JP-ChargeTeam51/pages/user/mine.vue

<template>
	<view>
		<view class="header">
			<!-- 用户信息 -->
			<view class="userinfo">
				<view class="infos">
					<view class="head-portrait">
						<img src="../../assets/img/headPortrait.png" alt="">
					</view>
					<view class="username">
						<view class="name">
							周斌
						</view>
						<view class="change">
							点击修改个人信息

						</view>
					</view>
				</view>
				<view class="right">
					<i class="ri-notification-2-line">
						<text class="unread">20</text>
					</i>
					<i class="ri-settings-line"></i>

				</view>
			</view>

			<!-- 卡片 -->
			<view class="card">
				<view class="title">
					<text class="img">
						<img src="../../assets/img/riFill-building-fill@4x.png" alt="">
					</text>荆鹏软件企业会员
				</view>
				<view class="view">
					查看<text class="iconfont">&#xe600;</text>
				</view>

			</view>
			<!-- 立即开通 -->
			<view class="open">
				<view class="title">
					<text class="img">
						<img src="../../assets/img/antFill-crown@3x.png" alt="">
					</text>充电月卡
				</view>
				<view class="open-btn">
					立即开通
					<text class="iconfont">&#xe632;</text>
				</view>
			</view>
			<!-- 开通后 -->
			<view class="opened">
				<view class="title">
					<text class="img">
						<img src="../../assets/img/antFill-crown@3x.png" alt="">
					</text>充电月卡
				</view>
				<view class="date">
					2022.07.30到期
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>

			<!-- 可用余额 -->
			<view class="balance">
				<view class="item">
					<view class="num">
						0.00
					</view>
					<view class="name">
						可用余额
					</view>

				</view>
				<view class="item">
					<view class="num">
						2
						<text class="new">新券</text>
					</view>
					<view class="name">
						优惠券
						
					</view>

				</view>
				<view class="item">
					<view class="num">
						0
					</view>
					<view class="name">
						积分
					</view>

				</view>

			</view>

		</view>
		<!-- 优惠 -->
		<view class="discounts">
			

		</view>
	<!-- 菜单 -->
	
	<view class="menu">
		<view class="item">
			<view class="item-icon">
				<i class="ri-todo-line"></i>
			</view>
			<view class="item-name">
				充电记录
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-map-pin-time-line"></i>
			</view>
			<view class="item-name">
				我的预约
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-ticket-line"></i>
			</view>
			<view class="item-name">
				我的发票
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-customer-service-2-line"></i>
			</view>
			<view class="item-name">
				联系客服
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-feedback-line"></i>
			</view>
			<view class="item-name">
				意见反馈
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-compass-3-line"></i>
			</view>
			<view class="item-name">
				操作指南
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-account-pin-box-line"></i>
			</view>
			<view class="item-name">
				关于我们
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-tools-line"></i>
			</view>
			<view class="item-name">
				我要报修
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-file-add-line"></i>
			</view>
			<view class="item-name">
				免费安桩
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-service-line"></i>
			</view>
			<view class="item-name">
				我要加盟
			</view>
			
		</view>
		<view class="item">
			<view class="item-icon">
				<i class="ri-shield-user-line"></i>
			</view>
			<view class="item-name">
				实名认证
			</view>
			
		</view>
		
	</view>
	<Tabbar :current="0" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: linear-gradient(#D6EEDC, #F6F8F8);

		.userinfo {

			display: flex;
			justify-content: space-between;
			padding: 20px 16px;

			.infos {
				display: flex;
			}

			.head-portrait {
				width: 48px;
				height: 48px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				margin-left: 8px;

				.name {
					color: rgba(51, 51, 51, 100);
					font-size: 24px;
					line-height: 24px;
				}

				.change {
					color: rgba(166, 180, 173, 100);
					line-height: 14px;
					margin-top: 8px;
				}

			}

			.right {
				font-size: 24px;
				.ri-notification-2-line{
					position: relative;
					.unread{
						width: 20px;
						line-height: 14px;
						border-radius: 24px;
						background-color: rgba(255, 94, 0, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 9px;
						text-align: center;
						position: absolute;
						bottom: 14px;
						left: 14px;
					}
				}

				.ri-settings-line {
					margin-left: 16px;
				}

			}
		}

		// 卡片
		.card {
			background: linear-gradient(#405473, #536D96);
			width: 91.4%;
			margin: 4px auto 0;
			padding: 15px 12px 12px 12px;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;

			.title {
				line-height: 24px;
				color: rgba(255, 255, 255, 100);
				font-size: 16px;

				.img {
					display: inline-block;
					width: 24px;
					height: 24px;
					vertical-align: middle;
					margin-right: 8px;

					img {
						width: 20px;
						height: 20px;
					}
				}
			}

			.view {

				line-height: 24px;
				color: rgba(208, 214, 226, 100);
				font-size: 16px;
			}
		}

		// 立即开通
		.open,.opened {
			background: linear-gradient(#4A4C62, #2C3145);
			width: 91.4%;
			padding: 15px 12px 12px 12px;
			margin: 4px auto 0;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;

			.title {
				line-height: 24px;
				color: #E1C082;
				font-size: 16px;

				.img {
					display: inline-block;
					width: 24px;
					height: 24px;
					vertical-align: middle;
					margin-right: 8px;

					img {
						width: 20px;
						height: 20px;
					}
				}
			}

			.open-btn {
				padding-left: 12px;
				padding-right: 4px;
				line-height: 28px;
				// text-align: center;
				border-radius: 50px;
				background: linear-gradient(to right,#F0E1C6, #ECC194);

				.iconfont {
					margin-left: 0px;
				}
			}
			.date{
				color: #d1b37a;
				line-height: 24px;
				font-size: 16px;
				.iconfont{
					color: #867668
				}
			}
		}


		// 余额
		.balance {
			background-color: #fff;
			width: 91.4%;
			margin: 12px auto;
			padding: 16px 29px;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;

			.item {
				text-align: center;

				.num {
					line-height: 28px;
					color: rgba(51, 51, 51, 100);
					font-size: 28px;
					position: relative;
					.new{
						width: 40px;
						line-height: 20px;
						border-radius: 24px 24px 24px 0px;
						background-color: rgba(255, 94, 0, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 12px;
						text-align: center;
						position: absolute;
						bottom:20px;
						left: 36px;
					}

				}

				.name {
					height: 16px;
					color: rgba(134, 134, 134, 100);
					font-size: 16px;
					margin-top: 4px;
					
				}
			}
		}

	}

	// 优惠
	.discounts {
		width: 91.4%;
		height: 80px;
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;

		img {
			width: 100%;
			height: 80px;
		}
	}

// 菜单
.menu{
	background-color: #fff;
	width: 91.4%;
	margin: 12px auto 0;
	padding: 0 12px 9px 12px;
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	@media screen and (max-width: 375px) {
	  		.item {
	    		width: 33% !important;
	  		}
		}
	.item{
		width: 25%;
		margin-top: 20px;
		margin-bottom: 11px;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
			color: rgba(119, 119, 119, 100);
			i{
				font-size: 24px
			}
			.item-name{
				font-size: 16px;
				margin-top: 8px;
			}
	}
}

</style>