首页细节调整

components.d.ts

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Aplayer: typeof import('./src/components/aplayer.vue')['default']
     DAside: typeof import('vue-devui/layout/index.es.js')['Aside']
     DAvatar: typeof import('vue-devui/avatar/index.es.js')['Avatar']
     DButton: typeof import('vue-devui/button/index.es.js')['Button']

package.json

@@ -17,6 +17,7 @@
     "@devui-design/icons": "^1.4.0",
     "@heroicons/vue": "^2.2.0",
     "@unocss/reset": "^66.3.3",
+    "aplayer": "^1.10.1",
     "axios": "^1.11.0",
     "devui-theme": "^0.0.7",
     "es-toolkit": "^1.39.8",

src/Layout.vue

@@ -6,13 +6,24 @@
     <d-content class="dcontent-1">
       <router-view />
     </d-content>
-    <d-footer class="dfooter-1">footer</d-footer>
+    <d-footer v-show="route.path == '/home'" class="dfooter-1">
+      <div class="beian" ref="footer">
+        <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
+        <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
+        <!-- <div class="flex text-[#409eff] text-[12px] ml-[20px]">
+          <div>今日访问：{{ ips?.todayIp }}</div>
+          <div class="ml-2">总访问：{{ ips?.allIp }}</div>
+        </div> -->
+      </div>
+    </d-footer>
   </d-layout>
 </template>
 
 <script setup lang="ts">
 // 空白项目入口
 import menuH from '@/components/menu.vue';
+const route = useRoute();
+
 
 </script>
 
@@ -20,4 +31,21 @@ import menuH from '@/components/menu.vue';
 .dcontent-1 {
   background-color: #fbfbfb;
 }
+
+.beian {
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  background-color: #21072a;
+}
+
+.beian a {
+  font-size: 14px;
+  text-decoration: none;
+
+}
+
+.beian .swag {
+  margin-left: 20px;
+}
 </style>

src/assets/index.less

