beelink/src/views/regime/Liveing.vue

<template>
  <div class="liveing">
    <a-breadcrumb separator=">">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="top">
      <div class="left">直播页面</div>
      <div class="right">
        <img src="@/static/images/liveshare.png" alt="" />
        <img src="@/static/images/liveend.png" alt="" />
      </div>
    </div>
    <div class="info">
      <LiveingWatcher></LiveingWatcher>
      <div class="LivePlaying">
        <LivePlaying></LivePlaying>
        <div class="comment">
          <div class="commentitem">
            <span>13:32:30</span>
            <span class="name"> Andy ： </span>
            <span> 老师，这个部分可以讲的慢一些吗？ </span>
          </div>
          <div class="commentitem">
            <span>13:32:30</span>
            <span class="name"> Andy ： </span>
            <span> 老师，这个部分可以讲的慢一些吗？ </span>
          </div>
          <div class="commentitem">
            <span>13:32:30</span>
            <span class="name"> Andy ： </span>
            <span> 老师，这个部分可以讲的慢一些吗？ </span>
          </div>
        </div>
      </div>
    <div class="others">
        <div class="othersitem">
            <div class="watcher"></div>
            <div class="name">asdsada</div>
            <img src="" alt="" />
        </div>
       <div class="othersitem">
            <div class="watcher"></div>
            <div class="name">asdsada</div>
            <img src="" alt="" />
        </div>
        <div class="othersitem">
            <div class="watcher"></div>
            <div class="name">asdsada</div>
            <img src="" alt="" />
        </div>
        <div class="othersitem">
            <div class="watcher"></div>
            <div class="name">asdsada</div>
            <img src="" alt="" />
        </div>
    </div>
      
    </div>
  </div>
</template>
<style lang="scss" scoped>
.liveing ::v-deep(.ant-breadcrumb) > span:last-child {
  color: #08ae98;
}
.liveing {
  width: 1320px;
  height: 563px;
  .top {
    width: 1321px;
    height: 57px;
    background: white;
    border-radius: 18px;
    margin-top: 23px;
    margin-bottom: 29px;
    display: flex;
    justify-content: space-between;
    color: #121212;
    font-size: 13px;
    align-items: center;
    .left {
      margin-left: 40px;
      font-weight: bold;
    }
    .right {
      margin-right: 27px;
      > img {
        margin-right: 10px;
      }
    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    .LivePlaying {
      border-radius: 18px;
      margin: 0 35px;
      .comment {
        width: 797px;
        height: 153px;
        background: white;
        border-radius: 18px;
        margin-top: 29px;
        padding: 30px;
        font-size: 12px;

        color: #121212;

        .commentitem {
          margin-bottom: 17px;
          .name {
            margin-left: 28px;
            color: #08ae98;
            font-weight: bold;
          }
        }
      }
      .liveinfo {
        display: flex;
        justify-content: space-between;
        height: 58px;
        align-items: center;
        .left {
          display: flex;
          color: #121212;
          font-size: 13px;
          margin-left: 29px;
          > div {
            margin-right: 57px;
          }
          .icon {
            width: 25px;
            height: 24px;
            margin-right: 6px;
          }
        }
        .right {
          width: 74px;
          height: 29px;
          border: 1px solid #08ae98;
          border-radius: 3px;
          margin-right: 29px;
          color: #08ae98;
          font-size: 13px;
          line-height: 29px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
  .others {
    width: 252px;
    height: 630px;
    display: flex;
    flex-direction: column;
    .othersitem{
        position: relative;
        width: 100%;
        height: 132px;
        margin-bottom: 35px;
        .watcher {
            width: 228px;
            height: 29px;
            background: #000000;
            color: white;
            position: absolute;
            opacity: 0.1;
            border-radius: 18px 18px 0px 0px;
            top: 0;
            }
        > img {
            width: 228px;
            height: 132px;
            border-radius: 18px;
            background: #0f0;
        }
        .name{
            position: absolute;
            top: 9px;
            left: 28px;
            font-size: 12px;
            color: #fff;
        }
    }
    
  }
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import LivePlaying from "@/components/LivePlaying.vue";
import LiveingWatcher from "@/components/LiveingWatcher.vue";

export default defineComponent({
  components: {
    LivePlaying,
    LiveingWatcher,
  },
  setup() {
    console.log(1);
  },
});
</script>