update code

package-lock.json

@@ -2984,6 +2984,7 @@
       "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
       "dev": true,
+      "optional": true,
       "requires": {
         "hoek": "2.x.x"
       }
@@ -6629,7 +6630,8 @@
       "version": "2.16.3",
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "hoopy": {
       "version": "0.1.4",
@@ -9056,6 +9058,11 @@
         "commander": "*"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9936,7 +9943,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pify": {
       "version": "2.3.0",

package.json

@@ -27,6 +27,7 @@
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
+    "moment": "^2.29.1",
     "node-sass": "^4.9.4",
     "pdfjs": "^2.4.1",
     "pdfjs-dist": "^2.2.228",

src/App.vue

@@ -8,7 +8,7 @@
 export default {
   name: 'App',
   mounted() {
-  }
+  },
 }
 </script>
 

src/api/data.js

@@ -848,3 +848,39 @@ export const getDetailRequest = (id) => {
     method: 'get'
   })
 }
+
+export const getPositionRequest = () => {
+    return axios.request({
+      url: 'api/cms/open/api/infor/position',
+      method: 'get'
+    })
+  }
+
+  export const getChannelSecond = (id) => {
+    return axios.request({
+      url: 'api/cms/open/api/infor/channel/'+id,
+      method: 'get'
+    })
+  }
+
+  export const getCall = (id) => {
+    return axios.request({
+      url: 'api/devops/open/api/call/'+id,
+      method: 'get'
+    })
+  }
+
+  export const getLiInfo = (p) => {
+    return axios.request({
+      url: 'api/devops/open/api/call/1507216239127048194',
+      method: 'get',
+      params:p
+    })
+  }
+
+  export const downloadAction = (fileName) => {
+    return axios.request({
+      url: 'api/cms/open/api/infor/download?fileName='+fileName,
+      method: 'get'
+    })
+  }

src/config/index.js

@@ -31,7 +31,7 @@ export default {
    * @description api请求基础路径
    */
   baseUrl: {
-    dev: 'http://localhost:9001',
+    dev: 'http://183.162.252.100:9012',
     pro: 'https://oss.console.ingenuity.top'
   }
 }

src/index.less

