添加技术圈的修改

pages/main/index/solution_detail.vue

@@ -3,7 +3,6 @@
     <el-row>
       <el-col :span="24">企业认证审核</el-col>
     </el-row>
-    <el-divider></el-divider>
     <el-row>
       <el-col :span="16">
         <el-image
@@ -17,113 +16,97 @@
         <el-button size="mini" @click="returnPage()" type="info">返回</el-button>
       </el-col>
     </el-row>
-    <el-divider></el-divider>
-    <el-row>
-      <el-col :span="19">
-        企业认证
+    <div style="height: 8px;background: #F7F7F7"></div>
+    <el-row style="padding: 14px;">
+      <el-col :span="18">
+        <span class="h2-title">企业认证</span>
       </el-col>
       <el-col :span="5">
         <el-button size="mini">{{this.company_verify_status}}</el-button>
         <el-link @click="companyVerifyStatus(detailData.verifying.uid)" type="primary">查看详情</el-link>
       </el-col>
     </el-row>
-    <el-divider></el-divider>
+    <div style="height: 8px;background: #F7F7F7"></div>
     <div v-if="detailData.companyInfo.base">
-      <el-row>
+      <el-row style="padding: 14px;">
         <el-col :span="19">
-          基本信息
+          <span class="h2-title">基本信息</span>
         </el-col>
       </el-row>
-      <el-divider></el-divider>
-      <el-row>
+      <div style="height: 2px;background: #F7F7F7;margin-bottom:20px;"></div>
+
+      <el-row style="margin-left: 14px;">
         <el-col :span="2">
-          <el-image
-            style="width: 50px; height: 50px"
-            :src="detailData.companyInfo.base.logo"
-          ></el-image>
+          <el-image style="width: 50px; height: 50px" :src="detailData.companyInfo.base.logo"></el-image>
         </el-col>
         <el-col :span="22">
           {{detailData.companyInfo.applyInfo.name}}
-          <br>
         </el-col>
       </el-row>
       <br>
-      <el-row>
-        <el-col :span="2">
-          企业联系人
-        </el-col>
-        <el-col :span="22">
-
-        </el-col>
-      </el-row>
-      <br>
-      <el-row>
-        <el-col :span="2">
-          联系方式
-        </el-col>
-        <el-col :span="22">
-          {{detailData.companyInfo.applyInfo.phone}}
+      <el-row style="margin-left: 14px;">
+        <el-col :span="4">
+          <span class="title-text">企业联系人</span><span class="content-text">fasdf</span>
         </el-col>
-      </el-row>
-      <br>
-      <el-row>
-        <el-col :span="2">
-          职位
+        <el-col :span="4">
+          <span class="title-text">联系方式</span><span
+          class="content-text">{{detailData.companyInfo.applyInfo.phone}}</span>
         </el-col>
-        <el-col :span="22">
-
+        <el-col :span="4">
+          <span class="title-text">职位</span><span class="content-text">{{detailData.companyInfo.applyInfo.phone}}</span>
         </el-col>
       </el-row>
       <br>
-      <el-row>
-        <el-col :span="2">
-          企业介绍
-        </el-col>
-        <el-col :span="22">
-          {{detailData.companyInfo.description}}
+      <el-row style="margin-left: 14px;">
+        <el-col :span="20">
+          <span class="title-text">企业介绍</span>
+          <span class="content-text">
+            {{detailData.companyInfo.base.description}}
+          </span>
         </el-col>
       </el-row>
     </div>
 
-    <el-divider></el-divider>
-    <el-row style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
-      <el-row style="padding: 5px">
-        该企业已认证解决方案
-      </el-row>
-      <el-row v-for="item in detailData.verifyList" :key="item.id"
-        @click.native="jumpToDetail(item)"
-        style="padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); cursor: pointer;">
-        <el-col :span="3">
-          <el-image
-            style="width: 100px; height: 100px"
-            :src="item.images"
-          ></el-image>
-        </el-col>
-        <el-col :span="15">
-          <h3>{{item.title}}</h3>
-          <br>
-          <p>方案简介:{{item.description}}</p>
-          <p>成功案例:{{item.successCase || '暂未添加'}}</p>
-        </el-col>
-        <el-col :span="6">
-          <p>当前状态
-            <el-button size="mini">{{item.status}}</el-button>
-          </p>
-          <br>
-          <p>
-            修改状态
-            <el-button size="mini" @click.stop="updateStatus(item)" type="info">不通过</el-button>
-          </p>
-        </el-col>
+    <div style="height: 8px;background: #F7F7F7;margin-top:10px;margin-bottom: 10px;"></div>
+    <el-row>
+      <el-row style="padding: 14px 20px;font-size:16px;font-weight:500;color:rgba(29,42,58,1);line-height:22px;">
+        已认证解决方案
       </el-row>
