add new

src/views/blog/AmountChartView.vue

@@ -1,31 +1,39 @@
 <template>
     <div class="charts">
-        <div class="line-chart">
-            <a-select v-model:value="selectedLinePeriod" @change="updateLineChart">
-                <a-select-option value="nighweek">近一周</a-select-option>
-                <a-select-option value="nighmonth">近一月</a-select-option>
-                <a-select-option value="nighyear">近一年</a-select-option>
-            </a-select>
-            <div ref="linechart" class="echart"></div>
-        </div>
-        <div class="pie-chart">
-            <a-select v-model:value="selectedPiePeriod" @change="updatePieChart">
-                <a-select-option value="nighweek">近一周</a-select-option>
-                <a-select-option value="nighmonth">近一月</a-select-option>
-                <a-select-option value="nighyear">近一年</a-select-option>
-            </a-select>
-            <div ref="piechart" class="echart"></div>
-        </div>
-        <div class="lines-chart">
-            <a-select v-model:value="selectedLinesPeriod" @change="updateLinesChart">
-                <a-select-option value="thisyear">今年</a-select-option>
-                <a-select-option value="lastyear">去年</a-select-option>
-            </a-select>
-            <div ref="lineschart" class="echart"></div>
-        </div>
-        <div class="bar-chart">
-            <div ref="barchart" class="echart"></div>
-        </div>
+        <a-card hoverable>
+            <div class="line-chart">
+                <a-select v-model:value="selectedLinePeriod" @change="updateLineChart">
+                    <a-select-option value="nighweek">近一周</a-select-option>
+                    <a-select-option value="nighmonth">近一月</a-select-option>
+                    <a-select-option value="nighyear">近一年</a-select-option>
+                </a-select>
+                <div ref="linechart" class="echart"></div>
+            </div>
+        </a-card>
+        <a-card hoverable>
+            <div class="pie-chart">
+                <a-select v-model:value="selectedPiePeriod" @change="updatePieChart">
+                    <a-select-option value="nighweek">近一周</a-select-option>
+                    <a-select-option value="nighmonth">近一月</a-select-option>
+                    <a-select-option value="nighyear">近一年</a-select-option>
+                </a-select>
+                <div ref="piechart" class="echart"></div>
+            </div>
+        </a-card>
+        <a-card hoverable>
+            <div class="lines-chart">
+                <a-select v-model:value="selectedLinesPeriod" @change="updateLinesChart">
+                    <a-select-option value="thisyear">今年</a-select-option>
+                    <a-select-option value="lastyear">去年</a-select-option>
+                </a-select>
+                <div ref="lineschart" class="echart"></div>
+            </div>
+        </a-card>
+        <a-card hoverable>
+            <div class="bar-chart">
+                <div ref="barchart" class="echart"></div>
+            </div>
+        </a-card>
     </div>
 </template>
 
