后端返回值改成.data

俱乐部api合并到study# especially if it merges an updated upstream into a topic branch.

vueHomilyLink/package-lock.json

@@ -8,6 +8,7 @@
       "name": "vuehomilylink",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.8",
         "pinia": "^2.2.6",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -1434,6 +1435,23 @@
       "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",
@@ -1514,6 +1532,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -1619,6 +1649,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/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",
@@ -1727,6 +1766,40 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/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://registry.npmmirror.com/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",
@@ -1990,6 +2063,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/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://registry.npmmirror.com/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",
@@ -2239,6 +2333,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/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",

vueHomilyLink/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.8",
     "pinia": "^2.2.6",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"

vueHomilyLink/src/api/ChannelApi.js

@@ -0,0 +1,22 @@
+import service from ".";
+
+const ChannelApi = {
+    //获取频道列表
+    getchannels(){
+        return service.get('/list');
+    },
+    //获取shows列表
+    getShows(Id,UserId,FlagType){
+        return service.post('/channel',{Id,UserId,FlagType});
+    },
+    //订阅状态
+    subscribe(Id,UserId){
+        return service.post('/subscription',{Id,UserId})
+    },
+    //取消订阅
+    unSubscribe(Id,UserId){
+        return service.delete('/subscription',{Id,UserId})
+    }
+    
+}
+export default ChannelApi;

vueHomilyLink/src/api/ClubApi.js

@@ -0,0 +1,23 @@
+import service from ".";
+
+const ClubApi = {
+    getClub(id){
+        return service.get(
+            '/clubpage/get-club',{
+                params: {
+                    id: id
+                }
+            }
+        );
+    },
+    getShows(id){
+        return service.get(
+            '/clubpage/get-club-shows',{
+                params: {
+                    id: id
+                }
+            }
+        )
+    }
+}
+export default ClubApi;

vueHomilyLink/src/api/LiveApi.js

@@ -0,0 +1,15 @@
+import service from ".";
+const liveApi = {
+    //获取直播列表
+    getLiveList() {
+        return service.get('/live');
+    },
+    //预约
+    addReservation(id,userId){
+        return service.post('/reservation',{id,userId});
+    },
+    //取消预约
+    cancelReservation(id,userId){
+        return service.delete('/reservation',{id,userId});
+    }
+}

vueHomilyLink/src/api/index.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const service = axios.create({
+    // baseURL: 'http://192.168.8.191:8080',
+    // baseURL: 'http://localhost:8080',
+    baseURL: '/api',
+});
+// http://192.168.8.191:8080
+
+//Axios的响应拦截器..
+service.interceptors.response.use(resp => {
+    return resp.data;
+}, error => {
+    return Promise.reject(error);
+});
+export default service;

vueHomilyLink/src/assets/main.css

@@ -1,35 +1,7 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+html,body{
+  margin:0px;
+  height: 100%;
 }
+#app{
+  height: 100%;
+}

vueHomilyLink/src/components/ClubNav.vue

@@ -0,0 +1,56 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="club-nav">
+        <div class="container">
+            <RouterLink to="/bogu" class="nav-item">博股俱乐部</RouterLink>
+            <RouterLink to="/mumin" class="nav-item">牧民俱乐部</RouterLink>
+            <RouterLink to="/shenqiang" class="nav-item">神枪手俱乐部</RouterLink>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.club-nav {
+  height: 100vh; 
+  width: 210px; 
+  position: fixed;
+  left: 30px;
+  top: 30px;
+  background-color: #fffffd; 
+  overflow-x: hidden; 
+  padding-top: 20px; 
+  transition: 0.5s; 
+}
+
+
+.container {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+
+.nav-item {
+  padding: 10px 15px;
+  text-decoration: none;
+  font-size: 18px;
+  color: rgb(19, 18, 18);
+  display: block;
+  transition: 0.3s;
+}
+
+
+.nav-item:hover {
+  background-color: #407fdf; 
+  color: #f1f1f1; 
+}
+
+.nav-item.router-link-active {
+  background-color: #407fdf; 
+  color: white; 
+  border-radius: 5%;
+}
+</style>

vueHomilyLink/src/components/Nav.vue

@@ -7,7 +7,7 @@
         <div class="container">
             <a href="#">频道</a>
             <a href="#">俱乐部</a>
-            <a href="#">直播</a>
+            <a href="/live">直播</a>
         </div>
     </div>
 </template>

vueHomilyLink/src/router/index.js

@@ -1,8 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import ClubView from '@/views/ClubView.vue'
 import ChannelView from '@/views/ChannelView.vue'
 import LiveView from '@/views/LiveView.vue'
+import BoguView from '@/views/club/BoguView.vue'
+import MuminView from '@/views/club/MuminView.vue'
+import ShenQiang from '@/views/club/shenQiang.vue'
 
 //创建路由对象
 const router = createRouter({
@@ -14,12 +16,23 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: '/club',
-      name: 'club',
-      component: ClubView,
+      path: '/bogu',
+      name: 'bogu',
+      component: BoguView,
     },
     {
-      path: '/channel',
+      path: '/mumin',
+      name: 'mumin',
+      component: MuminView,
+    },
+    {
+      path: '/shenqiang',
+      name: 'shenqiang',
+      component: ShenQiang,
+    },
+    {
+      path: '/channel:id?',
+      props: true,
       name: 'channel',
       component: ChannelView,
     },

vueHomilyLink/src/views/ChannelView.vue

@@ -1,10 +1,478 @@
 <script setup>
+import Nav from '@/components/Nav.vue';
+import { computed, ref } from 'vue';
+import router from '@/router';
+import ChannelApi from '@/api/ChannelApi';
+
+//频道列表
+const channelList = ref([]);
+//视频上的导航栏
+const currentTab = ref('all');
+const flagType = ref(null);
+//频道
+//默认信息
+const channel = ref({
+    id: 1,
+    image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
+    name: "量价时空四维预测术",
+    // 订阅数量
+    subscriptionCount: 60,
+    backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
+});
+//1-左侧导航栏加载
+function getChannels() {
+    //查询频道列表api
+    ChannelApi.getchannels().then((result) =>{
+        console.log(result.data);
+        channelList.value = result.data;
+        console.log("++++",channelList.value);
+    })
+
+}
+getChannels();
+
+function toLink(channelId) {
+    router.push({ path: '/channel', query: { id: channelId } });
+    loadShows(channelId,flagType);
+    console.log("flga",flagType.value);
+}
+
+
+
+function changeTab(tab, flagType) {
+  currentTab.value = tab;
+  loadShows(flagType);
+}
+
+// 展示列表1
+const shows = ref([]);
+// 加载展示列表
+function loadShows(channleId,flagType) {
+    //shows查询api,根据id,userId
+    ChannelApi.getShows(channleId,90000000,flagType.value).then((result)=>{
+        console.log(result.data)
+        channel.value = result.data.channel;
+
+        console.log("频道",channel.value)
+        shows.value = result.data.shows;
+        console.log("视频",shows.value);
+        
+    })
+}
+loadShows(channel.value.id,flagType);
+
+//订阅
+function submit(channelId) {
+    console.log("频道id",channelId);
+    ChannelApi.subscribe(channelId,90000000).then((result)=>{
+       if(result && result.success){
+        alert('订阅成功！');
+        loadShows(channelId);
+       }else{
+        alert('订阅失败！');
+       }
+    })
+
+}
+
+function unsubmit(channelId){
+    console.log("取消频道id",channelId);
+    ChannelApi.unSubscribe(channelId,90000000).then((result) =>{
+        if(result && result.success){
+            alert('取消订阅成功！');
+            loadShows(channelId);
+        }
+    })
+}
+// function buttonActive(){
+   
+// }
+// buttonActive();
 
 </script>
 
 <template>
-频道
+    <Nav></Nav>
+    <ChannelNav></ChannelNav>
+    <div class="club-nav">
+        <div class="container">
+            <button v-for="ch in channelList.list" @click="toLink(ch.id)" class="nav-item">{{ ch.name }}</button>
+        </div>
+    </div>
+    <div class="channel">
+        <div class="channel-head">
+            <!-- 1-订阅按钮 -->
+            <button v-if="channel.status && channel.status == 1" class="submited"
+              @click="unsubmit(channel.id)">取消订阅</button>
+            <button v-else class="submit" @click="submit(channel.id)">订阅</button>
+            <!-- 2-背景图片 -->
+            <img alt="" class="bc-image" :src="channel.backgroundImage" />
+            <!-- 3-频道主题 -->
+            <div class="channel-title">
+                <!-- 频道头像 -->
+                <img alt="" class="title-image" :src="channel.image" />
+                <!-- 频道title -->
+                <div class="title-content">
+                    <h3 :name="channel.name">{{ channel.name }}</h3>
+                    <span :subscriptionCount="channel.subscriptionCount">{{ channel.subscriptionCount }}已订阅</span>
+                    <p style="line-height: 18px;">.</p>
+                </div>
+            </div>
+        </div>
+        <!-- 频道内容 -->
+        <div class="channel-content">
+            <!-- 导航栏 -->
+            <div class="content-nav">
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'all' }" 
+                @click="changeTab(channel.id,null)">全部</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'articles' }" 
+                @click="changeTab(channel.id,1)">文章</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'videos' }" 
+                @click="changeTab(channel.id, 2)">视频</button>
+            </div>
+            <component :is="currentTabComponent"></component>
+            <!-- 内容 -->
+             <!-- 如果是全部 -->
+            
+            <div v-if="currentTab == 'all'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-if="currentTab == 'videos'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+
+            <div v-if="currentTab == 'articles'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+
+
+        </div>
+    </div>
 </template>
 <style scoped>
