career test index style update

src/views/career/plan/CareerEva.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="mt10 pb40">
+  <div class="app-container">
     <el-card shadow="never">
       <el-row :gutter="40">
         <el-col :span="5">
-          <el-image style="width:100%;height:100%;" :src="require('@/assets/images/career/img_holland.png')"></el-image>
+          <el-image :src="require('@/assets/images/career/img_holland.png')"></el-image>
         </el-col>
-        <el-col :span="19" style="padding-right:80px">
+        <el-col :span="18">
           <div>
-            <h3 style="margin-bottom:16px;">职业兴趣测评（HOLLAND）</h3>
-            <div class="text" style="display:flex;align-items: center;">
+            <h3 class="mb15">职业兴趣测评（HOLLAND）</h3>
+            <div class="pf light f14 mb15 fx-row fx-bet-cen">
               <div>
                 <span style="width:200px;display:inline-block">测评方向：专业倾向</span>
                 <span>测评题目：60题</span>
               </div>
               <div>
-                <el-button size="mini" round style="background:#47C6A2;color:#ffffff" @click="goCareer('HOLLAND')">进入评测</el-button>
-                <el-button size="mini" round style="color:#47C6A2" @click="goReportList('HOLLAND')">查看记录</el-button>
+                <el-button size="mini" round type="primary" @click="goCareer('HOLLAND')">进入评测</el-button>
+                <el-button size="mini" round plain @click="goReportList('HOLLAND')">查看记录</el-button>
               </div>
             </div>
-            <div class="text">
-              <span style="width:200px;display:inline-block">测评时间：18分钟</span>
-              <span>测评次数：剩余2次</span>
+            <div class="pf light f14 mb15">
+              <span style="width:200px;display:inline-block">测评时间：约15分钟</span>
+              <span v-if="false">测评次数：剩余2次</span>
             </div>
           </div>
           <div class="tabBox">
@@ -53,27 +53,27 @@
       </el-row>
     </el-card>
     <!-- 2. -->
-    <el-card shadow="never" style="margin-top:24px;">
+    <el-card shadow="never" class="mt20">
       <el-row :gutter="40">
         <el-col :span="5">
-          <el-image style="width:100%;height:100%;" :src="require('@/assets/images/career/img_MBTI.png')"></el-image>
+          <el-image :src="require('@/assets/images/career/img_MBTI.png')"></el-image>
         </el-col>
-        <el-col :span="19" style="padding-right:80px">
+        <el-col :span="18">
           <div>
-            <h3 style="margin-bottom:16px;">迈尔斯布里格斯类型指标（MBTI）</h3>
-            <div class="text" style="display:flex;align-items: center;">
+            <h3 class="mb15">迈尔斯布里格斯类型指标（MBTI）</h3>
+            <div class="pf light f14 mb15 fx-row fx-bet-cen">
               <div>
                 <span style="width:200px;display:inline-block">测评方向：性格倾向</span>
                 <span>测评题目：93题</span>
               </div>
               <div>
-                <el-button size="mini" round style="background:#47C6A2;color:#ffffff" @click="goCareer('BMTI')">进入评测</el-button>
-                <el-button size="mini" round style="color:#47C6A2" @click="goReportList('MBTI')">查看记录</el-button>
+                <el-button size="mini" round type="primary" @click="goCareer('BMTI')">进入评测</el-button>
+                <el-button size="mini" round plain @click="goReportList('MBTI')">查看记录</el-button>
               </div>
             </div>
-            <div class="text">
-              <span style="width:200px;display:inline-block">测评时间：18分钟</span>
-              <span>测评次数：剩余2次</span>
+            <div class="pf light f14 mb15">
+              <span style="width:200px;display:inline-block">测评时间：约18分钟</span>
+              <span v-if="false">测评次数：剩余2次</span>
             </div>
           </div>
           <div class="tabBox">
@@ -149,7 +149,7 @@ export default {
     width: 100%;
     list-style: none;
     padding: 8px 0;
-    line-height: 1.75;
+    line-height: 1.2;
     word-wrap: normal;
     white-space: wrap;
   }
@@ -163,22 +163,4 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.tabBox {
-  .el-tabs {
-    .el-tabs__header {
-      .el-tabs__nav-wrap {
-        .el-tabs__nav-scroll {
-          .el-tabs__nav {
-            .el-tabs__active-bar {
-              background-color: #47C6A2 !important;
-            }
-            .el-tabs__item.is-active {
-              color: #47C6A2 !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
 </style>