fix

src/components/efficient/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>12321</div>
+</template>
+<script>
+export default {
+  name: 'efficient',
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/index/blocks/detail.vue

@@ -1,17 +1,20 @@
 <template>
-  <ol class="detail items width1200">
-    <li>考前请确认下载“酷乐秀”最新版本APP</li>
-    <li>打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限</li>
-    <li>已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录</li>
-    <li>请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态</li>
-    <li>考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间</li>
-    <li>考生需在考试当天通过“准考证”进入考场进行签到</li>
-    <li>进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】</li>
-    <li>签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化</li>
-    <li>当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试</li>
-    <li>直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
-    <li>进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
+  <div class="container">
+    <ol class="detail items width1200">
+      <h2>考生指引</h2>
+      <li>考前请确认下载“酷乐秀”最新版本APP</li>
+      <li>打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限</li>
+      <li>已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录</li>
+      <li>请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态</li>
+      <li>考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间</li>
+      <li>考生需在考试当天通过“准考证”进入考场进行签到</li>
+      <li>进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】</li>
+      <li>签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化</li>
+      <li>当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试</li>
+      <li>直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
+      <li>进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
   </ol>
+  </div>
 </template>
 <script>
 export default {
@@ -19,11 +22,30 @@ export default {
 }
 </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;
+}
   .detail{
+    width: 1084px;
+    margin: auto;
+    h2{
+      text-align: center;
+      font-size: 34px;
+      line-height: 48px;
+      margin-bottom: 42px;
+    }
     &.items{
       padding-left: 40px;
       li{
         text-align: left;
+        font-size: 15px;
+        line-height: 21px;
+        margin-bottom: 20px;
       }
     }
   }

src/views/index/blocks/infos.vue

@@ -1,47 +1,49 @@
 <template>
-  <div class="infos width1200">
-    <header class="headers">
-      <span @click="setActive(0)" :class="{active: active === 0}">考级生命周期</span>
-      <span @click="setActive(1)" :class="{active: active === 1}">生源拓展</span>
-      <span @click="setActive(2)" :class="{active: active === 2}">高效管理</span>
-      <span @click="setActive(3)" :class="{active: active === 3}">节省成本</span>
-      <span @click="setActive(4)" :class="{active: active === 4}">零收入投入</span>
-    </header>
-    <div class="content">
-      <transition name="fade">
-        <template v-if="active === 0">
-          <div>
-            <p class="desc">信息化赋能打造全流程线上考级模式<br/>随时随地保证用户数据安全，打破时间空间限制将考级生命周期完整呈现</p>
-            <lifecycle/>
-          </div>
-        </template>
-      </transition>
-      <transition name="fade">
-        <template v-if="active === 1">
-          <div>
-            <p class="desc">招考不受地域限制，支持多层级代理单位，拓展生源</p>
-            <viewmap />
-          </div>
-        </template>
-      </transition>
-      <transition name="fade">
-        <template v-if="active === 2">
-          <p class="desc">考级全流程节点跟进，极大提升管理效率</p>
-        </template>
-      </transition>
-      <transition name="fade">
-        <template v-if="active === 3">
-          <div>
-            <p class="desc">线上化招考流程极大节省考级成本</p>
-            <safe/>
-          </div>
-        </template>
-      </transition>
-      <transition name="fade">
-        <template v-if="active === 4">
-          <p class="desc">零投入，平台研发完善可立即使用</p>
-        </template>
-      </transition>
+  <div class="container">
+    <div class="infos width1200">
+      <header class="headers">
+        <span @click="setActive(0)" :class="{active: active === 0}">考级生命周期</span>
+        <span @click="setActive(1)" :class="{active: active === 1}">生源拓展</span>
+        <span @click="setActive(2)" :class="{active: active === 2}">高效管理</span>
+        <span @click="setActive(3)" :class="{active: active === 3}">节省成本</span>
+        <span @click="setActive(4)" :class="{active: active === 4}">零收入投入</span>
+      </header>
+      <div class="content">
+        <transition name="fade">
+          <template v-if="active === 0">
+            <div>
+              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br/>随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
+              <lifecycle/>
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 1">
+            <div>
+              <p class="desc">招考<strong>不受地域限制</strong>，支持多层级代理单位，拓展生源</p>
+              <viewmap />
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 2">
+            <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 3">
+            <div>
+              <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
+              <safe/>
+            </div>
+          </template>
+        </transition>
+        <transition name="fade">
+          <template v-if="active === 4">
+            <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
+          </template>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
@@ -86,22 +88,65 @@ export default {
     visibility: visible;
     opacity: 1;
   }
+  .container{
+    height: 958px;
+    background-color: #F6F7F9;
+  }
+  .desc{
+    position: relative;
+    font-size: 16px;
+    line-height: 30px;
+    color: #696969;
+    display: inline-block;
+    margin: 50px 0;
+    >strong{
+      color: #2DC7AA;
+      font-weight: normal;
+    }
+    &.first::before{
+      left: 105px;
+    }
+    &::before {
+      top: -8px;
+      left: -25px;
+      position: absolute;
+      display: block;
+      content: '';
+      background: url('../images/icon.png') no-repeat center;
+      background-size: cover;
+      width: 40px;
+      height: 40px;
+    }
+  }
   .infos{
     min-height: 500px;
     .headers{
       display: flex;
       justify-content: center;
       padding: 20px 0;
+      padding-top: 50px;
+      border-bottom: 2px solid #EAEAEA;
       >span{
+        color: #242424;
         cursor: pointer;
         display: inline-block;
         padding: 10px 15px;
         border-radius: 8px;
-        font-weight: bold;
+        font-size: 18px;
         transition: all .5s ease;
         &.active{
-          background-color: #2dc7aa;
-          color: #fff;
+          color: #2dc7aa;
+          position: relative;
+          &::after{
+            display: block;
+            position: absolute;
+            content: '';
+            border-bottom: 2px solid #2DC7AA;
+            width: 100%;
+            height: 0;
+            bottom: -22px;
+            left: 5px;
+          }
         }
       }
     }