直播app开发搭建，注册页面样式，全部代码

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