@@ -186,8 +186,8 @@ body {
   font-weight: 900;
   position: absolute;
   margin-right: 100px;
-  left: 0;
-  top: 0;
+  left: -40px;
+  top: 6px;
   text-align: center;
   line-height: 50px;
   width: 100px;

src/libs/api.request.js

@@ -1,6 +1,7 @@
 import HttpRequest from '@/libs/axios'
 import config from '@/config'
-const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
+// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
+const baseUrl = '/api'
 
 const axios = new HttpRequest(baseUrl)
 export default axios

src/libs/axios.js

@@ -63,7 +63,7 @@ class HttpRequest {
     // 响应拦截
     instance.interceptors.response.use(res => {
       this.distroy(url)
-      console.log(res)
+    //   console.log(res)
       if (res.status === 200 || res.data.success) {
         return Promise.resolve(res.data)
       } else {

src/main.js

@@ -17,6 +17,14 @@ import '@/assets/editor/font/iconfont.css'
 import 'vue2-toast/lib/toast.css'
 import 'element-ui/lib/theme-chalk/index.css';
 import Toast from 'vue2-toast'
+import Moment from 'moment'
+
+// 定义全局时间戳过滤器
+// Vue.filter('formatDate', function(value) {
+//     return Moment(value).format('MM-DD')
+//   })
+  Vue.prototype.$moment = Moment;//赋值使用  
+
 // import ElementUI from 'element-ui'
 // import { ElementTiptapPlugin } from 'element-tiptap'
 // import ElementUI's styles

src/router/routers.js

@@ -57,6 +57,80 @@ export default [
         },
         component: () => import('@/view/vip')
       },
+      {
+        path: '/company',
+        name: 'company',
+        meta: {
+          hideInMenu: true,
+          title: '企业认定',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/company')
+      },
+      {
+        path: '/news',
+        name: 'news',
+        meta: {
+          hideInMenu: true,
+          title: '新闻资讯',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/news')
+      },
+      {
+        path: '/policy',
+        name: 'policy',
+        meta: {
+          hideInMenu: true,
+          title: '产业政策',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/policy')
+      },
+      {
+        path: '/trode',
+        name: 'trode',
+        meta: {
+          hideInMenu: true,
+          title: '行业动态',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/trode')
+      },{
+        path: '/member',
+        name: 'member',
+        meta: {
+          hideInMenu: true,
+          title: '会员产品',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/member')
+      },{
+        path: '/people',
+        name: 'people',
+        meta: {
+          hideInMenu: true,
+          title: '人力资源',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/people')
+      },{
+        path: '/data',
+        name: 'data',
+        meta: {
+          hideInMenu: true,
+          title: '数据上报',
+          notCache: true,
+          showInBreadCrumb: true
+        },
+        component: () => import('@/view/data')
+      },
       {
         path: '/vip-service',
         name: 'vip-service',

src/view/about.vue

@@ -11,38 +11,150 @@
           <div slot="header">
             <span>关于我们</span>
           </div>
-          <div class="menu-item active">SICA简介</div>
-          <div class="menu-item">SICA章程</div>
+          <!-- <div class="menu-item active">SICA简介</div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
         </el-card>
       </el-col>
-      <el-col :span="20">
-        <el-card shadow="never" style="margin: 0 10px">
+      <el-col :span="20" >
+        <el-card shadow="never" style="margin: 0 10px" v-if="activeIndex == 0">
           <el-row>
-            <el-col :span="12">
+            <el-col :span="12" v-for="(item, index) in dataList" :key="index" >
               <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
-                <img src="//lanhu.oss-cn-beijing.aliyuncs.com/pspflh4kuvfymaezxzegpy9k9nn4pd3qmzbdcdf1a27-2222-41cc-be5e-5ab2e6a6bac5" style="border-radius: 10px;margin: 10px 0 10px 0;height: 100%;width: 100%"/>
-              <p style="color: #333">Brief Introduction of Shanghai Integrated Circuit  Industry Ass</p>
-              </el-card>
-            </el-col>
-            <el-col :span="12">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
-                <img src="//lanhu.oss-cn-beijing.aliyuncs.com/pspflh4kuvfymaezxzegpy9k9nn4pd3qmzbdcdf1a27-2222-41cc-be5e-5ab2e6a6bac5" style="border-radius: 10px;margin: 10px 0 10px 0;height: 100%;width: 100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
+                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0 10px 0;height: 100%;width: 100%"/>
+              <p style="color: #333">{{item.title}}</p>
               </el-card>
             </el-col>
+
           </el-row>
         </el-card>
+
+         <el-card class="article" shadow="never" style="border-radius: 8px" v-if="activeIndex == 1">
+            <h2 class="title">上海市集成电路行业协会章程</h2>
+            <div class="info">作者：{{InfoObj.author}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：{{InfoObj.publishTime}}</div>
+            <div class="content" v-html="InfoObj.content"></div>
+            <!-- <div class="content">
+                <div class="title">第一章&nbsp;&nbsp;总&nbsp;则<br /></div>
+                <span><br />第一条&nbsp;&nbsp;本会的名称是上海市集成电路行业协会。（英文名称是SHANGHAI&nbsp;INTEGRATED&nbsp;CIRCUIT&nbsp;INDUSTRY&nbsp;&nbsp;ASSOCIATION，缩写是&nbsp;SICA。）<br /><br />第二条&nbsp;&nbsp;本会依照《社会团体登记管理条例》和《上海市促进行业协会发展规定》等规定，由本市集成电路行业同业企业，（从事集成电路的生产、设计、科研教学、开发、经营、应用）以及其他相关经济组织自愿组成、实行行业服务和自律管理的非营利性的社会团体法人。<br /><br />第三条&nbsp;&nbsp;本会的宗旨：遵守中华人民共和国宪法和法律，在行业管理中发挥积极作用，作为政府与企事业单位之间的桥梁和纽带，为增强企业的市场竞争力，为促进上海集成电路产业的发展提供服务。<br /><br />第四条&nbsp;&nbsp;本会的登记管理机关是上海市社会团体管理局，相关行业主管部门是上海市经济和信息化委员会。本会接受登记管理机关和相关行业主管部门的监督管理和业务指导。<br /><br />第五条&nbsp;&nbsp;本会的住所和活动地域：上海市。<br /><br/></span>
+                <div class="title">第二章&nbsp;任务、业务范围、活动原则<br/></div>
+                <span><br />第六条&nbsp;&nbsp;本会的任务：加强行业服务、行业自律、行业代表、行业协调：<br /><br />（一）宣传贯彻国家关于集成电路产业的各项方针、政策，促进企业提高市场竞争力。<br /><br />（二）收集整理国内外行业信息，进行产业发展的政策、环境、技术和市场等方面的研究，为会员传递信息，为政府部门决策和制定产业政策提供参考。<br /><br />（三）代表本行业向有关国家机关反映涉及行业利益的事项，提出经济政策和立法方面的意见和建议。<br /><br />（四）根据国家法律、法规，代表行业内相关企业向政府有关部门提出反倾销、反补贴调查或者采取保障措施的申请，协助政府有关部门完成相关调查。<br /><br />（五）制订并督促会员企业遵守诚信原则。对违反行规行约，损害行业整体形象的会员，采取相应的行业自律措施；对违法经营的企业，建议政府有关部门予以查处。<br /><br />（六）促进行业内集成电路产业链间的交流与合作，组织拓展、发布市场信息，推介行业产品。<br /><br />（七）开展知识产权保护工作，组织行业内各种层次的技术培训、进修和国际国内的合作与交流。<br /><br />（八）接受政府有关部门委托承担集成电路企业产品认定、产品评测、行业评估论证、技能资质考核、行业统计调查、行业发展规划和有关技术标准的制订等职能。<br /><br />第七条&nbsp;&nbsp;本会的业务范围：行业调研、产品评测、会展、技术培训、交流、合作，编辑出版、咨询服务，承担政府授权的职能。<br /><br />第八条&nbsp;本会的活动原则：<br /><br />（一）本会遵守宪法、法律、法规和国家政策，自觉遵守宪法确定的基本原则，自觉维护国家的统一、安全和民族的团结，自觉维护国家利益、社会公共利益以及其他组织和公民的合法权益，遵守社会公德和公序良俗，按照核准的章程开展公益性或者非营利性活动。<br /><br />（二）民主办会，实行民主集中制，建立民主决策、民主选举和民主管理制度，领导机构的产生和重大事项的决策，须经集体讨论，并按少数服从多数的原则作出决定。<br /><br />（三）本会开展活动时，诚实守信，公正公平，不弄虚作假，不损害国家、会员和个人利益。<br /><br />（四）本会遵循“自主办会”原则，工作自主、人员自聘、经费自筹。<br /><br /><br/></span>
+                <div class="title">第三章&nbsp;&nbsp;会&nbsp;员<br /></div>
+                <span><br />第九条&nbsp;&nbsp;本会由单位会员组成。<br /><br />第十条&nbsp;&nbsp;申请加入本会，必须具备下列条件：<br /><br />（一）应持有工商营业执照等相关证件。<br /><br />（二）自愿加入本会。<br /><br />（三）承认本会章程。<br /><br />（四）本行业同业企业以及其他相关经济组织。<br /><br />（五）在本会的业务领域内具有一定的影响。<br /><br />第十一条&nbsp;会员入会的程序：<br /><br />（一）提交入会申请书。<br /><br />（二）经理事会授权的秘书处审核同意，并发给同意吸收入会的有关证书。<br /><br />第十二条&nbsp;会员享有下列权利：<br /><br />（一）本会的选举权、被选举权和表决权。<br /><br />（二）参加本会的活动权。<br /><br />（三）获得本会服务的优先权。<br /><br />（四）查阅本会章程、规章制度、会员名册、理事名册、会议记录、会议决议、会议纪要、财务审计报告等知情权。<br /><br />（五）提议案权、建议权和监督权。<br /><br />（六）入会自愿、退会自由。<br /><br />（七）法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十三条&nbsp;会员履行下列义务：<br /><br />（一）遵守本会的章程。<br /><br />（二）执行本会的决议。<br /><br />（三）维护本行业的合法权益。<br /><br />（四）完成本会交办的工作。<br /><br />（五）向本会反映情况，提供有关资料。<br /><br />（六）按规定缴纳会费。<br /><br />（七）法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十四条&nbsp;&nbsp;本会会员不得利用其经营规模、市场份额等优势，限制其他会员在本会中发挥作用。<br /><br />第十五条&nbsp;&nbsp;会员退会应向本会递交书面函件，并交回会员有关证书。<br /><br />会员如在两年内无故不缴纳会费或不参加本会活动的，经理事会确认，视为自动退会。本会取消其会员资格。<br /><br />第十六条&nbsp;&nbsp;会员如有严重违反国家法律、法规、规章或本会章程的，经理事会三分之二以上与会者表决通过，取消其会员资格并公示。<br /><br />会员如对理事会取消会员资格决定不服，可提出申诉，由理事会作出答复，必要时提交会员大会审议后答复。<br /><br />第十七条&nbsp;&nbsp;本会建立完整的会员名册和会员诚信档案，并根据变化情况及时调整。</span
+                >
+            </div> -->
+        </el-card>
+
+
       </el-col>
+
+
     </el-row>
   </el-main>
 </template>
 
 <script>
+import moment from 'moment'
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond} from "../api/data";
+
 export default {
   data () {
     return {
-
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        infoId: '',
+        InfoObj: {}
     }
+  },
+  filters: {
+      formatDate: function (value) {
+        let date = new Date(value);
+        let y = date.getFullYear();
+        let MM = date.getMonth() + 1;
+        MM = MM < 10 ? ('0' + MM) : MM;
+        let d = date.getDate();
+        d = d < 10 ? ('0' + d) : d;
+        let h = date.getHours();
+        h = h < 10 ? ('0' + h) : h;
+        let m = date.getMinutes();
+        m = m < 10 ? ('0' + m) : m;
+        let s = date.getSeconds();
+        s = s < 10 ? ('0' + s) : s;
+        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
+      }
+    },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '关于我们'){
+                      this.getChannelSecond(item.id)
+                  }else if(item.channelName == '协会章程'){
+                      this.infoId= item.id
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              if(this.activeIndex == 1){
+                  this.InfoObj = {...this.dataList[0]}
+                  console.log(this.InfoObj.publishTime)
+                  this.InfoObj.publishTime = this.$moment(Number(this.InfoObj.publishTime)).format("YYYY年MM月DD")
+              }
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          
+          if(index == 0){
+              this.getChannelInformationsRequest(this.titleList[index].id)
+          }else if(index == 1){
+              this.getChannelInformationsRequest(this.infoId)
+          }
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
   }
 }
 </script>
+<style>
+.title{
+  color: #333 !important;
+  font-weight: 700;
+}
+.article .title,.article .info{
+  text-align: center;
+  margin: 10px;
+}
+.article .info{
+  color: #999;
+}
+.article .content p{
+  text-indent: 2em;
+  margin-bottom: 20px;
+  line-height: 1.5rem;
+}
+.article .content span{
+  line-height: 1.5rem;
+}
+</style>

src/view/company.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>企业认定</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>企业认定</span>
+          </div>
+          <!-- <div class="menu-item active"><router-link to="/vip-service">会员服务</router-link></div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond,
+        getDetailRequest} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '企业认定'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+              this.dataList.map((item) => {
+                  item.publishTime = this.$moment().format("YYYY-MM-DD")
+              })
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>
+<style>
+
+</style>

src/view/connect.vue

@@ -13,14 +13,14 @@
         </div>
       </div>
       <el-row class="connect-info">
-        <el-col span="6">
-          <div class="connect-title">办公室联系人</div>
+        <el-col span="6" v-for="(item, index) in dataList" :key="index">
+          <div class="connect-title">{{item.orgName}}</div>
           <div class="line"></div>
-          <div>联系人：毛彩虹</div>
-          <div>电话：50805271</div>
-          <div>电子邮件：contact@sica.org.cn</div>
+          <div>联系人：{{item.name}}</div>
+          <div>电话：{{item.phone}}</div>
+          <div>电子邮件：{{item.mail}}</div>
         </el-col>
-        <el-col span="6">
+        <!-- <el-col span="6">
           <div class="connect-title">企业服务部联系人</div>
           <div class="line"></div>
           <div>联系人：石建宾</div>
@@ -40,7 +40,7 @@
           <div>联系人：刘林发</div>
           <div>电话：50800657</div>
           <div>电子邮件：contact@sica.org.cn</div>
-        </el-col>
+        </el-col> -->
       </el-row>
       <div class="connect">
         <img src="//lanhu.oss-cn-beijing.aliyuncs.com/ps7hnun1mrhul8ty6q6fpda49g6zj0hv51rafc26613-869f-4151-bc0f-0402aa34505f"/>
@@ -50,9 +50,25 @@
 </template>
 
 <script>
+import {getCall} from "../api/data";
+
 export default {
   data() {
-    return {}
+    return {
+        dataList: []
+    }
+  },
+  methods: {
+      async getCall(){
+          let res = await getCall('1507221624449806337')
+          if(res.code == 200){
+              console.log(JSON.stringify(res.data))
+              this.dataList = res.data
+          }
+      },
+  },
+  mounted() {
+    this.getCall()
   }
 }
 </script>

src/view/data.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>数据上报</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>数据上报</span>
+          </div>
+          <!-- <div class="menu-item active">SICA简介</div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: []
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '数据上报'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              console.log("this.dataList:"+JSON.stringify(this.dataList))
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>

src/view/exchange.vue

@@ -11,27 +11,34 @@
           <div slot="header">
             <span>合作交流</span>
           </div>
-          <div class="menu-item"><router-link to="/vip-service">年度活动一览表</router-link></div>
+          <!-- <div class="menu-item"><router-link to="/vip-service">年度活动一览表</router-link></div>
           <div class="menu-item">活动新闻</div>
-          <div class="menu-item active">活动预告</div>
+          <div class="menu-item active">活动预告</div> -->
+
+            <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.title}}</div>
+
         </el-card>
       </el-col>
       <el-col :span="20">
         <el-card shadow="never" style="margin: 0 10px;">
           <h2 style="text-align: center">活动预告</h2>
           <ul style="list-style: none" class="exchange-list">
-            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0;height: 120px" v-for="(item,index) in 10">
-              <img style="float: left;width: 100px;height: 100px;border-radius: 8px" src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png"/>
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0;height: 120px" 
+            v-for="(item,index) in dataList" :key="index">
+              <img style="float: left;width: 100px;height: 100px;border-radius: 8px" 
+                :src="item.aboutImg"/>
               <div style="margin-left: 120px;">
-                <h3 style="color:#333333;">上海市经济信息化委关于开展申报2020年度上海市软件和集成电路企业核心团队...</h3>
-                <p style="color: #999">根据《关于本市进一步鼓励软件产业和集成电路产业发展的若干政策》（沪府发〔2017〕23号）和《上海 市软件和集成电路企业设计人</p>
+                <h3 style="color:#333333;">{{item.title}}</h3>
+                <p style="color: #999" v-html="item.content"></p>
               </div>
             </li>
           </ul>
           <el-pagination
             background
             layout="prev, pager, next"
-            :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
           </el-pagination>
         </el-card>
       </el-col>
@@ -40,11 +47,57 @@
 </template>
 
 <script>
+import {getChannelInformationsRequest, getChannelsRequest, 
+        getDetailRequest} from "../api/data";
+
 export default {
   data () {
     return {
-
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
     }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '合作交流'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          console.log(this.titleList[index].id)
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
   }
 }
 </script>

src/view/km.vue

@@ -6,9 +6,14 @@
           <div slot="header">
             <span>知识产权与标准化</span>
           </div>
-          <div class="menu-item active">标准化创新基地介绍</div>
+          <!-- <div class="menu-item active">标准化创新基地介绍</div>
           <div class="menu-item">协会团标</div>
-          <div class="menu-item">申请编写团标</div>
+          <div class="menu-item">申请编写团标</div> -->
+
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.title}}</div>
+
         </el-card>
       </el-col>
       <el-col :span="20">
@@ -17,62 +22,14 @@
             <span>协会团标</span>
           </h2>
           <el-row>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-              <p style="color: #333">国家鼓励的集成电路企业认定 实施细则企业认定</p>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
-
-              </el-card>
-            </el-col>
-            <el-col :span="6">
+            <el-col :span="6" v-for="(item,index) in dataList" :key="index" >
               <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
-
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
-
+                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              <p style="color: #333">{{item.title}}</p>
               </el-card>
             </el-col>
           </el-row>
-          <el-row>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">国家鼓励的集成电路企业认定 实施细则企业认定</p>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
-
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
 
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}">
-                <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
-                <p style="color: #333">上海市集成电路行业协会简介</p>
-              </el-card>
-            </el-col>
-          </el-row>
         </el-card>
       </el-col>
     </el-row>
@@ -80,11 +37,58 @@
 </template>
 
 <script>
+import {getChannelInformationsRequest, getChannelsRequest, 
+        getChannelSecond} from "../api/data";
+
 export default {
   data () {
     return {
-
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
     }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '知识产权'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+              this.titleList = res.data
+              console.log("this.titleList:"+JSON.stringify(res.data))
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          console.log(this.titleList[index].id)
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
   }
 }
 </script>

src/view/main/main.vue

@@ -2,19 +2,21 @@
   <el-container>
     <el-header class="header linear">
       <el-menu :default-active="activeIndex" mode="horizontal" style="position: relative;padding-left: 100px;width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible">
-        <div class="logo"><router-link to="/overview">logo</router-link></div>
+        <div class="logo">
+            <img src="../../assets/images/logo.jpg" style="width: 180px; height: 40px;">
+        </div>
         <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item>
         <el-menu-item index="2"><router-link to="/about">关于我们</router-link></el-menu-item>
         <el-menu-item index="3"><router-link to="/vip-service">协会会员</router-link></el-menu-item>
-        <el-menu-item index="4"><router-link to="/connect">企业认定</router-link></el-menu-item>
-        <el-menu-item index="5"><router-link to="/connect">新闻资讯</router-link></el-menu-item>
-        <el-menu-item index="6"><router-link to="/connect">产业政策</router-link></el-menu-item>
-        <el-menu-item index="7"><router-link to="/connect">行业动态</router-link></el-menu-item>
+        <el-menu-item index="4"><router-link to="/company">企业认定</router-link></el-menu-item>
+        <el-menu-item index="5"><router-link to="/news">新闻资讯</router-link></el-menu-item>
+        <el-menu-item index="6"><router-link to="/policy">产业政策</router-link></el-menu-item>
+        <el-menu-item index="7"><router-link to="/trode">行业动态</router-link></el-menu-item>
         <el-menu-item index="8"><router-link to="/exchange">合作交流</router-link></el-menu-item>
         <el-menu-item index="9"><router-link to="/km">知识产权</router-link></el-menu-item>
-        <el-menu-item index="10"><router-link to="/connect">会员产品</router-link></el-menu-item>
-        <el-menu-item index="11"><router-link to="/connect">人力资源</router-link></el-menu-item>
-        <el-menu-item index="12"><router-link to="/connect">数据上报</router-link></el-menu-item>
+        <el-menu-item index="10"><router-link to="/member">会员产品</router-link></el-menu-item>
+        <el-menu-item index="11"><router-link to="/people">人力资源</router-link></el-menu-item>
+        <el-menu-item index="12"><router-link to="/data">数据上报</router-link></el-menu-item>
         <el-menu-item index="13"><router-link to="/connect">联系我们</router-link></el-menu-item>
       </el-menu>
     </el-header>
@@ -22,19 +24,8 @@
     <el-footer style="height: 100px" class="linear">
       <div class="footer">
         <div class="footer-bar">
-          <span>首页</span>
-          <span>关于我们</span>
-          <span>协会会员</span>
-          <span>企业认定</span>
-          <span>新闻资讯</span>
-          <span>产业政策</span>
-          <span>行业动态</span>
-          <span>合作交流</span>
-          <span>知识产权</span>
-          <span>会员产品</span>
-          <span>人力资源</span>
-          <span>数据上报</span>
-          <span>联系我们</span>
+          <span @click="clickItem(index)"
+            v-for="(item, index) in menuLists" :key="index" >{{item.text}}</span>
         </div>
         <div class="copyright">版权所有&nbsp;©&nbsp;上海市集成电路行业协会&nbsp;保留所有权利<br />技术支持：锐赢技术&nbsp;&nbsp;沪ICP备11022172号-1</div>
       </div>
@@ -77,7 +68,22 @@ export default {
       minLogo,
       maxLogo,
       isFullscreen: false,
-      height: 'height:'+((document.documentElement.clientHeight || document.body.clientHeight) - 50)+'px'
+      height: 'height:'+((document.documentElement.clientHeight || document.body.clientHeight) - 50)+'px',
+      menuLists: [
+          {text: '首页', path: '/overview'},
+          {text: '关于我们', path: '/about'},
+          {text: '协会会员', path: '/vip-service'},
+          {text: '企业认定', path: '/company'},
+          {text: '新闻资讯', path: '/news'},
+          {text: '产业政策', path: '/policy'},
+          {text: '行业动态', path: '/trode'},
+          {text: '合作交流', path: '/exchange'},
+          {text: '知识产权', path: '/km'},
+          {text: '会员产品', path: '/member'},
+          {text: '人力资源', path: '/people'},
+          {text: '数据上报', path: '/data'},
+          {text: '联系我们', path: '/connect'},
+        ]
     }
   },
   computed: {
@@ -113,6 +119,11 @@ export default {
     ...mapActions([
       'handleLogin'
     ]),
+    clickItem(index){
+        this.activeIndex = index + 1
+        this.$router.push(this.menuList[index].path)
+        this.$forceUpdate()
+    },
     turnToPage (route) {
       let {name, params, query} = {}
       if (typeof route === 'string') name = route
@@ -182,19 +193,42 @@ export default {
     if(path.indexOf('vip-service')>=0){
       this.activeIndex = '3';
     }
-    if(path.indexOf('connect')>=0){
+    if(path.indexOf('company')>=0){
       this.activeIndex = '4';
     }
+    if(path.indexOf('news')>=0){
+      this.activeIndex = '5';
+    }
+    if(path.indexOf('policy')>=0){
+      this.activeIndex = '6';
+    }
+    if(path.indexOf('trode')>=0){
+      this.activeIndex = '7';
+    }
     if(path.indexOf('exchange')>=0){
       this.activeIndex = '8';
     }
     if(path.indexOf('km')>=0){
       this.activeIndex = '9';
     }
+    if(path.indexOf('member')>=0){
+      this.activeIndex = '10';
+    }
+    if(path.indexOf('people')>=0){
+      this.activeIndex = '11';
+    }
+    if(path.indexOf('data')>=0){
+      this.activeIndex = '12';
+    }
 
   }
 }
 </script>
 <style>
-
+.logo{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
 </style>

src/view/member.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>会员产品</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>会员产品</span>
+          </div>
+          <!-- <div class="menu-item active">SICA简介</div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: []
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '会员产品'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              console.log("this.dataList:"+JSON.stringify(this.dataList))
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>

src/view/news.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>新闻资讯</span>
+          </div>
+          <!-- <div class="menu-item active"><router-link to="/vip-service">会员服务</router-link></div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond,
+        getDetailRequest} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '新闻资讯'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+              this.dataList.map((item) => {
+                  item.publishTime = this.$moment().format("YYYY-MM-DD")
+              })
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>
+<style>
+
+</style>

src/view/overview.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-carousel trigger="click" height="400px">
-      <el-carousel-item v-for="item in 3" :key="item">
-        <img src="//lanhu.oss-cn-beijing.aliyuncs.com/pso3qae4u2g8lb8tie1nc2mweul0p5j5i81ef68b8f-e805-4d9f-9c5d-5679d724f7c3"/>
+      <el-carousel-item v-for="(item,index) in lunBoList" :key="index">
+        <img :src="item.aboutImg"/>
       </el-carousel-item>
     </el-carousel>
     <el-main style="width: 960px;margin: 0 auto">
@@ -13,14 +13,17 @@
               <span><el-divider direction="vertical"></el-divider>重要信息</span>
               <el-button style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</el-button>
             </div>
-            <div v-for="o in 10" :key="o" class="text item">
-              {{'List item ' + o }}
+            <div v-for="(o, index) in importList" :key="index" class="text item">
+              {{index+1}}、{{o.title}}
             </div>
           </el-card>
         </el-col>
         <el-col :span="12"><div class="grid-content bg-purple-light"></div>
-          <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px',height:'418px' }">
-            <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png"/>
+          <el-card class="box-card" shadow="never" style="margin: 0 10px; position: relative;" :body-style="{ padding: '0px',height:'418px' }">
+            <img :src="imgObj.aboutImg"/>
+            <div class="img_info">
+                <span class="img_text">2021中国国际汽车电子高峰论坛将于11月25日在上海举行</span>
+            </div>
           </el-card>
         </el-col>
         <el-col :span="6"><div class="grid-content bg-purple"></div>
@@ -29,8 +32,8 @@
               <span><el-divider direction="vertical"></el-divider>新闻资讯</span>
               <el-button style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</el-button>
             </div>
-            <div v-for="o in 10" :key="o" class="text item">
-              {{'List item ' + o }}
+            <div v-for="(item, index) in newsList" :key="index" class="text item">
+              {{index+1}}、{{item.title}}
             </div>
           </el-card>
         </el-col>
@@ -43,9 +46,9 @@
                 <span><el-divider direction="vertical"></el-divider>行业动态</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              <h2>{{hangDamic.title}}</h2>
+              <p v-html="hangDamic.content"></p>
+              <img :src="hangDamic.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
           <el-col :span="12">
@@ -54,9 +57,12 @@
                 <span><el-divider direction="vertical"></el-divider>产业政策</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <div class="list" v-for="o in 4">
-                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
+              <div class="list" v-for="(item, index) in chanList" :key="index">
+                <h2 style="display: flex; flex-direction: row">
+                    <span style="flex: 1">{{item.title}}</span>
+                    <span class="time">{{item.publishTime}}</span>
+                </h2>
+                <p v-html="item.content"></p>
               </div>
             </el-card>
           </el-col>
@@ -70,14 +76,12 @@
                 <span><el-divider direction="vertical"></el-divider>合作交流</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
-            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+            <el-card class="box-card" shadow="never" v-for="(item, index) in hezuoList" :key="index"
+            :body-style="{ padding: '0px 20px' }">
+              <h2>{{item.title}}</h2>
+              <p v-html="item.content"></p>
+              <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
           <el-col :span="8">
@@ -86,14 +90,15 @@
                 <span><el-divider direction="vertical"></el-divider>知识产权</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
+              <!-- <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
               <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> -->
             </el-card>
-            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+            <el-card class="box-card" shadow="never" v-for="(item, index) in zhishiList" :key="index"
+            :body-style="{ padding: '0px 20px' }">
+              <h2>{{item.title}}</h2>
+              <p v-html="item.content"></p>
+              <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
           <el-col :span="8">
@@ -102,14 +107,15 @@
                 <span><el-divider direction="vertical"></el-divider>会员产品</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
+              <!-- <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
               <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> -->
             </el-card>
-            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
-              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
-              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+            <el-card class="box-card" shadow="never" v-for="(item, index) in huiyuanList" :key="index"
+            :body-style="{ padding: '0px 20px' }">
+              <h2>{{item.title}}</h2>
+              <p v-html="item.content"></p>
+              <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
         </el-row>
@@ -122,9 +128,12 @@
                 <span><el-divider direction="vertical"></el-divider>合作交流</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <div class="list" v-for="o in 4">
-                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
+              <div class="list" v-for="(item, index) in hezuoList" :key="index">
+                <h2 style="display: flex; flex-direction: row">
+                    <span style="flex: 1">{{item.title}}</span>
+                    <span class="time">{{item.publishTime}}</span>
+                </h2>
+                <p v-html="item.content"></p>
               </div>
             </el-card>
             <div style="border-right: 1px solid #eee;width:1px;height: 320px;position: absolute;top:15px;right: 0"></div>
@@ -135,14 +144,55 @@
                 <span><el-divider direction="vertical"></el-divider>企业认定</span>
                 <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
               </div>
-              <div class="list" v-for="o in 4">
-                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
-                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
+              <div class="list" v-for="(item, index) in qiyeList" :key="index">
+                <h2 style="display: flex; flex-direction: row">
+                    <span style="flex: 1">{{item.title}}</span>
+                    <span class="time">{{item.publishTime}}</span>
+                </h2>
+                <p v-html="item.content"></p>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
+        <el-row class="card_style2">
+          <el-col :span="12">
+            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
+              <div slot="header">
+                <span><el-divider direction="vertical"></el-divider>行业管理</span>
+                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
+              </div>
+              <div class="list" v-for="(item, index) in hangyeList" :key="index">
+                <h2 style="display: flex; flex-direction: row">
+                    <span style="flex: 1">{{item.title}}</span>
+                    <span class="time">{{item.title}}</span>
+                </h2>
+                <p v-html="item.content"></p>
+                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
+              <div slot="header">
+                <span><el-divider direction="vertical"></el-divider>人力资源</span>
+                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
+              </div>
+              <div class="list" v-for="(item, index) in renliList" :key="index">
+                <h2 style="display: flex; flex-direction: row">
+                    <span style="flex: 1">{{item.title}}</span>
+                    <span class="time">{{item.title}}</span>
+                </h2>
+                <p v-html="item.content"></p>
+                <img :src="item.aboutImg" style="border-radius: 10px;margin: 10px 0" width="100%"/>
               </div>
             </el-card>
           </el-col>
         </el-row>
       </el-card>
+
       <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
         <el-row class="card_style2">
           <el-col :span="24">
@@ -150,8 +200,9 @@
               <div slot="header">
                 <span><el-divider direction="vertical"></el-divider>会员企业</span>
               </div>
-              <div v-for="o in 10" style="display: inline-table;width: 135px;height: 62px;border: 1px solid #eee;margin: 10px 20px;text-align: center">
-                <img src="../assets/img/psbgg7t8t6t7ljqxtsg9h7ly4mpk83p6f1c4592a0-a2cd-41a9-bb83-8feb2ffe175e.png"/>
+              <div v-for="(item, index) in huiyuanQiList" :key="index"
+               style="display: inline-table;width: 135px;height: 62px;border: 1px solid #eee;margin: 10px 20px;text-align: center">
+                <img :src="item.aboutImgUrl"/>
               </div>
             </el-card>
             <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
@@ -159,7 +210,12 @@
                 <span><el-divider direction="vertical"></el-divider>友情链接</span>
               </div>
               <div >
-                <el-button type="text" style="color: #255089">国家发改委 | 国家工信部 | 国家财政部 | 国家税务机关 | 中国海关 </el-button>
+                <el-button type="text" style="color: #255089">
+                    <a href="" v-for="(item, index) in youqingList" :key="index" >
+                        {{item.title}}
+                    </a>
+                    <!-- 国家发改委 | 国家工信部 | 国家财政部 | 国家税务机关 | 中国海关  -->
+                </el-button>
               </div>
             </el-card>
           </el-col>
@@ -170,29 +226,157 @@
 </template>
 
 <script>
-  import {getChannelInformationsRequest, getChannelsRequest, getDetailRequest} from "../api/data";
+  import {getChannelInformationsRequest, getChannelsRequest, 
+        getDetailRequest, getPositionRequest} from "../api/data";
 
 export default {
   data () {
     return {
-
+        importList: [],
+        newsList: [],
+        hangDamic: {},
+        chanList: [],
+        hezuoList: [],
+        zhishiList: [],
+        huiyuanList: [],
+        hezuoList: [],
+        qiyeList: [],
+        hangyeList: [],
+        renliList: [],
+        huiyuanQiList: [],
+        youqingList: [],
+        lunBoList: [],
+        imgObj: {}
     }
   },
+  methods: {
+      async getPositionRequest(){
+          let res = await getPositionRequest()
+          if(res.code == 200){
+              res.data.map((item) => {
+                  this.getChannelInformationsRequest(item.zhanshilanmu, item.weizhi)
+              })
+          }
+      },
+
+      async getChannelInformationsRequest(id, weizhi){
+          let res = await getChannelInformationsRequest({channelId: id});
+          if(res.code == 200){
+              if(weizhi){
+                  if(weizhi == "A"){
+                      // 重要信息
+                    this.importList = res.data.records.slice(0, 10)
+                  }else if(weizhi == "O"){
+                    let img = res.data.records.slice(0, 1)
+                    if(img){
+                        this.imgObj = img[0]
+                    }
+                  }else if(weizhi == "B"){
+                      // 新闻资讯
+                      this.newsList = res.data.records.slice(0, 10)
+                  }else if(weizhi == "C"){
+                      // 行业动态
+                      let damic = res.data.records.slice(0, 1)
+                      if(damic){
+                          this.hangDamic = damic[0]
+                      }
+                  }else if(weizhi == "D"){
+                      // 产业政策
+                      this.chanList = res.data.records.slice(0, 4)
+                      this.chanList.map((ite) => {
+                          ite.publishTime = this.$moment().format("MM-DD")
+                      })
+                  }else if(weizhi == "E"){
+                      // 合作交流
+                      this.hezuoList = res.data.records.slice(0, 4)
+                    this.hezuoList.map((ite) => {
+                          ite.publishTime = this.$moment().format("MM-DD")
+                      })
+                  }else if(weizhi == "F"){
+                      // 知识产权
+                      this.zhishiList = res.data.records.slice(0, 2)
+                  }else if(weizhi == "G"){
+                      // 会员产品
+                      this.huiyuanList = res.data.records.slice(0, 2)
+                  }else if(weizhi == "H"){
+
+                  }else if(weizhi == "I"){
+                      // 企业认定
+                      this.qiyeList = res.data.records.slice(0, 4)
+                      this.qiyeList.map((ite) => {
+                          ite.publishTime = this.$moment().format("MM-DD")
+                      })
+                  }else if(weizhi == "J"){
+                      // 行业管理
+                      this.hangyeList = res.data.records.slice(0, 1)
+                  }else if(weizhi == "K"){
+                      // 人力资源
+                      this.renliList = res.data.records.slice(0, 1)
+                  }else if(weizhi == "L"){
+                      // 会员企业
+                      this.huiyuanQiList = res.data.records
+                  }else if(weizhi == "M"){
+                      // 友情链接
+                      this.youqingList = res.data.records
+                  }else if(weizhi == "N"){
+                      // 轮播
+                      this.lunBoList = res.data.records
+                      console.log(JSON.stringify(this.hezuoList))
+                      console.log(id)
+                  }
+              }
+          }
+      },
+
+      async getData(){
+          getChannelsRequest({current:1,size:15}).then(res=>{
+            console.log(JSON.stringify(res))
+            getChannelInformationsRequest({channelId:res.data.records[0].id}).then(res=>{
+                console.log(JSON.stringify(res))
+                getDetailRequest('1498921672646979585').then(res=>{
+                console.log(JSON.stringify(res))
+                })
+            })
+            })
+      }
+
+  },
   mounted() {
-    getChannelsRequest({current:1,size:15}).then(res=>{
-      console.log(JSON.stringify(res))
-      getChannelInformationsRequest({channelId:res.data.records[0].id}).then(res=>{
-        console.log(JSON.stringify(res))
-        getDetailRequest('1498921672646979585').then(res=>{
-          console.log(JSON.stringify(res))
-        })
-      })
-    })
+    // this.getData()
+    this.getPositionRequest()
   }
 }
 </script>
 <style>
 .item{
   padding: 10px 0;
+  font-weight: bold;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.time{
+    color: #475D7B;
+    font-size: 16px;
 }
+
+.img_info{
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    background-color: rgba(0, 0, 0, 0.6);
+    height: 40px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 20px;
+}
+
+.img_text{
+    color: #FFFFFF;
+    font-size: 11px;
+}
+
 </style>

src/view/people.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>人力资源</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>人力资源</span>
+          </div>
+          <!-- <div class="menu-item active">SICA简介</div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: []
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '人力资源'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              console.log("this.dataList:"+JSON.stringify(this.dataList))
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>

src/view/policy.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>产业政策</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>产业政策</span>
+          </div>
+          <!-- <div class="menu-item active"><router-link to="/vip-service">会员服务</router-link></div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond,
+        getDetailRequest} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '新闻资讯'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+              this.dataList.map((item) => {
+                  item.publishTime = this.$moment().format("YYYY-MM-DD")
+              })
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>
+<style>
+
+</style>

src/view/trode.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-main class="main-container">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>行业动态</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>行业动态</span>
+          </div>
+          <!-- <div class="menu-item active"><router-link to="/vip-service">会员服务</router-link></div> -->
+          <div class="menu-item" v-for="(item, index) in titleList" :key="index"
+            :class="{'active' : (index == activeIndex)}" @click="changeType(index)">
+              {{item.channelName}}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <ul style="list-style: none">
+            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+          </ul>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, getChannelSecond,
+        getDetailRequest} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+        total: 0
+    }
+  },
+  methods: {
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '新闻资讯'){
+                      this.getChannelSecond(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelSecond(id){
+          let res = await getChannelSecond(id)
+          if(res.code == 200){
+            //   console.log(JSON.stringify(res.data))
+              this.titleList = res.data
+              if(this.titleList){
+                this.getChannelInformationsRequest(this.titleList[0].id)
+              }
+              
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({channelId: id})
+          if(res.code == 200){
+              this.dataList = res.data.records
+              this.total = res.data.total
+              this.dataList.map((item) => {
+                  item.publishTime = this.$moment().format("YYYY-MM-DD")
+              })
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.getChannelInformationsRequest(this.titleList[index].id)
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+  }
+}
+</script>
+<style>
+
+</style>

src/view/vip-service--.vue

@@ -0,0 +1,739 @@
+<template>
+  <el-main style="width: 960px;margin: 0 auto;min-height: 500px">
+    <el-row class="card_menu">
+      <el-col :span="4">
+        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
+          <div slot="header">
+            <span>会员服务</span>
+          </div>
+          <!-- <div class="menu-item active">会员服务</div> -->
+          <div class="menu-item" :class="{'active' : (0 == activeIndex)}" @click="changeType(0)" >会员名录</div>
+          <div class="menu-item" :class="{'active' : (1 == activeIndex)}" @click="changeType(1)">会员介绍</div>
+          <div class="menu-item" :class="{'active' : (2 == activeIndex)}" @click="changeType(2)">入会申请</div>
+          <div class="menu-item" :class="{'active' : (3 == activeIndex)}" @click="changeType(3)">问题反馈</div>
+        </el-card>
+      </el-col>
+
+
+    <el-col :span="20" v-if="activeIndex == 0">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <div style="text-align: center">
+            <h2>上海市集成电路行业协会第五届理事会理事名单</h2>
+            <div style="margin: 10px"><span style="margin-right: 20px">作者：SICA</span><span>发布日期：2011年12月28日 星期三</span></div>
+          </div>
+          <template>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%">
+              <el-table-column
+                type="index"
+                align="center"
+                width="50"
+                label="序号">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="理事单位名称"
+                align="center"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="姓名">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="单位职务">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="专业">
+              </el-table-column>
+            </el-table>
+          </template>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+
+
+      <el-col :span="20" v-if="activeIndex == 1">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <div style="text-align: center">
+            <h2>上海市集成电路行业协会第五届理事会理事名单</h2>
+            <div style="margin: 10px"><span style="margin-right: 20px">作者：SICA</span><span>发布日期：2011年12月28日 星期三</span></div>
+          </div>
+          <template>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 100%">
+              <el-table-column
+                type="index"
+                align="center"
+                width="50"
+                label="序号">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="理事单位名称"
+                align="center"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="姓名">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="单位职务">
+              </el-table-column>
+              <el-table-column
+                prop="address"
+                align="center"
+                label="专业">
+              </el-table-column>
+            </el-table>
+          </template>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+
+
+        <el-col :span="20" v-if="activeIndex == 2">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <h2 style="color: #333;text-align: center;margin: 15px auto">上海市集成电路行业协会入会申请表</h2>
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form" label-position="left">
+            <div class="table el-table el-table--fit el-table--border" style="width: 100%;border-radius: 4px">
+              <div class="el-table__body-wrapper">
+                <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                  </colgroup>
+                  <tbody>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="单位中文名称" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="单位英文名称" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="统一社会信用代码" prop="name" label-width="120px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="邮编" prop="name" label-width="50px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="企业注册地址" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="详细地址" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="所属园区" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="企业办公地址" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="详细地址" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="所属园区" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="所有制形式" prop="resource">
+                        <el-radio-group v-model="ruleForm.resource">
+                          <el-radio label="国有"></el-radio>
+                          <el-radio label="混合"></el-radio>
+                          <el-radio label="民营"></el-radio>
+                          <el-radio label="内资"></el-radio>
+                          <el-radio label="外资"></el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                    </td>
+
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="总投资" prop="name" label-width="60px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="注册资本" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="24" class="el-table__cell">
+                      <el-form-item label="单位网址" prop="name" >
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="5" class="el-table__cell">
+                      <el-form-item label="单位人数" prop="name" >
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="研发人员" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="本科及以上人数" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  
+                  <tr class="el-table__row">
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="单位法人代表" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="职务" prop="name" label-width="50px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="手机号" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      单位对口协会<br/>负责人
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="E-mail" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text">
+                      单位对口协会<br/>联系人
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="E-mail" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="24" class="el-table__cell">
+                        <el-table-column :show-overflow-tooltip="true" prop="content" label="产业链细分领域" width="400px" header-align="center">产业链细分领域
+      </el-table-column>
+                    </td>
+                  </tr>
+
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      <el-checkbox v-model="checked">设计<br/> （位置在晶圆制造上）</el-checkbox>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text">
+                        <el-form-item label="主要业务" prop="name" label-width="70px"></el-form-item>
+                        <el-form-item label="应用领域" prop="name" label-width="70px"></el-form-item>
+                    </td>
+                    
+                    <!-- <td colspan="6" class="el-table__cell">
+                      <el-form-item label="控股方持股金额" prop="name" label-width="120px" style="margin-bottom: 10px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="其它股东持股金额" prop="name" label-width="120px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="持股比例" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="持股比例" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td> -->
+                  </tr>
+
+                
+
+
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      现有股东及<br/>持股情况
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="控股方持股金额" prop="name" label-width="120px" style="margin-bottom: 10px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="其它股东持股金额" prop="name" label-width="120px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="持股比例" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="持股比例" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">晶圆制造</el-checkbox>
+                    </td>
+                    <td colspan="6" class="el-table__cell" style="margin: 0 !important;padding: 10px 0">
+                      <el-row style="padding: 0 10px;">
+                        <el-col span="20">
+                          <el-form-item label="制造技术" prop="name" style="margin-bottom: 0">
+                            <el-input v-model="ruleForm.name"></el-input>
+                          </el-form-item>
+                        </el-col>
+                        <el-col span="4" style="text-align: center;line-height: 30px">
+                          um工艺
+                        </el-col>
+                      </el-row>
+
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="年销售额" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">封装测试</el-checkbox>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label=" 封装形式及型号" prop="name" label-width="110px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="年销售额" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">设计</el-checkbox>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label=" 产品及性能" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="年销售额" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">设备材料</el-checkbox>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label=" 产品及性能" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="年销售额" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">智能卡</el-checkbox>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label=" 产品及性能" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="年销售额" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">其它</el-checkbox>
+                    </td>
+                    <td colspan="10" class="el-table__cell">
+                      <el-form-item label=" 产品及性能" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      公司简介
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="padding-left: 10px;padding-right: 10px">
+                      <el-input v-model="ruleForm.name"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell">
+                      <el-form-item label="会员等级" prop="desc">
+                        <el-radio-group v-model="ruleForm.resource">
+                          <el-radio label="一般会员">一般会员</el-radio>
+                          <el-radio label="理事长单位">理事长单位</el-radio>
+                          <el-radio label="副会长">副会长</el-radio>
+                          <el-radio label="会长">会长</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell">
+                      <el-form-item label="产业链" prop="desc">
+                        <el-radio-group v-model="ruleForm.resource">
+                          <el-radio label="设计" style="margin-right: 10px">设计</el-radio>
+                          <el-radio label="制造" style="margin-right: 10px">制造</el-radio>
+                          <el-radio label="封装测试" style="margin-right: 10px">封装测试</el-radio>
+                          <el-radio label="设备材料" style="margin-right: 10px">设备材料</el-radio>
+                          <el-radio label="投融资" style="margin-right: 10px">投融资</el-radio>
+                          <el-radio label="科研院所" style="margin-right: 10px">科研院所</el-radio>
+                          <el-radio label="其它">其它</el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="会员标准" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="入会时间" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell">
+                      <el-row>
+                        <el-col span="8" style="padding: 0 20px">
+                          <el-form-item label="填表单位（盖章）" label-width="120px" style="margin-bottom: 0">
+                        </el-form-item>
+                        </el-col>
+                        <el-col span="8" style="padding: 0 20px">
+                          <el-form-item label="填表人（签字）" label-width="100px" style="margin-bottom: 0">
+                            <el-input v-model="ruleForm.name"></el-input>
+                          </el-form-item>
+                        </el-col>
+                        <el-col span="8" style="padding: 0 20px">
+                          <el-form-item label="填表日期" label-width="70px" style="margin-bottom: 0">
+                            <el-input v-model="ruleForm.name"></el-input>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="padding-left: 20px">
+                      备注：选择参加专业请在      里打“✔️”
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell" style="padding-left: 20px">
+                      联系人：石建
+                    </td>
+                    <td colspan="3" class="el-table__cell" style="padding-left: 20px">
+                      电话：50809814
+                    </td>
+                    <td colspan="3" class="el-table__cell" style="padding-left: 20px">
+                      传真：60805259
+                    </td>
+                    <td colspan="4" class="el-table__cell" style="padding-left: 20px">
+                      E-mail：wrr@sica.org.cn
+                    </td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div style="margin: 20px auto;text-align: center">
+              <el-button plain class="text-linear">上传附件</el-button>
+              <el-button type="primary" style="letter-spacing: 3px">下载申请表</el-button>
+            </div>
+          </el-form>
+        </el-card>
+      </el-col>
+
+        <el-col :span="20" v-if="activeIndex == 3">
+          <el-card shadow="never" style="margin: 0 10px;">
+              <h2 style="color: #333;text-align: center;margin: 15px auto">问题反馈</h2>
+              <el-form>
+                  <el-form-item label="企业名称" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="问题反馈" label-width="4rem">
+                      <el-input type="textarea" :rows="4" auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="联系人" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="手机号码" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <div style="margin: 20px auto;text-align: center">
+                    <el-button type="primary" style="letter-spacing: 3px">提交</el-button>
+                    </div>
+              </el-form>
+          </el-card>
+          
+      </el-col>
+
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import {getChannelInformationsRequest, getChannelsRequest, 
+        getDetailRequest} from "../api/data";
+
+export default {
+  data () {
+    return {
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+      tableData:[],
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: 'Please input Activity name', trigger: 'blur'},
+          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'}
+        ],
+        region: [
+          {required: true, message: 'Please select Activity zone', trigger: 'change'}
+        ],
+        date1: [
+          {type: 'date', required: true, message: 'Please pick a date', trigger: 'change'}
+        ],
+        date2: [
+          {type: 'date', required: true, message: 'Please pick a time', trigger: 'change'}
+        ],
+        type: [
+          {type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change'}
+        ],
+        resource: [
+          {required: true, message: 'Please select activity resource', trigger: 'change'}
+        ],
+        desc: [
+          {required: true, message: 'Please input activity form', trigger: 'blur'}
+        ]
+      }
+
+    }
+  },
+
+  methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+            if (valid) {
+            alert('submit!');
+            } else {
+            console.log('error submit!!');
+            return false;
+            }
+        });
+        },
+        resetForm(formName) {
+        this.$refs[formName].resetFields();
+        },
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '会员企业'){
+                      this.getChannelInformationsRequest(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({current:1,size:15,channelId: id})
+          if(res.code == 200){
+              this.titleList = res.data.records
+            //   if(this.titleList){
+            //     this.getDetailRequest(this.titleList[0].id)
+            //   }
+              
+          }
+      },
+
+      async getDetailRequest(id){
+          let res = await getDetailRequest(id)
+          if(res.code == 200){
+              this.dataList = res.data.records
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          console.log("this.activeIndex:"+this.activeIndex)
+          this.$forceUpdate()
+      }
+  },
+  mounted() {
+    // this.getChannelsRequest()
+  }
+
+}
+</script>
+<style>
+.menu-item{
+  text-align: center;
+  padding: 10px;
+  width: 100%;
+}
+.card_menu .menu-item.active{
+  border-left: 2px solid #427FCE;
+  background: #eee;
+}
+
+.form .el-input__inner {
+  border-radius: 0 !important;
+}
+
+.table td.el-table__cell {
+  border-bottom: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+
+}
+
+.table td > .el-form-item {
+  margin-bottom: 0;
+  padding: 0 10px;
+}
+.table{
+  font-size: 12px !important;
+}
+.table .el-radio__label,.table .el-checkbox__label{
+  font-size: 12px !important;
+}
+
+.el-form-item__label {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 10px;
+}
+.td-text{
+  text-align: center !important;
+  margin: 0 auto !important;
+}
+.table td.el-table__cell{
+    text-align: center;
+}
+
+</style>

src/view/vip-service.vue

@@ -6,22 +6,81 @@
           <div slot="header">
             <span>会员服务</span>
           </div>
-          <div class="menu-item active">会员名录</div>
-          <div class="menu-item">会员介绍</div>
-          <div class="menu-item">入会申请</div>
-          <div class="menu-item">问题反馈</div>
+          <!-- <div class="menu-item active">会员服务</div> -->
+          <div class="menu-item" :class="{'active' : (0 == activeIndex)}" @click="changeType(0)" >会员名录</div>
+          <div class="menu-item" :class="{'active' : (1 == activeIndex)}" @click="changeType(1)">会员介绍</div>
+          <div class="menu-item" :class="{'active' : (2 == activeIndex)}" @click="changeType(2)">入会申请</div>
+          <div class="menu-item" :class="{'active' : (3 == activeIndex)}" @click="changeType(3)">问题反馈</div>
         </el-card>
       </el-col>
-      <el-col :span="20">
+
+
+    <el-col :span="20" v-if="activeIndex == 0">
         <el-card shadow="never" style="margin: 0 10px;">
           <div style="text-align: center">
             <h2>上海市集成电路行业协会第五届理事会理事名单</h2>
             <div style="margin: 10px"><span style="margin-right: 20px">作者：SICA</span><span>发布日期：2011年12月28日 星期三</span></div>
           </div>
+          <!-- <div>
+              <span class="sort_info">（按姓氏笔画排列）</span>
+              <div class="search_wrap">
+                  <el-input></el-input>
+
+              </div>
+          </div> -->
           <template>
             <el-table
               :data="tableData"
               border
+              style="width: 100%; height: 200px;">
+              <el-table-column
+                type="index"
+                align="center"
+                width="50"
+                label="序号">
+              </el-table-column>
+              <el-table-column
+                prop="unitName"
+                label="理事单位名称"
+                align="center"
+                width="180">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                align="center"
+                label="姓名">
+              </el-table-column>
+              <el-table-column
+                prop="dutyName"
+                align="center"
+                label="单位职务">
+              </el-table-column>
+              <el-table-column
+                prop="major"
+                align="center"
+                label="专业">
+              </el-table-column>
+            </el-table>
+          </template>
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
+          </el-pagination>
+        </el-card>
+      </el-col>
+
+
+      <el-col :span="20" v-if="activeIndex == 1">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <div style="text-align: center">
+            <h2>上海市集成电路行业协会第五届理事会理事名单</h2>
+            <div style="margin: 10px"><span style="margin-right: 20px">作者：SICA</span><span>发布日期：2011年12月28日 星期三</span></div>
+          </div>
+          <template>
+            <el-table
+              :data="list"
+              border
               style="width: 100%">
               <el-table-column
                 type="index"
@@ -59,21 +118,659 @@
           </el-pagination>
         </el-card>
       </el-col>
+
+
+        <el-col :span="20" v-if="activeIndex == 2">
+        <el-card shadow="never" style="margin: 0 10px;">
+          <h2 style="color: #333;text-align: center;margin: 15px auto">上海市集成电路行业协会入会申请表</h2>
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form" label-position="left">
+            <div class="table el-table el-table--fit el-table--border" style="width: 100%;border-radius: 4px">
+              <div class="el-table__body-wrapper">
+                <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                    <col width="8.3333333333%">
+                  </colgroup>
+                  <tbody>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="单位中文名称" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="单位英文名称" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="统一社会信用代码" prop="name" label-width="120px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="邮编" prop="name" label-width="50px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="企业注册地址" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="详细地址" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="所属园区" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="企业办公地址" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="详细地址" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="所属园区" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      <el-form-item label="所有制形式" prop="resource">
+                        <el-radio-group v-model="ruleForm.resource">
+                          <el-radio label="国有"></el-radio>
+                          <el-radio label="混合"></el-radio>
+                          <el-radio label="民营"></el-radio>
+                          <el-radio label="内资"></el-radio>
+                          <el-radio label="外资"></el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                    </td>
+
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="总投资" prop="name" label-width="60px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="注册资本" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="24" class="el-table__cell">
+                      <el-form-item label="单位网址" prop="name" >
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="5" class="el-table__cell">
+                      <el-form-item label="单位人数" prop="name" >
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="3" class="el-table__cell">
+                      <el-form-item label="研发人员" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="本科及以上人数" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+
+                  <tr class="el-table__row">
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="单位法人代表" prop="name">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="职务" prop="name" label-width="50px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="手机号" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      单位对口协会<br/>负责人
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="E-mail" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text">
+                      单位对口协会<br/>联系人
+                    </td>
+                    <td colspan="4" class="el-table__cell">
+                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                      <el-form-item label="E-mail" prop="name" label-width="70px">
+                        <el-input v-model="ruleForm.name"></el-input>
+                      </el-form-item>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell">
+                        <el-table-column :show-overflow-tooltip="true" prop="content" label="产业链细分领域" width="400px" header-align="center">产业链细分领域
+      </el-table-column>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="3" class="el-table__cell">
+                      <el-checkbox v-model="checked">设计</el-checkbox>
+                    </td>
+                    <td colspan="2" rowspan="2" class="el-table__cell">
+                      主要业务
+                    </td>
+                    <td colspan="8" rowspan="1" class="el-table__cell">
+                      <el-checkbox v-model="checked">分销商</el-checkbox>
+                      <el-checkbox v-model="checked">自主集成电路设计</el-checkbox>
+                      <el-checkbox v-model="checked">自主集成电路设计和分销</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="text-align: left;padding: 0 10px">
+                      <el-checkbox v-model="checked">IP核</el-checkbox>
+                      <el-checkbox v-model="checked">EDA工具</el-checkbox>
+                      <el-checkbox v-model="checked">设计服务</el-checkbox>
+                      <el-checkbox v-model="checked">CPU</el-checkbox>
+                      <el-checkbox v-model="checked">GPU</el-checkbox>
+                      <el-checkbox v-model="checked">MCU</el-checkbox>
+                      <el-checkbox v-model="checked">FPGA</el-checkbox>
+                      <el-checkbox v-model="checked">DSP</el-checkbox>
+                      <el-checkbox v-model="checked">WiFi</el-checkbox>
+                      <el-checkbox v-model="checked">蓝牙</el-checkbox>
+                      <el-checkbox v-model="checked">射频芯片</el-checkbox>
+                      <el-checkbox v-model="checked">电源管理芯片</el-checkbox>
+                      <el-checkbox v-model="checked">存储器</el-checkbox>
+                      <el-checkbox v-model="checked">传感器</el-checkbox>
+                      <el-checkbox v-model="checked">智能卡</el-checkbox>
+                      <el-checkbox v-model="checked">功率器件</el-checkbox>
+                      <el-checkbox v-model="checked">人工智能芯片</el-checkbox>
+                      <el-checkbox v-model="checked">基带芯片</el-checkbox>
+                      <el-checkbox v-model="checked">物联网芯片</el-checkbox>
+                      <el-checkbox v-model="checked">其他</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="1" class="el-table__cell">
+                      应用领域
+                    </td>
+                    <td colspan="8" rowspan="1" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">5G</el-checkbox>
+                      <el-checkbox v-model="checked">汽车电子</el-checkbox>
+                      <el-checkbox v-model="checked">工业控制</el-checkbox>
+                      <el-checkbox v-model="checked">人工智能</el-checkbox>
+                      <el-checkbox v-model="checked">通信</el-checkbox>
+                      <el-checkbox v-model="checked">消费电子</el-checkbox>
+                      <el-checkbox v-model="checked">物联网</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="4" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">晶圆制造</el-checkbox>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      加工晶圆尺寸
+                    </td>
+                    <td colspan="8" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">4英寸</el-checkbox>
+                      <el-checkbox v-model="checked">5英寸</el-checkbox>
+                      <el-checkbox v-model="checked">6英寸</el-checkbox>
+                      <el-checkbox v-model="checked">8英寸</el-checkbox>
+                      <el-checkbox v-model="checked">12英寸</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      工艺线宽
+                    </td>
+                    <td colspan="8" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">14nm及以下</el-checkbox>
+                      <el-checkbox v-model="checked">28nm</el-checkbox>
+                      <el-checkbox v-model="checked">55nm</el-checkbox>
+                      <el-checkbox v-model="checked">65nm</el-checkbox>
+                      <el-checkbox v-model="checked">110nm</el-checkbox>
+                      <el-checkbox v-model="checked">130nm</el-checkbox>
+                      <el-checkbox v-model="checked">180nm</el-checkbox>
+                      <el-checkbox v-model="checked">250nm</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      可加工衬底材料
+                    </td>
+                    <td colspan="8" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">硅基</el-checkbox>
+                      <el-checkbox v-model="checked">碳化硅</el-checkbox>
+                      <el-checkbox v-model="checked">氮化镓</el-checkbox>
+                      <el-checkbox v-model="checked">其他</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      规划月产能_____万片； 主要工艺平台_____;
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">封装测试</el-checkbox>
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">封装</el-checkbox>
+                      <el-checkbox v-model="checked">测试</el-checkbox>
+                      <el-checkbox v-model="checked">检测分析</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      封装形式______;   规划月产能______;
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="1" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">设备及零配件</el-checkbox>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text" >
+                      产品领域
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">光刻设备</el-checkbox>
+                      <el-checkbox v-model="checked">薄膜设备</el-checkbox>
+                      <el-checkbox v-model="checked">离子注入设备</el-checkbox>
+                      <el-checkbox v-model="checked">刻蚀设备</el-checkbox>
+                      <el-checkbox v-model="checked">清洗设备</el-checkbox>
+                      <el-checkbox v-model="checked">研磨抛光</el-checkbox>
+                      <el-checkbox v-model="checked">封装设备</el-checkbox>
+                      <el-checkbox v-model="checked">测试设备</el-checkbox>
+                      <el-checkbox v-model="checked">设备翻新</el-checkbox>
+                      <el-checkbox v-model="checked">零配件_____</el-checkbox>
+                      <el-checkbox v-model="checked">其他____________</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="1" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">材料</el-checkbox>
+                    </td>
+                    <td colspan="2" class="el-table__cell td-text" >
+                      产品领域
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-checkbox v-model="checked">硅片</el-checkbox>
+                      <el-checkbox v-model="checked">光刻胶、辅助材料及其配套材料</el-checkbox>
+                      <el-checkbox v-model="checked">靶材</el-checkbox>
+                      <el-checkbox v-model="checked">掩模版</el-checkbox>
+                      <el-checkbox v-model="checked">前驱体</el-checkbox>
+                      <el-checkbox v-model="checked">气体</el-checkbox>
+                      <el-checkbox v-model="checked">抛光材料</el-checkbox>
+                      <el-checkbox v-model="checked">湿化学品</el-checkbox>
+                      <el-checkbox v-model="checked">封装材料</el-checkbox>
+                      <el-checkbox v-model="checked">其他____</el-checkbox>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" rowspan="1" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
+                      <el-checkbox v-model="checked">其它</el-checkbox>
+                    </td>
+                    <td colspan="10" class="el-table__cell">
+                      <el-input v-model="ruleForm.name"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      年销售额（上年度）
+                    </td>
+                    <td colspan="10" class="el-table__cell">
+                      <el-input v-model="ruleForm.name"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      公司简介<br>
+                      （300字内）
+                    </td>
+                    <td colspan="10" class="el-table__cell">
+                      <el-input type="textarea" :rows="4" auto-complete="off"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell td-text">
+                      产品或业务介绍
+                      <br>
+                      （300字内）
+                    </td>
+                    <td colspan="10" class="el-table__cell">
+                      <el-input type="textarea" :rows="4" auto-complete="off"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="4" class="el-table__cell td-text">
+                      填表单位（盖章）
+                    </td>
+                    <td colspan="4" class="el-table__cell td-text">
+                      下载加盖公章
+                    </td>
+                    <td colspan="4" class="el-table__cell td-text">
+                      填表人（签字）
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      附件1：入会申请表（敲章版）
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      附件2：公司营业执照（正或副本）复印件
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      注意：<br>
+                      1、✳️为必填选项<br>
+                      2、填写完成之后，请下载本表加盖贵司公章，连同附件加盖公章，一并上传提交<br>
+
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="12" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      联系人：石建宾	    电话：50809814	   传真：50805259	  E-Mail: shijianbin@sica.org.cn
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell">
+                      会员等级<br>
+                      （协会工作人员填）
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-radio-group v-model="ruleForm.resource">
+                        <el-radio label="一般会员">一般会员</el-radio>
+                        <el-radio label="理事长单位">理事长单位</el-radio>
+                        <el-radio label="副会长">副会长</el-radio>
+                        <el-radio label="会长">会长</el-radio>
+                      </el-radio-group>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell">
+                      专业委员会<br>
+                      （协会工作人员填）
+                    </td>
+                    <td colspan="10" class="el-table__cell" style="text-align: left;padding: 5px 10px">
+                      <el-radio-group v-model="ruleForm.resource">
+                        <el-radio label="一般会员">设计专业委员会</el-radio>
+                        <el-radio label="理事长单位">制造专业委员会</el-radio>
+                        <el-radio label="副会长">封测专业委员会</el-radio>
+                        <el-radio label="会长">设备材料专业委员会</el-radio>
+                        <el-radio label="会长">智能传感器专业委员会</el-radio>
+                        <el-radio label="会长">RISC-V专业委员会</el-radio>
+                        <el-radio label="会长">人工智能专业委员会</el-radio>
+                        <el-radio label="会长">大学/科研院所</el-radio>
+                        <el-radio label="会长">供应链服务</el-radio>
+                        <el-radio label="会长">金融服务机构</el-radio>
+                        <el-radio label="会长">咨询公司/律所/税务所</el-radio>
+                        <el-radio label="会长">其他</el-radio>
+                      </el-radio-group>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="2" class="el-table__cell">
+                      会员号<br>
+                      （协会工作人员填）
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-input v-model="ruleForm.name"></el-input>
+                    </td>
+                    <td colspan="2" class="el-table__cell">
+                      批准入会时间<br>
+                      （协会工作人员填）
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      <el-input v-model="ruleForm.name"></el-input>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td colspan="6" class="el-table__cell">
+                      会员类型
+                    </td>
+                    <td colspan="6" class="el-table__cell">
+                      （系统自动识别）
+                    </td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div style="margin: 20px auto;text-align: center">
+              <el-button plain class="text-linear">上传附件</el-button>
+              <el-button type="primary" style="letter-spacing: 3px">下载申请表</el-button>
+            </div>
+          </el-form>
+        </el-card>
+      </el-col>
+
+        <el-col :span="20" v-if="activeIndex == 3">
+          <el-card shadow="never" style="margin: 0 10px;">
+              <h2 style="color: #333;text-align: center;margin: 15px auto">问题反馈</h2>
+              <el-form>
+                  <el-form-item label="企业名称" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="问题反馈" label-width="4rem">
+                      <el-input type="textarea" :rows="4" auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="联系人" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="手机号码" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" label-width="4rem">
+                      <el-input auto-complete="off"></el-input>
+                  </el-form-item>
+                  <div style="margin: 20px auto;text-align: center">
+                    <el-button type="primary" style="letter-spacing: 3px">提交</el-button>
+                    </div>
+              </el-form>
+          </el-card>
+
+      </el-col>
+
     </el-row>
   </el-main>
 </template>
 
 <script>
+import {getChannelInformationsRequest, getChannelsRequest,
+        getDetailRequest,getLiInfo,downloadAction} from "../api/data";
+
 export default {
   data () {
     return {
-      tableData:[
-        {
-
-        }
-      ]
+        titleList: [],
+        activeIndex: 0,
+        dataList: [],
+      tableData:[],
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: 'Please input Activity name', trigger: 'blur'},
+          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'}
+        ],
+        region: [
+          {required: true, message: 'Please select Activity zone', trigger: 'change'}
+        ],
+        date1: [
+          {type: 'date', required: true, message: 'Please pick a date', trigger: 'change'}
+        ],
+        date2: [
+          {type: 'date', required: true, message: 'Please pick a time', trigger: 'change'}
+        ],
+        type: [
+          {type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change'}
+        ],
+        resource: [
+          {required: true, message: 'Please select activity resource', trigger: 'change'}
+        ],
+        desc: [
+          {required: true, message: 'Please input activity form', trigger: 'blur'}
+        ]
+      },
+      pageNo: 1,
+      fileName: '',
+        list: [],
+        total: 0
     }
+  },
+
+  methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+            if (valid) {
+            alert('submit!');
+            } else {
+            console.log('error submit!!');
+            return false;
+            }
+        });
+        },
+        resetForm(formName) {
+        this.$refs[formName].resetFields();
+        },
+      async getLiInfo(){
+          let res = await getLiInfo({pageNo:this.pageNo,pageSize:20})
+          if(res.code == 200){
+              if(this.pageNo == 1){
+                  this.tableData = res.data
+              }else{
+                  this.tableData = this.tableData.concat(res.data)
+              }
+              this.total = Number(this.tableData[0].total)
+              console.log("this.tableData"+JSON.stringify(this.tableData))
+          }
+      },
+      async downloadAction(){
+          let res = await downloadAction(this.fileName)
+          if(res.code == 200){
+              console.log(JSON.stringify(res))
+          }
+      },
+
+      async getChannelsRequest(){
+          let res = await getChannelsRequest({current:1,size:100})
+          if(res.code == 200){
+              res.data.records.map((item) => {
+                  if(item.channelName == '会员企业'){
+                    //   this.getChannelInformationsRequest(item.id)
+                  }else if(item.channelName == '文件下载'){
+                      this.getChannelInformationsRequest(item.id)
+                  }
+              })
+          }
+      },
+
+      async getChannelInformationsRequest(id){
+          let res = await getChannelInformationsRequest({current:1,size:15,channelId: id})
+          if(res.code == 200){
+              this.titleList = res.data.records
+              if(this.titleList){
+                this.fileName = this.titleList[0].title
+              }
+            this.downloadAction()
+          }
+      },
+
+      async getDetailRequest(id){
+          let res = await getDetailRequest(id)
+          if(res.code == 200){
+              this.dataList = res.data.records
+          }
+      },
+
+      changeType(index){
+          this.activeIndex = index;
+          this.$forceUpdate()
+      }
+  },
+  mounted() {
+    this.getChannelsRequest()
+    this.getLiInfo()
   }
