登录注册导航样式编写
This commit is contained in:
邝军华
parent
0d7845e56b
commit
8b08ff0b42
65
src/components/Heads.vue
Normal file
65
src/components/Heads.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="head">
|
||||||
|
<div class="head_l">
|
||||||
|
<img src="/icoimg.png" alt="收缩" />
|
||||||
|
</div>
|
||||||
|
<div class="head_r">
|
||||||
|
<img src="/logo.png" alt="头像" class="profile" />
|
||||||
|
<div class="head_user">
|
||||||
|
<div class="head_user_name">Json Taylor</div>
|
||||||
|
<div class="head_user_desc">web Designer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-bottom: 1px solid #f6f6f6;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.head_l{
|
||||||
|
width:40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.head_l img{
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
.head_r{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30px;
|
||||||
|
.profile{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f6f6f6;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.head_user{
|
||||||
|
.head_user_name{
|
||||||
|
color: #333333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.head_user_desc{
|
||||||
|
color:#a7a7a7;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,14 +1,164 @@
|
|||||||
<template>
|
<template>
|
||||||
<Navigation />
|
<div class="main">
|
||||||
<div class="w-screen flex flex-col items-center justify-center">
|
<div class="nav_left">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="/logo.png" alt="后台管理系统">
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">导航管理</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_li">
|
||||||
|
<ul>
|
||||||
|
<li v-for="r of routes" :key="r.path">
|
||||||
|
<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ te(r.name) ? t(r.name) : r.name }}</RouterLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">权限管理</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">模型设置</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">内容管理</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">会员管理</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_list">
|
||||||
|
<div class="nav_title"><img src="/logo.png" alt="图标">模版管理</div>
|
||||||
|
<div class="rArrl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav_right">
|
||||||
|
<Heads />
|
||||||
|
<div class="content">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <Navigation />-->
|
||||||
|
<!-- <div class="w-screen flex flex-col items-center justify-center">-->
|
||||||
|
<!-- <router-view v-slot="{ Component }">-->
|
||||||
|
<!-- <transition name="fade" mode="out-in">-->
|
||||||
|
<!-- <component :is="Component" />-->
|
||||||
|
<!-- </transition>-->
|
||||||
|
<!-- </router-view>-->
|
||||||
|
<!-- </div>-->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.main{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
.nav_left{
|
||||||
|
width: 15%;
|
||||||
|
height: 100vh;
|
||||||
|
background: #111c43;
|
||||||
|
overflow-y: auto;
|
||||||
|
.logo{
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
border-bottom: 0.5px solid #293356;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.logo img{
|
||||||
|
width: 85%;
|
||||||
|
height: 40px;
|
||||||
|
background: #293356;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.nav_list{
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 45px;
|
||||||
|
.nav_title{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #a3aed1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav_title img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.rArrl{
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-top: 1px solid #a3aed1;
|
||||||
|
border-right: 1px solid #a3aed1;
|
||||||
|
margin-top: 9px;
|
||||||
|
-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
|
||||||
|
transform: translate3d(0, -50%, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav_li{
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 16%;
|
||||||
|
background: #1a223f;
|
||||||
|
}
|
||||||
|
.nav_li ul li{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #a3aed1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.nav_li ul li img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav_right{
|
||||||
|
width: 85%;
|
||||||
|
height: 100vh;
|
||||||
|
background: #f0f1f7;
|
||||||
|
.content{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Heads from '~/components/Heads.vue'
|
||||||
|
import { getRoutes } from '@/plugins/router'
|
||||||
|
const { te, t } = useI18n()
|
||||||
|
const routes = getRoutes()
|
||||||
|
.filter((r) => !r.path.includes('notFound'))
|
||||||
|
.map((r) => {
|
||||||
|
let { path, name } = r
|
||||||
|
if (path === safeResolve('/')) {
|
||||||
|
return { path, name: 'home' }
|
||||||
|
}
|
||||||
|
if (!name) {
|
||||||
|
name = path
|
||||||
|
}
|
||||||
|
return { path, name: name.toString().slice(1).replaceAll('/', ' · ') }
|
||||||
|
})
|
||||||
|
const $route = useRoute()
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,6 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<img :src="state.captchaUrl" />
|
<div class="module">
|
||||||
|
<img src="/loginimg.jpg" class="module_img" />
|
||||||
|
<div class="module_r">
|
||||||
|
<div class="module_mian">
|
||||||
|
<div class="module_title">登录帐户</div>
|
||||||
|
<div class="module_desc">输入电子邮件 & 登录密码</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">电子邮件地址</div>
|
||||||
|
<input class="module_input" type="text" placeholder="8888@163.com" v-model="Email" />
|
||||||
|
</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">密码</div>
|
||||||
|
<input class="module_input" type="password" placeholder="输入密码" v-model="Password" />
|
||||||
|
</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">验证码</div>
|
||||||
|
<div class="module_code">
|
||||||
|
<input class="module_code_input" type="text" placeholder="输入验证码" v-model="vftcode" />
|
||||||
|
<img class="module_code_img" :src="state.captchaUrl" @click="onCode">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_radio"><input type="radio"/>记住密码 </div>
|
||||||
|
<div class="forgetpwd">忘记密码了吗？</div>
|
||||||
|
<button class="module_button">登录</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -9,7 +35,6 @@ const state = reactive({
|
|||||||
loginFrom: {}
|
loginFrom: {}
|
||||||
})
|
})
|
||||||
const login = reactive({ username: '18796357645', password: '18796357645', captcha: '', uuid: '' })
|
const login = reactive({ username: '18796357645', password: '18796357645', captcha: '', uuid: '' })
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
}
|
}
|
||||||
init()
|
init()
|
||||||
@ -19,6 +44,121 @@ init()
|
|||||||
.login-container{
|
.login-container{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
.module{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.module_img{
|
||||||
|
width: 60%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.module_r{
|
||||||
|
width: 40%;
|
||||||
|
background: #e5efee;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.module_mian{
|
||||||
|
width: 65%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
.module_title{
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
color:#333333;
|
||||||
|
}
|
||||||
|
.module_desc{
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color:#a7a7a7;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.module_m{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
.module_text{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.module_input{
|
||||||
|
width: 96%;
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 2%;
|
||||||
|
border:1px solid #eee;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.module_code{
|
||||||
|
width: 96%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.module_code_input{
|
||||||
|
width: 60%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border:1px solid #eee;
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 2%;
|
||||||
|
}
|
||||||
|
.module_code_img{
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.module_radio{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.module_radio input{
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.forgetpwd{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #328d86;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.module_button{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
background:#328d86;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.module_button:active{
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<route lang="json">
|
<route lang="json">
|
||||||
|
|||||||
139
src/pages/register.vue
Normal file
139
src/pages/register.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div class="module">
|
||||||
|
<div class="module_mian">
|
||||||
|
<div class="module_title">注册帐户</div>
|
||||||
|
<div class="module_desc">输入电子邮件 & 密码</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">电子邮件地址</div>
|
||||||
|
<input class="module_input" type="text" placeholder="8888@163.com" v-model="Email" />
|
||||||
|
</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">密码</div>
|
||||||
|
<input class="module_input" type="password" placeholder="输入密码" v-model="Password" />
|
||||||
|
</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">确认密码</div>
|
||||||
|
<div class="module_code">
|
||||||
|
<input class="module_input" type="password" placeholder="请再次输入密码" v-model="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_m">
|
||||||
|
<div class="module_text">验证码</div>
|
||||||
|
<div class="module_code">
|
||||||
|
<input class="module_code_input" type="text" placeholder="输入验证码" v-model="vftcode" />
|
||||||
|
<img class="module_code_img" src="/codeimg.png" @click="onCode">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_radio"><input type="radio"/>记住密码 </div>
|
||||||
|
<div class="forgetpwd">忘记密码了吗？</div>
|
||||||
|
<button class="module_button">注册</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.module{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("e36341619bf8f04dcbdc6b01105a85a.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.module_mian{
|
||||||
|
width: 26%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
.module_title{
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
color:#333333;
|
||||||
|
}
|
||||||
|
.module_desc{
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color:#a7a7a7;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.module_m{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
.module_text{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.module_input{
|
||||||
|
width: 96%;
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 2%;
|
||||||
|
border:1px solid #eee;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.module_code{
|
||||||
|
width: 96%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.module_code_input{
|
||||||
|
width: 60%;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border:1px solid #eee;
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 2%;
|
||||||
|
padding-right: 2%;
|
||||||
|
}
|
||||||
|
.module_code_img{
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.module_radio{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.module_radio input{
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.forgetpwd{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #328d86;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.module_button{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
background:#328d86;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.module_button:active{
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user