colexiu-website/src/views/index/blocks/detail.vue

<template>
  <div class="container">
    <ol class="detail items width1200">
      <h2>考生指引</h2>
      <li>1.考前请确认下载“酷乐秀”最新版本APP</li>
      <li>2.打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限</li>
      <li>3.已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录</li>
      <li>4.请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态</li>
      <li>5.考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间</li>
      <li>6.考生需在考试当天通过“准考证”进入考场进行签到</li>
      <li>7.进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】</li>
      <li>8.签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化</li>
      <li>9.当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及【考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试</li>
      <li>10.直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
      <li>11.进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
    </ol>
    <div class="width1200">
      <div class="otherWrap">
        <a :href="src"
           target="_blank">查看更多 ></a>
      </div>

    </div>

  </div>
</template>
<script>

export default {

  data () {
    return {
      src: require('@/assets/matters.pdf'), // pdf文件地址
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.container {
  background: url("../images/detail.png") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  height: 847px;
  display: flex;
  flex-direction: column;
  position: relative;
  .otherWrap {
    width: 100%;
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 100px;
    a {
      // color: #2dc7aa;
      color: #fff;
      text-decoration: none;
      &:hover {
        // color: #25ab92;
        color: #cecece;
        text-decoration: underline;
      }
    }
  }
}
.detail {
  width: 1084px;
  margin: 75px auto 0;

  h2 {
    text-align: center;
    font-size: 34px;
    line-height: 48px;
    margin-bottom: 42px;
    font-weight: 500;
  }
  &.items {
    padding-left: 40px;
    li {
      display: block;
      text-align: left;
      font-size: 15px;
      line-height: 34px;
      margin-bottom: 20px;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
    }
  }
  a {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>