zxz

pages/login/agreement.vue

@@ -0,0 +1,57 @@
+<template>
+	<view>
+		<view class="article">
+			<view class="article-tit">
+				“荆州工会鹊桥”会员注册协议
+			</view>
+			<view class="article-con">
+				<p>甲方：荆州市总工会</p>
+				<p>乙方：“荆州工会鹊桥”会员</p>
+				</br> 
+				
+				<p>为确保荆州市总工会主办的“荆州工会鹊桥”小程序（通过关注“湖北省总工会”微信公众号——点击进入）正常运行，保证甲乙双方的权利和义务，现制定相关协议如下：</p>
+				<p>1、乙方工作地点在湖北省荆州市内，非荆州市内工作者勿入。</p>
+				<p>2、凡需要注册的乙方，个人资料必须真实填写，并通过本单位工会审核、逐级上报至甲方核准同意后，方可注册成功并登录平台。乙方因虚假个人资料导致有关法律纠纷，由乙方承担由此带来的一切法律责任，甲方不承担任何法律责任。</p>
+				<p>3、乙方注册信息授权甲方在“荆州工会鹊桥”平台中使用，甲方承诺严格保密。</p>
+				<p>4、乙方有权管理自己的个人信息，可根据实际更改或删除个人信息，甲方尊重乙方的个人意愿。</p>
+				<p>5、乙方必须遵守相关网络文明公约，不得在“荆州工会鹊桥”平台上发表反动言论、污秽言语等。一经发现，即取消会员资格。</p> 
+				<p>6、乙方在与有交往意愿的异性联系时，请鉴别信息真伪，进一步核实对方的个人资料，如因对方个人资料真伪导致后续交往中产生的一切纠纷，由乙方自行解决和承担相关法律责任。</p>
+				<p>7、此“荆州工会鹊桥”平台纯属公益性，平台设立、信息发布、咨询服务及其后组织的会员线下联谊等活动一概全免费，甲方不向乙方收取任何费用。如有其他单位或个人假借甲方的名义以电话、信息等形式向乙方索取费用的，请核实真伪，注意防骗。</p>
+				<p>8、任何单位和个人不得以甲方的名义，窃取乙方的相关个人信息，不得介绍到其他相亲机构，不得在任何其他网站、媒体上发布乙方的相关信息等。一经发现，严肃追责。鼓励乙方对这种情况及时举报给甲方。</p></p>
+				<p>9、乙方不得向第三方透露平台上除自己以外其他会员的个人信息。</p>
+				<p>10、为确保会员信息的及时有效性，确保“荆州工会鹊桥”会员均为单身职工，平台更新时限为1年，每年甲方组织审核一次“荆州工会鹊桥”会员登记情况，及时予以更新。</p></p>
+				<p>11、乙方已结婚或有固定交往的异性朋友，应当及时申请退出平台，并告知所在单位工会。如发现已领结婚证还注册在线的会员，甲方有权利删除该会员信息。</p>
+				<p>12、上述所有解释权归甲方所有。</p>
+
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.article{
+		padding: 15px;
+		.article-tit{
+			font-size: 20px;
+			margin-bottom:30px;
+		}
+		.article-con{
+			font-size: 14px;
+			line-height: 28px;
+		}
+	}
+</style>

pages/login/change.vue

