Vue移动端登录页面

简介: Vue移动端登录页面

ea8b786863eb4bfdbb7e9cb375844d52.png

使用的是vant组件,引用和使用组件请去官网学习,链接↓

vant组件官网

 

<div class="center">
    <!-- 背景图片 -->
    <div class="background">
      <img
        src="@/assets/background.jpg"
        width="100%"
        height="100%"
        alt=""
      />
    </div>
    
    <!-- 前景 -->
    <div class="front">
      <div class="card">
        <!-- 标题 -->
        <div
          slot="header"
          class="title"
        >
          <span>
              XXXXXX系统
          </span>
        </div>
 
        <!-- 表单 -->
        <div>
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-row>
              <van-col span="16">
                <van-field
                  style="width:15rem"
                  v-model="authcode"
                  name="验证码"
                  label="验证码"
                  placeholder="请输入验证码"
                  :rules="[{ required: true, message: '请填写验证码' }]"
                />
              </van-col>
              
               <!-- 获取验证码 -->
              <van-col span="7">
                <img
                  :src="codeUrl"
                  @click="getAutoCodeImg"
                  style="height:2rem;width:5rem;margin-right:3rem;margin-top:0.4rem"
                />
              </van-col>
 
              <van-col span="1">
              </van-col>
            </van-row>
 
            <div style="margin: 16px;">
              <van-button
                round
                block
                type="info"
                native-type="submit"
              >提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}
 
.front {
  z-index: 1;
  position: absolute;
}
 
.title {
  text-align: center;
  font-size: 1.3rem;
  color: rgba(50, 50, 50, 0.8);
}
 
.card {
  width: 320px;
  margin-top: 35%;
  margin-left: calc(calc(100vw - 400px) / 2); /* 动态剧中 */
  background-color: rgba(200, 200, 200, 0.5); /* 半透明 */
  border-color: rgba(200, 200, 200, 0.5); /* 半透明 */
  border-radius: 10px;
}
 
.van-cell {
  background-color: rgba(200, 200, 200, 0) !important; /* 改变了组件的css为半透明 */
  color: white;
}
 
.center {  /* 元素居中 */
  display: flex;
  justify-content: center;
}
相关文章
|
2天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
6天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
9天前
|
JavaScript
|
8天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
11天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
26 4
|
11天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
64 0
|
11天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
11天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
18 1
|
11天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
26 1
|
16天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
25 1