投稿
  1. 欣文网首页
  2. 阅读频道
  3. 热点

高颜值登录页面（一键复制）

全网转载 • • 热点 • 阅读 167

登录页面是每一个项目不可缺少的页面，是一个应用的门面，首次进入看见的可能就是登录界面，做了这么久的前端，发现登录界面其实都大同小异，有时候没必要从头写，我写了几个自认为比较好看的uniapp登录界面记录一下，下次用到的话，可以直接复制过来，修改下就行了。只有静态页面，并未做逻辑上的东西，这样便于在此基础上做调整。

先看效果

高颜值登录页面（一键复制）

实际应用效果

高颜值登录页面（一键复制）

源码

粉色登录界面（图一）：

template>
  view class="content">
    view class="loginBox">
      h3>登录h3>
      view class="inputBox">
        view class="ipt">
          uni-icons type="contact" size="24" color="rgb(247,120,172)">uni-icons>
          input type="text" value="" placeholder="请输入账号"/>
        view>
        view class="ipt">
          uni-icons type="eye" size="24" color="rgb(247,120,172)">uni-icons>
          input type="passsword" value="" placeholder="请输入密码"/>
        view>
        view class="forgetPwd">
          span>忘记密码span>
          span>没有账号，去注册span>
        view>
        button>登录button>
      view>
      view class="tipbox">
        view class="txt">
          —— 其他账号登录 ——
        view>
        view class="otherUser">
          uni-icons type="qq" size="40" color="rgb(66,157,250)">uni-icons>
          uni-icons type="weixin" size="40" color="rgb(2,187,17)">uni-icons>
        view>
      view>
    view>
    
    view class="tip">
      某某应用 2024
    view>
  view>
template>

script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
script>

style scoped>
  .content{
    height: 100vh;
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510005139_JR8fL.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714820289&t=e835cde99a094cbd98f9c318f25160ec") no-repeat;
    background-size: 100% 100%;
  }
  .loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    width: 90%;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx;
    box-sizing: border-box;
  }
  h3{
    color: rgb(247,120,172);
    font-size: 40rpx;
    letter-spacing: 10rpx;
    margin-bottom: 40rpx;
  }
  .inputBox{
    
  }
  .ipt{
    height: 86rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding-left: 10rpx;
  }
  .ipt input{
    margin-left: 20rpx;
    font-size: 28rpx;
  }
  .ipt input{
    margin-left: 20rpx;
  }
  .forgetPwd{
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
    padding:0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  button{
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    background: linear-gradient(to right,rgb(255, 170, 127),rgb(247,120,172));
    border-radius: 40rpx;
    color: #fff;
    margin-top: 40rpx;
  }
  
  .tip{
    text-align: center;
    font-size: 28rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #f4f4f4;
  }
  .tipbox {
    text-align: center;
    margin-top: 100rpx;
  }
  
  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  
  .txt {
    font-size: 28rpx;
    color: #cbcbcb;
  }
  
  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
style>

白色登录界面（图二）：

template>
  view class="content">
    svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
      defs>
        linearGradient id="bg">
          stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)">stop>
          stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)">stop>
          stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)">stop>
        linearGradient>
        path id="wave" fill="url(#bg)"
          d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
          s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
      defs>
      g>
        use xlink:href='#wave' opacity=".3">
          animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s"
            calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        use>
        use xlink:href='#wave' opacity=".6">
          animateTransform attributeName="transform" attributeType="XML" type="translate" dur="8s"
            calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        use>
        use xlink:href='#wave' opacty=".9">
          animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s"
            calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        use>
      g>
    svg>
    
    view class="loginBox">
      h3 style="text-align: center;margin-bottom:120rpx;">欢迎登录h3>
      view class="inputBox">
        view class="ipt">
          uni-icons type="contact" size="24" color="rgb(66,157,250)">uni-icons>
          input type="text" value="" placeholder="请输入账号"/>
        view>
        view class="ipt">
          uni-icons type="eye" size="24" color="rgb(66,157,250)">uni-icons>
          input type="passsword" value="" placeholder="请输入密码"/>
        view>
        view class="ipt">
          uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)">uni-icons>
          input type="text" value="" placeholder="请输入验证码"/>
          view class="yzm">
            验证码
          view>
        view>
        button>登录button>
        view class="forgetPwd">
          span>忘记密码span>
          span>没有账号，去注册span>
        view>
      view>
      view class="tipbox">
        view class="txt">
          —— 其他账号登录 ——
        view>
        view class="otherUser">
          uni-icons type="qq" size="40" color="rgb(66,157,250)">uni-icons>
          uni-icons type="weixin" size="40" color="rgb(2,187,17)">uni-icons>
        view>
      view>
    view>
  view>