@@ -0,0 +1,9 @@
+@primary: #ec66ab;
+@orange: #ffa500;
+@blue: #409eff;
+@dp: #f2e8fc;
+@ps:0 2px 12px 0 #5C169F10;
+
+//#BE8AEF #B172EC #A45BE9 #9744E5 #8A2BE2 #7B1DD3 #6C19B9 #5C169F
+
+@jb: linear-gradient(90deg, #be8aef, #409eff, #8a2be2);

src/assets/main.css

@@ -1,4 +1,4 @@
-@import "./base.css";
+@import "./base.less";
 @import "@devui-design/icons/icomoon/devui-icon.css";
 @import "qweather-icons/font/qweather-icons.css";
 @import "@devui-design/icons/icomoon/devui-icon.css";

src/components/aplayer.vue

@@ -0,0 +1,188 @@
+<template>
+  <!-- 准备一个容器用来存放音乐播放器 -->
+  <div id="aplayer"></div>
+</template>
+
+<script setup lang="ts">
+// https://aplayer.js.org/#/zh-Hans/
+// import Hls from 'hls.js/dist/hls.min.js';
+import APlayer from "aplayer"; // 引入音乐插件
+import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
+import { onMounted, reactive } from "vue";
+
+// window.Hls = Hls;
+const data: any = reactive({
+  audio: [],
+  info: {
+    fixed: true, // 开启吸底模式
+    // mini: false, // 开启迷你模式
+    // autoplay: true, // 自动播放(已经没用了)
+    // theme: '#000', // 主题色
+    loop: "all", // 	音频循环播放, 可选值: 'all', 'one', 'none'
+    order: "list", // 音频循环顺序, 可选值: 'list', 'random'
+    preload: "metadata", //预加载，可选值: 'none', 'metadata', 'auto'
+    volume: 0.5, // 默认音量，可选值: 0-1
+    mutex: true, // 互斥，默认为true，即不允许多个音频同时播放，当前播放的音频会暂停其他音频
+    lrcType: 3, // 歌词类型，可选值:  1, 2, 3
+  },
+});
+
+
+onMounted(async () => {
+  // 8834041785
+  const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
+  // const res = await fetch("https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=8834041785")
+  const mlist = await res.json()
+  data.audio = []
+  mlist.forEach((i: any) => {
+    data.audio.push({
+      title: i.name,
+      author: i.artist,
+      url: i.url,
+      pic: i.pic,
+      lrc: i.lrc,
+    });
+    // console.log('>>>>>',data.audio);
+
+  });
+
+  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
+  const ap = new APlayer({
+    container: document.getElementById("aplayer"),
+    audio: data.audio, // 音乐信息
+    ...data.info, // 其他配置信息
+  });
+  const d: any = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
+  let flag = true;
+  const app: any = document.querySelector("#aplayer > div.aplayer-lrc");
+  app.style.display = "block";
+  app.style.transform = "translateY(50px)";
+  d.addEventListener("click", () => {
+    if (flag) {
+      app.style.transform = "translateY(0)";
+      ap.lrc.show();
+      flag = false;
+    } else {
+      app.style.transform = "translateY(50px)";
+      ap.lrc.hide();
+      ap.list.hide();
+      flag = true;
+    }
+  });
+  document.querySelector(".aplayer-list > ol")?.addEventListener("mousewheel", (e) => {
+    e.stopPropagation();
+  })
+
+  // 获取当前屏幕宽度
+  const width = document.documentElement.clientWidth; // 获取屏幕宽度
+  if (width < 767) d.click();
+});
+</script>
+<style lang="less" scoped>
+#aplayer {
+  width: 480px; // 定个宽度
+  color: var(--n-text-color); // 设置颜色
+  background-color: #f5f5f8; // 设置背景色
+
+  :deep(.aplayer-body) {
+    color: var(--n-text-color); // 设置颜色
+    background-color: #f5f5f8; // 设置背景色
+
+    // bottom: 10px; // 设置底部距离
+    .aplayer-icon-lrc {
+      display: none;
+    }
+  }
+
+  :deep(.aplayer-icon):hover svg path {
+    fill: @blue; // 设置颜色
+  }
+
+  :deep(.aplayer-list) {
+    width: 418px !important;
+    background-color: #f5f5f8;
+    border: none;
+  }
+
+  :deep(.aplayer-list-light) {
+    background: inherit;
+    color: @orange;
+  }
+
+  :deep(.aplayer-list) ol {
+    max-height: 160px !important;
+
+    // margin-bottom: 12px;
+    .aplayer-list-light .aplayer-list-author {
+      color: @orange !important;
+    }
+  }
+
+  :deep(.aplayer-list) ol li {
+    border: none;
+  }
+
+  :deep(.aplayer-list) ol li:hover {
+    background: inherit;
+    color: @blue;
+    border: none;
+
+    .aplayer-list-author {
+      color: @blue !important;
+    }
+  }
+
+  :deep(.aplayer-info) {
+    padding: 0 !important;
+    border-top: none;
+  }
+
+  :deep(.aplayer-icon) svg {
+    color: var(--n-text-color); // 设置颜色
+    background-color: var(--v-bgc); // 设置背景色
+  }
+
+  :deep(.aplayer-icon):hover svg {
+    color: @blue; // 设置颜色
+  }
+
+  :deep(.aplayer-miniswitcher) {
+    color: var(--n-text-color); // 设置颜色
+    background-color: var(--v-bgc); // 设置背景色
+  }
+
+  :deep(.aplayer-lrc) {
+    // text-align: right !important;
+    width: 368px !important;
+    transition: all 0.3s ease;
+    // left: unset;
+    bottom: 12px;
+    z-index: 999;
+    text-shadow: none !important;
+  }
+
+  :deep(.aplayer-lrc-contents) {
+    transition: all 0.5s ease !important;
+
+    p {
+      font-size: 12px !important;
+      color: @primary !important;
+      opacity: 0.8;
+    }
+  }
+
+  :deep(.aplayer-lrc-contents) {
+    .aplayer-lrc-current {
+      opacity: 1;
+      font-size: 13px !important;
+      color: @orange !important;
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  #aplayer {
+    width: 100vw !important;
+  }
+}
+</style>

src/components/homeSide.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="pr-8">
-    <d-card class="mt-10 bg-white">
+    <d-card shadow="never" class="mt-10 bg-white">
       <template #title>
         <div class="flex items-center">
           <icon-time class="w-5 mr-2"></icon-time>
-          节日天气
+          时间日期
         </div>
       </template>
       <template #content>
-        <div class="w-full text-center text-[#ec66ab] font-500 text-2xl font-[yj]">{{ t }}</div>
+        <div class="w-full text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
-        <div class="mt-2 text-center">{{ d }}</div>
+        <div class="mt-3 text-right">{{ d }}</div>
       </template>
     </d-card>
 
-    <d-card class="mt-10 bg-white">
+    <d-card shadow="never" class="mt-10 bg-white">
       <template #title>
         <div class="flex items-center">
           <icon-date class="w-5 mr-2"></icon-date>
@@ -29,7 +29,7 @@
       </template>
     </d-card>
 
-    <d-card class="mt-10 bg-white">
+    <d-card shadow="never" class="mt-10 bg-white">
       <template #title>
         <div class="flex items-center">
           <icon-news class="w-5 mr-2"></icon-news>
@@ -39,12 +39,21 @@
       <template #content>
         <div class="py-1" v-for="i in bdNews" :key="i.id">
           <a class="devui-link flex justify-between" :href="i.url" target="_blank">
-            <span>{{ i.index }}. {{ i.title }}</span>
+            <span>{{ i.index }}. {{ i.title }}
+              <icon-hot v-show="i.index < 4" class="w-4 text-[#ec66ab] inline-block"></icon-hot>
+            </span>
             <span class="text-primary">{{ i.hot }}</span>
           </a>
         </div>
-        <div class="mt-2 text-center">
+        <div class="mt-2 justify-between flex items-center">
-          <a class="devui-link" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻" target="_blank">更多</a>
+
+          <div class="w-2/5 h-px bg-[#ec66ab]"></div>
+          <a class="devui-link text-[#ec66ab] flex items-center" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
+            target="_blank">
+            更多
+            <icon-right class="ml-1 w-4 text-primary inline-block"></icon-right>
+          </a>
+          <div class="w-2/5 h-px bg-[#ec66ab]"></div>
         </div>
       </template>
     </d-card>
@@ -108,7 +117,4 @@ onUnmounted(() => {
   src: url('@/assets/font/LCDML.woff2');
 }
 
-:deep(.devui-card__shadow--hover:hover, .devui-card__shadow--always) {
-  box-shadow: none !important;
-}
 </style>

src/components/menu.vue

@@ -1,9 +1,8 @@
 <template>
-  <div ref="nav"
+  <div ref="nav" class="main-nav flex justify-between bg-white">
-    class="main-nav flex justify-between bg-white border-b border-gray-100 shadow-[0_2px_10px_rgba(173,21,21,0.05)]">
     <!-- 网站Logo -->
     <div class="px-5 flex items-center" slot="brand" @click="goHome">
-      <img src="@/logo/红色字体.png" alt="柚子的网站" class="h-9 align-middle" />
+      <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
     </div>
     <!-- 主导航菜单 -->
     <d-menu mode="horizontal" router class="ml-5 h-14 text-[16px]" :default-select-keys="[key]">
@@ -51,12 +50,15 @@
 
 <script setup lang="ts">
 // 从@/icon/menu引入所有的svg文件
+import logo from '@/assets/images/logo.png';
 import artiSvg from '@/icon/menu/arti.svg';
 import downSvg from '@/icon/menu/download.svg';
 import homeSvg from '@/icon/menu/home.svg';
 import linkSvg from '@/icon/menu/link.svg';
 import picSvg from '@/icon/menu/pic.svg';
 import settingSvg from '@/icon/menu/setting.svg';
+
+
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -177,10 +179,11 @@ onMounted(() => {
 
 </script>
 
-<style scoped>
+<style scoped lang="less">
-/* :deep(svg) {
+.main-nav {
-  color: red;
+  box-shadow: 0 1px 15px 0 @primary;
-} */
+  margin-bottom: 1px;
+}
 :deep(.devui-menu-horizontal .devui-menu-item:hover span .icon) {
   color: var(--devui-brand, #5e7ce0) !important;
   fill: var(--devui-brand, #5e7ce0) !important;

src/icon/hot.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
+  <path fill-rule="evenodd" d="M13.5 4.938a7 7 0 1 1-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 0 1 .572-2.759 6.026 6.026 0 0 1 2.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0 0 13.5 4.938ZM14 12a4 4 0 0 1-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 0 0 1.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 0 1 1.315-4.192.447.447 0 0 1 .431-.16A4.001 4.001 0 0 1 14 12Z" clip-rule="evenodd" />
+</svg>

src/icon/right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
+  <path fill-rule="evenodd" d="M15.28 9.47a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L13.69 10 9.97 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25ZM6.03 5.22l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L8.69 10 4.97 6.28a.75.75 0 0 1 1.06-1.06Z" clip-rule="evenodd" />
+</svg>

src/views/Gallery.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="gallery-page">
     <h1>画廊页</h1>
+    <div class="test w-100 ml-20 mb-20">
+      qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
+    </div>
     <!-- 画廊内容 -->
   </div>
 </template>
@@ -9,6 +12,9 @@
 // 画廊页逻辑
 </script>
 
-<style scoped>
+<style scoped lang="less">
 /* 画廊页样式 */
+.test {
+  box-shadow: 0 2px 12px 0 @primary !important;
+}
 </style>

src/views/Home.vue

@@ -14,16 +14,16 @@
         </div>
         <!-- 图片网格展示区域 -->
         <PerfectScrollbar class="" :style="navStyle">
-          <div class="navcard grid-cols-4 gap-6 p-12">
+          <div class="navcard grid-cols-5 gap-6 p-12">
             <d-card class="bg-[white] h-25" v-for="(item, index) in navlist" :key="index"
               @click="goExtra(item.menu_link)">
               <template #content>
-                <div class="mt-2 w-full flex flex-col items-center cursor-pointer">
+                <div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
                   <div :style="{ background: item.color }"
                     class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
                     {{ item.first }}</div>
                   <img v-else width="32" :src="item.menu_icon" @error="imgErr(index)" class="grid-image" />
-                  <div class="mt-1 w-full text-center">{{ item.menu_name || "" }}</div>
+                  <div class="mt-2 w-full text-center text-lg">{{ item.menu_name || "" }}</div>
                 </div>
               </template>
             </d-card>
@@ -70,13 +70,18 @@
       </div>
     </d-modal>
 
+    <!-- 音乐插件 -->
+    <aplayer></aplayer>
+
 
   </div>
 </template>
 
 <script setup lang="ts">
+import aplayer from '@/components/aplayer.vue'
 import homeSide from '@/components/homeSide.vue'
 import { getDictValue } from '@/util/index.ts'
+
 // 新增导航弹窗
 const visible: any = ref(false)
 const navData: any = reactive({

vite.config.ts

@@ -1,12 +1,13 @@
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
+import { resolve } from "path";
 import UnoCSS from "unocss/vite";
 import AutoImport from "unplugin-auto-import/vite";
+import { DevUiResolver } from "unplugin-vue-components/resolvers";
+import Components from "unplugin-vue-components/vite";
 import { defineConfig } from "vite";
 import vueDevTools from "vite-plugin-vue-devtools";
 import svgLoader from "vite-svg-loader";
-import Components from "unplugin-vue-components/vite";
-import { DevUiResolver } from "unplugin-vue-components/resolvers";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -37,4 +38,15 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        // additionalData: '@import "colorofchina/color.less";',
+        modifyVars: {
+          hack: `true; @import (reference) "${resolve("src/assets/index.less")}";`,
+        },
+        javascriptEnabled: true,
+      },
+    },
+  },
 });

yarn.lock

@@ -1194,6 +1194,15 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aplayer@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.npmmirror.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
+  integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
+  dependencies:
+    balloon-css "^0.5.0"
+    promise-polyfill "7.1.0"
+    smoothscroll "0.4.0"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -1223,6 +1232,11 @@ balanced-match@^1.0.2:
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+balloon-css@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.npmmirror.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+  integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
 binary-extensions@^2.0.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
@@ -3029,6 +3043,11 @@ pretty-ms@^9.2.0:
   dependencies:
     parse-ms "^4.0.0"
 
+promise-polyfill@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmmirror.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
+  integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -3228,6 +3247,11 @@ sirv@^3.0.1:
     mrmime "^2.0.0"
     totalist "^3.0.0"
 
+smoothscroll@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
+  integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
+
 source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"