yanzong_qianduan/pages/news/user/vip.vue

<template>
	<view class="user">
		<view class="search">
		  <view class="box">
			  <image src="/static/news/icon-search.png"></image>
			  <input type="search" placeholder="商品名称/编码" />
		  </view>
		</view>
		<view class="user-bd">
			<view class="li" v-for="i in 2" :key="i">
				<view class="a">
					<view class="l">
						<image src="@/static/news/avater.png"></image>
					</view>
					<view class="m">
						<view class="n">昵称</view>
						<view class="n">真实姓名：张三</view>
						<view class="n">18089800909<image src="@/static/news/icon-copy.png"></image></view>
					</view>
					<view class="r">
						<view class="btn">会员</view>
						<image src="@/static/news/tel.png"></image>
					</view>
				</view>
				<view class="b">
					<view class="l">余额(元）<text>¥0.00</text></view>
					<view class="l">积分(分）<text>0.00</text></view>
				</view>
			</view>
			<view class="li" v-for="i in 2" :key="i">
				<view class="a">
					<view class="l">
						<image src="@/static/news/avater.png"></image>
					</view>
					<view class="m">
						<view class="n">昵称</view>
						<view class="n">真实姓名：张三</view>
						<view class="n">18089800909<image src="@/static/news/icon-copy.png"></image></view>
					</view>
					<view class="r">
						<view class="btn btn-on">游客</view>
						<image src="@/static/news/tel.png"></image>
					</view>
				</view>
				<view class="b">
					<view class="l">余额(元）<text>¥0.00</text></view>
					<view class="l">积分(分）<text>0.00</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.user{
	padding: 0 0 130rpx;
	overflow: hidden;
	.search{
		width: 750rpx;
		padding: 35rpx;
		box-sizing: border-box;
		.box{
			padding: 15rpx 25rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: #F3F3F3;
			border-radius: 60rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 22rpx;
			}
			input{
				flex: 1;
				font-size: 28rpx;
				line-height: 30rpx;
			}
		}
	}
	&-bd{
		padding: 0 30rpx;
		overflow: hidden;
		.li{
			padding: 0 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			border-radius: 12rpx;
			margin-top: 20rpx;
			&:first-child{
				margin-top: 0;
			}
			.a{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 15rpx 0 30rpx;
				border-bottom: 1px solid #F2F2F2;
				.l{
					width: 114rpx;
					height: 114rpx;
					margin-right: 25rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.m{
					flex: 1;
					max-width: 400rpx;
					margin-right: 20rpx;
					.n{
						font-size: 28rpx;
						font-weight: 400;
						color: #545454;
						height: 50rpx;
						image{
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
							vertical-align: middle;
							margin-top: -1px;
						}
					}
				}
				.r{
					width: 98rpx;
					overflow: hidden;
					.btn{
						width: 98rpx;
						line-height: 64rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						text-align: center;
						border: 1px solid #FF6257;
						font-size: 28rpx;
						font-weight: 400;
						color: #FF6257;
						&-on{
							border-color:#FFA928;
							color: #FFA928;
						}
					}
					image{
						display: block;
						width: 30rpx;
						height: 30rpx;
						float: right;
						margin-top: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
			.b{
				padding-top: 30rpx;
				padding-bottom: 20rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				.l{
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #454545;
					text{
						font-size: 28rpx;
						font-weight: 400;
						color: #B1B1B1;
						display: block;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
}
</style>