小修小改
This commit is contained in:
parent
d3086e38cf
commit
5b039cc87e
@ -6,7 +6,7 @@
|
||||
|
||||
//#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #5C169F
|
||||
|
||||
|
||||
@jb: linear-gradient(90deg,#BE8AEF,#409eff, #8A2BE2);
|
||||
:root:root {
|
||||
--van-primary-color: #8a2be2;
|
||||
}
|
||||
1
src/icon/collapse.svg
Normal file
1
src/icon/collapse.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1731026889534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15633" id="mx_n_1731026889534" width="32" height="32"><path d="M512 1024A512 512 0 1 0 512 0a512 512 0 0 0 0 1024zM512 214.235429a54.564571 54.564571 0 1 1 0 109.202285 54.564571 54.564571 0 0 1 0-109.202285zM512 397.165714a54.564571 54.564571 0 1 1 0 109.202286 54.564571 54.564571 0 0 1 0-109.202286zM210.505143 483.474286a41.106286 41.106286 0 0 1 58.368-0.438857L512 722.870857l243.053714-239.689143a41.252571 41.252571 0 1 1 58.075429 58.806857l-272.091429 268.361143a41.252571 41.252571 0 0 1-58.002285 0l-272.091429-268.434285a41.325714 41.325714 0 0 1-0.438857-58.368z" fill="#B1C3E7" p-id="15634"></path></svg>
|
||||
|
After Width: | Height: | Size: 734 B |
@ -5,19 +5,24 @@
|
||||
<n-collapse default-expanded-names="0" accordion>
|
||||
<n-collapse-item v-for="(i, idx) in navList" :name="idx + ''" :key="i.menuClass">
|
||||
<template #arrow="{ collapsed }">
|
||||
<img :class="{ zhuan: !collapsed }" width="20" height="20" class="mr-2" :src="i.icon" alt="">
|
||||
<img :class="{ zhuan: !collapsed }" width="20" height="20" :src="i.icon" alt="">
|
||||
</template>
|
||||
<template #header>
|
||||
<div class="" :style="{ color: i.color }">
|
||||
<div class="ml-4" :style="{ color: i.color }">
|
||||
{{ i.menuClass }}
|
||||
</div>
|
||||
</template>
|
||||
<template #header-extra="{collapsed}">
|
||||
<n-icon size="26" :color="i.color">
|
||||
<IosArrowDropright :class="{extra_collapsed:!collapsed}" class="extra_collapse"></IosArrowDropright>
|
||||
</n-icon>
|
||||
</template>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="w-[200px] mr-20 mt-6" v-for="(j,ii) in i.children">
|
||||
<div class="w-[200px] mr-20 my-4" v-for="(j,ii) in i.children">
|
||||
<n-popover trigger="hover" animated :delay="1000" width="trigger">
|
||||
<template #trigger>
|
||||
<div>
|
||||
<n-button @click="link(j.menuLink)" class="btn w-full hover:bg-pp-500 hover:text-[white]" type="primary" ghost>
|
||||
<n-button @click="link(j.menuLink)" class="btn w-full hover:text-[white]" type="primary" ghost>
|
||||
<template #icon>
|
||||
<img v-if="!j.exp" width="20" height="20" class="mr-2" :src="j.menuIcon" alt="" @error="navList[idx].children[ii].exp=true">
|
||||
<div :style="{backgroundColor:j.color}" class="w-[20px] h-[20px] text-[12px] text-[white] rounded-full flex justify-center items-center" v-else>{{ j.menuName[0] }}</div>
|
||||
@ -40,9 +45,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IosArrowDropright } from "@vicons/ionicons4";
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
|
||||
//mark import
|
||||
|
||||
//mark data
|
||||
@ -106,15 +111,10 @@ onMounted(async () => {
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.n-tabs-tab__label) {
|
||||
color: #31101b;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
:deep(.n-collapse-item-arrow) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.n-tabs-tab--active) .n-tabs-tab__label {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
// 旋转动画
|
||||
@keyframes rotate {
|
||||
@ -139,6 +139,13 @@ onMounted(async () => {
|
||||
/* 指定过渡属性，持续时长，过渡曲线，何时开始 */
|
||||
&:hover {
|
||||
transform: translateX(10px);
|
||||
background: @jb;
|
||||
};
|
||||
}
|
||||
.extra_collapse {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.extra_collapsed {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
@ -12,7 +12,8 @@
|
||||
今天就是 <span class="text-pp-300 text-lg">{{ holi.data.hname }}</span> 啦
|
||||
</div>
|
||||
<div class="holi text-center" v-else>
|
||||
还有 <span class="text-[#409eff] text-lg">{{ holi.subdate }}</span> 天就是 <span class="text-pp-300 text-lg">{{ holi.data.hname }}</span> 了
|
||||
还有 <span class="text-[#409eff] text-lg">{{ holi.subdate }}</span> 天就是 <span class="text-pp-300 text-lg">{{
|
||||
holi.data.hname }}</span> 了
|
||||
</div>
|
||||
</div>
|
||||
<div class="right h-[150px]">
|
||||
@ -25,11 +26,25 @@
|
||||
<div class="lunarDate p-1 text-[22px] text-center">
|
||||
{{ jq.data.yearTips }}年 {{ jq.data.lunarCalendar }}
|
||||
</div>
|
||||
<div class="suit p-1 pl-6">
|
||||
宜： <span class="text-pp-300">{{ jq.data.suit }}</span>
|
||||
<div class=" p-1 pl-6">
|
||||
<n-popover trigger="hover" animated :delay="1000" width="trigger">
|
||||
<template #trigger>
|
||||
<div class="suit">
|
||||
宜： <span class="text-pp-300">{{ jq.data.suit }}</span>
|
||||
</div>
|
||||
</template>
|
||||
{{ jq.data.suit }}
|
||||
</n-popover>
|
||||
</div>
|
||||
<div class="suit p-1 pl-6">
|
||||
忌： <span class="text-pp-300">{{ jq.data.avoid }}</span>
|
||||
<n-popover trigger="hover" animated :delay="1000" width="trigger">
|
||||
<template #trigger>
|
||||
<div class="suit">
|
||||
忌： <span class="text-pp-300">{{ jq.data.avoid }}</span>
|
||||
</div>
|
||||
</template>
|
||||
{{ jq.data.avoid }}
|
||||
</n-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
@ -40,7 +55,7 @@
|
||||
<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 font-bold text-xl" >
|
||||
<div class="flex items-center font-bold text-xl">
|
||||
百度热搜
|
||||
</div>
|
||||
</n-divider>
|
||||
@ -73,7 +88,7 @@
|
||||
</n-divider>
|
||||
<n-divider v-else>
|
||||
<div class="flex items-center" @click="isBaidu = !isBaidu">
|
||||
收起
|
||||
收起
|
||||
</div>
|
||||
</n-divider>
|
||||
</div>
|
||||
@ -94,7 +109,7 @@ import { onMounted, ref } from 'vue';
|
||||
|
||||
|
||||
//mark data
|
||||
const jqs = ['立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']
|
||||
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'))
|
||||
@ -102,7 +117,7 @@ const isw = ref(true)
|
||||
isw.value = ww.isWorkday(date1)
|
||||
|
||||
const holi = await $http.wea.getTodayHoliday()
|
||||
console.log("*************",holi);
|
||||
console.log("*************", holi);
|
||||
|
||||
|
||||
|
||||
@ -122,10 +137,10 @@ const baidu = ref({})
|
||||
|
||||
|
||||
//mark lifeCycle
|
||||
onMounted(async() => {
|
||||
onMounted(async () => {
|
||||
baidu.value = (await $http.news.listBaiduNews()).data
|
||||
console.log("新闻",baidu.value);
|
||||
|
||||
console.log("新闻", baidu.value);
|
||||
|
||||
})
|
||||
//mark watch
|
||||
|
||||
|
||||
@ -21,8 +21,6 @@
|
||||
<n-card class="w-full h-full mt-4" :title="title" size="medium">
|
||||
<component class="w-full" :is="comp"></component>
|
||||
</n-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user