Ver Fonte

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

wuhongyu há 5 anos atrás
pai
commit
f658ffd5d7

BIN
src/assets/live/menu_back.jpg


+ 1 - 1
src/layout/live/head.vue

@@ -76,7 +76,7 @@ export default {
       if (type == 'index') {
         console.log('首页未出');
       } else if (type == 'hall_index') this.$router.push({ path: '/live/hall/index' });
-      else this.$router.push({ path: `/${type}` });
+      else this.$router.push({ path: `/${type}/index` });
     },
     isTab(type) {
       if (type == 'index') return this.$route.path.includes('/live/index');

+ 24 - 6
src/router/index.js

@@ -9,16 +9,34 @@ const live = [
     component: () => import('../views/index.vue'),
     children: [
       {
-        path: '/market',
-        name: 'market',
+        path: '/market/index',
+        name: 'market_index',
         meta: { title: '科技超市', subSite: true },
-        component: () => import('../views/market.vue'),
+        component: () => import('../views/market/index.vue'),
       },
       {
-        path: '/technical',
-        name: 'technical',
+        path: '/dynamic/index',
+        name: 'dynamic_index',
+        meta: { title: '动态监测', subSite: true },
+        component: () => import('../views/dynamic/index.vue'),
+      },
+      {
+        path: '/dynamic/list',
+        name: 'dynamic_list',
+        meta: { title: '动态监测列表', subSite: true },
+        component: () => import('../views/dynamic/list.vue'),
+      },
+      {
+        path: '/technical/index',
+        name: 'technical_index',
         meta: { title: '技术培训', subSite: true },
-        component: () => import('../views/technical.vue'),
+        component: () => import('../views/technical/index.vue'),
+      },
+      {
+        path: '/technical/list',
+        name: 'technical_list',
+        meta: { title: '技术培训列表', subSite: true },
+        component: () => import('../views/technical/list.vue'),
       },
       {
         path: '/kejipeixun/index',

+ 234 - 0
src/views/dynamic/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div id="index">
+    <el-col :span="24" class="main">
+      <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="infoLeft">
+          <el-table :data="resultTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('展示成果')">MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('达成意愿')">MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoRight">
+          <el-table :data="willTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>达<br />成<br />意<br />愿</p>
+        </el-col>
+      </el-col>
+      <el-col :span="24">
+        <el-image :src="dongtaiImage" class="dongtaiImage"></el-image>
+      </el-col>
+      <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="infoRight">
+          <el-table :data="cooperationTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('洽谈合作')">MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('发布需求')">MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoLeft">
+          <el-table :data="demandTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>发<br />布<br />需<br />求</p>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({
+    dongtaiImage: require('@/assets/live/main2.png'),
+    resultTable: [
+      { time: '2020-5-10', name: '测试项目名称测试项目名称', sell_unit: '营销单位营销单位', buy_unit: '采购单位采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    willTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    cooperationTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    demandTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    turnToList(column_name) {
+      this.$router.push({ path: '/dynamic/list', query: { column_name: column_name } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dongtaiImage {
+  width: 100%;
+  height: 100%;
+}
+.main {
+  width: 80%;
+  margin: 5px auto;
+  float: none;
+}
+.left {
+  float: left;
+  height: 500px;
+  margin: 10px 0 10px 0;
+  overflow: hidden;
+}
+.leftTitle {
+  text-align: center;
+  position: relative;
+}
+.leftTitle p:first-child {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.leftTitle p:last-child {
+  float: left;
+  width: 2px;
+  height: 402px;
+  background-color: #044b79;
+  margin: 0 5px;
+  position: absolute;
+  left: 9px;
+}
+.infoLeft {
+  height: 480px;
+  padding: 0 10px;
+}
+.leftListDown {
+  position: relative;
+}
+.leftListDown span:first-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  left: -10px;
+  top: 10px;
+}
+.leftListDown span:last-child {
+  font-size: 16px;
+  float: right;
+  padding: 0 15px 0 0;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.right {
+  float: right;
+  height: 500px;
+  overflow: hidden;
+  margin: 10px 0 10px 0;
+}
+.rightListTop {
+  position: relative;
+}
+.rightListTop span:first-child {
+  font-size: 16px;
+  float: left;
+  padding: 0 0 0 15px;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.rightListTop span:last-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  right: -10px;
+  top: 10px;
+}
+.infoRight {
+  height: 480px;
+  padding: 0 10px;
+}
+.rightTitle {
+  text-align: center;
+}
+.rightTitle p:first-child {
+  width: 2px;
+  height: 370px;
+  background: #044b79;
+  position: relative;
+  left: 10px;
+  top: -20px;
+}
+.rightTitle p:last-child {
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+}
+/deep/.el-table td {
+  text-align: center;
+  padding: 0;
+  height: 40px;
+}
+/deep/.el-table th {
+  text-align: center;
+  padding: 0;
+  height: 40px;
+}
+/deep/ .el-table {
+  // min-height: 500px;
+  margin: 0 10px 10px 10px;
+  top: 10px;
+}
+</style>

+ 268 - 0
src/views/dynamic/list.vue

@@ -0,0 +1,268 @@
+<template>
+  <div id="list">
+    <el-col :span="24" class="main">
+      <el-col :span="5" class="menu">
+        <el-image :src="squareImage"></el-image>
+        <span>Menu</span>
+        <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+          <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '0'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-table :data="resultTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '1'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-table :data="willTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '2'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-table :data="cooperationTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '3'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-table :data="demandTable" stripe style="width: 96%" border>
+            <el-table-column prop="time" label="时间"> </el-table-column>
+            <el-table-column prop="name" label="项目名称" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="sell_unit" label="营销单位" show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="buy_unit" label="采购单位" show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  props: {},
+  components: {},
+  data: () => ({
+    squareImage: require('@/assets/live/square_big.png'),
+    menuList: [{ name: '展示成果' }, { name: '达成意愿' }, { name: '洽谈合作' }, { name: '发布需求' }],
+    menuIndex: '0',
+    menuName: '展示成果',
+    menuColor: 'rgb(254, 149, 14)',
+    currentPage: 1,
+    resultTable: [
+      { time: '2020-5-10', name: '测试项目名称测试项目名称', sell_unit: '营销单位营销单位', buy_unit: '采购单位采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    willTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    cooperationTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+    demandTable: [
+      { time: '2020-5-10', name: '测试项目名称', sell_unit: '营销单位', buy_unit: '采购单位' },
+      { time: '2020-5-10', name: '十条数据', sell_unit: '营销单位', buy_unit: '采购单位' },
+    ],
+  }),
+  created() {
+    this.searchList();
+  },
+  computed: {},
+  methods: {
+    async searchList({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.$route.query.column_name == '展示成果') {
+        this.changeMenu(this.$route.query.column_name, 0);
+      } else if (this.$route.query.column_name == '达成意愿') {
+        this.changeMenu(this.$route.query.column_name, 1);
+      } else if (this.$route.query.column_name == '洽谈合作') {
+        this.changeMenu(this.$route.query.column_name, 2);
+      } else if (this.$route.query.column_name == '发布需求') {
+        this.changeMenu(this.$route.query.column_name, 3);
+      }
+    },
+    changeMenu(name, index) {
+      console.log(name);
+      console.log(index);
+      this.menuIndex = index;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.menuName = name;
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 80%;
+  margin: 5px auto;
+  float: none;
+}
+.menu {
+  float: left;
+  height: 450px;
+  width: 20%;
+  background: no-repeat bottom right;
+  background-image: url(../../assets/live/menu_back.jpg);
+  margin: 10px 0;
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #bbbaba;
+}
+.menu .el-image {
+  width: 30px;
+  display: inline-table;
+  margin: 10px 5px;
+}
+.menu span {
+  font-size: 24px;
+  color: #92959a;
+  font-weight: 600;
+  margin-left: 3px;
+  position: relative;
+  top: 10px;
+}
+.menuList p {
+  line-height: 60px;
+  font-size: 18px;
+  cursor: pointer;
+  border-bottom: 1px solid #2d64b3;
+  color: #044b79;
+  font-weight: 600;
+}
+.info {
+  width: 77%;
+  float: right;
+  margin: 10px 0 10px 2px;
+  height: 585px;
+  box-shadow: 0 0 10px #2d64b3;
+  overflow: hidden;
+  right: 0px;
+  background: #ffffff;
+}
+.leftInfo {
+  height: 500px;
+  overflow: hidden;
+}
+.leftTop {
+  font-size: 18px;
+  width: 96%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px;
+  font-weight: 600;
+  color: #22529a;
+}
+.page {
+  text-align: center;
+  margin: 10px 0;
+}
+/deep/.el-table td {
+  text-align: center;
+  padding: 0;
+  height: 38px;
+}
+/deep/.el-table th {
+  text-align: center;
+  padding: 0;
+  height: 40px;
+}
+/deep/ .el-table {
+  // min-height: 500px;
+  margin: 0 10px 10px 10px;
+  top: 10px;
+}
+</style>

+ 0 - 119
src/views/market.vue

@@ -1,119 +0,0 @@
-<template>
-  <el-row>
-    <el-col class="main">
-      <el-col :span="24">
-        <el-image :src="superOne" style="margin:10px 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 in productList" :key="item.name">
-              <el-image :src="item.image[0].url"></el-image>
-              <p>{{ item.name }}</p>
-            </el-col>
-          </el-col>
-        </el-col>
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-export default {
-  name: 'market',
-  props: {},
-  components: {},
-  data: () => ({
-    superOne: require('@/assets/live/main2.png'),
-    productList: [
-      { name: '浮台式水质监测系统', image: [{ url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2715796529,1359347299&fm=26&gp=0.jpg' }] },
-      {
-        name: '摄影无人机',
-        image: [
-          {
-            url:
-              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587962054329&di=3a9930b7e5a83db61fba036ac7a5dc03&imgtype=0&src=http%3A%2F%2Fimg1.juimg.com%2F160618%2F330830-16061QQF646.jpg',
-          },
-        ],
-      },
-      {
-        name: '水上大型载货游轮',
-        image: [
-          {
-            url:
-              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587962011329&di=f01d3682fa964d134b1802aafcff3b2d&imgtype=0&src=http%3A%2F%2Fwww.people.com.cn%2Fmediafile%2Fpic%2F20150114%2F36%2F15561862656200381244.jpg',
-          },
-        ],
-      },
-    ],
-  }),
-  created() {
-    this.initaaa();
-  },
-  computed: {},
-  methods: {
-    async initaaa() {
-      console.log(this.superOne);
-
-      console.log(this.productList);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  width: 80%;
-  margin: 0 auto;
-  float: none;
-}
-.left {
-  height: 500px;
-  margin: 0 20px 0 0;
-}
-.leftTitle {
-  text-align: center;
-  position: relative;
-}
-.leftTitle p:first-child {
-  font-size: 18px;
-  color: #044b79;
-  font-weight: bold;
-}
-.leftTitle p:last-child {
-  float: left;
-  width: 2px;
-  height: 402px;
-  background-color: #044b79;
-  margin: 0 5px;
-  position: absolute;
-  left: 9px;
-}
-.leftList .productList {
-  position: relative;
-  margin: 0 10px 10px 0;
-  width: 282px;
-  height: 220px;
-}
-.leftList .productList:nth-child(2n) {
-  margin: 0 0 10px 0;
-}
-.leftList .productList .el-image {
-  width: 200px;
-  height: 220px;
-}
-.leftList .productList p {
-  position: absolute;
-  text-align: left;
-  bottom: 0;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 10px;
-  background: #044b799f;
-  color: #fff;
-  width: 180px;
-  font-size: 18px;
-}
-</style>

+ 152 - 0
src/views/market/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div id="index">
+    <el-col :span="24" class="main">
+      <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="infoLeft"> </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoRight"> </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>达<br />成<br />意<br />愿</p>
+        </el-col>
+      </el-col>
+      <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="infoRight"> </el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
+        <el-col :span="23" class="infoLeft"> </el-col>
+        <el-col :span="1" class="rightTitle">
+          <p></p>
+          <p>发<br />布<br />需<br />求</p>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 80%;
+  margin: 5px auto;
+  float: none;
+}
+.left {
+  float: left;
+  height: 500px;
+  margin: 10px 0 10px 0;
+  overflow: hidden;
+}
+.leftTitle {
+  text-align: center;
+  position: relative;
+}
+.leftTitle p:first-child {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.leftTitle p:last-child {
+  float: left;
+  width: 2px;
+  height: 402px;
+  background-color: #044b79;
+  margin: 0 5px;
+  position: absolute;
+  left: 9px;
+}
+.infoLeft {
+  height: 480px;
+  padding: 0 10px;
+}
+.leftListDown {
+  position: relative;
+}
+.leftListDown span:first-child {
+  display: inline-block;
+  width: 400px;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  left: -10px;
+  top: 10px;
+}
+.leftListDown span:last-child {
+  font-size: 16px;
+  float: right;
+  padding: 0 15px 0 0;
+  color: #044b79;
+  font-weight: 700;
+}
+.right {
+  float: right;
+  height: 500px;
+  overflow: hidden;
+  margin: 10px 0 10px 0;
+}
+.rightListTop {
+  position: relative;
+}
+.rightListTop span:first-child {
+  font-size: 16px;
+  float: left;
+  padding: 0 0 0 15px;
+  color: #044b79;
+  font-weight: 700;
+}
+.rightListTop span:last-child {
+  display: inline-block;
+  width: 400px;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  right: -10px;
+  top: 10px;
+}
+.infoRight {
+  height: 480px;
+  padding: 0 10px;
+}
+.rightTitle {
+  text-align: center;
+}
+.rightTitle p:first-child {
+  width: 2px;
+  height: 370px;
+  background: #044b79;
+  position: relative;
+  left: 10px;
+  top: -20px;
+}
+.rightTitle p:last-child {
+  font-size: 18px;
+  font-weight: bold;
+  color: #044b79;
+}
+</style>

+ 25 - 11
src/views/technical.vue

@@ -7,7 +7,7 @@
           <p></p>
         </el-col>
         <el-col :span="23" class="infoLeft">
-          <el-col class="infoLeftList" :span="24" v-for="item in zhuantiList" :key="item.title">
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
             <p>{{ item.publish_time }}</p>
             <p>
               <span class="textOver">{{ item.title }}</span>
@@ -15,12 +15,12 @@
             </p>
           </el-col>
         </el-col>
-        <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('专题研讨')">MORE</span></el-col>
       </el-col>
       <el-col :span="12" class="right">
-        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('技术问答')">MORE</span><span></span></el-col>
         <el-col :span="23" class="infoRight">
-          <el-col class="infoRightList" :span="24" v-for="item in jishuList" :key="item.title">
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in jishuList" :key="index">
             <p>
               <span class="textOver">{{ item.title }}</span
               ><span class="textOver">{{ item.publish_time }}</span>
@@ -32,25 +32,28 @@
           <p>技<br />术<br />问<br />答</p>
         </el-col>
       </el-col>
+      <el-col :span="24">
+        <el-image :src="jishuImage" class="jishuImage"></el-image>
+      </el-col>
       <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="infoRight">
-          <el-col class="infoRightList" :span="24" v-for="item in hangyeList" :key="item.title">
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
             <p>
               <span class="textOver">{{ item.title }}</span
               ><span class="textOver">{{ item.publish_time }}</span>
             </p>
           </el-col>
         </el-col>
-        <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
+        <el-col :span="24" class="leftListDown"><span></span><span @click="turnToList('行业研究')">MORE</span></el-col>
       </el-col>
       <el-col :span="12" class="right">
-        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
+        <el-col :span="24" class="rightListTop"><span @click="turnToList('教育培训')">MORE</span><span></span></el-col>
         <el-col :span="23" class="infoLeft">
-          <el-col class="infoLeftList" :span="24" v-for="item in jiaoyuList" :key="item.title">
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
             <p>{{ item.publish_time }}</p>
             <p>
               <span class="textOver">{{ item.title }}</span>
@@ -73,6 +76,7 @@ export default {
   props: {},
   components: {},
   data: () => ({
+    jishuImage: require('@/assets/live/main2.png'),
     zhuantiList: [
       {
         publish_time: '2020-05-01',
@@ -126,11 +130,19 @@ export default {
   }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    turnToList(column_name) {
+      this.$router.push({ path: '/technical/list', query: { column_name: column_name } });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
+.jishuImage {
+  width: 100%;
+  height: 100%;
+}
 .main {
   width: 80%;
   margin: 5px auto;
@@ -231,7 +243,7 @@ export default {
 }
 .leftListDown span:first-child {
   display: inline-block;
-  width: 400px;
+  width: 80%;
   height: 3px;
   background: rgba(4, 75, 121, 0.37);
   margin: 0 10px 0 0;
@@ -245,6 +257,7 @@ export default {
   padding: 0 15px 0 0;
   color: #044b79;
   font-weight: 700;
+  cursor: pointer;
 }
 .right {
   float: right;
@@ -261,10 +274,11 @@ export default {
   padding: 0 0 0 15px;
   color: #044b79;
   font-weight: 700;
+  cursor: pointer;
 }
 .rightListTop span:last-child {
   display: inline-block;
-  width: 400px;
+  width: 80%;
   height: 3px;
   background: rgba(4, 75, 121, 0.37);
   margin: 0 10px 0 0;

+ 381 - 0
src/views/technical/list.vue

@@ -0,0 +1,381 @@
+<template>
+  <div id="list">
+    <el-col :span="24" class="main">
+      <el-col :span="5" class="menu">
+        <el-image :src="squareImage"></el-image>
+        <span>Menu</span>
+        <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+          <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '0'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '1'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
+            <p>
+              <span class="textOver">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '2'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
+            <p>
+              <span class="textOver">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+      <el-col v-if="menuIndex == '3'" :span="19" class="info">
+        <el-col class="leftInfo">
+          <el-col :span="24" class="leftTop">
+            <span>|</span> <span>{{ menuName }}</span>
+          </el-col>
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col class="page">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total,prev, pager, next, jumper"
+            :total="1000"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  props: {},
+  components: {},
+  data: () => ({
+    squareImage: require('@/assets/live/square_big.png'),
+    menuList: [{ name: '专题研讨' }, { name: '技术问答' }, { name: '行业研究' }, { name: '教育培训' }],
+    menuIndex: '0',
+    menuName: '专题研讨',
+    menuColor: 'rgb(254, 149, 14)',
+    currentPage: 1,
+    zhuantiList: [
+      {
+        publish_time: '2020-05-01',
+        title: '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束',
+        content:
+          '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束',
+      },
+      { publish_time: '2020-05-01', title: '五条数据', content: '五条数据' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+    ],
+    jishuList: [
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '十条数据' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+    ],
+    hangyeList: [
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '十条数据' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束' },
+    ],
+    jiaoyuList: [
+      {
+        publish_time: '2020-05-01',
+        title: '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束',
+        content: '第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束第六届创新创业大赛总决赛圆满结束',
+      },
+      { publish_time: '2020-05-01', title: '六条数据', content: '六条数据' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+      { publish_time: '2020-05-01', title: '第六届创新创业大赛总决赛圆满结束', content: '第六届创新创业大赛总决赛圆满结束' },
+    ],
+  }),
+  created() {
+    this.searchList();
+  },
+  computed: {},
+  methods: {
+    async searchList({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.$route.query.column_name == '专题研讨') {
+        this.changeMenu(this.$route.query.column_name, 0);
+      } else if (this.$route.query.column_name == '技术问答') {
+        this.changeMenu(this.$route.query.column_name, 1);
+      } else if (this.$route.query.column_name == '行业研究') {
+        this.changeMenu(this.$route.query.column_name, 2);
+      } else if (this.$route.query.column_name == '教育培训') {
+        this.changeMenu(this.$route.query.column_name, 3);
+      }
+    },
+    changeMenu(name, index) {
+      console.log(name);
+      console.log(index);
+      this.menuIndex = index;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.menuName = name;
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 80%;
+  margin: 5px auto;
+  float: none;
+}
+.menu {
+  float: left;
+  height: 450px;
+  width: 20%;
+  background: no-repeat bottom right;
+  background-image: url(../../assets/live/menu_back.jpg);
+  margin: 10px 0;
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #bbbaba;
+}
+.menu .el-image {
+  width: 30px;
+  display: inline-table;
+  margin: 10px 5px;
+}
+.menu span {
+  font-size: 24px;
+  color: #92959a;
+  font-weight: 600;
+  margin-left: 3px;
+  position: relative;
+  top: 10px;
+}
+.menuList p {
+  line-height: 60px;
+  font-size: 18px;
+  cursor: pointer;
+  border-bottom: 1px solid #2d64b3;
+  color: #044b79;
+  font-weight: 600;
+}
+.info {
+  width: 77%;
+  float: right;
+  margin: 10px 0 10px 2px;
+  height: 585px;
+  box-shadow: 0 0 10px #2d64b3;
+  overflow: hidden;
+  right: 0px;
+  background: #ffffff;
+}
+.leftInfo {
+  height: 500px;
+  overflow: hidden;
+}
+.leftTop {
+  font-size: 18px;
+  width: 96%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px;
+  font-weight: 600;
+  color: #22529a;
+}
+.infoLeftList {
+  float: left;
+  width: 95%;
+  border-bottom: 1px dashed #ccc;
+  padding: 8px 0 8px 0;
+  height: 85px;
+  margin: 0 0 0 5px;
+}
+
+.infoLeftList:last-child {
+  float: left;
+  width: 95%;
+  border-bottom: none;
+  padding: 15px 0 15px 0;
+  height: 80px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList:hover p:last-child span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoLeftList p:first-child {
+  float: left;
+  width: 20%;
+  font-size: 15px;
+  background: #044b79;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  padding: 4px 0px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList p:last-child {
+  float: right;
+  width: 70%;
+  padding: 0 0 0 10px;
+}
+.infoLeftList p:last-child span:first-child {
+  float: left;
+  width: 90%;
+  font-size: 18px;
+}
+.infoLeftList p:last-child span:last-child {
+  float: left;
+  width: 90%;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 5px 0 0 0;
+  color: #666;
+}
+.page {
+  text-align: center;
+  margin: 10px 0;
+}
+.infoRightList {
+  float: left;
+  width: 95%;
+  padding: 11px 0;
+}
+.infoRightList:nth-child(5n) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 17px 0;
+}
+.infoRightList:nth-child(6) {
+  padding: 11px 0 0 0;
+}
+.infoRightList:hover p span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoRightList p {
+  font-size: 18px;
+}
+.infoRightList p span:first-child {
+  display: inline-block;
+  width: 70%;
+  margin: 0 20px 0 10px;
+}
+.infoRightList p span:last-child {
+  display: inline-block;
+  width: 21%;
+  text-align: center;
+  font-size: 16px;
+}
+</style>