服务商列表

assets/css/consult/list.scss

@@ -1,6 +1,7 @@
 .consult-wrapper {
     position: relative;
-    width: 1000px;
+    max-width: 1000px;
+    width: 100vw;
     .consult-top {
         position: relative;
         width: 100%;

pages/company/list.vue

@@ -1,189 +1,333 @@
 <template>
-    <div
-        :class="$deviceType.isMobile() ? 'mobileMain' : ''"
-        :style="{marginTop: mainMarginTop, marginBottom: $deviceType.isMobile() ? '0px' : '30px !important'}">
-        <div class="consult-wrapper">
-            <div class="consult-top">
-                <div class="tabs">
-                    <div class="tabs-item" :class="num==0 ? 'active' : ''" @click="tabsItem(0)">全部</div>
-                    <div class="tabs-item" :class="num==19 ? 'active' : ''" @click="tabsItem(19)">技术服务商</div>
-                    <div class="tabs-item" :class="num==18 ? 'active' : ''" @click="tabsItem(18)">人力外包</div>
+  <div
+    :class="$deviceType.isMobile() ? 'mobileMain' : ''"
+    :style="{
+      marginTop: mainMarginTop,
+      marginBottom: $deviceType.isMobile() ? '0px' : '30px !important',
+    }"
+  >
+    <div class="consult-wrapper">
+      <div class="consult-top">
+        <div class="tabs">
+          <div
+            class="tabs-item"
+            :class="num == 0 ? 'active' : ''"
+            @click="tabsItem(0)"
+          >
+            全部
+          </div>
+          <div
+            class="tabs-item"
+            :class="num == 19 ? 'active' : ''"
+            @click="tabsItem(19)"
+          >
+            技术服务商
+          </div>
+          <div
+            class="tabs-item"
+            :class="num == 18 ? 'active' : ''"
+            @click="tabsItem(18)"
+          >
+            人力外包
+          </div>
+        </div>
+        <div class="tabs-right">
+          <a :href="`${baseUrl}/cert/type/19`">
+            <img class="tabs-right-img" src="@/assets/img/jsfws.png" />
+          </a>
+        </div>
+      </div>
+      <div class="content">
+        <div class="content-right">
+          <div>
+            1、什么是技术服务商？<br />程序员客栈的开发者分为个人开发者与企业团队开发者。对于大型整包项目，企业团队开发者享有优先客户对接权限。
+          </div>
+          <div class="secound">2、如何成为技术服务商？</div>
+          <el-steps direction="vertical" :active="3" space="80px">
+            <el-step title="注册账户">
+              <template slot="icon">
+                <div class="img">
+                  <img src="../../assets/img/company/1_purple.svg" />
                 </div>
-              <div  class="tabs-right"><a :href="`${baseUrl}/cert/type/19`" >
-                <img class="tabs-right-img" src="@/assets/img/jsfws.png" >
-              </a></div>
-            </div>
-            <div>
-              <div class="company-list" v-if="companyList.length">
-                <a :href="`/company/${item.uid}`" v-for="item in companyList" :key="item.uid">
-                  <!-- <img class="img" :src="item.logo" :alt="item.name"> -->
-                  <img class="img" :src="defaultImg" v-real-img="item.logo" :alt="item.name">
-                  <div class="right">
-                    <h3 class="title">{{ item.name }}</h3>
-                    <div class="industry">
-                      <span v-for="tag in item.tag" :key="tag.name">{{ tag.name }}</span>
-                    </div>
-                    <div class="intro">
-                      <span>入驻平台: <em>{{ !item.time ? 0 : item.time }}年</em></span>
-                      <span>企业规模: <em>{{ !item.group_type ? 0 : item.group_type }}人</em></span>
-                      <span>办公地址: <em>{{ !item.address ? '暂无' : item.address }}</em></span>
-                    </div>
-                    <p class="info">{{ item.brief_introduction }}</p>
-                  </div>
-                </a>
+              </template>
+            </el-step>
+            <el-step title="实名认证">
+              <template slot="description">
+                <a class="authentication">立即认证</a>
+              </template>
+              <template slot="icon">
+                <div class="img">
+                  <img src="../../assets/img/company/2_purple.svg" />
+                </div>
+              </template>
+            </el-step>
+            <el-step title="技术服务商认证">
+              <template slot="icon">
+                <div class="img">
+                  <img src="../../assets/img/company/3_gray.svg" />
+                </div>
+              </template>
+              <template slot="description">
+                <a class="authentication">立即认证</a>
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <div class="company-list" v-if="companyList.length">
+          <a
+            :href="`/company/${item.uid}`"
+            v-for="item in companyList"
+            :key="item.uid"
+          >
+            <!-- <img class="img" :src="item.logo" :alt="item.name"> -->
+            <img
+              class="img"
+              :src="defaultImg"
+              v-real-img="item.logo"
+              :alt="item.name"
+            />
+            <div class="right">
+              <h3 class="title">{{ item.name }}</h3>
+              <div class="industry">
+                <span v-for="tag in item.tag" :key="tag.name">{{
+                  tag.name
+                }}</span>
               </div>
-              <div class="result-empty-wrapper" style="margin-top: 10px;" v-else>
-                <img src="@/assets/img/common/empty@2x.png" alt="empty">
-                <span>暂无内容</span>
+              <div class="intro">
+                <span
+                  >入驻平台: <em>{{ !item.time ? 0 : item.time }}年</em></span
+                >
+                <span
+                  >企业规模:
+                  <em>{{ !item.group_type ? 0 : item.group_type }}人</em></span
+                >
+                <span
+                  >办公地址:
+                  <em>{{ !item.address ? "暂无" : item.address }}</em></span
+                >
               </div>
+              <p class="info">{{ item.brief_introduction }}</p>
             </div>
-            <div class="pagination">
-              <el-pagination
-                background
-                layout="prev, pager, next"
-                :current-page="pagination.page"
-                :total="pagination.total"
-                @current-change="handlePageChange">
-              </el-pagination>
-            </div>
+          </a>
+        </div>
+        <div class="result-empty-wrapper" style="margin-top: 10px" v-else>
+          <img src="@/assets/img/common/empty@2x.png" alt="empty" />
+          <span>暂无内容</span>
         </div>
+      </div>
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :current-page="pagination.page"
+          :total="pagination.total"
+          @current-change="handlePageChange"
+        >
+        </el-pagination>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import {mapState} from "vuex"
-import DealSeoList from "@/components/company/dealSeoList"
-import qs from "qs"
+import { mapState } from "vuex";
+import DealSeoList from "@/components/company/dealSeoList";
 
 export default {
-    name: 'SeoCompanyList',
-    data () {
-        return {
-            num: 0,
-            baseUrl: '',
-            isWeixinApp: true,
-            defaultImg: require('@/assets/img/common/empty@2x.png')
-        }
-    },
-    head() {
-        const {
-            title = "",
-            keyword = "",
-            description = "",
-            h1 = "",
-            canonical = "",
-            metaLocation
-        } = this.head || {}
-        let obj = {
-            title: title,
-            meta: [{
-                name: "keywords",
-                content: keyword
-            }, {
-                name: "description",
-                content: description
-            }, {
-                name: "h1",
-                content: h1
-            }],
-            link: [{rel: "canonical", href: canonical}]
-        }
-        if (metaLocation) {
-            obj.meta.push({name: "location", content: metaLocation})
-        }
-        return obj
-    },
-    computed: {
-        ...mapState(["deviceType"]),
-        showWxHeader () {
-            return !this.deviceType.app && !this.isWeixinApp &&
-                (this.deviceType.android || this.deviceType.ios)
+  name: "SeoCompanyList",
+  data() {
+    return {
+      num: 0,
+      baseUrl: "",
+      isWeixinApp: true,
+      defaultImg: require("@/assets/img/common/empty@2x.png"),
+    };
+  },
+  head() {
+    const {
+      title = "",
+      keyword = "",
+      description = "",
+      h1 = "",
+      canonical = "",
+      metaLocation,
+    } = this.head || {};
+    let obj = {
+      title: title,
+      meta: [
+        {
+          name: "keywords",
+          content: keyword,
         },
-        mainMarginTop () {
-            if (this.mobile && this.showWxHeader) {
-                return '64px !important'
-            } else if (this.mobile) {
-                return '0px !important'
-            } else {
-                return '10px !important'
-            }
-        }
+        {
+          name: "description",
+          content: description,
+        },
+        {
+          name: "h1",
+          content: h1,
+        },
+      ],
+      link: [{ rel: "canonical", href: canonical }],
+    };
+    if (metaLocation) {
+      obj.meta.push({ name: "location", content: metaLocation });
+    }
+    return obj;
+  },
+  computed: {
+    ...mapState(["deviceType"]),
+    showWxHeader() {
+      return (
+        !this.deviceType.app &&
+        !this.isWeixinApp &&
+        (this.deviceType.android || this.deviceType.ios)
+      );
     },
-    async asyncData ({...params}) {
-        let dealDataObj = new DealSeoList(params)
-        let result = await dealDataObj.dealData()
-        return {
-            ...result
-        }
+    mainMarginTop() {
+      if (this.mobile && this.showWxHeader) {
+        return "64px !important";
+      } else if (this.mobile) {
+        return "0px !important";
+      } else {
+        return "10px !important";
+      }
     },
-    mounted () {
-      this.baseUrl = this.$store.state.domainConfig.siteUrl
-      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
+  },
+  async asyncData({ ...params }) {
+    let dealDataObj = new DealSeoList(params);
+    let result = await dealDataObj.dealData();
+    return {
+      ...result,
+    };
+  },
+  mounted() {
+    this.baseUrl = this.$store.state.domainConfig.siteUrl;
+    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
+  },
+  methods: {
+    tabsItem(num) {
+      this.num = num;
+      this.getCompanyList(num);
     },
-    methods: {
-      tabsItem(num){
-        this.num = num
-        this.getCompanyList(num)
-      },
-      getCompanyList (num=0) {
-        this.pagination.loading = true
-        let data = {
-          cert_id: num,
-          page: this.pagination.page,
-          pagesize: this.pagination.pagesize
-        }
-        this.$axios.$post('/uapi/company', data).then(res => {
-          const { data, info, status} = res
-          if(status===1){
-            this.companyList = data.list
-            this.pagination.total = data.count
+    getCompanyList(num = 0) {
+      this.pagination.loading = true;
+      let data = {
+        cert_id: num,
+        page: this.pagination.page,
+        pagesize: this.pagination.pagesize,
+      };
+      this.$axios
+        .$post("/uapi/company", data)
+        .then((res) => {
+          const { data, info, status } = res;
+          if (status === 1) {
+            this.companyList = data.list;
+            this.pagination.total = data.count;
           }
-        }).then(()=>{
-          this.pagination.loading = false
         })
-        // this.pagination.loading = true
-        // this.pagination.noMore = false
-      },
-      /** 分页页码改变时 */
-      handlePageChange (val) {
-        this.pagination.page = val
-        this.getCompanyList(this.num)
-      },
-      /** mobile 加载更多 */
-      // handleLoadMoreConsult () {
-      //   if (this.pagination.loading) {
-      //       return
-      //   }
+        .then(() => {
+          this.pagination.loading = false;
+        });
+      // this.pagination.loading = true
+      // this.pagination.noMore = false
+    },
+    /** 分页页码改变时 */
+    handlePageChange(val) {
+      this.pagination.page = val;
+      this.getCompanyList(this.num);
+    },
+    /** mobile 加载更多 */
+    // handleLoadMoreConsult () {
+    //   if (this.pagination.loading) {
+    //       return
+    //   }
 
-      //   this.pagination.page++
-      //   this.getCompanyList()
-      // },
-  }
-}
+    //   this.pagination.page++
+    //   this.getCompanyList()
+    // },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/css/consult/list.scss";
+::v-deep .el-step__icon.is-text {
+  border: none;
+}
+::v-deep .el-step__title.is-finish {
+  font-weight: 400;
+  color: inherit;
+}
+::v-deep .el-step__title.is-process {
+  font-weight: 400;
+  color: inherit;
+}
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  .content-right {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-top: 10px;
+    width: 356px;
+    height: 627px;
+    background: #fff;
+    margin-left: 20px;
+    padding: 30px 7px 30px 25px;
+    .secound {
+      margin: 24px 0;
+    }
+    .authentication {
+      color: rgba(0, 119, 250, 1);
+      cursor: pointer;
+    }
+    .img {
+      background: #fff;
+      width: 36px;
+      height: 36px;
+      img {
+        margin: 6px 0;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
+@media screen and (max-width: 730px) {
+  .content {
+    .content-right {
+      width: 100vw;
+      margin-left: 0;
+      height: auto;
+    }
+  }
+  .tabs-right {
+    display: none;
+  }
+}
 </style>
 <style lang="scss">
-.consult-wrapper .consult-top{
+.consult-wrapper .consult-top {
   padding-bottom: 0 !important;
   border-radius: 6px !important;
   display: flex;
 }
-.tabs-right{
+.tabs-right {
   width: 180px;
   height: 50px;
   line-height: 50px;
   text-align: center;
 }
 
-.tabs-right img{
+.tabs-right img {
   width: 130px;
   margin-top: 8px;
   margin-right: 10px;
 }
 .company-list {
+  flex: 1;
   a {
     display: flex;
     font-family: PingFangSC, PingFangSC-Regular;
@@ -208,7 +352,7 @@ export default {
     .industry {
       padding: 12px 0;
       span {
-        background: rgba(48,142,255,0.11);
+        background: rgba(48, 142, 255, 0.11);
         border-radius: 1px;
         padding: 9px 11px;
         color: #308eff;
@@ -229,7 +373,7 @@ export default {
       }
     }
     .info {
-      padding: 12px 0;
+      margin: 12px 0;
       color: #666;
       font-size: 14px;
       line-height: 22px;
@@ -240,6 +384,7 @@ export default {
       -webkit-line-clamp: 2;
       line-clamp: 2;
       -webkit-box-orient: vertical;
+      word-break: break-all;
     }
   }
 }
@@ -259,7 +404,7 @@ export default {
   cursor: pointer;
 }
 .wx-header-custom-list {
-    position: fixed !important;
-    z-index: 11 !important;
+  position: fixed !important;
+  z-index: 11 !important;
 }
 </style>