【vue3.0】7.0 某东到家（七）——登录页面开发

有这么一个设定

先登录才能看到首页面。
将项目src/App.vue修改：

新建src\views\login\Login.vue:

image.png

调整优化：

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

最终调整输入框：

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

继续优化：

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:

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可以切换访问不同的页面了。