xiaokuaisong-xiaochengxu/uniapp04/pages/message/message.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>