<template>
  <div class="livedetail">
    <div class="info">
      <div class="liveplay">
        <liveplay></liveplay>
        <div class="liveinfo">
            <div class="left">
                <div>
                    <img src="@/static/images/livelesson.png" alt="" class="icon">
                    <span>西班牙语</span>
                </div>
                <div>
                    <img src="@/static/images/livewatch.png" alt="" class="icon">
                    <span>2020-09-11  18:30</span>
                </div>
                <div>
                    <img src="@/static/images/livetimetake.png" alt="" class="icon">
                    <span>30min</span>
                </div>
                     <div>
                    <img src="@/static/images/shoucang.png" alt="" class="icon">
                    <span class="score">5.0分</span>
                </div>
            </div>
            <div class="right">
                编辑信息
            </div>
        </div>
      </div>

      <LiveCount></LiveCount>
    </div>
    <VideoReview class="review"></VideoReview>
  </div>
</template>
<style lang="scss" scoped>
.livedetail {
  width: 1320px;
  height: 563px;
  .info {
    width: 1321px;
    display: flex;
    justify-content:center;
    .liveplay {
      background: white;
      border-radius: 18px;
      margin-right: 29px;
      .liveinfo{
        display: flex;
        justify-content: space-between;
        height: 58px;
        align-items: center;
        .left{
            display: flex;
            color: #121212;
            font-size: 13px;
            margin-left: 29px;
            .score{
              color: #D22C2E;
              font-size: 13px;
            }
            >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;
        }
      }
    }
  }
  .review {
    margin-top: 28px;
  }
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import liveplay from "@/components/LivePlay.vue"
import LiveCount from "@/components/LiveCount.vue";
import VideoReview from "@/components/VideoReview.vue";
export default defineComponent({
  components: {
    LiveCount,
    liveplay,
    VideoReview,
  },
  setup() {
    console.log(1);
  },
});
</script>