+.club-nav {
+    height: 100vh;
+    position: fixed;
+    left: 30px;
+    top: 30px;
+    background-color: #ffffff;
+    overflow-x: hidden;
+    padding-top: 20px;
+    transition: 0.5s;
+}
+
+
+.container {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    background-color: #ffffff;
+}
+
+
+.nav-item {
+    border: none;
+    background-color: #ffffff;
+    padding: 10px 15px;
+    width: 250px;
+    height: 60px;
+    text-decoration: none;
+    font-size: 18px;
+    color: rgb(19, 18, 18);
+    display: block;
+    transition: 0.3s;
+}
+
+
+.nav-item:hover {
+    background-color: #407fdf;
+    color: #f1f1f1;
+}
+
+.nav-item.router-link-active {
+    background-color: #407fdf;
+    color: white;
+    border-radius: 5%;
+}
+
+.channel {
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.channel-head {
+    position: relative;
+    height: 200px;
+    width: 100%;
+}
+
+.bc-image {
+    height: 100%;
+    width: 100%;
+}
+
+.submited {
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px;
+    border-radius: 10%;
+    z-index: 999;
+}
+
+.submit {
+    position: absolute;
+    /* 绝对定位 */
+    top: 50px;
+    /* 根据需要调整位置 */
+    right: 10px;
+    /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px 20px;
+
+    border-radius: 10%;
+    z-index: 999;
+}
+
+.channel-title {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding-top: 60px;
+    padding-left: 50px;
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+}
+
+.title-image {
+    width: 90px;
+    height: 90px;
+    margin-right: 25px;
+    vertical-align: top;
+    border-radius: 50%;
+}
+
+.title-content {
+    display: inline-block;
+    position: absolute;
+    width: 400px;
+    color: white;
+    overflow: hidden;
+}
+
+.channel-title h3 {
+    max-width: 75%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 24px;
+    color: #fff;
+    margin: 0px;
+    z-index: 999;
+}
+
+.channel-title span {
+    padding: 4px 0;
+    font-size: 14px;
+    color: #fff;
+}
+
+.content-nav {
+    display: flex;
+    justify-content: flex-start;
+    /* 修正了属性名中的空格 */
+    background-color: #fff;
+    /* 修正了属性名中的空格 */
+    border-bottom: 1px solid #ccc;
+    /* 修正了属性名中的空格 */
+    margin: 10px;
+}
+
+.tab {
+    padding: 10px 20px;
+    border: none;
+    background-color: transparent;
+    /* 修正了属性名中的空格 */
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.active {
+    color: red;   
+    border-bottom: 2px solid red;
+}
+
+.list-display {
+    list-style-type: none;
+    padding: 0px;
+}
+
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex;
+
+}
+
+.sub-left {
+    height: 112px;
+    width: 200px;
+    position: relative;
+
+    .sub-image {
+        width: 100%;
+        height: 100%;
+    }
+
+    .video-time {
+        position: absolute;
+        left: 70%;
+        top: 80%;
+        color: #fff;
+        background-color: rgba(31, 30, 30, 0.5);
+        border-radius: 20%;
+        font-size: smaller;
+    }
+}
+
+
+.right-inline {
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+
+}
+
+.right-title {
+    margin-left: 10px;
+}
+
+.right-item {
+    display: flex;
+    color: #8e8e8e;
+    font-size: 14px;
+    margin-right: 18px;
+    align-items: center;
+}
 
+.img1 {
+    margin-left: 10px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+}
 </style>

vueHomilyLink/src/views/ClubView.vue

@@ -1,10 +1,338 @@
 <script setup>
+import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
 
+// 俱乐部
+const club = ref()
+// 加载俱乐部信息
+function loadClub(){
+  club.value = {
+    id: 1,
+    image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+    name:"博股俱乐部",
+    introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+    backgroundImage:""
+};
+}
+loadClub();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  shows.value = ([
+    {
+      id: 1,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/1nzz3jjlxo0d1j9karz0ev31l0ryr0cj.jpg",
+      name:"第一节《影型结构同现》",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+      },
+      releaseTime:"2024-05-26 11:42:00",
+      // 视频时长
+      videoDuration:"01:22:11",
+      // 观看数量
+      viewCount:796,
+      comments:2,
+      likes:10,
+      // 内容标识类型,图文还是视频
+      flagType:1,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+    },
+    {
+      id: 2,
+      cover:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0oxr0cymk998qbud22ztc1559v.jpg",
+      name:"第二节《强势结构形态》",
+      user:{
+        id:1,
+        username:"HomilyLink",
+        avatar:"https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
+      },
+      releaseTime:"2024-01-24 09:55:00",
+      // 视频时长
+      videoDuration:"03:56:00",
+      // 观看数量
+      viewCount:"594",
+      comments:0,
+      likes:16,
+      // 内容标识类型,图文还是视频
+      flagType:2,
+      club:{
+        id: 1,
+        image:"https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
+        name:"博股俱乐部",
+        introduction:"博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
+        backgroundImage:""
+      },
+    }
+  ])
+
+}
+// 
+loadShows();
 </script>
 
 <template>
