xunyingcloud/front-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面

Browse Source
This commit is contained in:
闵宪瑞 2025-01-08 17:31:27 +08:00
parent f1dcfd97e4
commit b61d6d81e7
10 changed files with 97 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -106,6 +106,7 @@
"iOS >= 8" "iOS >= 8"
], ],
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.9.2" "element-plus": "^2.9.2"
} }
} }

3
pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.: .:
dependencies: dependencies:
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.4.26(typescript@5.4.5))
element-plus: element-plus:
specifier: ^2.9.2 specifier: ^2.9.2
version: 2.9.2(vue@3.4.26(typescript@5.4.5)) version: 2.9.2(vue@3.4.26(typescript@5.4.5))

40
src/components/Heads.vue
View File

@ -1,26 +1,45 @@
<template> <template>
<div class="head"> <div class="head">
<div class="head_l"> <div class="head_l">
<img src="/icoimg.png" alt="收缩" /> <!-- <img src="/icoimg.png" alt="收缩" />-->
</div> </div>
<div class="head_r">
<img src="/logo.png" alt="头像" class="profile" /> <el-dropdown>
<div class="head_user"> <div class="head_r">
<div class="head_user_name">Json Taylor</div> <img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />
<div class="head_user_desc">web Designer</div> <div class="head_user">
<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
<div class="head_user_desc">管理员</div>
</div>
</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> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
/**
* 退出登录
*/
const logout = () => {
logoutAdmin().then(()=>{
toast.success("退出成功~")
router.push('/login');
})
}
</script> </script>
<style scoped> <style scoped>
.head{ .head{
width: 100%; width: 100%;
height: 50px; height: 50px;
background: #FFFFFF; background: #fdfdfe;
border-bottom: 1px solid #f6f6f6;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -34,6 +53,7 @@
.head_l img{ .head_l img{
width: 25px; width: 25px;
height: 25px; height: 25px;
cursor: pointer;
} }
.head_r{ .head_r{
display: flex; display: flex;

177
src/layouts/default.vue
View File

@ -1,144 +1,43 @@
<template> <template>
<div class="main"> <el-container>
<div class="nav_left"> <el-header>
<div class="logo"> <heads></heads>
<img src="/logo.png" alt="后台管理系统"> </el-header>
</div> <el-container>
<div class="nav_list"> <el-aside width="200px" >
<div class="nav_title"><img src="/logo.png" alt="图标">导航管理</div> <el-menu
<div class="rArrl"></div> default-active="2"
</div> router
<div class="nav_li"> >
<ul> <el-menu-item
<li v-for="r of getFrontList()" :key="r.path"> v-for="r in getFrontList()"
<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ r.name }}</RouterLink> :key="r.name"
</li> :index="r.path"
</ul> >
</div> <component class="icons" :is="r.icon" />
<div class="nav_list"> <template #title>{{ r.name }}</template>
<div class="nav_title"><img src="/logo.png" alt="图标">权限管理</div> </el-menu-item>
<div class="rArrl"></div> </el-menu>
</div> </el-aside>
<div class="nav_list"> <el-main class="main">
<div class="nav_title"><img src="/logo.png" alt="图标">模型设置</div> <router-view ></router-view>
<div class="rArrl"></div> </el-main>
</div> </el-container>
<div class="nav_list"> </el-container>
<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>
</template> </template>
<script setup lang="ts">
import { getFrontList } from '~/utils/utils'
</script>
<style scoped> <style scoped>
.main{ .main{
width: 100%; width: 100%;
display: flex; height: 100%;
justify-content: space-between; background-color: #f6f4f4;
height: 100vh; }
overflow: hidden; .icons{
.nav_left{ width: 18px;
width: 15%; height: 18px;
height: 100vh; margin-right: 5px;
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 { getFrontList } from '~/utils/utils'
</script>

6
src/main.ts
View File

@ -7,8 +7,14 @@ import 'virtual:unocss-devtools'
import './styles/main.css' import './styles/main.css'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue' import App from './App.vue'
const app = createApp(App) const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus) app.use(ElementPlus)
app.mount('#app') app.mount('#app')

7
src/pages/admin/index.vue
View File

@ -1,11 +1,10 @@
<template>
dsdsd
</template>
<script setup lang="ts"> <script setup lang="ts">
</script> </script>
<template>
dsdsd
</template>
<style scoped> <style scoped>
</style> </style>

7
src/pages/index.vue
View File

@ -11,10 +11,3 @@ import FoundationLine from '~/components/view/foundation-line.vue'
</script> </script>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>

2
src/pages/login.vue
View File

@ -8,7 +8,7 @@
<div class="module_desc">输入用户名 & 登录密码</div> <div class="module_desc">输入用户名 & 登录密码</div>
<div class="module_m"> <div class="module_m">
<div class="module_text">用户名</div> <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>
<div class="module_m"> <div class="module_m">
<div class="module_text">密码</div> <div class="module_text">密码</div>

10
src/pages/register.vue
View File

@ -5,7 +5,7 @@
<div class="module_desc">输入用户名 & 密码</div> <div class="module_desc">输入用户名 & 密码</div>
<div class="module_m"> <div class="module_m">
<div class="module_text">用户名</div> <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>
<div class="module_m"> <div class="module_m">
<div class="module_text">密码</div> <div class="module_text">密码</div>
@ -14,7 +14,7 @@
<div class="module_m"> <div class="module_m">
<div class="module_text">确认密码</div> <div class="module_text">确认密码</div>
<div class="module_code"> <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> </div>
<!-- <div class="module_m">--> <!-- <div class="module_m">-->
@ -25,12 +25,16 @@
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="module_radio"><input type="radio"/>记住密码 </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> <button class="module_button">注册</button>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
</script> </script>
<style scoped> <style scoped>
.module{ .module{

13
src/utils/utils.ts
View File

@ -10,24 +10,27 @@ export const getUuid = (): string => {
}; };
export const getFrontList = () => { export const getFrontList = () => {
const routes = [ const routes = [
{ {
"path": "/", "path": "/",
"name": "首页" "name": "首页",
"icon": "House",
}, },
{ {
"path": "/", "path": "/",
"name": "首页" "name": "首页",
"icon": "House",
}, },
{ {
"path": "/", "path": "/",
"name": "首页" "name": "首页",
"icon": "House",
}, },
{ {
"path": "/", "path": "/",
"name": "首页" "name": "首页",
"icon": "House",
}, },
] ]