+      <div style="padding-left: 20px;">
+        <el-row v-for="item in detailData.verifyList" :key="item.id"
+                @click.native="jumpToDetail(item)"
+                style="margin-bottom:18px; padding: 10px; cursor: pointer;">
+          <el-col :span="3">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="item.images"
+            ></el-image>
+          </el-col>
+          <el-col :span="15">
+            <h3>{{item.title}}</h3>
+            <br>
+            <p>方案简介:{{item.description}}</p>
+            <p>成功案例:{{item.successCase || '暂未添加'}}</p>
+          </el-col>
+          <el-col :span="6">
+            <p>当前状态
+              <el-button size="mini">{{item.status_name}}</el-button>
+            </p>
+            <br>
+            <p>
+              修改状态
+              <el-button size="mini" @click.stop="updateStatus(item)" type="info">不通过</el-button>
+            </p>
+          </el-col>
+        </el-row>
+      </div>
     </el-row>
-    <br>
-    <div v-if="detailData.verifying.id">
+    <div style="height: 8px;background: #F7F7F7;margin-top:10px;margin-bottom: 10px;"></div>
+    <div style="padding-left: 20px;">
 
-      <el-row style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
-      >
-        <el-row style="padding: 5px">
-          当前申请认证解决方案
+      <el-row>
+        <el-row style="padding: 5px;margin-bottom: 10px;">
+          <span class="h2-title">当前申请</span>
         </el-row>
         <el-row
           style="padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); cursor: pointer"
@@ -142,7 +125,9 @@
             <p>成功案例:{{detailData.verifying.successCase || '暂未添加'}}</p>
           </el-col>
           <el-col :span="6">
-            <p>当前状态:{{detailData.verifying.status}}</p>
+            <p>当前状态:
+              <el-tag :type="verifying_status"> {{detailData.verifying.status_name}}</el-tag>
+            </p>
           </el-col>
         </el-row>
       </el-row>
@@ -206,6 +191,21 @@
       this.id = this.$route.query.id
       this.getDetail()
     },
+    computed: {
+      verifying_status() {
+        if (this.detailData.verifying.status_name) {
+          switch (this.detailData.verifying.status_name) {
+            case "审核通过":
+              return "success";
+            case "审核拒绝":
+              return "danger";
+            default:
+              return "info"
+
+          }
+        }
+      }
+    },
     methods: {
       async getDetail() {
         const id = this.id;
@@ -238,12 +238,12 @@
       async userinfo(uid) {
         let url = window.location.href;
 
-          window.open(this.$store.state.domainConfig.siteUrl +`/rooter/user/${uid}`)
+        window.open(this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`)
       },
       async woinfo(uid) {
         let url = window.location.href;
 
-          window.open(this.$store.state.domainConfig.siteUrl +`/wo/${uid}`)
+        window.open(this.$store.state.domainConfig.siteUrl + `/wo/${uid}`)
 
       },
       async returnPage() {
@@ -253,7 +253,7 @@
       async companyVerifyStatus(uid) {
         let url = window.location.href;
 
-          window.open(this.$store.state.domainConfig.siteUrl +`/rooter/companyVerifyAuditItem?uid=${uid}`)
+        window.open(this.$store.state.domainConfig.siteUrl + `/rooter/companyVerifyAuditItem?uid=${uid}`)
 
       },
       async updateStatus(item) {
@@ -308,15 +308,16 @@
       },
       async jumpToDetail(item) {
         console.log('item', item)
-        const { id } = item
+        const {id} = item
         let url = window.location.href;
-        window.open(this.$store.state.domainConfig.siteUrl +`/kaifain/s/${id}.html`, '_black')
+        window.open(this.$store.state.domainConfig.siteUrl + `/kaifain/s/${id}.html`, '_black')
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+
   .header {
     display: flex;
   }
@@ -333,6 +334,14 @@
     color: #101010;
   }
 
+  .h2-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(29, 42, 58, 1);
+    line-height: 22px;
+
+  }
+
   .status {
     margin-left: 6px;
     line-height: 20px;
@@ -378,6 +387,21 @@
     color: #3F51B5;
   }
 
+  .title-text {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(153, 153, 153, 1);
+    line-height: 18px;
+    margin-right: 6px;
+  }
+
+  .content-text {
+    font-size: 13px;
+    color: rgba(51, 51, 51, 1);
+    line-height: 18px;
+    white-space: normal;
+  }
+
   .description-wrapper {
     margin-top: 22px;
   }