资料页面

<template>
	<view class="">
		<view class="orchat-list">
			<image src="/template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
			<view class="orchat-box">
				上传头像
			</view>
			<view class="orchat-r">	
				<i class="iconfont icon-youjiantou"></i>
			</view>
		</view>
		<view class="orchat-list">
			<view class="name">
				<view class="orchat-name">
					昵称
				</view>
				<view class="orchat-text">
					<input class="input" value="游客4334490" placeholder="昵称">
				</view>
			</view>
			<view class="name">
				<view class="orchat-name">
					手机号码
				</view>
				<view class="orchat-text">
					<input class="input" disabled="" value="****" placeholder="手机号码">
					<view href="javascript:;" class="btn" onclick="phone()">绑定/更换</view>
				</view>
			</view>
			<view class="name">
				<view class="orchat-name">
					性别
				</view>
				<view class="orchat-radio">
					<text>男</text>
					<text>女</text>
				</view>
			</view>
			<view class="name">
				<view class="orchat-name">
					签名
				</view>
				<view class="orchat-text">
					<textarea name="description" id="description" placeholder="多行文本框" class="layui-textarea">什么都没留下</textarea>
				</view>
			</view>
			<view class="name">
				<view class="orchat-name">
					账户信息
				</view>
				<view class="orchat-text">
					<input class="input" disabled="" value="****" autocomplete="off" placeholder="手机号码">
					<view href="/t-zhuxiao.html" class="btn" style="background-color: #9E9E9E;">注销</view>
				</view>
			</view>
		</view>
		<view class="orchat-list">
			<button class="tijiao-btn">立即提交</button>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page{background-color:#f2f5f9}
	.orchat-list {
	    background-color: white;
	    padding: 20px;
	    overflow: auto;
		margin-bottom: 10px;
	}
	.orchat-list .name {
	    display: block;
	    line-height: 50px;
	    overflow: auto;
	}
	.orchat-list .img {
	    width: 60px;
	    height: 60px;
	    float: left;
	    padding: 5px;
	}
	.orchat-list .orchat-box {
	    float: left;
	    width: calc(100% - 140px);
	    height: 60px;
	    line-height: 60px;
	    padding: 5px;
	}
	.orchat-list .orchat-r {
	    float: right;
	    width: 28px;
	    text-align: right;
	    height: 60px;
	    line-height: 60px;
	    padding: 5px;
	}
	.orchat-list .orchat-name {
	    float: left;
	    width: 80px;
	}
	.orchat-list .orchat-text {
	    float: left;
	    width: calc(100% - 80px);
	    position: relative;
	}
	.orchat-list .orchat-text .input {
	    width: calc(100% - 10px);
	    line-height: 32px;
		height: 32px;
	    padding: 5px;
	    border-bottom: 1px solid #eaeaea;
	    font-size: 14px;
	    color: grey;
	    background-color: white;
	}
	.orchat-list .orchat-text .btn {
	    background-color: #0075ff;
	    font-size: 14px;
	    color: aliceblue;
	    border-radius: 5px;
	    right: 0px;
	    position: absolute;
	    top: 10px;
	    display: block;
	    line-height: 30px;
	    padding: 0 10px;
	}
	.orchat-list .orchat-text textarea {
	    width: calc(100% - 12px);
	    height: 69px;
	    padding: 5px;
	    border: 1px solid #eaeaea;
	    font-size: 14px;
	    color: grey;
	    background-color: white;
	}
	.orchat-list .orchat-radio {
	    float: left;
	    width: calc(100% - 80px);
	    text-align: right;
	}
	.orchat-list .orchat-radio text{
		background-color: #adadad;
		    color: white;
		    padding: 3px 20px;
		    margin-left: 10px;
		    border-radius: 5px;
	}
	.orchat-list .tijiao-btn {
	    display: inline-block;
	    vertical-align: middle;
	    height: 38px;
	    line-height: 38px;
	    border: 1px solid transparent;
	    padding: 0 18px;
	    background-color: #0075ff;
	    color: #fff;
	    white-space: nowrap;
	    text-align: center;
	    font-size: 14px;
	    border-radius: 2px;
	    cursor: pointer;
	    -moz-user-select: none;
	    -webkit-user-select: none;
	    -ms-user-select: none;
	    width: 100%;
	}
</style>