@@ -356,10 +364,10 @@ const updateLineChart = () => {
 const updateLinesChart = () => {
     if (lineschart.value) {
         createEcharts(lineschart, linesChartOptions[selectedLinesPeriod.value]);
-        console.log(`output->`,selectedLinesPeriod.value)
-        if(selectedLinesPeriod.value==="thisyear"){
+        console.log(`output->`, selectedLinesPeriod.value)
+        if (selectedLinesPeriod.value === "thisyear") {
             fetchLinesAndUpdateChart(0, linesChartOptions.thisyear)
-        }else{
+        } else {
             fetchLinesAndUpdateChart(1, linesChartOptions.thisyear)
         }
     }
@@ -367,7 +375,7 @@ const updateLinesChart = () => {
 const updatePieChart = () => {
     if (piechart.value) {
         createEcharts(piechart, pieChartOptions[selectedPiePeriod.value]);
-        if(selectedPiePeriod.value){
+        if (selectedPiePeriod.value) {
             fetchPieAndUpdateChart(pieChartOptions[selectedPiePeriod.value], selectedPiePeriod.value);
         }
     }
@@ -388,7 +396,7 @@ const updatePieChartData = (pieData: any, chartOptions: any) => {
 const updateBarChartData = (barData: any) => {
     barChartOptions.dataset.source = barData;
 }
-const fetchLineAndUpdateChart = async (chartOptions: any, datetype:any="nighweek" ) => {
+const fetchLineAndUpdateChart = async (chartOptions: any, datetype: any = "nighweek") => {
     const response = await get(`/disburses/line/${datetype}`);
     const data = response.data.data;
     const createDates = data.map((item: any) => item.create_date);
@@ -396,7 +404,7 @@ const fetchLineAndUpdateChart = async (chartOptions: any, datetype:any="nighweek
     updateLineChartData(createDates, totalDisbursePrices, chartOptions);
     createEcharts(linechart, chartOptions);
 }
-const fetchPieAndUpdateChart = async (chartOptions: any, datetype:any="nighweek") => {
+const fetchPieAndUpdateChart = async (chartOptions: any, datetype: any = "nighweek") => {
     const response = await get(`/disburses/pie/${datetype}`);
     const data = response.data.data;
     updatePieChartData(data, chartOptions);
@@ -454,16 +462,15 @@ onMounted(() => {
 .charts {
     display: flex;
     flex-direction: column;
+    width: 45%;
+    margin: 0 24px ;
+}
+.charts>*{
+    margin-bottom: 24px;
 }
-
 .echart {
     width: calc(45vw);
     height: calc(45vw*2/5);
     margin: 24px 0 48px 0;
 }
-
-.charts {
-    width: 45%;
-    margin: 24px;
-}
 </style>

src/views/blog/DiaryContentView.vue

@@ -1,143 +0,0 @@
-<template>
-    <div class="main">
-        <div class="mainContent" v-for="article in 2">
-            <a-badge-ribbon text="Hippies" color="black">
-                <a-card hoverable>
-                    <h2>操作系统的安装</h2>
-                    <div class="tag-group">
-                        <a-tag color="#E6E6FA">
-                            <template #icon>
-                                <RiLiLined />
-                            </template>
-                            {{ mainStatistic.mainDate }}
-                        </a-tag>
-                        <a-tag color="#6495ED">
-                            <template #icon>
-                                <YanJingLined />
-                            </template>
-                            {{ mainStatistic.mainWatchCount }}
-                        </a-tag>
-                        <a-tag color="#B0C4DE">
-                            <template #icon>
-                                <XieZiLined />
-                            </template>
-                            字数≈{{ mainStatistic.mainWordCount }}字
-                        </a-tag>
-                        <a-tag color="#20B2AA">
-                            <template #icon>
-                                <YueDuLined />
-                            </template>
-                            阅读时长≈{{ mainStatistic.mainReadCount }}分
-                        </a-tag>
-                    </div>
-                    <div class="blog-content">
-                        <div>
-                            <a-image :preview="false" :width="200"
-                                src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
-                        </div>
-                        <div class="text-container">
-                            这是内容
-                        </div>
-                    </div>
-                    <div class="read-button">
-                        <a-button type="primary" shape="round">阅读全文</a-button>
-                    </div>
-                </a-card>
-            </a-badge-ribbon>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { reactive } from 'vue';
-const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
-    mainDate: "2024-06-11",
-    mainWatchCount: "9999",
-    mainWordCount: "9999",
-    mainReadCount: "9999"
-})
-
-</script>
-
-<style scoped>
-.main {
-
-    width: 45%;
-    margin: 0 24px;
-}
-
-.main .mainContent {
-    margin-bottom: 24px;
-}
-
-.main h2 {
-    text-align: center;
-}
-
-.main .tag-group {
-    display: flex;
-    justify-content: center;
-}
-
-.main .tag-group>* {
-    color: black;
-    margin: 0 12px;
-}
-
-.main .blog-content {
-    display: flex;
-    margin: 48px;
-}
-
-.main .blog-content>:nth-child(2) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre-wrap;
-    /* 防止文本换行 */
-}
-
-.main .read-button {
-    display: flex;
-    justify-content: center;
-
-}
-
-.main .read-button button {
-    color: #fff;
-    border: none;
-    cursor: pointer;
-    background-color: #007bff;
-    /* 初始背景颜色 */
-    animation: colorChange 3s infinite alternate;
-    /* 添加颜色变化的动画 */
-}
-
-@keyframes colorChange {
-    0% {
-        background-color: #007bff;
-        /* 初始颜色 */
-    }
-
-    50% {
-        background-color: #ff7e5f;
-        /* 中间颜色 */
-    }
-
-    100% {
-        background-color: #feb47b;
-        /* 结束颜色 */
-    }
-}
-
-.main .text-container {
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    line-height: 2;
-    margin-left: 24px;
-
-}
-</style>

src/views/blog/imagemanage/OtherImgView.vue

@@ -47,7 +47,7 @@ onMounted(() => {
 <style scoped>
 .otherimg {
     width: 45%;
-    margin: 0 24px;
+    margin: 0 24px 24px 24px;
 }
 
 .img {

src/views/blog/imagemanage/PersonSelfView.vue

@@ -46,7 +46,7 @@ onMounted(() => {
 <style scoped>
 .personself {
     width: 45%;
-    margin: 0 24px;
+    margin: 0 24px 24px 24px;
 }
 
 .img {