技术服务商、人力外包服务商 UI 优化；

pages/cert/type/_id.vue

@@ -4,42 +4,28 @@
     <section class="apply-top">
       <h1>{{detail.name}}认证</h1>
       <section class="info" v-html="detail.description" />
-      <!-- 技术服务商流程及条件 -->
-      <section v-if="id === '19'" class="steps-conditions-wrapper">
+      <!-- 技术服务商流程及条件、人力外包服务商流程及条件 -->
+      <section v-if="id === '19' || id === '18'" class="steps-conditions-wrapper">
         <div class="steps-conditions-title">申请认证流程及条件</div>
-        <div class="steps-item">
-          <div class="step-text">Step1：完成企业认证</div>
+        <div class="steps-item" :class="conditions[0] && conditions[0].is_completed ? 'steps-item-completed' : ''">
+          <div class="step-point"></div>
+          <div class="step-text">01: 完成企业认证</div>
           <div v-if="conditions[0] && conditions[0].is_completed" class="step-conditions">已认证</div>
-          <nuxt-link v-else :to="`/company/${userinfo.uid}`" class="step-conditions active">去认证</nuxt-link>
+          <nuxt-link v-else :to="`/wo/company_verify`" class="step-conditions active">去认证</nuxt-link>
         </div>
-        <div class="steps-item">
-          <div class="step-text">Step2：添加整包项目开发服务方案</div>
+        <div class="steps-item" :class="conditions[1] && conditions[1].is_completed ? 'steps-item-completed' : ''">
+          <div class="step-point"></div>
+          <div class="step-text">02: 添加整包项目开发服务方案</div>
           <div v-if="conditions[1] && conditions[1].is_completed" class="step-conditions">已创建</div>
-          <nuxt-link v-else :to="`/company/${userinfo.uid}`" class="step-conditions active">去添加</nuxt-link>
+          <nuxt-link v-else :to="`/wo/company_verify`" class="step-conditions active">去添加</nuxt-link>
         </div>
-        <div class="steps-item">
-          <div class="step-text">Step3：添加/招募团队成员（{{ conditions[2].completed_num }}/ {{  conditions[2].target }}）</div>
+        <div class="steps-item" :class="conditions[2] && conditions[2].is_completed ? 'steps-item-completed' : ''">
+          <div class="step-point"></div>
+          <div class="step-text">03: 添加/招募团队成员（{{ conditions[2].completed_num }}/ {{ conditions[2].target }}）</div>
           <div v-if="conditions[2] && conditions[2].is_completed" class="step-conditions">已添加</div>
           <nuxt-link v-else :to="`/company/${userinfo.uid}`" class="step-conditions active">去添加</nuxt-link>
         </div>
       </section>
-      <!-- 人力外包服务商流程及条件 -->
-      <section v-if="id === '18'" class="steps-conditions-wrapper">
-        <div class="steps-conditions-title">申请认证流程及条件</div>
-        <div class="steps-item">
-          <div class="step-text">Step1：完成企业认证</div>
-          <div v-if="conditions[0] && conditions[0].is_completed" class="step-conditions">已认证</div>
-          <nuxt-link v-else :to="`/company/${userinfo.uid}`" class="step-conditions active">去认证</nuxt-link>
-        </div>
-        <div class="steps-item">
-          <div class="step-text">Step2：添加人力外包服务方案</div>
-          <div v-if="conditions[1] && conditions[1].is_completed" class="step-conditions">已创建</div>
-          <nuxt-link v-else :to="`/company/${userinfo.uid}`" class="step-conditions active">去添加</nuxt-link>
-        </div>
-        <div class="steps-item">
-          <div class="step-text">Step3：提交认证</div>
-        </div>
-      </section>
       <!-- 认证开发者展示 -->
       <section v-if="showCats && showCats.length > 0 && (id !== '18' && id !== '19')" class="developer-show">
         <h4>认证开发者展示</h4>
