<template>
  <div class="app-container">
    <el-row style="display: flex;align-items: center;padding: 30px;">
      <el-col :span="18">
        <div class="step-list">
          <div class="step-list-num">1</div>
          <div class="step-list-text">
            <div>在腾讯应用宝,搜索并下载“名学·微课宝”APP;</div>
            <div>或扫描右侧二维码下载</div>
          </div>
        </div>
        <div class="step-list">
          <div class="step-list-num">2</div>
          <div class="step-list-text">
            <div>在“微课文件库”中上传要讲评的素材</div>
            <div>格式支持Word、PPT、Excel、PDF、图片（jpg）</div>
          </div>
        </div>
        <div class="step-list">
          <div class="step-list-num">3</div>
          <div class="step-list-text">
            <div>打开“名学·微课宝”APP</div>
            <div>从“微课文件库”提取素材或直接拍照录制</div>
          </div>
        </div>
        <div class="step-list">
          <div class="step-list-num">4</div>
          <div class="step-list-text">
            <div>在“名学·微课宝”APP我的微课中管理已录制的微课</div>
            <div>编辑好微课标题后可上传至“名学金榜”个人资源库</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <img style="width: 200px;height: 200px;" src="https://a.app.qq.com/o/image/microQr.png?pkgName=com.mm.whiteboard" alt="">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        qrCodeUrl: require('@/assets/images/yuanbiji.png'),
      };
    },
    created() {

    },
    methods: {

    }
  };
</script>
<style scoped>
  .app-container {
    color: rgba(0, 0, 0, 0.65);
  }
  .step-list {
    display: flex;
    align-items: center;
    margin-bottom: 35px;
  }
  .step-list-num {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #dbdbdb;
    border-radius: 50%;
    text-align: center;
    margin-right: 50px;
  }
</style>
