合并

src/components/policy/policy.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="policy">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="fenlei">
+            <fenlei></fenlei>
+          </el-col>
+          <el-col :span="19" class="rightcont">
+            <rightcont :zongheList="zongheList" :contentList="contentList"></rightcont>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+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/policy/fenlei.vue';
+import rightcont from '@/layout/policy/rightcont.vue';
+
+export default {
+  name: 'policy',
+  props: {
+    info: null, //站点信息
+    zongheList: null, //标题
+    contentList: null, //内容
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    fenlei, //左边分类
+    rightcont, //右边栏
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+.main {
+  min-height: 600px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .fenlei {
+  float: left;
+  width: 240px;
+  min-height: 600px;
+  margin: 0 10px 0 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.main .rightcont {
+  float: left;
+  width: 950px;
+  min-height: 600px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.main .link {
+  float: left;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/policy/fenlei.vue

@@ -0,0 +1,67 @@
+<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-item index="7"><span slot="title">政策解读</span></el-menu-item>
+        <el-menu-item index="8"><span slot="title">政策书籍</span></el-menu-item>
+        <el-menu-item index="9"><span slot="title">政策报告</span></el-menu-item>
+        <el-menu-item index="10"><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/policy/rightcont.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="rightcont">
+    <el-col class="zhengce">
+      <el-col :span="24" class="topTitle">
+        {{ zongheList.title }}
+      </el-col>
+      <el-col :span="24" class="info">
+        <ul>
+          <li v-for="(item, index) in contentList" :key="index">
+            <el-col :span="21" class="title textOver">{{ item.title }}</el-col>
+            <el-col :span="3" class="date">{{ item.date }}</el-col>
+          </li>
+        </ul>
+        <el-col class="page" :span="24">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage4"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="2"
+            layout="total,  prev, pager, next, jumper"
+            :total="20"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'rightcont',
+  props: {
+    zongheList: null,
+    contentList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #a8abb7;
+}
+.zhengce {
+  height: 660px;
+  padding: 20px;
+  overflow: hidden;
+}
+.topTitle {
+  font-size: 22px;
+  color: #22529a;
+  margin: 0 0 20px 0;
+}
+.title {
+  font-size: 16px;
+  color: #60636d;
+}
+
+.date {
+  font-size: 16px;
+  color: #a8abb7;
+}
+.info {
+  height: 570px;
+  overflow: hidden;
+}
+.info ul {
+  height: 510px;
+  overflow: hidden;
+  padding: 0 0 0 20px;
+}
+.info ul li {
+  float: left;
+  width: 100%;
+  padding: 0 0 13px 0;
+}
+.info ul li .date {
+  text-align: right;
+}
+.page {
+  height: 50px;
+  text-align: center;
+}
+</style>

src/router/index.js

@@ -75,6 +75,12 @@ const routes = [
     name: 'personnel',
     component: () => import('../views/personnel/personnel.vue'),
   },
+  // 科技政策
+  {
+    path: '/policy/policy',
+    name: 'policy',
+    component: () => import('../views/policy/policy.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/policy/policy.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="policy">
+    <policy-detail :info="info" :zongheList="zongheList" :contentList="contentList"></policy-detail>
+  </div>
+</template>
+
+<script>
+import policyDetail from '@/components/policy/policy.vue';
+export default {
+  name: 'policy',
+  props: {},
+  components: {
+    policyDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+    zongheList: {
+      title: '综合指导政策',
+    },
+    contentList: [
+      {
+        title: '标题',
+        date: '2019-01-01',
+      },
+      {
+        title: '14条数据',
+        date: '2019-01-01',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>