From 2b7daedd288cee41a6839cab6bd1e760a912c757 Mon Sep 17 00:00:00 2001 From: sunfree <17315650350@163.com> Date: Mon, 5 Aug 2024 21:50:00 +0800 Subject: [PATCH] add new --- src/components/blogs/ceshi.vue | 100 +++++------------- src/components/blogs/leftsite/ComLink.vue | 9 +- .../blogs/leftsite/LeftSiteInfo.vue | 22 +++- .../blogs/rightsite/RandomArticle.vue | 19 +++- src/views/blog/AmountChartView.vue | 1 + src/views/blog/HomePageView.vue | 2 +- src/views/blog/blogcontent/BlogListView.vue | 22 +++- src/views/blog/diarycontent/DiaryListView.vue | 17 ++- 8 files changed, 104 insertions(+), 88 deletions(-) diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue index ffc7afd..d94865a 100644 --- a/src/components/blogs/ceshi.vue +++ b/src/components/blogs/ceshi.vue @@ -1,77 +1,29 @@ <template> - <div ref="heat" style="height: 100%;"></div> + <a-row :gutter="16"> + <a-col :xl="24" :xs="12"> + <div class="responsive-box">Content 1</div> + </a-col> + <a-col :xs="12"> + <div class="responsive-box">Content 2</div> + </a-col> + <a-col :xs="12"> + <div class="responsive-box">Content 3</div> + </a-col> + <!-- <a-col :xl="4"> + <div class="responsive-box">Content 2</div> + </a-col> + <a-col :xl="4"> + <div class="responsive-box">Content 2</div> + </a-col> + <a-col :xl="4"> + <div class="responsive-box">Content 2</div> + </a-col> --> + </a-row> </template> -<script setup lang='ts'> -import { createEcharts } from "@/hooks/intex" -import { onMounted,ref } from "vue"; -const heat = ref(null); -onMounted(() => { - const hours = [ - '12a', '1a', '2a', '3a', '4a', '5a', '6a', - '7a', '8a', '9a', '10a', '11a', - '12p', '1p', '2p', '3p', '4p', '5p', - '6p', '7p', '8p', '9p', '10p', '11p' - ]; - // prettier-ignore - const days = [ - 'Saturday', 'Friday', 'Thursday', - 'Wednesday', 'Tuesday', 'Monday', 'Sunday' - ]; - // prettier-ignore - const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]] - .map(function (item) { - return [item[1], item[0], item[2] || '-']; - }); - const option = { - tooltip: { - position: 'top' - }, - grid: { - height: '50%', - top: '10%' - }, - xAxis: { - type: 'category', - data: hours, - splitArea: { - show: true - } - }, - yAxis: { - type: 'category', - data: days, - splitArea: { - show: true - } - }, - visualMap: { - min: 0, - max: 10, - calculable: true, - orient: 'horizontal', - left: 'center', - bottom: '15%' - }, - series: [ - { - name: 'Punch Card', - type: 'heatmap', - data: data, - label: { - show: true - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] - }; - createEcharts(heat,option) -}) -</script> - -<style></style> \ No newline at end of file +<style> +.responsive-box { + background-color: #f0f0f0; + text-align: center; +} +</style> 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 d58f965..d736a15 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/RandomArticle.vue b/src/components/blogs/rightsite/RandomArticle.vue index 59fafba..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> @@ -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/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue index da7a00e..ef6bf0f 100644 --- a/src/views/blog/AmountChartView.vue +++ b/src/views/blog/AmountChartView.vue @@ -454,6 +454,7 @@ onMounted(() => { .charts { display: flex; flex-direction: column; + width: 100%; } .echart { diff --git a/src/views/blog/HomePageView.vue b/src/views/blog/HomePageView.vue index 6b20852..5cb7ab6 100644 --- a/src/views/blog/HomePageView.vue +++ b/src/views/blog/HomePageView.vue @@ -208,7 +208,7 @@ watch(() => homepageStore.homepagelist, () => { } .blogs .image-container { - width: 300px; + width: 200px; } diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue index 7b2ce37..e9a5416 100644 --- a/src/views/blog/blogcontent/BlogListView.vue +++ b/src/views/blog/blogcontent/BlogListView.vue @@ -30,14 +30,23 @@ 阅读时长≈{{ article.readminite }}分 </a-tag> </div> - <div class="blog-content"> + <!-- <div class="blog-content"> <div> <a-image :preview="false" :width="200" :src=article.imglink /> </div> <div class="text-container"> {{ article.blogcontent }} </div> - </div> + </div> --> + + <div class="blog-content"> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image"/> + </div> + <div class="text-container"> + {{ article.blogcontent }} + </div> + </div> <div class="read-button"> <a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button> </div> @@ -193,6 +202,15 @@ onMounted(() => { animation: colorChange 3s infinite alternate; /* 添加颜色变化的动画 */ } +.blog-content .image-container { + width: 200px; + +} + +.blog-content .responsive-image { + width: 100%; + height: auto; +} .custom-line { border: 0; diff --git a/src/views/blog/diarycontent/DiaryListView.vue b/src/views/blog/diarycontent/DiaryListView.vue index b72a2e2..75b5c53 100644 --- a/src/views/blog/diarycontent/DiaryListView.vue +++ b/src/views/blog/diarycontent/DiaryListView.vue @@ -31,11 +31,10 @@ </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> - - </div> <div class="read-button"> <a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button> </div> @@ -180,6 +179,16 @@ onMounted(() => { /* 防止文本换行 */ } +.blog-content .image-container { + width: 1000px; + +} + +.blog-content .responsive-image { + width: 100%; + height: auto; +} + .main .read-button { display: flex; justify-content: center;