Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-website

src/layout/live/head.vue

@@ -31,7 +31,7 @@
           <div class="info">
             <ul>
               <li :class="isTab('index') ? 'active' : ''">
-                <a @click="turnTo('index')" target="">首页</a>
+                <a @click="turnTo('home')" target="">首页</a>
               </li>
               <li class="">
                 <a @click="turnTo('hall_index')">直播大厅</a>

src/router/index.js

@@ -52,6 +52,12 @@ const live = [
         name: 'live_technical',
         component: () => import('../views/live/technical/index.vue'),
       },
+      {
+        path: '/live/liveApply',
+        meta: { title: '项目申请', subSite: true },
+        name: 'live_apply',
+        component: () => import('../views/live/hall/liveApply.vue'),
+      },
     ],
   },
   {
@@ -66,6 +72,18 @@ const live = [
     name: 'live_hall',
     component: () => import('../views/live/hall/hall.vue'),
   },
+  {
+    path: '/live/liveList',
+    meta: { title: '直播中心', subSite: true },
+    name: 'live_list',
+    component: () => import('../views/live/hall/liveList.vue'),
+  },
+  {
+    path: '/live/home',
+    meta: { title: '直播首页', subSite: true },
+    name: 'live_home',
+    component: () => import('../views/live/home.vue'),
+  },
 ];
 
 const routes = [

src/style/style.css

@@ -335,9 +335,9 @@ p {
 }
 
 .livemain .liveMainImage {
-	height: 140px;
-	overflow: hidden;
-	margin: 0 0 15px 0;
+  height: 175px;
+  overflow: hidden;
+  margin: 0 0 15px 0;
 }
 
 .livemain .gongqiu {

src/views/live/hall/hall.vue

@@ -68,125 +68,57 @@
               </div>
             </div>
             <div class="liveMainImage">
-              <img :src="img.main1" />
+              <!-- <img :src="img.main1" /> -->
+              <el-carousel :interval="4000" type="card" height="150px">
+                <el-carousel-item class="liveMainImageList" v-for="(item, index) in liveMainImageList" :key="index">
+                  <el-image :src="item.pic"></el-image>
+                  <el-col :span="24" class="btn">
+                    <el-button @click="apply()">立即申请</el-button>
+                  </el-col>
+                </el-carousel-item>
+              </el-carousel>
             </div>
             <div class="gongqiu">
               <div class="gongqiuTop">
                 <img :src="img.main2" />
               </div>
               <div class="gongqiuInfo">
-                <!-- <div id="tab">
-                  <div class="tabList">
-                    <ul>
-                      <li class="cur">找技术</li>
-                      <li>找需求</li>
-                      <li>找服务</li>
-                      <li>找专家</li>
-                    </ul>
-                  </div>
-                  <div class="tabCon">
-                    <div class="cur cur_1">
-                      <ul class="tabConList">
-                        <li class="oneLi" v-for="i in 4" :key="i">
-                          <p class="oneLiLeft">
-                            <span class="name">技术名称</span>
-                            <span class="user"><i class="iconfont icon-ren" style="color:#FFA500;margin: 0 5px 0 0;"></i>技术人</span>
-                            <span class="user"><i class="iconfont icon-address" style="color:#FFA500;margin: 0 5px 0 0;"></i>吉林省长春市</span>
-                            <span class="type">类型：实用类型</span>
-                            <span class="type">成熟度：正在研发</span>
-                            <span class="type">交易方式：许可转让</span>
-                            <span class="type">交易价格：面议</span>
-                          </p>
-                          <p class="oneLiRight">
-                            <span
-                              >摘要：本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0</span
-                            >
-                          </p>
-                        </li>
-                      </ul>
-                    </div>
-                    <div>
-                      <ul class="tabConList">
-                        <li class="twoLi" v-for="i in 6" :key="i">
-                          <a href="">
-                            <p>寻求疫后创伤抗抑郁药药物的需求</p>
-                            <p>
-                              <span>行业分类：医药与医疗-生物医药</span>
-                              <span>发布时间：2020-03-31</span>
-                            </p>
-                            <p>
-                              <span>需求类型：技术难题解决</span>
-                              <span>吉林省长春市</span>
-                            </p>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                    <div class="cur_3">
-                      <ul class="tabConList">
-                        <li class="threeLi" v-for="i in 6" :key="i">
-                          <p>长春福瑞科技有限公司</p>
-                          <p>
-                            <img :src="img.logo20" />
-                            <button type="button">立即咨询</button>
-                            <span>服务类型：</span>
-                            <span class="type">科技服务</span>
-                          </p>
-                          <a href="">进入主页</a>
-                        </li>
-                      </ul>
-                    </div>
-                    <div>
-                      <ul class="tabConList">
-                        <li class="fourLi" v-for="i in 6" :key="i">
-                          <img :src="img.img" />
-                          <p>
-                            <span class="name">万能通</span>
-                            <span><i class="iconfont icon-address" style="color: #FFA500;"></i>吉林省长春市</span>
-                          </p>
-                          <p>从事领域：计算机，电脑，啥都有</p>
-                          <p>擅长能力：全能，啥都会，没有他不会的</p>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div> -->
                 <el-tabs type="border-card">
                   <el-tab-pane label="找技术">
                     <el-col :span="24">
                       <ul class="technology">
                         <li class="technologyList" v-for="(item, index) in technologyList" :key="index">
                           <el-col :span="14" class="left">
-                            <p>{{ item.title }}</p>
+                            <p>{{ item.name }}</p>
                             <p>
-                              <span><i class="el-icon-user-solid" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.name }}</span>
-                              <span><i class="el-icon-location" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.address }}</span>
+                              <span><i class="el-icon-user-solid" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.contact_user }}</span>
+                              <span><i class="el-icon-phone" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.contact_tel }}</span>
                             </p>
                             <p>
