直播app開發搭建，註冊頁面樣式，全部程式碼

直播app開發搭建，註冊頁面樣式，全部程式碼

<template>
<view>
<view>
新使用者註冊
</view>
<image :src="sanjiao" mode="widthFix"></image>
<!-- <image style="width: 100vw;" :src="bolang" mode="widthFix"></image> -->
<view>
<view>
<view>
姓&#12288;&#12288;名
</view>
<input class="input w100" type="number" placeholder-class="placeholderClass"
placeholder="請輸入姓名"></input>
</view>
<view>
<view>
手機號碼
</view>
<input class="input w100" type="number" placeholder-class="placeholderClass"
placeholder="11位手機號碼"></input>
<view>
獲取驗證碼
</view>
</view>
<view>
<view class="left " style="letter-spacing: 16rpx;">
驗證碼
</view>
<input class="input w100" type="text" placeholder-class="placeholderClass" placeholder="請輸入驗證碼"></input>
</view>
<view>
<view>
醫&#12288;&#12288;院
</view>
 
<picker mode="multiSelector" :value="multiIndex" range-key="name" :range="multiArray"
@columnchange="MultiPickerColumnChange" @change="MultiPickerChange">
 
<input type="text" placeholder-class="placeholderClass" placeholder="請輸入您的醫院"></input>
 
</picker>
</view>
<view>
<view>
科&#12288;&#12288;室
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="請輸入您的科室"></input>
</view>
<view>
<view>
職&#12288;&#12288;務
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="請輸入您的職務"></input>
</view>
<view>
<view>
性&#12288;&#12288;別
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="請輸入您的性別"></input>
</view>
</view>
<view>
 
</view>
<view @click="goIndex">
提 交
</view>
</view>
</template>
 
<script>
var that;
import {
city,
province
} from '@/util/city.js'
export default {
data() {
return {
sanjiao: this.$config.cdn_url + 'sanjiao.png',
bolang: this.$config.cdn_url + 'bolang.png',
multiArray: [province, []],
multiIndex: [0, 0],
pid: '',
cid: '',
pname: '',
cname: '',
}
},
onLoad(option) {
this.$common.Init.call(this);
that = this;
console.log('option', option)
console.log('city', city)
 
city.forEach(item => {
if (item.pid == province[0].pid) this.multiArray[1].push(item)
// if(item.pid==this.multiArray[0][this.multiIndex[0]].pid)
})
},
onShow() {
 
},
onHide() {},
methods: {
MultiPickerColumnChange(e) {
console.log('MultiPickerColumnChange', e)
console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
var column = e.detail.column;
var value = e.detail.value;
switch (e.detail.column) {
case 0:
this.multiArray[1] = []
city.forEach(item => {
if (item.pid == province[value].pid) this.multiArray[1].push(item)
})
break;
case 1:
break;
}
 
},
MultiPickerChange(e) {
console.log('MultiPickerChange', e)
 
var value = e.detail.value;
this.pname = this.multiArray[0][value[0]].name;
this.cname = this.multiArray[1][value[1]].name;
 
this.pid = this.multiArray[0][value[0]].pid;
this.cid = this.multiArray[1][value[1]].cid;
console.log('pid', this.pid,this.pname)
console.log('cid', this.cid,this.cname)
 
},
goIndex() {
let url = '/pages/index/index'
this.goOtherPages(url)
}
}
}
</script>
 
<style scoped>
.page {
top: 0;
height: 100vh;
}
 
.sanjiao {
width: 38rpx;
position: absolute;
right: 50rpx;
top: 180rpx;
}
 
.btn {
background: #D7000F;
width: 320rpx;
margin-left: -160rpx;
transform: translateX(50vw);
position: absolute;
height: 80rpx;
font-size: 36rpx;
font-weight: 600;
line-height: 80rpx;
border-radius: 50rpx;
margin-top: 134rpx;
text-align: center;
color: #fff;
}
 
.top {
background: #D7000F;
text-align: center;
width: 100vw;
height: 180rpx;
line-height: 180rpx;
color: #fff;
font-weight: 600;
font-size: 40rpx;
 
}
 
.centent {
margin-top: 60rpx;
width: 85%;
margin-left: 10%;
 
.p_r {
margin-bottom: 40rpx;
height: 60rpx;
line-height: 60rpx;
}
 
.left {
width: 150rpx;
}
 
.input {
border: 1px solid #d0d0d0;
height: 60rpx;
border-radius: 8rpx;
padding-left: 12rpx;
width: 450rpx;
font-size: 28rpx;
}
 
.placeholderClass {
font-size: 28rpx;
}
 
.w100 {
width: 260rpx;
}
 
.getCode {
background: $red;
width: 170rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 8rpx;
text-align: center;
margin-left: 16rpx;
font-size: 26rpx;
color: #fff;
 
}
}
</style>

以上就是 直播app開發搭建，註冊頁面樣式，全部程式碼，更多內容歡迎關注之後的文章