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

src/router/index.js

@@ -14,6 +14,12 @@ const live = [
         meta: { title: '科技超市', subSite: true },
         component: () => import('../views/market.vue'),
       },
+      {
+        path: '/technical',
+        name: 'technical',
+        meta: { title: '技术培训', subSite: true },
+        component: () => import('../views/technical.vue'),
+      },
       {
         path: '/kejipeixun/index',
         name: 'kejipeixun_index',

src/views/technical.vue

@@ -0,0 +1,332 @@
+<template>
+  <div id="technical">
+    <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 class="infoLeftList" :span="24" v-for="item in zhuantiList" :key="item.title">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </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 class="infoRightList" :span="24" v-for="item in jishuList" :key="item.title">
+            <p>
+              <span class="textOver">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </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 class="infoRightList" :span="24" v-for="item in hangyeList" :key="item.title">
+            <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>
+      <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 class="infoLeftList" :span="24" v-for="item in jiaoyuList" :key="item.title">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </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: 'technical',
+  props: {},
+  components: {},
+  data: () => ({
+    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() {},
+  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;
+}
+.infoLeftList {
+  float: left;
+  width: 95%;
+  border-bottom: 1px dashed #ccc;
+  padding: 8px 0 8px 0;
+  height: 82px;
+  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;
+}
+.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;
+}
+.infoRightList {
+  float: left;
+  width: 95%;
+  padding: 11px 0;
+}
+.infoRightList:nth-child(5) {
+  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;
+}
+.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>

src/views/test.vue

@@ -1,26 +0,0 @@
-<template>
-  <div id="test">
-    <p>test</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'test',
-  props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  methods: {},
-  computed: {
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/test2.vue

@@ -1,19 +0,0 @@
-<template>
-  <div id="test2">
-    <p>test2</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'test2',
-  props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>