-                              <span>类型：{{ item.type }}</span>
-                              <span>成熟度：{{ item.chengshu }}</span>
-                              <span>交易方式：{{ item.fanngshi }}</span>
-                              <span>交易价格：{{ item.money }}</span>
+                              <span>类型：{{ item.product_type_name }}</span>
+                              <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
+                              <span>交易方式：{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : '竞价' }}</span>
+                              <span>交易价格：{{ item.price }}{{ item.priceunit }}</span>
                             </p>
                           </el-col>
                           <el-col :span="10" class="right">
-                            <p>摘要:{{ item.intro }}</p>
+                            <p>摘要:{{ item.introduction }}</p>
                           </el-col>
                         </li>
                       </ul>
                     </el-col>
                   </el-tab-pane>
-                  <el-tab-pane label="找需求">
+                  <el-tab-pane label="找产品">
                     <el-col :span="24">
                       <ul class="demand">
                         <li class="demandList" v-for="(item, index) in demandList" :key="index">
-                          <p>{{ item.title }}</p>
+                          <p>{{ item.name }}</p>
                           <p>
-                            <span>行业分类：{{ item.hyfl }}</span>
-                            <span>发布时间：{{ item.date }}</span>
+                            <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
+                            <span>发布时间：{{ item.meta | getDate }}</span>
                           </p>
                           <p>
-                            <span>需求类型：{{ item.xqlx }}</span>
+                            <span>需求类型：{{ item.product_type_name }}</span>
                             <span>{{ item.address }}</span>
                           </p>
                         </li>
@@ -197,13 +129,13 @@
                     <el-col :span="24">
                       <ul class="service">
                         <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
-                          <p class="company">{{ item.company }}</p>
+                          <p class="company">{{ item.companyName }}</p>
                           <div class="serviceDown">
-                            <el-image :src="item.logo"></el-image>
+                            <el-image :src="item.image[0].url"></el-image>
                             <p>
                               <button>立即咨询</button>
                               <span class="type1">服务类型：</span>
-                              <span class="type2">{{ item.type }}</span>
+                              <span class="type2">{{ item.product_type_name }}</span>
                             </p>
                           </div>
                           <button class="btn">进入主页</button>
@@ -281,6 +213,9 @@
     <div class="pz_down">
       <live-foot></live-foot>
     </div>
+    <div class="suspenInfo">
+      <el-link :underline="false" @click="clickBtn()" target="_blank">直播中心</el-link>
+    </div>
   </div>
 </template>
 
