新增盒子组件

src/App.vue

@@ -6,7 +6,6 @@
         <MainLeft />
         <MainRight v-show="!store.boxOpenState" />
         <Box v-show="store.boxOpenState" />
-        <!-- {{ store.getInnerWidth }} -->
       </div>
     </main>
     <Footer />
@@ -35,7 +34,7 @@ onMounted(() => {
   // 加载完成事件
   window.addEventListener("load", () => {
     console.log("加载完成");
-    console.clear();
+    // console.clear();
     // 去除加载标记
     document.getElementsByTagName("body")[0].className = "";
     // 给加载动画添加结束标记
@@ -45,11 +44,11 @@ onMounted(() => {
 
   // 监听当前页面宽度
   getWidth();
-  window.addEventListener("resize", getWidth());
+  window.addEventListener("resize", getWidth);
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", getWidth());
+  window.removeEventListener("resize", getWidth);
 });
 </script>
 

src/components/Message/index.vue

@@ -28,9 +28,10 @@
 </template>
 
 <script setup>
-import { reactive, watch } from "vue";
+import { reactive, watch, h } from "vue";
 import { Icon } from "@vicons/utils";
 import { QuoteLeft, QuoteRight } from "@vicons/fa";
+import { Error } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 const store = mainStore();
 
@@ -42,7 +43,17 @@ let descriptionText = reactive({
 
 // 切换右侧功能区
 const changeBox = () => {
+  if (store.getInnerWidth >= 990) {
     store.boxOpenState = !store.boxOpenState;
+  } else {
+    ElMessage({
+      message: "当前页面宽度不足以开启盒子",
+      icon: h(Error, {
+        theme: "filled",
+        fill: "#efefef",
+      }),
+    });
+  }
 };
 
 // 监听状态变化

src/components/TimeCapsule/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="time-capsule">
+    <div class="title">
+      <hourglass-full
+        theme="two-tone"
+        size="24"
+        :fill="['#efefef', '#00000020']"
+      />
+      <span>时光胶囊</span>
+    </div>
+    <span class="text"
+      >今日已经度过了&nbsp;{{ timeData.day.start }}&nbsp;小时</span
+    >
+    <el-progress
+      :text-inside="true"
+      :stroke-width="20"
+      :percentage="timeData.day.pass"
+    />
+    <span class="text"
+      >本周已经度过了&nbsp;{{ timeData.week.start }}&nbsp;天</span
+    >
+    <el-progress
+      :text-inside="true"
+      :stroke-width="20"
+      :percentage="timeData.week.pass"
+    />
+    <span class="text"
+      >本月已经度过了&nbsp;{{ timeData.month.start }}&nbsp;天</span
+    >
+    <el-progress
+      :text-inside="true"
+      :stroke-width="20"
+      :percentage="timeData.month.pass"
+    />
+    <span class="text"
+      >今年已经度过了&nbsp;{{ timeData.year.start }}&nbsp;个月</span
+    >
+    <el-progress
+      :text-inside="true"
+      :stroke-width="20"
+      :percentage="timeData.year.pass"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { HourglassFull } from "@icon-park/vue-next";
+import { getTimeCapsule } from "@/utils/getTime.js";
+
+// 进度条数据
+let timeData = ref(getTimeCapsule());
+let timeInterval = null;
+
+onMounted(() => {
+  timeInterval = setInterval(() => {
+    timeData.value = getTimeCapsule();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timeInterval);
+});
+</script>
+
+<style lang="scss" scoped>
+.time-capsule {
+  width: 100%;
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0.5rem 0 1.5rem;
+    font-size: 1.1rem;
+    .i-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 6px;
+    }
+  }
+  .text {
+    display: block;
+    margin: 1rem 0rem 0.5rem 0rem;
+    font-size: 0.95rem;
+  }
+}
+</style>

src/store/index.js

@@ -9,7 +9,7 @@ export const mainStore = defineStore("main", {
             coverType: 0, // 壁纸种类
             musicIsOk: false, // 音乐是否加载完成
             musicOpenState: false, // 音乐面板开启状态
-            boxOpenState: false, // 更多页面开启状态
+            boxOpenState: false, // 盒子开启状态
             playerState: false, // 当前播放状态
             playerTitle: null, // 当前播放歌曲名
             playerArtist: null, // 当前播放歌手名

src/style/style.scss

@@ -94,6 +94,28 @@ p {
     }
 }
 
+// 进度条样式
+.el-progress-bar {
+    .el-progress-bar__outer {
+        border-radius: 6px;
+        background-color: #00000020;
+
+        .el-progress-bar__inner {
+            background-color: #efefef;
+            border-radius: 6px;
+            text-align: center;
+            font-family: 'UnidreamLED';
+
+            span {
+                color: #564d59;
+                font-size: .9rem;
+            }
+
+        }
+    }
+
+}
+
 // 渐入动画
 .fade-enter-active {
     animation: fade 0.3s ease-in-out;

src/utils/getTime.js

@@ -1,3 +1,4 @@
+// 时钟
 export const getCurrentTime = () => {
     let time = new Date();
     let year = time.getFullYear();
@@ -18,3 +19,41 @@ export const getCurrentTime = () => {
     }
     return currentTime;
 }
+
+// 时光胶囊
+export const getTimeCapsule = () => {
+    // 日进度
+    let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
+    let todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60;
+    let todayPassHoursPercent = (todayPassHours / 24) * 100;
+    // 周进度
+    let weeks = [7, 1, 2, 3, 4, 5, 6];
+    let weekDay = weeks[new Date().getDay()];
+    let weekDayPassPercent = (weekDay / 7) * 100;
+    // 月进度
+    let year = new Date().getFullYear();
+    let date = new Date().getDate();
+    let month = new Date().getMonth() + 1;
+    let monthAll = new Date(year, month, 0).getDate();
+    let monthPassPercent = (date / monthAll) * 100;
+    // 年进度
+    let yearPass = (month / 12) * 100;
+    return {
+        day: {
+            start: parseInt(todayPassHours),
+            pass: parseInt(todayPassHoursPercent),
+        },
+        week: {
+            start: weekDay,
+            pass: parseInt(weekDayPassPercent),
+        },
+        month: {
+            start: date,
+            pass: parseInt(monthPassPercent),
+        },
+        year: {
+            start: month == 0 ? month : month - 1,
+            pass: parseInt(yearPass),
+        }
+    }
+}

src/views/Box/index.vue

@@ -14,17 +14,31 @@
         @click="store.boxOpenState = false"
       />
     </transition>
-    6666
+    <div class="content">
+      <TimeCapsule />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { CloseOne } from "@icon-park/vue-next";
+import TimeCapsule from "@/components/TimeCapsule/index.vue";
 import { mainStore } from "@/store";
 const store = mainStore();
 
 let closeShow = ref(false);
+
+// 监听宽度变化
+watch(
+  () => store.innerWidth,
+  (value) => {
+    console.log(value);
+    if (value < 990 && store.boxOpenState) {
+      store.boxOpenState = false;
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -32,7 +46,6 @@ let closeShow = ref(false);
   flex: 1 0 0%;
   margin-left: 0.75rem;
   height: 80%;
-  padding: 20px;
   position: relative;
   &:hover {
     transform: scale(1);
@@ -50,5 +63,10 @@ let closeShow = ref(false);
       transform: scale(1);
     }
   }
+  .content {
+    padding: 30px;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/views/Func/index.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import Music from "@/components/Music/test.vue";
+import Music from "@/components/Music/index.vue";
 import Hitokoto from "@/components/Hitokoto/index.vue";
 import Weather from "@/components/Weather/index.vue";
 import { getCurrentTime } from "@/utils/getTime";