+
 }
 </script>
 <style>
@@ -87,4 +784,38 @@ export default {
   background: #eee;
 }
 
+.form .el-input__inner {
+  border-radius: 0 !important;
+}
+
+.table td.el-table__cell {
+  border-bottom: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+
+}
+
+.table td > .el-form-item {
+  margin-bottom: 0;
+  padding: 0 10px;
+}
+.table{
+  font-size: 12px !important;
+}
+.table .el-radio__label,.table .el-checkbox__label{
+  font-size: 12px !important;
+}
+
+.el-form-item__label {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 10px;
+}
+.td-text{
+  text-align: center !important;
+  margin: 0 auto !important;
+}
+.table td.el-table__cell{
+    text-align: center;
+}
+
 </style>

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
   // sub-path here. For example, if your app is deployed at
   // https://www.foobar.com/my-app/
   // then change this to '/my-app/'
-  baseUrl: BASE_URL,
+//   baseUrl: BASE_URL,
   // tweak internal webpack configuration.
   // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   chainWebpack: config => {
@@ -31,9 +31,28 @@ module.exports = {
       .set('_conf', resolve('config'))
   },
   // 打包时不生成.map文件
-  productionSourceMap: false
+  productionSourceMap: false,
   // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
-  // devServer: {
-  //   proxy: 'localhost:3000'
-  // }
+  devServer: {
+    overlay: { // 让浏览器 overlay 同时显示警告和错误
+        warnings: true,
+        errors: true
+      },
+      host: "localhost",
+      port: 8080, // 端口号
+      https: false, // https:{type:Boolean}
+      open: false, //配置自动启动浏览器
+      hotOnly: true,
+    proxy: {
+        '/api': {
+            target: 'http://47.100.188.195:7006',
+            ws: true,
+            changeOrigin: true,
+            secure: false,
+            pathRewrite: {
+                "^/api": "/"
+            }
+        }
+    }
+  }
 }