This commit is contained in:
parent
96f9e6ca4a
commit
b34147a30b
@ -2,6 +2,6 @@
|
||||
ENV = 'development'
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
#VITE_APP_BASE_URL = 'http://127.0.0.1:7777'
|
||||
VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
|
||||
VITE_APP_BASE_URL = 'http://127.0.0.1:7777'
|
||||
# VITE_APP_BASE_URL = 'https://www.hxyouzi.com'
|
||||
|
||||
|
||||
@ -20,11 +20,8 @@ export function addMenu(data) {
|
||||
// deleteMenu
|
||||
export function deleteMenu(id) {
|
||||
return request({
|
||||
url: '/nav/menu',
|
||||
url: '/nav/menu/'+id,
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ onMounted(async () => {
|
||||
// console.log('>>>>>',data.audio);
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById("aplayer"),
|
||||
@ -67,7 +67,10 @@ onMounted(async () => {
|
||||
flag = true;
|
||||
}
|
||||
});
|
||||
// d.click();
|
||||
|
||||
// 获取当前屏幕宽度
|
||||
const width = document.documentElement.clientWidth; // 获取屏幕宽度
|
||||
if (width < 767) d.click();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@ -75,59 +78,74 @@ onMounted(async () => {
|
||||
width: 480px; // 定个宽度
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: #f5f5f8; // 设置背景色
|
||||
|
||||
:deep(.aplayer-body) {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: #f5f5f8; // 设置背景色
|
||||
|
||||
// bottom: 10px; // 设置底部距离
|
||||
.aplayer-icon-lrc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon):hover svg path {
|
||||
fill: @blue; // 设置颜色
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) {
|
||||
width: 418px !important;
|
||||
background-color: #f5f5f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list-light) {
|
||||
background: inherit;
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol {
|
||||
max-height: 160px !important;
|
||||
|
||||
// margin-bottom: 12px;
|
||||
.aplayer-list-light .aplayer-list-author {
|
||||
color: @orange !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-list) ol li:hover {
|
||||
background: inherit;
|
||||
color: @blue;
|
||||
border: none;
|
||||
|
||||
.aplayer-list-author {
|
||||
color: @blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-info) {
|
||||
padding: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon) svg {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: var(--v-bgc); // 设置背景色
|
||||
}
|
||||
|
||||
:deep(.aplayer-icon):hover svg {
|
||||
color: @blue; // 设置颜色
|
||||
}
|
||||
|
||||
:deep(.aplayer-miniswitcher) {
|
||||
color: var(--n-text-color); // 设置颜色
|
||||
background-color: var(--v-bgc); // 设置背景色
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc) {
|
||||
// text-align: right !important;
|
||||
width: 368px !important;
|
||||
@ -137,14 +155,17 @@ onMounted(async () => {
|
||||
z-index: 999;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc-contents) {
|
||||
transition: all 0.5s ease !important;
|
||||
|
||||
p {
|
||||
font-size: 12px !important;
|
||||
color: @purple !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.aplayer-lrc-contents) {
|
||||
.aplayer-lrc-current {
|
||||
opacity: 1;
|
||||
@ -153,6 +174,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#aplayer {
|
||||
width: 100vw !important;
|
||||
|
||||
@ -40,13 +40,12 @@
|
||||
<n-drawer-content>
|
||||
<template #header>
|
||||
<div class="flex items-center" :style="{ height: menuH.clientHeight + 'px' }">
|
||||
<n-icon size="24" class="orange mx-2">
|
||||
<orange />
|
||||
</n-icon>
|
||||
<img v-if="route.path=='/home'" class="rounded-full mx-4" src="@/assets/logo/柚子娘.png" width="25" alt="">
|
||||
<img v-else class="rounded-full mx-4" src="@/assets/logo/柚子娘-绿.png" width="22" alt="">
|
||||
菜单
|
||||
</div>
|
||||
</template>
|
||||
<n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options.slice(1)"
|
||||
<n-menu v-model:value="activeKey" mode="vertical" :options="menuInfo.options"
|
||||
@click="active = false"></n-menu>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
@ -54,7 +53,6 @@
|
||||
|
||||
<script setup>
|
||||
import wea from "@/components/wea.vue";
|
||||
import orange from "@/icon/orange.svg";
|
||||
import { usesizeStore } from "@/stores/size.js";
|
||||
import { renderIcon } from "@/util/h.js";
|
||||
import menuInfo from "@/util/menu.js";
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="box flex flex-wrap px-8">
|
||||
<div class="box flex flex-wrap px-8 sm:px-0">
|
||||
<n-card :style="{ height: boxH + 'px' }">
|
||||
<n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
|
||||
<div class="grid gridSpace gap-4 items-center justify-center">
|
||||
<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>
|
||||
<div class="grid gridSpace gap-4 items-center justify-items-center">
|
||||
<div class="w-[200px] my-4 sm:w-[150px] sm:my-1" v-for="(i, ii) in navList">
|
||||
<n-button @click="link(i.menuLink)" @contextmenu="handdlemenutext($event, i)"
|
||||
class="btn w-full hover:text-[white]" type="primary" ghost>
|
||||
<template #icon>
|
||||
<img class="rounded mr-2" v-if="!i.exp" width="20" height="20" :src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
|
||||
<img class="rounded-full mr-2" v-if="!i.exp" width="20" height="20"
|
||||
:src="'https://favicon.im/' + i.menuLink.split('/')[2]" alt="" @error="i.exp = true">
|
||||
<div :style="{ backgroundColor: '#50C4D3' }"
|
||||
class="w-[20px] h-[20px] text-[14px] text-[white] rounded-full"
|
||||
v-else>{{ i.menuName[0] }}</div>
|
||||
class="w-[20px] h-[20px] text-[14px] text-[white] rounded-full" v-else>{{ i.menuName[0] }}</div>
|
||||
</template>
|
||||
{{ i.menuName }}
|
||||
<span class="truncate">{{ i.menuName }}</span>
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="w-[200px] my-4">
|
||||
<div class="w-[200px] my-4 sm:w-[150px] sm:my-1">
|
||||
<n-button @click="addMenu" class="btn w-full text-2xl hover:text-[white]" type="primary" ghost>
|
||||
+
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</n-scrollbar>
|
||||
|
||||
</n-card>
|
||||
@ -49,6 +49,17 @@
|
||||
|
||||
</n-card>
|
||||
</n-modal>
|
||||
|
||||
<div class="munur bg-pp-900 py-2 px-1" v-if="menuShow"
|
||||
:style="{ position: 'fixed', top: y + 'px', left: x + 'px' }">
|
||||
<template v-for="i in menuList">
|
||||
<n-button v-if="i.show" class="text-[white]" type="primary" :tertiary="!i.active"
|
||||
@click="handdleclickmenu(i.id)" @mouseenter="handdleentermenu(i.id)" @mouseleave="handdleleavemenu(i.id)">{{
|
||||
i.name
|
||||
}}</n-button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -72,8 +83,23 @@ const showModal = ref(false)
|
||||
const formData = reactive({
|
||||
menuName: "",
|
||||
menuLink: "",
|
||||
menuIcon:"#"
|
||||
menuIcon: "#"
|
||||
})
|
||||
const menuList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "删除导航",
|
||||
active: false,
|
||||
show: true,
|
||||
},
|
||||
])
|
||||
const menuShow = ref(false)
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
const menuSelect = ref(0)
|
||||
let imgTimer = null
|
||||
|
||||
|
||||
//mark method
|
||||
async function getNav() {
|
||||
let res = {}
|
||||
@ -85,6 +111,8 @@ async function getNav() {
|
||||
}
|
||||
navList.value = res.data.map((item) => {
|
||||
item.exp = false
|
||||
item.active = false
|
||||
item.show = true
|
||||
return item
|
||||
})
|
||||
}
|
||||
@ -111,7 +139,7 @@ function addMenu() {
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
async function onSubmit() {
|
||||
if (!formData.menuName) {
|
||||
$msg.error("请输入导航名称");
|
||||
return
|
||||
@ -138,6 +166,73 @@ function onCancel() {
|
||||
function link(url) {
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
|
||||
function handdleclickmenu(id) {
|
||||
switch (id) {
|
||||
case 1:
|
||||
deleteMenu()
|
||||
break;
|
||||
}
|
||||
menuShow.value = false
|
||||
resetMenuList()
|
||||
}
|
||||
function deleteMenu() {
|
||||
$dialog.warning({
|
||||
title: '删除',
|
||||
content: '你确定删除此导航？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
maskClosable: true,
|
||||
onPositiveClick: () => {
|
||||
$http.nav.deleteMenu(menuSelect.value).then(res => {
|
||||
if (res.code == 1) {
|
||||
$msg.success(res.msg);
|
||||
getNav()
|
||||
}
|
||||
else {
|
||||
$msg.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
function handdleentermenu(id) {
|
||||
menuList.value[id - 1].active = true;
|
||||
imgTimer && clearTimeout(imgTimer)
|
||||
}
|
||||
function handdleleavemenu(id) {
|
||||
menuList.value[id - 1].active = false;
|
||||
imgTimer = setTimeout(() => {
|
||||
menuShow.value = false
|
||||
resetMenuList()
|
||||
}, 2000);
|
||||
}
|
||||
function handdlemenutext(e, i) {
|
||||
// console.log(e, i);
|
||||
menuShow.value = false
|
||||
const { clientX, clientY } = e;
|
||||
x.value = clientX;
|
||||
y.value = clientY;
|
||||
menuShow.value = true;
|
||||
menuSelect.value = i.id
|
||||
console.log(i.id);
|
||||
imgTimer && clearTimeout(imgTimer)
|
||||
imgTimer = setTimeout(() => {
|
||||
menuShow.value = false
|
||||
resetMenuList()
|
||||
}, 2000);
|
||||
}
|
||||
function resetMenuList() {
|
||||
menuList.value = ([
|
||||
{
|
||||
id: 1,
|
||||
name: "删除导航",
|
||||
active: false,
|
||||
show: true,
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
//mark 周期、内置函数等
|
||||
onMounted(() => {
|
||||
getNav()
|
||||
@ -214,4 +309,30 @@ onMounted(() => {
|
||||
padding: 30px;
|
||||
background: #f1f2f370;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
:deep(.n-card) {
|
||||
padding: 10px;
|
||||
background: #f1f2f320;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.n-card__content, ) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gridSpace {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.munur {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -62,8 +62,7 @@
|
||||
</div>
|
||||
<!-- <template v-if="isBaidu"> -->
|
||||
<div class="list">
|
||||
<div class=" hover:text-[#FF9003]" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index"
|
||||
v-show="index < 10">
|
||||
<div class=" hover:text-[#FF9003]" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index">
|
||||
<div v-if="index < 3" class="flex my-2 justify-between">
|
||||
<div class="hot flex items-center">
|
||||
<n-icon size="16" class=" orange mr-2">
|
||||
@ -74,23 +73,11 @@
|
||||
<div class="text-pp-500">{{ item.hotValue }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="index > 2 && isBaidu" class="flex my-2 justify-between">
|
||||
<div v-if="index > 2" class="flex my-2 justify-between">
|
||||
<div>{{ item.keyword }}</div>
|
||||
<div class="text-pp-500">{{ item.hotValue }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<n-divider v-if="!isBaidu">
|
||||
<div class="flex items-center" @click="isBaidu = !isBaidu">
|
||||
更多<n-icon size="20" class="tiao mx-2">
|
||||
<more />
|
||||
</n-icon>
|
||||
</div>
|
||||
</n-divider>
|
||||
<n-divider v-else>
|
||||
<div class="flex items-center" @click="isBaidu = !isBaidu">
|
||||
收起
|
||||
</div>
|
||||
</n-divider>
|
||||
</div>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
@ -102,7 +89,6 @@
|
||||
import offwork from '@/assets/offwork.webp';
|
||||
import onwork from '@/assets/onwork.webp';
|
||||
import hot from "@/icon/hot.svg";
|
||||
import more from "@/icon/more.svg";
|
||||
import { formatTime } from '@/util/index.js';
|
||||
import ww from 'chinese-workday';
|
||||
import { onMounted, ref } from 'vue';
|
||||
@ -127,7 +113,7 @@ const jq = await $http.wea.getJq()
|
||||
const j = jq.data.solarTerms.slice(0, 2)
|
||||
const jNum = jqs.indexOf(j) + 1
|
||||
jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
|
||||
const isBaidu = ref(true);
|
||||
// const isBaidu = ref(true);
|
||||
const baidu = ref({})
|
||||
|
||||
// const holi = await $http.wea.getNextHoliday()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user