样式集（11）注册页面样式，全部代码附效果图

效果图：

代码：

<template><view class="page"><view class="top">新用户注册</view><image :src="sanjiao" mode="widthFix" class="sanjiao"></image><!-- <image style="width: 100vw;" :src="bolang" mode="widthFix"></image> --><view class="centent"><view class="p_r"><view class="left">姓　　名</view><input class="input w100" type="number" placeholder-class="placeholderClass"placeholder="请输入姓名"></input></view><view class="p_r"><view class="left">手机号码</view><input class="input w100" type="number" placeholder-class="placeholderClass"placeholder="11位手机号码"></input><view class="getCode">获取验证码</view></view><view class="p_r"><view class="left " style="letter-spacing: 16rpx;">验证码</view><input class="input w100" type="text" placeholder-class="placeholderClass" placeholder="请输入验证码"></input></view><view class="p_r"><view class="left">医　　院</view><picker mode="multiSelector" :value="multiIndex" range-key="name" :range="multiArray"@columnchange="MultiPickerColumnChange" @change="MultiPickerChange"><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的医院"></input></picker></view><view class="p_r"><view class="left">科　　室</view><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的科室"></input></view><view class="p_r"><view class="left">职　　务</view><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的职务"></input></view><view class="p_r"><view class="left">性　　别</view><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的性别"></input></view></view><view class="xxx"></view><view class="btn" @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 lang="scss" 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>

图片：

样式集（11）注册页面样式，全部代码附效果图相关推荐

登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
WordPress自定义登录和注册页面样式并且添加验证码
通过一番尝试和验证以及网络搜索,终于实现了WordPress默认的登录和注册界面的样式修改,下面把过程记录下来.笔者主要是通过在主题中添加WordPress的钩子来实现登录和注册界面的样式修改的.Wo ...
登录、注册页面及后台代码
一.登录页面及后台代码 1.登录页面如图1所示首先进行身份选择,由"管理员"和"用户"两种身份进行选择,选择不同的身份,程序会进入不同的数据表检索登录信息:当 ...
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率. 写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录.我的项目gitee地址: https://gitee. ...
【微信小程序】侧滑栏，手动侧滑出个人中心（完整代码附效果图）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 博文分三部分,1.效果图及功能效果说明 2.实现思路 3.源代码欢迎加入微信小程序开发交流群( ...
[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序获取用户手机号，后端php实现（前后端完整代码附效果图）
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 如图: 小程序代码: 第一步,登录,获取用户的 session_key: 第二步,点击按钮调用 bindget ...
微信小程序云开发图片上传完整代码附效果图
在app.json里面加如下代码, 使用 WeUI组件库.点击跳转 "useExtendedLib": {"weui": true}, 先看效果图 wxml & ...

样式集（11）注册页面样式，全部代码附效果图

样式集（11）注册页面样式，全部代码附效果图相关推荐

最新文章

热门文章