null/pages/mine/mine.vue

<template>
	<view class="page">
		<navbarLine :hasPlacer="false" bgColor="transparent"><view class="pageTitle">我的</view></navbarLine>
		<view class="p-header flex-col">
			<image src="/static/mine-bg.png" mode="aspectFill" class="bg"></image>
			<view class="flex-col section_1">
				<!-- -->
				<view class="flex-row group_2">
					<image src="/static/temp/avatar.png" class="image" />
					<view class="flex-col items-start group_3">
						<text class="nick clamp">向阳而生</text>
						<text class="mobile">159****9172</text>
						<view class="group_4">
							<text class="txt">累计减碳</text>
							<text class="txt active">1520</text>
							<text class="txt">克，已累计帮助捐赠</text>
							<text class="txt active">￥1.50</text>
							<text class="txt">来帮助食物浪费</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-row equal-division">
				<view class="flex-col items-start equal-division-item">
					<text class="text_8">账户余额(元)</text>
					<text class="text_9 clamp">387.50</text>
					<view class="flex-col items-center text-wrapper"><text class="text_10">充值</text></view>
				</view>
				<view class="flex-col items-start equal-division-item_1">
			 	<text class="text_11">可用券</text>
					<text class="text_12 clamp">3</text>
				</view>
			</view>
		</view>
		<view class="p-content flex-col">
			<text class="title">会员服务</text>
			<view class="flex-row content-topwrap">
				<view class="flex-col items-center equal-division-item_2 group_5">
					<image src="/static/m-addr.png" class="image_1" />
					<text class="text_14">我的收藏</text>
				</view>
				<view class="flex-col items-center equal-division-item_2" @tap="navTo('/pages/address/address')">
					<image src="/static/m-addr.png" class="image_1" />
					<text class="text_14">收货地址</text>
				</view>
				<view class="flex-col items-center equal-division-item_2">
					<image src="/static/m-eva.png" class="image_1" />
					<text class="text_14">我的评价</text>
				</view>
				<view class="flex-col items-center equal-division-item_2">
					<image src="/static/m-shops.png" class="image_1" />
					<text class="text_14">商家入驻</text>
				</view>
			</view>
			<text class="text_19">其他服务</text>
			<view class="flex-row content-bomwrap">
				<view class="flex-col items-center equal-division-item_3" @tap="showShare">
					<image src="/static/m-wx.png" class="image_1" />
					<text class="text_20">关注公众号</text>
				</view>
				<view class="flex-col items-center equal-division-item_3">
					<image src="/static/m-kefu.png" class="image_1" />
					<text class="text_20">联系客服</text>
				</view>
				<view class="flex-col items-center equal-division-item_3">
					<image src="/static/m-feedback.png" class="image_1" />
					<text class="text_20">意见反馈</text>
				</view>
			</view>
		</view>
	    <popup ref="shareRef">
			<view class="share-panel flex-col align-center">
				<image src="/static/temp/my-wx.png" mode="widthFix" class="img"></image>
				<text class="zicon zicon-quxiao1 ic" @tap="hideShare"></text>
			</view>
		</popup>
		<image src="/static/mine-bomimg.png" mode="aspectFill" class="bomimg"></image>
	</view>
</template>

<script>
import navbarLine from '@/components/navbar-line.vue';
export default {
	components: {
		navbarLine
	},
	data() {
		return {};
	},
	methods:{
		showShare(){
			this.$refs.shareRef.show();
		},
		hideShare(){
			this.$refs.shareRef.hide();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.pageTitle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-size: 34rpx;
	font-family: PingFang;
}
.p-header {
	padding-bottom: 40rpx;
	height: 518rpx;
	position: relative;
	.bg{
		width: 750rpx;
		height: 518rpx;
		position: absolute;
		z-index: -1;
	}
	.section_1 {
		padding: 76rpx 43rpx 151rpx;
		// background: url(/static/mine-bg.png) no-repeat center/cover;
	}
	.group_2 {
		margin-top: 48rpx;
	}
	.image {
		flex-shrink: 0;
		width: 96rpx;
		height: 96rpx;
	}
	.group_3 {
		margin-left: 18rpx;
		margin-right: 40rpx;
		flex: 1 1 auto;
	}
	.nick {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang;
		letter-spacing: 1.28rpx;
		max-width: 512rpx;
	}
	.mobile {
		margin-top: 15rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.group_4 {
		margin-top: 12rpx;
		.txt {
			color: #ffffff;
		 font-size: 20rpx;
			font-family: PingFang;
			&.active {
				font-weight: 700;
			}
		}
	}

	.equal-division {
		margin: -76rpx 30rpx 0;
		position: relative;
	}
	.equal-division-item {
		padding: 24rpx 25rpx 36rpx;
		flex: 1 1 335rpx;
		background-color: #ffffff;
		box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
		border-radius: 16rpx;
		position: relative;
	}
	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.text_9 {
		margin-top: 33rpx;
		color: #333333;
		font-size: 40rpx;
		font-family: PingFang;
		letter-spacing: 1.6rpx;
		max-width: 196rpx;
	}
	.text-wrapper {
		padding: 11rpx 0 14rpx;
		border-radius: 25rpx;
		width: 88rpx;
		position: absolute;
		right: 24rpx;
		top: 76rpx;
		border: solid 1rpx #92b99c;
	}
	.text_10 {
		color: #92b99c;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.equal-division-item_1 {
		margin-left: 20rpx;
		padding: 23rpx 25rpx 36rpx;
		flex: 1 1 335rpx;
		background-color: #ffffff;
		box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
		border-radius: 16rpx;
		// height: 150rpx;
	}
	.text_11 {
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
	.text_12 {
		margin-left: 4rpx;
		margin-top: 34rpx;
		color: #333333;
		font-size: 40rpx;
		font-family: PingFang;
		letter-spacing: 1.6rpx;
		max-width: 196rpx;
	}
}
.p-content {
	margin: 30rpx 30rpx 0;
	padding: 40rpx 0 50rpx;
	background-color: #ffffff;
	box-shadow: 0px 4rpx 18.4rpx 1.6rpx #2a2a2a1a;
	border-radius: 16rpx;
	.title {
		margin-left: 24rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFang;
		letter-spacing: 1.36rpx;
	}
	.content-topwrap {
		margin-top: 50rpx;
		padding: 0 20rpx;
	}
	.equal-division-item_2 {
		margin-left: 14rpx;
		flex: 1 1 162rpx;
		padding: 9.5rpx 0 10rpx;
	}
	.group_5 {
		margin-left: 0;
	}
	.image_1 {
		width: 48rpx;
		height: 48rpx;
	}
	.text_14 {
		margin-top: 22.5rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
	.text_19 {
		margin-left: 25rpx;
		margin-top: 70rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFang;
		line-height: 32rpx;
		letter-spacing: 1.36rpx;
	}
	.content-bomwrap {
		margin-left: 14.5rpx;
		margin-top: 50rpx;
		align-self: flex-start;
	}
	.equal-division-item_3 {
		flex: 1 1 162rpx;
		padding: 9rpx 0 10rpx;
		width: 162rpx;
	}
	.text_20 {
		margin-top: 24rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
	}
}
.share-panel{
	.img{
		width: 600rpx;
		height: 679rpx;
		border-radius: 20rpx;
	}
	.ic{
		margin: 30rpx auto 0;
		color:#000;
		font-size: 46rpx;
	}
}
.bomimg{
	width: 244rpx;
	height: 86rpx;
	margin: 100rpx auto 30rpx;
}
</style>