update

src/modules/notice/views/Index.vue

 <template>
-  <app-container title="学员须知">
+  <app-container title="学员须知" class="notice-box">
     <!-- <div class="notice-title">
       尊敬的学员：<br />
       您好！欢迎参加金融数据合规管理课程及考试。请认真阅读以下须知。预祝大家学习愉快，考试顺利！
     </div> -->
     <div class="apply">
-      <!-- <div class="apply__title">申请流程</div> -->
-      <img src="https://webapp-pub.ezijing.com/pages/assa/notice-img1.png" alt="" />
+      <div class="apply__title">申请流程</div>
+      <div class="list-box">
+        <div v-for="(item, index) in applyList" class="list" :key="index">
+          <el-tooltip :popper-class="`tip${index + 1}`" placement="top" effect="light">
+            <div slot="content" v-html="item.tips"></div>
+            <div class="item">
+              <img :src="item.img">
+              <div class="text"><span>0{{ index + 1 }} </span>{{ item.title }}</div>
+            </div>
+          </el-tooltip>
+          <div class="line" v-if="index !== applyList.length - 1">
+            <img src="https://webapp-pub.ezijing.com/project/fd/line.png">
+          </div>
+        </div>
+      </div>
+      <!-- <img src="https://webapp-pub.ezijing.com/pages/assa/notice-img1.png" alt="" /> -->
       <!-- <div class="apply__tips">（提示：请在个人中心核对姓名信息，需真实准确，与证书保持一致）</div> -->
     </div>
     <div class="notice">
       <div class="notice__title">考试须知</div>
       <img src="https://webapp-pub.ezijing.com/pages/assa/notice-img2.png" alt="" />
-      <!-- <div class="notice__content">
-        考试条件：<span>完成所有课程观看，进度均达到100%后即可开启考试</span><br/>
-        考试时间：<span>60分钟</span><br/>
-        考试形式：<span>仅限电脑登录，保持网络稳定</span><br/>
-        考试规则：<span>进入考试系统后系统随机抓屏，离开或退出考试页面超过5次后系统将强制交卷</span><br/>
-        考试题型：<span>题库随机组题，单选+多选+判断</span><br/>
-        考试成绩：<span>提交试卷后即显示成绩，80分为通过，可获得本年度证书，低于80分则需重学重考</span><br/>
-        证书发放：<span>电子证书，考试通过后3个工作日内进入我的证书查看下载</span>
-      </div> -->
     </div>
   </app-container>
 </template>
 <script>
-export default {}
-</script>
-<style lang="scss" scoped>
-.notice-title {
-  font-size: 16px;
-  line-height: 27px;
-  color: #666666;
-  margin-left: 35px;
+export default {
+  data() {
+    return {
+      applyList: [
+        {
+          img: 'https://webapp-pub.ezijing.com/project/fd/01.png',
+          title: '核对姓名',
+          tips: '请在【个人中心】核对姓名信息，需真实准确，与证书保持一致。'
+        },
+        {
+          img: 'https://webapp-pub.ezijing.com/project/fd/02.png',
+          title: '修改密码',
+          tips: '为确保信息安全，请在【个人中心】及时修改密码。'
+        },
+        {
+          img: 'https://webapp-pub.ezijing.com/project/fd/03.png',
+          title: '开始学习',
+          tips: '请完成【我的课程】中全部视频的观看学习。'
+        },
+        {
+          img: 'https://webapp-pub.ezijing.com/project/fd/04.png',
+          title: '通过考试',
+          tips: '请阅读考试须知后完成考试，80分以上(含80分)为通过，<br/>低于80分则需要重新学习全部课程后重考；如还未通过，<br/>需要继续重学并向机构管理员申请重考机会。'
+        },
+        {
+          img: 'https://webapp-pub.ezijing.com/project/fd/05.png',
+          title: '核对姓名',
+          tips: '<img style="width:200px;display:block;" src="https://webapp-pub.ezijing.com/project/fd/zs1.png" /><img style="width:200px;display:block;" src="https://webapp-pub.ezijing.com/project/fd/zs2.png" />'
+        }
+      ]
+    }
+  }
 }
-.apply {
-  margin-top: 27px;
-  .apply__title {
+</script>
+<style lang="scss">
+.notice-box{
+  .notice-title {
     font-size: 16px;
-    color: #424242;
-    margin-bottom: 24px;
-    line-height: 100%;
+    line-height: 27px;
+    color: #666666;
+    margin-left: 35px;
   }
-  img {
-    display: block;
+  .apply {
+    margin-top: 27px;
+    .apply__title {
+      font-size: 16px;
+      color: #424242;
+      margin-bottom: 24px;
+      line-height: 100%;
+    }
+    img {
+      display: block;
+    }
+    .apply__tips {
+      font-size: 14px;
+      color: #898989;
+      margin-left: 242px;
+    }
+    .list-box{
+      display: flex;
+      // justify-content: center;
+      padding-left: 90px;
+    }
+    .list{
+      display: flex;
+      .item{
+        img{
+          width: 80px;
+          display: block;
+          margin-left: 12px;
+        }
+        .text{
+          margin-top: 18px;
+          font-size: 16px;
+          line-height: 100%;
+          color: #424242;
+          span{
+            font-size: 22px;
+            color: #A81840;
+            font-weight: bold;
+            transform: translateY(-5px);
+          }
+        }
+      }
+      .line{
+        padding: 37px 10px;
+      }
+    }
   }
-  .apply__tips {
-    font-size: 14px;
-    color: #898989;
-    margin-left: 242px;
+  .notice {
+    margin-top: 67px;
+    img{
+      margin-left: 20px;
+    }
+    .notice__title {
+      font-size: 16px;
+      color: #424242;
+      margin-bottom: 28px;
+      line-height: 100%;
+    }
+    .notice__content{
+      font-size: 16px;
+      line-height: 34px;
+      color: rgba(137, 137, 137, 1);
+      margin-left: 46px;
+      font-weight: bold;
+      span{
+        color: rgba(102, 102, 102, 1);
+        font-weight: normal;
+      }
+    }
   }
 }
-.notice {
-  margin-top: 67px;
-  img{
-    margin-left: 20px;
-  }
-  .notice__title {
-    font-size: 16px;
-    color: #424242;
-    margin-bottom: 28px;
-    line-height: 100%;
+.tip1,.tip3,.tip5{
+  border: 1px solid rgba(169, 31, 59, 1) !important;
+  .popper__arrow{
+    border-top-color: rgba(169, 31, 59, 1) !important;
   }
-  .notice__content{
-    font-size: 16px;
-    line-height: 34px;
-    color: rgba(137, 137, 137, 1);
-    margin-left: 46px;
-    font-weight: bold;
-    span{
-      color: rgba(102, 102, 102, 1);
-      font-weight: normal;
-    }
+}
+.tip2,.tip4{
+  border: 1px solid #092E8F !important;
+  .popper__arrow{
+    border-top-color: #092E8F !important;
   }
 }
 </style>