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-11-07 14:56:49 +08:00
parent 7aef427bd9
commit 9a1cf9dd53
7 changed files with 121 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main.js
View File

@ -3,6 +3,7 @@ import { createApp } from "vue";
import http from '@/api/index.js';
import icon from "@/icon/index.js";
import store from "@/stores/index.js";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import "qweather-icons/font/qweather-icons.css";
import "tailwindcss/tailwind.css";
@ -24,7 +25,7 @@ document.oncontextmenu = function () {
app.use(createPinia());
app.use(router).use(VueWechatTitle);
window.$store = store
window.$http = http
// window.$icon = icon
for (const key in icon) {

12
src/stores/index.js Normal file
View File

@ -0,0 +1,12 @@
const files = import.meta.glob('./*.js', {
eager: true,
})
const store = {}
// console.log("stores封装",files);
for (const i in files) {
const t = i.split("/")
const name = t[1].split(".")[0]
store[name] = files[i]
}
export default store

6
src/stores/size.js
View File

@ -6,6 +6,7 @@ export const usesizeStore = defineStore("size", {
navH: 0,
conH: 0,
footH:0,
searchH:0,
}),
actions: {
setMenuH(v) {
@ -17,7 +18,10 @@ export const usesizeStore = defineStore("size", {
setFootH(v){
this.footH = v;
},
setSearchH(v){
this.searchH = v;
},
setX(v){
this.x = v;
}

2
src/views/home/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div class="box xxx" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
<div class="box" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
<n-layout>
<n-layout has-sider>
<n-layout-content class="sm:w-[90vh] w-[70%]" :content-style="{ height: `calc(100vh - ${size.menuH}px)`,backgroundColor:'#f1f2f3' }">

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

@ -1,34 +1,44 @@
<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-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 hover:shadow-[0px_0px_5px_1px_#8A2BE2] 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 v-if="it.isHaveIco" width="40" height="40" class="rounded-full bg-[white]" :src="it.menuIcon" alt="" @error="it.isHaveIco=false">
<div v-else class="w-[40px] h-[40px] flex justify-center items-center rounded-full bg-[white] font-bold text-2xl text-orange-500">
{{ it.menuName.slice(0,1) }}
<div class="box flex flex-wrap px-8">
<n-card :style="{ height: boxH + 'px' }">
<n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
<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="">
</template>
<template #header>
<div class="" :style="{ color: i.color }">
{{ i.menuClass }}
</div>
</template>
<div class="flex flex-wrap items-center">
<div class="w-[200px] mr-20 mt-6" v-for="j 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>
<template #icon>
<img width="20" height="20" class="mr-2" :src="j.menuIcon" alt="">
</template>
{{ j.menuName }}
</n-button>
</div>
</template>
{{ j.menuDesc }}
</n-popover>
</div>
</div>
<div class="right w-[224px]">
<div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
<n-popover trigger="hover" width="trigger">
<template #trigger>
<div class="truncate">{{ it.menuDesc }}</div>
</template>
<span>{{ it.menuDesc }}</span>
</n-popover>
</div>
</div>
</n-tab-pane>
</n-tabs>
</n-collapse-item>
</n-collapse>
</n-scrollbar>
</n-card>
</div>
</template>
<script setup>
import { chunkArrayInGroups } from '@/util/index.js';
import { onMounted } from 'vue';
@ -37,6 +47,8 @@ import { onMounted } from 'vue';
//mark data
const navList = ref([])
const isHaveIco = ref(true)
const size = $store.size.usesizeStore()
const boxH = ref(0)
//mark method
function formatNav(list) {
@ -49,16 +61,19 @@ function formatNav(list) {
}
});
menu.forEach(i => {
const children = list.filter(it => it.menuClass == i)
result.push({
menuClass: i,
children: list.filter(it => it.menuClass == i),
exp: false
children,
color: children[0].color,
icon: "https://www.hxyouzi.com/img/svg/menu/" + children[0].icon,
exp: false,
})
})
// console.log(result);
console.log(result);
return chunkArrayInGroups(result, 4)
return result
// return chunkArrayInGroups(result, 4)
}
@ -70,6 +85,10 @@ function link(url) {
onMounted(async () => {
const res = await $http.nav.listNav()
navList.value = formatNav(res.data)
// 获取屏幕高度
const screenHeight = document.documentElement.clientHeight
boxH.value = screenHeight - size.searchH - size.menuH - 24 - 66
console.log(66666, navList.value);
})
</script>
@ -79,8 +98,11 @@ onMounted(async () => {
align-items: start;
}
:deep(.n-collapse-item__header) {
background-color: red;
:deep(.n-collapse-item__header-main) {
font-size: 20px;
align-items: center;
// justify-content: center;
}
:deep(.n-tabs-tab__label) {
@ -88,7 +110,34 @@ onMounted(async () => {
font-size: 20px;
font-weight: 600;
}
:deep(.n-tabs-tab--active) .n-tabs-tab__label{
:deep(.n-tabs-tab--active) .n-tabs-tab__label {
color: @purple;
}
// 旋转动画
@keyframes rotate {
from {
transform: rotate(0deg);
/* 起始角度 */
}
to {
transform: rotate(360deg);
/* 结束角度 */
}
}
.zhuan {
// transform: rotate(0deg) !important;
animation: rotate 2s infinite;
/* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
}
.btn {
transition: all .5s ease-in-out;
/* 指定过渡属性，持续时长，过渡曲线，何时开始 */
&:hover {
transform: translateX(10px);
};
}
</style>

8
src/views/home/search.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="py-10 px-40 md:px-4 search-box " round>
<div ref="searhBox" class="py-10 px-40 md:px-4 search-box " round>
<!-- <img class="h-[50px] mb-4 mx-auto" height="30" :src="img" alt=""> -->
<div class="relative">
<!-- <n-select size="large" round class="w-[13%] md:w-[40%]" @change="updateEngine" v-model:value="engine" :options="selectOptions" /> -->
@ -22,8 +22,10 @@
<script setup>
//mark import
import { usesizeStore } from "@/stores/size.js";
import { onMounted } from 'vue';
//mark data
const size = usesizeStore()
const searchValue = ref('')
const selectOptions = [
{ label: '必应', value: 'https://cn.bing.com/search?q=' },
@ -38,6 +40,7 @@ const mos = ref(null)
const inWidth = ref(0)
const inHeight = ref(0)
const item = ref(null)
const searhBox = ref(null)
//mark method
// https://cn.bing.com/search?q=111
function toSearch(i) {
@ -98,6 +101,9 @@ onMounted(() => {
inHeight.value = input.value.$el.offsetHeight
mos.value.style.width = inWidth.value + 'px'
mos.value.style.top = inHeight.value + 'px'
const h = searhBox.value.offsetHeight
size.setSearchH(h)
})
</script>

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

@ -47,21 +47,21 @@
</div>
<!-- <template v-if="isBaidu"> -->
<div class="list">
<div class=" hover:text-orange-500" @click="gotonews(item.url)" v-for="(item, index) in baidu.data" :key="index"
<div class=" hover:text-orange-500" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index"
v-show="index < 10">
<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">
<hot />
</n-icon>
<div>{{ item.title }}</div>
<div>{{ item.keyword }}</div>
</div>
<div class="text-pp-500">{{ item.hot }}</div>
<div class="text-pp-500">{{ item.hotValue }}</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>{{ item.keyword }}</div>
<div class="text-pp-500">{{ item.hotValue }}</div>
</div>
</div>
<n-divider v-if="!isBaidu">
@ -90,7 +90,7 @@ import hot from "@/icon/hot.svg";
import more from "@/icon/more.svg";
import { formatTime } from '@/util/index.js';
import ww from 'chinese-workday';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
//mark data
@ -113,7 +113,7 @@ 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(false);
const baidu = await $http.news.listBaiduNews()
const baidu = ref({})
// const holi = await $http.wea.getNextHoliday()
// console.log(555555555555,holi);
@ -122,7 +122,11 @@ const baidu = await $http.news.listBaiduNews()
//mark lifeCycle
onMounted(async() => {
baidu.value = (await $http.news.listBaiduNews()).data
console.log("新闻",baidu.value);
})
//mark watch
//mark computed
@ -139,6 +143,8 @@ const gotonews = (url) => {
window.open(url, "_blank")
}
</script>
<style scoped lang="less">