更新

package-lock.json

@@ -10470,6 +10470,11 @@
       "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
       "dev": true
     },
+    "stomp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npm.taobao.org/stomp/download/stomp-0.1.1.tgz",
+      "integrity": "sha1-lbYs7ouOonRhkgPoTS/ZDpqcQ/s="
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/stream-browserify/download/stream-browserify-2.0.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "loadsh": "0.0.4",
     "moment": "^2.24.0",
     "naf-core": "^0.1.2",
+    "stomp": "^0.1.1",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.3",
     "vue-router": "^3.1.6",

src/components/parts/chat.vue

@@ -182,13 +182,14 @@ export default {
   line-height: 40px;
   float: left;
   width: 100%;
+  padding: 55px 0 0 0;
 }
 
 .chat .chatList .input input {
   border: 1px solid #ccc;
   float: left;
-  height: 34px;
-  width: 68%;
+  height: 54px;
+  width: 75%;
   margin-right: 3%;
 }
 

src/layout/live/head.vue

@@ -42,7 +42,7 @@
                 <a @click="turnTo('market')" target="">科技超市</a>
               </li>
               <li :class="isTab('service') ? 'active' : ''">
-                <a @click="turnTo('service')" target="">创新服务</a>
+                <a @click="fuwu()" target="">创新服务</a>
               </li>
               <li :class="isTab('dynamic') ? 'active' : ''">
                 <a @click="turnTo('dynamic')" target="">动态监测</a>
