一、图片资源
二、Login.vue
<template>
<section class="loginContainer">
<div class="loginInner">
<div class="login_header">
<h2 class="login_logo">硅谷外卖</h2>
<div class="login_header_title">
<a href="javascript:;" class="on">短信登录</a>
<a href="javascript:;">密码登录</a>
</div>
</div>
<div class="login_content">
<form>
<div class="on">
<section class="login_message">
<input type="tel" maxlength="11" placeholder="手机号">
<button disabled="disabled" class="get_verification">获取验证码</button>
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="验证码">
</section>
<section class="login_hint">
温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
<a href="javascript:;">《用户服务协议》</a>
</section>
</div>
<div>
<section>
<section class="login_message">
<input type="tel" maxlength="11" placeholder="手机/邮箱/用户名">
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="密码">
<div class="switch_button off">
<div class="switch_circle"></div>
<span class="switch_text">...</span>
</div>
</section>
<section class="login_message">
<input type="text" maxlength="11" placeholder="验证码">
<img class="get_verification" src="./images/captcha.svg" alt="captcha">
</section>
</section>
</div>
<button class="login_submit">登录</button>
</form>
<a href="javascript:;" class="about_us">关于我们</a>
</div>
<a href="javascript:" @click="$router.back()" class="go_back">
<i class="iconfont icon-jiantou2"></i>
</a>
</div>
</section>
</template>
<script>
export default {
name: ‘Login‘,
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.loginContainer
width 100%
height 100%
background #fff
.loginInner
padding-top 60px
width 80%
margin 0 auto
.login_header
.login_logo
font-size 40px
font-weight bold
color #02a774
text-align center
.login_header_title
padding-top 40px
text-align center
>a
color #333
font-size 14px
padding-bottom 4px
&:first-child
margin-right 40px
&.on
color #02a774
font-weight 700
border-bottom 2px solid #02a774
.login_content
>form
>div
display none
&.on
display block
input
width 100%
height 100%
padding-left 10px
box-sizing border-box
border 1px solid #ddd
border-radius 4px
outline 0
font 400 14px Arial
&:focus
border 1px solid #02a774
.login_message
position relative
margin-top 16px
height 48px
font-size 14px
background #fff
.get_verification
position absolute
top 50%
right 10px
transform translateY(-50%)
border 0
color #ccc
font-size 14px
background transparent
.login_verification
position relative
margin-top 16px
height 48px
font-size 14px
background #fff
.switch_button
font-size 12px
border 1px solid #ddd
border-radius 8px
transition background-color .3s,border-color .3s
padding 0 6px
width 30px
height 16px
line-height 16px
color #fff
position absolute
top 50%
right 10px
transform translateY(-50%)
&.off
background #fff
.switch_text
float right
color #ddd
&.on
background #02a774
>.switch_circle
//transform translateX(27px)
position absolute
top -1px
left -1px
width 16px
height 16px
border 1px solid #ddd
border-radius 50%
background #fff
box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
transition transform .3s
.login_hint
margin-top 12px
color #999
font-size 14px
line-height 20px
>a
color #02a774
.login_submit
display block
width 100%
height 42px
margin-top 30px
border-radius 4px
background #4cd96f
color #fff
text-align center
font-size 16px
line-height 42px
border 0
.about_us
display block
font-size 12px
margin-top 20px
text-align center
color #999
.go_back
position absolute
top 5px
left 5px
width 30px
height 30px
>.iconfont
font-size 20px
color #999
</style>
三、注册Login路由
router/index.js
import Login from ‘../pages/Login/Login‘
{
path: ‘/login‘,
component: Login
}
四、Profile.vue
<router-link to="/login" class="profile-link">
<div class="profile_image">
<i class="iconfont icon-person"></i>
</div>
<div class="user-info">
<p class="user-info-top">登录/注册</p>
<p>
<span class="user-icon">
<i class="iconfont icon-shouji icon-mobile"></i>
</span>
<span class="icon-mobile-number"> 暂无绑定手机号</span>
</p>
</div>
<span class="arrow">
<i class="iconfont icon-jiantou1"></i>
</span>
</router-link>
五、控制Footer的显示隐藏
5.1 router/index
export default new VueRouter({
routes: [
{
path: ‘/‘,
redirect: ‘/msite‘
},
{
path: ‘/msite‘,
component: Msite,
meta: {
showFooter: true
}
},
{
path: ‘/search‘,
component: Search,
meta: {
showFooter: true
}
},
{
path: ‘/order‘,
component: Order,
meta: {
showFooter: true
}
},
{
path: ‘/profile‘,
component: Profile,
meta: {
showFooter: true
}
},
{
path: ‘/login‘,
component: Login
}
]
})
5.2 App.vue
<FooterGuide v-show="$route.meta.showFooter"/>
原文地址：https://www.cnblogs.com/mxsf/p/10989392.html
时间： 2024-10-02 21:14:56