首页 > 其他分享 >uni-app:input的样式调整(hbuilderx 3.7.3)

uni-app:input的样式调整(hbuilderx 3.7.3)

时间:2023-04-15 21:58:11浏览次数:46  
标签:app 20rpx 验证码 3.7 uni input margin hbuilderx left

一,js代码:

<template>
    <view>
            <input class="inputText" style="width:700rpx;height:76rpx;"
             v-model="mobile" placeholder="请输入手机号" ></input>
            
            <view style="display: flex;flex-direction: row;">
            <input class="inputText" style="width:337rpx;height:76rpx;line-height:76rpx;" v-model="code" placeholder="请输入验证码" ></input>
            <button class="btn" style="width:337rpx;height:76rpx;line-height:76rpx;"
             @click="sendCode()" :disabled="disabled">{{ btnText }}</button>
            </view>
            <button class="btn" style="width:700rpx;height:76rpx;line-height:76rpx;" @click="login()" >登 录</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mobile:'',     //手机号
                code:'',       //验证码    
                disabled: false,   // 是否允许点击
                btnText: '获取验证码',  // 按钮文字,
            }
        },
        methods: {
                   /**
                    * 发送验证码
                    */
                   sendCode() {
                       // 先判断一下是否输入了手机号
                                        
                   },
                /*
                登录
                */
                login(){
                    uni.showToast({ title: '开始登录' })
                },
        }
    }
</script>

<style>
.inputText{
    min-height: 76rpx;
    border: 1rpx solid #dadbde;
    font-size: 36rpx;
    padding-left: 20rpx;
    border-radius: 8rpx;
    margin-left: 25rpx;
    margin-top: 20rpx;
}
.btn {
    margin-top: 20rpx;
    margin-left: 25rpx;
}
</style>

二,测试效果

三,查看hbuilderx的版本: 

标签:app,20rpx,验证码,3.7,uni,input,margin,hbuilderx,left
From: https://www.cnblogs.com/architectforest/p/17321961.html

相关文章

  • 2023-04-15 uniapp 点击事件冒泡
    简而言之,即父子元素都有点击事件,这时候子元素触发点击事件会连同父元素的点击事件一并触发,这就是冒泡;而需求就是子不触父。解决方案:子元素的点击事件由原来的@click或者@tap统统换成@tap.stop,据说@tap.stop比@click.stop好。注:只需改变子元素点击事件,子变父不变。......
  • java: 无法访问org.springframework.boot.SpringApplication
    在运行springboot项目中的Application.java时出现:错误的类文件: /D:/install/Maven/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.0.5/spring-boot-3.0.5.jar!/org/springframework/boot/SpringApplication.class   类文件具有错误的版本 61.0, ......
  • 构建React-app应用时create-react-app卡住超慢的解决办法
    解决方案是换源,这个解决方法是从网上找到的,特此整理过来收藏一下。虽然平常使用cnpm来代替npm,但也只是使用新的指令而已。而在寻求create-react-app的相关配置希望修改registry时失败了,最后发现create-react-app指令默认调用npm,于是直接把npm的register给永久设置过来就好了,这样使......
  • UNI APP消息推送
    1、在应用信息,各平台应用中设置包名。 2、开通服务空间。https://unicloud.dcloud.net.cn/配置云函数URL。2、在dclound开发者中心开通推送功能。地址:https://dev.dcloud.net.cn/ ......
  • 09 Shading(Texture Mapping)
    1.TextureMapping下图中,不同位置的反射模型是一样的,但是颜色不同,这是因为漫反射系数不同。同样的,一个点应该还存在着很多属性,那么应当如何定义属性。三维图形的表面可以展开为二维平面,这一个二维平面(包含着对应的三维中三角形的属性)便是Texture。如何实行一个好的纹理映射,是......
  • Android Studio APP开发实战
    今天学习了AndroidStudio的活动activity活动是什么活动(Activity)是最容易吸引用户的地方,它是一种可以包含用户界面的组件,主要用于和用户进行交互。一个应用程序中可以包含零个或多个活动,但不包含任何活动的应用程序很少见,谁也不想让自己的应用永远无法被用户看到吧?活动的基......
  • Dapper
    什么是Dapper?Dapper是StackOverflow团队开发的Micro-ORM框架,Dapper是一个简单对象mapper对于Net并且在速度方面有KingofMicroORM称号,几乎与原生ADO.NETdatareader一样。ORM是一个对象关系映射,负责映射database和应用程序对象。Dapper比EntityFramework快的原因......
  • 08 Shading(Shadding, Pipeline and Texture Mapping)
    关键点Real-TimeRenderingPipelineShader1.Graphics(Real-timeRendering)Pipeline管线1.1PipelineMVP,Rasterization,Z-Buffer,Shading,Texture1.2ShaderPrograms着色器通用程序,用于定义任意像素如何操作。来源[1]Games101.闫令琪......
  • 使用appuploader工具发布证书和描述性文件教程
    使用APPuploader工具发布证书和描述性文件教程之前用AppCan平台开发了一个应用,平台可以同时生成安卓版和苹果版,想着也把这应用上架到AppStore试试,于是找同学借了个苹果开发者账号,但没那么简单,还要用到Mac电脑的钥匙串申请发布证书和上传ipa,可没有Mac,同学的大老远的也不方便拿过来......
  • 图文介绍 Windows 系统下打包上传 IOS APP 流程
    现在很多伙伴跨平台开发应用,有些童鞋没有苹果机,本文将介绍,如何在Windows系统环境下直接上架APP,不用去搞虚拟机之类的了,Windows下照样轻松打包上架iOSAPP。下面从七个步骤进行详细介绍!1、创建唯一标示符AppIDs2、申请发布证书3、申请发布描述文件4、iTunesConnect......