youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页优化

Browse Source
This commit is contained in:
heixinyouzi 2024-05-30 16:49:07 +08:00
parent 1a946c8cec
commit 674f67f5e5
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/home/navMenu.vue
View File

@ -1,15 +1,21 @@
<template>
<div class="box flex flex-wrap pl-[2%] mt-8">
<n-card title="" style="margin-bottom: 16px" v-for="(ii,iii) in navList">
<n-card title="" style="margin-bottom: 16px" v-for="(ii, iii) in navList">
<n-tabs default-value="0" justify-content="space-evenly" type="line">
<n-tab-pane class="flex flex-wrap" :name="index+''" :tab="item.menuClass" v-for="(item, index) in ii">
<div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]" @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
<n-tab-pane class="flex flex-wrap" :name="index + ''" :tab="item.menuClass" v-for="(item, index) in ii">
<div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]"
@click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
<div class="left mr-3">
<img width="40" height="40" class="rounded-full bg-pp-400" :src="it.menuIcon" alt="">
<img width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="">
</div>
<div class="right w-[224px]">
<div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
<div class="truncate">{{ it.menuDesc }}</div>
<n-popover trigger="hover">
<template #trigger>
<div class="truncate">{{ it.menuDesc }}</div>
</template>
<span>{{ it.menuDesc }}</span>
</n-popover>
</div>
</div>
</n-tab-pane>
@ -27,7 +33,6 @@ import { onMounted } from 'vue';
//mark data
const navList = ref([])
const active = ref(-1)
//mark method
function formatNav(list) {
let menu = []
@ -59,7 +64,6 @@ function link(url) {
onMounted(async () => {
const res = await $http.nav.listNav()
navList.value = formatNav(res.data)
console.log(navList.value);
})
</script>
@ -72,4 +76,9 @@ onMounted(async () => {
:deep(.n-collapse-item__header) {
background-color: red;
}
:deep(.n-tabs-tab__label) {
font-size: 20px;
font-weight: 600;
}
</style>

34
src/views/home/side.vue
View File

@ -8,10 +8,9 @@
<div class="date text-right mb-2">
{{ date }}
</div>
<!-- <div class="holi text-center">
距离 <span class="text-pp-300">{{ getHoli.data.name }}</span> 还有
{{ days }} 天
</div> -->
<div class="holi text-center">
还有 {{ holi.holiday.rest }} 天就是 <span class="text-pp-300 text-lg">{{ holi.holiday.name }}</span> 了
</div>
</div>
<div class="right h-[150px]">
<img height="150" :src="isw ? onwork : offwork" alt="">
@ -38,11 +37,8 @@
<div class="lianxi w-[80%] ml-[10%] mt-4 mb-4 bg-[#fafbfc] p-2">
<div class="t">
<n-divider title-placement="center">
<div class="flex items-center" @click="isBaidu = !isBaidu">
<div class="flex items-center font-bold" >
百度热搜
<n-icon size="20" class="tiao mx-2">
<more />
</n-icon>
</div>
</n-divider>
</div>
@ -59,11 +55,24 @@
</div>
<div class="text-pp-500">{{ item.hot }}</div>
</div>
<div v-if="index > 2 && isBaidu" class="flex my-2 justify-between">
<div>{{ item.title }}</div>
<div class="text-pp-500">{{ item.hot }}</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>
@ -82,7 +91,7 @@ import { ref } from 'vue';
//mark data
const jqs = ['立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']
const time = ref(formatTime(new Date(), 'hh:mm:ss'))
const date = ref(formatTime(new Date(), 'YYYY 年 MM 月 DD 日'))
const date1 = ref(formatTime(new Date(), 'YYYY-MM-DD'))
@ -92,10 +101,15 @@ const baidu = await $http.news.listBaiduNews()
const jqImg = ref('#')
const jq = await $http.wea.getJq()
const j = jq.data.solarTerms.slice(0, 2)
jqImg.value = 'https://www.hxyouzi.com/img/jieqi/2/' + j + '.jpg'
const jNum = jqs.indexOf(j) + 1
jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
const isBaidu = ref(false);
const holi = await $http.wea.getNextHoliday()
//mark lifeCycle
//mark watch