diff --git a/src/components/blogs/leftsite/ComLink.vue b/src/components/blogs/leftsite/ComLink.vue index af4c6e7..157b994 100644 --- a/src/components/blogs/leftsite/ComLink.vue +++ b/src/components/blogs/leftsite/ComLink.vue @@ -50,12 +50,15 @@ onMounted(() => { .button-group { display: flex; flex-wrap: wrap; - justify-content: space-between; + /* justify-content: space-between; */ } .button-group>* { - width: 40%; margin: 12px; } - +@media (max-width: 768px) { + .button-group > * { + width: 100%; + } +} </style> \ No newline at end of file diff --git a/src/components/blogs/leftsite/LeftSiteInfo.vue b/src/components/blogs/leftsite/LeftSiteInfo.vue index fb19bca..fc253ba 100644 --- a/src/components/blogs/leftsite/LeftSiteInfo.vue +++ b/src/components/blogs/leftsite/LeftSiteInfo.vue @@ -6,7 +6,7 @@ <h1>sunfree</h1> <div class="cardText"></div> <div class="button-group"> - <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large" + <a-button v-for="(button, index) in buttons" :key="index" shape="circle" :size="buttonSize" @click="handleClick(button.url)"> <component :is="button.icon" /> </a-button> @@ -26,11 +26,29 @@ </template> <script setup lang='ts'> -import { ref, onMounted } from 'vue'; +import { ref, onMounted, computed,onUnmounted } from 'vue'; import iconComponents from "@/assets/index"; import { get } from '@/tools/request'; import type { classticInterface } from '@/api/admin'; import { CaretRightOutlined } from '@ant-design/icons-vue'; +// const buttonSizesss = ref("large") +const windowWidth = ref(window.innerWidth); + +const updateWidth = () => { + windowWidth.value = window.innerWidth; +}; + +onMounted(() => { + window.addEventListener('resize', updateWidth); +}); + +onUnmounted(() => { + window.removeEventListener('resize', updateWidth); +}); + +const buttonSize = computed(() => { + return windowWidth.value < 1920 ? 'small' : 'large'; +}); const buttons = ref([ { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' }, { icon: iconComponents.QQLined, url: '/qqcode' }, diff --git a/src/components/blogs/rightsite/HeatMap.vue b/src/components/blogs/rightsite/HeatMap.vue index f9be240..f638e11 100644 --- a/src/components/blogs/rightsite/HeatMap.vue +++ b/src/components/blogs/rightsite/HeatMap.vue @@ -10,7 +10,7 @@ <script setup lang='ts'> import { get } from '@/tools/request'; -import { ref, reactive, onMounted } from 'vue'; +import { ref, reactive, onMounted,onUnmounted } from 'vue'; import { createEcharts } from "@/hooks/intex" const heat = ref(null); function generateDates(numDays: number) { @@ -125,10 +125,35 @@ const heatMapData = reactive( }] } ) +function handleResize() { + if (heat.value && (heat.value as any).echartsInstance) { + (heat.value as any).echartsInstance.resize(); + } +} + onMounted(() => { statisticList() createEcharts(heat, heatMapData); + window.addEventListener('resize', handleResize); + + // 确保组件卸载时移除事件监听器 + onUnmounted(() => { + window.removeEventListener('resize', handleResize); + }); }) </script> -<style></style> \ No newline at end of file +<style scoped> +.heatmap-container { + width: 100%; + height: 100%; + position: relative; +} + +.heatmap { + width: 100%; + height: 100%; + border-right: rgba(0, 0, 0, 0.5); + box-sizing: border-box; +} +</style> \ No newline at end of file diff --git a/src/components/blogs/rightsite/RandomArticle.vue b/src/components/blogs/rightsite/RandomArticle.vue index 1d11ea3..8ea3f12 100644 --- a/src/components/blogs/rightsite/RandomArticle.vue +++ b/src/components/blogs/rightsite/RandomArticle.vue @@ -6,14 +6,18 @@ <span>{{ article.blogtitle }}</span> <span>{{ article.create_at }}</span> </div> - <a-image :preview="false" :width="250" :src="article.imglink" /> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image" /> + </div> </a> <a :href="`/diary/${article.id}`" v-if="article.diarytitle" class="random-diary"> <div class="article-text"> <span>{{ article.diarytitle }}</span> <span>{{ article.create_at }}</span> </div> - <a-image :preview="false" :width="250" :src="article.imglink" /> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image" /> + </div> </a> </div> </a-card> @@ -32,7 +36,7 @@ const homePageList = async () => { ).then(response => { const randResponse = response.data.data.map((items: any) => ({ ...items, - imglink: items.imglink || 'https://www.wuruilin.cn/personself/暂无图片A.jpg', + imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片A.jpg', create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'), update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'), })) @@ -54,12 +58,23 @@ onMounted(() => { font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif"; } + .image-container { + width: 100%; + max-width: 250px; +} + + .responsive-image { + height: auto; +} + + .random-blog, .random-diary { display: flex; flex-direction: column; justify-content: center; align-items: center; + max-width: 100%; } a { diff --git a/src/hooks/intex.ts b/src/hooks/intex.ts index 09bb0d2..18249ef 100644 --- a/src/hooks/intex.ts +++ b/src/hooks/intex.ts @@ -45,6 +45,17 @@ export const verifySelect = (message: selectMessage) => { * echarts配置 */ export const createEcharts = (chartRef: any, option: any) => { - const myChart = echarts.init(chartRef.value); - myChart.setOption(option); -}; + if (chartRef.value) { + // 销毁旧实例 + if (chartRef.value.echartsInstance) { + chartRef.value.echartsInstance.dispose(); + } + + const myChart = echarts.init(chartRef.value); + chartRef.value.echartsInstance = myChart; // 保存 ECharts 实例 + myChart.setOption(option); + myChart.resize(); // 调整大小以适应容器 + } else { + console.warn('Chart reference is not available.'); + } +}; \ No newline at end of file diff --git a/src/tools/request.ts b/src/tools/request.ts index 49d72ac..1535cb1 100644 --- a/src/tools/request.ts +++ b/src/tools/request.ts @@ -3,7 +3,7 @@ import { type AxiosRequestConfig } from 'axios'; import router from '@/router'; const instance = axios.create({ // 添加url - baseURL: 'https://www.wuruilin.cn/api/', + baseURL: 'https://www.wuruilin.cn/api', timeout: 5000, }); diff --git a/src/views/blog/diarycontent/DiaryListView.vue b/src/views/blog/diarycontent/DiaryListView.vue index b72a2e2..b8e366c 100644 --- a/src/views/blog/diarycontent/DiaryListView.vue +++ b/src/views/blog/diarycontent/DiaryListView.vue @@ -31,8 +31,8 @@ </a-tag> </div> <div class="blog-content"> - <div> - <a-image :preview="false" :width="1000" :height="500" :src=article.imglink /> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image"/> </div> </div> @@ -180,6 +180,16 @@ onMounted(() => { /* 防止文本换行 */ } +.diarys .image-container { + width: 1000px; + +} + +.diarys .responsive-image { + width: 100%; + height: auto; +} + .main .read-button { display: flex; justify-content: center; diff --git a/src/views/blog/imagemanage/OtherImgView.vue b/src/views/blog/imagemanage/OtherImgView.vue index 38078f3..0b5f538 100644 --- a/src/views/blog/imagemanage/OtherImgView.vue +++ b/src/views/blog/imagemanage/OtherImgView.vue @@ -27,14 +27,16 @@ const imageStyle = computed(() => { }; }); const imgurl = ref([]) +console.log(`output->imgurl`,imgurl) const baseurl = "https://www.wuruilin.cn" const imgList = async () => { - await get("photos/listfiles", + await get("/photos/listfiles/", { album_key: "otherimg" } ).then((response) => { const imglist = response.data.files imgurl.value = imglist.map((path: string) => `${baseurl}/${path}`); + }) } onMounted(() => { diff --git a/src/views/blog/imagemanage/PersonSelfView.vue b/src/views/blog/imagemanage/PersonSelfView.vue index 2320762..7c450de 100644 --- a/src/views/blog/imagemanage/PersonSelfView.vue +++ b/src/views/blog/imagemanage/PersonSelfView.vue @@ -26,14 +26,16 @@ const imageStyle = computed(() => { }; }); const imgurl = ref([]) -const baseurl = "https://www.wuruilin.cn" +const baseurl = "https://www.wuruilin.cn/" const imgList = async () => { - await get("photos/listfiles", + await get("/photos/listfiles/", { album_key: "personself" } ).then((response) => { const imglist = response.data.files - imgurl.value = imglist.map((path: string) => `${baseurl}/${path}`); + imgurl.value = imglist.map((path: string) => { + return `${baseurl}/${path}` + }); }) } onMounted(() => {