@@ -75,6 +75,10 @@ export default {
     zhibo() {
       this.$router.push({ path: '/direct' });
     },
+
+    fuwu() {
+      this.$router.push({ path: '/live/service' });
+    },
     turnTo(type) {
       if (type == 'index') {
         console.log('首页未出');

src/main.js

@@ -11,6 +11,7 @@ import '@/plugins/loading';
 import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
+
 Vue.config.productionTip = false;
 
 new Vue({

src/router/index.js

@@ -50,6 +50,12 @@ const live = [
         meta: { title: '科技培训列表', subSite: true },
         component: () => import('../views/kejipeixun/list.vue'),
       },
+      {
+        path: '/live/service',
+        meta: { title: '创新服务', subSite: true },
+        name: 'live_service',
+        component: () => import('../views/service/index.vue'),
+      },
     ],
   },
   {

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import chat from './chat';
+import chat from '@common/store/live/chat';
 Vue.use(Vuex);
 
 export default new Vuex.Store({

src/views/direct.vue

@@ -76,105 +76,89 @@
           <el-col :span="24" class="context">
             <el-tabs type="border-card">
               <el-tab-pane label="找技术">
-                <ul>
-                  <li v-for="(acc, index) in jishulist" :key="index">
-                    <el-col :span="14" class="lileft">
-                      <p>
-                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
-                      </p>
+                <el-col :span="24" class="newsheight">
+                  <ul>
+                    <li v-for="(acc, index) in jishulist" :key="index">
+                      <el-col :span="14" class="lileft">
+                        <p>
+                          <span class="title" @click="dialogVisible = true"> {{ acc.title }}</span>
 
-                      <p class="newp">
-                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
-                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
-                      </p>
-                      <p>
-                        <span class="pspan">类型:{{ acc.type }}</span
-                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
-                        ><span class="pspan">交易方式:{{ acc.status }}</span
-                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
-                      </p>
-                    </el-col>
-                    <el-col :span="10" class="liright">
-                      <p>简介:{{ acc.context }}</p>
-                    </el-col>
-                  </li>
-                </ul>
+                          <span><el-button class="duijie">对接</el-button></span>
+                        </p>
+
+                        <p class="newp">
+                          <span class="name"><i class="el-icon-user-solid"></i>{{ acc.name }}</span
+                          ><span> <i class="el-icon-phone"></i>{{ acc.tel }}</span>
+                        </p>
+                        <p>
+                          <span class="pspan">类型:{{ acc.type }}</span
+                          ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
+                          ><span class="pspan">交易方式:{{ acc.status }}</span
+                          ><span class="pspan">交易价格:{{ acc.chanpin }}</span>
+                        </p>
+                      </el-col>
+                      <el-col :span="10" class="liright">
+                        <p>简介:{{ acc.context }}</p>
+                      </el-col>
+                    </li>
+                  </ul>
+                </el-col>
               </el-tab-pane>
               <el-tab-pane label="找产品">
-                <ul>
-                  <li v-for="(acc, index) in jishulist" :key="index">
-                    <el-col :span="14" class="lileft">
+                <el-col :span="24" class="newsheight">
+                  <ul class="demand">
+                    <li class="demandList" v-for="(item, index) in demandList" :key="index">
                       <p>
-                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
-                      </p>
-
-                      <p class="newp">
-                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
-                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                        <span class="textOver" style="display:inline-block;width:85%;" @click="dialogVisible = true">{{ item.name }}</span>
+                        <el-button type="primary" size="mini" @click="technologyBtn(item.id)" style="position: relative;top: -5px;">对接</el-button>
                       </p>
                       <p>
-                        <span class="pspan">类型:{{ acc.type }}</span
-                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
-                        ><span class="pspan">交易方式:{{ acc.status }}</span
-                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
+                        <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
+                        <span>发布时间：</span>
                       </p>
-                    </el-col>
-                    <el-col :span="10" class="liright">
-                      <p>简介:{{ acc.context }}</p>
-                    </el-col>
-                  </li>
-                </ul></el-tab-pane
-              >
-              <el-tab-pane label="找服务">
-                <ul>
-                  <li v-for="(acc, index) in jishulist" :key="index">
-                    <el-col :span="14" class="lileft">
                       <p>
-                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
-                      </p>
-
-                      <p class="newp">
-                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
-                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                        <span>需求类型：{{ item.product_type_name }}</span>
+                        <span>{{ item.address }}</span>
                       </p>
-                      <p>
-                        <span class="pspan">类型:{{ acc.type }}</span
-                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
-                        ><span class="pspan">交易方式:{{ acc.status }}</span
-                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
-                      </p>
-                    </el-col>
-                    <el-col :span="10" class="liright">
-                      <p>简介:{{ acc.context }}</p>
-                    </el-col>
-                  </li>
-                </ul></el-tab-pane
-              >
+                    </li>
+                  </ul>
+                </el-col>
+              </el-tab-pane>
+              <el-tab-pane label="找服务">
+                <el-col :span="24" class="newsheight">
+                  <ul class="service">
+                    <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
+                      <p class="company" @click="dialogVisible = true">{{ item.companyName }}</p>
+                      <div class="serviceDown">
+                        <el-image :src="item.url"></el-image>
+                        <p>
+                          <button>立即咨询</button>
+                          <span class="type1">服务类型：</span>
+                          <span class="type2">{{ item.product_type_name }}</span>
+                        </p>
+                      </div>
+                      <button class="btn">进入主页</button>
+                    </li>
+                  </ul>
+                </el-col>
+              </el-tab-pane>
               <el-tab-pane label="找专家">
-                <ul>
-                  <li v-for="(acc, index) in jishulist" :key="index">
-                    <el-col :span="14" class="lileft">
-                      <p>
-                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
-                      </p>
-
-                      <p class="newp">
-                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
-                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
-                      </p>
-                      <p>
-                        <span class="pspan">类型:{{ acc.type }}</span
-                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
-                        ><span class="pspan">交易方式:{{ acc.status }}</span
-                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
-                      </p>
-                    </el-col>
-                    <el-col :span="10" class="liright">
-                      <p>简介:{{ acc.context }}</p>
-                    </el-col>
-                  </li>
-                </ul></el-tab-pane
-              >
+                <el-col :span="24" class="newsheight">
+                  <ul class="expert">
+                    <li class="expertList" v-for="(item, index) in expertList" :key="index">
+                      <el-image :src="item.imgpath"></el-image>
+                      <div>
+                        <p>
+                          <span @click="dialogVisible = true">{{ item.name }}</span>
+                          <span>{{ item.nation }}</span>
+                        </p>
+                        <p>职务：{{ item.position }}</p>
+                        <p>从事领域：{{ item.field }}</p>
+                      </div>
+                    </li>
+                  </ul>
+                </el-col>
+              </el-tab-pane>
             </el-tabs>
           </el-col>
 
@@ -231,11 +215,38 @@
         </el-col>
       </div>
     </el-col>
+
+    <div class="pz_down">
+      <live-foot></live-foot>
+    </div>
+    <div class="suspenInfo">
+      <el-link :underline="false" @click="clickBtn()" target="_blank">直播中心</el-link>
+    </div>
+
+    <el-dialog title="技术详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <el-col :span="24" class="detail"
+        ><p>名称:</p>
+        <p>联系人:</p>
+        <p>电话:</p>
+        <p>类型：</p>
+        <p>研发阶段:</p>
+        <p>交易方式:</p>
+        <p>头像:<el-image :src="superOnes"> </el-image></p>
+        <p>职务:</p>
+        <p>从事领域:</p>
+        <p>民族:</p>
+      </el-col>
+      <span slot="footer" class="dialog-footer" style="text-align:center">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">对接</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+import liveFoot from '@/layout/live/foot.vue';
 import chat from '@/components/parts/chat.vue';
 
 import _ from 'loadsh';
@@ -244,8 +255,14 @@ export default {
   props: {},
   components: {
     chat,
+    liveFoot,
   },
   data: () => ({
+    dialogVisible: false,
+    dialogVisibles: false,
+    dialogVisibless: false,
+    dialogVisiblesss: false,
+
     directlist: [
       {
         time: '2019-03-05',
@@ -261,8 +278,8 @@ export default {
     jishulist: [
       {
         title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
+        name: '联系人',
+        tel: '134567788888',
         type: '类型1',
         chanpin: '产品1',
         status: '方式10',
@@ -271,59 +288,28 @@ export default {
       },
       {
         title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
+        name: '联系人',
+        tel: '134567788888',
         type: '类型1',
-        chanpin: '产品1',
+        chanpin: '123元',
         status: '方式10',
         jueduan: '阶段1',
         context: '1测试产品1测试产1试产品1',
       },
       {
         title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
+        name: '联系人',
+        tel: '134567788888',
         type: '类型1',
         chanpin: '产品1',
         status: '方式10',
         jueduan: '阶段1',
         context: '1测试产品1测试产1试产品1',
       },
-
       {
         title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
-        type: '类型1',
-        chanpin: '产品1',
-        status: '方式10',
-        jueduan: '阶段1',
-        context: '1测试产品1测试产1试产品1',
-      },
-      {
-        title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
-        type: '类型1',
-        chanpin: '产品1',
-        status: '方式10',
-        jueduan: '阶段1',
-        context: '1测试产品1测试产1试产品1',
-      },
-      {
-        title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
-        type: '类型1',
-        chanpin: '产品1',
-        status: '方式10',
-        jueduan: '阶段1',
-        context: '1测试产品1测试产1试产品1',
-      },
-      {
-        title: '测试产品1',
-        name: '测网速',
-        tel: '2019-03-5',
+        name: '联系人',
+        tel: '134567788888',
         type: '类型1',
         chanpin: '产品1',
         status: '方式10',
@@ -359,6 +345,35 @@ export default {
         context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
       },
     ],
+    technologyList: [],
+    // 找产品
+    demandList: [
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+      { name: '测试', product_type_name: '类型1' },
+    ],
+    // 找服务
+    serviceList: [
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+      { companyName: '名称', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
+    ],
+    // 找专家
+    expertList: [
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+      { imgpath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', name: '专家', nation: '真nation' },
+    ],
 
     luyanList: [
       { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
@@ -370,9 +385,19 @@ export default {
     ],
     superOne: require('@/assets/live/main1.png'),
     two: require('@/assets/live/top_bg.png'),
+
+    superOnes: require('@/assets/live/测试图片.jpg'),
   }),
   created() {},
-  methods: {},
+  methods: {
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+  },
   computed: {
     pageTitle() {
       return `${this.$route.meta.title}`;
@@ -583,13 +608,14 @@ p {
 }
 
 /deep/.el-tabs--border-card > .el-tabs__content {
-  padding: 15px 15px 15px 0;
+  padding: 0px 15px 0 0;
 }
 .context ul li p .title {
   display: inline-block;
   width: 85%;
   font-size: 18px;
 }
+
 .context ul li p .title:hover {
   color: #ff8500;
   font-weight: bold;
@@ -599,8 +625,8 @@ p {
 }
 .liright {
   border: 1px solid #c20808;
-  height: 100px;
-  margin: 15px 0;
+  height: 119px;
+  margin: 15px 0 15px 0;
   width: 40%;
 }
 .liright p {
@@ -627,8 +653,10 @@ p {
 }
 
 .newp {
-  margin: 10px 0 10px 0 !important;
   font-size: 16px;
+  height: 50px;
+  margin: 0 0 10px 0 !important;
+  line-height: 50px;
 }
 
 .newp i {
@@ -884,4 +912,220 @@ p {
   margin: 0;
   padding: 0;
 }
+
+// 找产品
+// .demand {
+// }
+.demand .demandList {
+  float: left;
+  width: 50%;
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 20px 0;
+  text-indent: 10px;
+  font-size: 12px;
+  padding: 10px 0 0 0;
+}
+.demandList:hover p:first-child {
+  color: #005293;
+  font-weight: bold;
+  font-size: 16px !important;
+}
+.demand .demandList p:first-child {
+  float: left;
+  width: 100%;
+  font-weight: bold;
+  font-size: 16px !important;
+}
+.demand .demandList p:nth-child(2) {
+  float: left;
+  padding: 10px 0;
+  width: 100%;
+}
+.demand .demandList p:nth-child(2) span:first-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+.demand .demandList p:nth-child(2) span:last-child {
+  display: inline-block;
+  width: 45%;
+  text-align: left;
+}
+.demand .demandList p:last-child {
+  float: left;
+  font-size: 16px;
+  padding: 10px 0;
+  width: 100%;
+}
+.demand .demandList p:last-child span:first-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+.demand .demandList p:last-child span:last-child {
+  display: inline-block;
+  width: 50%;
+  text-align: left;
+}
+// 找服务
+.service {
+  float: left;
+  height: 518px;
+  width: 100%;
+  overflow: hidden;
+}
+.service .serviceList {
+  float: left;
+  width: 30%;
+  border: 1px solid #ccc;
+  margin: 22px 24px;
+  height: 209px;
+}
+.service .serviceList:hover {
+  box-shadow: 0 0 10px #ccc;
+}
+.service .serviceList .company {
+  font-size: 18px;
+  padding: 10px;
+}
+.service .serviceList .serviceDown {
+  float: left;
+  width: 100%;
+}
+.service .serviceList .serviceDown .el-image {
+  float: left;
+  width: 20%;
+  height: 100px;
+  margin: 10px;
+}
+.service .serviceList .serviceDown p {
+  float: left;
+  width: 65%;
+}
+.service .serviceList .serviceDown p button {
+  float: left;
+  width: 50%;
+  border: 1px solid #ddd;
+  height: 35px;
+  color: #39c;
+  margin: 0 0 0 15px;
+  background-color: #fff;
+}
+.service .serviceList .serviceDown p .type1 {
+  float: left;
+  width: 100%;
+  padding: 15px 0 15px 20px;
+}
+.service .serviceList .serviceDown p .type2 {
+  padding: 0 0 0 20px;
+  color: darkorange;
+  font-weight: bold;
+  font-size: 16px;
+  float: left;
+  width: 100%;
+}
+.service .serviceList .btn {
+  font-size: 16px;
+  float: left;
+  width: 100%;
+  padding: 9px 0;
+  text-align: center;
+  color: #fff;
+  background: orangered;
+}
+// 找专家
+// .expert {
+// }
+.expert .expertList {
+  height: 100px;
+  float: left;
+  width: 49%;
+  border: 1px solid #ccc;
+  margin: 10px 14px 10px 13px;
+  padding: 5px 0 5px 0;
+  overflow: hidden;
+}
+.expert .expertList:hover {
+  box-shadow: 0 0 5px green;
+}
+.expert .expertList:nth-child(2n) {
+  margin: 10px 0 10px 0;
+}
+.expert .expertList .el-image {
+  float: left;
+  width: 100px;
+  height: 100px;
+  border-radius: 90px;
+}
+.expert .expertList div {
+  float: left;
+  width: 82%;
+}
+.expert .expertList div p:first-child {
+  float: left;
+  width: 100%;
+  padding: 5px 0 10px 0;
+}
+.expert .expertList div p:first-child span:first-child {
+  float: left;
+  width: 50%;
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+}
+.expert .expertList div p:first-child span:last-child {
+  float: left;
+  width: 50%;
+  font-size: 16px;
+}
+.expert .expertList div p:nth-child(2) {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  color: #666;
+  padding: 0 0 5px 0;
+}
+.expert .expertList div p:last-child {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  color: #666;
+  padding: 5px 0 0 0;
+}
+
+.suspenInfo {
+  position: fixed;
+  background: #0279d5;
+  width: 100px;
+  height: 100px;
+  z-index: 999;
+  left: 13%;
+  top: 60%;
+  border-radius: 20px;
+  box-shadow: 2px 2px 2px #055c9f;
+  text-align: center;
+  line-height: 100px;
+}
+/deep/.suspenInfo .el-link {
+  font-size: 20px;
+  color: #fff;
+  font-weight: bold;
+}
+.suspenInfo:hover {
+  background: #f60;
+}
+
+.detail {
+  height: 400px;
+  line-height: 45px;
+}
+/deep/.el-dialog__body {
+  padding: 0 20px;
+  color: #606266;
+  font-size: 14px;
+  word-break: break-all;
+}
+.newsheight {
+  height: 604px;
+}
 </style>

src/views/service/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div id="index">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="servicemain">
+          <div class="serviceOne">
+            <el-col :span="24">
+              <el-col class="infoleft" :span="12">
+                <el-col class="lefttop"><span class="title"> |</span> 政务公开</el-col>
+                <ul>
+                  <li v-for="(item, index) in zhengwuList" :key="index">
+                    <a href="">
+                      <el-image :src="item.pic" class="leftimage"></el-image>
+                    </a>
+                  </li>
+                </ul>
+              </el-col>
+              <el-col class="inforight" :span="12">
+                <el-col class="lefttop"><span class="title"> |</span> 常用服务</el-col>
+                <ul>
+                  <li v-for="(item, index) in serviceList" :key="index">
+                    <a href="">
+                      <el-image :src="item.pic" class="rightimage"></el-image>
+                    </a>
+                  </li>
+                </ul>
+              </el-col>
+            </el-col>
+            <div class="infocontext">
+              <div class="contexttop"><span class="title"> |</span> 公众参与</div>
+              <ul>
+                <li v-for="(item, index) in gongzhongList" :key="index">
+                  <a href="">
+                    <el-image :src="item.pic"></el-image>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => {
+    return {
+      // 政务公开
+      zhengwuList: [
+        {
+          pic: require('@/assets/live/zhengwu1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu6.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu7.jpg'),
+        },
+        {
+          pic: require('@/assets/live/zhengwu8.jpg'),
+        },
+      ],
+      // 常用服务
+      serviceList: [
+        {
+          pic: require('@/assets/live/changyong1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/changyong6.jpg'),
+        },
+      ],
+      // 公众参与
+      gongzhongList: [
+        {
+          pic: require('@/assets/live/gongzhong1.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong2.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong3.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong4.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong5.jpg'),
+        },
+        {
+          pic: require('@/assets/live/gongzhong6.jpg'),
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  margin: 0 auto;
+  width: 80%;
+  min-height: 600px;
+}
+.infoleft {
+  width: 48%;
+  height: 320px;
+  box-shadow: 0 0 10px #2d64b3;
+  // width: 777px;
+}
+.inforight {
+  margin: 0 0 0 2%;
+  height: 320px;
+  box-shadow: 0 0 10px #2d64b3;
+  // width: 825px;
+}
+.lefttop {
+  width: 96%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px 10px 20px 10px;
+  font-size: 18px;
+}
+.title {
+  padding: 0px 0 1px 1px;
+  background: #005293;
+}
+.infoleft ul li {
+  float: left;
+  width: 21%;
+  height: 115px;
+  margin: 0 13px 10px 16px;
+}
+
+.leftimage {
+  width: 100%;
+  height: 100%;
+}
+
+.inforight ul li {
+  float: left;
+  width: 235px;
+
+  height: 115px;
+  margin: 0 13px 15px 14px;
+}
+
+.rightimage {
+  width: 235px;
+  height: 100px;
+}
+.infocontext {
+  height: 237px;
+  box-shadow: 0 0 10px #2d64b3;
+  width: 100%;
+  float: left;
+
+  margin: 25px 0 0 0;
+}
+.contexttop {
+  width: 98%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px 10px 20px 10px;
+  font-size: 18px;
+}
+
+.infocontext ul li {
+  float: left;
+  width: 249px;
+  height: 146px;
+  margin: 0px 0px 0 17px;
+}
+.newimg {
+  width: 249px;
+  height: 152px;
+}
+</style>

vue.config.js

@@ -1,6 +1,8 @@
 const path = require('path');
+const common = path.resolve(__dirname, '../common');
 module.exports = {
   publicPath: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_ROUTER,
+  // outputDir: process.env.VUE_APP_ROUTER,
   configureWebpack: config => {
     Object.assign(config, {
       // 开发生产共同配置
@@ -9,6 +11,7 @@ module.exports = {
           '@': path.resolve(__dirname, './src'),
           '@c': path.resolve(__dirname, './src/components'),
           '@a': path.resolve(__dirname, './src/assets'),
+          '@common': common,
         },
       },
     });
@@ -17,15 +20,67 @@ module.exports = {
     port: '8001',
     //api地址前缀
     proxy: {
-      '/api': {
+      '/weixin': {
         target: 'http://smart.cc-lotus.info',
+        changeOrigin: true,
+        ws: true,
+      },
+      '/files': {
+        target: 'http://free.liaoningdoupo.com',
+      },
+      '/api': {
+        target: 'http://free.liaoningdoupo.com',
+        changeOrigin: true,
+        ws: true,
+      },
+      // '/api/setting': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   // target: 'http://free.liaoningdoupo.com', //http://free.liaoningdoupo.com
+      //   changeOrigin: true,
+      //   ws: true,
+      // },
+      // '/api/affairs': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      // },
+      // '/api/policy': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      // },
+      // '/api/record': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      // },
+      // '/api/serve': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      //   // pathRewrite: { '^/api/affairs': '/api' },
+      // },
+      // '/api/talent': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      //   // pathRewrite: { '^/api/affairs': '/api' },
+      // },
+      // '/api/market': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      //   // pathRewrite: { '^/api/affairs': '/api' },
+      // },
+      // '/api/live': {
+      //   target: 'http://free.liaoningdoupo.com',
+      //   changeOrigin: true,
+      //   ws: true,
+      //   // pathRewrite: { '^/api/affairs': '/api' },
+      // },
+      '/ws': {
+        target: 'http://free.liaoningdoupo.com',
         ws: true,
-        onProxyReq(proxyReq, req, res) {
-          proxyReq.setHeader('x-tenant', '99991');
-        },
-        '/files': {
-          target: 'http://free.liaoningdoupo.com',
-        },
       },
     },
   },