This commit is contained in:
parent
37f969c4e6
commit
5a386f8a66
@ -10,11 +10,11 @@
|
||||
<n-icon size="30" class="menuIcon ml-2 hidden md:block text-pp-500" @click="active = true">
|
||||
<MdMenu />
|
||||
</n-icon>
|
||||
|
||||
<div class="wea text-white md:hidden">
|
||||
<wea />
|
||||
</div>
|
||||
<div class="right flex items-center">
|
||||
<div class="wea text-white md:hidden">
|
||||
<wea />
|
||||
</div>
|
||||
|
||||
<div v-if="!userinfo" class="login mx-8">
|
||||
<n-button color="#8a2be2" size="small" @click="goLogin">登录</n-button>
|
||||
</div>
|
||||
@ -22,10 +22,10 @@
|
||||
<n-dropdown :options="userOp" @select="handleSelect" :show-arrow="true">
|
||||
<div class="uinfo mx-8 text-white flex items-center">
|
||||
<div class="ava flex items-center justify-center">
|
||||
<n-avatar round size="medium" :src="userinfo.avaUrl" />
|
||||
<n-avatar round size="small" :src="userinfo.avaUrl" />
|
||||
</div>
|
||||
<div class="ml-2"></div>
|
||||
<n-button text class="userinfo">
|
||||
<n-button text class="userinfo text-pp-500">
|
||||
{{ userinfo.nickname }}
|
||||
</n-button>
|
||||
</div>
|
||||
@ -113,7 +113,7 @@ function toHome() {
|
||||
push("/home");
|
||||
const i = document.querySelector(".n-menu-item .n-menu-item-content-header");
|
||||
i.click();
|
||||
|
||||
|
||||
}
|
||||
function handleSelect(k) {
|
||||
switch (k) {
|
||||
@ -162,13 +162,13 @@ function goConsole() {
|
||||
.boxxx {
|
||||
background: transparent url("../assets/cstyle/花边.png") no-repeat center center/100% 100% !important;
|
||||
}
|
||||
|
||||
.ava {
|
||||
// background-color: red ;
|
||||
background: transparent url("../assets/cstyle/中秋节中国风边框3.png") no-repeat center center/100% 100% !important;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.login {
|
||||
:deep(.n-button) {
|
||||
background-color: @purple;
|
||||
@ -176,13 +176,8 @@ function goConsole() {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.orange) {
|
||||
color: #ffa500;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
:deep(.menu-item) {
|
||||
color: @orange !important;
|
||||
color: rgb(73, 117, 104) !important;
|
||||
}
|
||||
|
||||
:deep(.router-link-active) {
|
||||
|
||||
@ -34,7 +34,7 @@ function getH() {
|
||||
|
||||
<style scoped lang="less">
|
||||
.boxx {
|
||||
background: transparent url('../assets/bg/06.jpeg') no-repeat center center !important;
|
||||
background: transparent url('../assets/bg/07.jpeg') no-repeat center center !important;
|
||||
}
|
||||
|
||||
// :deep(.n-layout-header) {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="w-[200px] my-4" v-for="(i, ii) in navList">
|
||||
<n-button @click="link(i.menuLink)" class="btn w-full hover:text-[white]" type="primary" ghost>
|
||||
<template #icon>
|
||||
<img v-if="!i.exp" width="20" height="20" class="mr-2" :src="i.menuIcon" alt="" @error="i.exp = true">
|
||||
<img v-if="!i.exp" width="20" height="20" class="mr-2" :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
|
||||
<div :style="{ backgroundColor: i.color }"
|
||||
class="w-[20px] h-[20px] text-[12px] text-[white] rounded-full flex justify-center items-center"
|
||||
v-else>{{ i.menuName[0] }}</div>
|
||||
@ -15,7 +15,7 @@
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="w-[200px] my-4">
|
||||
<n-button @click="addMenu" class="btn w-full hover:text-[white]" type="primary" ghost>
|
||||
<n-button @click="addMenu" class="btn w-full text-2xl hover:text-[white]" type="primary" ghost>
|
||||
+
|
||||
</n-button>
|
||||
</div>
|
||||
@ -24,11 +24,36 @@
|
||||
</n-scrollbar>
|
||||
|
||||
</n-card>
|
||||
|
||||
<n-modal v-model:show="showModal">
|
||||
<n-card class="w-1/4">
|
||||
<div class="title text-3xl text-center my-8 text-pp-700">
|
||||
添加菜单
|
||||
</div>
|
||||
<n-form :model="formData" ref="formRef" label-width="80" label-placement="left">
|
||||
<n-form-item-row class="mt-4" path="menuName">
|
||||
<n-input v-model:value="formData.menuName" placeholder="导航名称" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row class="mt-4" path="menuLink">
|
||||
<n-input v-model:value="formData.menuLink" placeholder="导航链接" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row v-if="formData.menuLink" class="mt-4">
|
||||
<img class="mx-auto" width="20" height="20" :src="'https://favicon.im/' + formData.menuLink.split('/')[2]"
|
||||
alt="" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row class="mt-4">
|
||||
<n-button class="w-2/5 ml-[5%]" @click="onCancel">取消</n-button>
|
||||
<n-button class="w-2/5 ml-[10%]" type="primary" @click="onSubmit">立即创建</n-button>
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import cookie from "vue-cookies";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@ -43,6 +68,12 @@ const userinfo = cookie.get("userinfo");
|
||||
const router = useRouter()
|
||||
const fullPath = router.currentRoute.value.fullPath
|
||||
const { push } = router;
|
||||
const showModal = ref(false)
|
||||
const formData = reactive({
|
||||
menuName: "",
|
||||
menuLink: "",
|
||||
menuIcon:"#"
|
||||
})
|
||||
//mark method
|
||||
async function getNav() {
|
||||
let res = {}
|
||||
@ -59,25 +90,51 @@ async function getNav() {
|
||||
}
|
||||
|
||||
function addMenu() {
|
||||
if (!!token && !!userinfo) {}
|
||||
if (!!token && !!userinfo) {
|
||||
showModal.value = true
|
||||
}
|
||||
else {
|
||||
$dialog.success({
|
||||
title: "该功能能需要登录账号",
|
||||
content: "未登录账号，是否去登录？",
|
||||
positiveText: "登录",
|
||||
negativeText: "返回",
|
||||
onPositiveClick: () => {
|
||||
push({
|
||||
path: "/login",
|
||||
query: {
|
||||
redirect: fullPath,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
title: "该功能能需要登录账号",
|
||||
content: "未登录账号，是否去登录？",
|
||||
positiveText: "登录",
|
||||
negativeText: "返回",
|
||||
onPositiveClick: () => {
|
||||
push({
|
||||
path: "/login",
|
||||
query: {
|
||||
redirect: fullPath,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (!formData.menuName) {
|
||||
$msg.error("请输入导航名称");
|
||||
return
|
||||
}
|
||||
if (!formData.menuLink) {
|
||||
$msg.error('请输入导航链接');
|
||||
return
|
||||
}
|
||||
const res = await $http.nav.addMenu(formData)
|
||||
if (res.code == 1) {
|
||||
$msg.success(res.msg);
|
||||
onCancel()
|
||||
getNav()
|
||||
}
|
||||
else {
|
||||
$msg.error(res.msg);
|
||||
}
|
||||
}
|
||||
function onCancel() {
|
||||
formData.menuName = ""
|
||||
formData.menuLink = ""
|
||||
showModal.value = false
|
||||
}
|
||||
function link(url) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user