159 lines
3.3 KiB
Vue
159 lines
3.3 KiB
Vue
<template>
|
|
<view class="top-bg"></view>
|
|
<view class="box">
|
|
<view class="head-box">
|
|
<button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
|
|
<image class="head-img" src="https://c-ssl.duitang.com/uploads/blog/202105/16/20210516104840_efa71.thumb.1000_0.jpg" mode="widthFix"></image>
|
|
</button>
|
|
</view>
|
|
<view class="end">
|
|
<view open-type="share" class="row" style="width: 100%;">
|
|
<view class="left">
|
|
<text class="text">账号:</text>
|
|
<input class="uni-input" name="input" placeholder="请输入账号"/>
|
|
</view>
|
|
</view>
|
|
<view open-type="contact" class="row" style="width: 100%;">
|
|
<view class="left">
|
|
<text class="text">性别:</text>
|
|
<uni-combox :border="false" :candidates="candidates" placeholder="请选择性别"></uni-combox>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="end">
|
|
<view open-type="share" class="row" style="width: 100%;">
|
|
<view class="left">
|
|
<text class="text">出生日期:</text>
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" class="timeborder"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="end">
|
|
<view open-type="share" class="row" style="width: 100%;">
|
|
<view class="left">
|
|
<text class="text">手机号:</text>
|
|
<input class="uni-input" name="input" placeholder="请输入手机号" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button form-type="submit">提交</button>
|
|
<button type="default" form-type="reset">重置</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
candidates: ['男', '女'],
|
|
city: '',
|
|
single: '',
|
|
datetimesingle: '',
|
|
range: ['2021-02-1', '2021-3-28'],
|
|
datetimerange: [],
|
|
start: Date.now() - 1000000000,
|
|
end: Date.now() + 1000000000
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.uni-form-item .title {
|
|
padding: 20rpx 0;
|
|
}
|
|
.top-bg {
|
|
height: 150px;
|
|
background-color: #4095e5;
|
|
}
|
|
|
|
.box {
|
|
background-color: white;
|
|
margin-top: -120rpx;
|
|
border-top-left-radius: 50rpx;
|
|
border-top-right-radius: 50rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.head-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #f1f1f1;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-top: -80rpx;
|
|
font-weight: inherit;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.avatar::after {
|
|
border: none;
|
|
}
|
|
|
|
.head-img {
|
|
border-radius: 50%;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 36rpx 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: inherit;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-bottom: 1rpx solid #f1f1f1;
|
|
}
|
|
|
|
.row::after {
|
|
border: none;
|
|
}
|
|
|
|
.text {
|
|
margin-left: 15rpx;
|
|
color: #636262;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.left {
|
|
width: 100%;
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right {
|
|
width: 10%;
|
|
text-align: right;
|
|
color: rgb(148, 147, 147);
|
|
}
|
|
|
|
.end {
|
|
background-color: white;
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
.example-body {
|
|
padding: 12px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.result-box {
|
|
text-align: center;
|
|
padding: 20px 0px;
|
|
font-size: 16px;
|
|
}
|
|
</style> |