template>

script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
script>

style scoped>
  svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height:40%;
    box-sizing: border-box;
    display: block;
    background-color: #ffffff;
  }
  
  .loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    width: 90%;
    border-radius: 20rpx;
    padding: 60rpx;
    box-sizing: border-box;
  }
  h3{
    color:rgb(66,157,250);
    font-size: 40rpx;
    letter-spacing: 10rpx;
    margin-bottom: 40rpx;
  }
  .inputBox{
    
  }
  .ipt{
    height: 86rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding-left: 10rpx;
  }
  .ipt input{
    margin-left: 20rpx;
    font-size: 28rpx;
  }
  .ipt input{
    margin-left: 20rpx;
  }
  .forgetPwd{
    margin-top: 30rpx;
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
    padding:0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  button{
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    background: rgb(66,157,250);
    border-radius: 40rpx;
    color: #fff;
    margin-top: 40rpx;
  }
  
  .tip{
    text-align: center;
    font-size: 28rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #f4f4f4;
  }
  .tipbox {
    text-align: center;
    margin-top: 100rpx;
  }
  
  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  
  .txt {
    font-size: 28rpx;
    color: #cbcbcb;
  }
  
  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
  .yzm{
    text-align: end;
    font-size: 24rpx;
    background: linear-gradient(to right,rgb(66,157,250),rgb(0, 170, 127));
    height: 60rpx;
    width: 150rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
  }
style>

蓝色登录界面（图三）：

template>
  view class="content">
    view class="topBox">
      h3>WELCOMEh3>
      h3>欢迎使用某某应用h3>
    view>
    view class="inputBox">
      view class="ipt">
        h4>手机号h4>
        input type="text" value="" placeholder="请输入手机号码" />
      view>
      view class="ipt">
        h4>密码h4>
        input type="text" value="" placeholder="请输入密码" />
      view>
      button class="loginBtn">登录button>
      button class="registerBtn">注册button>

      view class="tipbox">
        view class="txt">
          —— 其他账号登录 ——
        view>
        view class="otherUser">
          uni-icons type="qq" size="40" color="rgb(66,157,250)">uni-icons>
          uni-icons type="weixin" size="40" color="rgb(2,187,17)">uni-icons>
        view>
      view>
    view>
  view>
template>

script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
script>

style scoped>
  .content {
    height: 100vh;
    background-color: aquamarine;
    background: url("https://www.galaxyclub.cn/Upload/IMAGES/15/0615/38af439784544e95b7c64cad64a14157_650x650.jpg") no-repeat;
    background-size: cover;
  }

  .topBox {
    font-size: 34rpx;
    color: #fff;
    padding: 80rpx 50rpx;
  }

  h3 {
    margin-bottom: 10rpx;
  }

  .inputBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 85vh;
    background-color: #fff;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding: 60rpx;
    box-sizing: border-box;
  }

  .ipt {
    margin-bottom: 50rpx;
  }

  .ipt h4 {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    color: #333;
  }

  .ipt input {
    border-bottom: 1px solid #dedede;
    padding-bottom: 20rpx;
    font-size: 28rpx;
  }

  .loginBtn {
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    background: linear-gradient(to right, rgb(86, 104, 214), rgb(86, 104, 214));
    border-radius: 40rpx;
    color: #fff;
    margin-top: 50rpx;
  }

  .registerBtn {
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    border-radius: 40rpx;
    color: rgb(86, 104, 214);
    margin-top: 50rpx;
    border: none;
  }

  .tipbox {
    position: fixed;
    bottom: 120rpx;
    left: 50%;
    transform: translate(-50%, -120px);
  }

  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }

  .txt {
    font-size: 28rpx;
    color: #969696;
  }

  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
style>

（背景图片来源网络）

如有帮助，求个赞可否高颜值登录页面（一键复制）

网址打包成桌面.exe

2024-03-28

高颜值登录页面（一键复制）


网页毕设源码（王者荣耀）

2024-03-17

高颜值登录页面（一键复制）


把网页打包成app(简单)

2024-01-31

高颜值登录页面（一键复制）


前端CSS魔法

2024-01-28

高颜值登录页面（一键复制）


Vue3优秀的UI组件库(高颜值)

2024-01-19

高颜值登录页面（一键复制）


下载量超高的vscode AI插件

2024-01-14

高颜值登录页面（一键复制）


