update

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.4.3",
     "element-ui": "^2.13.0",
     "loadsh": "0.0.4",
+    "moment": "^2.24.0",
     "naf-core": "^0.1.2",
     "vue": "^2.6.10",
     "vue-meta": "^2.3.1",

public/static/liveIndex.html

@@ -20,7 +20,8 @@
 						<p>指导单位：吉林省计算机中心</p>
 						<p>主办方：吉林省计算机中心</p>
 						<p>支持单位：长春市福瑞科技有限公司</p>
-						<a href="../live/hall">进入活动现场<i class="iconfont icon-bofang"></i></a>
+            <a href="../live/hall" target="_blink">进入活动现场<i class="iconfont icon-bofang"></i></a>
+            <!-- ../live/hall -->
 					</div>
 				</div>
 			</div>

src/layout/live/head.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="head">
+  <div id="heads">
     <div class="w_0100">
       <div class="superbanner">
         <img :src="top_bg" />
@@ -9,7 +9,10 @@
           <p>
             欢迎来到吉林省计算机中心科技平台
           </p>
-          <p>
+          <p v-if="user && user.id">
+            {{ user.name }}
+          </p>
+          <p v-else>
             <button type="button">登录</button>
             <button type="button">注册</button>
           </p>
@@ -27,23 +30,23 @@
         <div class="w_1200">
           <div class="info">
             <ul>
-              <li class="">
-                <a href="index.html" target="">首页</a>
+              <li :class="isTab('index') ? 'active' : ''">
+                <a @click="turnTo('index')" target="">首页</a>
               </li>
               <li class="">
-                <a href="liveIndex.html" target="_blank">直播大厅</a>
+                <a @click="turnTo('hall_index')">直播大厅</a>
               </li>
-              <li class="">
-                <a href="supermarket.html" target="">科技超市</a>
+              <li :class="isTab('market') ? 'active' : ''">
+                <a @click="turnTo('market')" target="">科技超市</a>
               </li>
-              <li class="">
-                <a href="service.html" target="">创新服务</a>
+              <li :class="isTab('service') ? 'active' : ''">
+                <a @click="turnTo('service')" target="">创新服务</a>
               </li>
-              <li class="active">
-                <a href="dynamic.html" target="">动态监测</a>
+              <li :class="isTab('dynamic') ? 'active' : ''">
+                <a @click="turnTo('dynamic')" target="">动态监测</a>
               </li>
-              <li class="">
-                <a href="technical.html" target="">技术培训</a>
+              <li :class="isTab('technical') ? 'active' : ''">
+                <a @click="turnTo('technical')" target="">技术培训</a>
               </li>
             </ul>
           </div>
