修改页面
This commit is contained in:
闵宪瑞
parent
f1dcfd97e4
commit
b61d6d81e7
@ -106,6 +106,7 @@
|
||||
"iOS >= 8"
|
||||
],
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"element-plus": "^2.9.2"
|
||||
}
|
||||
}
|
||||
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@ -8,6 +8,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@element-plus/icons-vue':
|
||||
specifier: ^2.3.1
|
||||
version: 2.3.1(vue@3.4.26(typescript@5.4.5))
|
||||
element-plus:
|
||||
specifier: ^2.9.2
|
||||
version: 2.9.2(vue@3.4.26(typescript@5.4.5))
|
||||
|
||||
@ -1,26 +1,45 @@
|
||||
<template>
|
||||
<div class="head">
|
||||
<div class="head_l">
|
||||
<img src="/icoimg.png" alt="收缩" />
|
||||
<!-- <img src="/icoimg.png" alt="收缩" />-->
|
||||
</div>
|
||||
|
||||
<el-dropdown>
|
||||
<div class="head_r">
|
||||
<img src="/logo.png" alt="头像" class="profile" />
|
||||
<img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />
|
||||
<div class="head_user">
|
||||
<div class="head_user_name">Json Taylor</div>
|
||||
<div class="head_user_desc">web Designer</div>
|
||||
<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
|
||||
<div class="head_user_desc">管理员</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item >个人中心</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
const logout = () => {
|
||||
logoutAdmin().then(()=>{
|
||||
toast.success("退出成功~")
|
||||
router.push('/login');
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.head{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
background: #fdfdfe;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -34,6 +53,7 @@
|
||||
.head_l img{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.head_r{
|
||||
display: flex;
|
||||
|
||||
@ -1,144 +1,43 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<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 getFrontList()" :key="r.path">
|
||||
<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ 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 }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-container>
|
||||
<el-header>
|
||||
<heads></heads>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px" >
|
||||
<el-menu
|
||||
default-active="2"
|
||||
router
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="r in getFrontList()"
|
||||
:key="r.name"
|
||||
:index="r.path"
|
||||
>
|
||||
<component class="icons" :is="r.icon" />
|
||||
<template #title>{{ r.name }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-main class="main">
|
||||
<router-view ></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getFrontList } from '~/utils/utils'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
background-color: #f6f4f4;
|
||||
}
|
||||
.icons{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import Heads from '~/components/Heads.vue'
|
||||
import { getFrontList } from '~/utils/utils'
|
||||
|
||||
</script>
|
||||
|
||||
@ -7,8 +7,14 @@ import 'virtual:unocss-devtools'
|
||||
import './styles/main.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
|
||||
import App from './App.vue'
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
dsdsd
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
dsdsd
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -11,10 +11,3 @@ import FoundationLine from '~/components/view/foundation-line.vue'
|
||||
|
||||
|
||||
</script>
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"layout": "front"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="module_desc">输入用户名 & 登录密码</div>
|
||||
<div class="module_m">
|
||||
<div class="module_text">用户名</div>
|
||||
<input class="module_input" type="text" placeholder="请输入用户名" v-model="Email" />
|
||||
<input class="module_input" type="text" placeholder="输入用户名" v-model="Email" />
|
||||
</div>
|
||||
<div class="module_m">
|
||||
<div class="module_text">密码</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<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" />
|
||||
<input class="module_input" type="text" placeholder="输入用户名" v-model="Email" />
|
||||
</div>
|
||||
<div class="module_m">
|
||||
<div class="module_text">密码</div>
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="module_m">
|
||||
<div class="module_text">确认密码</div>
|
||||
<div class="module_code">
|
||||
<input class="module_input" type="password" placeholder="请再次输入密码" v-model="Password" />
|
||||
<input class="module_input" type="password" placeholder="再次输入密码" v-model="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="module_m">-->
|
||||
@ -25,12 +25,16 @@
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="module_radio"><input type="radio"/>记住密码 </div>-->
|
||||
<div class="forgetpwd">有账号吗？</div>
|
||||
<div class="forgetpwd" @click="router.push('/login')">有账号？</div>
|
||||
<button class="module_button">注册</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.module{
|
||||
|
||||
@ -10,24 +10,27 @@ export const getUuid = (): string => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const getFrontList = () => {
|
||||
const routes = [
|
||||
{
|
||||
"path": "/",
|
||||
"name": "首页"
|
||||
"name": "首页",
|
||||
"icon": "House",
|
||||
},
|
||||
{
|
||||
"path": "/",
|
||||
"name": "首页"
|
||||
"name": "首页",
|
||||
"icon": "House",
|
||||
},
|
||||
{
|
||||
"path": "/",
|
||||
"name": "首页"
|
||||
"name": "首页",
|
||||
"icon": "House",
|
||||
},
|
||||
{
|
||||
"path": "/",
|
||||
"name": "首页"
|
||||
"name": "首页",
|
||||
"icon": "House",
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user