服务更新

src/layout/service/serviceLeft.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="serviceLeft">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-menu :default-active="path" class="el-menu-vertical-demo" :router="true">
+          <template v-for="(item, index) in subMenu">
+            <template v-if="item.children&&item.children.length>0">
+                <template v-for="(sec) in item.children">
+                  <el-menu-item :index="sec.path" :key="sec.id" v-if="sec.type !== 'url'">{{ sec.title }}</el-menu-item>
+                  <el-menu-item :index="``" :key="sec.id" @click="turnTo(sec.url)" v-else> {{ sec.title }}</el-menu-item>
+                </template>
+            </template>
+            <el-menu-item :index="item.path" :key="index" v-else-if="item.type === 'content'||item.type==='column'">{{ item.title }}</el-menu-item>
+            <el-menu-item :index="`${index}-${subIndex}`" :key="index" @click="turnTo(item.url)" v-else> {{ item.title }}</el-menu-item>
+          </template>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState,mapMutations } from 'vuex';
+export default {
+  name: 'serviceLeft',
+  props: {},
+  components: {},
+  created() {this.getSubMenu()},
+  watch:{
+    path: 'getSubMenu',
+  },
+  computed: {
+    ...mapState(['subMenu']),
+    path(){
+      return this.$route.path;
+    },
+  },
+  methods: {
+    ...mapMutations(['setSubMenu']),
+    getSubMenu(){
+      this.setSubMenu(this.path);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  min-height: 500px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+</style>

src/layout/service/serviceRight.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="serviceRight">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
+            <el-breadcrumb-item>导航一</el-breadcrumb-item>
+            <el-breadcrumb-item>数据列表</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+        <el-col :span="24" class="tabs">
+          <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane v-for="(item, index) in tabsList" :key="index">
+              <span slot="label">{{ item.title }}</span>
+              <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="shiyeList">
+                <el-col :span="20" class="title" @click.native="$router.push({ name: 'detail', params:{id:tag.id} })">
+                  <p class="textOver">{{tag.title}}</p>
+                </el-col>
+                <el-col :span="4" class="time">
+                  {{ tag.publish_time }}
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceRight',
+  props: {
+    tabsList: null,
+  },
+  components: {},
+  data: () => ({
+    activeName: '',
+  }),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main {
+  width: 880px;
+  margin: 0 0 0 20px;
+  min-height: 500px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.top {
+  padding: 15px;
+}
+.tabs {
+  padding: 0 20px;
+}
+/deep/.el-tabs--border-card {
+  background-color: transparent;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+/deep/.el-tabs__item {
+  height: 50px;
+  line-height: 50px;
+  font-size: 20px;
+}
+.shiyeList {
+  padding: 15px;
+  border-bottom: 1px dashed #000;
+}
+.shiyeList:hover {
+  cursor: pointer;
+}
+.shiyeList:hover .title p {
+  color: #336699;
+}
+.shiyeList:hover .time{
+  color: #336699;
+}
+.shiyeList .title p {
+  font-size: 20px;
+}
+.shiyeList .time {
+  font-size: 18px;
+  text-align: right;
+  color: #000;
+}
+</style>

src/views/service/serviceList.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="list">
+    <el-row style="overflow-y: hidden;">
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :topInfo="topInfo" :topInfos="topInfos"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <native></native>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="6">
+            <serviceLeft></serviceLeft>
+          </el-col>
+          <el-col :span="18">
+            <serviceRight :tabsList="tabsList"></serviceRight>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <footinfo :topInfo="topInfo"></footinfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/index/top.vue';
+import native from '../../layout/index/native.vue';
+import serviceLeft from '../../layout/service/serviceLeft.vue';
+import serviceRight from '../../layout/service/serviceRight.vue';
+import footinfo from '../../layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    topInfos: null,//头部
+    topInfo: null,//网络头部
+    tabsList: null,//右侧三级菜单服务列表
+    type: { type: Boolean, default: false }
+  },
+  components: {
+    top,
+    native,
+    serviceLeft,
+    serviceRight,
+    footinfo,
+  },
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 150px;
+}
+.menu {
+  height: 60px;
+}
+.main {
+  min-height: 500px;
+  margin: 20px 0;
+}
+.down {
+  min-height: 100px;
+}
+</style>
+