diff --git a/vueHomilyLink/package-lock.json b/vueHomilyLink/package-lock.json
index df9ca7e..1412f88 100644
--- a/vueHomilyLink/package-lock.json
+++ b/vueHomilyLink/package-lock.json
@@ -1436,23 +1436,6 @@
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
       "license": "MIT"
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/axios": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
-      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -1533,6 +1516,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1638,6 +1633,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
@@ -1746,6 +1750,40 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -2009,6 +2047,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -2258,6 +2317,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
diff --git a/vueHomilyLink/src/api/HomeApi.js b/vueHomilyLink/src/api/HomeApi.js
new file mode 100644
index 0000000..21e603a
--- /dev/null
+++ b/vueHomilyLink/src/api/HomeApi.js
@@ -0,0 +1,12 @@
+import service from ".";
+const homeApi = {
+    //获取首页列表
+    gethomeList() {
+        return service.get('/mainpage/get-shows');
+    },
+	//获取视频列表
+	getHomeVideo(){
+		return service.get('/mainpage/get-videos?flagType=1');
+	}
+}
+export default homeApi;
\ No newline at end of file
diff --git a/vueHomilyLink/src/api/index.js b/vueHomilyLink/src/api/index.js
index e8e7453..a6ba51f 100644
--- a/vueHomilyLink/src/api/index.js
+++ b/vueHomilyLink/src/api/index.js
@@ -1,8 +1,9 @@
 import axios from "axios";
 
 const service = axios.create({
-    // baseURL: 'http://192.168.9.19:8080',
-    baseURL: '/api'
+    // baseURL: 'http://192.168.8.191:8080',
+    // baseURL: 'http://localhost:8080',
+    baseURL: '/api',
 });
 // http://192.168.8.191:8080
 
diff --git a/vueHomilyLink/src/assets/main.css b/vueHomilyLink/src/assets/main.css
index ebb7529..7294622 100644
--- a/vueHomilyLink/src/assets/main.css
+++ b/vueHomilyLink/src/assets/main.css
@@ -1,3 +1,6 @@
+@import './base.css';
+
+
 html,body{
   margin:0px;
   height: 100%;
diff --git a/vueHomilyLink/src/components/Nav.vue b/vueHomilyLink/src/components/Nav.vue
index 5761d58..39fb6ae 100644
--- a/vueHomilyLink/src/components/Nav.vue
+++ b/vueHomilyLink/src/components/Nav.vue
@@ -5,9 +5,10 @@
 <template>
     <div class="nav">
         <div class="container">
-            <a href="#">频道</a>
-            <a href="#">俱乐部</a>
-            <a href="/live">直播</a>
+            <router-link to="/">首页</router-link>
+        <router-link to="/channel">频道</router-link>
+        <router-link to="/club">俱乐部</router-link>
+        <router-link to="/live">直播</router-link>
         </div>
     </div>
 </template>
@@ -17,14 +18,16 @@
     background-color: rgba(177, 174, 159, 0.493); 
     height: 30px;
     border-bottom: 1px solid #aaa;
-    width: 100%;
+    width: 1000px;
+    margin-right: auto;
+    margin-left: auto;
 }
 .container{
     width: 1200px;
-    a{
+}
+a{
         margin-right: 40px;
         margin-left: 50px;
         color: black;
     }
-}
 </style>
