diff --git a/src/assets/images/wechat.jpg b/src/assets/images/wechat.png
similarity index 100%
rename from src/assets/images/wechat.jpg
rename to src/assets/images/wechat.png
diff --git a/src/assets/images/头像.jpg b/src/assets/images/头像.jpg
new file mode 100644
index 0000000..6c443e8
Binary files /dev/null and b/src/assets/images/头像.jpg differ
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 200703e..6e518ca 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -12,45 +12,28 @@ function createIconComponent(iconType: string) {
},
});
}
-const TitleOutLined = createIconComponent('icon-xiongmaochizhuye');
-const BlogOutLined = createIconComponent('icon-blog');
-const SystemOutLined = createIconComponent('icon-system');
-const PhotoOutLined = createIconComponent('icon-photo');
-const FileOutLined = createIconComponent('icon-file');
-const DiaryOutLined = createIconComponent('icon-diary');
-const CommentOutLined = createIconComponent('icon-comment');
-const TypeOutLined = createIconComponent('icon-type');
-const MusicLined = createIconComponent('icon-musicfill');
-const EmailLined = createIconComponent('icon-youxiang');
-const GitHubLined = createIconComponent('icon-github');
-const QQLined = createIconComponent('icon-QQ');
-const WechatLined = createIconComponent('icon-wechat-fill');
-const GravatarLined = createIconComponent('icon-brand-gravatar');
-const RiLiLined = createIconComponent('icon-rili');
-const YueDuLined = createIconComponent('icon-yuedu');
-const YanJingLined = createIconComponent('icon-yanjing');
-const XieZiLined = createIconComponent('icon-xiezi');
-const CravatarLined = createIconComponent('icon-cravatar');
+const iconComponents = {
+ TitleOutLined: createIconComponent('icon-xiongmaochizhuye'),
+ BlogOutLined: createIconComponent('icon-blog'),
+ SystemOutLined: createIconComponent('icon-system'),
+ PhotoOutLined: createIconComponent('icon-photo'),
+ FileOutLined: createIconComponent('icon-file'),
+ DiaryOutLined: createIconComponent('icon-diary'),
+ CommentOutLined: createIconComponent('icon-comment'),
+ TypeOutLined: createIconComponent('icon-type'),
+ MusicLined: createIconComponent('icon-musicfill'),
+ EmailLined: createIconComponent('icon-youxiang'),
+ GitHubLined: createIconComponent('icon-github'),
+ QQLined: createIconComponent('icon-QQ'),
+ WechatLined: createIconComponent('icon-wechat-fill'),
+ GravatarLined: createIconComponent('icon-brand-gravatar'),
+ RiLiLined: createIconComponent('icon-rili'),
+ YueDuLined: createIconComponent('icon-yuedu'),
+ YanJingLined: createIconComponent('icon-yanjing'),
+ XieZiLined: createIconComponent('icon-xiezi'),
+ CravatarLined: createIconComponent('icon-cravatar'),
+}
+
-export {
- TitleOutLined,
- BlogOutLined,
- SystemOutLined,
- PhotoOutLined,
- FileOutLined,
- DiaryOutLined,
- CommentOutLined,
- TypeOutLined,
- MusicLined,
- EmailLined,
- GitHubLined,
- QQLined,
- WechatLined,
- GravatarLined,
- RiLiLined,
- YueDuLined,
- YanJingLined,
- XieZiLined,
- CravatarLined
-}
\ No newline at end of file
+export default iconComponents
\ No newline at end of file
diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index fff60d7..bff6fbe 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -2,8 +2,7 @@
<Simplebar @scroll="handleScroll">
<!-- 头部导航菜单 -->
<div class="headerMenu" v-if="show_menu">
- <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;"
- @click="menuClick" />
+ <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;" />
<a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
</div>
<div class="author" v-if="show_author"></div>
@@ -30,25 +29,14 @@
<div class="leftBar">
<a-card hoverable>
<template #cover>
- <img alt="example" :src="img" />
+ <img alt="example" src="/src/assets/images/头像.jpg" />
</template>
<h1>sunfree</h1>
<div class="cardText"></div>
<div class="button-group">
- <a-button shape="circle" size="large" @click="cravatarClick" >
- <CravatarLined style="color: red;"/>
- </a-button>
- <a-button shape="circle" size="large" @click="qqClick">
- <QQLined />
- </a-button>
- <a-button shape="circle" size="large" @click="wechatClick">
- <WechatLined />
- </a-button>
- <a-button shape="circle" size="large" @click="musicClick">
- <MusicLined />
- </a-button>
- <a-button shape="circle" size="large" @click="githubClick">
- <GitHubLined />
+ <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
+ @click="handleClick(button.url)">
+ <component :is="button.icon" />
</a-button>
</div>
<div class="fold-panel">
@@ -56,32 +44,18 @@
<template #expandIcon="{ isActive }">
<caret-right-outlined :rotate="isActive ? 90 : 0" />
</template>
- <a-collapse-panel key="1" header="内容1" :style="customStyle">
- <p>{{ text }}</p>
- </a-collapse-panel>
- <a-collapse-panel key="2" header="内容2" :style="customStyle">
- <p>{{ text }}</p>
- </a-collapse-panel>
- <a-collapse-panel key="3" header="内容3" :style="customStyle">
- <p>{{ text }}</p>
+ <a-collapse-panel v-for="panel in panels" :key=panel.num :header=panel.header
+ :style="customStyle">
+ <p>{{ panel.text }}</p>
</a-collapse-panel>
</a-collapse>
</div>
</a-card>
<a-card hoverable title="常用链接">
<div class="button-group">
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
- <a-button type="dashed">Link</a-button>
+ <a-button type="dashed" v-for="linkbutton in linkbuttons" :key="linkbutton.id">{{
+ linkbutton.linktext
+ }}</a-button>
</div>
</a-card>
</div>
@@ -90,14 +64,8 @@
<a-card hoverable>
<div class="statistic">
<a-row>
- <a-col :span="8">
- <a-statistic title="DAYS" :value="112893" />
- </a-col>
- <a-col :span="8">
- <a-statistic title="DIARYS" :value="112893" />
- </a-col>
- <a-col :span="8">
- <a-statistic title="BLOGS" :value="112893" />
+ <a-col :span="8" v-for="statistic in statistics" :key="statistic.id">
+ <a-statistic :title=statistic.title :value=statistic.counts />
</a-col>
</a-row>
</div>
@@ -119,7 +87,7 @@
<div v-for="article in 3">
<a-image :preview="false" :width="300"
src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
-
+
<div class="article-text">
<span>2021-02-01</span>
<span>操作系统</span>
@@ -138,9 +106,8 @@
</template>
<script lang="ts" setup>
import { h, reactive, ref, nextTick } from 'vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
-import { MusicLined, EmailLined, QQLined, WechatLined, GravatarLined, GitHubLined,CravatarLined } from "@/assets"
import Typed from 'typed.js';
import { onMounted, watch } from 'vue';
import type { CSSProperties } from 'vue';
@@ -148,201 +115,15 @@ import { CaretRightOutlined } from '@ant-design/icons-vue';
import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';
import { createEcharts } from "@/hooks/intex"
-import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
-import { RiLiLined, YueDuLined, YanJingLined, XieZiLined } from '@/assets';
import { useRouter, useRoute } from 'vue-router';
-const random = ref();
+import iconComponents from "@/assets/index"
const router = useRouter()
const route = useRoute()
-const heat = ref(null);
-const activeKey = ref(['']);
-const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
-const customStyle =
- 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
-const scrollbar = ref<Element | null>(null);
-onMounted(() => {
- // 定义home页的博客标题名
- nextTick(() => {
- const authorElement = document.querySelector('.author');
- if (authorElement) {
- new Typed('.author', {
- strings: ['SunFree.'],
- typeSpeed: 200,
- backSpeed: 150,
- loop: true,
- loopCount: Infinity,
- showCursor: false
- });
- };
- const cardTextElement = document.querySelector('.cardText');
- if (cardTextElement) {
- // 定义个人座右铭
- new Typed('.cardText', {
- strings: ['做三流测试，品瀚霖人生！'],
- typeSpeed: 200,
- backSpeed: 150,
- loop: true, // 开启循环
- loopCount: Infinity, // 无限循环
- showCursor: false // 取消光标
- });
- };
- const aplayerContainer = document.getElementById('aplayer');
- if (aplayerContainer) {
- new APlayer({
- container: aplayerContainer,
- mini: false,
- autoplay: false,
- theme: '#FADFA3',
- loop: 'all',
- order: 'random',
- preload: 'auto',
- volume: 0.7,
- mutex: true,
- listFolded: true,
- listMaxHeight: 90,
- lrcType: 3,
- audio: [
- {
- name: 'name1',
- artist: 'artist1',
- url: 'url1.mp3',
- cover: 'cover1.jpg',
- lrc: 'lrc1.lrc',
- theme: '#ebd0c2'
- },
- {
- name: 'name2',
- artist: 'artist2',
- url: 'url2.mp3',
- cover: 'cover2.jpg',
- lrc: 'lrc2.lrc',
- theme: '#46718b'
- }
- ]
- });
- }
- });
-
-
-
- function generateDates(numDays: number) {
- const dates = [];
- const currentDate = new Date();
- for (let i = 0; i < numDays; i++) {
- const date = new Date(currentDate);
- date.setDate(currentDate.getDate() - i);
- dates.push(
- { date: date.toISOString().split('T')[0], blogCount: 0 }
- ); // 包含日期和评论数
- }
- return dates;
- }
-
- // 初始化60天的数据
- const data = generateDates(60);
- console.log(`output->`, data)
- data[3].blogCount = 5;
- data[15].blogCount = 10;
- data[25].blogCount = 3;
-
- // 重新排列数据
- const newData = [];
- for (let i = 0; i < 60; i += 15) {
- // 取出每个15天的数据，并反转顺序
- const chunk = data.slice(i, i + 15).reverse();
- newData.push(...chunk);
- }
-
- const formattedData = newData.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]);
- const heatMapData = {
- tooltip: {
- position: 'top',
- formatter: function (params: any) {
- const item = newData[params.dataIndex];
- if (item.blogCount > 0) {
- return `${item.date}<br/>COMMENTS: ${item.blogCount}`;
- } else {
- return `${item.date}`;
- }
- }
- },
- grid: {
- left: '0', // 左边距
- right: '0', // 右边距
- top: '0', // 上边距
- bottom: '0',
- },
- xAxis: {
- type: 'category',
- data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
- splitArea: {
- show: true
- },
- show: false
- },
- yAxis: {
- type: 'category',
- data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
- splitArea: {
- show: false
- },
- show: false
- },
- visualMap: {
- min: 0,
- max: 10,
- calculable: true,
- orient: 'horizontal',
- left: 'center',
- bottom: '15%',
- show: false,
- inRange: {
- color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
- }
- },
- series: [{
- type: 'heatmap',
- data: formattedData,
- itemStyle: {
- borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
- borderWidth: 0.5, // 设置边框宽度
- },
- label: {
- show: false,
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- borderColor: '#fff', // 鼠标悬停时的边框颜色
- borderWidth: 2 // 鼠标悬停时的边框宽度
- }
- }
- }]
- };
- createEcharts(heat, heatMapData);
- scrollbar.value = document.querySelector('.simplebar-content-wrapper');
- // console.log(current.value)
- // const storedShowMenu = localStorage.getItem('show_menu');
- // const storedShowCarousel = localStorage.getItem('show_carousel');
- // const storedScrollPosition = localStorage.getItem('scrollPosition');
- // const storedMainCssMarginTop = localStorage.getItem('mainCss_marginTop');
- // if (storedShowMenu !== null) {
- // show_menu.value = storedShowMenu === 'true';
- // }
- // if (storedShowCarousel !== null) {
- // show_carousel.value = storedShowCarousel === 'true';
- // }
- // if (storedScrollPosition !== null && scrollbar.value) {
- // scrollbar.value.scrollTop = parseInt(storedScrollPosition, 10);
- // }
- // if (storedMainCssMarginTop !== null) {
- // mainCss.marginTop = storedMainCssMarginTop;
- // }
-})
-// 导航菜单
+/**
+* 导航菜单
+*/
const show_menu = ref(false);
const show_carousel = ref(true);
const show_author = ref(true)
@@ -350,28 +131,26 @@ const show_anchornDown = ref(true)
const mainCss = reactive({
marginTop: "0px"
})
-
+const current = ref<string[]>(['home']);
const items = ref<MenuProps['items']>([
{
key: 'home',
icon: () => h(HomeOutlined),
- label: '首页',
+ label: h('a', { href: '/' }, '首页'),
title: '首页',
- url: '/'
+
},
{
key: 'blog',
icon: () => h(HighlightOutlined),
- label: '博客',
+ label: h('a', { href: "/blog" }, '博客'),
title: '博客',
- url: "/blog"
},
{
key: 'diary',
icon: () => h(ProfileOutlined),
- label: '日记',
+ label: h('a', { href: "/diary" }, '日记'),
title: '日记',
- url: '/diary'
},
{
key: 'album',
@@ -382,7 +161,7 @@ const items = ref<MenuProps['items']>([
{
label: '相册1',
key: 'album1',
- url: "album1"
+ // url: "album1"
},
{
label: '相册2',
@@ -401,16 +180,49 @@ const items = ref<MenuProps['items']>([
{
key: 'chart',
icon: () => h(UsergroupDeleteOutlined),
- label: '收支图',
+ label: h('a', { href: "/chart" }, '收支图'),
title: '收支图',
},
{
key: 'aboutme',
icon: () => h(UsergroupDeleteOutlined),
- label: '关于sunfree',
+ label: h('a', { href: "/aboutme" }, '关于sunfree'),
title: '关于sunfree',
},
]);
+const updateCarouselVisibility = (routeName) => {
+ handleScrollEnabled.value = false;
+ if (scrollbar.value) {
+ scrollbar.value.scrollTop = 0;
+ }
+ if (routeName === 'home') {
+ handleScrollEnabled.value = true;
+ show_carousel.value = true;
+ show_menu.value = false
+ } else {
+ show_menu.value = true;
+ show_author.value = false;
+ show_carousel.value = false;
+ show_anchornDown.value = false;
+ mainCss.marginTop = '48px';
+ }
+};
+router.beforeEach((to, from, next) => {
+ updateCarouselVisibility(to.name);
+ next();
+});
+// 查询功能
+const articleTitle = ref<string>('');
+const onSearch = (searchValue: string) => {
+ console.log('use value', searchValue);
+ console.log('or use this.value', articleTitle.value);
+};
+
+
+/**
+ * 滚动条操作
+ */
+const scrollbar = ref<Element | null>(null);
const handleScrollEnabled = ref(true);
// 定义滚动条滚到一半显示导航菜单
const handleScroll = () => {
@@ -421,77 +233,259 @@ const handleScroll = () => {
show_menu.value = scrollOffset > halfViewportHeight;
}
};
-const current = ref<string[]>(['home']);
-
-const menuClick = ({ item }: { item: any }) => {
- router.push(item.url);
-}
-
-
-
-// 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离
+// 点击按钮，实现滚动到视窗高度距离
const downScroll = () => {
if (scrollbar.value) {
const scrollTop = scrollbar.value.scrollTop;
const viewportHeight = scrollbar.value.clientHeight;
const scrollDistance = viewportHeight - scrollTop - 48;
-
setTimeout(() => {
scrollbar.value!.scrollBy({ top: scrollDistance, behavior: 'smooth' });
}, 300);
}
};
-// 定义文章
-// const articles=reactive({
-// img:"",
-
-// })
-
+/**
+ * 左侧栏
+ */
+// 折叠面板
+const activeKey = ref(['']);
+const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+const panels = reactive([
+ {
+ num: "1",
+ header: "内容1",
+ text: "内容1"
+ },
+ {
+ num: "2",
+ header: "内容2",
+ text: "内容2"
+ },
+ {
+ num: "3",
+ header: "内容3",
+ text: "内容3"
+ }
+]
+)
+// 社交按钮
+const buttons = ref([
+ { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
+ { icon: iconComponents.QQLined, url: '/qqcode' },
+ { icon: iconComponents.WechatLined, url: '/wechatcode' },
+ { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
+ { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
+]);
+const handleClick = (url: string) => {
+ window.open(url)
+}
+// 链接按钮
+const linkbuttons = reactive([
+ {
+ id: "1",
+ linktext: "测试"
+ },
+ {
+ id: "2",
+ linktext: "开发"
+ },
+ {
+ id: "3",
+ linktext: "运营"
+ },
+ {
+ id: "4",
+ linktext: "实施"
+ }
+])
+/**
+ * 右侧栏
+ */
+// 统计
+const statistics = reactive([
+ {
+ id: "1",
+ title: "DAYS",
+ counts: "111"
+ },
+ {
+ id: "2",
+ title: "DIARYS",
+ counts: "111"
+ },
+ {
+ id: "3",
+ title: "BLOGS",
+ counts: "111"
+ },
+])
+// 日历热力图
+const heat = ref(null);
+const newData = <any>[];
+// 初始化60天的数据
+const data = generateDates(60);
+console.log(data)
+// 重新排列数据
+for (let i = 0; i < 60; i += 15) {
+ // 取出每个15天的数据，并反转顺序
+ const chunk = data.slice(i, i + 15).reverse();
+ newData.push(...chunk);
+}
-const value = ref<string>('');
-const onSearch = (searchValue: string) => {
- console.log('use value', searchValue);
- console.log('or use this.value', value.value);
+function generateDates(numDays: number) {
+ const dates = [];
+ const currentDate = new Date();
+ for (let i = 0; i < numDays; i++) {
+ const date = new Date(currentDate);
+ date.setDate(currentDate.getDate() - i);
+ dates.push(
+ { date: date.toISOString().split('T')[0], writCount: 0 }
+ ); // 包含日期和评论数
+ }
+ return dates;
+}
+const writList=[5,4,3,2,1,0]
+writList.forEach((item,index)=>{
+ data[index].writCount = item;
+})
+const formattedData = newData.map((value, index) => [index % 15, Math.floor(index / 15), value.writCount]);
+const heatMapData = {
+ tooltip: {
+ position: 'top',
+ formatter: function (params: any) {
+ const item = newData[params.dataIndex];
+ if (item.writCount > 0) {
+ return `${item.date}<br/>COMMENTS: ${item.writCount}`;
+ } else {
+ return `${item.date}`;
+ }
+ }
+ },
+ grid: {
+ left: '0', // 左边距
+ right: '0', // 右边距
+ top: '0', // 上边距
+ bottom: '0',
+ },
+ xAxis: {
+ type: 'category',
+ data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
+ splitArea: {
+ show: true
+ },
+ show: false
+ },
+ yAxis: {
+ type: 'category',
+ data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
+ splitArea: {
+ show: false
+ },
+ show: false
+ },
+ visualMap: {
+ min: 0,
+ max: 10,
+ calculable: true,
+ orient: 'horizontal',
+ left: 'center',
+ bottom: '15%',
+ show: false,
+ inRange: {
+ color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
+ }
+ },
+ series: [{
+ type: 'heatmap',
+ data: formattedData,
+ itemStyle: {
+ borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
+ borderWidth: 0.5, // 设置边框宽度
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ borderColor: '#fff', // 鼠标悬停时的边框颜色
+ borderWidth: 2 // 鼠标悬停时的边框宽度
+ }
+ }
+ }]
};
+// 音乐组件
+const random = ref();
-const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
-const cravatarClick = () => {
- window.open("https://cravatar.cn/")
-}
-const qqClick=()=>{
- window.open("/qqcode",'_blank')
-}
-const wechatClick=()=>{
- window.open("/wechatcode",'_blank')
-}
-const musicClick=()=>{
- window.open("https://music.163.com/#/playlist?id=160266689")
-}
-const githubClick=()=>{
- window.open("https://gitee.com/c_panda")
-}
-const updateCarouselVisibility = (routeName) => {
- handleScrollEnabled.value = false;
- if (scrollbar.value) {
- scrollbar.value.scrollTop = 0;
- }
- if (routeName === 'home') {
- handleScrollEnabled.value = true;
- show_carousel.value = true;
- show_menu.value = false
- } else {
- show_menu.value = true;
- show_author.value = false;
- show_carousel.value = false;
- show_anchornDown.value = false;
- mainCss.marginTop = '48px';
- }
-};
-// 监控路由变化
+onMounted(() => {
+ nextTick(() => {
+ const authorElement = document.querySelector('.author');
+ if (authorElement) {
+ new Typed('.author', {
+ strings: ['SunFree.'],
+ typeSpeed: 200,
+ backSpeed: 150,
+ loop: true,
+ loopCount: Infinity,
+ showCursor: false
+ });
+ };
+ const cardTextElement = document.querySelector('.cardText');
+ if (cardTextElement) {
+ // 定义个人座右铭
+ new Typed('.cardText', {
+ strings: ['做三流测试，品瀚霖人生！'],
+ typeSpeed: 200,
+ backSpeed: 150,
+ loop: true, // 开启循环
+ loopCount: Infinity, // 无限循环
+ showCursor: false // 取消光标
+ });
+ };
+ const aplayerContainer = document.getElementById('aplayer');
+ if (aplayerContainer) {
+ new APlayer({
+ container: aplayerContainer,
+ mini: false,
+ autoplay: false,
+ theme: '#FADFA3',
+ loop: 'all',
+ order: 'random',
+ preload: 'auto',
+ volume: 0.7,
+ mutex: true,
+ listFolded: true,
+ listMaxHeight: 90,
+ lrcType: 3,
+ audio: [
+ {
+ name: 'name1',
+ artist: 'artist1',
+ url: 'url1.mp3',
+ cover: 'cover1.jpg',
+ lrc: 'lrc1.lrc',
+ theme: '#ebd0c2'
+ },
+ {
+ name: 'name2',
+ artist: 'artist2',
+ url: 'url2.mp3',
+ cover: 'cover2.jpg',
+ lrc: 'lrc2.lrc',
+ theme: '#46718b'
+ }
+ ]
+ });
+ }
+ });
+ createEcharts(heat, heatMapData);
+ scrollbar.value = document.querySelector('.simplebar-content-wrapper');
+})
watch(
() => route.name,
(newRouteName) => {
@@ -509,12 +503,6 @@ watch(
},
{ immediate: true }
);
-
-
-router.beforeEach((to, from, next) => {
- updateCarouselVisibility(to.name);
- next();
-});
</script>
<style scoped>
.headerMenu {
@@ -641,7 +629,8 @@ router.beforeEach((to, from, next) => {
position: relative;
margin-bottom: 24px;
}
-.rightBar>:nth-child(4) div .article-text{
+
+.rightBar>:nth-child(4) div .article-text {
display: flex;
flex-direction: column;
position: absolute;
@@ -649,6 +638,7 @@ router.beforeEach((to, from, next) => {
left: 10%;
color: rgb(187, 185, 187);
}
+
#aplayer {
margin: 0;
}
diff --git a/src/components/blogs/QQCode.vue b/src/components/blogs/QQCode.vue
index a799b41..2840e31 100644
--- a/src/components/blogs/QQCode.vue
+++ b/src/components/blogs/QQCode.vue
@@ -1,9 +1,52 @@
<template>
- <a-image :preview="false" :width="500" :height="500" src="/src/assets/images/qq.png"/>
+ <div class="qq-poster">
+ <div>
+ <h1>QQ二维码</h1>
+ <p>欢迎扫描二维码，与我共同探讨测试开发的学习和实践。</p>
+ <div class="qr-code-container">
+ <img src="/src/assets/images/qq.png" alt="QR Code" class="qr-code" />
+ </div>
+ <p>扫码添加了解更多信息。</p>
+ </div>
+ </div>
</template>
-<script setup lang='ts'>
+<script lang="ts" setup >
</script>
-<style></style>
\ No newline at end of file
+<style scoped>
+.qq-poster {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+h1 {
+ font-size: 24px;
+ margin-bottom: 10px;
+}
+
+p {
+ font-size: 16px;
+ margin: 10px 0;
+}
+
+.qr-code-container {
+ margin: 20px 0;
+ padding: 10px;
+ border: 2px solid #ccc;
+ display: inline-block;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+ width: 200px;
+ height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/WechatCode.vue b/src/components/blogs/WechatCode.vue
index e84276a..6881eb9 100644
--- a/src/components/blogs/WechatCode.vue
+++ b/src/components/blogs/WechatCode.vue
@@ -1,9 +1,52 @@
<template>
- <a-qrcode error-level="H" value="https://www.antdv.com" icon="https://www.antdv.com/assets/logo.1ef800a8.svg" />
+ <div class="qq-poster">
+ <div>
+ <h1>微信二维码</h1>
+ <p>欢迎扫描二维码，与我共同探讨测试开发的学习和实践。</p>
+ <div class="qr-code-container">
+ <img src="/src/assets/images/wechat.png" alt="QR Code" class="qr-code" />
+ </div>
+ <p>扫码添加了解更多信息。</p>
+ </div>
+ </div>
</template>
-<script setup lang='ts'>
+<script lang="ts" setup>
</script>
-<style></style>
\ No newline at end of file
+<style scoped>
+.qq-poster {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+h1 {
+ font-size: 24px;
+ margin-bottom: 10px;
+}
+
+p {
+ font-size: 16px;
+ margin: 10px 0;
+}
+
+.qr-code-container {
+ margin: 20px 0;
+ padding: 10px;
+ border: 2px solid #ccc;
+ display: inline-block;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+ width: 200px;
+ height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 8e39131..e74a88e 100644
--- a/src/router/blog.ts
+++ b/src/router/blog.ts
@@ -7,6 +7,11 @@ const blogRoute:Array<RouteRecordRaw>=[
name: "home",
component: () => import("@/components/blogs/HomePage.vue"),
children:[
+ {
+ path:"/home",
+ name:"home",
+ component:()=>import("@/views/blog/HomePageView.vue")
+ },
{
path:"/blog",
name:"blog",
@@ -18,27 +23,31 @@ const blogRoute:Array<RouteRecordRaw>=[
component:()=>import("@/views/blog/DiaryContentView.vue")
},
{
- path:"/home",
- name:"home",
- component:()=>import("@/views/blog/HomePageView.vue")
+ path:"/chart",
+ name:"chart",
+ component:()=>import("@/views/blog/AmountChartView.vue")
+ },
+ {
+ path:"/aboutme",
+ name:"aboutme",
+ component:()=>import("@/views/blog/AboutMe.vue"),
},
-
]
},
{
path:"/ceshi",
name:"ceshi",
- component:()=>import("@/components/blogs/ceshi.vue")
+ component:()=>import("@/components/blogs/ceshi.vue"),
},
{
path:"/qqcode",
name:"qqcode",
- component:()=>import("@/components/blogs/QQCode.vue")
+ component:()=>import("@/components/blogs/QqCode.vue"),
},
{
path:"/wechatcode",
name:"wechatcode",
- component:()=>import("@/components/blogs/WechatCode.vue")
+ component:()=>import("@/components/blogs/WeChatCode.vue"),
},
]
export default blogRoute
diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts
index ad1afd9..1ead44b 100644
--- a/src/types/custom.d.ts
+++ b/src/types/custom.d.ts
@@ -1,4 +1,4 @@
-declare module 'ant-design-vue';
-declare module 'echarts';
-declare module 'ant-design-vue/es/menu'
-declare module 'animejs/lib/anime.es.js'
+// declare module 'ant-design-vue';
+// declare module 'echarts';
+// declare module 'ant-design-vue/es/menu'
+// declare module 'animejs/lib/anime.es.js'
diff --git a/src/views/admin/DashBoardView.vue b/src/views/admin/DashBoardView.vue
index 50323f9..07004c4 100644
--- a/src/views/admin/DashBoardView.vue
+++ b/src/views/admin/DashBoardView.vue
@@ -89,7 +89,6 @@
</template>
<script setup lang='ts'>
- import { BlogOutLined, PhotoOutLined, FileOutLined, DiaryOutLined, CommentOutLined } from "@/assets";
import { reactive, ref, onMounted } from 'vue';
import type { Ref } from 'vue';
import { createEcharts } from '@/hooks/intex'
diff --git a/src/views/blog/AboutMe.vue b/src/views/blog/AboutMe.vue
new file mode 100644
index 0000000..d19752e
--- /dev/null
+++ b/src/views/blog/AboutMe.vue
@@ -0,0 +1,11 @@
+<template>
+ <div>这是关于我的内容</div>
+</template>
+
+<script setup lang='ts'>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue
index 434cd27..0e8713f 100644
--- a/src/views/blog/AmountChartView.vue
+++ b/src/views/blog/AmountChartView.vue
@@ -1,11 +1,82 @@
<template>
- <div>测试</div>
-</template>
+ <div>
+ <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
+ <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
+
+ </div>
+</template>
+
<script setup lang='ts'>
-
+import { createEcharts } from '@/hooks/intex'
+import { onMounted, ref } from 'vue';
+const staticLine = ref(null)
+
+onMounted(() => {
+ const staticLineData = {
+ title: {
+ text: 'Stacked Line'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Email',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Union Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Direct',
+ type: 'line',
+ stack: 'Total',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Search Engine',
+ type: 'line',
+ stack: 'Total',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+};
+ createEcharts(staticLine, staticLineData)
+})
</script>
-
-<style>
-
-</style>
\ No newline at end of file
+
+<style></style>
\ No newline at end of file