feat: 优化部分样式 #259

package.json

@@ -16,27 +16,27 @@
   "dependencies": {
     "@worstone/vue-aplayer": "^1.0.6",
     "aplayer": "^1.10.1",
-    "axios": "^1.6.3",
+    "axios": "^1.6.7",
-    "element-plus": "^2.4.4",
+    "element-plus": "^2.6.1",
     "fetch-jsonp": "^1.3.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "swiper": "^9.4.1",
-    "vue": "^3.4.3"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@icon-park/vue-next": "^1.4.2",
     "@vicons/fa": "^0.12.0",
     "@vicons/utils": "^0.1.4",
     "@vitejs/plugin-vue": "^4.6.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.22.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
-    "sass": "^1.69.6",
+    "sass": "^1.71.1",
-    "terser": "^5.26.0",
+    "terser": "^5.29.1",
     "unplugin-auto-import": "^0.11.5",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.5.1",
+    "vite": "^4.5.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-pwa": "^0.14.7"
   }

src/components/Background.vue

@@ -2,9 +2,9 @@
   <div :class="store.backgroundShow ? 'cover show' : 'cover'">
     <img
       v-show="store.imgLoadStatus"
+      :src="bgUrl"
       class="bg"
       alt="cover"
-      :src="bgUrl"
       @load="imgLoadComplete"
       @error.once="imgLoadError"
       @animationend="imgAnimationEnd"
@@ -79,6 +79,14 @@ const imgLoadError = () => {
   bgUrl.value = `/images/background${bgRandom}.jpg`;
 };
 
