cloundPc/src/views/level/blocks/showApp.vue

<template>
  <div class="showApp">
    <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
      <swiper-slide class="swiper-slide">
        <div class="appItem">
          <p class="msg">
            <span>信息提醒：</span>
            考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。
          </p>
          <div class="cloundItem">
            <video
              class="videoH"
              src="@/assets/video/student-remind.mp4"
                poster="@/assets/video/student-remind.jpg"
              controls
            ></video>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div class="appItem">
          <p class="msg">
            <span>曲谱查询：</span>
            考生通过H5报名链接完成考级报名后，便可使用报名时填写的手机号码登录“酷乐秀”APP，登陆后进入“考级曲库”可查看报考项目中您所报名考试的制定曲目及相关曲谱，便于在考前准备时进行练习。
          </p>
          <div class="cloundItem">
            <video
              class="videoH"
              src="@/assets/video/text.mp4"
                poster="@/assets/video/student-remind.jpg"
              controls
            ></video>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div class="appItem">
          <p class="msg">
            <span>直播考试：</span>
            考试当天通过“准考证”进入等待考试界面，点击“签到”按钮进行考试签到。签到后考生需排队等待考试呼叫，请注意观察还是等待人数及预计等待时间。当系统呼叫您进入考场时，按钮会变为绿色闪烁状态，请及时点击按钮进入考场，不要让评委等待多时。
          </p>
          <div class="cloundItem">
            <video
              class="videoH"
               poster="@/assets/video/replay.jpg"
              src="@/assets/video/replay.mp4"
              controls
            ></video>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div class="appItem">
          <p class="msg">
            <span>录播考试：</span>
            当直播考试时出现网络状态不稳定的情况，评委会要求考生过同录播视频完成考试，请根据屏幕上的提示信息进入录播考试界面，按照录播考试要求一次完成曲目的录制与上传。
          </p>
          <div class="cloundItem">
            <video
              class="videoH"
                poster="@/assets/video/onlineText.jpg"
              src="@/assets/video/onlineText.mp4"
              controls
            ></video>
          </div>
        </div>
      </swiper-slide>
            <swiper-slide class="swiper-slide">
        <div class="appItem">
          <p class="msg">
            <span>结果查询：</span>
            完成考试后，请等待主办方统计考试结果。考试结果确认后，系统会发送消息推送提醒您考试结果已经生成，请登录“酷乐秀”APP，在首页中点击“考试记录”查看您的考试结果。也可通过该界面回顾您的考试视频。
          </p>
          <div class="cloundItem">
            <video
            poster="@/assets/video/query.jpg"
              class="videoH"
              src="@/assets/video/query.mp4"
              controls
            ></video>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import Swiper2, { Navigation, Pagination } from "swiper";
Swiper2.use([Navigation, Pagination]);
import "swiper/swiper-bundle.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          disableOnInteraction: true,
          delay: 1000,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.oneSwiper.$swiper;
    },
  },
};
</script>
<style lang="less" scoped>
.showApp {
  padding-top: 0.58rem;
    /deep/.swiper-pagination {
      bottom:.4rem;
    }
  .appItem {
    padding-bottom: 1.5rem;
    .msg {
      font-size: 0.22rem;
      font-weight: 400;
      color: #808080;
      line-height: 0.42rem;
      padding: 0 0.6rem;
      height:2.1rem;
      span {
        font-weight: bold;
        color: #000;
      }
    }
    .cloundItem {
      .videoH {
        width: 3.4rem;
        display: block;
        margin: 0.3rem auto 0;
      }
    }
  }
}
</style>