1. 在assets中新建一个css文件夹和imgs文件夹

2. 在src/views文件夹下新建一个Login.vue页面

3. 在src/main.js中引入全局公共样式文件style_public.css

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/style_public.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 4. 在src/router/index.js中引入登录、注册和主页界面

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入所有页面
import Login from '../views/Login.vue' // 登录
import Register from '../views/Register.vue' // 注册
import HomePage from '../views/HomePage.vue' // 主页

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    meta: {
      title: '登录'
    }
  },
  {
    path: '/Register',
    name: 'Register',
    component: Register,
    meta: {
      title: '注册'
    }
  },
  {
    path: '/HomePage',
    name: 'HomePage',
    component: HomePage,
    meta: {
      title: '主页'
    }
  }
]

const router = new VueRouter({
  // 用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5. 由于每个页面的背景图不一样，所以需要在组件中添加自己的背景图

（1）现在public/index.html入口文件中定义html，body的样式

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<style>
    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
</style>

<body>
    <div id="app"></div>
</body>

</html>

（2）在view/Login.vue中定义body的背景图

<template>
    <div class="form">
        <!-- 登录tittle -->
        <h2>
            <span>索特网盘</span>
        </h2>
        <!-- 中间填写区域 -->
        <div class="form-area">
            <!-- 短信登录 -->
            <div class="title">
                <a href="#">短信快捷登录>></a>
            </div>
            <!-- 账号 -->
            <div class="form-item name">
                <input type="text" name="username" placeholder="请输入账号" maxlength="14" />
                <span class="clear" onclick="clearName()">x</span>
            </div>
            <!-- 密码 -->
            <div class="form-item pwd">
                <input type="password" name="password" placeholder="请输入密码" maxlength="14" />
                <span class="clear" onclick="clearPassword()">x</span>
            </div>
            <!-- 登录按钮 -->
            <div class="form-item login">
                <button onclick="login()">登录</button>
            </div>
            <!-- 忘记密码 -->
            <div class="forget">
                <a href="#">忘记密码？</a>
            </div>
            <!-- 其他登录方式和注册 -->
            <div class="regist">
                <span>其他方式登录：</span>
                <a href>立即注册</a>
            </div>
        </div>
    </div>
</template>

<style>
body {
    background-image: url(../assets/imgs/login.jpg);
    background-size: cover;
}
.form {
    width: 500px;
    height: 540px;
    background: #fff;
    margin: 80px auto;
}

h2 {
    padding-top: 32px;
    font-size: 30px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    height: 22px;
    margin-bottom: 60px;
    color: #656262;
}
h2 span {
    background-color: #fff;
    padding: 0 20px;
    font-weight: 700;
}
.form-area {
    width: 400px;
    margin: 0 auto;
}
.title {
    text-align: right;
    font-size: 16px;
    padding: 10px 0;
    margin-top: -20px;
    margin-bottom: 20px;
}
.title a {
    color: #3b97b7;
}
.form-item {
    width: 400px;
    height: 42px;
    position: relative;
}
input {
    width: 400px;
    height: 40px;
    border: 0;
    outline: none;
    text-indent: 16px;
    font-size: 17px;
    color: #606266;
    border-radius: 5px;
    border: 1px solid #9e9e9e;
}
input::placeholder {
    font-size: 15px;
    color: #ccc;
}
.clear {
    position: absolute;
    right: 15px;
    top: 9px;
    color: #ccc;
    cursor: pointer;
}
.name input {
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}
.pwd input {
    border-radius: 0 0 5px 5px;
}
.form-item.login {
    margin-top: 60px;
    border-radius: 5px;
}
.form-item button {
    width: 101%;
    height: 101%;
    font-size: 18px;
    border: 0;
    outline: none;
    background-color: #3b97b7;
    color: #fff;
    border-radius: 5px;
}
.forget {
    margin: 15px 0 20px 5px;
    font-size: 15px;
}
.forget a {
    color: #9e9e9e;
}
.regist {
    height: 70px;
    background: #eeeeee;
    line-height: 70px;
}
.regist span {
    color: #3b97b7;
    padding-left: 20px;
}
.regist a {
    color: #3b97b7;
    padding-left: 180px;
}
</style>

<script>
export default {
  data () {
    return {}
  },
  methods: {},

  // 生命周期 - 创建完成
  created () {},
  beforeCreate () {},
  beforeDestroy () {}
}
</script>

效果：

# vue.js # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

CCE云原生混部场景下的测试案例

avatar 华为云开发者联盟
cover

详解数仓的3A安全能力

avatar 华为云开发者联盟