popularize-front/pages/index/member.vue

<template>
	<view class="page">
		<view class="head-box"></view>
		<uv-navbar title="招募" leftIcon=" " :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
		<view class="content">
			<view class="search-box">
				<view class="search-box-r">
					<uv-search placeholder="搜索感兴趣的活动" v-model="keyword" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#4A2A2B" height="63rpx"></uv-search>
				</view>
			</view>
			<view class="user-box">
				<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff" size="98rpx" shape="circle"></uv-avatar>
				<view class="user-msg">
					<view class="user-msg-top">
						<view>点击授权登录</view>
						<view class="level-box">普通用户</view>
					</view>
					<view class="id-box">
						<text>ID:000001</text>
						<text class="copy-text">复制</text>
					</view>
				</view>
			</view>
		
			<view class="swipe-box">
				<uv-swiper :list="list" height="280rpx" bgColor="transparent" radius="30rpx"></uv-swiper>
			</view>
			
			<view class="zlr-box" @click="toRenzheng">
				<view class="zlr-box-l">
					<image src="@/static/image/member/zlr-icon.png" mode="widthFix"></image>
					<view>主理人认证</view>
				</view>
				<view class="zlr-box-r">
					<view>获取更多身份特权</view>
					<image src="@/static/image/member/zlr-arrow.png" mode="widthFix"></image>
				</view>
			</view>
		
			<view class="list-box">
				<zhaomu-item></zhaomu-item>
			</view>
		</view>


		<tabber select="member" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import zhaomuItem from '@/components/zhaomu/zhaomu-item.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			tabber,
			zhaomuItem
		},
		data() {
			return {
				bgColor:'transparent',
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},
		computed : {
		},
		onLoad({leftClick}) {
		},
		onShow() {
			
		},
		onPageScroll(e) {
		    if(e.scrollTop > 50) {
		        this.bgColor ='#49070c'
		    }else{
		        this.bgColor ='transparent'
		    }
		},
		methods:{
			toRenzheng() {
				uni.navigateTo({
					url:'/pages_zlx/zlx-form'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style lang="scss">
	.page {
		.head-box {
			background: url('@/static/image/nav-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 534rpx;
			position: absolute;
		}
		.content {
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 110rpx);
			
			.search-box {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				&-r {
					flex:1;
				}
			}
			
			.user-box {
				display: flex;
				align-items: center;
				margin-bottom: 33rpx;
				.user-msg {
					margin-left: 20rpx;
					.user-msg-top {
						font-weight: 600;
						font-size: 32rpx;
						color: #E6E6E6;
						display: flex;
						align-items: center;
						.level-box {
							width: 108rpx;
							height: 31rpx;
							background: RGBA(40, 19, 4, 1);
							border-radius: 16rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FF9C00;
							text-align: center;
							margin-left: 14rpx;
						}
					}
				
					.id-box {
						color: #999999;
						font-size: 22rpx;
						margin-top: 20rpx;
						.copy-text {
							font-weight: 400;
							font-size: 22rpx;
							color: #E6E6E6;
							margin-left: 18rpx;
						}
					}
				}
			}
			
			.swipe-box {
				margin-bottom: 31rpx;
			}
			
			.zlr-box {
				background: url('@/static/image/member/zlr-bg.png') no-repeat;
				background-size: 100% 100%;
				height: 124rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 46rpx;
				margin-bottom: 32rpx;
				&-l {
					font-weight: 600;
					font-size: 32rpx;
					color: #FF3B47;
					display: flex;
					align-items: center;
					image {
						width: 72rpx;
						margin-right: 24rpx;
					}
				}
				&-r {
					font-weight: 400;
					font-size: 25rpx;
					color: #FF8E00;
					display: flex;
					align-items: center;
					image {
						width: 12rpx;
						margin-left: 12px;
					}
				}
			}
		
			.list-box {
			}
		}
	}
</style>