study_sm/src/containers/center/exam/components/headline.vue

<template lang="html">
    <div class="headline">
      <div class="htitle">三明市建设人才服务中心技能鉴定理论考试系统</div>
      <div class="sub-htitle">考试科目：<span class="red">{{info.title}}</span></div>

      <el-row :gutter="20">
        <el-col :span="4" v-if="info.cardId">
          <img class="himg" :src="'/icon/'+info.cardId+'.jpg'">
        </el-col>

        <el-col :span="12">
          <div class="hcard">
            <div class="hinfo"> 姓   名：<span>{{info.nickname}}</span></div>
            <div class="hinfo"> 性   别：<span>{{info.gender}}</span></div>
            <div class="hinfo"> 准考证号：<span>{{info.username}}</span></div>
            <div class="hinfo"> 身份证号:<span>{{info.cardId}}</span></div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="hinfo"> 剩余时间： <span class="ltime">{{end.h}}: {{end.m}}:{{end.s}}</span> </div>
          <div class="submit">
            <el-button type="danger" @click="submitPaper">交卷</el-button>
          </div>
        </el-col>
      </el-row>

    </div>
</template>

<script>
import { timeinfo } from "@/components/util.js";
export default {
  name: "son",
  data() {
    return {
      timeinfo
    };
  },
  props: {
    info: {
      type: Object,
      default: {}
    },
    end: {
      type: Object,
      default: {}
    }
  },
  methods: {
    submitPaper() {
      this.$emit("submitPaper");
    }
  }
};
</script>

<style>
.htitle {
  margin-top: 16px;
  font-size: 26px;
  font-weight: 900;
  padding: 8px;
  text-align: center;
  letter-spacing: 4px;
}

.sub-htitle {
  font-size: 20px;
  padding: 8px;
  text-align: center;
}
.submit {
  margin-bottom: 0px;
  margin-top: 20px;
  margin-left: 60px;
}
.submit button {
  height: 56px;
  text-align: center;
  letter-spacing: 20px;
  font-size: 24px;
  width: 110px;
}
.ltime{
  font-size: 20px;
  font-weight:560;
}

.head-item {
  margin-top: 4px;
  font-size: 18px;
  padding-left: 20px;
  margin-right: 20px;
}

.himg{
  width: 150px;
  height: 150px;
  background-size: contain;
  padding: 8px 8px 0px 8px;
  overflow:hidden;
}
.hcard{
  height: 160px;
  padding: 8px 8px 0px 16px;
}

.hinfo{
  height: 42px;
}

@media screen and (max-width: 1120px) {
 .htitle {
    margin-top: 8px;
    font-size: 26px;
  }
  .sub-htitle {
    font-size: 20px;
  }
  .head-item {
    font-size: 16px;
  }
  .hinfo{
    font-size: 16px;
    height: 36px;
  }
  .himg{
    width: 125px;
    height: 125px;
  }
}

</style>