@@ -56,7 +59,7 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'head',
+  name: 'heads',
   props: {},
   components: {},
   data: () => {
@@ -66,7 +69,18 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    turnTo(type) {
+      if (type == 'index') {
+        console.log('首页未出');
+      } else if (type == 'hall_index') this.$router.push({ path: '/live/hall/index' });
+      else this.$router.push({ path: `/live/${type}` });
+    },
+    isTab(type) {
+      if (type == 'index') return this.$route.path.includes('/live/index');
+      else return this.$route.path.includes(`/live/${type}`);
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {

src/router/index.js

@@ -17,10 +17,10 @@ const live = [
         component: () => import('../views/live/detail/detail.vue'),
       },
       {
-        path: '/live/monitor',
+        path: '/live/dynamic',
         meta: { title: '动态监控', subSite: true },
-        name: 'live_monitor',
-        component: () => import('../views/live/monitor/index.vue'),
+        name: 'live_dynamic',
+        component: () => import('../views/live/dynamic/index.vue'),
       },
       {
         path: '/live/list',

src/style/mubu2017.css

@@ -1,97 +0,0 @@
-html,body,div,p,span,h1,h2,h3,h4,p,a, em,font,img,strong,dl,dt,dd,ul,li{margin:0; padding:0; font-family:"Microsoft YaHei";}
-html,body{height:100%; font-size:12px;}    
-ul,ol{list-style:none;}
-ul li{list-style-type:none;}
-img{border:0;}    
-em,i{font-style:normal;}
-.f_r,.fr{float:right;}
-.f_l,.fl{float:left;}
-canvas { cursor:crosshair; display:block;}
-.mubu{ background:url(../images/mubu_1_s.jpg) no-repeat top center; min-width:960px;height:99.9%;}
-.mubu_main{ width:960px; margin:0 auto; text-align:center; padding-top:300px; }
-.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
-.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
-.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
-.mubu_main p.into{ margin-top:50px; height:120px;}
-.mubu_top{ background:url(../images/mubu_2_s.png) no-repeat top center; position:fixed; top:0; left:0; height:150px; width:100%;}
-.mubu_left{ background:url(../images/mubu_left_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; left:-720px; -webkit-animation:mubu_dh_1 5s linear; animation:mubu_dh_1 8s linear forwards; display:none\9;}
-.mubu_right{ background:url(../images/mubu_right_s.jpg) no-repeat; width:720px; height:100%; position:fixed; top:0; right:-720px; -webkit-animation:mubu_dh_2 5s linear; animation:mubu_dh_2 8s linear forwards; display:none\9;}
-@-webkit-keyframes mubu_dh_1 {
-	0%{left:0;}
-	75% { left:-540px; opacity:100;}
-	100% { left:-720px; opacity:0; display:none;}
-}
-@keyframes mubu_dh_1 {
-	0% { left:0;}
-	75% { left:-540px; opacity:100;}
-	100% { left:-720px; opacity:0; display:none;}
-}
-@-webkit-keyframes mubu_dh_2 {
-    0% { right:0;}
-	75% { right:-540px; opacity:100;}
-	100% { right:-720px; opacity:0; display:none;}
-}
-@keyframes mubu_dh_2 {
-    0% { right:0;}
-	75% { right:-540px; opacity:100;}
-	100% { right:-720px; opacity:0; display:none;}
-}
-.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:300px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
-.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:250px; left:25%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
-.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:250px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite; display:none\9;}
-@media (min-width:1440px){ 
-.mubu{ background:url(../images/mubu_1.jpg) no-repeat top center; height:99.9%;}
-.mubu_main{ width:1150px; margin:0 auto; text-align:center; padding-top:300px; }
-.mubu_main h1{ font-size:50px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden;}
-.mubu_main h2{ font-size:40px; color:#f1ea2e; text-shadow:2px 2px 5px #000; line-height:1.5em; height:1.5em; overflow:hidden; margin-bottom:30px;}
-.mubu_main p{ font-size:24px; line-height:1.5em; height:1.5em; overflow:hidden; color:#fff; text-shadow:2px 2px 5px #000;}
-.mubu_main p.into{ margin-top:50px; height:120px;}
-.mubu_top{ background:url(../images/mubu_2.png) no-repeat top center; position:fixed; top:0; left:0; height:200px; width:100%;}
-.mubu_left{ background:url(../images/mubu_left.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0;left:-960px; -webkit-animation:mubu_dh_1 5s ease-in; animation:mubu_dh_1 8s linear forwards; display:none\9;}
-.mubu_right{ background:url(../images/mubu_right.jpg) no-repeat; width:960px; height:100%; position:fixed; top:0; right:-960px; -webkit-animation:mubu_dh_2 5s ease-in; animation:mubu_dh_2 8s linear forwards; display:none\9;}
-@-webkit-keyframes mubu_dh_1 {
-    0% { left:0;}
-	75% { left:-720px; opacity:100;}
-	100% { left:-960px; opacity:0; display:none;}
-}
-@keyframes mubu_dh_1 {
-    0% { left:0;}
-	75% { left:-720px; opacity:100;}
-	100% { left:-960px; opacity:0; display:none;}
-}
-@-webkit-keyframes mubu_dh_2 {
-    0% { right:0;}
-	75% { right:-720px; opacity:100;}
-	100% { right:-960px; opacity:0; display:none;}
-}
-@keyframes mubu_dh_2 {
-    0% { right:0;}
-	75% { right:-720px; opacity:100;}
-	100% { right:-960px; opacity:0; display:none;}
-}
-.mubu .yanhua2 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_1.png) no-repeat 0 0; position:absolute; top:450px; left:70%; animation: fireworksfn 5s linear infinite;-webkit-animation: fireworksfn 3s linear infinite;-moz-animation: fireworksfn 3s linear infinite;-ms-animation: fireworksfn 3s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
-.mubu .yanhua3 {width: 100px;height: 100px; display:block; overflow: hidden;background: url(../images/mubu_yh_2.png) no-repeat 0 0; position:absolute; top:350px; left:30%; animation: fireworksfn 4s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 4s linear infinite;-ms-animation: fireworksfn 4s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
-.mubu .yanhua4 {width: 70px;height: 70px; display:block; overflow: hidden;background: url(../images/nyear-wwwa5.png) no-repeat -6px -1px; position:absolute; top:400px; left:50%; animation: fireworksfn 3s linear infinite;-webkit-animation: fireworksfn 4s linear infinite;-moz-animation: fireworksfn 5s linear infinite;-ms-animation: fireworksfn 5s linear infinite;-o-animation: fireworksfn 1.5s infinite;}
-}
-
-/*�̻�*/
-@keyframes fireworksfn{
-	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
-	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
-	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
-	}
-@-moz-keyframes fireworksfn{
-	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
-	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
-	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
-	}
-@-webkit-keyframes fireworksfn{
-	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
-	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
-	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
-	}
-@-o-keyframes fireworksfn{
-	0%{opacity:1;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
-	50%{opacity:1;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}
-	100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}
-	}

src/views/live/hall/hall.vue

@@ -1,573 +1,321 @@
 <template>
   <div id="hall" style="background-color: #fff">
     <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">
-					<div class="livemain">
-						<div class="livevideo">
-							<div class="left">
-								<p class="title"><span style="color:#FF8400">现场</span><span>直播</span></p>
-								<div class="video">
-									直播换面
-								</div>
-							</div>
-							<div class="right">
-								<p><span>交易实况</span></p>
-								<div class="videoTitle">
-									<ul>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-										<li>
-											<span>[09:16:00]</span>
-											<span>中科院宁波先进制造所</span>
-											<span>与</span>
-											<span>深圳市华尔威体育用品</span>
-											<span>实现对接</span>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="liveMainImage">
-							<img :src="img.main1">
-						</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">
-													<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>
-												<li class="oneLi">
-													<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>
-												<li class="oneLi">
-													<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>
-												<li class="oneLi">
-													<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">
-													<a href="">
-														<p>寻求疫后创伤抗抑郁药药物的需求</p>
-														<p>
-															<span>行业分类：医药与医疗-生物医药</span>
-															<span>发布时间：2020-03-31</span>
-														</p>
-														<p>
-															<span>需求类型：技术难题解决</span>
-															<span>吉林省长春市</span>
-														</p>
-													</a>
-												</li>
-												<li class="twoLi">
-													<a href="">
-														<p>寻求疫后创伤抗抑郁药药物的需求</p>
-														<p>
-															<span>行业分类：医药与医疗-生物医药</span>
-															<span>发布时间：2020-03-31</span>
-														</p>
-														<p>
-															<span>需求类型：技术难题解决</span>
-															<span>吉林省长春市</span>
-														</p>
-													</a>
-												</li>
-												<li class="twoLi">
-													<a href="">
-														<p>寻求疫后创伤抗抑郁药药物的需求</p>
-														<p>
-															<span>行业分类：医药与医疗-生物医药</span>
-															<span>发布时间：2020-03-31</span>
-														</p>
-														<p>
-															<span>需求类型：技术难题解决</span>
-															<span>吉林省长春市</span>
-														</p>
-													</a>
-												</li>
-												<li class="twoLi">
-													<a href="">
-														<p>寻求疫后创伤抗抑郁药药物的需求</p>
-														<p>
-															<span>行业分类：医药与医疗-生物医药</span>
-															<span>发布时间：2020-03-31</span>
-														</p>
-														<p>
-															<span>需求类型：技术难题解决</span>
-															<span>吉林省长春市</span>
-														</p>
-													</a>
-												</li>
-												<li class="twoLi">
-													<a href="">
-														<p>寻求疫后创伤抗抑郁药药物的需求</p>
-														<p>
-															<span>行业分类：医药与医疗-生物医药</span>
-															<span>发布时间：2020-03-31</span>
-														</p>
-														<p>
-															<span>需求类型：技术难题解决</span>
-															<span>吉林省长春市</span>
-														</p>
-													</a>
-												</li>
-												<li class="twoLi">
-													<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">
-													<p>长春福瑞科技有限公司</p>
-													<p>
-														<img :src="img.logo20">
-														<button type="button">立即咨询</button>
-														<span>服务类型：</span>
-														<span class="type">科技服务</span>
-													</p>
-													<a href="">进入主页</a>
-												</li>
-												<li class="threeLi">
-													<p>长春福瑞科技有限公司</p>
-													<p>
-														<img :src="img.logo20">
-														<button type="button">立即咨询</button>
-														<span>服务类型：</span>
-														<span class="type">科技服务</span>
-													</p>
-													<a href="">进入主页</a>
-												</li>
-												<li class="threeLi">
-													<p>长春福瑞科技有限公司</p>
-													<p>
-														<img :src="img.logo20">
-														<button type="button">立即咨询</button>
-														<span>服务类型：</span>
-														<span class="type">科技服务</span>
-													</p>
-													<a href="">进入主页</a>
-												</li>
-												<li class="threeLi">
-													<p>长春福瑞科技有限公司</p>
-													<p>
-														<img :src="img.logo20">
-														<button type="button">立即咨询</button>
-														<span>服务类型：</span>
-														<span class="type">科技服务</span>
-													</p>
-													<a href="">进入主页</a>
-												</li>
-												<li class="threeLi">
-													<p>长春福瑞科技有限公司</p>
-													<p>
-														<img :src="img.logo20">
-														<button type="button">立即咨询</button>
-														<span>服务类型：</span>
-														<span class="type">科技服务</span>
-													</p>
-													<a href="">进入主页</a>
-												</li>
-												<li class="threeLi">
-													<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">
-													<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>
-												<li class="fourLi">
-													<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>
-												<li class="fourLi">
-													<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>
-												<li class="fourLi">
-													<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>
-												<li class="fourLi">
-													<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>
-												<li class="fourLi">
-													<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>
-							</div>
-						</div>
-						<div class="fangtan">
-							<div class="jiabin">
-								<p class="jiabintop">
-									<span>嘉宾访谈</span>
-									<a href="">MORE</a>
-								</p>
-								<div class="jiabinlist">
-									<ul>
-										<li>
-											<img :src="img.img" >
-											<p>
-												<span  class="textOver">访谈标题</span>
-												<span>2020-02-02 10:00</span>
-												<span class="text">区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区 </span>
-											</p>
-										</li>
-										<li>
-											<img :src="img.img" >
-											<p>
-												<span  class="textOver">访谈标题</span>
-												<span>2020-02-02 10:00</span>
-												<span>区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区 </span>
-											</p>
-										</li>
-										<li>
-											<img :src="img.img" >
-											<p>
-												<span class="textOver">访谈标题</span>
-												<span>2020-02-02 10:00</span>
-												<span>区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区我国已将区 </span>
-											</p>
-										</li>
-										<li>
-											<img :src="img.img" >
-											<p>
-												<span class="textOver">访谈标题</span>
-												<span>2020-02-02 10:00</span>
-												<span>区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区 </span>
-											</p>
-										</li>
-									</ul>
-								</div>
-							</div>
-							<div class="jiabin luyan">
-								<p class="jiabintop luyanTop">
-									<span>项目路演</span>
-									<a href="">MORE</a>
-								</p>
-								<div class="luyanList">
-									<ul>
-										<li>
-											<p>
-												<span>项目路演</span>
-												<span>浏览:1234</span>
-											</p>
-											<p>
-												<span>所在地区：江苏省 | 所属行业：其他行业</span>
-												<span>项目融资方式：股权融资</span>
-											</p>
-										</li>
-										<li>
-											<p>
-												<span>项目路演</span>
-												<span>浏览:1234</span>
-											</p>
-											<p>
-												<span>所在地区：江苏省 | 所属行业：其他行业</span>
-												<span>项目融资方式：股权融资</span>
-											</p>
-										</li>
-										<li>
-											<p>
-												<span>项目路演</span>
-												<span>浏览:1234</span>
-											</p>
-											<p>
-												<span>所在地区：江苏省 | 所属行业：其他行业</span>
-												<span>项目融资方式：股权融资</span>
-											</p>
-										</li>
-										<li>
-											<p>
-												<span>项目路演</span>
-												<span>浏览:1</span>
-											</p>
-											<p>
-												<span>所在地区：江苏省 | 所属行业：其他行业</span>
-												<span>项目融资方式：股权融资</span>
-											</p>
-										</li>
-										<li>
-											<p>
-												<span>项目路演</span>
-												<span>浏览:1234</span>
-											</p>
-											<p>
-												<span>所在地区：江苏省 | 所属行业：其他行业</span>
-												<span>项目融资方式：股权融资</span>
-											</p>
-										</li>
-									</ul>
-								</div>
-							</div>
-							<div class="chat">
-								<p class="luyanTop">
-									<span>公共聊天</span>
-									<span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
-									<span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>发贺信</span>
-								</p>
-								<div class="chatList">
-									<ul>
-										<li>
-											<p><span>[10:00:00]</span><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span></p>
-										</li>
-										<li>
-											<p><span>[10:00:00]</span><span style="font-weight: bold;">测试人：</span><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span></p>
-										</li>
-									</ul>
-									<div class="input">
-										<input type="text" name="" id="" value="" />
-										<button type="button">发送</button>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</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 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">
+          <div class="livemain">
+            <div class="livevideo">
+              <div class="left">
+                <p class="title"><span style="color:#FF8400">现场</span><span>直播</span></p>
+                <div class="video">
+                  直播换面
+                </div>
+              </div>
+              <div class="right">
+                <p><span>交易实况</span></p>
+                <div class="videoTitle">
+                  <ul>
+                    <li v-for="i in 10" :key="i">
+                      <span>[09:16:00]</span>
+                      <span>中科院宁波先进制造所</span>
+                      <span>与</span>
+                      <span>深圳市华尔威体育用品</span>
+                      <span>实现对接</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="liveMainImage">
+              <img :src="img.main1" />
+            </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>
+              </div>
+            </div>
+            <div class="fangtan">
+              <div class="jiabin">
+                <p class="jiabintop">
+                  <span>嘉宾访谈</span>
+                  <a href="">MORE</a>
+                </p>
+                <div class="jiabinlist">
+                  <ul>
+                    <li>
+                      <img :src="img.img" />
+                      <p>
+                        <span class="textOver">访谈标题</span>
+                        <span>2020-02-02 10:00</span>
+                        <span class="text"
+                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
+                        </span>
+                      </p>
+                    </li>
+                    <li>
+                      <img :src="img.img" />
+                      <p>
+                        <span class="textOver">访谈标题</span>
+                        <span>2020-02-02 10:00</span>
+                        <span
+                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
+                        </span>
+                      </p>
+                    </li>
+                    <li>
+                      <img :src="img.img" />
+                      <p>
+                        <span class="textOver">访谈标题</span>
+                        <span>2020-02-02 10:00</span>
+                        <span
+                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区我国已将区
+                        </span>
+                      </p>
+                    </li>
+                    <li>
+                      <img :src="img.img" />
+                      <p>
+                        <span class="textOver">访谈标题</span>
+                        <span>2020-02-02 10:00</span>
+                        <span
+                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
+                        </span>
+                      </p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="jiabin luyan">
+                <p class="jiabintop luyanTop">
+                  <span>项目路演</span>
+                  <a href="">MORE</a>
+                </p>
+                <div class="luyanList">
+                  <ul>
+                    <li>
+                      <p>
+                        <span>项目路演</span>
+                        <span>浏览:1234</span>
+                      </p>
+                      <p>
+                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
+                        <span>项目融资方式：股权融资</span>
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        <span>项目路演</span>
+                        <span>浏览:1234</span>
+                      </p>
+                      <p>
+                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
+                        <span>项目融资方式：股权融资</span>
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        <span>项目路演</span>
+                        <span>浏览:1234</span>
+                      </p>
+                      <p>
+                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
+                        <span>项目融资方式：股权融资</span>
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        <span>项目路演</span>
+                        <span>浏览:1</span>
+                      </p>
+                      <p>
+                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
+                        <span>项目融资方式：股权融资</span>
+                      </p>
+                    </li>
+                    <li>
+                      <p>
+                        <span>项目路演</span>
+                        <span>浏览:1234</span>
+                      </p>
+                      <p>
+                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
+                        <span>项目融资方式：股权融资</span>
+                      </p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="chat">
+                <p class="luyanTop">
+                  <span>公共聊天</span>
+                  <span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
+                  <span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>发贺信</span>
+                </p>
+                <div class="chatList">
+                  <ul>
+                    <li>
+                      <p><span>[10:00:00]</span><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span></p>
+                    </li>
+                    <li>
+                      <p>
+                        <span>[10:00:00]</span><span style="font-weight: bold;">测试人：</span
+                        ><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span>
+                      </p>
+                    </li>
+                  </ul>
+                  <div class="input">
+                    <input type="text" name="" id="" value="" />
+                    <button type="button">发送</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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>
 
@@ -579,7 +327,7 @@ export default {
   components: {},
   data: () => {
     return {
-      img:{
+      img: {
         main1: require('@/assets/live/main1.png'),
         main2: require('@/assets/live/main2.png'),
         logo20: require('@/assets/live/logo20.png'),

src/views/live/hall/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="index">
-    <iframe width="100%" style="height:99vh" frameborder="0" src="/static/liveIndex.html"></iframe>
+    <iframe width="100%" style="height:99vh;" frameborder="0" src="/static/liveIndex.html"></iframe>
   </div>
 </template>
 
@@ -16,9 +16,7 @@ export default {
       height: '1000px',
     };
   },
-  mounted() {
-    console.log('in function:');
-  },
+  mounted() {},
   created() {},
   methods: {},
   computed: {

src/views/live/market/index.vue

@@ -10,21 +10,15 @@
             </div>
             <div class="superoneInfo">
               <ul>
-                <li>
+                <li v-for="(i, index) in tecList" :key="index">
                   <p>
-                    <span class="textOver">海洋牧场建设，海洋生物活性物质制备</span>
-                    <span>2020-04-05</span>
+                    <span class="textOver">{{ i.name }}</span>
+                    <span>{{ i | getDate }}</span>
                   </p>
-                  <p>类型：技术类</p>
-                  <p>价格：<span>1000</span> 元</p>
-                </li>
-                <li>
+                  <p>类型：{{ i.product_type_name }}</p>
                   <p>
-                    <span class="textOver">四条数据</span>
-                    <span>2020-04-05</span>
+                    价格：<span>{{ i.price }}</span> 元/{{ i.priceunit }}
                   </p>
-                  <p>类型：技术类</p>
-                  <p>价格：<span>1000</span> 元</p>
                 </li>
               </ul>
             </div>
@@ -67,26 +61,15 @@
               <span class="more">MORE</span>
             </div>
             <div class="superThreeInfo">
-              <ul>
+              <ul v-for="(i, index) in serviceList" :key="index">
                 <li>
                   <img :src="img" />
                   <div>
-                    <p>长春市福瑞科技有限公司</p>
-                    <p>服务类型：技术咨询</p>
+                    <p>{{ i.name }}</p>
+                    <p>服务类型：{{ i.product_type_name }}</p>
                     <p>
-                      <button type="button">立即咨询</button>
-                      <button type="button">进入主页</button>
-                    </p>
-                  </div>
-                </li>
-                <li>
-                  <img :src="img" />
-                  <div>
-                    <p>四条数据</p>
-                    <p>服务类型：技术咨询</p>
-                    <p>
-                      <button type="button">立即咨询</button>
-                      <button type="button">进入主页</button>
+                      <!-- <button type="button">立即咨询</!-->
+                      <!-- <button type="button">进入主页</button> -->
                     </p>
                   </div>
                 </li>
@@ -110,32 +93,18 @@
               <span class="more">MORE</span>
             </div>
             <div class="superFiveInfo">
-              <ul>
-                <li>
-                  <img :src="img" />
-                  <div>
-                    <p>产品名称</p>
-                    <p>
-                      <span class="textOver">所属企业：长春福瑞科技有限公司</span>
-                      <span>认证状态：已认证</span>
-                    </p>
-                    <p>
-                      <span>产品类别：LS</span>
-                      <span>上架时间：2020-02-02</span>
-                    </p>
-                  </div>
-                </li>
+              <ul v-for="(i, index) in productList" :key="index">
                 <li>
                   <img :src="img" />
                   <div>
-                    <p>八条数据</p>
+                    <p>{{ i.name }}</p>
                     <p>
-                      <span class="textOver">所属企业：长春福瑞科技有限公司</span>
-                      <span>认证状态：未认证</span>
+                      <span class="textOver">所属企业：{{ i.contact_user }}</span>
+                      <span>认证状态：{{ i.state == '1' ? '已认证' : '未认证' }}</span>
                     </p>
                     <p>
-                      <span>产品类别：LS</span>
-                      <span>上架时间：2020-02-02</span>
+                      <span>产品类别：{{ i.product_type_name }}</span>
+                      <span>上架时间：{{ i | getDate }}</span>
                     </p>
                   </div>
                 </li>
@@ -251,7 +220,10 @@
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
+import _ from 'lodash';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
+var moment = require('moment');
 export default {
   name: 'index',
   props: {},
@@ -259,10 +231,31 @@ export default {
   data: () => {
     return {
       img: require('@/assets/live/测试图片.jpg'),
+      tecList: [], // 技术,0
+      productList: [], //产品,1
+      serviceList: [], //服务,2
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  methods: {
+    ...product(['query']),
+    async search() {
+      let res = await this.query({ skip: 0, limit: 4, totaltype: '0' });
+      if (this.$checkRes(res)) this.$set(this, `tecList`, res.data);
+      res = await this.query({ skip: 0, limit: 4, totaltype: '1' });
+      if (this.$checkRes(res)) this.$set(this, `productList`, res.data);
+      res = await this.query({ skip: 0, limit: 4, totaltype: '2' });
+      if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
+    },
+  },
+  filters: {
+    getDate(data) {
+      let date = _.get(data, 'meta.createdAt');
+      if (date) return moment(date).format('YYYY-MM-DD');
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {

vue.config.js

@@ -58,7 +58,7 @@ module.exports = {
         // pathRewrite: { '^/api/affairs': '/api' },
       },
       '/api/market': {
-        target: 'http://127.0.0.1:9004',
+        target: 'http://10.16.10.72:9004',
         changeOrigin: true,
         ws: true,
         // pathRewrite: { '^/api/affairs': '/api' },