dy-admin-manager/src/views/matchManager/matchDetail.vue

<template>
  <div>
    <descriptions :column="2">
      <descriptions-item label="选手姓名：">{{
        detail.username
      }}</descriptions-item>
      <descriptions-item label="选手编号：">{{
        detail.userId
      }}</descriptions-item>
      <descriptions-item label="身份证号码：">{{
        detail.idCardNo
      }}</descriptions-item>
      <descriptions-item label="年龄：">{{
        detail.age
      }}岁</descriptions-item>
      <descriptions-item label="年级：">{{
        detail.grade
      }}</descriptions-item>
      <descriptions-item label="性别：">{{
        detail.gender ? '男' : '女'
      }}</descriptions-item>
      <descriptions-item label="参赛专业：">{{ detail.subject }}</descriptions-item>
      <descriptions-item label="参赛曲目：">{{ detail.chapter }}</descriptions-item>
    </descriptions>
    <!-- <descriptions :column="1">
      <descriptions-item label="收费标准：">{{
        detail.videoUrl
      }}</descriptions-item>
    </descriptions> -->
    <video v-if="detail.videoUrl" class="video" controls="controls" type="video/mp4" preload="auto" autopaly="false" :src="detail.videoUrl" ></video>
  </div>
</template>
<script>
import Vue from "vue";
import descriptions from "@/components/Descriptions";
Vue.use(descriptions);
export default {
  props: ["detail"],
  data() {
    return {
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.description-title {
    margin-bottom: 0;
}
.video {
    background: #fff;
    margin-top: 10px;
    width: 100%;
    height: 430px;
}
</style>