\ No newline at end of file
diff --git a/vueHomilyLink/src/views/HomeView.vue b/vueHomilyLink/src/views/HomeView.vue
index a19f8f5..89a0c11 100644
--- a/vueHomilyLink/src/views/HomeView.vue
+++ b/vueHomilyLink/src/views/HomeView.vue
@@ -1,12 +1,365 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
+import { ref, onMounted, reactive,computed } from 'vue';
+import homeApi from '@/api/HomeApi';
+
+const seeSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIjSURBVFiF7VhtkqQgDE2sudfSxwAOox4GOUYzFzPzY2Ar0higdWtnqni//IjwQh5JBGBgYGBg4H8C7xrIe68AAPZ9V4j4h4g+07tpmoLWOtwxzyXC3ntFRDMAqBZ7IlqttcuVOd8i3Es0xxXi3YSdcwsiztnjAACAiCsAQAq/917t+67iu/ybt4h3Ed627QnHVQ2IuLbqs+RsL+lmwjnZK2EtEA/GmEfLt1XCJb0i4uPqro/jPtmjpmhVCW/bRj2D8vRWi8A7iyESzkInhk3KHDX5ZHIT5zklnOvMGNNsW0IPacl2aiGAiKcelzYQIj6IaCWilY0xJ7mUkFJizbZImBMgIlGzua0x5qG1DtbaxVq7cNJRMkVorUNm+yyRfiHsnFs4ASmMfMAz2/gsxFslrXJmW3TwQNh7r/gmq+3yVMVq4OGuIW64EG9fHCxKohXTNIXSdQ7uWKOTpzYHwlGraWLF5VGDpM/DhIJjAEdJAsBLW1pMVbxYNKQj0fZKeizZfpQ+jGnpGa9n7/1pA57bOucA4Hsl80LCs0AOVnhE26KGCymmOR0h4oyIc3TiQFaKFO8rJFuxNPeUTKHaVfuPW0ozG6yr+QH4Jp82V61RymUjabyJMMBrL/yj28uEX9PAVybqIn7SgjaTBbjvJ/RvGuJnEKmssiyj8m/+6U8oR0sPLKDr55Xj8slPJ/G3iSbcelTFG5t0XNWS3gYGBgYGfg++AMoF42iHsimVAAAAAElFTkSuQmCC');
+const pingSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==');
+const zanSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHOSURBVFiF7ZjdbawwEIXPISkknVzvC9p2sAtgKQC7hrTBS0wn9zbiyQsg4/3JgnfjKLpHWgmN/74dezwDwH/dFnMGO+eUiLQAlIh0AGCMOeXMWeUMDiEoAAoASLYk277vs4Be9g7s+/5EsgUAEelIAsAbSVXXNYdh8HvmzfLQJG+MOWmtD/O2kWydc+rbgGLvkOxme+752Q0Uq2kan5g8AEyHfbM2A6VnZ8+iDwWK9YgtSrUJyDmnnumdzUDTvQPgOd4BgNctnTd6R1lrP641isgInP+xu4HiG3iDd9S1BpJqmnc1391A93qHZBdCGL/o8wdRynHO+fn6WCXXS3nIGHOKQ11rnZWQY1lrZXr0WusDEHkoytwrOed8COFRDCtNOXC1ZhU17rpZczRt3UpnYT9RH74HaVlzOXOPyPY5UqmhGFBcnlRV5ZfnEjC3VAwoTkNxCVMMKIowH9uLb1kcYUBZIHXJWNxDqYoAXQt54Ad4KH1JKAIUh3yqIkBzyF+qrc4KNJJtmvmrqvKzzVr7kYbqDhh1rX0BEpFxLiu/kLqz302JSHepFF4+NgzD4I/H4ygi/wCM84/k36ZpfF3XnD8oZLJ4EXl/1lvL79cnbWbUVZZeqYsAAAAASUVORK5CYII=');
+
+const clubMark1Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/416cf8f2e000451043b1d1af74b5dbb8.png ');
+const clubMark2Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS1.b631a2c3.png');
+const clubMark3Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/cbd9eda094b33695bab858e08c67ae71.png');
+const clubMark4Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS4.98fc204a.png');
+
+// 定义响应式数据来存储从数据库获取的数据
+const articleData = reactive({
+  articleImgSrc: '',
+  title: '',
+  authorAvatarSrc: '',
+  authorName: '',
+  viewsCount: 0,
+  commentsCount: 0,
+  likesCount: 0,
+  playTime: '',
+  club_id: '',
+  publishTime: '',
+  flag_type:''
+});
+
+// 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中
+const mapResponseToArticleData = (responseData) => {
+  if (Array.isArray(responseData)) {
+    console.log('res:', responseData);
+    articleData.articleImgSrc = responseData.map(item => item.cover);
+    articleData.title = responseData.map(item => item.name);
+    articleData.authorAvatarSrc = responseData.map(item => item.user.avatar);
+    articleData.authorName = responseData.map(item => item.user.username);
+    articleData.viewsCount = responseData.map(item => item.viewCount);
+    articleData.commentsCount = responseData.map(item => item.comments);
+    articleData.likesCount = responseData.map(item => item.likes);
+    articleData.playTime = responseData.map(item => item.videoDuration);
+    articleData.publishTime = responseData.map(item => {
+      const date = new Date(item.releaseTime);
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      const hours = ('0' + date.getHours()).slice(-2);
+      const minutes = ('0' + date.getMinutes()).slice(-2);
+      return `${month}-${day} ${hours}:${minutes}`;
+    });
+    articleData.club_id = responseData.map(item => item.clubId);
+    articleData.flag_type = responseData.map(item => item.flagType);
+
+  } else {
+    console.warn('接口返回的数据格式不符合预期');
+  }
+};
+
+// 页面加载时调用接口获取数据
+async function selectAll() {
+  try {
+    const response = await homeApi.gethomeList();
+    mapResponseToArticleData(response.data);
+    
+  } catch (error) {
+    console.error('获取数据出错：', error);
+  }
+}
+console.log('初始化后的articleData:', articleData);
+selectAll();
+
+
+
+// 精选视频接口
+const articleData2 = ref([]);
+function fetchData (){
+  homeApi.getHomeVideo().then(response => {
+    // 将articleData响应式对象赋值给articleData2
+    articleData2.value = response.data;
+    articleData2.value = articleData2.value.map(item => {
+      const date = new Date(item.releaseTime);
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      const hours = ('0' + date.getHours()).slice(-2);
+      const minutes = ('0' + date.getMinutes()).slice(-2);
+      return {
+       ...item,
+        releaseTime: `${month}-${day} ${hours}:${minutes}`
+      };
+    });
+    console.log('初始化后的articleData2:', articleData2.value);
+  }).catch(error => {
+    console.error('获取数据出错：', error);
+  });
+};
+fetchData ();
+
+
+
+const getColorClass = (index) => {
+  const num = index + 1;
+  if (num === 1) {
+    return 'color-red';
+  } else if (num === 2) {
+    return 'color-green';
+  } else if (num === 3) {
+    return 'color-blue';
+  }
+  return '';
+};
+
+// const filteredArticleData = computed(() => {
+//     return articleData.title.filter((_, index) => articleData.flag_type[index] === 1);
+// });
 </script>
 
 <template>
