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