gengxin

public/static/css/style.css

@@ -922,7 +922,7 @@ p {
 	float: left;
 	height: 50px;
 	line-height: 50px;
-	padding: 0 62px;
+	padding: 0 82px;
 	font-size: 20px;
 	border-right: 1px solid #76bdfe;
 }
@@ -937,7 +937,7 @@ p {
 
 .supermenu .info ul li:last-child {
 	border-right: 0;
-	padding: 0 67px;
+	padding: 0 70px;
 }
 
 /* 科技超市主体开始 */

src/layout/live/head.vue

@@ -20,19 +20,21 @@
       </div>
       <div class="superlogo">
         <div class="w_1200">
-          <img :src="logo" />
-          <span>
-            吉林省计算机中心科技平台
-          </span>
+          <a href="home">
+            <img :src="logo" />
+            <span>
+              吉林省计算机中心科技平台
+            </span>
+          </a>
         </div>
       </div>
       <div class="supermenu">
         <div class="w_1200">
           <div class="info">
             <ul>
-              <li :class="isTab('index') ? 'active' : ''">
+              <!-- <li :class="isTab('index') ? 'active' : ''">
                 <a @click="turnTo('home')" target="">首页</a>
-              </li>
+              </li> -->
               <li class="">
                 <a @click="turnTo('hall_index')">直播大厅</a>
               </li>

src/store/index.js

@@ -24,6 +24,7 @@ import tranaudit from './tranaudit';
 import chat from './chat';
 import dock from './dock';
 import apply from './apply';
+import talentExperts from './talentExperts';
 
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
@@ -56,6 +57,7 @@ export default new Vuex.Store({
     chat,
     dock,
     apply,
+    talentExperts,
   },
   state: { ...ustate },
   mutations: { ...umutations },

src/store/talentExperts.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  expertsInfo: `/api/talent/experts`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.expertsInfo}`, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.expertsInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.expertsInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.expertsInfo}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.expertsInfo}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/style/style.css

@@ -922,7 +922,7 @@ p {
 	float: left;
 	height: 50px;
 	line-height: 50px;
-	padding: 0 62px;
+	padding: 0 82px;
 	font-size: 20px;
 	border-right: 1px solid #76bdfe;
 }
@@ -937,11 +937,11 @@ p {
 
 .supermenu .info ul li:last-child {
 	border-right: 0;
-	padding: 0 67px;
+	padding: 0 70px;
 }
 
 /* 科技超市主体开始 */
-.supermain {}
+/* .supermain {}
 
 .supermain .superOne {
 	float: left;
@@ -1229,7 +1229,7 @@ p {
 	float: left;
 	width: 35%;
 	text-align: center;
-}
+} */
 
 /* 科技超市主体结束 */
 .superdown {

src/views/live/market/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="index">
     <div class="w_0100">
-      <div class="w_1200">
-        <div class="supermain">
-          <div class="superOne">
+      <div class="supermain">
+        <div class="w_1200">
+          <!-- <div class="superOne">
             <div class="superOneTop">
               <span style="margin: 10px;">技术</span>
               <span class="more">MORE</span>
@@ -68,8 +68,6 @@
                     <p>{{ i.name }}</p>
                     <p>服务类型：{{ i.product_type_name }}</p>
                     <p>
-                      <!-- <button type="button">立即咨询</!-->
-                      <!-- <button type="button">进入主页</button> -->
                     </p>
                   </div>
                 </li>
@@ -110,110 +108,83 @@
                 </li>
               </ul>
             </div>
-          </div>
-          <!-- <div class="super_right">
-							<div class="technical_left_title"><span style="margin: 10px;">专家</span><span class="more">MORE</span></div>
-							<ul>
-								<li class="super_expert">
-									<span><img class="expert_img" :src="img"></span>
-									<span class="expert_name">张三</span>
-									<span class="expert_addr"><i class="iconfont icon-address" style="margin: 5px;"></i>吉林长春</span>
-									<div class="expert_possion">从事领域：<span>化工生产，日用化学，合成化学，涂料、颜料、油墨化工生产，日用化学，合成化学，涂料、颜料、油墨</span></div>
-									<div class="expert_possion">擅长能力：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="expert_img" :src="img"></span>
-									<span class="expert_name">张三</span>
-									<span class="expert_addr"><i class="iconfont icon-address"></i>吉林长春</span>
-									<div class="expert_possion">从事领域：<span>化工生产，日用化学，合成化学，涂料、颜料、油墨化工生产，日用化学，合成化学，涂料、颜料、油墨</span></div>
-									<div class="expert_possion">擅长能力：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="expert_img" :src="img"></span>
-									<span class="expert_name">张三</span>
-									<span class="expert_addr"><i class="iconfont icon-address"></i>吉林长春</span>
-									<div class="expert_possion">从事领域：<span>化工生产，日用化学，合成化学，涂料、颜料、油墨化工生产，日用化学，合成化学，涂料、颜料、油墨</span></div>
-									<div class="expert_possion">擅长能力：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="expert_img" :src="img"></span>
-									<span class="expert_name">张三</span>
-									<span class="expert_addr"><i class="iconfont icon-address"></i>吉林长春</span>
-									<div class="expert_possion">从事领域：<span>化工生产，日用化学，合成化学，涂料、颜料、油墨化工生产，日用化学，合成化学，涂料、颜料、油墨</span></div>
-									<div class="expert_possion">擅长能力：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-							</ul>
-						</div>
-						<div class="super_left">
-							<div class="technical_left_title"><span style="margin: 10px;">服务</span><span class="more">MORE</span></div>
-							<ul>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="service_name">长春市福瑞科技有限公司</span>
-									<span class="service_type">服务类型:<span>技术咨询</span></span>
-									<span class="service_button"><i class="iconfont icon-xiaoxi"></i>立即咨询</span>
-									<span class="service_button"><i class="iconfont icon-zhuye3"></i>进入主页</span>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="service_name">长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司</span>
-									<span class="service_type">服务类型:<span>技术咨询</span></span>
-									<span class="service_button"><i class="iconfont icon-xiaoxi"></i>立即咨询</span>
-									<span class="service_button"><i class="iconfont icon-zhuye3"></i>进入主页</span>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="service_name">长春市福瑞科技有限公司</span>
-									<span class="service_type">服务类型:<span>技术咨询</span></span>
-									<span class="service_button"><i class="iconfont icon-xiaoxi"></i>立即咨询</span>
-									<span class="service_button"><i class="iconfont icon-zhuye3"></i>进入主页</span>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="service_name">长春市福瑞科技有限公司</span>
-									<span class="service_type">服务类型:<span>技术咨询</span></span>
-									<span class="service_button"><i class="iconfont icon-xiaoxi"></i>立即咨询</span>
-									<span class="service_button"><i class="iconfont icon-zhuye3"></i>进入主页</span>
-								</li>
-							</ul>
-						</div>
-						<div class="super_right">
-							<div class="technical_left_title"><span style="margin: 10px;">资金</span><span class="more">MORE</span></div>
-						</div>
-						<div class="super_left">
-							<div class="technical_left_title"><span style="margin: 10px;">产品</span><span class="more">MORE</span></div>
-							<ul>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="expert_name">家用空调净化器</span>
-									<span class="expert_addr">2020-04-26</span>
-									<div class="product_company">所属企业：<span>长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司</span></div>
-									<div class="product_company">类别：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="expert_name">家用空调净化器</span>
-									<span class="expert_addr">2020-04-26</span>
-									<div class="product_company">所属企业：<span>长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司</span></div>
-									<div class="product_company">类别：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="expert_name">家用空调净化器</span>
-									<span class="expert_addr">2020-04-26</span>
-									<div class="product_company">所属企业：<span>长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司</span></div>
-									<div class="product_company">类别：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-								<li class="super_expert">
-									<span><img class="service_img" :src="img"></span>
-									<span class="expert_name">家用空调净化器</span>
-									<span class="expert_addr">2020-04-26</span>
-									<div class="product_company">所属企业：<span>长春市福瑞科技有限公司长春市福瑞科技有限公司长春市福瑞科技有限公司</span></div>
-									<div class="product_company">类别：<span>化工产品的研究、开发，企业管理化工产品的研究、开发，企业管理</span></div>
-								</li>
-							</ul>
-						</div> -->
+          </div> -->
+          <el-col :span="24" class="superOne">
+            <el-image :src="superOne" style="margin:0 0 30px 0;"></el-image>
+            <el-col :span="12" class="left">
+              <el-col :span="1" class="leftTitle">
+                <p>科<br />技<br />产<br />品</p>
+                <p></p>
+              </el-col>
+              <el-col :span="23" class="leftList">
+                <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index">
+                  <el-image :src="item.image[0].url"></el-image>
+                  <p>{{ item.name }}</p>
+                </el-col>
+                <el-col :span="24" class="leftListDown">
+                  <span></span>
+                  <a href="">MORE</a>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="rightTop">
+                <a href="">MORE</a>
+                <span></span>
+              </el-col>
+              <el-col :span="23" class="rightList">
+                <el-col :span="24" class="tecList" v-for="(item, index) in tecList" :key="index">
+                  <span></span>
+                  <span>{{ item.name }}</span>
+                  <span>{{ item.meta | getDate }}</span>
+                </el-col>
+              </el-col>
+              <el-col :span="1" class="rightTitle">
+                <p></p>
+                <p>技<br />术<br />供<br />求</p>
+              </el-col>
+            </el-col>
+          </el-col>
         </div>
+        <el-col :span="24" class="superTwo">
+          <div class="w_1200">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="leftTop">
+                <span>服务供求</span>
+                <a href="">MORE</a>
+              </el-col>
+              <el-col :span="24" class="leftList">
+                <el-col :span="24" class="serviceList" v-for="(item, index) in serviceList" :key="index">
+                  <el-image :src="item.image[0].url"></el-image>
+                  <p>
+                    <span>{{ item.name }}</span>
+                    <span>{{ item.introduction }}</span>
+                  </p>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              功能开发中
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="superThree">
+          <div class="w_1200">
+            <el-image :src="zhuanjia" style="margin:0 0 20px 0;"></el-image>
+          </div>
+          <el-col :span="24" class="superThreeList">
+            <div class="w_1200">
+              <el-col :span="6" class="expertsList" v-for="(item, index) in expertsList" :key="index">
+                <el-image :src="item.imgpath"></el-image>
+                <p class="name">{{ item.name }}</p>
+                <p>从事领域：{{ item.field }}</p>
+                <p>
+                  {{ item.job_profile }}
+                </p>
+              </el-col>
+            </div>
+          </el-col>
+        </el-col>
       </div>
     </div>
   </div>
@@ -223,6 +194,7 @@
 import _ from 'lodash';
 import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: product } = createNamespacedHelpers('marketproduct');
+const { mapActions: talentExperts } = createNamespacedHelpers('talentExperts');
 var moment = require('moment');
 export default {
   name: 'index',
@@ -230,17 +202,74 @@ export default {
   components: {},
   data: () => {
     return {
-      img: require('@/assets/live/测试图片.jpg'),
+      superOne: require('@/assets/live/main2.png'),
+      zhuanjia: require('@/assets/live/main3.png'),
       tecList: [], // 技术,0
       productList: [], //产品,1
-      serviceList: [], //服务,2
+      serviceList: [
+        {
+          name: 'niasofsald',
+          introduction: 'askdalsfd',
+          image: [
+            {
+              url: require('@/assets/live/测试图片.jpg'),
+            },
+          ],
+        },
+        {
+          name: 'niasofsald',
+          introduction: 'askdalsfd',
+          image: [
+            {
+              url: require('@/assets/live/测试图片.jpg'),
+            },
+          ],
+        },
+        {
+          name: 'niasofsald',
+          introduction: 'askdalsfd',
+          image: [
+            {
+              url: require('@/assets/live/测试图片.jpg'),
+            },
+          ],
+        },
+      ], //服务,2
+      expertsList: [
+        {
+          imgpath: require('@/assets/live/测试图片.jpg'),
+          name: '测试人',
+          field: '从事领域',
+          job_profile: '从事领域从事领域从事领域从事领域从事领域从事领域从事领域从事领域',
+        },
+        {
+          imgpath: require('@/assets/live/测试图片.jpg'),
+          name: '测试人',
+          field: '从事领域',
+          job_profile: '从事领域从事领域从事领域从事领域从事领域从事领域从事领域从事领域',
+        },
+        {
+          imgpath: require('@/assets/live/测试图片.jpg'),
+          name: '测试人',
+          field: '从事领域',
+          job_profile: '从事领域从事领域从事领域从事领域从事领域从事领域从事领域从事领域',
+        },
+        {
+          imgpath: require('@/assets/live/测试图片.jpg'),
+          name: '测试人',
+          field: '从事领域',
+          job_profile: '从事领域从事领域从事领域从事领域从事领域从事领域从事领域从事领域',
+        },
+      ],
     };
   },
   created() {
     this.search();
+    // this.searchExperts();
   },
   methods: {
     ...product(['query']),
+    ...talentExperts({ expertQuery: 'query' }),
     async search() {
       let res = await this.query({ skip: 0, limit: 4, totaltype: '0' });
       if (this.$checkRes(res)) this.$set(this, `tecList`, res.data);
@@ -248,12 +277,18 @@ export default {
       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);
+      res = await this.expertQuery({ skip: 0, limit: 4 });
+      console.log(res);
     },
   },
   filters: {
-    getDate(data) {
-      let date = _.get(data, 'meta.createdAt');
-      if (date) return moment(date).format('YYYY-MM-DD');
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
     },
   },
   computed: {
@@ -268,4 +303,249 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.supermain {
+  margin: 50px 0;
+}
+.superOne {
+  margin: 0 0 20px 0;
+}
+.superOne .left {
+  height: 500px;
+  margin: 0 20px 0 0;
+}
+.superOne .left .leftTitle {
+  text-align: center;
+  position: relative;
+}
+.superOne .left .leftTitle p:first-child {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.superOne .left .leftTitle p:last-child {
+  float: left;
+  width: 2px;
+  height: 402px;
+  background-color: #044b79;
+  margin: 0 5px;
+  position: absolute;
+  left: 9px;
+}
+.superOne .leftList .productList {
+  position: relative;
+  margin: 0 10px 10px 0;
+  width: 282px;
+  height: 220px;
+}
+.superOne .leftList .productList:nth-child(2n) {
+  margin: 0 0 10px 0;
+}
+.superOne .leftList .productList .el-image {
+  width: 269px;
+  height: 220px;
+}
+.superOne .leftList .productList p {
+  position: absolute;
+  text-align: left;
+  bottom: 0;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 10px;
+  background: #044b799f;
+  color: #fff;
+  width: 250px;
+  font-size: 18px;
+}
+.superOne .leftList .leftListDown {
+  position: relative;
+}
+.superOne .leftList .leftListDown span {
+  display: inline-block;
+  width: 490px;
+  height: 2px;
+  background: #044b795f;
+  margin: 0 10px 0 0;
+  position: absolute;
+  left: -30px;
+  top: 10px;
+}
+.superOne .leftList .leftListDown a {
+  font-size: 16px;
+  float: right;
+  padding: 0 15px 0 0;
+  color: #044b79;
+  font-weight: bold;
+}
+.superOne .right {
+  width: 580px;
+  height: 500px;
+  overflow: hidden;
+}
+.superOne .right .rightTop {
+  height: 30px;
+  line-height: 30px;
+}
+.superOne .right .rightTop a {
+  display: inline-block;
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+  padding: 0 10px;
+}
+.superOne .right .rightTop span {
+  display: inline-block;
+  width: 500px;
+  height: 1px;
+  background-color: #044b795f;
+  position: relative;
+  top: -5px;
+}
+.superOne .right .rightList {
+  height: 468px;
+  overflow: hidden;
+  margin: 10px 0 0 0px;
+}
+.superOne .right .rightList .tecList {
+  padding: 0 15px;
+  margin: 0 0 20px 0;
+}
+.superOne .right .rightList .tecList span:first-child {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: #044b79;
+  border-radius: 90px;
+}
+.superOne .right .rightList .tecList span:nth-child(2n) {
+  display: inline-block;
+  width: 363px;
+  font-size: 18px;
+  padding: 0 15px;
+}
+.superOne .right .rightList .tecList span:last-child {
+  display: inline-block;
+  width: 120px;
+  text-align: center;
+  font-size: 18px;
+}
+.superOne .right .rightTitle {
+  text-align: center;
+}
+.superOne .right .rightTitle p:first-child {
+  width: 2px;
+  height: 370px;
+  background: #044b79;
+  position: relative;
+  left: 10px;
+  top: -20px;
+}
+.superOne .right .rightTitle p:last-child {
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+}
+.superTwo {
+  height: 500px;
+  overflow: hidden;
+  margin: 0 0 20px 0;
+  background: #e9edf6;
+}
+.superTwo .left {
+  height: 500px;
+}
+.superTwo .left .leftTop {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 2px solid #044b79;
+  margin: 0 15px;
+  width: 95%;
+}
+.superTwo .left .leftTop span {
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+  padding: 0 10px;
+}
+.superTwo .left .leftTop a {
+  float: right;
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+}
+.superTwo .left .leftList {
+  margin: 15px 0 0 0;
+}
+.superTwo .left .leftList .serviceList {
+  float: left;
+  width: 95%;
+  margin: 0px 15px 15px 15px;
+}
+.superTwo .left .leftList .serviceList .el-image {
+  float: left;
+  width: 250px;
+  height: 133px;
+}
+.superTwo .left .leftList .serviceList p {
+  float: left;
+  width: 55%;
+}
+.superTwo .left .leftList .serviceList p span:first-child {
+  float: left;
+  width: 100%;
+  font-size: 18px;
+  padding: 0 0 0 10px;
+  color: #044b79;
+  font-weight: bold;
+}
+.superTwo .left .leftList .serviceList p span:last-child {
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  float: left;
+  padding: 0 0 0 10px;
+  color: #666;
+  line-height: 25px;
+}
+.superTwo .right {
+  border: 1px solid #044b79;
+  height: 500px;
+}
+.superThree {
+  min-height: 500px;
+  overflow: hidden;
+  margin: 0 0 20px 0;
+}
+.superThree .superThreeList {
+  height: 350px;
+  overflow: hidden;
+}
+.superThree .superThreeList .expertsList {
+  border: 1px solid red;
+  margin: 0 15px 0 0;
+  width: 288px;
+}
+.superThree .superThreeList .expertsList:last-child {
+  margin: 0;
+}
+.superThree .superThreeList .expertsList .el-image {
+  width: 100%;
+  height: 220px;
+}
+.superThree .superThreeList .expertsList p {
+  padding: 0 10px 10px 10px;
+  font-size: 14px;
+}
+.superThree .superThreeList .expertsList .name {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.superThree .superThreeList .expertsList p:last-child {
+  line-height: 25px;
+}
+</style>

vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
         // pathRewrite: { '^/api/affairs': '/api' },
       },
       '/api/talent': {
-        target: 'http://10.16.10.72:9000',
+        target: 'http://10.16.10.72:9008',
         changeOrigin: true,
         ws: true,
         // pathRewrite: { '^/api/affairs': '/api' },