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 16:46:41 +08:00
parent a568976328
commit f1dcfd97e4
7 changed files with 204 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
src/components/nav/Navigation1.vue
View File

@ -38,8 +38,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
import { getFrontList } from '~/utils/utils' import { getFrontList } from '~/utils/utils'
import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const activeIndex = ref('1') const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => { const handleSelect = (key: string, keyPath: string[]) => {

165
src/layouts/admin.vue
View File

@ -1,11 +1,164 @@
<!--后台模板-->
<template> <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 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 }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</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>
<script setup lang="ts">
</script>
<style scoped> <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>

30
src/layouts/default.vue
View File

@ -10,8 +10,8 @@
</div> </div>
<div class="nav_li"> <div class="nav_li">
<ul> <ul>
<li v-for="r of routes" :key="r.path"> <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">{{ te(r.name) ? t(r.name) : r.name }}</RouterLink> <img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ r.name }}</RouterLink>
</li> </li>
</ul> </ul>
</div> </div>
@ -47,14 +47,7 @@
</div> </div>
</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 scoped> <style scoped>
@ -146,19 +139,6 @@
</style> </style>
<script setup lang="ts"> <script setup lang="ts">
import Heads from '~/components/Heads.vue' import Heads from '~/components/Heads.vue'
import { getRoutes } from '@/plugins/router' import { getFrontList } from '~/utils/utils'
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> </script>

11
src/pages/admin/index.vue Normal file
View File

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

13
src/pages/login.vue
View File

@ -5,10 +5,10 @@
<div class="module_r"> <div class="module_r">
<div class="module_mian"> <div class="module_mian">
<div class="module_title">登录帐户</div> <div class="module_title">登录帐户</div>
<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>
@ -21,8 +21,8 @@
<img class="module_code_img" :src="state.captchaUrl" @click="onCode"> <img class="module_code_img" :src="state.captchaUrl" @click="onCode">
</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('/register')">没有密码吗？</div>
<button class="module_button">登录</button> <button class="module_button">登录</button>
</div> </div>
</div> </div>
@ -30,6 +30,8 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({ const state = reactive({
captchaUrl: '', captchaUrl: '',
loginFrom: {} loginFrom: {}
@ -143,6 +145,7 @@ init()
font-size: 14px; font-size: 14px;
color: #328d86; color: #328d86;
margin-top: 10px; margin-top: 10px;
cursor: pointer;
} }
.module_button{ .module_button{
margin: 0 auto; margin: 0 auto;

32
src/pages/register.vue
View File

@ -2,9 +2,9 @@
<div class="module"> <div class="module">
<div class="module_mian"> <div class="module_mian">
<div class="module_title">注册帐户</div> <div class="module_title">注册帐户</div>
<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="8888@163.com" v-model="Email" />
</div> </div>
<div class="module_m"> <div class="module_m">
@ -17,15 +17,15 @@
<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">-->
<div class="module_text">验证码</div> <!-- <div class="module_text">验证码</div>-->
<div class="module_code"> <!-- <div class="module_code">-->
<input class="module_code_input" type="text" placeholder="输入验证码" v-model="vftcode" /> <!-- <input class="module_code_input" type="text" placeholder="输入验证码" v-model="vftcode" />-->
<img class="module_code_img" src="/codeimg.png" @click="onCode"> <!-- <img class="module_code_img" src="/codeimg.png" @click="onCode">-->
</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">有账号吗？</div>
<button class="module_button">注册</button> <button class="module_button">注册</button>
</div> </div>
</div> </div>
@ -39,7 +39,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
background: url("e36341619bf8f04dcbdc6b01105a85a.png"); background: url("/login/e36341619bf8f04dcbdc6b01105a85a.png");
background-size: 100% 100%; background-size: 100% 100%;
.module_mian{ .module_mian{
width: 26%; width: 26%;
@ -114,6 +114,7 @@
margin-right: 5px; margin-right: 5px;
} }
.forgetpwd{ .forgetpwd{
cursor: pointer;
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
font-size: 14px; font-size: 14px;
@ -137,3 +138,10 @@
} }
} }
</style> </style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>