6.12

package.json

@@ -12,7 +12,9 @@
     "core-js": "^3.8.3",
     "dayjs": "^1.11.10",
     "element-ui": "^2.15.14",
+    "masonry-layout": "^4.2.2",
     "vue": "^2.6.14",
+    "vue-lazyload": "^3.0.0",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/App.vue

@@ -1,21 +1,31 @@
 <template>
   <div id="app">
+   <main>
     <router-view />
     <trigger></trigger>
+   </main>
+   <footer>
+    <basePage></basePage>
+   </footer>
   </div>
 </template>
 
 <script>
 import trigger from '@/components/trigger.vue'
+import basePage from './components/base.vue'
 export default {
 
   components: {
-    trigger
+    trigger,
+    basePage
   }
 }
 </script>
 
 <style lang="less">
+*{
+  box-sizing: border-box;
+}
 /* 针对 WebKit 浏览器 */
 ::-webkit-scrollbar {
   width: 5px; /* 滚动条宽度 */

src/api/dailySentence.js

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export const fetchUser = () => {
+  return axios.get('https://api.oioweb.cn/api/SimpWords')
+}

src/api/jiwang.js

@@ -0,0 +1,9 @@
+import request from '../utils/request'
+
+export function getlist (id) {
+  return request({
+    url: `/list/${id}`,
+    method: 'get',
+    params: { id }
+  })
+}

src/assets/styles/home.less

@@ -1,135 +1,157 @@
 .box-shadow-mixin() {
-  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1),
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 -4px 8px rgba(0, 0, 0, 0.1);
-    -5px -10px 20px rgba(0, 0, 0, 0.2);
 }
 
 .box {
   background: url("../images/sub.jpg") no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
   background-size: cover;
   height: 100vh;
   margin-top: 0;
   position: relative;
+  margin-bottom: 50px;
 }
 
 .head {
-  width: 1200px;
+  max-width: 1200px;
-  // height: 2200px;
   margin: 20px auto;
+  display: flex;
+  justify-content: space-between;
+}
 
