1

src/router/index.js

@@ -159,7 +159,12 @@ const live = [
     meta: { title: '项目成果', subSite: true },
     component: () => import('../views/halltwo/xmcg.vue'),
   },
-
+  {
+    path: '/halltwo/xmdj',
+    name: 'xmdj',
+    meta: { title: '项目对接', subSite: true },
+    component: () => import('../views/halltwo/xmdj.vue'),
+  },
   {
     path: '/hall/productList/technologyList',
     name: 'live_technologyList',

src/util/menus.js

@@ -1,30 +0,0 @@
-export const coreMenu = [
-  {
-    path: '/talk/list/in',
-    name: '校内宣讲会',
-  },
-  {
-    path: '/talk/list/out',
-    name: '校外宣讲会',
-  },
-  {
-    path: '/jobfair/list/in',
-    name: '校内招聘会',
-  },
-  {
-    path: '/jobfair/list/out',
-    name: '校外招聘会',
-  },
-  {
-    path: '/jobinfo/list',
-    name: '在线招聘',
-  },
-  {
-    path: '/jobs/list/official',
-    name: '正式岗位',
-  },
-  {
-    path: '/jobs/list/internship',
-    name: '实习岗位',
-  },
-];

src/util/optionTitles.js

@@ -1,47 +0,0 @@
-export const JOBFAIR_TITLE = [
-  { prop: 'subject', label: '' },
-  { prop: 'address', label: '举办地址' },
-  { prop: 'date', label: '举办日期' },
-  { prop: 'unit', label: '分站信息' },
-];
-
-export const CAMPUS_TITLE = [
-  { prop: 'subject', label: '' },
-  { prop: 'address', label: '举办地址' },
-  { prop: 'status', label: '审核状态' },
-  { prop: 'date', label: '举办日期' },
-  { prop: 'unit', label: '分站信息' },
-];
-
-export const JOBINFO_TITLE = [
-  { prop: 'title', label: '' },
-  { prop: 'count', label: '需求人数' },
-  { prop: 'nature.name', label: '工作性质' },
-  { prop: 'salary.name', label: '薪资待遇' },
-  { prop: 'xlreqs.name', label: '最低学历' },
-  { prop: 'city.name', label: '所在城市' },
-  // { prop: 'expired', label: '状态' },
-];
-
-export const RESUME_TITLE = [{ prop: 'title', label: '' }];
-
-export const LETTER_TITLE = [
-  { prop: 'title', label: '' },
-  { prop: 'corpname', label: '企业名称' },
-  { prop: 'type', label: '类型' },
-  { prop: 'status', label: '状态' },
-];
-
-export const TICKET_TITLE = [
-  { prop: 'subject', label: '' },
-  { prop: 'type', label: '门票类型' },
-  { prop: 'origin', label: '' },
-  { prop: 'date', label: '举办日期' },
-];
-
-export const CORP_JOBFAIR = [
-  { prop: 'subject', label: '' },
-  { prop: 'time', label: '举办时间' },
-  { prop: 'date', label: '举办日期' },
-  { prop: 'unit', label: '分站信息' },
-];

src/util/school.js

@@ -0,0 +1,54 @@
+export const schoolList = [
+  {
+    url: require('@a/school1.png'),
+    name: '吉林省农业机械研究院',
+  },
+  {
+    url: require('@a/school2.jpg'),
+    name: '吉林工程技术师范学院',
+  },
+  {
+    url: require('@a/school3.jpg'),
+    name: '吉林农业大学',
+  },
+  {
+    url: require('@a/school4.jpg'),
+    name: '中国科学院东北地理与农业生态研究所',
+  },
+  {
+    url: require('@a/school5.jpg'),
+    name: '中科院长春光机所',
+  },
+  {
+    url: require('@a/school6.jpg'),
+    name: '中科院长春应化所',
+  },
+  {
+    url: require('@a/school7.jpg'),
+    name: '中科院长春分院',
+  },
+  {
+    url: require('@a/school8.jpg'),
+    name: '长春大学',
+  },
+  {
+    url: require('@a/school9.jpg'),
+    name: '吉林大学',
+  },
+  {
+    url: require('@a/school10.jpg'),
+    name: '长春理工大学',
+  },
+  {
+    url: require('@a/school11.jpg'),
+    name: '长春工业大学',
+  },
+  {
+    url: require('@a/school12.jpg'),
+    name: '东北师范大学',
+  },
+  {
+    url: require('@a/school13.jpg'),
+    name: '长春工程学院',
+  },
+];

src/views/halltwo/directTwo.vue

@@ -42,19 +42,23 @@
             <el-col :span="24" class="twodown">
               <el-col :span="5" class="txt">
                 <span>已经到场</span>
-                <span>0</span>人
+                <span>{{ statNum.tszx }}</span
+                >人
               </el-col>
               <el-col :span="5" class="txt">
                 <span>实现对接</span>
-                <span>0</span>次
+                <span>{{ statNum.jywc }}</span
+                >次
               </el-col>
               <el-col :span="5" class="txt">
                 <span>产生意向</span>
-                <span>0</span>次
+                <span>{{ statNum.qthz }}</span
+                >次
               </el-col>
               <el-col :span="5" class="txt">
                 <span>项目数</span>
-                <span>0</span>项
+                <span>{{ statNum.czxm }}</span
+                >项
               </el-col>
               <el-col :span="5" class="txt">
                 <span>贺信</span>
@@ -62,19 +66,23 @@
               </el-col>
               <el-col :span="5" class="txt">
                 <span>同时在线</span>
-                <span>0</span>人
+                <span>{{ statNum.tszx }}</span
+                >人
               </el-col>
               <el-col :span="5" class="txt">
                 <span>正在对接</span>
-                <span>0</span>人
+                <span>{{ statNum.qthz }}</span
+                >人
               </el-col>
               <el-col :span="5" class="txt">
-                <span>产生意向</span>
-                <span>0</span>次
+                <span>达成意向</span>
+                <span>{{ statNum.dcyx }}</span
+                >次
               </el-col>
               <el-col :span="5" class="txt">
                 <span>需求数</span>
-                <span>0</span>项
+                <span>{{ statNum.czxq }}</span
+                >项
               </el-col>
               <el-col :span="5" class="txt">
                 <span>鲜花</span>
@@ -116,16 +124,16 @@
                 <el-col :span="24" class="lefttop">
                   <el-tabs v-model="achieveName">
                     <el-tab-pane label="技术成果" name="first">
-                      <achieve :list="achieveoneList"></achieve>
+                      <achieve :list="achieveoneList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="电子信息技术" name="second">
-                      <achieve :list="achievetwoList"></achieve>
+                      <achieve :list="achievetwoList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="生物与新医学技术" name="third">
-                      <achieve :list="achievethreeList"></achieve>
+                      <achieve :list="achievethreeList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="航空航天技术" name="fourth">
-                      <achieve :list="achievefourList"></achieve>
+                      <achieve :list="achievefourList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                   </el-tabs>
                   <el-link :underline="false" class="more" @click="$router.push({ path: '/halltwo/xmcg', query: { id: dockInfo.id } })">更多></el-link>
@@ -138,16 +146,16 @@
                 <el-col :span="24" class="lefttop">
                   <el-tabs v-model="techolName">
                     <el-tab-pane label="科技需求" name="first">
-                      <achieve :list="techoloneList"></achieve>
+                      <achieve :list="techoloneList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="新材料技术" name="second">
-                      <achieve :list="techoltwoList"></achieve>
+                      <achieve :list="techoltwoList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="高技术服务业" name="third">
-                      <achieve :list="techolthreeList"></achieve>
+                      <achieve :list="techolthreeList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                     <el-tab-pane label="新能源及节能技术" name="fourth">
-                      <achieve :list="techolfourList"></achieve>
+                      <achieve :list="techolfourList" @xmdjBtn="xmdjBtn"></achieve>
                     </el-tab-pane>
                   </el-tabs>
                   <el-link :underline="false" class="more" @click="$router.push({ path: '/halltwo/xmcg', query: { id: dockInfo.id } })">更多></el-link>
@@ -191,7 +199,7 @@
             </el-col>
             <el-col :span="24" class="three7">
               <el-col :span="12" class="left">
-                <expert :list="expertList"></expert>
+                <expert :list="expertList" @xmdjBtn="expertxmdjBtn"></expert>
               </el-col>
               <el-col :span="12" class="right">
                 <dockchat></dockchat>
@@ -263,11 +271,14 @@ import achieve from './parts/achieve.vue';
 import expert from './parts/expert.vue';
 // 公共聊天
 import dockchat from './parts/dockchat.vue';
+// 学校列表
 
+import { schoolList } from '@/util/school.js';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 const { mapActions: transaction } = createNamespacedHelpers('transaction');
+const { mapActions: market } = createNamespacedHelpers('market');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -333,66 +344,23 @@ export default {
       techolfourList: [],
       // 高校院所
       school: require('@a/zh_12.png'),
-      schoolList: [
-        {
-          url: require('@a/school1.png'),
-          name: '吉林省农业机械研究院',
-        },
-        {
-          url: require('@a/school2.jpg'),
-          name: '吉林工程技术师范学院',
-        },
-        {
-          url: require('@a/school3.jpg'),
-          name: '吉林农业大学',
-        },
-        {
-          url: require('@a/school4.jpg'),
-          name: '中国科学院东北地理与农业生态研究所',
-        },
-        {
-          url: require('@a/school5.jpg'),
-          name: '中科院长春光机所',
-        },
-        {
-          url: require('@a/school6.jpg'),
-          name: '中科院长春应化所',
-        },
-        {
-          url: require('@a/school7.jpg'),
-          name: '中科院长春分院',
-        },
-        {
-          url: require('@a/school8.jpg'),
-          name: '长春大学',
-        },
-        {
-          url: require('@a/school9.jpg'),
-          name: '吉林大学',
-        },
-        {
-          url: require('@a/school10.jpg'),
-          name: '长春理工大学',
-        },
-        {
-          url: require('@a/school11.jpg'),
-          name: '长春工业大学',
-        },
-        {
-          url: require('@a/school12.jpg'),
-          name: '东北师范大学',
-        },
-        {
-          url: require('@a/school13.jpg'),
-          name: '长春工程学院',
-        },
-      ],
+      schoolList: schoolList,
       // 技术专家
       expertList: [],
       // 指导单位
       zdcom: require('@a/zh_17.png'),
       jscom: require('@a/zh_18.png'),
       erweima: require('@a/二维码.jpg'),
+      // 项目数
+      statNum: {
+        tszx: 0,
+        tyjb: 0,
+        qthz: 0,
+        dcyx: 0,
+        jywc: 0,
+        czxm: 0,
+        czxq: 0,
+      },
     };
   },
   async created() {
@@ -402,6 +370,7 @@ export default {
     ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
     ...expertsuser({ expertQuery: 'query' }),
     ...transaction({ tquery: 'query' }),
+    ...market({ marketFetch: 'fetch', operaFetch: 'operaFetch', sendMsg: 'operationCreate', operaQuery: 'operaQuery' }),
     async searchInfo() {
       // 查询展会详情
       if (this.id) {
@@ -412,6 +381,7 @@ export default {
           let czxm = res.data.apply.map(item => item.goodsList);
           czxm = _.flattenDeep(czxm);
           let czxmNew = czxm.filter(item => item.dockStatus == '1');
+          this.$set(this.statNum, `czxm`, czxmNew.length);
           // 技术成果
           let achieve = czxmNew.filter(i => i.type == '1');
           if (achieve.length > 0) {
@@ -432,6 +402,7 @@ export default {
           if (techol.length > 0) {
             // 全部
             this.$set(this, `techoloneList`, techol);
+            this.$set(this.statNum, `czxq`, techol.length);
             // 新材料技术
             let techoltwoList = techol.filter(i => i.field == '新材料技术');
             this.$set(this, `techoltwoList`, techoltwoList);
@@ -450,8 +421,42 @@ export default {
         this.$set(this, `expertList`, res.data);
       }
       // 查询直播实况
-      let trans = await this.tquery({ dockid: this.id });
-      console.log(trans);
+      // 所有
+      let trans = await this.tquery({ dock_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `trainoneList`, trans.data);
+      }
+      // 正在洽谈
+      let qthe = await this.tquery({ status: 0, dock_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `trainthreeList`, qthe.data);
+        this.$set(this.statNum, `qthz`, qthe.total);
+      }
+      // 达成意向
+      let dcyx = await this.tquery({ status: 1, dock_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `trainfourList`, dcyx.data);
+        this.$set(this.statNum, `dcyx`, dcyx.total);
+      }
+      // 交易完成
+      let jywc = await this.tquery({ status: 2, dock_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `traintwoList`, jywc.data);
+        this.$set(this.statNum, `jywc`, jywc.total);
+      }
+      // 同时在线
+      let tszx = await this.operaQuery({ type: '0' });
+      if (tszx) {
+        this.$set(this.statNum, `tszx`, tszx.total);
+      }
+    },
+    // 成果，需求，商务
+    xmdjBtn(data) {
+      this.$router.push({ path: '/halltwo/xmdj', query: { dock_id: this.id, id: data._id, type: data.type } });
+    },
+    // 专家
+    expertxmdjBtn(data) {
+      this.$router.push({ path: '/halltwo/xmdj', query: { dock_id: this.id, id: data._id, type: '3' } });
     },
   },
   computed: {

src/views/halltwo/parts/achieve.vue

@@ -2,7 +2,7 @@
   <div id="achieve">
     <el-row>
       <el-col :span="24" class="achieve">
-        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="xmdjBtn(item)">
           <el-col :span="15" class="name textOver"> >{{ item.name }} </el-col>
           <el-col :span="6" class="brief textOver">
             {{ item.field }}
@@ -30,7 +30,11 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    xmdjBtn(data) {
+      this.$emit('xmdjBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/halltwo/parts/expert.vue

@@ -7,7 +7,7 @@
           <span>更多></span>
         </el-col>
         <el-col :span="24" class="down">
-          <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="12" class="list" v-for="(item, index) in list" :key="index" @click.native="xmdjBtn(item)">
             <el-col :span="12" class="image">
               <el-image :src="item.expertimage"></el-image>
             </el-col>
@@ -34,7 +34,11 @@ export default {
     return {};
   },
   created() {},
-  methods: {},
+  methods: {
+    xmdjBtn(data) {
+      this.$emit('xmdjBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/halltwo/parts/trainlist.vue

@@ -3,8 +3,7 @@
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
-          <!-- <span>[{{ getDate(item.meta.createdAt) }}]</span> -->
-          <span>[{{ item.date }}]</span>
+          <span>[{{ getDate(item.meta.createdAt) }}]</span>
           <span class="textOver">{{ item.market_username }}</span>
           <span>与</span>
           <span class="textOver">{{ item.username }}</span>
@@ -32,10 +31,10 @@ export default {
   },
   created() {},
   methods: {
-    // getDate(value) {
-    //   let data = moment().format('HH:mm:ss');
-    //   if (data) return data;s
-    // },
+    getDate(value) {
+      let data = moment().format('HH:mm:ss');
+      if (data) return data;
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/halltwo/xmdj.vue

@@ -0,0 +1,386 @@
+<template>
+  <div id="xmdj">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <div class="w_1200">
+            <el-col :span="20" class="left">
+              <el-col :span="24" class="leftone">
+                <span>科技成果展洽会</span>
+                <span>欢迎您</span>
+              </el-col>
+              <el-col :span="24" class="lefttwo">
+                SCIENTIFIC AND TECHNOLOGICAL ACHIEVEEMENTS EXHIBITION
+              </el-col>
+            </el-col>
+            <el-col :span="4" class="right">
+              <el-link :underline="false">帮助中心</el-link>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="two">
+          <div class="w_1200">
+            <el-col :span="24" class="twotop">
+              <el-col :span="18" class="left">
+                <p>{{ dockInfo.title }}</p>
+                <el-image :src="two1"></el-image>
+              </el-col>
+              <el-col :span="6" class="right">
+                <el-image :src="two2"></el-image>
+                <p>{{ dockInfo.start_time }}</p>
+                <p>距离展会结束还有</p>
+                <p>倒计时</p>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="twocen">
+              <el-col :span="15" class="left"> <span>主办单位：</span>{{ dockInfo.sponsor }} </el-col>
+              <el-col :span="8" class="right">
+                <el-button class="btn1" @click="$router.push({ path: '/halltwo/directTwo', query: { id: dockInfo.id } })">返回展会进行页</el-button>
+                <el-button class="btn2" @click="$router.push({ path: '/halltwo/detail', query: { id: dockInfo.id } })">进入展会总结页</el-button>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="three">
+          <div class="w_1200">
+            <el-col :span="24" class="threeinfo">
+              <span v-if="this.type == '0'">
+                <techDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></techDetail>
+              </span>
+              <span v-else-if="this.type == '1'">
+                <achiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></achiDetail>
+              </span>
+              <span v-else-if="this.type == '2'">
+                <busiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></busiDetail>
+              </span>
+              <span v-else>
+                <expeDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></expeDetail>
+              </span>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="four">
+          <div class="w_1200">
+            <el-col :span="24" class="info">
+              <el-col :span="8" class="left">
+                <h1>专家咨询：</h1>
+                <p>工作日：08:30~17:00</p>
+                <p>咨询电话：</p>
+                <p>0431-81666508</p>
+              </el-col>
+              <el-col :span="8" class="left">
+                <h1>业务联系：</h1>
+                <p>长春中科北斗工程技术有限公司</p>
+                <p>联系人：刘经理</p>
+                <p>电话：18604328977</p>
+                <p>邮箱：18889898@qq.com</p>
+              </el-col>
+              <el-col :span="8" class="left right">
+                <h1>活动帮微信：</h1>
+                <el-image :src="erweima" style="width:132px;height:132px;"></el-image>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+      <div class="pz_down">
+        <live-foot></live-foot>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import liveFoot from '@/layout/live/foot.vue';
+import techDetail from '@/views/market/detail/techDetail.vue';
+import achiDetail from '@/views/market/detail/achiDetail.vue';
+import busiDetail from '@/views/market/detail/busiDetail.vue';
+import expeDetail from '@/views/market/detail/expeDetail.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'xmdj',
+  props: {},
+  components: {
+    liveFoot,
+    techDetail,
+    achiDetail,
+    busiDetail,
+    expeDetail,
+  },
+  data: function() {
+    return {
+      two1: require('@a/sy_04.png'),
+      two2: require('@a/dock2.png'),
+      // 展會詳情
+      dockInfo: {},
+      // 指导单位
+      erweima: require('@a/二维码.jpg'),
+      // 产品列表
+      productList: [],
+      // 产品详情
+      detailInfo: {},
+      // 显示按钮
+      displayBtn: true,
+    };
+  },
+  async created() {
+    await this.searchInfo();
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
+    ...transaction({ buyProduct: 'create' }),
+    ...expertsuser(['fetch']),
+    async searchInfo() {
+      // 查询展会详情
+      if (this.dock_id) {
+        let res = await this.dockFetch(this.dock_id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `dockInfo`, res.data);
+          if (this.type == '3') {
+            this.searchExpert();
+          } else {
+            // 查询产品
+            let czxm = res.data.apply.map(item => item.goodsList);
+            czxm = _.flattenDeep(czxm);
+            let czxmNew = czxm.filter(item => item.dockStatus == '1');
+            this.$set(this, `productList`, czxmNew);
+            this.searchProduct();
+          }
+        }
+      }
+    },
+    // 查找产品详情
+    searchProduct() {
+      let productInfo = this.productList.find(i => i._id == this.id);
+      if (productInfo) {
+        this.$set(this, `detailInfo`, productInfo);
+      }
+    },
+    // 查找专家详情
+    async searchExpert() {
+      let res = await this.fetch(this.id);
+      if (res.errcode === 0) {
+        this.$set(this, `detailInfo`, res.data);
+      }
+    },
+    // 洽谈
+    async onSubmit() {
+      let data = this.detailInfo;
+      let form = {};
+      if (this.type == '3') {
+        form = {
+          userid: this.user.uid,
+          username: this.user.name,
+          product_id: data.id,
+          product_name: data.name,
+          market_userid: data.id,
+          market_username: data.name,
+          status: '0',
+          type: '1',
+        };
+      } else {
+        form = {
+          userid: this.user.uid,
+          username: this.user.name,
+          product_id: data._id,
+          product_name: data.name,
+          market_userid: data.userid,
+          market_username: data.contacts,
+          status: '0',
+          type: '1',
+        };
+      }
+      if (!this.user.uid) {
+        // this.$message.error('游客身份无法与卖家对话,请先注册');
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
+          type: 'error',
+        });
+        return;
+      } else {
+        let res = await this.buyProduct(form);
+        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    dock_id() {
+      return this.$route.query.dock_id;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+    type() {
+      return this.$route.query.type;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    height: 100px;
+    .left {
+      height: 100px;
+      .leftone {
+        margin: 15px 0 0 0;
+        span:nth-child(1) {
+          font-size: 35px;
+          color: #535353;
+          font-weight: bold;
+          font-family: cursive;
+        }
+        span:nth-child(2) {
+          font-size: 15px;
+          padding: 0 10px;
+          color: #535353;
+        }
+      }
+      .lefttwo {
+        font-size: 12px;
+        color: #535353;
+      }
+    }
+    .right {
+      height: 100px;
+      line-height: 100px;
+      text-align: right;
+    }
+  }
+  .two {
+    height: 610px;
+    background: url('~@/assets/bj1.jpg');
+    padding: 20px 0;
+    .twotop {
+      margin: 0 0 10px 0;
+      .left {
+        height: 357px;
+        margin: 0 10px 0 0;
+        background: url('~@/assets/dock1.png');
+        p {
+          float: left;
+          width: 79%;
+          font-size: 43px;
+          color: #fff;
+          font-weight: bold;
+          padding: 13% 0 0 20px;
+        }
+        .el-image {
+          float: left;
+          width: 153px;
+          height: 94px;
+          margin: 4% 0 0 0;
+        }
+      }
+      .right {
+        background-color: #ffffff;
+        width: 24%;
+        height: 357px;
+        text-align: center;
+        padding: 0 10px;
+        .el-image {
+          width: 120px;
+          height: 48px;
+          margin: 50px 0 0px 0;
+        }
+        p:nth-child(2) {
+          font-size: 18px;
+          margin: 30px 0 5px 0;
+        }
+        p:nth-child(3) {
+          font-size: 22px;
+          font-weight: bold;
+          margin-bottom: 30px;
+        }
+        p:nth-child(4) {
+          background: #f5f5f5;
+          padding: 20px 0px;
+          border-radius: 5px;
+          height: 50px;
+        }
+      }
+      .right:hover {
+        cursor: pointer;
+        p:nth-child(3) {
+          color: #535353;
+        }
+      }
+    }
+    .twocen {
+      height: 130px;
+      overflow: hidden;
+      line-height: 130px;
+      background-color: #fff;
+      margin: 0 0 35px 0;
+      .left {
+        font-size: 18px;
+        margin: 0 0 0 30px;
+        span {
+          font-size: 22px;
+          font-weight: bold;
+        }
+      }
+      .right {
+        .btn1 {
+          font-size: 16px;
+          color: #fff;
+          background: red;
+          border: none;
+          font-weight: bold;
+        }
+        .btn2 {
+          font-size: 16px;
+          color: #ff0000;
+          border: 1px solid #ff0000;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .three {
+    min-height: 700px;
+    overflow: hidden;
+    position: relative;
+    top: -50px;
+    z-index: 999;
+    .threeinfo {
+      min-height: 700px;
+      overflow: hidden;
+      background-color: #fff;
+      padding: 15px;
+      box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
+    }
+  }
+  .four {
+    border-top: 2px solid #305798;
+    height: 250px;
+    .info {
+      .left {
+        h1 {
+          padding: 15px 0;
+          font-weight: bold;
+          color: #4d4d4d;
+        }
+        p {
+          font-size: 16px;
+          color: #4d4d4d;
+          padding: 5px 0;
+        }
+      }
+      .right {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>