-俱乐部
+    <Nav></Nav>
+    <div class="club">
+    <!-- 俱乐部相关信息 -->
+    <header>
+      <div class="club-header1">
+        <img class="club-image" :src="club.image" alt="视频缩略图">
+        <button class="club-button" @click="handleMore">查看更多</button>
+      </div>
+      
+      <p>{{ club.introduction }}</p>
+    </header>
+    <!-- 俱乐部内容 -->
+    <section class="special-topic">
+      <div class="special-topic">
+        <h2>专题</h2>
+      </div>
+      <div class="topic">
+        <div class="topic-title">
+          <p>前言股市投资分享之左侧交易</p>
+          <span @click="handleMore">查看更多</span>
+        </div>
+        
+        <!-- 展示列表 -->
+        <div class="sub-topic">
+          <ul class="display-list">
+            <li v-for="show in shows">
+              <!-- 左边 -->
+              <div class="sub-left">
+                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                <img v-if="show.flagType==1" class="player" src="data:image/png;base64,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">
+              </div>
+              <!-- 右边 -->
+              <div class="sub-right">
+                <div class="right-inline">
+                  <img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo">
+                  <span :name="show.name">{{ show.name }}</span>
+                </div>
+                <div class="right-inline">
+                  <div class="yellow">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAI4SURBVFiF7VhBcsIwDFy5/VfNDPRNcIKcwptKZ3Af1qiHJMVOZFty6K17gqDIy8peKQH+0QbamoD7vZ8/D3DeYQgAQKfPsDV3Eznu956JztNXX4xl6gDg5fRxsa5jIheRKhLK3s/UWUiqyG0lleRi6hyGoCl7ldxE7K5cO0D5BzQqutKP3/37xUAM7njbaWOJ+Pzdv1+K+UrEiPic+32JeeNjVE8FIj7Hp11Fjvu9txBLFmTu6lHRWkT3HEGR3AAnBpcw758Wf4tsKcGKnLWcQFLSGcFyPwAvqbci11rOJIextICsXmIlLaoBgDveVpY0XA9szUPMu3hbFK1EA6GkM0Lmej7XQr3X+MtCtaApD0EWyB1vu5JNAOPBK1UqKYdUCms/1CLXeeLSujhYSqJxciu0nee1FgCMBIfr4Y2Yuy1z2mOAYK+J/1VOYbyeie6tKkZqFdeJebjHh3GCraGlzMP1cG+yKOsNgI3gtJe9ntBDpGaf+4sTDKS92S0uhnW4CG2cNW+CJuWY6Uu8nrMjZa9ddpuEnDaJVNL5ND7TE6WGXT3ucaPPPPyEpSda8wLSyFRRL5a+4F1mT5QGiDW5ygaej7rGu2LLKf3pXP8WD0RNvWlA8KWYmOBwPfDk/EGKyTWA7HOr8Xm1GaWpJ2sldPoMhUHyKaiNY9Un/tbRvYblSC7GaBJxv/e1qdWAlc3kYHrLtFFFNakZTe/nfu2hTjQA4+lvGVI3v9kEHmUHUlt4xtvNf7TgB2p5V6EQkIsLAAAAAElFTkSuQmCC" class="img2">
+                    <span :clubname="show.club.name">{{ show.club.name }}</span>
+                  </div>
+                </div>
+                <div class="right-inline">
+                  <!-- HomilyLink -->
+                  <div class="right-item">
+                    <img :src="show.user.avatar" class="img1">
+                    <div :username="show.user.username">show.user.username</div>
+                  </div>
+                  <!-- 日期 -->
+                  <div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div>
+                  <!-- 观看 -->
+                  <div class="right-item">
+                    <img src="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" class="img2">
+                    <div :viewCount="viewCount">{{ show.viewCount }}</div>
+                  </div>
+                  <!-- 评论 -->
+                  <div class="right-item">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2">
+                    <div :comments="show.comments">{{ show.comments }}</div>
+                  </div>
+                  <!-- 点赞 -->
+                  <div class="right-item">
+                    <img src="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=" class="img2">
+                    <div :likes="show.likes">{{ show.likes }}</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <style scoped>
+.club{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+header {
+    background: linear-gradient(to right,  #ffe5ca,#ffca95,#ffa953);
+    padding: 20px;
+    border-radius: 2%;
+}
+
+.club-header1 {
+    display: flex; /* 启用flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between; /* 在主轴上两端对齐 */
+    padding: 10px; /* 可选：根据需要添加内边距 */
+}
+
+.club-image {
+    height: 80px;
+    width: 80px;
+    max-width: 100%; 
+    /* height: auto; 保持图片的原始宽高比 */
+    margin-left: 50px;
+    border-radius: 100%; /* 设置图片为圆形 */
+}
+
+.club-button{
+    margin-left: auto; /* 将按钮推向右侧 */
+    margin-right: 50px;
+    padding: 5px;
+    background-color: #ff9900;
+    color: white;
+    border: none;
+    top: 20px; /* 距离顶部20px */
+    right: 20px; /* 距离右侧20px */
+    cursor: pointer;
+    color: #72706a;
+    border-radius: 10%;
+}
+
+header p {
+    margin: 10px 10px;
+    
+}
+.special-topic {
+    margin: 20px;
+}
+.topic{
+  background: linear-gradient(to bottom,  #fff9e9,#fffcf3,#fffffd);
+  h3 {
+    background-color: #e0e0e0;
+    padding: 10px;
+    margin: 0;
+}
+}
+
+.special-topic {
+    background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
+    padding: 10px; /* 内边距，根据需要调整 */
+    margin: 20px 0; /* 外边距，根据需要调整 */
+}
+
+.special-topic h2 {
+    margin: 0; /* 移除默认的外边距 */
+    padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
+    border-bottom: 2px solid #007bff; /* 下划线样式 */
+    display: inline-block; /* 使下划线只在文字下方 */
+}
+.topic-title{
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin-left: auto; /* 向右对齐 */
+        margin-right: 50px;
+        color: #8e8e8e;
+        font-size: 14px;
+    }
+    p{
+        display: inline-block;
+        font-size: 20px;
+        
+    }
+}
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex; 
+
+}
+.display-list{
+    list-style-type: none;
+    padding: 0px;
+    
+}
+.sub-topic li{
+    display: flex; 
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+    position: relative;
+    .sub-image{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .player{
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        left: 40%;
+        top: 40%;
+        z-index: 999;
+    }
+}
+
+.sub-right{
+    margin-left: 20px;
+    
+}
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+    .yellow{
+        display: flex;
+        color: #e9a479;
+        font-size: 14px;
+        height: 18px;
+        background-color: #ffefdf;
+    }
+    .right-item{
+        display: flex;
+        color: #8e8e8e;
+        font-size: 14px;
+        margin-right: 18px;
+        align-items: center;
+    }
+}
+
+.logo{
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+}
+.img1{
+    width: 22px;
+    height: 22px;
+}
+.img2{
+    width: 18px;
+    height: 18px;
+}
+.club-badge {
+    display: inline-flex; /* 使用flex布局使图标和文字并排 */
+    align-items: center; /* 垂直居中对齐 */
+    background-color: #f0f0f0; /* 背景颜色 */
+    padding: 5px 10px; /* 内边距 */
+    border-radius: 15px; /* 圆角边框 */
+    font-size: 14px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+}
+
+.club-icon {
+    width: 16px; /* 图标宽度 */
+    height: 16px; /* 图标高度 */
+    margin-right: 5px; /* 图标和文字之间的间距 */
+}
+
+.club-text {
+    white-space: nowrap; /* 防止文本换行 */
+    color: #ffba75;
+}
 
+.sub-topic p {
+    margin: 5px 0;
+}
 </style>

vueHomilyLink/src/views/LiveView.vue

@@ -1,10 +1,300 @@
+<template>
+    <!-- 卡片 -->
+    <div class="card-container">
+        <div v-for="(live, index) in liveList" :key="index" class="card">
+            <div class="cover-image" :class="{ 'no-overlay': !live.status == 1 }" style="position:relative;">
+                <img :src=live.cover alt="节目1">
+                <div v-if="live.status == 1" class="overlay">即将开播</div>
+                <div v-if="live.status == 1" class="start-time">{{ getDateDay(live.startTime) }} {{ live.startTime.slice(11, 16) }}开播</div>
+            </div>
+            <div class="card-content">
+                <div class="card-title">{{ live.liveName }}</div>
+                <div class="card-actions">
+                    <!-- 用户头像 -->
+                    <img :src=live.user.avatar alt="节目1" class="user-avatar">
+                    <!-- 用户昵称，与头像同行显示 -->
+                    <div class="card-info">{{ live.user.userName }}</div>
+                    <!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
+                    <a v-if="live.reservation == 0" href="#" class="card-button"
+                        @click="booking(live.id, live.user.userId)">预约</a>
+                    <a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
 <script setup>
+import { ref } from 'vue';
+/*
+模拟后端数据
+*/
+const liveList = ref([]);
+
+
+//获取直播列表
+function getLive() {
+    liveList.value = [
+        {
+            id: 1,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 1,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2024-12-01 09:55",
+            reservation: 1, //0表示未预约，1表示已预约
+            status: 1 //0表示未开播，1表示已开播
+        },
+        {
+            id: 2,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 2,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2024-12-01 09:55",
+            reservation: 1, //0表示未预约，1表示已预约
+            status: 1
+        },
+        {
+            id: 3,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 3,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2024-11-30 12:55",
+            reservation: 1, //0表示未预约，1表示已预约
+            status: 1
+        },
+        {
+            id: 4,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 4,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2024-12-30 12:55",
+            reservation: 0, //0表示未预约，1表示已预约
+            status: 1
+        },
+        {
+            id: 5,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 5,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2024-12-30 12:55",
+            reservation: 0, //0表示未预约，1表示已预约
+            status: 1,
+        }
+    ]
+}
+getLive();
+
+// 判断开播日期与当前时间的关系（今天、明天、其他）
+function getDateDay(startTime) {
+    const now = new Date();
+    const start = new Date(startTime);
+    const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+    if (now.toDateString() == start.toDateString()) {
+        return "今天";
+    } else if (now.getTime() + oneDay >= start.getTime()) {
+        return "明天";
+    } else {
+        return startTime.slice(5, 10);
+    }
+}
+
+// //获取用户信息
+// const userInfo = ref([]);
+// function getUserInfo() {
+//     userInfo.value = {
+//         userId: 1,
+//         userName: "冷辉老师",
+//         avatar: "src/assets/live.jpg",
+//         //预约信息
+//         reservationList: [1,2,3]
+//     }
+// }
+// getUserInfo();
+
+// console.log(userInfo.value);
+
+// /* 判断预约状态 */
+// function isBooking(liveId) {
+//     for (let i = 0; i < userInfo.value.reservationList.length; i++) {
+//         if (userInfo.value.reservationList[i] == liveId) {
+//             return true;
+//         }
+//     }
+//     return false;
+// }
+
+
+
+/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/
+function booking(liveId, userId) {
+    alert("预约成功！");
+}
 
 </script>
 
-<template>
-直播
-</template>
+
 <style scoped>
+.card-container {
+    /*居中显示*/
+    margin-left: auto;
+    margin-right: auto;
+    /*宽度*/
+    width: 916px;
+    font-family: Arial, sans-serif;
+    padding: 0;
+    flex-wrap: wrap;
+    /*超出自动换行*/
+    background-color: #f4f4f4;
+    display: flex;
+    align-items: center;
+}
+
+.card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin: 10px;
+    overflow: hidden;
+    border: #666;
+    height: 190px;
+    width: 209px;
+}
+
+.card .cover-image img {
+    width: 100%;
+    height: 100%;
+    /*图片占满整个卡片*/
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.cover-image {
+    position: relative;
+    height: 120px;
+    width: 208px;
+    border-radius: 8px;
+}
+
+/*即将开播图层*/
+.overlay {
+    position: absolute;
+    z-index: 2;
+    text-align: center;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 18px;
+}
+
+/*开播时间*/
+.start-time {
+    position: absolute;
+    z-index: 2;
+    text-align: center;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #ffffffaf;
+    font-size: 15px;
+    width: 120px;
+}
+
+.cover-image::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 207px;
+    height: 120px;
+    /*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+}
+
+/*用于隐藏样式*/
+.cover-image.no-overlay::before {
+    display: none;
+}
+
+.card-content {
+    padding: 8px;
+}
+
+.card-title {
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+}
+
+.card-info {
+    font-size: 14px;
+    color: #666;
+}
+
+.card-button {
+    display: inline-block;
+    padding: 5px 5px;
+    background-color: #eb8b31;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 20px;
+    font-size: small;
+    width: 50px;
+    text-align: center;
+    margin-left: auto;
+}
+
+.card-actions {
+    display: flex;
+    align-items: center;
+    /* 垂直居中对齐 */
+    justify-content: space-between;
+    /* 按钮右对齐 */
+}
+
+.user-avatar {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+}
+
+.card-info {
+    margin-left: 5px;
+    /* 昵称与头像之间的间距 */
+    margin-top: 0;
+    /* 移除顶部外边距 */
+    /*超长以后将内容省略显示*/
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
+    width: 90px;
+    font-size: 12px;
+}
 </style>

vueHomilyLink/src/views/club/BoguView.vue

@@ -0,0 +1,291 @@
+<script setup>
+import ClubApi from '@/api/ClubApi';
+import ClubNav from '@/components/ClubNav.vue';
+import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
+
+// 俱乐部
+const club = ref()
+// 加载俱乐部信息
+function loadClub(){
+  //调用查询俱乐部api
+  
+  ClubApi.getClub(1).then((result) =>{
+    console.log(result)
+    console.log("++++++++",result.data);
+    club.value = result.data;
+    console.log(club.value);
+  })
+}
+loadClub();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  ClubApi.getShows(1).then((result) =>{
+    console.log(result);
+    shows.value = result.data;
+  })
+}
+// 
+loadShows();
+</script>
+
+<template>
+    <Nav></Nav>
+    <ClubNav></ClubNav>
+    <div class="club">
+    <!-- 俱乐部相关信息 -->
+    <header>
+      <div class="club-header1">
+        <img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图">
+        <button class="club-button" @click="handleMore">查看更多</button>
+      </div>
+      
+      <p v-if="club && club[0]">{{ club[0].introduction }}</p>
+    </header>
+    <!-- 俱乐部内容 -->
+    <section class="special-topic">
+      <div class="special-topic">
+        <h2>专题</h2>
+      </div>
+      <div class="topic">
+        <div class="topic-title">
+          <p>前言股市投资分享之左侧交易</p>
+          <span @click="handleMore">查看更多</span>
+        </div>
+        
+        <!-- 展示列表 -->
+        <div class="sub-topic">
+          <ul class="display-list">
+            <li v-for="show in shows">
+              <!-- 左边 -->
+              <div class="sub-left">
+                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                <img v-if="show.flagType==1" class="player" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAApeSURBVHic7Z39b1PXGcc/8bJSEDQMSpWEZHOBLtkMpbxIUMFWyCLeSqwRLYA2aWiaFEAg5YdICCEQ/wC/IRFA+2lbW2qkVrxkgfC6F8bSUBBtWtEYtYaYvGDyAjGEhhTvhxODMY7ta9/rc659PhISsc+955G/eu4953nOOU8e2cEkYBowFZgMFIx+NgF4FRgHvBJ1zTDwPfAYeAQMAveBAaAXCIx+ZmvyZBuQAnmAEygFSoAihJhWMAh0AX6gA/ABIYv6sgS7CFwAlAGzgBlAviQ7RoBvgZvANwiPVxqVBR4PzAZcCI9VER/wFdAGDMk1JTYqCuwE5gFzJdthlOvANYToyqCSwLOBRYh3q53pAFoQXi0dFQR+G3gXMVjKJrqAy8AXMo2QKfBbwK+xv8cmogP4F+CV0bkMgacAFYhHci7RBpwH+jLZaaYFXgJUSuhXFULAWeBSpjrM1A/9BrAaeDND/anOd0ATcNfqjjIh8ELg/Qz1ZSdCQCNwxcpOfmTlzQE38B5a3FjkAT8HXkNExSzBKoGnAL8Hyi26fzZRBMwEbmFBNMwKgZ3AHxDZHU1yFCBCsp2IbJZpmC2wCyFudGpOk5hXgHcQacqAWTc1U+B5QLWJ98tVXIgsVbcZNzNL4AWIAZXGHMp5notOCzMEnocW1wrKMMGT0xXYhX4sW0k5ab6T0xHYiRhQaazFhZhCpTS6TlXgKejRciaZBdwghXmyI8UO1wETU7xWY5yJiN/cMKl4sBsdoZJBASmENY0KvBARW9bIoQh4iIh4JYWRR/QbiKyQRi7vA4XJNjYi8Gp0VkgVViXbMNlH9BJEtEqjBpMRi/BvJ2qYjAdPQSyz0ahFJfB6okbJCFyBfjSrSkWiBokEfgsFVz/W1tY629vbN7W3t28KhUJ7PR7PMo/Hs0y2XRL4JSJmPSaJPPPPKLZu2ePxLKupqYk5VQsGg8EdO3Z80tDQ8F2m7ZKIH/jLWF/GE/htFEskxBM3khMnTlxyu91nM2GTInyK2Bv1EvFG0b/Fun23hklWXICysrKf1tbWlg8NDfVduXLF1CUwivITxlidOdY7eDY23ytUXFxceODAgT8eP348F2YAhcCcWF+M5cFViNinMng8nk2pXJdD3vwacDX6w1ge7ESxgRWIAVSq14a9+dixY9nszSXE2CgfS+B5lpuSAhMnTkw7Pel2u5fcuXNn89atW7N1C81L2kULPB777aw3RJZ781yEhs+IFli5oIZVhL158+bN2ebNL2gYLbArg4aYzsjIyBMj7YuLiwsPHjyYbd78goaRAheg7mk2SZGfn//jVK4Le/OWLVucJpskAycRM6BIgePGNLOd4uLiwoaGhk1Z4s3PtIwUeJYEQ5TD7XYv6ejosLs3P9MyLHAe4gQ5DVBSUmJ3b57BaJ4hLLATeccDKouNvTmf0fFUWGDlIleqEOHNv5Fti0FK4bnAJRINsQVut3upzby5BJ4LbOvMUaawmTcXgRB4Egrlfe1A2Jtra2udsm2JwyRgkgN9lkZKlJSUFB46dEh1b57mQByDr0kRt9u91O/31yrqzVMdiEXUmjSYPn16kaLePNmBYis37IyC3lyQB/wJ+JlsSxIRCoX2yrbBCC0tLV8uXrz4E8lm3HIgSs9oTGbRokVzbt++XSvZjAkORF0hjQWUlpYWSd5x8aoDUTRKYxE1NTXvSRR5nAN9kEo280qqh7BoDJDsjgwr0AJnOVrgDOD1en2y+nYgqnBqLGTfvn3/lNT1sANRYlVjEV6v13f48GGfpO6/dyDq52oswOv1+iR6L8DjfERxZI3J+P3+rmXLlh3p7OyU+YR85CALqlyrxMDAwP29e/ceLS0tPSxZXIDBfGxQ5NguXLx48fONGzc29/T0qDJwve/A5CofuUh/f//Anj17PMuXLz+pkLgAA/lAr2wr7MyFCxc+37Bhw+lAIGBo41uG6HVgYgmXXKK/v79/9+7dH1dUVJxUVFyAQD5ikDWIXlmZNOfOnbtSU1PT3N/fr6qwMKprOFSZdvmWXKC3t7d/165dRyorKxsVFxdGNQ3vR/IjCiVqxuDcuXOt1dXVzQ8ePBiRbUuS+OF5sqFDoiFK09vb27dz584jlZWV/7CRuDCqadiDfYjzh/UOwwjOnDnzWXV1dXMwGPxBti0GGUFo+syDQ8C3sqxRjUAg0Ltjx46PVqxY0WRDcUFoGYIXPfYm+j1Mc3PzZ+vWrTv96NGjp7JtSYOb4f9EJvwtq0JtBwKBwL36+voPV65c2WRzcSFCy0gPvo94bjszbIxpPH369AeHw2G4FtTp06db3G538/DwsN2FBaHhs/xC9JKdrzJqiskYFbenp+defX39B6tWrTqVJeJClIbRo+Y2cqQ20qlTp/5XVVXVPDIyEpJti8m0Rf4R7cFDjHFyeLbQ3d0dqKur+2D16tWns1Dc60QVsIw1772GggeSBoPBYLonzjY1NV1es2ZNs1k2Kci16A9iLZv1oWBkKx1xu7u779bV1f09y8X1MxrciGSsQckTRMkWZXC5XHkul8tp9LrGxsbLCxYs+LilpaXfArNU4gxwN/rDsRa+t2HzDFNXV1fP9u3b/7Z27dps9tow3cCXsb6IN614AvzCEnNS4OjRo75kvfjkyZP/Xbhwoae1tTXbvTbMGaAn1hfxtq58gWLv4vXr11+Mtw1kcHDw4bZt2/5aVVV1JoNmycZPnJlPosBAEFEgSxn2799/vaur61Z5efnkvr6+galTp072er2+8+fPX58/f/6Hra2tubaIsJE46+qSKTr5O3LoqH+b8TXgidcgmd2F5xlNPWmU43yiBsnEbocQCeSZaZujMZOzwI1EjZLdH3wJyKWKnqrjA/6TTEMjG8Cb0I9qVTiVbEMj6bWHo/9yftWHZBqB9mQbG02OdyKKIOrzpeVwFbhg5ALDqx8Qy0Fmos+4zDQdwBGjF6V6CMuniCCIJjMEEb+5YVLxYBBTp07gnRSv1xjjI1JM/qQqMIh9xQFsXu/QBhzFwKAqmnQEBiHwfaA8zftoYnMMkfRJmXQFBpGLHCTHax9awAlilGw3ihkCg3g/aE82j2OYIC6YJzAIT9bv5PQ5SpqP5UjMFBiEwLcQ1S/1McXGCCJGyykPqGJhtsAgRtc3gGJ0MCRZOkhjKhQPKwQGMU++hg5rJsNVRIRqKFHDVLBK4DDfoBMU8WjEYGzZKMks2TGDQmAVNt65aDI+RMqv2+qOMiVwmKWAXatqm8VZkkzWm0GmBQZ4HahAsZ0TGeBrxBqqe5nsVIbAYcqAX5H9xan9wL+RdIKCTIHDzAXeRbyns4lu4DKSt+OqIHCYOcAi7O/RfqCFMfYKZRqVBA7jBOah4B7lBFxHzP19ku14ARUFDjMesaPChbrTKx/iTIw2LApUpIvKAkdSgBiUzQJmIO9EvhHEIWM3EYMm5U/Lt4vAkeQhPLoU8b4uwrqjkAcR8WE/Il7sw2Zrw+0ocCwmAdOAqYiS9QWjn01AlM8dx8vZrWFEzajHiMozgwiPHEDs1guQBQVL/g8kNuAku4fBgAAAAABJRU5ErkJggg==">
+              </div>
+              <!-- 右边 -->
+              <div class="sub-right">
+                <div class="right-inline">
+                  <img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo">
+                  <span :name="show.name">{{ show.name }}</span>
+                </div>
+                <div class="right-inline">
+                  <div class="yellow">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAI4SURBVFiF7VhBcsIwDFy5/VfNDPRNcIKcwptKZ3Af1qiHJMVOZFty6K17gqDIy8peKQH+0QbamoD7vZ8/D3DeYQgAQKfPsDV3Eznu956JztNXX4xl6gDg5fRxsa5jIheRKhLK3s/UWUiqyG0lleRi6hyGoCl7ldxE7K5cO0D5BzQqutKP3/37xUAM7njbaWOJ+Pzdv1+K+UrEiPic+32JeeNjVE8FIj7Hp11Fjvu9txBLFmTu6lHRWkT3HEGR3AAnBpcw758Wf4tsKcGKnLWcQFLSGcFyPwAvqbci11rOJIextICsXmIlLaoBgDveVpY0XA9szUPMu3hbFK1EA6GkM0Lmej7XQr3X+MtCtaApD0EWyB1vu5JNAOPBK1UqKYdUCms/1CLXeeLSujhYSqJxciu0nee1FgCMBIfr4Y2Yuy1z2mOAYK+J/1VOYbyeie6tKkZqFdeJebjHh3GCraGlzMP1cG+yKOsNgI3gtJe9ntBDpGaf+4sTDKS92S0uhnW4CG2cNW+CJuWY6Uu8nrMjZa9ddpuEnDaJVNL5ND7TE6WGXT3ucaPPPPyEpSda8wLSyFRRL5a+4F1mT5QGiDW5ygaej7rGu2LLKf3pXP8WD0RNvWlA8KWYmOBwPfDk/EGKyTWA7HOr8Xm1GaWpJ2sldPoMhUHyKaiNY9Un/tbRvYblSC7GaBJxv/e1qdWAlc3kYHrLtFFFNakZTe/nfu2hTjQA4+lvGVI3v9kEHmUHUlt4xtvNf7TgB2p5V6EQkIsLAAAAAElFTkSuQmCC" class="img2">
+                    <span  v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span>
+                  </div>
+                </div>
+                <div class="right-inline">
+                  <!-- HomilyLink -->
+                  <div class="right-item">
+                    <img :src="show.user.avatar" class="img1">
+                    <div :username="show.user.username">{{show.user.username}}</div>
+                  </div>
+                  <!-- 日期 -->
+                  <div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div>
+                  <!-- 观看 -->
+                  <div class="right-item">
+                    <img src="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" class="img2">
+                    <div :viewCount="viewCount">{{ show.viewCount }}</div>
+                  </div>
+                  <!-- 评论 -->
+                  <div class="right-item">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2">
+                    <div :comments="show.comments">{{ show.comments }}</div>
+                  </div>
+                  <!-- 点赞 -->
+                  <div class="right-item">
+                    <img src="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=" class="img2">
+                    <div :likes="show.likes">{{ show.likes }}</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped>
+.club{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+header {
+    background: linear-gradient(to right,  #ffe5ca,#ffca95,#ffa953);
+    padding: 20px;
+    border-radius: 2%;
+}
+
+.club-header1 {
+    display: flex; /* 启用flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between; /* 在主轴上两端对齐 */
+    padding: 10px; /* 可选：根据需要添加内边距 */
+}
+
+.club-image {
+    height: 80px;
+    width: 80px;
+    max-width: 100%; 
+    /* height: auto; 保持图片的原始宽高比 */
+    margin-left: 50px;
+    border-radius: 100%; /* 设置图片为圆形 */
+}
+
+.club-button{
+    margin-left: auto; /* 将按钮推向右侧 */
+    margin-right: 50px;
+    padding: 5px;
+    background-color: #ff9900;
+    color: white;
+    border: none;
+    top: 20px; /* 距离顶部20px */
+    right: 20px; /* 距离右侧20px */
+    cursor: pointer;
+    color: #72706a;
+    border-radius: 10%;
+}
+
+header p {
+    margin: 10px 10px;
+    
+}
+.special-topic {
+    margin: 20px;
+}
+.topic{
+  background: linear-gradient(to bottom,  #fff9e9,#fffcf3,#fffffd);
+  h3 {
+    background-color: #e0e0e0;
+    padding: 10px;
+    margin: 0;
+}
+}
+
+.special-topic {
+    background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
+    padding: 10px; /* 内边距，根据需要调整 */
+    margin: 20px 0; /* 外边距，根据需要调整 */
+}
+
+.special-topic h2 {
+    margin: 0; /* 移除默认的外边距 */
+    padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
+    border-bottom: 2px solid #007bff; /* 下划线样式 */
+    display: inline-block; /* 使下划线只在文字下方 */
+}
+.topic-title{
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin-left: auto; /* 向右对齐 */
+        margin-right: 50px;
+        color: #8e8e8e;
+        font-size: 14px;
+    }
+    p{
+        display: inline-block;
+        font-size: 20px;
+        
+    }
+}
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex; 
+
+}
+.display-list{
+    list-style-type: none;
+    padding: 0px;
+    
+}
+.sub-topic li{
+    display: flex; 
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+    position: relative;
+    .sub-image{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .player{
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        left: 40%;
+        top: 40%;
+        z-index: 999;
+    }
+}
+
+.sub-right{
+    margin-left: 20px;
+    
+}
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+    .yellow{
+        display: flex;
+        color: #e9a479;
+        font-size: 14px;
+        height: 18px;
+        background-color: #ffefdf;
+    }
+    .right-item{
+        display: flex;
+        color: #8e8e8e;
+        font-size: 14px;
+        margin-right: 18px;
+        align-items: center;
+    }
+}
+
+.logo{
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+}
+.img1{
+    width: 22px;
+    height: 22px;
+}
+.img2{
+    width: 18px;
+    height: 18px;
+}
+.club-badge {
+    display: inline-flex; /* 使用flex布局使图标和文字并排 */
+    align-items: center; /* 垂直居中对齐 */
+    background-color: #f0f0f0; /* 背景颜色 */
+    padding: 5px 10px; /* 内边距 */
+    border-radius: 15px; /* 圆角边框 */
+    font-size: 14px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+}
+
+.club-icon {
+    width: 16px; /* 图标宽度 */
+    height: 16px; /* 图标高度 */
+    margin-right: 5px; /* 图标和文字之间的间距 */
+}
+
+.club-text {
+    white-space: nowrap; /* 防止文本换行 */
+    color: #ffba75;
+}
+
+.sub-topic p {
+    margin: 5px 0;
+}
+</style>

vueHomilyLink/src/views/club/MuminView.vue

@@ -0,0 +1,290 @@
+<script setup>
+import ClubApi from '@/api/ClubApi';
+import ClubNav from '@/components/ClubNav.vue';
+import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
+
+// 俱乐部
+const club = ref()
+// 加载俱乐部信息
+function loadClub(){
+  //调用查询俱乐部api
+  
+  ClubApi.getClub(2).then((result) =>{
+    console.log(result)
+    console.log("++++++++",result.data);
+    club.value = result;
+    console.log(club.value);
+  })
+}
+loadClub();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  ClubApi.getShows(2).then((result) =>{
+    console.log(result);
+    shows.value = result;
+  })
+}
+// 
+loadShows();
+</script>
+
+<template>
+    <Nav></Nav>
+    <ClubNav></ClubNav>
+    <div class="club">
+    <!-- 俱乐部相关信息 -->
+    <header>
+      <div class="club-header1">
+        <img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图">
+        <button class="club-button" @click="handleMore">查看更多</button>
+      </div>
+      
+      <p v-if="club && club[0]">{{ club[0].introduction }}</p>
+    </header>
+    <!-- 俱乐部内容 -->
+    <section class="special-topic">
+      <div class="special-topic">
+        <h2>专题</h2>
+      </div>
+      <div class="topic">
+        <div class="topic-title">
+          <p>前言股市投资分享之左侧交易</p>
+          <span @click="handleMore">查看更多</span>
+        </div>
+        
+        <!-- 展示列表 -->
+        <div class="sub-topic">
+          <ul class="display-list">
+            <li v-for="show in shows">
+              <!-- 左边 -->
+              <div class="sub-left">
+                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                <img v-if="show.flagType==1" class="player" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAApeSURBVHic7Z39b1PXGcc/8bJSEDQMSpWEZHOBLtkMpbxIUMFWyCLeSqwRLYA2aWiaFEAg5YdICCEQ/wC/IRFA+2lbW2qkVrxkgfC6F8bSUBBtWtEYtYaYvGDyAjGEhhTvhxODMY7ta9/rc659PhISsc+955G/eu4953nOOU8e2cEkYBowFZgMFIx+NgF4FRgHvBJ1zTDwPfAYeAQMAveBAaAXCIx+ZmvyZBuQAnmAEygFSoAihJhWMAh0AX6gA/ABIYv6sgS7CFwAlAGzgBlAviQ7RoBvgZvANwiPVxqVBR4PzAZcCI9VER/wFdAGDMk1JTYqCuwE5gFzJdthlOvANYToyqCSwLOBRYh3q53pAFoQXi0dFQR+G3gXMVjKJrqAy8AXMo2QKfBbwK+xv8cmogP4F+CV0bkMgacAFYhHci7RBpwH+jLZaaYFXgJUSuhXFULAWeBSpjrM1A/9BrAaeDND/anOd0ATcNfqjjIh8ELg/Qz1ZSdCQCNwxcpOfmTlzQE38B5a3FjkAT8HXkNExSzBKoGnAL8Hyi26fzZRBMwEbmFBNMwKgZ3AHxDZHU1yFCBCsp2IbJZpmC2wCyFudGpOk5hXgHcQacqAWTc1U+B5QLWJ98tVXIgsVbcZNzNL4AWIAZXGHMp5notOCzMEnocW1wrKMMGT0xXYhX4sW0k5ab6T0xHYiRhQaazFhZhCpTS6TlXgKejRciaZBdwghXmyI8UO1wETU7xWY5yJiN/cMKl4sBsdoZJBASmENY0KvBARW9bIoQh4iIh4JYWRR/QbiKyQRi7vA4XJNjYi8Gp0VkgVViXbMNlH9BJEtEqjBpMRi/BvJ2qYjAdPQSyz0ahFJfB6okbJCFyBfjSrSkWiBokEfgsFVz/W1tY629vbN7W3t28KhUJ7PR7PMo/Hs0y2XRL4JSJmPSaJPPPPKLZu2ePxLKupqYk5VQsGg8EdO3Z80tDQ8F2m7ZKIH/jLWF/GE/htFEskxBM3khMnTlxyu91nM2GTInyK2Bv1EvFG0b/Fun23hklWXICysrKf1tbWlg8NDfVduXLF1CUwivITxlidOdY7eDY23ytUXFxceODAgT8eP348F2YAhcCcWF+M5cFViNinMng8nk2pXJdD3vwacDX6w1ge7ESxgRWIAVSq14a9+dixY9nszSXE2CgfS+B5lpuSAhMnTkw7Pel2u5fcuXNn89atW7N1C81L2kULPB777aw3RJZ781yEhs+IFli5oIZVhL158+bN2ebNL2gYLbArg4aYzsjIyBMj7YuLiwsPHjyYbd78goaRAheg7mk2SZGfn//jVK4Le/OWLVucJpskAycRM6BIgePGNLOd4uLiwoaGhk1Z4s3PtIwUeJYEQ5TD7XYv6ejosLs3P9MyLHAe4gQ5DVBSUmJ3b57BaJ4hLLATeccDKouNvTmf0fFUWGDlIleqEOHNv5Fti0FK4bnAJRINsQVut3upzby5BJ4LbOvMUaawmTcXgRB4Egrlfe1A2Jtra2udsm2JwyRgkgN9lkZKlJSUFB46dEh1b57mQByDr0kRt9u91O/31yrqzVMdiEXUmjSYPn16kaLePNmBYis37IyC3lyQB/wJ+JlsSxIRCoX2yrbBCC0tLV8uXrz4E8lm3HIgSs9oTGbRokVzbt++XSvZjAkORF0hjQWUlpYWSd5x8aoDUTRKYxE1NTXvSRR5nAN9kEo280qqh7BoDJDsjgwr0AJnOVrgDOD1en2y+nYgqnBqLGTfvn3/lNT1sANRYlVjEV6v13f48GGfpO6/dyDq52oswOv1+iR6L8DjfERxZI3J+P3+rmXLlh3p7OyU+YR85CALqlyrxMDAwP29e/ceLS0tPSxZXIDBfGxQ5NguXLx48fONGzc29/T0qDJwve/A5CofuUh/f//Anj17PMuXLz+pkLgAA/lAr2wr7MyFCxc+37Bhw+lAIGBo41uG6HVgYgmXXKK/v79/9+7dH1dUVJxUVFyAQD5ikDWIXlmZNOfOnbtSU1PT3N/fr6qwMKprOFSZdvmWXKC3t7d/165dRyorKxsVFxdGNQ3vR/IjCiVqxuDcuXOt1dXVzQ8ePBiRbUuS+OF5sqFDoiFK09vb27dz584jlZWV/7CRuDCqadiDfYjzh/UOwwjOnDnzWXV1dXMwGPxBti0GGUFo+syDQ8C3sqxRjUAg0Ltjx46PVqxY0WRDcUFoGYIXPfYm+j1Mc3PzZ+vWrTv96NGjp7JtSYOb4f9EJvwtq0JtBwKBwL36+voPV65c2WRzcSFCy0gPvo94bjszbIxpPH369AeHw2G4FtTp06db3G538/DwsN2FBaHhs/xC9JKdrzJqiskYFbenp+defX39B6tWrTqVJeJClIbRo+Y2cqQ20qlTp/5XVVXVPDIyEpJti8m0Rf4R7cFDjHFyeLbQ3d0dqKur+2D16tWns1Dc60QVsIw1772GggeSBoPBYLonzjY1NV1es2ZNs1k2Kci16A9iLZv1oWBkKx1xu7u779bV1f09y8X1MxrciGSsQckTRMkWZXC5XHkul8tp9LrGxsbLCxYs+LilpaXfArNU4gxwN/rDsRa+t2HzDFNXV1fP9u3b/7Z27dps9tow3cCXsb6IN614AvzCEnNS4OjRo75kvfjkyZP/Xbhwoae1tTXbvTbMGaAn1hfxtq58gWLv4vXr11+Mtw1kcHDw4bZt2/5aVVV1JoNmycZPnJlPosBAEFEgSxn2799/vaur61Z5efnkvr6+galTp072er2+8+fPX58/f/6Hra2tubaIsJE46+qSKTr5O3LoqH+b8TXgidcgmd2F5xlNPWmU43yiBsnEbocQCeSZaZujMZOzwI1EjZLdH3wJyKWKnqrjA/6TTEMjG8Cb0I9qVTiVbEMj6bWHo/9yftWHZBqB9mQbG02OdyKKIOrzpeVwFbhg5ALDqx8Qy0Fmos+4zDQdwBGjF6V6CMuniCCIJjMEEb+5YVLxYBBTp07gnRSv1xjjI1JM/qQqMIh9xQFsXu/QBhzFwKAqmnQEBiHwfaA8zftoYnMMkfRJmXQFBpGLHCTHax9awAlilGw3ihkCg3g/aE82j2OYIC6YJzAIT9bv5PQ5SpqP5UjMFBiEwLcQ1S/1McXGCCJGyykPqGJhtsAgRtc3gGJ0MCRZOkhjKhQPKwQGMU++hg5rJsNVRIRqKFHDVLBK4DDfoBMU8WjEYGzZKMks2TGDQmAVNt65aDI+RMqv2+qOMiVwmKWAXatqm8VZkkzWm0GmBQZ4HahAsZ0TGeBrxBqqe5nsVIbAYcqAX5H9xan9wL+RdIKCTIHDzAXeRbyns4lu4DKSt+OqIHCYOcAi7O/RfqCFMfYKZRqVBA7jBOah4B7lBFxHzP19ku14ARUFDjMesaPChbrTKx/iTIw2LApUpIvKAkdSgBiUzQJmIO9EvhHEIWM3EYMm5U/Lt4vAkeQhPLoU8b4uwrqjkAcR8WE/Il7sw2Zrw+0ocCwmAdOAqYiS9QWjn01AlM8dx8vZrWFEzajHiMozgwiPHEDs1guQBQVL/g8kNuAku4fBgAAAAABJRU5ErkJggg==">
+              </div>
+              <!-- 右边 -->
+              <div class="sub-right">
+                <div class="right-inline">
+                  <img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo">
+                  <span :name="show.name">{{ show.name }}</span>
+                </div>
+                <div class="right-inline">
+                  <div class="yellow">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAJASURBVFiF7VhBdqswDBz5914lx/jpLZr3tzXONo/couQY4R+sqAueEwdkLJl011mCLYaRNRIAv6gDbQ3Qni7NLZgbGx7dAADtv7/D1thV5NrTpXF/2AMAM5r11RwAwB/eWutzTOQiqTKhHDhYSKrIbSeVggOPbtCkvUiuPV0acnzVPJYIg/4Fyiq6tZuh+2y1xADg432/064FyIfus11bkSU3bSSvf9h08Ikw6PeQT6t9DpHctMFC7I7xi4JlPTm+5giK5MiN4uI1xPNT42/RlhbX5xfs6QRiSiNsqZ28UlJPUK4unSmsqQVk9R6spE41wB/2C0sKXc/WODzSLj0Wq1aiDCmqZE0tsFTvZRbydpMIgy49so9/vO93azYBxMLLZ2qWVikVtn6oRa7zpKl16WI5TNnJrdB2npfSggnkj+f+dfyisGVOsw4QN+VKxsuMhhxfa1WMapWIpTxu5OIEW4Y9zcdzf62xqEor0RNsT5fGMgemIlX73E9UMPDYm116UWucFoO1xJ2jSjlm/i8SydiRvtc+dpsHctogUkpjNT7TExe953jui+WeNnrJu2LrS8+PNS4gpLWs3l36nHfVeeJygFiQKx3gWOo677pbzvpLy/1bLIiSeqHrWe9d5EPXM7mxyb10rgFkv1st36vbkJ96slYyHWZ5kHwe1sex4hd/7ehewnwkl1A0YX94a3mk3bNUJMKgIQYY/zJtUVHyvuKemgfd/WudaKzO2iF1859NIFb2NCSmtvCMv5u/qME3731X4FmGtJ4AAAAASUVORK5CYII=" class="img2">
+                    <span  v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span>
+                  </div>
+                </div>
+                <div class="right-inline">
+                  <!-- HomilyLink -->
+                  <div class="right-item">
+                    <img :src="show.user.avatar" class="img1">
+                    <div :username="show.user.username">{{show.user.username}}</div>
+                  </div>
+                  <!-- 日期 -->
+                  <div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div>
+                  <!-- 观看 -->
+                  <div class="right-item">
+                    <img src="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" class="img2">
+                    <div :viewCount="viewCount">{{ show.viewCount }}</div>
+                  </div>
+                  <!-- 评论 -->
+                  <div class="right-item">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2">
+                    <div :comments="show.comments">{{ show.comments }}</div>
+                  </div>
+                  <!-- 点赞 -->
+                  <div class="right-item">
+                    <img src="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=" class="img2">
+                    <div :likes="show.likes">{{ show.likes }}</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped>
+.club{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+header {
+    background: linear-gradient(to right,  #f5f8fa,#dde7ee,#c7d9e5);
+    padding: 20px;
+    border-radius: 2%;
+}
+
+.club-header1 {
+    display: flex; /* 启用flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between; /* 在主轴上两端对齐 */
+    padding: 10px; /* 可选：根据需要添加内边距 */
+}
+
+.club-image {
+    height: 80px;
+    width: 80px;
+    max-width: 100%; 
+    /* height: auto; 保持图片的原始宽高比 */
+    margin-left: 50px;
+    border-radius: 100%; /* 设置图片为圆形 */
+}
+
+.club-button{
+    margin-left: auto; /* 将按钮推向右侧 */
+    margin-right: 50px;
+    padding: 5px;
+    background-color: #bdced9;
+    color: white;
+    border: none;
+    top: 20px; /* 距离顶部20px */
+    right: 20px; /* 距离右侧20px */
+    cursor: pointer;
+    color: #72706a;
+    border-radius: 10%;
+}
+
+header p {
+    margin: 10px 10px;
+    
+}
+.special-topic {
+    margin: 20px;
+}
+.topic{
+  h3 {
+    background-color: #e0e0e0;
+    padding: 10px;
+    margin: 0;
+}
+}
+
+.special-topic {
+    background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
+    padding: 10px; /* 内边距，根据需要调整 */
+    margin: 20px 0; /* 外边距，根据需要调整 */
+}
+
+.special-topic h2 {
+    margin: 0; /* 移除默认的外边距 */
+    padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
+    border-bottom: 2px solid #007bff; /* 下划线样式 */
+    display: inline-block; /* 使下划线只在文字下方 */
+}
+.topic-title{
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin-left: auto; /* 向右对齐 */
+        margin-right: 50px;
+        color: #8e8e8e;
+        font-size: 14px;
+    }
+    p{
+        display: inline-block;
+        font-size: 20px;
+        
+    }
+}
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex; 
+
+}
+.display-list{
+    list-style-type: none;
+    padding: 0px;
+    
+}
+.sub-topic li{
+    display: flex; 
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+    position: relative;
+    .sub-image{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .player{
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        left: 40%;
+        top: 40%;
+        z-index: 999;
+    }
+}
+
+.sub-right{
+    margin-left: 20px;
+    
+}
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+    .yellow{
+        display: flex;
+        color: #848b99;
+        font-size: 14px;
+        height: 18px;
+        background-color: #ecf2ff;
+    }
+    .right-item{
+        display: flex;
+        color: #8e8e8e;
+        font-size: 14px;
+        margin-right: 18px;
+        align-items: center;
+    }
+}
+
+.logo{
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+}
+.img1{
+    width: 22px;
+    height: 22px;
+}
+.img2{
+    width: 18px;
+    height: 18px;
+}
+.club-badge {
+    display: inline-flex; /* 使用flex布局使图标和文字并排 */
+    align-items: center; /* 垂直居中对齐 */
+    background-color: #f0f0f0; /* 背景颜色 */
+    padding: 5px 10px; /* 内边距 */
+    border-radius: 15px; /* 圆角边框 */
+    font-size: 14px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+}
+
+.club-icon {
+    width: 16px; /* 图标宽度 */
+    height: 16px; /* 图标高度 */
+    margin-right: 5px; /* 图标和文字之间的间距 */
+}
+
+.club-text {
+    white-space: nowrap; /* 防止文本换行 */
+    color: #ffba75;
+}
+
+.sub-topic p {
+    margin: 5px 0;
+}
+</style>