本内容观点仅代表发布作者本人观点立场，欣文网平台只做信息内容展示和存储。发布作者：全网转载，转转请注明出处：https://www.xinenw.com/4502

赞 (0)
0 0

关于作者

全网转载的头像

全网转载官方认证

1.4K 文章
0 评论
0 粉丝
第三方平台优质内容转载，如有侵犯您的权益，可以私信联系删除！
上一篇 2024年4月19日 15:01
下一篇 2024年4月19日 15:01

相关推荐

  • 张朝阳:年轻人别负债;刘强东:无法让员工躺着睡大觉;A股巨头父子辞职;女士占用服务区男厕;年薪80万招聘聘任制公务员…… 热点

    张朝阳:年轻人别负债;刘强东:无法让员工躺着睡大觉;A股巨头父子辞职;女士占用服务区男厕;年薪80万招聘聘任制公务员……

    △点击上方蓝字或下方卡片，和小柴一起防忽悠 网红“刀小刀”自曝重度抑郁 拥有千万粉丝的网红刀小刀自曝重度抑郁的消息，如同一颗重磅炸弹，在社交媒体上引起了广泛的关注和讨论。 其表示：因为治疗脱发服用激素药物而导致身体发胖。在此之前，她已经与公司解约，决定给自己一个结束和新的开始。 恒大汽车：29%股份将即时被收购 恒大汽车5月26日晚间在港交所公告，31.45…

    全网转载的头像 全网转载
    2024年5月30日
    8000
  • 自家电池 0 自燃？这车企是真敢讲啊... 热点

    自家电池 0 自燃？这车企是真敢讲啊…

    这大夏天的，又是讲电动汽车自燃的时候，毕竟高发期。 这不是狐妹瞎说，之前看过一个相关数据统计，每年 6-8 月明显是新能源汽车火灾事故明显高发期。 而且，相关数据还指出，当前新能源汽车的起火率低于燃油车；但是，电池起火比汽油起火更难扑灭，且复燃率较高。 数据是一方面，实际情况也可以印证。 电车自燃原因，常见因为 “ 热失控 ” ，指的是电池内部温度持续升高造…

    全网转载的头像 全网转载
    2024年7月23日
    4300
  • 信奉“玄学”的大学生，又开始“算命”了，室友：你快把我给摸透了！ 热点

    信奉“玄学”的大学生，又开始“算命”了，室友：你快把我给摸透了！

    点击蓝字| 关注我们 文｜我是略略 能和“小孩哥”相提并论的，必属咱们脆皮大学生了。 大学生真是一个有意思的群体，本以为他们是非常聪明智慧的，毕竟考上大学真不容易。 但其实大学生总给人一种小学生的既视感，甚至觉得有时候大学生会更加“好骗”。也许就是传说中的，清澈的眼神中透露着愚蠢吧！ 只不过大学生还是很在乎自己的发展和前途的，等到期末考试来临的时候，大学生也…

    全网转载的头像 全网转载
    2024年4月28日
    20500
  • 大学生太想家，想带“妈”上学，网友直言揭穿：你那是贪图安逸！ 热点

    大学生太想家，想带“妈”上学，网友直言揭穿：你那是贪图安逸！

    点击蓝字| 关注我们 文｜我是笑笑 在大家读高中的时候，是不是会特别的憧憬过大学生活呢？ 主要是在高中那个高压的环境下，每天高强度学习，同学们就特别向往自由，盼望自己上大学，享受大学的生活。 加上我们都听过也听腻了的一句话，来自各科老师的鸡汤：等你们以后上大学后就轻松了！于是就更加向往大学生活了。 但人和人是不一样的，有的同学迫不及待想上大学离开家远一些，有…

    全网转载的头像 全网转载
    2024年5月1日
    11700
  • “我是医生，不是你男朋友！”医患之间聊天记录流出，根本笑不停 热点

    “我是医生，不是你男朋友！”医患之间聊天记录流出，根本笑不停

    点击蓝字| 关注我们 文｜我是笑笑 在我们生活中，最常接触的两个职业人员要笑笑说就是老师和医生了！ 每个人的成长发展离不开教育，咱们需要老师教育和指导。 人吃五谷杂粮，难免会有生病的时候，生病就要去看医生。 不知道别人看病的经历是什么样的？反正笑笑去医院的时候就觉得非常紧张害怕，不敢听医生说一点不利于病情的话。否则就会慌得要命！ 但也有的人去看医生就有不一样…

    全网转载的头像 全网转载
    2024年5月1日
    14300

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信
原欣文网读者需要重新注册，平台不断升级敬请见谅！