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(() => {