@@ -66,17 +52,16 @@
       </section>
       <!-- 认证服务商展示 -->
       <section v-if="showCats && showCats.length > 0 && (id === '18' || id === '19')" class="company-show">
-        <h4>已认证服务商</h4>
+        <div class="company-title">已认证服务商</div>
         <div class="company_show-list">
-          <div
+          <nuxt-link
             class="company_show-item"
             v-for="item in showCats"
-            :key="item.uid">
-            <a :href="`/company/${item.uid}`" target="_blank">
-              <img class="company-logo" :src="item.icon_url" alt="`${item.uid}`">
-              <p>{{ item.name }}</p>
-            </a>
-          </div>
+            :key="item.uid"
+            :to="`/company/${item.uid}`">
+            <img class="company-logo" :src="item.icon_url" alt="`${item.uid}`">
+            <p>{{ item.name }}</p>
+          </nuxt-link>
         </div>
       </section>
       <section v-if="conditions.length && (id !== '18' && id !== '19')" class="cert-quals">
@@ -497,24 +482,45 @@ export default {
   border-bottom: 1px solid #d8d8d8;
 }
 .steps-conditions-wrapper .steps-conditions-title {
-  font-size: 18px;
-  color: #333;
-  font-weight: 700;
-  margin-bottom: 12px;
+  height: 28px;
+  line-height: 28px;
+  margin-bottom: 15px;
+  font-size: 20px;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #222222;
 }
 .steps-conditions-wrapper .steps-item {
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 15px;
   display: flex;
   align-items: center;
 }
+.steps-conditions-wrapper .steps-item .step-point {
+  width: 10px;
+  height: 10px;
+  background: #d8d8d8;
+  border-radius: 50%;
+  margin-right: 12px;
+}
+.steps-conditions-wrapper .steps-item-completed .step-point {
+  background: rgba(39,187,111,1);
+}
 .steps-conditions-wrapper .steps-item .step-text {
-  color: #333333;
-  margin-right: 6px;
+  color: #222222;
+  margin-right: 26px;
+  width: 250px;
 }
 .steps-conditions-wrapper .steps-item .step-conditions {
+  color: rgba(39,187,111,1);
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+}
+/* active 为去认证状态 */
+.steps-conditions-wrapper .steps-item .step-conditions.active {
   color: #409eff;
+  text-decoration: none;
 }
 .company-show {
   display: flex;
@@ -523,14 +529,48 @@ export default {
   border-bottom: 1px solid #d8d8d8;
   padding-bottom: 24px;
 }
+.company-show .company-title {
+  font-size: 20px;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #222222;
+  line-height: 28px;
+}
 .company_show-list {
   display: flex;
-  margin-top: 24px;
+  margin-top: 7px;
+  flex-wrap: wrap;
+  width: 880px;
+}
+.company_show-list .company_show-item {
+  width: 213px;
+  height: 148px;
+  background: #f4f5f9;
+  border-radius: 8px;
+  margin: 5px 7px 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
 }
-.company_show h4 {
-  color: #333333;
-  font-size: 13px;
-  text-align: left;
+.company_show-list .company_show-item .company-logo {
+  /* width: 57px; */
+  height: 57px;
+  opacity: 1;
+  border-radius: 14px;
+  object-fit: contain;
+}
+.company_show-list .company_show-item p {
+  margin-top: 9px;
+  width: 80%;
+  line-height: 20px;
+  font-size: 14px;
+  text-align: center;
+  color: #666666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 @media screen and (max-width: 960px) {
@@ -560,9 +600,22 @@ export default {
     height: 38px;
     margin-bottom: 10px;
   }
-
   .avatar_list a {
     margin-right: 10px;
   }
+
+  .steps-conditions-wrapper .steps-item .step-text {
+    margin-right: 0;
+  }
+  .company_show-list {
+    width: 100%;
+  }
+  .company_show-list .company_show-item {
+    width: calc(50% - 4px);
+    margin: 8px 8px 0 0;
+  }
+  .company_show-list .company_show-item:nth-of-type(2n) {
+    margin-right: 0;
+  }
 }
 </style>