@@ -289,6 +224,9 @@ import chat from './parts/chat.vue';
 import liveFoot from '@/layout/live/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapProduct } = createNamespacedHelpers('enterpriseproject');
+const { mapActions: market } = createNamespacedHelpers('market');
+
+import _ from 'loadsh';
 export default {
   name: 'hall',
   props: {},
@@ -300,145 +238,23 @@ export default {
       logo20: require('@/assets/live/logo20.png'),
       img: require('@/assets/live/测试图片.jpg'),
     },
-    // 找技术
-    technologyList: [
-      {
-        title: '产品名称',
-        name: '技术人',
-        address: '吉林省 长春市',
-        type: '常用类型',
-        chengshu: '正在研发',
-        fanngshi: '许可方式',
-        money: '面议',
-        intro:
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
-      },
+    liveMainImageList: [
       {
-        title: '产品名称',
-        name: '技术人',
-        address: '吉林省 长春市',
-        type: '常用类型',
-        chengshu: '正在研发',
-        fanngshi: '许可方式',
-        money: '面议',
-        intro:
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
+        pic: require('@/assets/live/main1.png'),
       },
       {
-        title: '产品名称',
-        name: '技术人',
-        address: '吉林省 长春市',
-        type: '常用类型',
-        chengshu: '正在研发',
-        fanngshi: '许可方式',
-        money: '面议',
-        intro:
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
+        pic: require('@/assets/live/main1.png'),
       },
       {
-        title: '产品名称',
-        name: '技术人',
-        address: '吉林省 长春市',
-        type: '常用类型',
-        chengshu: '正在研发',
-        fanngshi: '许可方式',
-        money: '面议',
-        intro:
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
-      },
-    ],
-    // 找需求
-    demandList: [
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
-      },
-      {
-        title: '寻求以后创伤抗抑郁药药物的绣球',
-        hyfl: '医药与医疗-生物医药',
-        date: '2020-02-01',
-        xqlx: '技术难题解决',
-        address: '吉林省长春市',
+        pic: require('@/assets/live/main1.png'),
       },
     ],
+    // 找技术
+    technologyList: [],
+    // 找产品
+    demandList: [],
     // 找服务
-    serviceList: [
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-      {
-        company: '长春福瑞科技有限公司',
-        logo: require('@/assets/live/logo20.png'),
-        type: '科技服务',
-      },
-    ],
+    serviceList: [],
     // 找专家
     expertList: [
       {
@@ -569,9 +385,42 @@ export default {
   },
   methods: {
     ...mapProduct({ mapProductQuery: 'query' }),
+    ...market({ marketFetch: 'fetch' }),
     async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
-      const res = await this.mapProductQuery({ skip, limit, ...info });
-      console.log(res);
+      let res = await this.mapProductQuery({ skip, limit, totaltype: 0, ...info });
+      if (res.errcode === 0) {
+        this.$set(this, `technologyList`, res.data);
+      }
+      res = await this.mapProductQuery({ skip, limit, totaltype: 1, ...info });
+      if (res.errcode === 0) {
+        this.$set(this, `demandList`, res.data);
+      }
+      res = await this.mapProductQuery({ skip, limit, totaltype: 2, ...info });
+      if (res.errcode === 0) {
+        for (const val of res.data) {
+          const userInfo = await this.marketFetch(val.userid);
+          val.companyName = userInfo.data.institution_name;
+        }
+        this.$set(this, `serviceList`, res.data);
+      }
+    },
+    // 实况直播
+    clickBtn() {
+      this.$router.push({ path: '/live/liveList' });
+    },
+    // 申请
+    apply() {
+      this.$router.push({ path: '/live/liveApply' });
+    },
+  },
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
     },
   },
   computed: {
@@ -589,8 +438,12 @@ export default {
 <style lang="less" scoped>
 @import '~@/style/style.css';
 // 找技术
-// .technology {
-// }
+.technology {
+  float: left;
+  width: 100%;
+  height: 518px;
+  overflow: hidden;
+}
 .technology .technologyList {
   float: left;
   width: 100%;
@@ -647,7 +500,7 @@ export default {
   line-height: 24px;
   overflow: hidden;
 }
-// 找需求
+// 找产品
 // .demand {
 // }
 .demand .demandList {
@@ -699,8 +552,12 @@ export default {
   text-align: left;
 }
 // 找服务
-// .service{
-// }
+.service {
+  float: left;
+  height: 518px;
+  width: 100%;
+  overflow: hidden;
+}
 .service .serviceList {
   float: left;
   width: 30%;
@@ -815,4 +672,42 @@ export default {
   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;
+}
+.liveMainImageList .el-image {
+  height: 150px;
+  position: absolute;
+}
+.liveMainImageList .btn {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  bottom: 50px;
+}
+.liveMainImageList .btn .el-button {
+  border: none;
+  background: #ffff009f;
+  color: #fff;
+  border-radius: 25px;
+  font-weight: bold;
+}
 </style>

src/views/live/hall/liveApply.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="liveApply">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="liveApply">
+          <el-col :span="24" class="liveApplyTop">
+            <el-col :span="3">
+              <el-image :src="logo" style="width:105px;height:105px;"></el-image>
+            </el-col>
+            <el-col :span="20">
+              <p>温馨提示：</p>
+              <p>1、为了保证您的信息能顺利通过我们的审核，请将信息的真实情况尽可能全面的发布出来！</p>
+              <p>
+                2、根据我们的长期跟踪统计，信息完整度越高，越容易获得目标客户的关注！3、信息完整度越高，将在我们的平台搜索结果排序靠前、获得推荐机会，以及享受增值服务试用机会！
+              </p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="liveApplyInfo">
+            <el-form ref="form" :model="form" label-width="120px">
+              <el-form-item label="技术名称">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="行业类别">
+                <el-select v-model="form.region" placeholder="请选择行业类别">
+                  <el-option label="类别一" value="0"></el-option>
+                  <el-option label="类别二" value="1"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="是否专利技术">
+                <el-radio-group v-model="form.resource">
+                  <el-radio label="是专利技术"></el-radio>
+                  <el-radio label="非专利技术"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="技术简介">
+                <el-input type="textarea" v-model="form.desc"></el-input>
+              </el-form-item>
+              <el-form-item label="转让方式">
+                <el-select v-model="form.business" placeholder="请选择转让方式">
+                  <el-option label="公用" value="0"></el-option>
+                  <el-option label="转用" value="1"></el-option>
+                  <el-option label="竞价" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="研发阶段">
+                <el-select v-model="form.phase" placeholder="请选择研发阶段">
+                  <el-option label="阶段成果" value="1"></el-option>
+                  <el-option label="最终成果" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="技术图片">
+                <upload :limit="1" :data="form.image.url" type="url" :url="'/files/image/upload'" @upload="uploadSuccess"></upload>
+              </el-form-item>
+              <el-form-item label="联系人">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="电子邮箱">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="单位名称">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-row style="text-align:center">
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+              </el-row>
+            </el-form>
+          </el-col>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import upload from '@/components/upload.vue';
+export default {
+  name: 'liveApply',
+  props: {},
+  components: {
+    upload,
+  },
+  data: () => ({
+    form: {
+      image: {},
+    },
+    logo: require('@/assets/live/d10_fbb1.png'),
+  }),
+  created() {},
+  methods: {
+    onSubmit() {
+      console.log(this.form);
+    },
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.liveApply {
+  float: left;
+  margin: 30px 0;
+}
+.liveApply .liveApplyTop {
+  float: left;
+  background: #f3faff;
+  padding: 15px;
+  border: 1px solid #ccc;
+  margin: 0 0 15px 0;
+}
+.liveApplyTop p:first-child {
+  font-size: 14px;
+  font-weight: bold;
+}
+.liveApplyTop p:nth-child(2n) {
+  font-size: 12px;
+  padding: 15px 0;
+}
+.liveApplyTop p:last-child {
+  font-size: 12px;
+}
+.liveApplyInfo {
+  padding: 0 100px;
+}
+</style>

src/views/live/hall/liveList.vue

@@ -0,0 +1,256 @@
+<template>
+  <div id="liveList">
+    <div class="pz_top">
+      <div class="w_0100">
+        <div class="livetop">
+          <div class="w_1200">
+            <div class="title">
+              吉林省计算机中心对接直播中心
+            </div>
+            <div class="zhuban">
+              <span>主办方:</span>
+              <span>吉林省计算机中心直播大厅</span>
+            </div>
+            <div class="num">
+              <p>
+                <span>同时在线</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>特邀嘉宾</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>洽谈合作</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>达成意愿</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>展示成果</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>发布需求</span>
+                <span>1人</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pz_main">
+      <div class="w_0100">
+        <div class="w_1200">
+          <el-row class="liveList">
+            <el-col class="liveListInfo">
+              <el-col :span="24" class="liveLisTop">
+                <span>吉林省计算机中心对接直播中心</span>
+                <span>实况直播</span>
+              </el-col>
+              <el-col :span="24" class="liveLisMain">
+                <ul>
+                  <li v-for="(item, index) in liveList" :key="index">
+                    <span>[{{ item.date }}]</span>
+                    <span class="textOver">{{ item.company1 }}</span>
+                    <span>与</span>
+                    <span class="textOver">{{ item.company2 }}</span>
+                    <span>实现对接</span>
+                  </li>
+                </ul>
+              </el-col>
+              <el-col :span="24" class="liveLisDown">
+                <p><span>主办单位:</span><span>吉林省计算机中心对接直播中心</span></p>
+                <p><span>指导单位:</span><span>吉林省计算机中心对接直播中心</span></p>
+                <p><span>技术支持:</span><span>长春福瑞科技有限公司</span></p>
+              </el-col>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+    <div class="pz_down">
+      <div class="w_0100">
+        <div class="superdown">
+          <div class="w_1200">
+            <p>版权所有：吉林省技术算中心</p>
+            <p>
+              <span>技术支持：长春福瑞科技有限公司</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>邮编：130000</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>传真：239823982</span>
+            </p>
+            <p>
+              <span>地址：吉林省长春市朝阳区前进大街1244号</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>电话：0134-1234567</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>邮箱：123456@163.com</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {},
+  components: {},
+  data: () => ({
+    liveList: [
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+    ],
+  }),
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less">
+@import '~@/style/style.css';
+// 直播中心
+.liveList {
+  min-height: 800px;
+  background: #8e2321;
+  float: left;
+  width: 100%;
+  margin: 0 0 20px 0;
+  position: relative;
+  top: -50px;
+}
+.liveList .liveListInfo {
+  position: absolute;
+  top: 50px;
+}
+.liveListInfo .liveLisTop {
+  width: 100%;
+  text-align: center;
+  padding: 34px 0;
+  font-size: 40px;
+  color: #fff;
+}
+.liveListInfo .liveLisTop span:first-child {
+  font-size: 40px;
+  font-weight: bold;
+}
+.liveListInfo .liveLisTop span:last-child {
+  padding: 0 0 0 15px;
+  color: yellow;
+  font-family: monospace;
+  font-weight: bold;
+}
+.liveLisMain {
+  float: left;
+  width: 100%;
+  height: 470px;
+  overflow: hidden;
+}
+.liveLisMain ul li {
+  float: left;
+  border-bottom: 1px dashed #ccc;
+  width: 98%;
+  font-size: 20px;
+  padding: 10px 0;
+  margin: 0 10px;
+  color: #fff;
+}
+.liveLisMain ul li span:first-child {
+  color: #ffff00;
+  padding: 0 15px 0 0;
+  display: inline-block;
+}
+.liveLisMain ul li span:nth-child(2) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisMain ul li span:nth-child(3) {
+  display: inline-block;
+  width: 100px;
+}
+.liveLisMain ul li span:nth-child(4) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisDown {
+  float: left;
+  width: 100%;
+  height: 160px;
+  font-size: 16px;
+  padding: 25px 0 0 0;
+}
+.liveLisDown p {
+  padding: 10px 0 5px 10px;
+}
+.liveLisDown p span:first-child {
+  color: #fc3;
+  letter-spacing: 15px;
+}
+.liveLisDown p span:last-child {
+  color: #fff;
+}
+</style>

src/views/live/home.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="home">
+    <el-row>
+      <el-col :span="24" class="home">
+        nihao
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'home',
+  props: {},
+  components: {},
+  data: () => ({}),
+  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 {
+  width: 1200px;
+  margin: 0 auto;
+}
+</style>