-  .head-left {
+.head-left {
-    width: 800px;
+  width: 70%;
-    // height: 2200px;
+  display: flex;
-    float: left;
+  flex-wrap: wrap;
+  gap: 20px;
 
-    .content-left {
+  .content-left {
-      width: 752px;
+    background-color: #fff;
-      background-color: #fff;
+    .box-shadow-mixin();
-      .box-shadow-mixin();
+    padding: 20px;
-      margin-bottom: 10px;
+    flex: 1 1 calc(50% - 20px);
-      padding: 20px;
+    box-sizing: border-box;
-      float: left;
+    position: relative;
-      position: relative;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 
-      .con-title-left {
+    &:hover {
-        a:hover {
+      transform: translateY(-5px);
-          color: #006cff;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-        }
+    }
-      }
+
+    .con-title-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
       img {
-        width: 200px;
+        width: 100%;
-        // height: 200px;
+        height: auto;
-        margin-top: 10px;
+        border-radius: 8px;
-        float: left;
+        margin-bottom: 15px;
+      }
+
+      h3 {
+        font-size: 1.5em;
+        margin-bottom: 10px;
+        text-align: center;
+
+        a {
+          color: #333;
+          text-decoration: none;
+
+          &:hover {
+            color: #007bff;
+          }
+        }
       }
 
       .time {
         color: gray;
-        font-size: 12px;
+        font-size: 0.9em;
-        position: absolute;
+        margin-top: auto;
-        right: 20px;
+        align-self: flex-end;
-        bottom: 20px;
+      }
+    }
+  }
+}
+
+.head-right {
+  width: 28%;
+
+  .content-right {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 12px;
+    .box-shadow-mixin();
+    padding: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+
+    .con-title-right {
+      h3 {
+        font-size: 1.5em;
+        margin-bottom: 20px;
+      }
+
+      .flex {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+
+        .el-tag {
+          cursor: pointer;
+          font-size: 1em;
+        }
       }
     }
   }
 
-  .head-right {
+  .popular-articles {
-    float: right;
+    background-color: #fff;
-    width: 390px;
+    border-radius: 12px;
-    // height: 2200px;
+    .box-shadow-mixin();
+    padding: 20px;
+    margin-bottom: 20px;
 
-    .develop {
+    h3 {
-      width: 390px;
+      font-size: 1.5em;
-      height: 215px;
       margin-bottom: 20px;
-      position: relative;
-      overflow: hidden;
-      transition: transform 0.5s ease;
-      border: 1px solid #eee;
-
-      img {
-        width: 390px;
-        height: 215px;
-        transition: transform 0.5s ease;
-      }
-
-      .title {
-        width: 390px;
-        height: 40px;
-        background-color: rgba(0, 0, 0, 0.5);
-        position: absolute;
-        bottom: 0;
-        z-index: 999;
-
-        p {
-          color: white;
-          line-height: 40px;
-          margin-left: 20px;
-        }
-      }
     }
 
-    .develop:hover img {
+    ul {
-      transform: scale(1.2);
+      list-style: none;
-      /* 鼠标经过时图片放大到原始大小的 1.2 倍 */
+      padding: 0;
-    }
 
-    .content-right {
+      li {
-      width: 390px;
+        margin-bottom: 10px;
-      height: 337px;
-      background-color: #fff;
 
-      .con-title-right {
+        a {
-        .box-shadow-mixin();
+          color: #333;
-        h3 {
+          text-decoration: none;
-          padding: 40px 0 0 40px;
-        }
 
-        p {
+          &:hover {
-          width: 50px;
+            color: #007bff;
-          margin: 10px 0 0 40px;
-          border: 1px solid black;
-          transition: all 0.5s;
-        }
-
-        .flex {
-          margin: 10px;
-
-          .el-tag {
-            margin: 5px;
-            cursor: pointer;
-            font-size: 16px;
           }
         }
       }
     }
+  }
 
-    .content-right:hover p {
+  .advertisement {
-      width: 80px;
+    background-color: #fff;
-      border: 1px solid red;
+    border-radius: 12px;
+    .box-shadow-mixin();
+    padding: 20px;
+
+    h3 {
+      font-size: 1.5em;
+      margin-bottom: 20px;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 8px;
     }
   }
 }

src/components/base.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="base"></div>
+</template>
+
+<script>
+export default {
+  name: 'basePage',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.base {
+  width: 100%;
+  height: 100px;
+  background-color: palegreen;
+}
+</style>

src/components/music.vue

@@ -1,411 +1,261 @@
 <template>
-  <div class="wrap">
+  <div
-    <!-- 播放器主体区域 -->
+    class="footer-player"
-    <div class="play_wrap" id="player">
+    :class="{ locked: isLocked }"
-      <div class="search_bar">
+    @mouseenter="showPlayer = true"
-        <img src="../assets/images/player_title.png" alt="" />
+    @mouseleave="showPlayer = isLocked ? true : false"
-        <!-- 搜索歌曲 -->
+  >
-        <input type="text"  autocomplete="off" v-model="query" placeholder="歌手名或歌曲名" @keyup.enter="searchMusic" />
+    <!-- 三角形按钮 -->
+    <div class="triangle"></div>
+    <!-- 播放器控制部分 -->
+    <div class="footer-player-container">
+      <div class="controls">
+        <button @click="prevSong" class="control-btn">&#9664;</button>
+        <button @click="togglePlayPause" class="control-btn">
+          <i v-if="isPlaying" class="fas fa-pause"></i>
+          <i v-else class="fas fa-play"></i>
+        </button>
+        <button @click="nextSong" class="control-btn">&#9654;</button>
       </div>
-      <div class="center_con">
+      <!-- 歌曲信息 -->
-        <!-- 搜索歌曲列表 -->
+      <div class="song-info">
-        <div class='song_wrapper'>
+        <img :src="currentSong.cover" class="cover" alt="Cover" />
-          <ul class="song_list">
+        <div class="details">
-            <li v-for="(item, index) in musicList" :key="index">
+          <h2>{{ currentSong.title }}</h2>
-              <a href="javascript:;" @click="playMusic(item.id)"></a>
+          <p>{{ currentSong.artist }}</p>
-              <b>{{ item.name }}</b>
-              <span v-if="item.mvid!=0" @click="playMV(item.mvid);play()"><i></i></span>
-            </li>
-          </ul>
-          <img src="../assets/images/line.png" class="switch_btn" alt="">
-        </div>
-        <!-- 歌曲信息容器 -->
-        <div class="player_con" :class="{playing:isPlaying}">
-          <img src="../assets/images/player_bar.png" class="play_bar" />
-          <!-- 黑胶碟片 -->
-          <img src="../assets/images/disc.png" class="disc autoRotate" />
-          <img :src="musicCover" class="cover autoRotate" />
         </div>
       </div>
-      <div class="audio_con">
+      <!-- 播放列表 -->
-        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
+      <div class="playlist">
-      </div>
+        <ul>
-      <div class="video_con" v-show="isShow" style="display: none;">
+          <li
-        <video :src="mvUrl" controls="controls"></video>
+            v-for="(song, index) in playlist"
-        <div class="mask" @click="hide"></div>
+            :key="index"
+            @click="playSong(index)"
+          >
+            <span>{{ song.title }}</span>
+            <span>{{ song.artist }}</span>
+          </li>
+        </ul>
       </div>
+      <!-- 锁定按钮 -->
+      <button @click="toggleLock" class="lock-btn">
+        <i :class="isLocked ? 'fas fa-lock' : 'fas fa-lock-open'"></i>
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
 export default {
-  name: 'musIc',
+  name: 'musicPage',
   data () {
     return {
-      // 查询关键字
+      searchQuery: '',
-      query: '',
+      playlist: [
-      // 歌曲数组
+        {
-      musicList: [],
+          title: 'Song 1',
-      // 歌曲地址
+          artist: 'Artist 1',
-      musicUrl: '',
+          cover: require('@/assets/images/789.jpg')
-      // 歌曲封面
+        },
-      musicCover: require('@/assets/images/musicLogo.png'),
+        {
-      // 歌曲评论
+          title: 'Song 2',
-      hotComments: [],
+          artist: 'Artist 2',
-      // 动画播放状态
+          cover: require('@/assets/images/789.jpg')
+        },
+        {
+          title: 'Song 3',
+          artist: 'Artist 3',
+          cover: require('@/assets/images/789.jpg')
+        }
+      ],
+      currentSongIndex: 0,
       isPlaying: false,
-      // 遮罩层的显示状态
+      showPlayer: false,
-      isShow: false,
+      isLocked: false
-      // mv地址
+    }
-      mvUrl: ''
+  },
+  computed: {
+    currentSong () {
+      return this.playlist[this.currentSongIndex]
     }
   },
   methods: {
-    // 歌曲搜索
+    searchMusic () {
-    async searchMusic () {
+      // 实现音乐搜索功能
-      const that = this
-      axios.get('https://autumnfish.cn/search' + this.query).then(
-        function (response) {
-          // console.log(response);
-          that.musicList = response.data.result.songs
-          console.log(response.data.result.songs)
-        }
-      )
     },
-    // 歌曲播放
+    playSong (index) {
-    playMusic (musicId) {
+      this.currentSongIndex = index
-      const that = this
+      this.isPlaying = true // 切换歌曲时自动播放
-      that.musicUrl = 'http://music.163.com/song/media/outer/url?id=' + musicId + '.mp3'
-      // 歌曲详情获取
-      axios.get('https://song.ddmt.top/cloudmusic/?type=detail&id=' + musicId).then(
-        function (response) {
-          console.log(response)
-          // console.log(response.data.songs[0].al.picUrl);
-          that.musicCover = response.data.songs[0].al.picUrl
-        })
-      // 歌曲评论获取
-      axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(
-        function (response) {
-          // console.log(response);
-          // console.log(response.data.hotComments);
-          that.hotComments = response.data.hotComments
-        }
-      )
     },
-    // 歌曲播放
+    togglePlayPause () {
-    play () {
+      this.isPlaying = !this.isPlaying
-      this.isPlaying = true
     },
-    // 歌曲暂停
+    prevSong () {
-    pause () {
+      this.currentSongIndex =
-      this.isPlaying = false
+        (this.currentSongIndex - 1 + this.playlist.length) %
+        this.playlist.length
+      this.isPlaying = true // 切换歌曲时自动播放
     },
-    // 播放mv
+    nextSong () {
-    playMV (mvid) {
+      this.currentSongIndex =
-      const that = this
+        (this.currentSongIndex + 1) % this.playlist.length
-      axios.get('https://autumnfish.cn/mv/url?id=' + mvid).then(
+      this.isPlaying = true // 切换歌曲时自动播放
-        function (response) {
-          // console.log(response);
-          console.log(response.data.data.url)
-          that.isShow = true
-          that.mvUrl = response.data.data.url
-        }
-
-      )
     },
-    // 隐藏
+    toggleLock () {
-    hide () {
+      this.isLocked = !this.isLocked
-      this.isShow = false
     }
   }
-
 }
 </script>
 
-<style lang="less" scoped>
+<style scoped>
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
 
-.wrap {
+body {
-  width: 600px;
+  margin: 0;
-  height: 544px;
+  font-family: "Arial", sans-serif;
- margin: 60px auto;
+  background: #f0f0f0;
- clear: both;
+  color: #333;
+  position: relative;
 }
 
-.play_wrap {
+.triangle {
-  width: 600px;
+  position: absolute;
-  height: 544px;
+  right: 0;
+  bottom: 70px;
+  width: 0;
+  height: 0;
+
+  border: 0 solid transparent;
+  border-right: 10px solid transparent;
+  border-left: 10px solid transparent;
+  border-bottom: 12px solid #333;
 }
 
-.search_bar {
+.footer-player {
-  height: 60px;
+  position: fixed;
-  background-color: #1eacda;
+  bottom: -60px; /* 初始隐藏位置 */
-  border-top-left-radius: 4px;
+  left: 0;
-  border-top-right-radius: 4px;
+  width: 100%;
+  z-index: 9999999999999999;
+  background: #333;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
+  transition: bottom 0.3s ease-in-out;
+}
+
+.footer-player:hover {
+  bottom: 0; /* 鼠标经过时显示整个播放器 */
+}
+
+.footer-player:hover .triangle{
+  position: absolute;
+  bottom: 70px;
+  right: 0;
+}
+
+.footer-player.locked {
+  bottom: 0; /* 锁定状态下始终显示 */
+}
+
+.footer-player-container {
+  width: 80%;
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.controls {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  position: relative;
-  z-index: 11;
 }
 
-.search_bar img {
+.control-btn {
-  margin-left: 23px;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 24px;
+  margin: 0 10px;
+  cursor: pointer;
+  transition: transform 0.3s;
 }
 
-.search_bar input {
+.control-btn:hover {
-  margin-right: 23px;
+  transform: scale(1.2);
-  width: 296px;
-  height: 34px;
-  border-radius: 17px;
-  border: 0px;
-  background: url("../assets/images/zoom.png") 265px center no-repeat
-    rgba(255, 255, 255, 0.45);
-  text-indent: 15px;
-  outline: none;
 }
 
-.center_con {
+.song-info {
-  height: 435px;
-  background-color: rgba(255, 255, 255, 0.5);
   display: flex;
-  position: relative;
+  align-items: center;
 }
 
-.song_wrapper {
+.cover {
-  width: 200px;
+  width: 50px;
-  height: 435px;
+  height: 50px;
-  box-sizing: border-box;
+  border-radius: 10px;
+  margin-right: 20px;
+}
+
+.details h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.details p {
+  margin: 5px 0 0;
+  color: #ccc;
+}
+
+.playlist {
+  background: #444;
+  border-radius: 10px;
   padding: 10px;
-  list-style: none;
+  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 1;
-}
-
-.song_stretch {
-  width: 600px;
-}
-
-.song_list {
-  width: 100%;
   overflow-y: auto;
-  overflow-x: hidden;
+  max-height: 50px;
-  height: 100%;
-}
-.song_list::-webkit-scrollbar {
   display: none;
 }
 
-.song_list li {
+.footer-player:hover .playlist,
-  font-size: 12px;
+.footer-player.locked .playlist {
-  color: #333;
-  height: 40px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  width: 580px;
-  padding-left: 10px;
-}
-
-.song_list li:nth-child(odd) {
-  background-color: rgba(240, 240, 240, 0.3);
-}
-
-.song_list li a {
   display: block;
-  width: 17px;
-  height: 17px;
-  background-image: url("../assets/images/play.png");
-  background-size: 100%;
-  margin-right: 5px;
-  box-sizing: border-box;
 }
 
-.song_list li b {
+.playlist ul {
-  font-weight: normal;
-  width: 122px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.song_stretch .song_list li b {
-  width: 200px;
-}
-
-.song_stretch .song_list li em {
-  width: 150px;
-}
-
-.song_list li span {
-  width: 23px;
-  height: 17px;
-  margin-right: 50px;
-}
-.song_list li span i {
-  display: block;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  background: url("../assets/images/table.png") left -48px no-repeat;
-}
-
-.song_list li em,
-.song_list li i {
-  font-style: normal;
-  width: 100px;
-}
-
-.player_con {
-  width: 400px;
-  height: 435px;
-  position: absolute;
-  left: 200px;
-  top: 0px;
-}
-
-.player_con2 {
-  width: 400px;
-  height: 435px;
-  position: absolute;
-  left: 200px;
-  top: 0px;
-}
-
-.player_con2 video {
-  position: absolute;
-  left: 20px;
-  top: 30px;
-  width: 355px;
-  height: 265px;
-}
-
-.disc {
-  position: absolute;
-  left: 73px;
-  top: 60px;
-  z-index: 9;
-}
-.cover {
-  position: absolute;
-  left: 125px;
-  top: 112px;
-  width: 150px;
-  height: 150px;
-  border-radius: 75px;
-  z-index: 8;
-}
-
-.audio_con {
-  height: 50px;
-  background-color: #f1f3f4;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.myaudio {
-  width: 600px;
-  height: 40px;
-  margin-top: 5px;
-  outline: none;
-  background-color: #f1f3f4;
-}
-/* 旋转的动画 */
-@keyframes Rotate {
-  from {
-    transform: rotateZ(0);
-  }
-  to {
-    transform: rotateZ(360deg);
-  }
-}
-/* 旋转的类名 */
-.autoRotate {
-  animation-name: Rotate;
-  animation-iteration-count: infinite;
-  animation-play-state: paused;
-  animation-timing-function: linear;
-  animation-duration: 5s;
-}
-/* 是否正在播放 */
-.player_con.playing .disc,
-.player_con.playing .cover {
-  animation-play-state: running;
-}
-
-.play_bar {
-  position: absolute;
-  left: 200px;
-  top: -10px;
-  z-index: 10;
-  transform: rotate(-25deg);
-  transform-origin: 12px 12px;
-  transition: 1s;
-}
-/* 播放杆 转回去 */
-.player_con.playing .play_bar {
-  transform: rotate(0);
-}
-/* 搜索历史列表 */
-.search_history {
-  position: absolute;
-  width: 296px;
-  overflow: hidden;
-  background-color: rgba(255, 255, 255, 0.3);
   list-style: none;
-  right: 23px;
+  padding: 0;
-  top: 50px;
+  margin: 0;
-  box-sizing: border-box;
-  padding: 10px 20px;
-  border-radius: 17px;
-}
-.search_history li {
-  line-height: 24px;
-  font-size: 12px;
-  cursor: pointer;
-}
-.switch_btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-}
-.right_line {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.video_con video {
-  position: fixed;
-  width: 600px;
-  height: 546px;
-  left: 50%;
-  top: 50%;
-  margin-top: -273px;
-  transform: translateX(-50%);
-  z-index: 990;
-}
-.video_con .mask {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 980;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-.video_con .shutoff {
-  position: fixed;
-  width: 40px;
-  height: 40px;
-  background: url("../assets/images/shutoff.png") no-repeat;
-  left: 50%;
-  margin-left: 400px;
-  margin-top: -273px;
-  top: 50%;
-  z-index: 995;
 }
 
+.playlist li {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  /* transition: background 0.3s; */
+}
+
+.playlist li:hover {
+  background: #555;
+}
+
+.lock-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+  transition: transform 0.3s;
+  margin-left: 20px;
+}
+
+.lock-btn:hover {
+  transform: scale(1.2);
+}
 </style>

src/components/navigationBar.vue

@@ -2,50 +2,52 @@
   <div class="nav" :class="{ fixed: isFixed }">
     <div class="navList">
       <p>
-        <router-link to="/home">墨思留痕</router-link>
+        <router-link to="/">墨思留痕</router-link>
       </p>
       <ul class="nackground">
         <li>
-          <router-link to="/home" exact-active-class="active">首页</router-link>
+          <router-link to="/" exact-active-class="active">首页</router-link>
         </li>
         <li>
-          <router-link to="/labelpage" exact-active-class="active"
+          <router-link to="/labelpage" exact-active-class="active">标签</router-link>
-            >标签</router-link
-          >
         </li>
         <li>
-          <router-link to="/subject" exact-active-class="active"
+          <router-link to="/listPage" exact-active-class="active">专题</router-link>
-            >专题</router-link
-          >
         </li>
         <li>
-          <router-link to="/messageboard" exact-active-class="active"
+          <router-link to="/messageboard" exact-active-class="active">留言板</router-link>
-            >留言板</router-link
-          >
         </li>
         <li>
-          <router-link to="/interlinkage" exact-active-class="active"
+          <router-link to="/photoGallery" exact-active-class="active">照片集</router-link>
-            >友情链接</router-link
-          >
         </li>
         <li>
-          <router-link to="/about" exact-active-class="active"
+          <router-link to="/interlinkage" exact-active-class="active">友情链接</router-link>
-            >个人中心</router-link
+        </li>
-          >
+        <li>
+          <router-link to="/about" exact-active-class="active">个人中心</router-link>
         </li>
       </ul>
-      <div class="search">
+      <div class="search" @click.stop>
         <el-input
           v-model="input"
           placeholder="请输入内容"
           clearable
           style="width: 230px; margin-right: 10px"
+          @keyup.enter="performSearch"
         ></el-input>
-        <el-button icon="el-icon-search" circle></el-button>
+        <el-button icon="el-icon-search" circle @click="performSearch"></el-button>
         <el-avatar style="margin-left: 10px; position: absolute; top: 10px">
           <router-link to="/about">user</router-link>
         </el-avatar>
         <div class="out" @click="handleOut">退出</div>
+        <div v-if="resultsVisible" class="search-results" @click.stop>
+          <ul v-if="searchResults.length">
+            <li v-for="result in searchResults" :key="result.id">
+              <router-link :to="result.link">{{ result.title }}</router-link>
+            </li>
+          </ul>
+          <p v-else >暂无内容</p>
+        </div>
       </div>
     </div>
   </div>
@@ -56,33 +58,59 @@ export default {
   data () {
     return {
       input: '',
-      Search: 'Search',
+      searchResults: [],
-      isFixed: false // 导航栏是否固定的数据属性
+      isFixed: false, // 导航栏是否固定的数据属性
+      resultsVisible: false // 控制搜索结果显示/隐藏的属性
     }
   },
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('click', this.hideResults)
   },
   beforeDestroy () {
     window.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('click', this.hideResults)
   },
   methods: {
     handleScroll () {
       const scrollTop = window.scrollY || document.documentElement.scrollTop
       this.isFixed = scrollTop > 60
     },
+    // 执行搜索
+    performSearch () {
+      if (!this.input.trim()) {
+        this.$message({
+          message: '请输入内容',
+          type: 'warning'
+        })
+        return
+      }
+
+      // 模拟搜索逻辑，这里你可以调用实际的API进行搜索
+      const allItems = [
+        { id: 1, title: '首页内容', link: '/home' },
+        { id: 2, title: '标签内容', link: '/labelpage' },
+        { id: 3, title: '专题内容', link: '/listPage' },
+        { id: 4, title: '留言板内容', link: '/messageboard' },
+        { id: 5, title: '友情链接内容', link: '/interlinkage' },
+        { id: 6, title: '个人中心内容', link: '/about' }
+      ]
+      this.searchResults = allItems.filter(item =>
+        item.title.includes(this.input)
+      )
+      this.resultsVisible = true
+    },
     // 退出
     handleOut () {
-      // 清除localStorage中的token
+      this.$router.push({ path: '/login' })
-      localStorage.removeItem('user-token')
-      // 清除Vuex中的状态（如果有的话）
-      this.$store.commit('logout')
-      // 重定向到登录页面
-      this.$router.push({ path: '/' })
       this.$message({
         message: '退出成功',
         type: 'success'
       })
+    },
+    // 隐藏搜索结果
+    hideResults () {
+      this.resultsVisible = false
     }
   }
 }
@@ -174,7 +202,7 @@ export default {
 
   .out {
     position: absolute;
-    right: -50px;
+    right: -70px;
     top: 15px;
     color: #006cff;
     width: 50px;
@@ -189,5 +217,41 @@ export default {
     color: #fff;
     background-color: #006cff;
   }
+
+  .search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: #fff;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        padding: 8px 16px;
+
+        a {
+          text-decoration: none;
+          color: #333;
+        }
+
+        a:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+
+    p {
+      font-size: 14px;
+      margin-bottom: 15px;
+      color: #333;
+    }
+  }
 }
 </style>

src/components/shareBtn.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="share-btn">
+    <button @click="toggleShareOptions">分享</button>
+    <div v-if="showOptions" class="share-options">
+      <button @click="sharePage">分享页面</button>
+      <button @click="copyLink">复制链接</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'shareBtn',
+  data () {
+    return {
+      showOptions: false
+    }
+  },
+  methods: {
+    toggleShareOptions () {
+      this.showOptions = !this.showOptions
+    },
+    async sharePage () {
+      if (navigator.share) {
+        try {
+          await navigator.share({
+            title: document.title,
+            url: window.location.href
+          })
+          this.$message({
+            message: '分享成功',
+            type: 'success'
+          })
+        } catch (error) {
+          this.$message({
+            message: '分享失败',
+            type: 'error'
+          })
+        }
+      } else {
+        this.copyLink()
+      }
+    },
+    copyLink () {
+      const url = window.location.href
+      try {
+        navigator.clipboard.writeText(url).then(() => {
+          this.$message({
+            message: '链接已复制',
+            type: 'success'
+          })
+        })
+      } catch (err) {
+        this.$message({
+          message: '复制失败',
+          type: 'error'
+        })
+      }
+    }
+  }
+}
+</script>
+
+  <style lang="less" scoped>
+.share-btn {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 999;
+
+  button {
+    background-color: #42b983;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-bottom: 5px;
+  }
+
+  .share-options {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 45px;
+    right: 0;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    button {
+      background-color: #42b983;
+      color: #fff;
+      border: none;
+      padding: 10px;
+      border-radius: 0;
+      cursor: pointer;
+
+      &:first-child {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      &:hover {
+        background-color: #357a38;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -1,30 +1,18 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Login from '@/views/login'
 import Home from '../views/Home.vue'
-// import CSSContent from '@/views/CSS3/index.vue'
+// import store from '@/store' // Vuex store
-// import cyuyan from '@/views/Cyuyan/index.vue'
+import NoteDetail from '@/views/particulars/paiListPage'
-// import diangong from '@/views/diangong/index.vue'
-// import HTMLContent from '@/views/HTML5/index.vue'
-// import javaContent from '@/views/java/index.vue'
-// import jqueryContent from '@/views/jQuery/index.vue'
-// import LinuxContent from '@/views/linuxxitong/index.vue'
-// import MySQLContent from '@/views/MySQLjishu/index.vue'
-// import NodeContent from '@/views/Node/index.vue'
-// import PHPContent from '@/views/PHPsheji/index.vue'
-// import pythonContent from '@/views/python/index.vue'
-// import vsContent from '@/views/vscodejis/index.vue'
-// import VueContent from '@/views/Vue/index.vue'
-// import jiwang from '@/views/jiwang/jiwang.vue'
-// import jsContent from '@/views/JavaScript/index.vue'
-import NoteDetail from '@/views/particulars/list'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/home',
+    path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    meta: { requiresAuth: true }
   },
   {
     path: '/about',
@@ -37,9 +25,9 @@ const routes = [
     component: (resolve) => require(['@/views/labelPage'], resolve)
   },
   {
-    path: '/subject',
+    path: '/listPage',
-    name: 'subject',
+    name: 'listPage',
-    component: (resolve) => require(['@/views/subject'], resolve)
+    component: (resolve) => require(['@/views/subject/listPage'], resolve)
   },
   {
     path: '/messageboard',
@@ -47,96 +35,31 @@ const routes = [
     component: (resolve) => require(['@/views/messageBoard'], resolve)
   },
   {
-    path: '/',
+    path: '/photoGallery',
+    name: 'photoGallery',
+    component: (resolve) => require(['@/views/photoGallery'], resolve)
+  },
+  {
+    path: '/login',
     name: 'Login',
-    component: (resolve) => require(['@/views/login'], resolve)
+    component: Login
   },
   {
     path: '/TopicDetails',
     name: 'TopicDetails',
-    component: (resolve) => require(['@/views/particulars/TopicDetails'], resolve)
+    component: (resolve) => require(['@/views/subject/TopicDetails'], resolve)
   },
   {
     path: '/interlinkage',
     name: 'interlinkage',
     component: (resolve) => require(['@/views/interlinkage'], resolve)
   },
-  // {
+  { path: '/paiListPage/:id', component: NoteDetail },
-  //   path: '/jiwang',
+  {
-  //   name: 'jiwang',
+    path: '/detailPage',
-  //   component: jiwang
+    name: 'detailPage',
-  // },
+    component: (resolve) => require(['@/views/particulars/detailPage'], resolve)
-  // {
+  }
-  //   path: '/jsContent',
-  //   name: 'jsContent',
-  //   component: jsContent
-  // },
-  // {
-  //   path: '/CSSContent',
-  //   name: 'CSSContent',
-  //   component: CSSContent
-  // },
-  // {
-  //   path: '/cyuyan',
-  //   name: 'cyuyan',
-  //   component: cyuyan
-  // },
-  // {
-  //   path: '/diangong',
-  //   name: 'diangong',
-  //   component: diangong
-  // },
-  // {
-  //   path: '/HTMLContent',
-  //   name: 'HTMLContent',
-  //   component: HTMLContent
-  // },
-  // {
-  //   path: '/javaContent',
-  //   name: 'javaContent',
-  //   component: javaContent
-  // },
-  // {
-  //   path: '/jqueryContent',
-  //   name: 'jqueryContent',
-  //   component: jqueryContent
-  // },
-  // {
-  //   path: '/LinuxContent',
-  //   name: 'LinuxContent',
-  //   component: LinuxContent
-  // },
-  // {
-  //   path: '/MySQLContent',
-  //   name: 'MySQLContent',
-  //   component: MySQLContent
-  // },
-  // {
-  //   path: '/NodeContent',
-  //   name: 'NodeContent',
-  //   component: NodeContent
-  // },
-  // {
-  //   path: '/PHPContent',
-  //   name: 'PHPContent',
-  //   component: PHPContent
-  // },
-  // {
-  //   path: '/vsContent',
-  //   name: 'vsContent',
-  //   component: vsContent
-  // },
-  // {
-  //   path: '/VueContent',
-  //   name: 'VueContent',
-  //   component: VueContent
-  // },
-  // {
-  //   path: '/pythonContent',
-  //   name: 'pythonContent',
-  //   component: pythonContent
-  // },
-  { path: '/list/:id', component: NoteDetail }
 ]
 
 const router = new VueRouter({
@@ -151,4 +74,16 @@ const router = new VueRouter({
   routes
 })
 
+// router.beforeEach((to, from, next) => {
+//   const isAuthenticated = store.getters.isAuthenticated
+
+//   if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+//     next('/login')
+//   } else if (to.path === '/login' && isAuthenticated) {
+//     next('/')
+//   } else {
+//     next()
+//   }
+// })
+
 export default router

src/store/index.js

@@ -1,3 +1,4 @@
+// src/store/index.js
 import Vue from 'vue'
 import Vuex from 'vuex'
 
@@ -5,34 +6,22 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    user: null, // 初始用户状态为null
+    isAuthenticated: false
-    token: null, // 初始token状态为null
-    isLoggedIn: false // 初始登录状态为false
-  },
-  getters: {
   },
   mutations: {
-    setLoggedIn (state, isLoggedIn) {
+    setAuthenticated (state, status) {
-      state.isLoggedIn = isLoggedIn
+      state.isAuthenticated = status
-    },
-    setToken (state, token) {
-      state.token = token
-    },
-    setUser (state, user) {
-      state.user = user
-    },
-    logout (state) {
-      // 清除用户信息
-      state.token = null
-      state.user = null
-      // ... 清除其他与用户相关的状态
     }
   },
   actions: {
-    async setUser ({ commit }, user) {
+    login ({ commit }) {
-      commit('setLoggedIn', user)
+      commit('setAuthenticated', true)
+    },
+    logout ({ commit }) {
+      commit('setAuthenticated', false)
     }
   },
-  modules: {
+  getters: {
+    isAuthenticated: state => state.isAuthenticated
   }
 })

src/views/AboutUs.vue

@@ -2,130 +2,447 @@
   <div class="AboutUs">
     <navigationBar />
     <div class="box">
-      <div class="AboutUs-left">
+      <el-tabs type="border-card">
-        <h3>个人信息</h3>
-        <hr />
-        <div class="AboutUs-img">
-          <img src="../assets/images/sub.jpg" alt="" />
-        </div>
-        <p v-for="(item, index) in users" :key="index">
-          {{ item.name }}
-          <span>{{ item.date }}</span>
-        </p>
-      </div>
-      <div class="AboutUs-right">
-        <p @click="isShow = true">切换背景</p>
-      </div>
 
+        <el-tab-pane label="个人信息">
+          <div class="AboutUs-left">
+            <div class="AboutUs-img">
+              <img src="../assets/images/sub.jpg" alt="用户头像" />
+            </div>
+            <div class="user-info">
+              <div
+                v-for="(item, index) in users"
+                :key="index"
+                class="user-item"
+              >
+                <p class="user-name">{{ item.name }}</p>
+                <p class="user-date">{{ item.date }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="AboutUs-right">
+            <h3>其他操作</h3>
+            <hr />
+            <p @click="toggleBackground">切换背景</p>
+            <p>帮助与反馈</p>
+          </div>
+          <trigger :visible.sync="isShow"></trigger>
+        </el-tab-pane>
+
+        <el-tab-pane label="待办事项">
+          <div class="wtbDone">
+            <input type="text" v-model="newTodo" placeholder="请输入待办事项" />
+            <button class="handleAdd" @click="handleAdd">添加</button>
+            <ul>
+              <li
+                v-for="(todo, index) in todos"
+                :key="index"
+                :class="{ selected: index === selectedTodoIndex }"
+                @click="selectTodo(index)"
+              >
+                {{ todo }}
+              </li>
+            </ul>
+            <div class="wtbDone-footer">
+              <button @click="handleDelete">删除</button>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="基本设置">
+          <div class="basic-settings">
+            <!-- 左边内容 -->
+            <div class="left-section">
+              <!-- 昵称 -->
+              <div class="form-item">
+                <label for="nickname">昵称：</label>
+                <input
+                  type="text"
+                  id="nickname"
+                  v-model="nickname"
+                  placeholder="请输入昵称"
+                />
+              </div>
+              <!-- 介绍 -->
+              <div class="form-item">
+                <label for="intro">介绍：</label>
+                <input id="intro" v-model="intro" placeholder="请输入介绍" />
+              </div>
+              <!-- 性别 -->
+              <div class="form-item">
+                <label>性别：</label>
+                <input type="radio" v-model="gender" value="male" />男
+                <input
+                  type="radio"
+                  v-model="gender"
+                  value="female"
+                  style="margin-left: 10px"
+                />女
+              </div>
+              <!-- 生日 -->
+              <div class="form-item">
+                <label for="birthday">生日：</label>
+                <input type="date" id="birthday" v-model="birthday" />
+              </div>
+              <!-- 地区选择 -->
+              <div class="form-item">
+                <label for="region">地区：</label>
+                <select id="region" v-model="region">
+                  <option value="region1">地区1</option>
+                  <option value="region2">地区2</option>
+                  <option value="region3">地区3</option>
+                </select>
+
+                <select id="region" v-model="city" style="margin-left: 10px">
+                  <option value="city1">地区1</option>
+                  <option value="city2">地区2</option>
+                  <option value="city3">地区3</option>
+                </select>
+              </div>
+              <!-- 保存按钮 -->
+              <div class="form-item">
+                <button class="save-btn" @click="saveUserInfo">保存</button>
+              </div>
+            </div>
+            <!-- 右边内容 -->
+            <div class="right-section">
+              <div class="avatar-section">
+                <!-- 头像显示 -->
+                <img :src="avatar" alt="用户头像" class="avatar" />
+                <!-- 更换头像按钮 -->
+                <span class="change-avatar-btn" @click="changeAvatar"
+                  >更换头像</span
+                >
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+      </el-tabs>
     </div>
-    <trigger :visible.sync="isShow"></trigger>
+
     <musIc />
   </div>
 </template>
 
 <script>
+import navigationBar from '@/components/navigationBar.vue'
 import trigger from '@/components/trigger.vue'
+
 export default {
   data () {
     return {
       isShow: false,
+      nickname: '',
+      intro: '',
+      gender: '',
+      birthday: '',
+      region: '',
+      city: '',
+      avatar: require('@/assets/images/789.jpg'), // 默认头像地址
       users: [
         {
-          name: '用户名称',
+          name: '当前用户名',
-          date: '创建日期'
+          date: '2024-01-01'
-        },
-        {
-          name: '用户名称',
-          date: '创建日期'
         }
       ],
-      dialogVisible: false
+      newTodo: '',
+      todos: [], // 待办事项列表
+      selectedTodoIndex: null // 选中的待办事项索引
     }
   },
   components: {
+    navigationBar,
     trigger
+  },
+  methods: {
+    toggleBackground () {
+      this.isShow = true
+    },
+    saveUserInfo () {
+      // 保存用户信息的逻辑
+      this.$message.success('保存成功')
+    },
+    changeAvatar () {
+      // 更换头像的逻辑
+      this.$message.success('更换成功')
+    },
+    // 添加按钮
+    handleAdd () {
+      if (this.newTodo.trim() !== '') {
+        this.todos.push(this.newTodo.trim())
+        this.newTodo = ''
+        this.$message.success('添加成功')
+      } else {
+        this.$message.error('请输入待办事项')
+      }
+    },
+    // 选择待办事项
+    selectTodo (index) {
+      this.selectedTodoIndex = index
+    },
+    // 删除按钮
+    handleDelete () {
+      if (this.selectedTodoIndex !== null) {
+        this.todos.splice(this.selectedTodoIndex, 1)
+        this.selectedTodoIndex = null
+        this.$message.success('删除成功')
+      } else {
+        this.$message.error('请选择要删除的待办事项')
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.wtbDone {
+  width: 400px;
+  height: 500px;
+  border: 1px solid black;
+  margin: auto;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
-.AboutUs {
+  input {
-  .box {
+    width: 300px;
-    width: 1220px;
+    height: 40px;
-    // height: 500px;
+    padding: 5px;
-    margin: 100px auto;
+    margin-top: 20px;
+    outline: none;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+
+    &:focus {
+      border: 1px solid #007bff;
+    }
+  }
   }
 
-  .AboutUs-left {
+  ul {
-    width: 500px;
+    list-style: none;
-    height: 500px;
+    padding: 0;
-    float: left;
+    width: 350px;
-    background-color: #fff;
+    height: 310px;
-    margin-right: 20px;
+    margin: 20px auto;
-    border-radius: 10px;
+    overflow-y: scroll;
-    box-shadow: 0 0 10px #ccc;
+    border: 1px solid #ddd;
-    box-sizing: border-box;
+    border-radius: 4px;
 
-    h3 {
+    li {
-      height: 40px;
-      line-height: 40px;
-      font-size: 20px;
-      color: #333;
-      margin: 0 0 5px 20px;
-    }
-
-    .AboutUs-img {
       width: 100%;
-      height: 180px;
-      margin-top: 10px;
-
-      img {
-        width: 100px;
-        height: 100px;
-        border-radius: 50%;
-        margin-top: 8%;
-        margin-left: 38%;
-        cursor: pointer;
-      }
-    }
-
-    p {
       height: 40px;
       line-height: 40px;
-      font-size: 18px;
+      text-align: center;
-      color: #333;
+      background-color: #f5f5f5;
-      margin: 10px 0 0 20px;
+      border-bottom: 1px solid #ddd;
-      border-bottom: 1px solid #ccc;
+      cursor: pointer;
-      span {
+      transition: background-color 0.3s;
-        font-size: 16px;
+
-        margin-right: 20px;
+      &:hover {
-        float: right;
+        background-color: #e6e6e6;
+      }
+
+      &.selected {
+        background-color: #d3e5ff;
       }
     }
   }
-  .AboutUs-right {
-    width: 700px;
-    height: 500px;
-    background-color: #fff;
-    float: left;
-    border-radius: 10px;
-    box-shadow: 0 0 10px #ccc;
-    box-sizing: border-box;
 
-    p{
+  .wtbDone-footer {
-      height: 40px;
+    display: flex;
-      line-height: 40px;
+    justify-content: space-between;
-      font-size: 18px;
+    align-items: center;
-      color: #333;
+    margin-top: 20px;
-      margin: 10px 0 0 20px;
+    padding: 10px;
-      border-bottom: 1px solid #ccc;
+  }
-      cursor: pointer;
 
-      &:hover{
+  button {
-        color: #409EFF;
+    width: 70px;
-      }
+    height: 40px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    margin-left: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: #0056b3;
     }
   }
+
+.box {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin: 80px auto;
+  max-width: 800px;
+}
+
+.AboutUs-left {
+  text-align: left;
+}
+
+.AboutUs-right {
+  text-align: left;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 20px 0;
+}
+
+.AboutUs-img {
+  text-align: center;
+}
+
+.AboutUs-img img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin-bottom: 20px;
+  border: 4px solid #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-info {
+  margin-bottom: 20px;
+}
+
+.user-name {
+  color: #333;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.user-date {
+  color: #666;
+  font-size: 14px;
+}
+
+.AboutUs-right p {
+  color: #007bff;
+  font-size: 18px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.AboutUs-right p:hover {
+  text-decoration: underline;
+}
+
+.el-tabs {
+  text-align: left;
+}
+
+.basic-settings {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.left-section {
+  width: 50%;
+  padding-right: 20px;
+}
+
+.right-section {
+  width: 40%;
+  padding-left: 20px;
+}
+
+.form-item {
+  margin-bottom: 20px;
+
+  #nickname {
+    width: 250px;
+    padding: 5px;
+    outline: none;
+    height: 30px;
+  }
+
+  #intro {
+    width: 250px;
+    padding: 5px;
+    outline: none;
+    height: 100px;
+  }
+}
+
+.form-item label {
+  display: inline-block;
+  font-weight: bold;
+}
+
+#region {
+  outline: none;
+  width: 120px;
+  height: 30px;
+  padding: 5px;
+}
+
+.input-field {
+  width: calc(100% - 80px);
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.save-btn {
+  padding: 8px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-left: 120px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+
+.avatar-section {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background-color: palegreen;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.change-avatar-btn {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #218838;
+  }
 }
 </style>

src/views/Home.vue

@@ -4,35 +4,20 @@
     <div class="box"></div>
     <div class="head">
       <div class="head-left">
-
         <div class="content-left" v-for="(item, index) in contList" :key="index">
           <div class="con-title-left">
+            <img :src="item.img" />
             <h3>
               <router-link to="/">{{ item.title }}</router-link>
             </h3>
-            <img :src="item.img" />
             <p class="time">{{ item.date }}</p>
           </div>
         </div>
       </div>
       <div class="head-right">
-        <div class="develop">
-          <img src="../assets/images/789.jpg" alt="" />
-          <div class="title">
-            <p>123</p>
-          </div>
-        </div>
-        <div class="develop">
-          <img src="../assets/images/789.jpg" alt="" />
-          <div class="title">
-            <p>123</p>
-          </div>
-        </div>
-
         <div class="content-right">
           <div class="con-title-right">
             <h3>标签云</h3>
-            <p></p>
             <div class="flex gap-2 mt-4">
               <el-tag
                 v-for="item in items"
@@ -46,6 +31,18 @@
             </div>
           </div>
         </div>
+        <div class="popular-articles">
+          <h3>热门文章</h3>
+          <ul>
+            <li v-for="(article, index) in popularArticles" :key="index">
+              <router-link to="/">{{ article.title }}</router-link>
+            </li>
+          </ul>
+        </div>
+        <div class="advertisement">
+          <h3>广告</h3>
+          <img src="../assets/images/table.png" alt="广告" />
+        </div>
       </div>
     </div>
     <el-backtop :right="100" :bottom="100" />
@@ -54,103 +51,71 @@
 </template>
 
 <script>
-// import { getHome } from '@/api/home'
 export default {
   name: 'HoMe',
   data () {
     return {
-      slideList: [
-        { img: require('@/assets/images/789.jpg') },
-        { img: require('@/assets/images/899.jpg') },
-        { img: require('@/assets/images/789.jpg') }
-      ],
       currentIndex: 0, // 当前显示的图片的索引
       timer: null, // 自动切换的定时器
       contList: [
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题1',
           date: '2024-04-24'
         },
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题2',
           date: '2024-04-24'
         },
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题3',
           date: '2024-04-24'
         },
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题3',
           date: '2024-04-24'
         },
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题3',
           date: '2024-04-24'
         },
         {
           img: require('@/assets/images/789.jpg'),
-          title: '',
+          title: '文章标题3',
           date: '2024-04-24'
         }
       ],
       items: [
         { type: 'success', label: '后端技术' },
         { type: 'success', label: '前端技术' },
-        { type: 'info', label: '架构1' },
+        { type: 'info', label: '架构' },
         { type: 'warning', label: '项目管理' },
         { type: 'danger', label: '开发规范' },
         { type: 'success', label: '组织' },
         { type: 'success', label: 'JAVA' },
         { type: 'info', label: 'Redis' },
-        { type: 'warning', label: 'c++基础' },
+        { type: 'warning', label: 'C++基础' },
-        { type: 'danger', label: 'Aop' },
+        { type: 'danger', label: 'AOP' },
         { type: 'success', label: 'HTML5' },
-        { type: 'success', label: 'Rabbitmq' },
+        { type: 'success', label: 'RabbitMQ' },
-        { type: 'info', label: 'ElmenuUI-plus' },
+        { type: 'info', label: 'ElementUI-plus' },
         { type: 'warning', label: '云资源' },
         { type: 'danger', label: 'VUE' },
         { type: 'danger', label: '业务' },
         { type: 'danger', label: '123' }
+      ],
+      popularArticles: [
+        { title: '热门文章1' },
+        { title: '热门文章2' },
+        { title: '热门文章3' }
       ]
     }
   },
-  // mounted () {
-  //   this.getData()
-  // },
   methods: {
-    // getData () {
-    //   getHome().then(res => {
-    //     console.log(res)
-    //     this.contList = res.data.result
-    //     console.log(this.contList)
-    //   })
-    // },
-    play () {
-      this.timer = setInterval(() => {
-        this.currentIndex++
-        if (this.currentIndex >= this.slideList.length) {
-          this.currentIndex = 0
-        }
-      }, 3000)
-    },
-    stop () {
-      clearInterval(this.timer)
-    },
-    go () {
-      this.play()
-    },
-    change (index) {
-      this.currentIndex = index
-    },
-    mounted () {
-      // 页面加载完成后，开始自动播放
-      this.go()
-    }
   }
 }
 </script>

src/views/interlinkage.vue

@@ -6,10 +6,13 @@
     </div>
     <div class="container">
       <div class="content" v-for="(item, index) in contentList" :key="index" @click="goLink(item.url)">
-        <img :src="item.img" :alt="item.name">
+        <div class="content-inner">
-        <span>{{ item.name }}</span>
+          <img :src="item.img" :alt="item.name">
+          <span>{{ item.name }}</span>
+        </div>
       </div>
     </div>
+    <musIc />
   </div>
 </template>
 
@@ -19,6 +22,46 @@ export default {
   data () {
     return {
       contentList: [
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '百度一下，你就知道',
+          url: 'http://www.baidu.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '4399小游戏',
+          url: 'http://www.4399.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '百度一下，你就知道',
+          url: 'http://www.baidu.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '4399小游戏',
+          url: 'http://www.4399.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '百度一下，你就知道',
+          url: 'http://www.baidu.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '4399小游戏',
+          url: 'http://www.4399.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '百度一下，你就知道',
+          url: 'http://www.baidu.com'
+        },
+        {
+          img: require('@/assets/images/kecheng/C.jpg'),
+          name: '4399小游戏',
+          url: 'http://www.4399.com'
+        },
         {
           img: require('@/assets/images/kecheng/C.jpg'),
           name: '百度一下，你就知道',
@@ -43,50 +86,57 @@ export default {
 <style lang="less" scoped>
 .interlinkage {
   width: 1200px;
-  height: 800px;
   margin: 70px auto;
   border: 1px solid #ccc;
-  background-color: palegoldenrod;
+  background-color: #f5f5f5;
+  padding: 20px;
+  border-radius: 10px;
+}
 
-  .title {
+.title {
-    width: 1200px;
+  margin-bottom: 20px;
-    height: 60px;
+}
 
-    h2 {
+.title h2 {
-      line-height: 60px;
+  font-size: 24px;
-      margin-left: 20px;
+  color: #333;
-    }
+}
-  }
 
-  .container {
+.container {
-    display: grid;
+  display: grid;
-    grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr);
-    grid-gap: 10px;
+  grid-gap: 20px;
+}
 
-    .content {
+.content {
-      width: 230px;
+  background-color: #fff;
-      height: 50px;
+  border-radius: 5px;
-      background-color: #fff;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
 
-      &:hover{
+.content:hover {
-        margin-top: -10px;
+  transform: translateY(-5px);
-        box-shadow: 0 0 10px #ccc;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        color: aquamarine;
+}
-      }
 
-      img{
+.content .content-inner {
-        width: 50px;
+  display: flex;
-        height: 50px;
+  align-items: center;
-        float: left;
+}
-      }
 
-      span{
+.content img {
-        line-height: 50px;
+  width: 40px;
-        margin-left: 10px;
+  height: 40px;
-        cursor: pointer;
+  border-radius: 50%;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
-      }
+
-    }
+.content span {
-  }
+  margin-left: 10px;
+  font-size: 16px;
+  color: #333;
+  vertical-align: middle;
 }
 </style>

src/views/labelPage.vue

@@ -11,7 +11,7 @@
         <div class="box-bd">
           <ul class="clearfix">
             <li v-for="(item, index) in items" :key="index" >
-              <router-link :to="`/list/${index + 1}`"> <!-- 这里的index + 1对应着表的序号 -->
+              <router-link :to="`/paiListPage/${index + 1}`"> <!-- 这里的index + 1对应着表的序号 -->
                 <img :src="item.url" :alt="item.title" />
                 <h4>{{ item.title }}</h4>
               </router-link>
@@ -26,6 +26,7 @@
     </div>
 
     <!-- 其他代码 -->
+    <musIc />
   </div>
 </template>
 

src/views/login.vue

@@ -56,7 +56,9 @@
 </template>
 
 <script>
+import { login } from '@/api/login' // 导入登录请求的方法
 import dayjs from 'dayjs'
+
 export default {
   name: 'LoginIndex',
   data () {
@@ -89,13 +91,26 @@ export default {
     setInterval(() => {
       this.postDate = dayjs().format('HH : mm : ss')
     }, 1000)
-  },
-  mounted () {
-
   },
   methods: {
     login () {
-
+      // 调用后端登录接口
+      login(this.form).then(response => {
+        // 登录成功的处理逻辑
+        console.log(response) // 假设登录成功后返回的数据中包含用户信息
+        this.$router.push('/')
+        this.$message({
+          message: '登陆成功',
+          type: 'success'
+        })
+      }).catch(error => {
+        // 登录失败的处理逻辑
+        console.error('登录失败:', error)
+        this.$message({
+          message: '登录失败，请检查账号或密码',
+          type: 'error'
+        })
+      })
     },
     remenber (data) {
       this.checked = data

src/views/messageBoard.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
+   <header>
     <navigationBar />
+   </header>
     <div class="msg-all-contain">
-      <div class="msg-board-title">留言板</div>
+      <div class="msg-board-title">待办事项</div>
       <div class="msg-board">
         <div class="msg-board-contain">
           <div class="msg-head">
@@ -18,7 +20,7 @@
               rows="5"
             >
             </textarea>
-            <button @click="submit">发表</button>
+            <button @click="submit">发送</button>
           </div>
           <div class="msg-content">
             <comments-child
@@ -157,7 +159,7 @@ export default {
 }
 .msg-all-contain {
   width: 1200px;
-  margin: auto;
+  margin:80px auto ;
   height: 100%;
   overflow-y: auto;
 }

src/views/particulars/TopicDetails.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="topic-details">
-    <div class="title" v-if="data">
-        <h2>{{ data.title }}</h2>
-    </div>
-    <div class="con" v-if="data">
-        <p v-html="data.content"></p>
-    </div>
-    <div v-else-if="loading">加载中...</div>
-    <div v-else-if="error">{{ error }}</div>
-  </div>
-</template>
-
-<script>
-import { getSubject } from '@/api/subject'
-
-export default {
-  name: 'topicDetails',
-  data () {
-    return {
-      data: null,
-      loading: true,
-      error: null
-    }
-  },
-  created () {
-    this.getList()
-  },
-  // watch: {
-  //   '$route.query.id': 'fetchData'
-  // },
-  methods: {
-
-    getList () {
-      const id = this.$route.query.id
-      getSubject(id).then(res => {
-        this.loading = true
-        this.error = null
-        this.data = res.data
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.topic-details {
-  width: 1200px;
-  height: 800px;
-  margin: auto;
-
-  h2 {
-    text-align: center;
-    margin: 30px;
-  }
-
-  p {
-    text-align: justify;
-    margin: 30px;
-    line-height: 2;
-    text-indent: 2em;
-  }
-}
-</style>

src/views/particulars/detailPage.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>详情页</h1>
+  </div>
+</template>
+
+<script>
+import { getSubject } from '@/api/subject'
+export default {
+  name: 'detailPage',
+  data () {
+    return {
+      list: ''
+    }
+  },
+  created () {
+    this.getDeail()
+  },
+  methods: {
+    getDeail () {
+      getSubject().then(res => {
+        this.list = res.data
+        console.log(this.list)
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/particulars/paiListPage.vue

@@ -4,11 +4,14 @@
       <div class="kecheng">
         <div class="empty" v-if="!detailContent.length">暂无内容</div>
         <div class="con" v-for="(item, index) in detailContent" :key="index">
-          <div class="title">{{ item.title }}</div>
+          <div class="title" @click="pushDetailPage">{{ item.title }}</div>
           <div class="content" v-html="item.content"></div>
         </div>
       </div>
     </main>
+    <div class="fortter">
+
+    </div>
   </div>
 </template>
 
@@ -33,11 +36,21 @@ export default {
         .then((response) => {
           // 处理返回的内容
           this.detailContent = response.data
+          this.total = response.data.length
           // console.log(response)
         })
         .catch((error) => {
           console.error('Error fetching content:', error)
         })
+    },
+    pushDetailPage () {
+      // 跳转到详情页面
+      this.$router.push({
+        name: 'detailPage',
+        params: {
+          id: this.$route.params.id
+        }
+      })
     }
   }
 }

src/views/photoGallery.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="photo-gallery">
+    <header>
+      <navigationBar />
+    </header>
+    <div class="upload-button">
+      <button @click="openModal">添加照片</button>
+    </div>
+    <div v-if="showModal" class="modal" @click.self="closeModal">
+      <div class="modal-content">
+        <span class="close" @click="closeModal">&times;</span>
+        <form @submit.prevent="addPhoto">
+          <div class="form-group">
+            <label for="photo-upload">上传照片</label>
+            <input type="file" id="photo-upload" @change="onFileChange" required />
+          </div>
+          <div class="form-group">
+            <label for="photo-description">照片描述</label>
+            <input type="text" id="photo-description" v-model="newPhoto.alt" placeholder="照片描述" required />
+          </div>
+          <button type="submit">上传照片</button>
+        </form>
+      </div>
+    </div>
+    <div class="gallery">
+      <div
+        class="gallery-item"
+        v-for="(item, index) in photos"
+        :key="index"
+        :class="item.sizeClass"
+        ref="photoItems"
+      >
+        <img :data-src="item.src" :alt="item.alt" class="lazy" />
+      </div>
+    </div>
+    <musIc />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'photoGallery',
+  data () {
+    return {
+      photos: [
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 1', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 2', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 3', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 4', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 5', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 6', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 7', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 8', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 9', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 10', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 11', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 12', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 13', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 14', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 15', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 16', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 17', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 18', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 19', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 20', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 21', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 22', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 23', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 24', sizeClass: 'small' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 25', sizeClass: 'medium' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 26', sizeClass: 'large' },
+        { src: require('@/assets/images/789.jpg'), alt: 'Photo 27', sizeClass: 'small' }
+      ],
+      newPhoto: {
+        src: '',
+        alt: ''
+      },
+      newPhotoFile: null,
+      showModal: false
+    }
+  },
+  methods: {
+    loadImages () {
+      const images = this.$refs.photoItems
+      const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+      }
+
+      const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const img = entry.target.querySelector('img')
+            img.src = img.getAttribute('data-src')
+            observer.unobserve(entry.target)
+          }
+        })
+      }, options)
+
+      images.forEach(image => {
+        observer.observe(image)
+      })
+    },
+    onFileChange (e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.newPhotoFile = URL.createObjectURL(file)
+      }
+    },
+    addPhoto () {
+      if (this.newPhotoFile && this.newPhoto.alt) {
+        const sizeClasses = ['small', 'medium', 'large']
+        const sizeClass = sizeClasses[Math.floor(Math.random() * sizeClasses.length)]
+        this.photos.push({
+          src: this.newPhotoFile,
+          alt: this.newPhoto.alt,
+          sizeClass: sizeClass
+        })
+        this.newPhotoFile = null
+        this.newPhoto.alt = ''
+        this.showModal = false
+        document.body.classList.remove('no-scroll')
+        this.$nextTick(() => {
+          this.loadImages()
+        })
+      }
+    },
+    openModal () {
+      this.showModal = true
+      document.body.classList.add('no-scroll')
+    },
+    closeModal () {
+      this.showModal = false
+      document.body.classList.remove('no-scroll')
+    }
+  },
+  mounted () {
+    this.loadImages()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.photo-gallery {
+  max-width: 1200px;
+  margin: 30px auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 20px;
+}
+
+.upload-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+.upload-button button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.upload-button button:hover {
+  background: #0056b3;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  position: relative;
+  width: 400px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.form-group input[type="file"] {
+  display: block;
+  width: 100%;
+}
+
+.form-group input[type="text"] {
+  display: block;
+  width: calc(100% - 20px);
+  padding: 8px 10px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+button:hover {
+  background: #0056b3;
+}
+
+.gallery {
+  column-count: 4;
+  column-gap: 16px;
+}
+
+.gallery-item {
+  break-inside: avoid;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.gallery-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.gallery-item.small img {
+  height: 150px;
+}
+
+.gallery-item.medium img {
+  height: 200px;
+}
+
+.gallery-item.large img {
+  height: 250px;
+}
+</style>

src/views/subject/TopicDetails.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="topic-details">
+    <div class="container" v-if="data">
+      <div class="title">
+        <h2>{{ data.title }}</h2>
+      </div>
+      <div class="con">
+        <p v-html="data.content"></p>
+      </div>
+    </div>
+    <div v-else-if="loading" class="loading">加载中...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <shareBtn></shareBtn>
+  </div>
+</template>
+
+<script>
+import shareBtn from '@/components/shareBtn.vue'
+import { getSubject } from '@/api/subject'
+
+export default {
+  name: 'topicDetails',
+  components: {
+    shareBtn
+  },
+  data () {
+    return {
+      data: null,
+      loading: true,
+      error: null
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+      const id = this.$route.query.id
+      getSubject(id)
+        .then(res => {
+          this.loading = false
+          this.error = null
+          this.data = res.data
+        })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.topic-details {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.container {
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.title h2 {
+  font-size: 24px;
+  color: #333;
+}
+
+.con p {
+  text-align: justify;
+  line-height: 1.6;
+  color: #666;
+}
+
+.loading, .error {
+  text-align: center;
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+</style>

src/views/subject/listPage.vue

@@ -10,8 +10,7 @@
       </svg>
       <div class="ana">
         <p>
-          Youth by sharpening and brilliant <br />life because of struggle and
+          {{ user }}
-          sublimation
         </p>
       </div>
     </div>
@@ -43,16 +42,25 @@
 
 <script>
 import { getSubject } from '@/api/subject'
+import { fetchUser } from '@/api/dailySentence'
+
 export default {
   name: 'subJect',
   data () {
     return {
       articleS: [],
-      total: 0
+      total: 0,
+      user: ''
     }
   },
   created () {
     this.getList()
+    // 页面加载时，从本地存储获取用户内容
+    this.user = localStorage.getItem('userContent') || ''
+    // 每天早上8点获取用户内容
+    setInterval(() => {
+      this.fetchUser()
+    }, 1000 * 60 * 60 * 24) // 每24小时重复执行一次
   },
   methods: {
     getList () {
@@ -60,9 +68,19 @@ export default {
         this.articleS = res.data
         this.total = res.data.length
       })
+    },
+    fetchUser () {
+      fetchUser()
+        .then(response => {
+          this.user = response.data.result.content
+          // 将用户内容存储在本地存储中
+          localStorage.setItem('userContent', this.user)
+        })
+        .catch(error => {
+          console.log(error)
+        })
     }
   }
-
 }
 </script>
 
@@ -72,7 +90,7 @@ export default {
   height: 600px;
   margin-bottom: 20px;
   position: relative;
-  background-image: url(../assets/images/sub2.jpg);
+  background-image: url(../../assets/images/sub2.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -84,16 +102,16 @@ export default {
 
   .ana {
     width: 500px;
-    height: 100px;
+    height: auto;
     position: absolute;
-    top: 10%;
+    top: 15%;
     left: 62%;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    backdrop-filter: blur(0px);
-    -webkit-backdrop-filter: blur(0px);
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.18);
+    backdrop-filter: blur(0px);
+    -webkit-backdrop-filter: blur(0px);
 
     p {
       text-align: center;