diff --git a/vueHomilyLink/src/assets/main.css b/vueHomilyLink/src/assets/main.css
index 36fb845..62eb52b 100644
--- a/vueHomilyLink/src/assets/main.css
+++ b/vueHomilyLink/src/assets/main.css
@@ -1,35 +1,9 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+html,body{
+  margin:0px;
+  height: 100%;
 }
-
-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;
-  }
+#app{
+  height: 100%;
 }
diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index ddc7564..57dac43 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,10 +1,225 @@
 <script setup>
-
+import Nav from '@/components/Nav.vue';
 </script>
 
 <template>
-频道
+    <Nav></Nav>
+    <div class="channel">
+        <div class="channel-head">
+            <!-- 1-订阅按钮 -->
+            <button disabled="disabled" type="button" class="submit">已订阅</button>
+            <!-- 2-背景图片 -->
+            <img alt="" class="bc-image" src="https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg" />
+            <!-- 3-频道主题 -->
+            <div class="channel-title">
+            <!-- 频道头像 -->
+            <img alt="" class="title-image" src="https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png" />
+            <!-- 频道title -->
+            <div class="title-content">
+                <h3>量价时空四维预测术</h3>
+                <span>5525已订阅</span>
+                <p style="line-height: 18px;">.</p>
+            </div>
+            </div>
+        </div>
+        <!-- 频道内容 -->
+        <div class="channel-content">
+            <!-- 导航栏 -->
+            <div class="content-nav">
+            <button class="tab">全部</button>
+            <button class="tab">文章</button>
+            <button class="tab">视频</button>
+            <button class="tab">合集</button>
+            </div>
+            <!-- 内容 -->
+            <div class="content-list">
+            <ul class="list-display">
+                <!-- 一条 -->
+                <li>
+                    <div class="sub-topic">
+                        <!-- 左边 -->
+                        <div class="sub-left">
+                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
+                        </div>
+                        <!-- 右边 -->
+                        <div class="sub-right">
+                            <!-- title -->
+                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
+                            
+                            <div class="right-inline">
+                                <!-- HomilyLink -->
+                                <div class="right-item">
+                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
+                                    <div>HomilyLink</div>
+                                </div>
+                                <!-- 评论 -->
+                                <span class="right-item">0评论</span>
+                                <!-- 日期 -->
+                                <div class="right-item"> 05-26 11:42 </div>
+                            </div>
+                        </div>
+
+
+
+                                
+
+                        
+                    </div>
+                </li>
+                <li>
+                    <div class="sub-topic">
+                        <!-- 左边 -->
+                        <div class="sub-left">
+                            <img class="sub-image" src="https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg" alt="视频缩略图">
+                        </div>
+                        <!-- 右边 -->
+                        <div class="sub-right">
+                            <!-- title -->
+                            <h3 class="right-title">大国博弈下的深度交易策略</h3>
+                            
+                            <div class="right-inline">
+                                <!-- HomilyLink -->
+                                <div class="right-item">
+                                    <img src="https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg" class="img1">
+                                    <div>HomilyLink</div>
+                                </div>
+                                <!-- 评论 -->
+                                <span class="right-item">0评论</span>
+                                <!-- 日期 -->
+                                <div class="right-item"> 05-26 11:42 </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            </div>
+        </div>
+    </div>
 </template>
 <style scoped>
+.channel{
+    width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.channel-head{
+    position: relative;
+    height: 200px;
+    width: 100%;
+}
+.bc-image{
+    height: 100%;
+    width: 100%;
+}
+.submit{
+    position: absolute; /* 绝对定位 */
+    top: 50px; /* 根据需要调整位置 */
+    right: 10px; /* 根据需要调整位置 */
+    color: rgb(129, 132, 134);
+    background-color: aliceblue;
+    padding: 10px;
+    border-radius: 5%;
+}
+.channel-title{
+    box-sizing: border-box;
+    position: absolute;
+    left: 60px;
+    top: 50px;
+    background: rgba(0, 0, 0, .4);
+    width: 400px;
+    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;
+}
+.sub-image{
+    width: 100%;
+    height: 100%;
+}
+
+.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>
\ No newline at end of file