更新数据

src/components/shuju/shuju.vue

@@ -17,8 +17,8 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="16" class="leftcont">
-            <el-col :span="5" class="fenlei">分类</el-col>
-            <el-col :span="19" class="between">数据展示</el-col>
+            <el-col :span="5" class="fenlei"> <fenlei></fenlei></el-col>
+            <el-col :span="19" class="between"><zhanshi :zhanshiList="zhanshiList"></zhanshi></el-col>
             <el-col :span="24" class="gonggao">通知公告</el-col>
           </el-col>
           <el-col class="rightCont">
@@ -45,17 +45,21 @@ import top from '@/layout/index/top.vue';
 import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
 import foot from '@/layout/index/foot.vue';
-
+import fenlei from '@/layout/shuju/fenlei.vue';
+import zhanshi from '@/layout/shuju/zhanshi.vue';
 export default {
   name: 'shuju',
   props: {
     info: null, //站点信息
+    zhanshiList: null,
   },
   components: {
     top, //头部
     logo, //logo
     menuInfo, //导航
     foot, //底部
+    fenlei, //左侧分类
+    zhanshi, //数据展示
   },
   data: () => ({}),
   created() {},

src/layout/shuju/fenlei.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="fenlei">
+    <el-col class="swfl">
+      <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
+      <span>分类导航</span>
+    </el-col>
+    <el-col>
+      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+        <el-menu-item index="1"><span slot="title">科技文献</span></el-menu-item>
+        <el-menu-item index="2"><span slot="title">科技报告</span></el-menu-item>
+        <el-menu-item index="3"><span slot="title">科技期刊</span></el-menu-item>
+        <el-menu-item index="4"><span slot="title">科技智库</span></el-menu-item>
+        <el-menu-item index="5"><span slot="title">科技成果</span></el-menu-item>
+        <el-menu-item index="6"><span slot="title">科技交易</span></el-menu-item>
+      </el-menu>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fenlei',
+  props: {},
+  components: {},
+  data: () => ({
+    src: require('@/assets/swfl.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swfl {
+  height: 60px;
+  width: 240px;
+  line-height: 60px;
+  background-color: #22529a;
+  text-align: center;
+}
+.swfl span {
+  font-size: 22px;
+  color: #ffffff;
+}
+/deep/.el-menu-item {
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border-bottom: 1px dashed;
+  font-size: 22px;
+}
+/deep/.el-menu-item:last-child {
+  border-bottom: none;
+}
+</style>

src/layout/shuju/zhanshi.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="zhanshi">
+    <el-col class="zhanshi">
+      <el-col :span="24" class="topTitle">
+        {{ zhanshiList.title }}
+      </el-col>
+      <el-col>
+        <el-carousel trigger="click" height="380px">
+          <el-carousel-item v-for="item in 4" :key="item">
+            <h3 class="small">{{ item }}</h3>
+          </el-carousel-item>
+        </el-carousel>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zhanshi',
+  props: {
+    zhanshiList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.zhanshi {
+  width: 550px;
+  height: 420px;
+  padding: 20px;
+}
+.topTitle {
+  float: left;
+  background-color: #fff;
+  font-size: 22px;
+  height: 40px;
+  color: #215299;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

src/views/shuju/shuju.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="shuju">
-    <shuju-detail :info="info"></shuju-detail>
+    <shuju-detail :info="info" :zhanshiList="zhanshiList"></shuju-detail>
   </div>
 </template>
 
@@ -23,6 +23,9 @@ export default {
       phone: '电话：0431-1234567',
       email: '邮箱：123456@163.com',
     },
+    zhanshiList: {
+      title: '数据展示',
+    },
   }),
   created() {},
   computed: {},