vueHomilyLink/src/views/club/shenQiang.vue

@@ -0,0 +1,291 @@
+<script setup>
+import ClubApi from '@/api/ClubApi';
+import ClubNav from '@/components/ClubNav.vue';
+import Nav from '@/components/Nav.vue';
+import { ref } from 'vue';
+
+// 俱乐部
+const club = ref()
+// 加载俱乐部信息
+function loadClub(){
+  //调用查询俱乐部api
+  
+  ClubApi.getClub(3).then((result) =>{
+    console.log(result)
+    console.log("++++++++",result.data);
+    club.value = result;
+    console.log(club.value);
+  })
+}
+loadClub();
+// 展示列表
+const shows = ref([])
+// 加载展示列表
+function loadShows(){
+  ClubApi.getShows(3).then((result) =>{
+    console.log(result);
+    shows.value = result;
+  })
+}
+// 
+loadShows();
+</script>
+
+<template>
+    <Nav></Nav>
+    <ClubNav></ClubNav>
+    <div class="club">
+    <!-- 俱乐部相关信息 -->
+    <header>
+      <div class="club-header1">
+        <img v-if="club && club[0]" class="club-image" :src="club[0].image" alt="视频缩略图">
+        <button class="club-button" @click="handleMore">查看更多</button>
+      </div>
+      
+      <p v-if="club && club[0]">{{ club[0].introduction }}</p>
+    </header>
+    <!-- 俱乐部内容 -->
+    <section class="special-topic">
+      <div class="special-topic">
+        <h2>专题</h2>
+      </div>
+      <div class="topic">
+        <div class="topic-title">
+          <p>前言股市投资分享之左侧交易</p>
+          <span @click="handleMore">查看更多</span>
+        </div>
+        
+        <!-- 展示列表 -->
+        <div class="sub-topic">
+          <ul class="display-list">
+            <li v-for="show in shows">
+              <!-- 左边 -->
+              <div class="sub-left">
+                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                <img v-if="show.flagType==1" class="player" src="data:image/png;base64,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">
+              </div>
+              <!-- 右边 -->
+              <div class="sub-right">
+                <div class="right-inline">
+                  <img src="https://d31zlh4on95l9h.cloudfront.net/web/20241127093642/img/clubS2.fecd330b.png" class="logo">
+                  <span :name="show.name">{{ show.name }}</span>
+                </div>
+                <div class="right-inline">
+                  <div class="yellow">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIvSURBVFiF7VhbcsMgDFxo7lUyk+RWnsTDrZrMhB4sVj9iGoxBSDj96375IYu1BCsB8I8+mK0ODp5cvLaY3AQbAOA2mLDVdxe5gydnQOf51nG2BjQCwNfwcdGOoyKXkGIJ1QejUUNSRG4rqeWANE6wQZL2JrmZ2F04doDwByRRtNzLk39cFMRwHexeaksw55N/XDibKrmTf1wI5lx7nyNOfDyjJwLBnNPVLiJ38OQ0xLIBx7bVCwZ0rxEskrOYisYc4vzp0bdEljIeGbTpnJ3n0Qqa7wG4UvRW5HrTmflQpRYoR28hJT1RA4DrYFeSdPQTaf0QzD6dFqyUSFBIaUSoPOd8LQKzS2+yqAVJeqii49fB7jmZAJ4Lj8vUwnMpFdp6KEWt8qSptalxyYlEybWQVp5dywB4Ejz66ZNgxi19WmwgSFh/7euiKbzOgO69UUyixY6T8vglFzvYFnrSfPTTvUeiuqREQ3Cey07qOw1St879xQoGlrXZZg/D2rwIqZ3W7wJdkTOg79JzRo5EtTavNgtyUiellMbV+E5NLBXs5nJPC31l8xNyTdT6BcotExu9NPSMdqk1sdRArMi1JnBc6hLtSiWH++la/S4uiFb05gbBcTYpwaOfaFb+ULKpFYDqvlW5X+0G1/VUpeQ2mMA0km9Bqx1r7vh7W/cW8pa8BPFZSatrVWAlMzWoTpk2RlFMKqLrfC6RhxbRMNt1NambTzaBV9qBpSy843TzHz34AcF4N1nRyTl4AAAAAElFTkSuQmCC" class="img2">
+                    <span  v-if="club && club[0]" :clubname="club[0].name">{{ club[0].name }}</span>
+                  </div>
+                </div>
+                <div class="right-inline">
+                  <!-- HomilyLink -->
+                  <div class="right-item">
+                    <img :src="show.user.avatar" class="img1">
+                    <div :username="show.user.username">{{show.user.username}}</div>
+                  </div>
+                  <!-- 日期 -->
+                  <div :releaseTime="show.releaseTime" class="right-item">{{ show.releaseTime }}</div>
+                  <!-- 观看 -->
+                  <div class="right-item">
+                    <img src="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" class="img2">
+                    <div :viewCount="viewCount">{{ show.viewCount }}</div>
+                  </div>
+                  <!-- 评论 -->
+                  <div class="right-item">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==" class="img2">
+                    <div :comments="show.comments">{{ show.comments }}</div>
+                  </div>
+                  <!-- 点赞 -->
+                  <div class="right-item">
+                    <img src="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=" class="img2">
+                    <div :likes="show.likes">{{ show.likes }}</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped>
+.club{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+header {
+    background: linear-gradient(to right,  #dbeaf6,#8bc7f9,#30a0fc);
+    padding: 20px;
+    border-radius: 2%;
+}
+
+.club-header1 {
+    display: flex; /* 启用flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    justify-content: space-between; /* 在主轴上两端对齐 */
+    padding: 10px; /* 可选：根据需要添加内边距 */
+}
+
+.club-image {
+    height: 80px;
+    width: 80px;
+    max-width: 100%; 
+    /* height: auto; 保持图片的原始宽高比 */
+    margin-left: 50px;
+    border-radius: 100%; /* 设置图片为圆形 */
+}
+
+.club-button{
+    margin-left: auto; /* 将按钮推向右侧 */
+    margin-right: 50px;
+    padding: 5px;
+    background-color: #3d9eee;
+    color: white;
+    border: none;
+    top: 20px; /* 距离顶部20px */
+    right: 20px; /* 距离右侧20px */
+    cursor: pointer;
+    color: #72706a;
+    border-radius: 10%;
+}
+
+header p {
+    margin: 10px 10px;
+    
+}
+.special-topic {
+    margin: 20px;
+}
+.topic{
+  background: linear-gradient(to bottom,  #daebf8,#e7f3fc,#f8f9fa);
+  h3 {
+    background-color: #e0e0e0;
+    padding: 10px;
+    margin: 0;
+}
+}
+
+.special-topic {
+    background-color: #f8f8f8; /* 背景颜色，根据需要调整 */
+    padding: 10px; /* 内边距，根据需要调整 */
+    margin: 20px 0; /* 外边距，根据需要调整 */
+}
+
+.special-topic h2 {
+    margin: 0; /* 移除默认的外边距 */
+    padding-bottom: 5px; /* 下方内边距，为下划线留出空间 */
+    border-bottom: 2px solid #007bff; /* 下划线样式 */
+    display: inline-block; /* 使下划线只在文字下方 */
+}
+.topic-title{
+    display: flex;
+    justify-content: space-between;
+    span{
+        margin-left: auto; /* 向右对齐 */
+        margin-right: 50px;
+        color: #8e8e8e;
+        font-size: 14px;
+    }
+    p{
+        display: inline-block;
+        font-size: 20px;
+        
+    }
+}
+.sub-topic {
+    margin: 10px 0;
+    padding: 10px;
+    display: flex; 
+
+}
+.display-list{
+    list-style-type: none;
+    padding: 0px;
+    
+}
+.sub-topic li{
+    display: flex; 
+}
+.sub-left{
+    height: 112px;
+    width: 200px;
+    position: relative;
+    .sub-image{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .player{
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        left: 40%;
+        top: 40%;
+        z-index: 999;
+    }
+}
+
+.sub-right{
+    margin-left: 20px;
+    
+}
+.right-inline{
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    font-size: 16px;
+    .yellow{
+        display: flex;
+        color: #5f95fe;
+        font-size: 14px;
+        height: 18px;
+        background-color: #d5e2ff;
+    }
+    .right-item{
+        display: flex;
+        color: #8e8e8e;
+        font-size: 14px;
+        margin-right: 18px;
+        align-items: center;
+    }
+}
+
+.logo{
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+}
+.img1{
+    width: 22px;
+    height: 22px;
+}
+.img2{
+    width: 18px;
+    height: 18px;
+}
+.club-badge {
+    display: inline-flex; /* 使用flex布局使图标和文字并排 */
+    align-items: center; /* 垂直居中对齐 */
+    background-color: #f0f0f0; /* 背景颜色 */
+    padding: 5px 10px; /* 内边距 */
+    border-radius: 15px; /* 圆角边框 */
+    font-size: 14px; /* 字体大小 */
+    color: #333; /* 字体颜色 */
+}
+
+.club-icon {
+    width: 16px; /* 图标宽度 */
+    height: 16px; /* 图标高度 */
+    margin-right: 5px; /* 图标和文字之间的间距 */
+}
+
+.club-text {
+    white-space: nowrap; /* 防止文本换行 */
+    color: #ffba75;
+}
+
+.sub-topic p {
+    margin: 5px 0;
+}
+</style>

vueHomilyLink/vite.config.js

@@ -15,4 +15,13 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
-})
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.8.191:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})