有这么一个设定
先登录才能看到首页面。
将项目src/App.vue修改：
<template>
<Login />
</template>
<script>
import Login from '@/views/login/Login'
export default {
name: 'App',
components: { Login }
}
</script>
新建src\views\login\Login.vue:
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__conetnt" />
</div>
<div class="wrapper__input">
<input class="wrapper__input__conetnt" />
</div>
<div class="wrapper__login-button">登陆</div>
<div class="wrapper__login-link">立即登陆</div>
<div class="wrapper__login-password">忘记密码</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.wrapper {
position: absolute;
left: 0;
top: 50%;
right: 0;
transform: translateY(-50%);
}
</style>
image.png
调整优化：
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" />
</div>
<div class="wrapper__input">
<input class="wrapper__input__content" />
</div>
<div class="wrapper__login-button">登陆</div>
<div class="wrapper__login-link">立即登陆</div>
<div class="wrapper__login-password">忘记密码</div>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<style lang="scss" scoped>
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
width: 100%;
}
}
}
</style>
image.png
进一步优化输入框
&__input {
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border:none;
outline:none;
width: 100%;
}
}
image.png
最终调整输入框：
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input type="password" class="wrapper__input__content" placeholder="请输入密码" />
</div>
<div class="wrapper__login-button">登陆</div>
<div class="wrapper__login-link">立即登陆</div>
<div class="wrapper__login-password">忘记密码</div>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<style lang="scss" scoped>
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: rgba(0, 0, 0, 0.5);
&::placeholder {
color: rgba(0, 0, 0, 0.5);
}
}
}
}
</style>
image.png
调整登陆按钮：
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0 0.4rem;
background: #0091ff;
color:#fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
image.png
继续优化：
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__login-button">登陆</div>
<div class="wrapper__login__item">
<div class="wrapper__login__item__link">立即登陆</div>
<p class="wrapper__login__item__cut">|</p>
<div class="wrapper__login__item__password">忘记密码</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<style lang="scss" scoped>
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: rgba(0, 0, 0, 0.5);
&::placeholder {
color: rgba(0, 0, 0, 0.5);
}
}
}
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__login__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: rgba(0, 0, 0, 0.5);
}
&__cut {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
}
&__password {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
color: rgba(0, 0, 0, 0.5);
}
}
}
</style>
image.png
因为我们的文字背后是纯白色，所以这样的情况下首先考虑#号颜色，而不是透明色，比如rgba(0, 0, 0, 0.5)可以替换成#777，并做一下抽离：
修改src\style\viriables.scss:
/**
* 内容主体文字颜色
**/
$content-font-color: #333;
/**
* 无内容、背景灰、留白灰的颜色
**/
$content-bg-color: #f1f1f1;
/**
* 文字灰色字体
*
**/
$centent-notice-fontcolor: #777;
修改src\views\login\Login.vue:
<template>
<div class="wrapper">
<img class="wrapper__img" src="/i18n/9_16/img/user.png" />
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号码" />
</div>
<div class="wrapper__input">
<input
type="password"
class="wrapper__input__content"
placeholder="请输入密码"
/>
</div>
<div class="wrapper__login-button">登陆</div>
<div class="wrapper__login__item">
<div class="wrapper__login__item__link">立即登陆</div>
<p class="wrapper__login__item__cut">|</p>
<div class="wrapper__login__item__password">忘记密码</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables';
.wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
&__img {
display: block;
margin: 0 auto 0.4rem auto;
width: 0.66rem;
height: 0.66rem;
}
&__input {
// box-sizing: border-box;//内部间距
height: 0.48rem;
margin: 0 0.4rem 0.16rem 0.4rem;
background: #f9f9f9;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.06rem;
&__content {
line-height: 0.48rem;
background: none;
border: none;
outline: none;
width: 100%;
font-size: 0.16rem;
color: $centent-notice-fontcolor;
&::placeholder {
color: $centent-notice-fontcolor;
}
}
}
&__login-button {
line-height: 0.48rem;
margin: 0.32rem 0.4rem 0.16rem 0.4rem;
background: #0091ff;
color: #fff;
box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
border-radius: 0.04rem;
font-size: 0.16rem;
text-align: center;
}
&__login__item {
text-align: center;
&__link {
display: inline-block;
margin: auto 0.05rem auto 0.05rem;
text-align: center;
font-size: 0.14rem;
color: $centent-notice-fontcolor;
}
&__cut {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
}
&__password {
display: inline-block;
text-align: center;
font-size: 0.14rem;
margin: auto 0.05rem auto 0.05rem;
color: $centent-notice-fontcolor;
}
}
}
</style>
image.png
修改一下路由
src\router\index.js：
import {
createRouter,
createWebHistory
} from 'vue-router'
const routes = [{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue')
}, {
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
访问http://localhost:8080/login可以切换访问不同的页面了。
