当前位置：首页 > 编程日记 > 正文

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

编程日记 2024-08-02 10:00:00

效果图：

代码：

<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">姓&#12288;&#12288;名</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">医&#12288;&#12288;院</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">科&#12288;&#12288;室</view><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的科室"></input></view><view class="p_r"><view class="left">职&#12288;&#12288;务</view><input class="input" type="text" placeholder-class="placeholderClass" placeholder="请输入您的职务"></input></view><view class="p_r"><view class="left">性&#12288;&#12288;别</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>

图片：

https://www.dkcj.cn/info/12479.html

quickselect_QuickSelect：使用代码示例解释的快速选择算法

quickselect什么是QuickSelect？ (What is QuickSelect?) QuickSelect is a selection algorithm to find the K-th smallest element in an unsorted list.QuickSelect是一种选择算法，用于在未排序的列表中查找第K个最小的元素。算法说明 (The Algori…

编程日记2024/08/02 09:50:00

《Linux命令行与shell脚本编程大全第3版》Shell脚本编程基础---34

以下为阅读《Linux命令行与shell脚本编程大全第3版》的读书笔记，为了方便记录，特地与书的内容保持同步，特意做成一节一次随笔，特记录如下：转载于:https://www.cnblogs.com/guochaoxxl/p/7894620.html

编程日记2024/08/02 09:40:00

CSS超出部分隐藏，显示滚动条

实现功能： 固定一个高度，超出该高度的部分就隐藏，并且显示滚动条能上拉下滑滚动实现代码： height: 500rpx; overflow-x: hidden; overflow-y: scroll; 实现功能： 固定一个宽度，超出该宽度的部分就隐藏…

编程日记2024/08/02 09:30:00

第二周学习进度

好久的编程实现，居然没有编完整，看来自己需要加班学习了！第二周学习进度如下： 第二周所花时间（包括上课）共计21小时代码量（行）220博客量（篇）4了解到的知识 1.…

编程日记2024/08/02 09:20:00

如何在C ++中从容器中删除元素

How to remove elements from container is a common C interview question, so you can earn some brownie points if you read this page carefully. 如何从容器中删除元素是C 常见的面试问题，因此，如果仔细阅读此页，可以赚取布朗尼积分。 …

编程日记2024/08/02 09:10:00

【BZOJ4282】慎二的随机数列乱搞

【BZOJ4282】慎二的随机数列 Description 间桐慎二是间桐家著名的废柴，有一天，他在学校随机了一组随机数列， 准备使用他那强大的人工智能求出其最长上升子序列，但是天有不测风云，人有旦夕祸福，柳洞一成路过…

编程日记2024/08/02 09:00:00

http://jingyan.baidu.com/album/a948d65105faed0a2dcd2ea2.html?stepindex2&st2&os0&bd_page_type1&net_type3 http://jingyan.baidu.com/article/20095761cbef40cb0721b417.html转载于:https://www.cnblogs.com/fyy-888/p/5272862.html

编程日记2024/08/02 08:50:00

CSS动画无限循环

实现代码 div{animation:myanimation 5s infinite; }keyframes myanimation {from {top:0px;}to {top:200px;} } 注:animation ->Css3动画属性 myanimation->随便命名 infinite 可重复 ,去掉就不重复了 top可以改为宽高,或者方向等等任何CSS属性 form 开始 to结束…

编程日记2024/08/02 08:40:00

apple id无法创建_我如何为我的Apple收藏夹创建网站

apple id无法创建A while ago I started an Apple collection. Ive been following Apple hardware (and its aesthetics) since I was a teenager, but at that time I didnt the have money to own a Mac. 前一段时间，我开始了一个苹果系列。从我十几岁起我就一直…

编程日记2024/08/02 08:30:00

bzoj1562[NOI2009]变换序列——2016——3——12

任意门：http://www.lydsy.com/JudgeOnline/problem.php?id1562 题目： 对于0,1,…,N-1的N个整数，给定一个距离序列D0,D1,…,DN-1，定义一个变换序列T0,T1,…,TN-1使得每个i,Ti的环上距离等于Di。一个合法的变换序列应是0,1,…,N-1的…

编程日记2024/08/02 08:20:00

把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）

先看下效果图：（上面灰色块内的用div和CSS写出来的，然后绘制到canvas） 实现此功能需要使用到一个微信小程序的插件，插件官方文档地址： wxml-to-canvas | 微信开放文档本博客代码环境，uniapp&a…

编程日记2024/08/02 08:10:00

C 语言中的 switch 语句 case 后面是否需要加大括号

事件原由为编辑器的自动缩进，当 case 换行后不自动缩进。于是在在想可以可否在 case 后面再大括号，让其自动缩进。查了资料，发现 case 是可以加大括号的，相当于代码块。而且还有另外一个用途，可以代码块头部定义变量…

编程日记2024/08/02 08:00:00

问题 c: 插入排序_插入排序：它是什么，以及它如何工作

问题 c: 插入排序Insertion sort is a simple sorting algorithm for a small number of elements.插入排序是一种针对少量元素的简单排序算法。例： (Example:) In Insertion sort, you compare the key element with the previous elements. If the previous ele…

编程日记2024/08/02 07:50:00

在Java连接hbase时出现的问题

问题1： java.net.ConnectException: Connection refused: no further information zookeeper.ClientCnxn: Session 0x0 for server null zookeeper未启动，或无法连接，从查看各节点zookeeper启动状态、端口占用、防火墙等方面查看原因。问题2&…

编程日记2024/08/02 07:40:00

codeforces 8C. Looking for Order 状压dp

题目链接给n个物品的坐标， 和一个包裹的位置， 包裹不能移动。每次最多可以拿两个物品， 然后将它们放到包里， 求将所有物品放到包里所需走的最小路程。直接状压dp就好了。 #include <iostream> #include <vector> #…

编程日记2024/08/02 07:30:00

H5刷新当前页面

location.reload();

编程日记2024/08/02 07:20:00

sql的外键约束和主键约束_SQL主键约束用示例解释

sql的外键约束和主键约束A primary key is a column or a set of columns that uniquely identifies each row in a table.主键是一列或一组列，它们唯一地标识表中的每一行。 It’s called a “constraint” because it causes the system to restrict the data al…

编程日记2024/08/02 07:10:00

str.format() 格式化字符串函数

语法它通过{}和:来代替%。 “映射”示例通过位置 In [1]: {0},{1}.format(kzc,18) Out[1]: kzc,18 In [2]: {},{}.format(kzc,18) Out[2]: kzc,18 In [3]: {1},{0},{1}.format(kzc,18) Out[3]: 18,kzc,18字符串的format函数可以接受不限个参数，位置可以…

编程日记2024/08/02 07:00:00

css学习任务二：切图写代码

今天的任务是根据UI给的图进行切图，然后写出相应的页面，UI如下： 收获：学习前端知识一年有余，却因为老是找不到实战项目而得不到实际的提高，直到今天的学习我才知道切图是怎么一回事，明白了你看到…

编程日记2024/08/02 06:50:00

Vue mixins（混入）附代码示例详解

mixins 我们称它为 “混入” ； 官方的解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的…

编程日记2024/08/02 06:40:00

软件开发面试_如何为成功的软件开发工作面试做准备

软件开发面试Job interviews are stressful for many people. Besides the pressure of getting hired, you have to answer various questions before and during the interview – like what to wear, how to get prepared, how much money to ask for, and much more.求职面…

编程日记2024/08/02 06:30:00

bzoj1070————2016——3——14

传送门：http://www.lydsy.com/JudgeOnline/problem.php?id1070； 题目概括： Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心。维修中心共有M位技术人员，不同的技术人员对不同的车进行维修所用的时间是不同的。现…

编程日记2024/08/02 06:20:00

CSS兼容性汇总

http://www.jb51.net/css/469020.html CSS属性Hack 把属性hack分为前缀属性hack和后缀属性hack CSS属性Hack（前缀）针对的浏览器_color:red;IE6及其以下的版本*color:red ;或者 color:red;IE7及其以下的版本CSS属性Hack（后缀）针对…

编程日记2024/08/02 06:10:00

Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡

使用过渡效果，可以优化用户体验，Vue给我们封装了一个很好用的组件，专门用来处理过渡效果，下面我们来看看怎么使用它； Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加…

编程日记2024/08/02 06:00:00

解释型和编译型编程语言_解释型和编译型编程语言：有什么区别？

解释型和编译型编程语言Every program is a set of instructions, whether it’s to add two numbers or send a request over the internet. Compilers and interpreters take human-readable code and convert it to computer-readable machine code. 每个程序都是一组指令&a…

编程日记2024/08/02 05:50:00

Beta 冲刺（1/7）

队名：天机组组员1友林 228（组长） 今日完成：查找了相关资料及api文档。明天计划：继续相关资料及源码。剩余任务：优化网络通讯机制主要困难：查找的代码调试较为困难。收获及疑问：暂无…

编程日记2024/08/02 05:40:00

Vue全局路由侦听beforeEach路由守卫附代码使用示例

使用路由守卫beforeEach，可以实现路由侦听； 全局侦听路由跳转的实现代码： app.vue onLaunch: function(e) {this.$router.beforeEach((to, from, next) > {console.log($router,to,from);next();}); } to 是跳转路由之后的page对象&am…

编程日记2024/08/02 05:30:00

Debug模式下加载文件，运行程序异常的慢

今天在进行单元测试的时候，debug模式下加载速度很慢，但是run模式下速度很快。原因：在debug模式下，断点位置不当，解决办法移除编译器中的所有断点。转载于:https://www.cnblogs.com/nww57/p/5277113.html

编程日记2024/08/02 05:20:00

如何在Python中对字符串进行子字符串化

Python offers many ways to substring a string. It is often called ‘slicing’.Python提供了许多对字符串进行子字符串化的方法。它通常被称为“切片”。 It follows this template:它遵循以下模板： string[start: end: step]Where,哪里， start:…

编程日记2024/08/02 05:10:00

HttpPost导包遇到的问题

直接在当前项目 build.gradle文件修改如下 android { useLibrary org.apache.http.legacy compileSdkVersion 24 buildToolsVersion "24.0.0" defaultConfig { applicationId "com.ican.subjects" minSdkVe…

编程日记2024/08/02 05:00:00