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

src/components/service/service.vue

@@ -16,10 +16,14 @@
       </el-col>
       <el-col :span="24" class="main">
         <div class="w_1200">
-          <el-col :span="8" class="video">视频会议中心</el-col>
-          <el-col :span="16" class="zhuanti">专题研讨</el-col>
+          <el-col :span="8" class="video">
+            <videoInfo :videoList="videoList"></videoInfo>
+          </el-col>
+          <el-col :span="16" class="zhuanti">
+            <zhuanti :zhuantiList="zhuantiList"></zhuanti>
+          </el-col>
           <el-col :span="24" class="changyong">
-            常用服务
+            <changyong :changyongList="changyongList"></changyong>
           </el-col>
         </div>
       </el-col>
@@ -36,16 +40,25 @@
 import top from '@/layout/index/top.vue';
 import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
+import videoInfo from '@/layout/service/video.vue';
+import zhuanti from '@/layout/service/zhuanti.vue';
+import changyong from '@/layout/service/changyong.vue';
 import foot from '@/layout/index/foot.vue';
 export default {
   name: 'service',
   props: {
     info: null, //站点信息
+    videoList: null, //视频会议中心
+    zhuantiList: null, //专题研讨，技术问答，行业研究，科技培训
+    changyongList: null, //常用服务
   },
   components: {
     top, //头部
     logo, //logo
     menuInfo, //导航
+    videoInfo, //视频会议中心
+    zhuanti, //专题研讨，技术问答，行业研究，科技培训
+    changyong, //常用服务
     foot, //底部
   },
   data: () => ({}),

src/layout/service/changyong.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="changyong">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="20" class="left">{{ title }}</el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li v-for="(item, index) in changyongList" :key="index">
+              <el-link :underline="false" :href="item.url">
+                <el-image style="width:349px;height:100px;" :src="item.pic"></el-image>
+              </el-link>
+            </li>
+          </ul>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'changyong',
+  props: {
+    changyongList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '常用服务',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.info {
+  width: 100%;
+  height: 390px;
+  overflow: hidden;
+  padding: 20px;
+  background-color: #fff;
+}
+.topInfo {
+  height: 30px;
+  line-height: 30px;
+  margin: 0 0 10px 0;
+}
+.topInfo .left {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+}
+.topInfo .more {
+  height: 30px;
+  text-align: right;
+  padding: 6px 0;
+}
+.list {
+  height: 330px;
+  overflow: hidden;
+}
+.list ul li {
+  float: left;
+  width: 380px;
+  height: 100px;
+  margin: 0 10px 10px 0;
+}
+.list ul li:nth-child(3n) {
+  margin: 0 0 10px 0;
+}
+</style>

src/layout/service/video.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="video">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="20" class="left">{{ title }}</el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li v-for="(item, index) in videoList" :key="index">
+              <el-link :underline="false">
+                <span class="date textOver">{{ item.date }}</span>
+                <span class="title textOver">{{ item.title }}</span>
+              </el-link>
+            </li>
+          </ul>
+          <el-col :span="24" class="more">
+            <el-link :underline="false">进入视频中心></el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'video',
+  props: {
+    videoList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '视频会议中心',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  padding: 20px;
+  background-color: #fff;
+}
+.topInfo {
+  height: 30px;
+  line-height: 30px;
+  margin: 0 0 10px 0;
+}
+.topInfo .left {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+}
+.topInfo .more {
+  height: 30px;
+  text-align: right;
+  padding: 6px 0;
+}
+.list {
+  height: 220px;
+  overflow: hidden;
+}
+.list ul {
+  height: 190px;
+  overflow: hidden;
+  padding: 0 0 0 20px;
+}
+.list ul li {
+  padding: 0 0 6px 0;
+}
+.list ul li .date {
+  display: inline-block;
+  width: 90px;
+  text-align: left;
+  font-size: 16px;
+  color: #60626e;
+  margin: 0 20px 0 0;
+}
+.list ul li .title {
+  display: inline-block;
+  font-size: 16px;
+  color: #60626e;
+  width: 230px;
+}
+.list ul li:hover .date {
+  color: #215299;
+}
+.list ul li:hover .title {
+  color: #215299;
+}
+.more {
+  height: 30px;
+  line-height: 25px;
+  text-align: center;
+  background: #f5f5f5;
+}
+.more .el-link {
+  font-size: 16px;
+  color: #60626e;
+}
+</style>

src/layout/service/zhuanti.vue

@@ -0,0 +1,121 @@
+<template>
+  <div id="zhuanti">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-tabs type="border-card">
+          <el-tab-pane v-for="(item, index) in zhuantiList" :key="index">
+            <span slot="label">{{ item.title }}</span>
+            <el-col :span="24" class="list">
+              <ul>
+                <li class="zhuantiList" v-for="(tag, index) in item.children" :key="index">
+                  <el-col :span="20" class="title textOver">{{ tag.title }}</el-col>
+                  <el-col :span="4" class="date textOver">{{ tag.date }}</el-col>
+                </li>
+              </ul>
+              <el-col class="more" :span="24"><el-link :underline="false">查看更多</el-link></el-col>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zhuanti',
+  props: {
+    zhuantiList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  padding: 20px;
+  height: 300px;
+  overflow: hidden;
+}
+/deep/.el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+/deep/.el-tabs--border-card > .el-tabs__header {
+  background-color: transparent;
+  border-bottom: none;
+  margin: 0 0 10px 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #2c3350;
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+/deep/.el-tabs__item {
+  padding: 0 15px 0 0;
+  font-size: 22px;
+  font-weight: bold;
+}
+/deep/.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2) {
+  padding-left: 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+.list {
+  height: 220px;
+  overflow: hidden;
+}
+.list ul {
+  min-height: 30px;
+  max-height: 180px;
+  overflow: hidden;
+  padding: 0 0 0 20px;
+}
+.list ul li {
+  padding: 0 0 9px 0;
+}
+.list ul li .date {
+  display: inline-block;
+  width: 90px;
+  text-align: left;
+  font-size: 16px;
+  color: #60626e;
+}
+.list ul li .title {
+  display: inline-block;
+  font-size: 16px;
+  color: #60626e;
+  width: 610px;
+  margin: 0 20px 0 0;
+}
+.list ul li:hover .date {
+  color: #215299;
+}
+.list ul li:hover .title {
+  color: #215299;
+}
+.more {
+  height: 30px;
+  line-height: 25px;
+  text-align: center;
+  background: #f5f5f5;
+}
+.more .el-link {
+  font-size: 16px;
+  color: #60626e;
+}
+</style>

src/views/service/service.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="service">
-    <service-detail :info="info"></service-detail>
+    <service-detail :info="info" :videoList="videoList" :zhuantiList="zhuantiList" :changyongList="changyongList"></service-detail>
   </div>
 </template>
 
@@ -23,6 +23,108 @@ export default {
       phone: '电话：0431-1234567',
       email: '邮箱：123456@163.com',
     },
+    videoList: [
+      {
+        date: '2019-01-02',
+        title: '标题',
+      },
+      {
+        date: '2019-01-02',
+        title: '六条数据',
+      },
+    ],
+    zhuantiList: [
+      {
+        title: '专题研讨',
+        children: [
+          {
+            title: '专题研讨',
+            date: '2019-01-02',
+          },
+          {
+            title: '六条数据',
+            date: '2019-01-02',
+          },
+        ],
+      },
+      {
+        title: '技术问答',
+        children: [
+          {
+            title: '技术问答',
+            date: '2019-01-02',
+          },
+          {
+            title: '六条数据',
+            date: '2019-01-02',
+          },
+        ],
+      },
+      {
+        title: '行业研究',
+        children: [
+          {
+            title: '行业研究',
+            date: '2019-01-02',
+          },
+          {
+            title: '六条数据',
+            date: '2019-01-02',
+          },
+        ],
+      },
+      {
+        title: '科技培训',
+        children: [
+          {
+            title: '科技培训',
+            date: '2019-01-02',
+          },
+          {
+            title: '六条数据',
+            date: '2019-01-02',
+          },
+        ],
+      },
+    ],
+    changyongList: [
+      {
+        url: '',
+        pic: require('@/assets/zscqfw1.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw2.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw3.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw4.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw5.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw6.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw7.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw8.png'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/zscqfw9.png'),
+      },
+    ],
   }),
   created() {},
   computed: {},