解决方案

assets/css/job/index.scss

@@ -0,0 +1,238 @@
+@import "../scssCommon";
+
+.jobList {
+
+  .topArea {
+    position: relative;
+    width: 100%;
+    background-color: #fff;
+    margin-top: 10px;
+  }
+
+  .contentArea {
+    background-color: #f7f7f7;
+    width: 1000px;
+    margin: 0 auto;
+    box-sizing: border-box;
+
+    .selectArea {
+      display: flex;
+      padding: 45px 45px 45px 10px;
+      flex-direction: column;
+      background: #fff;
+
+      .content {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 30px;
+        position: relative;
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .left {
+          flex-shrink: 0;
+          width: 90px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 38px;
+          align-self: flex-start;
+          p {
+            text-align: left;
+            height: 21px;
+            font-size: 15px;
+            color: rgba(46, 55, 67, 1);
+            line-height: 21px;
+            font-weight: 500;
+          }
+        }
+
+        .right {
+          flex-grow: 1;
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+          .cell {
+            width: 88px;
+            height: 38px;
+            border-radius: 2px;
+            border: 1px solid rgba(239, 239, 239, 1);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 10px;
+            cursor: pointer;
+
+            &:nth-child(8n+1), &:first-child {
+              margin-left: 0;
+            }
+            &:nth-child(n+9) {
+              margin-top: 10px;
+            }
+
+            p {
+              height: 20px;
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(85, 85, 85, 1);
+              line-height: 20px;
+            }
+            &.selected {
+              border: 1px solid rgba(48, 142, 255, 1);
+              p {
+                color: rgba(48, 142, 255, 1);
+                font-weight: 500;
+                height: 21px;
+                font-size: 15px;
+                line-height: 21px;
+              }
+            }
+          }
+        }
+
+        .more {
+          position: absolute;
+          right: 0;
+          top: 0;
+          line-height: 38px;
+          color: #999;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .listArea {
+      //margin-top: 80px;
+
+      .sTitle {
+        height: 25px;
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(34, 34, 34, 1);
+        line-height: 25px;
+        margin-bottom: 14px;
+      }
+      .list {
+        .cell {
+          background: #FFF;
+          display: flex;
+          justify-content: center;
+          height: 180px;
+          width: 100%;
+          margin-top: 10px;
+          cursor: pointer;
+          flex-direction: column;
+          padding: 30px 20px;
+
+          .topArea {
+            width: 100%;
+            height: 24px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .left {
+              height:24px;
+              font-size:17px;
+              font-weight:500;
+              color:rgba(34,34,34,1);
+              line-height:24px;
+            }
+            .right {
+              height:22px;
+              font-size:19px;
+              font-weight:bold;
+              color:rgba(255,51,30,1);
+              line-height:22px;
+            }
+          }
+          .workDesc {
+            width: 100%;
+            margin-top: 5px;
+            height:25px;
+            font-size:13px;
+            font-weight:500;
+            color:rgba(102,102,102,1);
+            line-height:25px;
+            text-align: left;
+          }
+          .labelList {
+            margin-top: 5px;
+            width: 100%;
+            display: flex;
+            .label {
+              margin-left: 10px;
+              background:rgba(238,238,238,1);
+              border-radius:1px;
+              box-sizing: content-box;
+              padding: 3px 10px;
+              &:nth-child(1) {
+                margin-left: 0;
+              }
+              p {
+                height:17px;
+                font-size:12px;
+                font-weight:400;
+                color:rgba(102,102,102,1);
+                line-height:17px;
+              }
+            }
+          }
+          .companyInfo {
+            margin-top: 20px;
+            display: flex;
+            width: 100%;
+            justify-content: flex-start;
+            align-items: center;
+            .logo {
+              width:20px;
+              height:20px;
+              font-size: 0;
+              img {
+                width:20px;
+                height:20px;
+                border-radius: 2px;
+              }
+            }
+            .companyName {
+              margin-left: 7px;
+              height:18px;
+              font-size:13px;
+              font-weight:400;
+              color:rgba(51,51,51,1);
+              line-height:18px;
+              text-align: left;
+            }
+
+          }
+
+        }
+        .noneData {
+          min-height: 100px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          p {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 70px;
+    text-align: center;
+  }
+
+}
+
+.main {
+  margin-top: 0 !important;
+  &.isMobile {
+    width: 100vw;
+  }
+}

components/job/dealSeoFooter.js

@@ -0,0 +1,140 @@
+export default class DealSeoData {
+  constructor({ $axios, req, app, redirect }) {
+    this.$axios = $axios
+    this.req = req
+    this.app = app
+    this.redirect = redirect
+    this.selected = {
+      city: 0,
+      industry: 0,
+      techType: 0,
+    }
+    this.page = {
+      page: 1,
+      size: 10,
+      total: 0
+    }
+    this.finished = false
+    this.dataList = []
+    this.provinces = []
+  }
+  
+  async dealData() {
+    let { name, path, params, fullPath } = this.app.context.route
+    let res = await this.$axios.get('/api/kaifawu/get_options')
+    const { cities, industries, tech_types } = res.data.data || {}
+    let typeList = { city: cities, industry: industries, techType: tech_types }
+    this.typeList = typeList
+    //查找中文
+    let match = params.pathMatch || ''
+    let list = match.split('/').map(item => item.toLocaleLowerCase())
+    list.length = Math.min(list.length, 3) //防止url超出
+    let keys = Object.keys(typeList)
+    //3 * 3 * n的循环 n < 100
+    list.forEach(item => {
+      keys.forEach(keys => {
+        typeList[ keys ].forEach(typeItem => {
+          if (typeItem.slug === item) {
+            this.selected[ keys ] = typeItem.id
+            this.selected[ keys + 'Name' ] = typeItem.name
+          }
+        })
+      })
+    })
+    return {
+      footer: await this.getFooterData(),
+    }
+  }
+  
+  async getFooterData() {
+    //设置底部link列表
+    const typeList = this.typeList
+    const { city, industry, techType, cityName = "", industryName = "", techTypeName = "", proviceName } = this.selected
+    const { headers: { host } } = this.req
+    let footer = {
+      baseLink: "", link: [
+        { name: "", data: [] }, { name: "", data: [] },
+      ],
+    }
+    //设置baseLink
+    if (host.indexOf('local') !== -1) {
+      footer.baseLink = 'http://' + host
+    } else {
+      footer.baseLink = 'https://' + host
+    }
+    if (city && !industry && !techType) {
+      //只有城市的
+      footer.link[ 0 ].name = "热门城市技术解决方案"
+      footer.link[ 1 ].name = `${cityName}技术解决方案`
+      footer.link[ 0 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.industry.map((item) => {
+        return { name: `${cityName}${item.name}技术解决方案`, url: `/kaifain/${city}/${item.slug}/` }
+      })
+    } else if (!city && industry && !techType) {
+      //只有行业的
+      footer.link[ 0 ].name = "其它行业领域技术解决方案"
+      
+      footer.link[ 1 ].name = `热门城市${industryName}技术解决方案`
+      footer.link[ 0 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}${industryName}技术解决方案`, url: `/kaifain/${item.slug}/${industry}/` }
+      })
+    } else if (!city && !industry && techType) {
+      //只有技术分类
+      footer.link[ 0 ].name = `其他行业领域${techTypeName}技术解决方案`
+      footer.link[ 1 ].name = `热门城市${techTypeName}技术解决方案`
+      footer.link[ 0 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}${techTypeName}技术解决方案`, url: `/kaifain/${item.slug}/${techType}/` }
+      })
+      footer.link[ 1 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}${techTypeName}技术解决方案`, url: `/kaifain/${techType}/${item.slug}/` }
+      })
+    } else if (city && industry && !techType) {
+      //${cityName}${industryName}
+      footer.link[ 0 ].name = `热门城市技术解决方案`
+      footer.link[ 1 ].name = `其他行业领域技术解决方案`
+      footer.link[ 0 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+    } else if (city && !industry && techType) {
+      //${cityName}${techTypeName}
+      footer.link[ 0 ].name = `热门城市技术解决方案`
+      footer.link[ 1 ].name = `其他行业领域技术解决方案`
+      footer.link[ 0 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+    } else if (!city && industry && techType) {
+      //${industryName}${techTypeName}
+      footer.link[ 0 ].name = `其他行业领域技术解决方案`
+      footer.link[ 1 ].name = `其他行业技术分类${industryName}技术解决方案`
+      footer.link[ 0 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.techType.map((item) => {
+        return { name: `${industryName}${item.name}技术解决方案`, url: `/kaifain/${industry}/${item.slug}/` }
+      })
+    } else {
+      //非特定的url
+      footer.link[ 0 ].name = "热门城市技术解决方案"
+      footer.link[ 1 ].name = "行业领域技术解决方案"
+      footer.link[ 0 ].data = typeList.city.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+      footer.link[ 1 ].data = typeList.industry.map((item) => {
+        return { name: `${item.name}技术解决方案`, url: `/kaifain/${item.slug}/` }
+      })
+    }
+    return footer
+  }
+}
+

components/job/dealSeoIndex.js

@@ -0,0 +1,230 @@
+export default class DealSeoData {
+  constructor({ $axios, req, app, redirect, error}) {
+    this.$axios = $axios
+    this.req = req
+    this.app = app
+    this.redirect = redirect
+    this.error = error
+    this.selected = {
+      city: 0,
+      industry: 0,
+      techType: 0,
+    }
+    this.page = {
+      page: 1,
+      size: 10,
+      total: 0
+    }
+    this.finished = false
+    this.dataList = []
+    this.provinces = []
+  }
+  
+  async dealData() {
+    let { name, query: { page = 1 }, path, params, fullPath } = this.app.context.route
+    if (path && path[path.length-1] !== '/') {
+      let reditUrl = fullPath
+      reditUrl = reditUrl.replace(path, path+'/')
+      this.redirect(301, reditUrl)
+    }
+    let isSeoList = false
+    let typeList = await this.getTypeList()
+    switch (name) {
+      case "kaifainSeoAll":
+        //kaifain/s页面进入
+        isSeoList = true
+        break
+      case "kaifainSeoIndex":
+        //kaifain路由匹配进入
+        try {
+          let match = params.pathMatch || ''
+          let list = match.split('/').map(item => item.toLocaleLowerCase())
+          list.length = Math.min(list.length, 3) //防止url超出
+          list.filter(item => !!item)
+          let urlCheck = ""
+          let keys = Object.keys(typeList)
+          //3 * 3 * n的循环 n < 100
+          list.forEach(item=>{
+            keys.forEach(keys => {
+              typeList[keys].list.forEach(typeItem => {
+                if (typeItem.slug === item) {
+                  urlCheck += item
+                  this.selected[keys] = typeItem.id
+                  this.selected[keys+'Name'] = typeItem.name
+                  this.selected[keys+'Slug'] = typeItem.slug
+                  if (keys === 'city') {
+                    this.selected["provice"] = typeItem.prov_id
+                  }
+                }
+              })
+            })
+          })
+          console.log("***urlCheck", urlCheck)
+          console.log("***list", list.join(""))
+          if (urlCheck !== list.join("")) {
+            this.error(404)
+            return
+          }
+          
+          if (this.selected["provice"]) {
+            let item = this.provinces.filter(item=>item.id===this.selected["provice"])[0]
+            this.selected["proviceName"] = item && item.name
+          }
+        } catch (e) {
+          console.log("解决方案列表", e)
+        }
+        break
+      default:
+        //其他
+        page = 1
+    }
+    await this.getList()
+    return {
+      typeList,
+      isSeoList, //是否是 /kaifain/s/页面进入
+      dataList:this.dataList, //首次获取的数据
+      mobile: this.app.$deviceType.isMobile(),
+      selected: this.selected,
+      page: this.page,
+      finished: this.finished,
+      head: this.dealThisMeta(isSeoList),
+    }
+  }
+  
+  async getTypeList() {
+    let res = await this.$axios.get('/api/kaifawu/get_options')
+    let typeList = {
+      city: {
+        title: '地区',
+        list: []
+      },
+      industry: {
+        title: '行业领域',
+        list: []
+      },
+      techType: {
+        title: '技术分类',
+        list: []
+      }
+    }
+    if (Number(res.data.status) === 1) {
+      res.data.data.cities.unshift({ id: 0, name: "全部地区" })
+      res.data.data.industries.unshift({ id: 0, name: "全部行业" })
+      res.data.data.tech_types.unshift({ id: 0, name: "全部分类" })
+      Object.keys(res.data.data).forEach(key => {
+        let item = res.data.data[ key ]
+        if (Array.isArray(item)) {
+          item.forEach(ii => {
+            ii.text = ii.name
+            ii.value = ii.id
+          })
+        }
+      })
+      typeList.city.list = [ ...res.data.data.cities ]
+      typeList.industry.list = [ ...res.data.data.industries ]
+      typeList.techType.list = [ ...res.data.data.tech_types ]
+      this.provinces = [] = [ ...res.data.data.provinces ]
+    }
+    return typeList
+  }
+  
+  async getList() {
+    const { page, selected } = this
+    let p = {
+      city: selected.city,
+      tech_type: selected.techType,
+      industry: selected.industry,
+      ...page
+    }
+    let res = await this.$axios.post('/api/kaifawu/index', p)
+    if (Number(res.data.status) === 1) {
+      let data = res.data.data
+      this.page.total = data.total
+      let dataList = data.providers || []
+      dataList.forEach(item => {
+        item[ 'successCase' ] = ''
+        if (Array.isArray(item.successful_case)) {
+          let tem = item.successful_case.map(item => item.title)
+          item[ 'successCase' ] = tem.join('、')
+        }
+      })
+      if (this.page.page === 1) {
+        this.dataList = [...data.providers]
+      } else {
+        this.dataList = [ ...this.dataList, ...data.providers ]
+      }
+      this.page.page += 1
+      if (this.page.total <= this.dataList.length) {
+        this.finished = true
+      }
+    }
+  }
+  
+  dealThisMeta(isSeoList) {
+    const { city, industry, techType, cityName="", industryName="", techTypeName="", proviceName} = this.selected
+    const {headers: {host}, url} = this.req
+  
+    let head = {
+      title:"", keyword: "", descrption: "", h1: "", canonical: "", metaLocation: ""
+    }
+    //拼接canonical
+    if (host.indexOf('local') !== -1) {
+      head.canonical = 'http://' + host + url
+    } else {
+      head.canonical = 'https://' + host + url
+    }
+    
+    if (city && !industry && !techType) {
+      //只有城市的
+      head.title = `${cityName}技术解决方案商家，${cityName}行业领域互联网技术开发解决方案-开发屋`
+      head.keyword = `${cityName}技术解决方案, ${cityName}技术解决方案案例`
+      head.descrption = `开发屋为${cityName}企业提供行业内领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障${cityName}企业在降低人力开发成本的同时，得到优质的项目开发实力。`
+      head.h1 = `${cityName}技术解决方案`
+      head.metaLocation = `province=${proviceName};city=${cityName}`
+    } else if (!city && industry && !techType) {
+      //只有行业的
+      head.title = `${industryName}技术解决方案，${industryName}互联网技术开发解决方案提供-开发屋`
+      head.keyword = `${industryName}技术解决方案`
+      head.descrption = `开发屋为企业提供${industryName}领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障${industryName}的企业在降低人力开发成本同时，得到优质的项目开发实力。`
+      head.h1 = `${industryName}技术解决方案`
+    } else if (!city && !industry && techType) {
+      //只有技术分类
+      head.title = `${techTypeName}技术解决方案案例展示，${techTypeName}及时开发解决方案提供-开发屋`
+      head.keyword = `${techTypeName}技术解决方案`
+      head.descrption = `开发屋为企业提供行业${techTypeName}领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障行业${techTypeName}的企业在降低人力开发成本同时，得到优质的项目开发实力。`
+      head.h1 = `${techTypeName}技术解决方案`
+    } else if (city && industry && !techType) {
+      //${cityName}${industryName}
+      head.title = `${cityName}${industryName}技术解决方案，${cityName}${industryName}互联网技术开发解决方案提供-开发屋`
+      head.keyword = `${cityName}${industryName}技术解决方案`
+      head.descrption = `开发屋为企业提供${cityName}${industryName}领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障${cityName}${industryName}的企业在降低人力开发成本同时，得到优质的项目开发实力。`
+      head.h1 = `${cityName}${industryName}技术解决方案`
+      head.metaLocation = `province=${proviceName};city=${cityName}`
+    } else if (city && !industry && techType) {
+      //${cityName}${techTypeName}
+      head.title = `${cityName}${techTypeName}技术解决方案案例展示，${cityName}${techTypeName}及时开发解决方案提供-开发屋`
+      head.keyword = `${cityName}${techTypeName}技术解决方案案例展示`
+      head.descrption = `开发屋为企业提供${cityName}行业${techTypeName}领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障${cityName}行业${techTypeName}的企业在降低人力开发成本同时，得到优质的项目开发实力。`
+      head.h1 = `${cityName}${techTypeName}技术解决方案案例展示`
+      head.metaLocation = `province=${proviceName};city=${cityName}`
+    } else if (!city && industry && techType) {
+      //${industryName}${techTypeName}
+      head.title = `${industryName}${techTypeName}技术解决方案，${industryName}${techTypeName}互联网技术开发解决方案提供-开发屋`
+      head.keyword = `${industryName}${techTypeName}技术解决方案`
+      head.descrption = `开发屋为企业提供${industryName}${techTypeName}领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障${industryName}${techTypeName}的企业在降低人力开发成本同时，得到优质的项目开发实力。`
+      head.h1 = `${industryName}${techTypeName}技术解决方案`
+    } else {
+      //非特定的url
+  
+      if (isSeoList) {
+        head.title = "解决方案大全"
+      } else {
+        head.title = "开发屋-提供各大行业定制化SaaS、PasS、API、技术组织等互联网领先的技术开发解决方案"
+        head.keyword = "定制化Saas、PasS、API、行业技术解决方案"
+        head.descrption = "开发屋为企业提供行业内领先的技术解决方案，包括行业定制化SaaS、PasS、API数据接口服务以及技术组织，保障企业在降低人力开发成本的同时，得到优质的项目开发实力。"
+      }
+    }
+    return head
+  }
+}
+

components/job/footer.vue

@@ -0,0 +1,206 @@
+<template>
+  <div id="proginn-footer" v-if="deviceType.pc">
+    <div id="friend-links">
+      <div class="links">
+        <a href="/">
+          <img class="logo" :src="baseUrl+'/Public/image/common/logo_new.png'"/>
+        </a>
+        <div class="items">
+          <div class="item-box" v-for="(link, index) in data.link" :key="index">
+            <span class="name">{{link.name}}</span>
+            <div class="item">
+              <div class="list" :class="{expand: explan[index]}">
+                <a
+                  v-for="(item, ii) of link.data"
+                  :key="ii"
+                  :href="item.url"
+                  target="_blank"
+                  :title="item.name"
+                >{{item.name}}</a>
+              </div>
+              <span
+                class="more"
+                style="display: inline;"
+                @click="clickMore(index)"
+              >{{explan[index] ? '收起' : '更多'}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer" id="footer">
+      <div class="footer-container">
+        <div class="footer-links">
+          <a class="item" :href="baseUrl+'/index/app'" rel="nofollow">APP下载</a>
+          <a class="item" href="http://support.proginn.com/" rel="nofollow">帮助</a>
+          <a class="item" :href="baseUrl+'/about'" rel="nofollow">关于我们</a>
+          <a class="item" :href="baseUrl+'/about/mediareports'" rel="nofollow">媒体报道</a>
+          <a class="item" :href="baseUrl+'/sites/'" rel="nofollow">合作伙伴</a>
+          <a class="item" :href="baseUrl+'/about/suggestion'" rel="nofollow">意见反馈</a>
+          <span style="color: rgb(204, 204, 204);" class="ui item">© 程序员客栈</span>
+        </div>
+        <div class="safe">
+          <a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">浙ICP备15029175号</a>
+          <div>
+            <a
+              style="display: flex;"
+              target="_blank"
+              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002011566"
+              rel="nofollow"
+            >
+              <img width="20" height="20" :src="baseUrl+'/Public/image/common/badge.png'"/>
+              <span
+                style="height:20px;line-height:20px;margin: 0px 0px 0px 5px;"
+              >浙公网安备 33011002011566号</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default: {
+          baseLink: "",
+          links: []
+        }
+      }
+    },
+    computed: {
+      ...mapState(['deviceType',]),
+    },
+    data() {
+      return {
+        baseUrl: "",
+        jishuBaseUrl: "",
+        explan: [false, false]
+      }
+    },
+    mounted() {
+
+    },
+    methods: {
+      clickMore(index) {
+        if (index > 1) {
+          return
+        }
+        this.explan[index] = !this.explan[index]
+        this.explan = [...this.explan]
+      },
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+
+<style scoped>
+  #proginn-footer {
+    width: 100%;
+  }
+
+  #friend-links,
+  #footer {
+    display: flex;
+    justify-content: center;
+    background: white;
+  }
+
+  #friend-links {
+    padding: 50px 0 40px;
+  }
+
+  .links,
+  .footer-container {
+    display: flex;
+    justify-content: space-between;
+    width: 1000px;
+    font-size: 12px;
+    color: #4a4a4a;
+  }
+
+  .logo {
+    width: 115px;
+    height: 38px;
+    margin-top: 10px;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 840px;
+  }
+
+  .item {
+    display: flex;
+  }
+
+  .name {
+    line-height: 30px;
+    font-weight: 800;
+  }
+
+  .list {
+    --height: 30px;
+    flex: 1;
+    height: var(--height);
+    line-height: var(--height);
+    overflow: hidden;
+  }
+
+  .list a {
+    display: inline-block;
+    margin: 0 15px 0 0;
+  }
+
+  .expand {
+    height: auto;
+  }
+
+  .footer-container a,
+  .list a {
+    color: #4a4a4a;
+  }
+
+  .footer-container {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #ddd;
+    padding: 20px 0 10px;
+  }
+
+  .footer-links {
+    display: flex;
+    align-items: center;
+  }
+
+  .footer-container a {
+    margin: 0 30px 0 0;
+  }
+
+  .safe {
+    text-align: right;
+  }
+
+  .safe a {
+    margin: 0;
+  }
+
+  .more {
+    line-height: 30px;
+    cursor: pointer;
+  }
+
+  .more:hover {
+    color: #1782d9;
+  }
+</style>

pages/job/index.vue

@@ -24,7 +24,7 @@
           </div>
         </div>
         <div class="listArea">
-          <h1 class="sTitle">{{head.h1 || '解决方案'}}</h1>
+          <!--<h1 class="sTitle">{{head.h1 || '解决方案'}}</h1>-->
           <div class="list" v-loading="loading">
             <nuxt-link class="cell"
               v-for="item in dataList"
@@ -33,32 +33,21 @@
               target="_blank"
               :title="item.name"
             >
-              <div class="left">
-                <img :src="item.images" alt="解决方案images">
+              <div class="topArea">
+                <div class="left">云端工作-杭州-产品经理-6个月</div>
+                <div class="right">¥ 5000-15000</div>
               </div>
-              <div class="right">
-                <div class="top">
-                  <div class="titleA">
-                    <div class="title">{{item.title}}</div>
-                    <div class="tips" v-if="item.city_op_name">{{item.city_op_name}}</div>
-                    <div class="tips" v-if="item.industry_name">{{item.industry_name}}</div>
-                    <div class="tips" v-if="item.tech_type_name">{{item.tech_type_name}}</div>
-                  </div>
-                  <div class="intro">
-                    <p class="tt">介绍：</p>
-                    <p class="value">{{item.description}}</p>
-                  </div>
-                  <div class="ep">
-                    <p class="tt">案例：</p>
-                    <p class="value">
-                      <span>{{item.successCase || '暂未提供'}}</span>
-                    </p>
-                  </div>
-                </div>
-                <div class="bottom">
-                  <p class="icon" v-if="item.company_name"></p>
-                  <p class="word" v-if="item.company_name ">{{item.company_name || '' }}</p>
+              <div class="workDesc">这是驻场招聘的工作内容，最多显示一行，就是30个字！这是驻场招聘的工作内容，最多...</div>
+              <div class="labelList">
+                <div class="label"><p>需求梳理</p></div>
+                <div class="label"><p>需求梳理</p></div>
+                <div class="label"><p>需求梳理</p></div>
+              </div>
+              <div class="companyInfo">
+                <div class="logo">
+                  <img src="" alt="" />
                 </div>
+                <div class="companyName">湖南无限创新网络科技有限公司</div>
               </div>
             </nuxt-link>
             <div v-if="dataList.length === 0" class="noneData">
@@ -89,12 +78,12 @@
 <script>
   import ConnectUs from "@/components/common/connectUs"
   import BindMobile from "@/components/common/bindMobile"
-  import DealSeoData from "@/components/kaifain/dealSeoIndex"
-  import DealSeoFooter from "@/components/kaifain/dealSeoFooter"
-  import KaifainFooter from "@/components/kaifain/footer"
+  import DealSeoData from "@/components/job/dealSeoIndex"
+  import DealSeoFooter from "@/components/job/dealSeoFooter"
+  import KaifainFooter from "@/components/job/footer"
 
   export default {
-    layout: "opacity_header",
+    // layout: "opacity_header",
     showCommonFooter: false,
     components: { ConnectUs, BindMobile, KaifainFooter },
     head() {
@@ -274,7 +263,7 @@
 </script>
 
 <style scope lang="scss">
-  @import "../../assets/css/kaifain/index.scss";
+  @import "../../assets/css/job/index.scss";
 </style>
 <style lang="scss">
   .van-dropdown-menu__title {