update

pages/solution/exam.vue

@@ -8,20 +8,21 @@
         class="client-platform-banner">
         <div class="client-container mta-hidden-xs">
           <div class="banner-btn-groups left">
-            <onlineInformationBtn class="online-information-btn btn-item" />
+            <onlineInformationBtn class="online-information-btn btn-item"/>
           </div>
         </div>
       </div>
     </div>
 
-      <!--  常见严肃性考试场景  -->
-      <gangweiList label="常见严肃性考试场景" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+    <!--  常见严肃性考试场景  -->
+    <gangweiList label="常见严肃性考试场景" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
 
 
     <!--  严肃性考试解决方案  -->
     <div class="platform-products-services client-container">
       <h4 class="client-title">严肃性考试解决方案</h4>
-      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :col-h5="2">
+      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3"
+                  :col-h5="2">
         <div class="btn-groups">
           <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
         </div>
@@ -34,10 +35,10 @@
       <onlineInformationBtn></onlineInformationBtn>
     </div>
 
-    <!--  严肃性考试热门问答  -->
-    <div class="client-wenda-box">
+    <!--  严肃性考试热门问答 PC -->
+    <div class="client-wenda-box client-container mta-hidden-xs">
       <h4>严肃性考试热门问答</h4>
-      <div>
+      <div class="wenda-content">
         <ul>
           <li :class="{active: curActive === 1}" @click="curActive = 1">1. 考试前开启身份证认证、人脸识别是否会耽误考试时间？</li>
           <li :class="{active: curActive === 2}" @click="curActive = 2">2. 开启摄像头监控后，考生的摄像头遇到用不了的情况怎么解决？</li>
@@ -46,32 +47,83 @@
           <li :class="{active: curActive === 5}" @click="curActive = 5">5. 如果您还有更多的疑惑，请联立即联系我们</li>
         </ul>
 
-        <div v-if="curActive === 1">
-          <span>问</span>考试前开启身份证、人脸识别是否会耽误考试时间？
-          <span>答</span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可
+        <div class="answer-box" v-if="curActive === 1">
+          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
+          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
+          </div>
         </div>
 
-        <div v-if="curActive === 2">
-          <span>问</span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？
-          <span>答</span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。
+        <div class="answer-box" v-if="curActive === 2">
+          <div><span>问</span><span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？</span></div>
+          <div><span>答</span><span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。</span></div>
         </div>
 
-        <div v-if="curActive === 3">
-          <span>问</span>考试人数多的情况下系统稳定有保障吗？
-          <span>答</span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。
+        <div class="answer-box" v-if="curActive === 3">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <span>答</span><span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。</span>
+          </div>
         </div>
 
-        <div v-if="curActive === 4">
-          <span>问</span>考生在考试中途遇到死机中断怎么办？？
-          <span>答</span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。
+        <div class="answer-box" v-if="curActive === 4">
+          <div><span>问</span><span>考生在考试中途遇到死机中断怎么办？？</span></div>
+          <div><span>答</span><span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。</span></div>
         </div>
 
-        <div v-if="curActive === 5">
+        <div class="answer-box answer-kefu" v-if="curActive === 5">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
           <div>
-            <p>客服电话： 400-0990-883</p>
-            <p>QQ:227551695</p>
+            <span>答</span>
+            <div class="answer-kefu-box">
+              <div>
+                <p>客服电话：400-0990-883</p>
+                <p>客服 QQ：227551695</p>
+              </div>
+              <img src="#">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  严肃性考试热门问答 H5 -->
+    <div class="client-wenda-box-h5 client-container mta-hidden-sm">
+      <h4>严肃性考试热门问答</h4>
+      <div class="wenda-content">
+        <div class="answer-box">
+          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
+          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
+          </div>
+        </div>
+
+        <div class="answer-box">
+          <div><span>问</span><span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？</span></div>
+          <div><span>答</span><span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。</span></div>
+        </div>
+
+        <div class="answer-box">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <span>答</span><span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。</span>
+          </div>
+        </div>
+
+        <div class="answer-box">
+          <div><span>问</span><span>考生在考试中途遇到死机中断怎么办？？</span></div>
+          <div><span>答</span><span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。</span></div>
+        </div>
+
+        <div class="answer-box answer-kefu">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <span>答</span>
+            <div class="answer-kefu-box">
+              <div>
+                <p>客服电话：400-0990-883</p>
+                <p>客服 QQ：227551695</p>
+              </div>
+              <img src="#">
+            </div>
           </div>
