写直播页面评论框

src/pages/home/LivePage.vue

@@ -17,38 +17,83 @@
             </div>
           </div>
           <div class="left-bottom">
-            <div class="tag">#唱歌</div>
-            <div class="rank">江苏第15名</div>
+            <div class="tag">
+              <img src="../../assets/img/icon/home/jin.webp" alt="">
+              <span>唱歌</span>
+            </div>
+            <div class="tag rank">
+              <img src="../../assets/img/icon/home/rank-yellow.png" alt="">
+              <span>江苏第15名</span>
+            </div>
           </div>
         </div>
         <div class="right">
-          <img src="../../assets/img/icon/avatar/1.png" alt="" class="follower">
-          <img src="../../assets/img/icon/avatar/2.png" alt="" class="follower">
-          <img src="../../assets/img/icon/avatar/3.png" alt="" class="follower">
-          <div class="follower-count">107</div>
-          <back img="close" mode="light"/>
+          <div class="follower">
+            <img src="../../assets/img/icon/avatar/1.png" alt="" class="round">
+            <img src="../../assets/img/icon/avatar/2.png" alt="" class="round">
+            <img src="../../assets/img/icon/avatar/3.png" alt="" class="round">
+            <div class="round count">107</div>
+            <back class="round close" img="close" mode="light"/>
+          </div>
+          <div class="more">
+            <div class="wrapper">
+              <!--              缺个icon-->
+              <span>更多同城</span>
+              <back scale=".5" direction="right" class="back" img="back" mode="light"/>
+            </div>
+          </div>
         </div>
       </div>
       <div class="bottom">
-
+        <div class="left">
+          <div class="comments">
+            <div class="comments-wrapper">
+              <div class="comment notice">
+                <span class="text">欢迎来到直播间！抖音严禁未成年人直播或打赏，直接间内严禁出现违法违规、低俗色情、吸烟酗酒等内容。如主播在直播过程中以不当方式诱导打赏、私下交易，请谨慎判断，以防人身财产损失。请大家注意财产安全，谨防网络诈骗。</span>
+              </div>
+              <div class="comment" v-for="i in list">
+                <div class="level">
+                  <div class="wrapper">
+                    <img src="../../assets/img/icon/home/level.webp" alt="">
+                    <span>30</span>
+                  </div>
+                </div>
+                <span class="name">嘻嘻哈哈</span>
+                <span class="text">{{ i }}</span>
+              </div>
+            </div>
+          </div>
+          <base-button @click="t">点击</base-button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import BaseButton from "../../components/BaseButton";
+
 export default {
   name: "LivePage",
-  components: {},
+  components: {BaseButton},
   props: {
     modelValue: false
   },
   data() {
-    return {}
+    return {
+      list: [
+        '纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱纱',
+        'asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff'
+      ]
+    }
   },
   computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    t() {
+      this.list.push('asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff')
+    }
+  }
 }
 </script>
 
@@ -78,16 +123,21 @@ export default {
     width: 100vw;
     height: 100vh;
 
+    @tag-bg: rgba(58, 58, 70, .3);
+
     .top {
+      display: flex;
+      justify-content: space-between;
       margin-top: 1rem;
 
       .left {
+        margin-left: @padding-page;
+
         .liver {
           box-sizing: border-box;
-          width: 45vw;
-          background: yellowgreen;
+          background: @second-btn-color-tran;
           display: flex;
-          padding: .2rem .2rem .2rem .1rem;
+          padding: .3rem .4rem .3rem .2rem;
           align-items: center;
           border-radius: 2rem;
 
@@ -95,10 +145,10 @@ export default {
             border-radius: 50%;
             width: 3rem;
             height: 3rem;
+            margin-right: .4rem;
           }
 
           .desc {
-
             flex: 1;
             display: flex;
             align-items: center;
@@ -106,22 +156,24 @@ export default {
 
 
             .desc-wrapper {
-              width: 60%;
+              width: 8rem;
 
               .name {
+                font-size: 1.2rem;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
 
               .count {
+                color: gainsboro;
                 font-size: 1rem;
               }
             }
 
             .follow-btn {
-              height: 3.8rem;
-              width: 4rem;
+              height: 3rem;
+              width: 4.5rem;
               background: @primary-btn-color;
               border-radius: 3rem;
               display: flex;
@@ -132,10 +184,146 @@ export default {
           }
         }
 
+        .left-bottom {
+          margin-top: calc(@padding-page / 2);
+          display: flex;
+          font-size: 1.2rem;
+
+          .tag {
+            display: flex;
+            align-items: center;
+            padding: .4rem 1rem;
+            background: @tag-bg;
+            border-radius: 2rem;
+            margin-right: 1rem;
+
+            img {
+              margin-right: .5rem;
+              width: 1rem;
+              height: 1rem;
+            }
+          }
+        }
+
       }
 
       .right {
+        margin-top: .3rem;
+        display: flex;
+        flex-direction: column;
+
+        .follower {
+          @width: 3rem;
+          display: flex;
+
+          .round {
+            width: @width;
+            height: @width;
+            border-radius: 50%;
+            margin-right: .3rem;
+          }
+
+          .count {
+            font-size: 1.2rem;
+            background: @second-btn-color-tran;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
 
+          .close {
+            margin-right: 1rem;
+            margin-left: .5rem;
+            padding: 0.6rem;
+            width: calc(@width - 1.2rem);
+            height: calc(@width - 1.2rem);
+          }
+        }
+
+        .more {
+          display: flex;
+          justify-content: flex-end;
+
+          .wrapper {
+            border-radius: 1.3rem 0 0 1.3rem;
+            padding: .2rem 0 .2rem 1rem;
+            margin-top: 1.5rem;
+            background: @tag-bg;
+            display: flex;
+            align-items: center;
+            font-size: 1rem;
+          }
+        }
+
+      }
+    }
+
+    .bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100vw;
+      box-sizing: border-box;
+      padding: @padding-page;
+
+
+      .left {
+        width: 90%;
+
+        .comments {
+          overflow: auto;
+          height: 20vh;
+
+          .comments-wrapper {
+            min-height: 20vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+          }
+
+          .comment {
+            padding: .4rem .5rem;
+            border-radius: 1rem;
+            background: @tag-bg;
+            margin-bottom: .5rem;
+
+            @text-color: rgb(164, 234, 253);
+
+            &.notice {
+              .text {
+                color: @text-color;
+              }
+            }
+
+            .level {
+              display: inline-block;
+
+              .wrapper {
+                display: flex;
+                @color: rgb(130, 133, 185);
+                align-items: center;
+                font-size: 1rem;
+                border-radius: 1rem;
+                margin-right: 0.5rem;
+                padding: 0 .6rem;
+                background: @color;
+
+                img {
+                  margin-right: 0.3rem;
+                  width: 1.2rem;
+                }
+              }
+            }
+
+            .name {
+              margin-right: 0.5rem;
+              font-size: 1.3rem;
+              color: @text-color;
+            }
+            .text{
+              word-break: break-all;
+            }
+          }
+        }
       }
     }
   }