+// 监听壁纸切换
+watch(
+  () => store.coverType,
+  (value) => {
+    changeBg(value);
+  },
+);
+
 onMounted(() => {
   // 加载壁纸
   changeBg(store.coverType);
@@ -115,7 +123,7 @@ onBeforeUnmount(() => {
     transition:
       filter 0.3s,
       transform 0.3s;
-    animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    animation: fade-blur-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
     animation-delay: 0.45s;
   }
   .gray {

src/components/GithubProject.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="github-project">
-    <div class="title">
-      <github-one theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
-      <span>Github</span>
-    </div>
-    <Swiper
-      :modules="[Pagination, Mousewheel]"
-      :slides-per-view="1"
-      :space-between="40"
-      :pagination="{
-        el: '.swiper-pagination',
-        clickable: true,
-        bulletElement: 'div',
-      }"
-      :mousewheel="true"
-    >
-      <SwiperSlide v-for="list in projectList" :key="list">
-        <el-row class="all-project" :gutter="20">
-          <el-col v-for="(item, index) in list" :span="12" :key="index">
-            <div class="project cards" @click="toGithub(item)">
-              <div class="name">
-                <bookmark theme="outline" size="22" fill="#efefef" />
-                <div class="name-text">
-                  <span class="author">{{ item.author }}</span>
-                  <span>{{ item.name }}</span>
-                </div>
-              </div>
-              <span class="desc">{{ item.desc }}</span>
-            </div>
-          </el-col>
-        </el-row>
-      </SwiperSlide>
-      <div class="swiper-pagination" />
-    </Swiper>
-  </div>
-</template>
-
-<script setup>
-import { GithubOne, Bookmark } from "@icon-park/vue-next";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination, Mousewheel } from "swiper";
-
-// 仓库数据
-const projectData = [
-  {
-    name: "home",
-    author: "imsyy",
-    desc: "个人主页，我的个人主页，个人主页源码，主页模板，homepage",
-  },
-  {
-    name: "SPlayer",
-    author: "imsyy",
-    desc: "🎉 一个简约的音乐播放器，支持网易云音乐账号登录，逐字歌词，下载歌曲，展示评论区，音乐云盘及歌单管理，音乐频谱，移动端基础适配 | A minimalist music player",
-  },
-  {
-    name: "Snavigation",
-    author: "imsyy",
-    desc: "Snavigation 一个简约的起始页 | 支持自定义搜索引擎，自定义快捷方式，自定义壁纸以及数据备份",
-  },
-  {
-    name: "DailyHotApi",
-    author: "imsyy",
-    desc: "今日热榜 API，一个聚合热门数据的 API 接口，支持 Vercel 部署 | 前端页面：https://github.com/imsyy/DailyHot",
-  },
-  {
-    name: "site-status",
-    author: "imsyy",
-    desc: "📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site",
-  },
-];
-
-// 计算网站链接
-const projectList = computed(() => {
-  const result = [];
-  for (let i = 0; i < projectData.length; i += 4) {
-    const subArr = projectData.slice(i, i + 4);
-    result.push(subArr);
-  }
-  return result;
-});
-
-// 跳转至 Github
-const toGithub = (data) => {
-  window.open(`https://github.com/${data.author}/${data.name}`);
-};
-</script>
-
-<style lang="scss" scoped>
-.github-project {
-  width: 100%;
-  margin-top: 20px;
-  .title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0.2rem 0 1.5rem;
-    font-size: 1.1rem;
-    .i-icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-right: 6px;
-    }
-  }
-  .swiper {
-    left: -10px;
-    width: calc(100% + 20px);
-    padding: 5px 10px 0;
-    z-index: 0;
-    .swiper-slide {
-      height: 100%;
-    }
-    .swiper-pagination {
-      position: static;
-      margin-top: -8px;
-      :deep(.swiper-pagination-bullet) {
-        background-color: #fff;
-        width: 18px;
-        height: 4px;
-        border-radius: 4px;
-        transition: opacity 0.3s;
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  .all-project {
-    width: calc(100% + 20px);
-    .project {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-bottom: 20px;
-      padding: 12px;
-      height: 100px;
-      background-color: transparent;
-      .name {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 8px;
-        .i-icon {
-          display: flex;
-          margin-right: 6px;
-        }
-        .author {
-          opacity: 0.8;
-          &::after {
-            content: "/";
-            margin: 0 4px;
-          }
-        }
-      }
-      .desc {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        word-break: break-all;
-        font-size: 13px;
-        opacity: 0.8;
-        line-height: 20px;
-      }
-    }
-  }
-}
-</style>

src/components/MoreContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="more-content">您可在此编写任意内容</div>
+</template>
+
+<style lang="scss" scoped>
+.more-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/Set.vue

@@ -4,10 +4,10 @@
       <el-collapse-item title="个性壁纸" name="1">
         <div class="bg-set">
           <el-radio-group v-model="coverType" text-color="#ffffff" @change="radioChange">
-            <el-radio label="0" size="large" border>默认壁纸</el-radio>
+            <el-radio value="0" size="large" border>默认壁纸</el-radio>
-            <el-radio label="1" size="large" border>每日一图</el-radio>
+            <el-radio value="1" size="large" border>每日一图</el-radio>
-            <el-radio label="2" size="large" border>随机风景</el-radio>
+            <el-radio value="2" size="large" border>随机风景</el-radio>
-            <el-radio label="3" size="large" border>随机动漫</el-radio>
+            <el-radio value="3" size="large" border>随机动漫</el-radio>
           </el-radio-group>
         </div>
       </el-collapse-item>
@@ -73,9 +73,9 @@
         <div class="item">
           <span class="text">循环模式</span>
           <el-radio-group v-model="playerLoop" size="small" text-color="#FFFFFF">
-            <el-radio label="all" border>列表</el-radio>
+            <el-radio value="all" border>列表</el-radio>
-            <el-radio label="one" border>单曲</el-radio>
+            <el-radio value="one" border>单曲</el-radio>
-            <el-radio label="none" border>不循环</el-radio>
+            <el-radio value="none" border>不循环</el-radio>
           </el-radio-group>
         </div>
       </el-collapse-item>
@@ -109,7 +109,7 @@ const activeName = ref("1");
 // 壁纸切换
 const radioChange = () => {
   ElMessage({
-    message: "壁纸设置成功，刷新后生效",
+    message: "壁纸更换成功",
     icon: h(SuccessPicture, {
       theme: "filled",
       fill: "#efefef",

src/components/Weather.vue

@@ -38,6 +38,18 @@ const weatherData = reactive({
   },
 });
 
+// 取出天气平均值
+const getTemperature = (min, max) => {
+  try {
+    // 计算平均值并四舍五入
+    const average = (Number(min) + Number(max)) / 2;
+    return Math.round(average);
+  } catch (error) {
+    console.error("计算温度出现错误：", error);
+    return "NaN";
+  }
+};
+
 // 获取天气数据
 const getWeatherData = async () => {
   try {
@@ -53,7 +65,7 @@ const getWeatherData = async () => {
       };
       weatherData.weather = {
         weather: data.condition.day_weather,
-        temperature: (+data.condition.max_degree + +data.condition.min_degree) / 2,
+        temperature: getTemperature(data.condition.min_degree, data.condition.max_degree),
         winddirection: data.condition.day_wind_direction,
         windpower: data.condition.day_wind_power,
       };

src/style/style.scss

@@ -168,7 +168,7 @@ p {
   }
   to {
     filter: blur(0) brightness(1);
-    transform: scale(1.2);
+    transform: scale(1);
   }
 }
 

src/views/Box/index.vue

@@ -23,7 +23,7 @@
     <div class="content">
       <!-- 可在此处自定义任意内容 -->
       <TimeCapsule />
-      <GithubProject />
+      <MoreContent />
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@
 import { CloseOne, SettingTwo } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 import TimeCapsule from "@/components/TimeCapsule.vue";
-import GithubProject from "@/components/GithubProject.vue";
+import MoreContent from "@/components/MoreContent.vue";
 
 const store = mainStore();
 const closeShow = ref(false);
@@ -76,6 +76,8 @@ const closeShow = ref(false);
   }
 
   .content {
+    display: flex;
+    flex-direction: column;
     padding: 30px;
     width: 100%;
     height: 100%;