-  <Nav></Nav>
-  主页
+  <div>
+    <div class="daohang">
+      <Nav></Nav>
+    </div>
+    <div class="class123">
+      <div class="container" style="width: 600px;">
+        <div class="title"><b>推荐</b></div>
+        <ul class="data-list">
+  <li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
+    <!-- 下面继续展示对应数据的渲染，和之前类似 -->
+    <div class="articleimg">
+      <div class="el-image articleimg-img">
+        <img :src="articleData.articleImgSrc[index]" alt="文章图片">
+        <span class="play-icon"></span>
+      </div>
+      <div class="club">
+          <span class="club_img">
+          <img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
+          <img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
+          <img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
+          <img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
+        </span>
+        </div>
+    </div>
+    <div class="articleinfo">
+      <p><b>{{ title }}</b></p>
+      <span class="articleinfo-avatar islink" style="font-size: 14px;">
+        <img :src="articleData.authorAvatarSrc[index]" alt="作者头像">
+        {{ articleData.authorName[index] }}
+      </span>
+      <span class="articleinfo-time" alt="发布时间">
+        {{ articleData.publishTime[index] }}
+      </span>
+      <span class="homepage-list-li-see">
+        <img :src="seeSrc" alt="浏览量图标">
+        {{ articleData.viewsCount[index] }}
+      </span>
+      <span class="homepage-list-li-ping">
+        <img :src="pingSrc" alt="评论数图标">
+        {{ articleData.commentsCount[index] }}
+      </span>
+      <span class="homepage-list-1i-zan">
+        <img :src="zanSrc" alt="点赞图标">
+        {{ articleData.likesCount[index] }}
+      </span>
+    </div>
+  </li>
+</ul>
+      </div>
+
 
+      <!-- 精选视频 -->
+      <div class="sidebar-right" style="width: 400px; float: right;">
+        <div>
+          <img
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHJSURBVFiF1ZhRkoMgDIb/OD1CPc/SWe5Vey86i+dx75B9KHHEWsEItvu/tFYGviaQkBCUGqw1AECM6+RnEz49ADChB4DWuU67DinAOmJ8TWBy5ZnQb4XNBgxg1/TItJhwywVNAg7WGmL87KZaUA5os/YyWK0KHPDYv4O13eqYVy9KujSlNUsuAh4JJ3oF+QT4DjjREmQE+E44ERMurXNenqND8m64wBAdyhEwdZqO1JRlBNRYjwk3hLRWUlOWBtBZTzb0+e4uAbSohKkBgJBbt8rLlwBKJUGFSVxsSkxaGNQM1pqmxuFonetKWXM1F+9RCWsS49oo91+29oJWs+Bcwe2bTzz9flvWLDhPSVu0Zc3DLKjVCY94Zo5YLNzOt2Qsf6pGM5P2plQdcART7HQm9Ccm3IjLu3h05865i1uwFBjwCE1NCBV+72RAVAWaAtN5IFiQCf0eN4+1syqiLkvaJmNNogjYPvwxTRskqfPdETAJ1IpcKTHNFOR6YomqOm3aKy2xHjBLdUy4HI8Ta+7JCLB1zteoL3KVLNxFH936EH1080h0BGSqR5jTwKwGmXPp/f8t4Lk+tom+JKmpJ5WhERgZI2FLW7/8AexhA1wjeFcZAAAAAElFTkSuQmCC"
+            alt style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;">精选视频
+        </div>
+        <ul class="data-list" >
+          <li class="data-list-li articleList" v-for="(article, index) in articleData2" :key="index">
+    <div class="articleimg">
+      <div class="el-image articleimg-img" >
+        <img :src="article.cover" alt="文章图片">
+        <span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
+        <span class="play-time">{{ article.videoDuration }}</span>
+      </div>
+    </div>
+    <div class="articleinfo">
+      <span class="articletitle">{{ article.name }}</span>
+      <span class="see">
+        <img :src="seeSrc" alt="浏览量图标">
+        {{ article.viewCount }}
+      </span>
+      <span class="articleinfo-time">{{ article.releaseTime }}</span>
+    </div>
+  </li>
+</ul>
+      </div>
+    </div>
+  </div>
 </template>