-          <img src="#">
         </div>
       </div>
     </div>
@@ -251,6 +303,7 @@ export default {
 .active {
   color: green;
 }
+
 .platform-products-services {
   .client-title {
     font-size: 30px;
@@ -263,6 +316,7 @@ export default {
 
   .btn-groups {
     margin-top: 48px;
+
     .btn-item {
       margin-right: 20px;
     }
@@ -271,7 +325,7 @@ export default {
 
 .client-banner-box {
   .banner-btn-groups.left {
-    left:300px;
+    left: 300px;
     top: 500px;
   }
 }
@@ -295,4 +349,190 @@ export default {
   }
 }
 
+.client-wenda-box {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 70px;
+  }
+
+  .wenda-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 45px;
+    border-radius: 12px;
+    border: 1px solid #00b96b;
+    height: 330px;
+  }
+
+  ul {
+    width: 50%;
+    margin-left: 20px;
+
+    li {
+      color: #333;
+      font-weight: 500;
+      line-height: 30px;
+      font-size: 18px;
+      margin-bottom: 18px;
+      cursor: pointer;
+
+      &.active {
+        color: #00b96b;
+      }
+    }
+  }
+
+  .answer-box {
+    width: 50%;
+
+    > div {
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      span:first-child {
+        display: inline-block;
+        color: #fff;
+        background-color: #00b96b;
+        border-radius: 12px;
+        padding: 10px;
+        margin-right: 10px;
+        align-self: flex-start;
+      }
+
+      &:first-child span {
+        margin-top: 40px;
+      }
+    }
+
+    &.answer-kefu {
+
+      .answer-kefu-box {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        > div {
+          margin-right: 40px;
+        }
+      }
+
+      img {
+        width: 200px;
+        height: 200px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  .client-xuanchuan-box {
+    width: 100%;
+    height: 110px;
+    background-image: url("~static/codeImage/code-bj01.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 10% 0 0 0;
+    margin: 0 auto 20px;
+    text-align: center;
+
+    h4 {
+      color: #fff;
+      font-size: 14px;
+      font-weight: 800;
+      text-align: center;
+      margin-bottom: 3%;
+    }
+  }
+
+  .client-wenda-box-h5 {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 7%;
+    }
+
+    ul {
+      width: 50%;
+      margin-left: 20px;
+
+      li {
+        color: #333;
+        font-weight: 500;
+        line-height: 1.5;
+        font-size: 14px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        &.active {
+          color: #00b96b;
+        }
+      }
+    }
+
+    .answer-box {
+      padding: 10px;
+      border:  1px solid #ccc;
+      margin-bottom: 20px;
+      border-radius: 8px;
+
+      > div {
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 14px;
+
+        span:first-child {
+          display: inline-block;
+          color: #fff;
+          background-color: #00b96b;
+          border-radius: 12px;
+          padding: 10px;
+          margin-right: 10px;
+          align-self: flex-start;
+        }
+
+        &:first-child span {
+          margin-top: 40px;
+        }
+      }
+
+      &.answer-kefu {
+
+
+        .answer-kefu-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+
+          > div {
+            margin-right: 40px;
+          }
+        }
+
+        img {
+          width: 100px;
+          height: 100px;
+        }
+      }
+    }
+  }
+
+
+}
+
 </style>