@@ -0,0 +1,149 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>更换手机号</h2>
+				<p>验证成功后绑定新号码</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-form :model="form" ref="uForm">
+					<view class="jpLogin-input" style="margin-top:60px;">
+						<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请填写手机号" /></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-icon custom-prefix="custom-icon" name="message-3-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请输入验证码" /></u-form-item>
+					</view>
+					<view class="jpLogin-link">
+						<view class="jpLogin-link-l">
+						</view>
+						<span>获取验证码</span>
+					</view>
+					<view class="jpLogin-input" style="margin-top:40px;">
+						<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请填写新手机号" /></u-form-item>
+					</view>
+				</u-form>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">完成绑定</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+				},
+				value:'0',
+				customStyle:{
+					background: '#FF5E5E'
+				}
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px;
+		margin-bottom: 20px;
+		position: relative;
+		.u-form-item{
+			flex: 1;
+		}
+		.jpLogin-icon{
+			font-size: 20px;
+			color:#FFC1C1;
+			margin-right: 20px;
+			position: relative;
+			&:after{
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color:#E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+		.jpLogin-warn{
+			position: absolute;
+			right: 20px;
+			top: 14px;
+			font-size: 20px;
+			color: #FFC1C1;
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+		p{
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+		span{
+			color:#ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/login/register.vue

@@ -0,0 +1,166 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>新用户注册</h2>
+				<p>请填写您的真实信息</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-form :model="form" ref="uForm">
+					<view class="jpLogin-input">
+						<u-icon custom-prefix="custom-icon" name="user-2-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请填写您的真实姓名" /></u-form-item>
+						<u-icon custom-prefix="custom-icon" name="information-line" class="jpLogin-warn"></u-icon>
+					</view>
+					<view class="jpLogin-input">
+						<u-icon custom-prefix="custom-icon" name="profile-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请填写18位身份证号" /></u-form-item>
+						<u-icon custom-prefix="custom-icon" name="information-line" class="jpLogin-warn"></u-icon>
+					</view>
+					<view class="jpLogin-input">
+						<u-icon custom-prefix="custom-icon" name="building-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.sex" type="select" placeholder="请选择所属工会"/></u-form-item>
+					</view>
+					<view class="jpLogin-input" style="margin-top:60px;">
+						<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请填写手机号码" /></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-icon custom-prefix="custom-icon" name="message-3-fill" class="jpLogin-icon"></u-icon>
+						<u-form-item><u-input v-model="form.name" placeholder="请输入验证码" /></u-form-item>
+					</view>
+				</u-form>
+				<view class="jpLogin-link">
+					<view class="jpLogin-link-l">
+						<p>已有账号，</p>
+						<span>登录</span>
+					</view>
+					<span>获取验证码</span>
+				</view>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">注册并登录</u-button>
+			</view>
+			<view class="jpLogin-radio">
+				<u-radio-group v-model="value">
+					<u-radio activeColor="#ff5e5e"><view class="u-flex"><p>已阅读并同意</p><span>《会员服务协议》</span></view></u-radio>
+				</u-radio-group>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+				},
+				value:'0',
+				customStyle:{
+					background: '#FF5E5E'
+				}
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px;
+		margin-bottom: 20px;
+		position: relative;
+		.u-form-item{
+			flex: 1;
+		}
+		.jpLogin-icon{
+			font-size: 20px;
+			color:#FFC1C1;
+			margin-right: 20px;
+			position: relative;
+			&:after{
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color:#E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+		.jpLogin-warn{
+			position: absolute;
+			right: 20px;
+			top: 14px;
+			font-size: 20px;
+			color: #FFC1C1;
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+		p{
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+		span{
+			color:#ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/login/search.vue

@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<view class="search">
+			<u-search placeholder="输入关键字查询工会" v-model="keyword" :action-style="actionStyle"></u-search>
+		</view>
+		<view class="searchList">
+			<view class="searchList-item">
+				湖北荆鹏软件开发有限公司工会
+			</view>
+			<view class="searchList-item">
+				湖北荆鹏软件开发有限公司工会
+			</view>
+			<view class="searchList-item">
+				湖北荆鹏软件开发有限公司工会
+			</view>
+			<view class="searchList-item">
+				湖北荆鹏软件开发有限公司工会
+			</view>
+			<view class="searchList-item">
+				湖北荆鹏软件开发有限公司工会
+			</view>
+
+			<u-divider color="#B6BDC3" style="margin-top:20px;">已经到底了</u-divider>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				keyword: '',
+				actionStyle:{
+					background: '#FF5E5E',
+					color:'#ffffff',
+					padding:'5px 0',
+					width:'60px',
+					borderRadius:'15px',
+				},
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.search{
+		padding:10px 15px;
+	}
+	.searchList{
+		padding:0 15px;
+		.searchList-item{
+			border-bottom: 1px solid #E5E7EA;
+			padding:15px 0; 
+		}
+	}
+</style>

pages/login/searchNone.vue

@@ -0,0 +1,56 @@
+<template>
+	<view>
+		<view class="search">
+			<u-search placeholder="输入关键字查询工会" v-model="keyword" :action-style="actionStyle"></u-search>
+		</view>
+		<view class="jpDefault">
+			<u-image width="179px" height="126px" src="/static/img/default1.png"></u-image>
+			<p>没有匹配的搜索结果</p>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				keyword: '',
+				actionStyle:{
+					background: '#FF5E5E',
+					color:'#ffffff',
+					padding:'5px 0',
+					width:'60px',
+					borderRadius:'15px',
+				},
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.search{
+		padding:10px 15px;
+	}
+	.searchList{
+		padding:0 15px;
+		.searchList-item{
+			border-bottom: 1px solid #E5E7EA;
+			padding:15px 0; 
+		}
+	}
+	.jpDefault{
+		padding-top:150px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		p{
+			color: #A69F9F;
+			font-size: 16px;
+			margin-top: 12px;
+		}
+	}
+</style>

pages/login/step1.vue

@@ -0,0 +1,141 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>填写基础信息<span>1</span>/4</h2>
+				<p>交友第一步，简单介绍下自己吧~</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-form :model="form" ref="uForm">
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="请选择生日"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="请选择身高"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item><u-input v-model="form.name" placeholder="请选择填写体重"/></u-form-item>
+					</view>
+				</u-form>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">下一步</u-button>
+				<view class="step-btn">跳过</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+				},
+				value:'0',
+				customStyle: {
+					background: '#FF5E5E'
+				}
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+	.step-btn{
+		text-align: center;
+		margin-top: 20px;
+		color: #444953 ;
+	}
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+		span{
+			color: #FF5E5E;
+			margin-left: 5px;
+		}
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px 0 30px;
+		margin-bottom: 20px;
+		.u-form-item{
+			flex: 1;
+		}
+		.jpLogin-icon{
+			font-size: 20px;
+			color:#FFC1C1;
+			margin-right: 20px;
+			position: relative;
+			&:after{
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color:#E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+		p{
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+		span{
+			color:#ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/login/step2.vue

@@ -0,0 +1,195 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>完善个人信息<span>2</span>/4</h2>
+				<p>完善资料，才能给您精准匹配对象哦~</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-form :model="form" ref="uForm">
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的出生地"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的的户口所在地"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的工作所在地"/></u-form-item>
+					</view>
+					
+					<view class="jpLogin-input" style="margin-top: 38px;">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的学历"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的行业"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.name" placeholder="我的工作单位"/></u-form-item>
+						<u-icon custom-prefix="custom-icon" name="information-line" class="jpLogin-warn"></u-icon>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.name" placeholder="我的岗位"/></u-form-item>
+					</view>
+					
+					<view class="jpLogin-input" style="margin-top: 38px;">
+						<u-form-item><u-input v-model="form.sex" type="select" placeholder="我的月薪范围"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item><u-input v-model="form.sex" type="select" placeholder="我的住房情况"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的婚姻状况"/></u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item required="true"><u-input v-model="form.sex" type="select" placeholder="我的子女状况"/></u-form-item>
+					</view>
+					
+					<view class="form-tit">
+						自我评价
+					</view>
+					<view class="jpLogin-textarea">
+						<u-form-item>
+							<u-input v-model="form.value" type="textarea" placeholder="" />
+						</u-form-item>
+					</view>
+				</u-form>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">下一步</u-button>
+				<view class="step-btn">返回上一步</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+				},
+				value:'0',
+				customStyle: {
+					background: '#FF5E5E'
+				}
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.form-tit{
+		color: #999;
+		margin-bottom: 8px;
+	}
+	.jpLogin-textarea{
+		background: #fff;
+		border-radius: 12px;
+		border: 1px #EEDCDC solid;
+		padding:0 15px;
+	}
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+	.step-btn{
+		text-align: center;
+		margin-top: 20px;
+		color: #444953 ;
+	}
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+		span{
+			color: #FF5E5E;
+			margin-left: 5px;
+		}
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px;
+		margin-bottom: 20px;
+		position: relative;
+		.u-form-item{
+			flex: 1;
+		}
+		.jpLogin-icon{
+			font-size: 20px;
+			color:#FFC1C1;
+			margin-right: 20px;
+			position: relative;
+			&:after{
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color:#E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+		.jpLogin-warn{
+			position: absolute;
+			right: 20px;
+			top: 14px;
+			font-size: 20px;
+			color: #FFC1C1;
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+		p{
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+		span{
+			color:#ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/login/step3.vue

@@ -0,0 +1,195 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>我的择偶标准 <span>3</span>/4</h2>
+				<p>完善择偶信息，能显著提升成功率哦~</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-form :model="form" ref="uForm">
+					<view class="jpLogin-input">
+						<u-form-item required="true">
+							<u-input v-model="form.sex" type="select" placeholder="Ta的年龄段范围" />
+						</u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item>
+							<u-input v-model="form.sex" type="select" placeholder="Ta的学历是" />
+						</u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item>
+							<u-input v-model="form.sex" type="select" placeholder="Ta的收入范围" />
+						</u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item>
+							<u-input v-model="form.name" placeholder="Ta的职业要求" />
+						</u-form-item>
+					</view>
+					<view class="jpLogin-input">
+						<u-form-item>
+							<u-input v-model="form.sex" type="select" placeholder="Ta的工作所在地" />
+						</u-form-item>
+					</view>
+					<view class="form-tit">
+						其他要求
+					</view>
+					<view class="jpLogin-textarea">
+						<u-form-item>
+							<u-input v-model="form.value" type="textarea" placeholder="" />
+						</u-form-item>
+					</view>
+				</u-form>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">下一步</u-button>
+				<view class="step-btn">返回上一步</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+					value: '',
+				},
+				value: '0',
+				customStyle: {
+					background: '#FF5E5E'
+				}
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.form-tit{
+		color: #999;
+		margin-bottom: 8px;
+	}
+	.jpLogin-textarea{
+		background: #fff;
+		border-radius: 12px;
+		border: 1px #EEDCDC solid;
+		padding:0 15px;
+	}
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+
+	.step-btn {
+		text-align: center;
+		margin-top: 20px;
+		color: #444953;
+	}
+
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+
+		span {
+			color: #FF5E5E;
+			margin-left: 5px;
+		}
+
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px;
+		margin-bottom: 20px;
+		position: relative;
+
+		.u-form-item {
+			flex: 1;
+		}
+
+		.jpLogin-icon {
+			font-size: 20px;
+			color: #FFC1C1;
+			margin-right: 20px;
+			position: relative;
+
+			&:after {
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color: #E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+
+		.jpLogin-warn {
+			position: absolute;
+			right: 20px;
+			top: 14px;
+			font-size: 20px;
+			color: #FFC1C1;
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+
+	.jpLogin-radio {
+		margin-top: 16px;
+		text-align: center;
+
+		p {
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+
+		span {
+			color: #ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/login/step4.vue

@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<view class="jpLogin">
+			<view class="jpLogin-title">
+				<h2>上传您的头像 <span>4</span>/4</h2>
+				<p>选择一张你的优质照片作为头像吧~</p>
+			</view>
+			<view class="jpLogin-main">
+				<u-upload :action="action" :file-list="fileList" ></u-upload>
+			</view>
+			<view style="margin-top: 60px;">
+				<u-button type="error" shape="circle" :custom-style="customStyle">确认提交</u-button>
+				<view class="step-btn">返回上一步</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				action: 'http://www.example.com/upload',
+				fileList: [
+					{
+						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
+					}
+				]
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.jpLogin {
+		background: url(/static/img/loginBg.png) top center no-repeat;
+		background-size: 100%;
+		min-height: 100vh;
+		padding: 50px;
+	}
+	.step-btn {
+		text-align: center;
+		margin-top: 20px;
+		color: #444953;
+	}
+	.jpLogin-title {
+		h2 {
+			font-size: 24px;
+			font-weight: normal;
+		}
+		span{
+			color: #FF5E5E;
+			margin-left: 5px;
+		}
+		p {
+			color: #777;
+			font-size: 14px;
+			margin-top: 3px;
+		}
+	}
+
+	.jpLogin-main {
+		margin-top: 40px;
+	}
+
+	.jpLogin-input {
+		height: 48px;
+		background-color: #fff;
+		border: 1px solid #EEDCDC;
+		border-radius: 50px;
+		display: flex;
+		width: 100%;
+		padding: 0 20px;
+		margin-bottom: 20px;
+		.u-form-item{
+			flex: 1;
+		}
+		.jpLogin-icon{
+			font-size: 20px;
+			color:#FFC1C1;
+			margin-right: 20px;
+			position: relative;
+			&:after{
+				content: '';
+				width: 1px;
+				height: 16px;
+				background-color:#E6D6D6;
+				position: absolute;
+				right: -10px;
+				top: 15px;
+			}
+		}
+	}
+
+	.jpLogin-link {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 14px;
+
+		.jpLogin-link-l {
+			display: flex;
+			align-items: center;
+
+			p {
+				color: #4f4646;
+			}
+		}
+
+		span {
+			color: #1677FF;
+		}
+	}
+	.jpLogin-radio{
+		margin-top: 16px;
+		text-align: center;
+		p{
+			font-size: 14px;
+			color: #a0a4b8;
+		}
+		span{
+			color:#ff5e5e;
+			font-size: 14px;
+		}
+	}
+</style>

pages/news/detalis.vue

@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<view class="article">
+			<view class="article-tit">
+				在常态化疫情防控中促进经济向好发展，培育壮大新的增长点增长极，牢牢把握发展主动权
+			</view>
+			<view class="article-row">
+				<view class="article-time">2021-01-20 09:00:00</view>
+				<view class="article-see">
+					<u-icon custom-prefix="custom-icon" name="eye-line"></u-icon>
+					<span>321</span>
+				</view>
+			</view>
+			<view class="article-con">
+				<p>完整的产业体系、广阔的内需市场、丰富的人力资源
+					是经济向好发展的重要条件，具有比较优势的数字技术
+					及新型生产经营模式是经济向好发展的有力支撑。贯彻
+					落实党中央决策部署，就能变压力为动力、化危为机,
+					在常态化疫情防控中促进经济向好发展，培育壮大新的
+					增长点增长极，牢牢把握发展主动权。
+					4月17日召开的中共中央政治局会议指出，今年- -季
+					度极不寻常，突如其来的新冠肺炎疫情对我国经济社会
+					发展带来前所未有的冲击;要在稳的基础上积极进取,
+					在常态化疫情防控中全面推进复工复产达产，恢复正常
+					经济社:会秩序，培育壮大新的增长点增长极，牢牢把握
+					发展主动权。当前，我国疫情防控向好态势进一一步巩
+					固，但国际疫情持续蔓延，防范疫情输入压力不断加
+					大，复工复产和经济社会发展面临新的困难和挑战。我
+					们要按照习近平总书记重要讲话、重要指示精神和党中
+					央决策部署，坚持底线思维，做好较长时间应对外部环
+					境变化的思想准备和工作准备，在常态化疫情防控中全
+					力促进经济向好发展，确保完成决战决胜脱贫攻坚目标
+					任务，全面建成小康社会。
+					</p>
+				<img src="/static/img/user1.jpg" alt="">
+			</view>
+			<view class="article-foot">
+				<view class="u-flex">
+					<view class="article-btn">
+						<u-icon custom-prefix="custom-icon" name="zoom-in-line"></u-icon>
+						<span>放大</span>
+					</view>
+					<view class="article-btn">
+						<u-icon custom-prefix="custom-icon" name="zoom-out-line"></u-icon>
+						<span>缩小</span>
+					</view>
+				</view>
+
+				<view class="article-btn">
+					<u-icon custom-prefix="custom-icon" name="align-top"></u-icon>
+					<span>回顶</span>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+			methods: {
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.article{
+		padding: 15px;
+		.article-tit{
+			font-size: 20px;
+			margin-bottom:10px;
+		}
+		.article-row{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			color: #888;
+			font-size: 12px;
+			border-bottom: 1px solid #F1F1F1;
+			padding-bottom: 15px;
+			.article-time{}
+			.article-see{
+				span{
+					margin-left:3px;
+				}
+			}
+		}
+		.article-con{
+			padding: 15px 0 35px;
+			font-size: 14px;
+			line-height: 28px;
+			img{
+				width: 100%;
+				margin: 10px 0;
+			}
+		}
+		
+		.article-foot{
+			height: 50px;
+			position:fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: #fff;
+			border-top: 1px solid #f7f7f7;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding:0 15px;
+			.article-btn{
+				background: #E5E7EA;
+				padding:6px 10px;
+				color: #606875;
+				border-radius: 8px;
+				span{
+					margin-left: 3px;
+				}
+			}
+			.u-flex .article-btn{
+				margin-right: 10px;
+			}
+		}
+	}
+</style>