+
 <style scoped>
+.articletitle{
+  display: block;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+.play-icon {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 0 10px 16px; /* 根据需要调整三角形大小 */
+    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); /* 白色半透明三角形，可调整颜色 */
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.daohang{
+    height: 32px;
+}
+.container{
+    margin-right: 0;
+    margin-left: auto;
+    
+}
+.sidebar-right{
+    margin-right: auto;
+    margin-left: 0;
+}
+body {
+            font-family: Arial, sans-serif;
+        }
+        .title {
+            font-size: 24px;
+            color: #333;
+            padding: 10px 0;
+
+        }
+        .data-list-li {
+            display: flex;
+            align-items: flex-start;
+            padding: 10px 0;
+        }
+        .articleimg {
+            position: relative; /* 设置相对定位 */
+            width: 150px;
+            height: 100px;
+            margin-right: 10px; /* 减少右边距以让文字更靠近图片 */
+            border-radius: 5px;
+            /* overflow: hidden; */
+        }
+        .articleimg-img img {
+            width: 150px;
+            height: 90px;
+            object-fit: cover;
+        }
+        .articleinfo {
+            flex-grow: 1;
+            font-size: 20px;
+            margin: 0;
+            padding: 0;
+        }
+        .articleinfo p {
+            margin: 0; /* 移除外边距 */
+            font-size: 20px;
+            color: #555;
+            margin-bottom: 7%;
+        }
+        .right_inline {
+            display: inline-block;
+            vertical-align: top;
+        }
+        .articleinfo-avatar {
+            margin-left: 0;
+            display: inline-block;
+        }
+        .articleinfo-avatar img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+        }
+        .articleinfo-time {
+            font-size: 13px;
+            color: #000000;
+            margin-left: 10px;
+        }
+        .homepage-list-li-see,
+        .homepage-list-li-ping,
+        .homepage-list-1i-zan {
+            display: inline-block;
+            margin-left: 10px;
+            cursor: pointer;
+            font-size: 13px;
+        }
+        .homepage-list-li-see img,
+        .homepage-list-li-ping img,
+        .homepage-list-1i-zan img {
+            width: 20px;
+            height: 20px;
+            padding: 0;
+            margin-left: 0;
+        }
+        .see{
+          margin-left: 0;
+          font-size: 13px;
+        }
+        .see img{
+          width: 20px;
+          height: 20px;
+        }
+        .class123{
+            /*让页面分为左右结构*/
+            display: flex;
+        }
+
+        .corner-mark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgb(128, 128, 128);
+    color: white;
+    padding: 2px 5px;
+    border-radius: 2px;
+    font-size: 12px;
+}
+
+.color-red {
+    background-color: red;
+}
+
+.color-green {
+  background-color: rgb(255, 102, 0);
+}
+
+.color-blue {
+  background-color: rgb(255, 196, 0);
+}
+
+.play-time {
+    position: absolute;
+    bottom: 10%;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，可调整透明度和颜色 */
+    color: white;
+    padding: 2px 5px;
+    border-radius: 2px;
+    font-size: 12px;
+}
 
+.club {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* 可以根据实际需求调整容器大小等样式 */
+    
+    width: 10px;
+    height: 10px;
+}
+.club_img img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
+    width: 15px; /* 假设调整宽度 */
+    height: 15px; /* 假设调整高度 */
+  }
 </style>
diff --git a/vueHomilyLink/vite.config.js b/vueHomilyLink/vite.config.js
index a44a510..f087d82 100644
--- a/vueHomilyLink/vite.config.js
+++ b/vueHomilyLink/vite.config.js
@@ -18,7 +18,8 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://192.168.9.19:8080',
+        target: 'http://192.168.8.191:8080',
+        // target: 'http://localhost:8080',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }