feat[wwf]:微认证模块UI修改

src/views/MicroAuthPage/auth.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="bg">
-    <h1>SeeCoder微认证学堂</h1>
     <div class="mainWrapper">
       <div class="listGrid">
         <el-card class="cardMore" v-for="item of list" :key="item.id" @click="jumpToDetail(item.id)">
@@ -150,17 +149,15 @@ export default {
 
 <style scoped>
 .bg{
-  background-image: linear-gradient(to bottom right, #C3D7DF, #FFFFFF);
   overflow: hidden;
   width: 100%;
   height: 1200px
 }
 .mainWrapper{
-  margin-top: 50px;
-  margin-left: 10%;
+  margin-top: 10px;
   /*border: #747bff dashed 5px;*/
-  width: 80%;
-  height: 830px  ;
+  width: 100%;
+  height: 830px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -173,7 +170,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-gap: 10px;
-  grid-template-rows: repeat(4,200px);
+  grid-template-rows: repeat(4,300px);
 }
 
 .cardP{

src/views/MicroAuthPage/detail.vue

@@ -1,41 +1,36 @@
 <template>
   <div class="bg">
+
     <div class="bigContainer">
-      <p class="bigTitle">HarmonyOS分布式协同办公应用开发</p>
-      <p class="subTitle">HarmonyOS打造全场景分布式操作系统，助力万物互联，轻松实现跨设备共享服务及应用，灵活定制系统，适配更多设备。</p>
+      <el-card>
+      <p class="bigTitle">鸿蒙开发微认证</p>
       <div class="characteristicWrap">
-        <div class="characteristic" v-for="item of charas" :key="item.id">
-          <span>{{item.title}}</span>
-          <el-divider />
-          <p>{{ item.desc }}</p>
-        </div>
+        <el-descriptions style="font-size: large">
+          <el-descriptions-item label="编号：">1</el-descriptions-item>
+          <el-descriptions-item label="创建者：">刘钦</el-descriptions-item>
+          <el-descriptions-item label="状态：">
+            <el-tag type="primary" size="large">进行中</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="所属课程：">移动互联网</el-descriptions-item>
+          <el-descriptions-item label="有效时间：">2023/04/23 00:00:00 至 2023/05/23 00:00:00</el-descriptions-item>
+          <el-descriptions-item label="单元总数：">3</el-descriptions-item>
+          <el-descriptions-item label="完成度：">20%</el-descriptions-item>
+        </el-descriptions>
       </div>
-      <p class="authProTitle">认证流程-轻松5步：</p>
+      <p class="authProTitle">微认证单元</p>
       <div class="authProWrap">
-        <div class="onePro">
-          <div class="oneProLeft">
-            <p class="bigTitle">01.</p> <br />
-            <p class="subTitle" style="margin-top: -75px">购买认证</p>
-          </div>
-          <div class="oneProMiddle">
-            <p>1、请使用华为云个人账号或企业主账号购买微认证，不支持企业子账号购买/兑换认证，不支持企业子账号考试；</p>
-            <p>2、如使用兑换码兑换微认证，请点击微认证兑换完成操作，仅支持华为云个人账号兑换认证；</p>
-            <p>3、成功购买微认证后方可进行后续步骤，可在个人主页-我的认证中查看购买/兑换记录；</p>
-          </div>
-          <div class="oneProRight">
-            <el-button class="proButton">
-              购买认证 ￥29.98
-            </el-button>
-          </div>
-        </div>
         <el-divider/>
         <div class="onePro">
           <div class="oneProLeft">
-            <p class="bigTitle">02.</p> <br />
+            <p class="bigTitle">01.</p> <br />
             <p class="subTitle" style="margin-top: -75px">在线学习</p>
           </div>
           <div class="oneProMiddle">
-            <p>通过在线课程学习，掌握理论基础知识</p>
+            <el-descriptions style="font-size: medium">
+              <el-descriptions-item label="名称：">鸿蒙资料学习</el-descriptions-item>
+              <el-descriptions-item label="类型：">学习资料</el-descriptions-item>
+              <el-descriptions-item label="完成度：">100%</el-descriptions-item>
+            </el-descriptions>
             <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{background:'#93B5CF'}">
               <el-table-column prop="chap" label="章节" width="180" />
               <el-table-column prop="time" label="时长" width="180" />
@@ -43,7 +38,7 @@
             </el-table>
           </div>
           <div class="oneProRight">
-            <el-button class="proButton">
+            <el-button type="primary" size="large">
               开始学习
             </el-button>
           </div>
@@ -51,63 +46,51 @@
         <el-divider/>
         <div class="onePro">
           <div class="oneProLeft">
-            <p class="bigTitle">03.</p> <br />
-            <p class="subTitle" style="margin-top: -75px">实验练习</p>
-          </div>
-          <div class="oneProMiddle">
-            <p>每个实验都与课程相匹配，通过实验操作，加深对课程学习内容的理解，获得场景化的技能</p>
-            <p>实验前:  1、购买认证后，如动手实验需要使用付费资源，用户费用中心将获得一张“实验资源代金券”，用于购买实验所需资源；</p>
-            <p style="margin-left: 60px">       2、开始实验前，请下载实验手册，查看手册使用注意事项，并按照手册指引开展实验。</p>
-            <p style="margin-top: 20px">实验中: 1、购买资源时，请按照实验指引选择资源规格和计费模式，华为云将优先使用代金券进行扣费；</p>
-            <p style="margin-left: 60px">       2、为避免实验资源浪费，请一次性完成实验；若无法连续完成，请先删除已购买的资源，避免因资源持续使用而产生扣费；</p>
-            <p style="margin-left: 60px">       3、如遇到问题，可以联系华为云人工客服或拨打4000 955988热线进行求助；您反馈的实验问题，将由客服转接课程老师为您进行答疑；</p>
-            <p style="margin-left: 60px">       4、“实验资源代金券”自认证购买之日起30天内有效，请在有效期内使用。</p>
-            <p style="margin-top: 20px">实验后: 实验结束，请务必按照实验指引手动完成资源释放，避免因资源未及时得到释放而产生持续扣费。</p>
-          </div>
-          <div class="oneProRight">
-            <el-button class="proButton">
-              下载手册
-            </el-button>
-          </div>
-        </div>
-        <div class="onePro">
-          <div class="oneProLeft">
-            <p class="bigTitle">04.</p> <br />
-            <p class="subTitle" style="margin-top: -75px">在线考试</p>
+            <p class="bigTitle">02.</p> <br />
+            <p class="subTitle" style="margin-top: -75px">实践练习</p>
           </div>
           <div class="oneProMiddle">
-            <p>1、在线考试需验证考生身份，请提前准备好身份证电子件；</p>
-            <p>2、请使用Google、火狐或360浏览器完成在线考试，不支持IE浏览器</p>
-            <p>3、正式考试前请仔细阅读在线考试注意事项，提前完成邮箱绑定；</p>
-            <p>4、每次购买后将获得5次考试机会，为避免考试次数浪费，再次购买前请确认考试机会已用完。</p>
+            <el-descriptions style="font-size: medium">
+              <el-descriptions-item label="名称：">鸿蒙项目实践</el-descriptions-item>
+              <el-descriptions-item label="类型：">项目实践</el-descriptions-item>
+              <el-descriptions-item label="完成度：">20%</el-descriptions-item>
+            </el-descriptions>
+            <div style="margin-top: 40px">
+              <span> 源代码地址 </span>
+              <span style="color: dodgerblue">https://p.seec.seecoder.cn/exam/9511</span>
+            </div>
+
           </div>
           <div class="oneProRight">
-            <el-button class="proButton" @click="jumpToPracticeDetail()">
-              在线考试
+            <el-button  type="primary" size="large" @click="jumpToPracticeDetail()">
+              开始实践
             </el-button>
           </div>
         </div>
+        <el-divider/>
         <div class="onePro">
           <div class="oneProLeft">
-            <p class="bigTitle">05.</p> <br />
-            <p class="subTitle" style="margin-top: -75px">获取证书</p>
+            <p style="font-size: x-large;margin-top: 30px">03.最终考核</p> <br />
           </div>
           <div class="oneProMiddle">
-            <p>1、通过考试后24小时，可前往个人主页-我的认证查看证书编号和下载电子证书；</p>
-            <p>2、证书自颁布之日起2年内有效。</p>
+            <el-descriptions style="font-size: medium">
+              <el-descriptions-item label="名称：">鸿蒙项目考核</el-descriptions-item>
+              <el-descriptions-item label="类型：">项目考核</el-descriptions-item>
+              <el-descriptions-item label="完成度：">未开始</el-descriptions-item>
+            </el-descriptions>
           </div>
           <div class="oneProRight">
-            <el-button class="proButton">
-              获取证书
+            <el-button  type="primary" size="large">
+              开始考核
             </el-button>
           </div>
         </div>
       </div>
-    </div>
 
+    </el-card>
+    </div>
 
   </div>
-
 </template>
 
 <script>
@@ -167,7 +150,6 @@ export default {
 <style scoped>
 
 .bg{
-  background-image: linear-gradient(to bottom right, #C3D7DF, #FFFFFF);
   overflow: hidden;
   width: 100%;
 }
@@ -191,16 +173,11 @@ export default {
 }
 
 .characteristicWrap{
+  padding:0 35px 0 35px;
   margin-top: 50px;
-  display: flex;
-  background-image: linear-gradient(to bottom right,  #0F59A4,#93B5CF);
   overflow: hidden;
 }
 
-.characteristic{
-  flex:1;
-  padding: 35px;
-}
 
 .characteristic span{
   color: #FFFFFF;

src/views/MicroAuthPage/practiceDetail.vue

@@ -1,99 +1,100 @@
 <template>
   <div class="bg">
     <div class="bigContainer">
-      <p class="bigTitle">安卓开发实践</p>
-
-      <div class="totalInfo">
-        <div class="totalInfoLeft">
-          <div class="totalInfoLeft1">
-            <span>所属微认证：安卓开发微认证</span>
-            <span style="margin-left: 50px">完成度：20%</span>
+      <el-card>
+        <p class="bigTitle">鸿蒙开发实践</p>
+        <div class="totalInfo">
+          <div class="totalInfoLeft">
+            <div class="totalInfoLeft1">
+              <span>所属微认证：鸿蒙开发微认证</span>
+              <span style="margin-left: 50px">完成度：20%</span>
+            </div>
+            <div class="totalInfoLeft2">
+              <span>源代码地址：</span>
+              <span style="color: dodgerblue">https://p.seec.seecoder.cn/exam/9511</span>
+              <el-button class="miniButton">复制</el-button>
+            </div>
           </div>
-          <div class="totalInfoLeft2">
-            <span>源代码地址：</span>
-            <span style="color: dodgerblue">https://p.seec.seecoder.cn/exam/9511</span>
-            <el-button class="miniButton">复制</el-button>
+          <div class="totalInfoRight">
+            <el-button type="primary">触发构建</el-button>
           </div>
         </div>
-        <div class="totalInfoRight">
-          <el-button class="buildButton">触发构建</el-button>
+
+        <div class="record" >
+          <el-collapse>
+            <el-collapse-item class="collapse">
+              <template #title>
+                <p class="subTitle">
+                  构建记录
+                </p>
+              </template>
+              <el-table :data="buildData" style="width: 100%">
+                <el-table-column prop="id" label="id"  />
+                <el-table-column prop="buildTime" label="构建时间"  />
+                <el-table-column prop="status" label="状态" />
+                <el-table-column prop="pkg" label="产物包">
+                  <template #default="scope">
+                    <a class="pkgUrl" :src=scope.row.pkg >{{scope.row.pkg}}</a>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
         </div>
-      </div>
-
-      <div class="record" >
-        <el-collapse>
-          <el-collapse-item class="collapse">
-            <template #title>
-              <p class="subTitle">
-                构建记录
-              </p>
-            </template>
-            <el-table :data="buildData" style="width: 100%">
-              <el-table-column prop="id" label="id"  />
-              <el-table-column prop="buildTime" label="构建时间"  />
-              <el-table-column prop="status" label="状态" />
-              <el-table-column prop="pkg" label="产物包">
-                <template #default="scope">
-                  <a class="pkgUrl" :src=scope.row.pkg >{{scope.row.pkg}}</a>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-
-      <div class="record" >
-        <div class="recordHeader">
-          <div class="recordHeaderLeft">
-            <p class="subTitle" style="margin-top: 0px">
-              自动化测试
-            </p>
-            <div class="autoTestRecord" style="margin-top: -20px">
-              选择产物包：
-              <el-radio-group v-model="radio" style="color:#000;">
-                <el-radio :label="1" style="color:#000;">2-package.apk</el-radio>
-                <el-radio :label="2" style="color:#000;">3-package.apk</el-radio>
-              </el-radio-group>
 
+        <div class="record" >
+          <div class="recordHeader">
+            <div class="recordHeaderLeft">
+              <p class="subTitle" style="margin-top: 0px">
+                自动化测试
+              </p>
+              <div class="autoTestRecord" style="margin-top: -20px">
+                选择产物包：
+                <el-radio-group v-model="radio" style="color:#000;">
+                  <el-radio :label="1" style="color:#000;">2-package.apk</el-radio>
+                  <el-radio :label="2" style="color:#000;">3-package.apk</el-radio>
+                </el-radio-group>
+
+              </div>
+            </div>
+            <div class="recordHeaderRight">
+              <el-button type="primary">触发测试</el-button>
             </div>
           </div>
-          <div class="recordHeaderRight">
-            <el-button class="buildButton">触发测试</el-button>
-          </div>
-        </div>
 
-        <el-collapse>
-          <el-collapse-item class="collapse">
-            <template #title>
+          <el-collapse>
+            <el-collapse-item class="collapse">
+              <template #title>
                 <p class="subsubTitle">
                   测试脚本
                 </p>
-            </template>
-            <codemirror
-                placeholder="Code gose here..."
-                :mode="lang-python"
-            />
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-
-      <div class="record" >
-        <el-collapse>
-          <el-collapse-item class="collapse">
-            <template #title>
-              <p class="subTitle">
-                测试记录
-              </p>
-            </template>
-            <el-table :data="testData" style="width: 100%">
-              <el-table-column prop="id" label="id"  />
-              <el-table-column prop="testTime" label="测试时间"  />
-              <el-table-column prop="status" label="状态" />
-              <el-table-column prop="testRes" label="测试结果" />
-            </el-table>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
+              </template>
+              <codemirror
+                  placeholder="Code gose here..."
+                  :mode="lang-python"
+              />
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+
+        <div class="record" >
+          <el-collapse>
+            <el-collapse-item class="collapse">
+              <template #title>
+                <p class="subTitle">
+                  测试记录
+                </p>
+              </template>
+              <el-table :data="testData" style="width: 100%">
+                <el-table-column prop="id" label="id"  />
+                <el-table-column prop="testTime" label="测试时间"  />
+                <el-table-column prop="status" label="状态" />
+                <el-table-column prop="testRes" label="测试结果" />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </el-card>
     </div>
     <div style="height: 150px">
 
@@ -150,7 +151,7 @@ export default {
 
 <style scoped>
 .bg{
-  background-image: linear-gradient(to bottom right, #C3D7DF, #FFFFFF);
+  /*background-image: linear-gradient(to bottom right, #C3D7DF, #FFFFFF);*/
   overflow: hidden;
   width: 100%;
 }
@@ -184,7 +185,8 @@ autoTestCard{
 
 .totalInfo{
   padding: 20px;
-  border: #93B5CF solid 1px;
+  border: grey solid 1px;
+  border-radius: 8px;
   display: flex;
 }
 
@@ -235,7 +237,8 @@ autoTestCard{
 .record{
   margin-top: 50px;
   padding: 20px;
-  border: #93B5CF solid 1px;
+  border: grey solid 1px;
+  border-radius: 8px;
 }
 
 .recordHeader{