更新科技政务

src/components/government/government.vue

@@ -17,22 +17,22 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="12" class="phontoNews">
-            图片新闻
+            <photoNews :photoNews="photoNews"> </photoNews>
           </el-col>
           <el-col :span="12" class="news">
-            新闻
+            <news :chuangxinList="chuangxinList" :guoneiList="guoneiList" :zhengwuList="zhengwuList" :meitiList="meitiList"></news>
           </el-col>
           <el-col :span="8" class="notice">
-            通知公告
+            <notice :tongzhiList="tongzhiList"></notice>
           </el-col>
           <el-col :span="16" class="zhengwu">
-            政务公告
+            <zhengwu :zhengwu="zhengwu"></zhengwu>
           </el-col>
           <el-col :span="24" class="gongzhong">
-            公众参与
+            <gongzhong :gongzhongList="gongzhongList"></gongzhong>
           </el-col>
           <el-col :span="24" class="link">
-            友情链接
+            <linkInfo :linkList="linkList"></linkInfo>
           </el-col>
         </div>
       </el-col>
@@ -50,16 +50,37 @@ 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 photoNews from '@/layout/government/photoNews.vue';
+import news from '@/layout/government/news.vue';
+import notice from '@/layout/government/notice.vue';
+import zhengwu from '@/layout/government/zhengwu.vue';
+import gongzhong from '@/layout/government/gongzhong.vue';
+import linkInfo from '@/layout/index/linkInfo.vue';
 export default {
   name: 'government',
   props: {
     info: null, //站点信息
+    photoNews: null, //图片新闻
+    chuangxinList: null, //科技政务图片旁边新闻
+    guoneiList: null, //科技政务图片旁边国内动态
+    zhengwuList: null, //科技政务图片旁边政务活动
+    meitiList: null, //科技政务图片旁边媒体焦距
+    tongzhiList: null, //通知公告
+    linkList: null, //友情链接
+    zhengwu: null, //政务公开
+    gongzhongList: null, //公众参与
   },
   components: {
     top, //头部
     logo, //logo
     menuInfo, //导航
     foot, //底部
+    photoNews, //科技政务下的图片新闻照片
+    news, //科技政务图片旁边新闻
+    notice, //通知公告
+    zhengwu, //政务公告
+    gongzhong, //公众参与
+    linkInfo, //相关链接
   },
   data: () => ({}),
   created() {},

src/layout/government/gongzhong.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="gongzhong">
+    <el-col :span="24" class="gongzhong">
+      <el-col :span="24" class="title">公众参与</el-col>
+      <el-col class="context" :span="4" v-for="(item, index) in gongzhongList" :key="index">
+        <el-link :underline="false" :href="item.url" target="_blank">
+          <el-image class="image" :src="item.pic"></el-image>
+          <el-col :span="24" class="pic_title">{{ item.title }}</el-col>
+        </el-link>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'gongzhong',
+  props: {
+    gongzhongList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.gongzhong {
+  height: 240px;
+  overflow: hidden;
+  padding: 20px;
+}
+.title {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+  margin: 0 0 10px 0;
+}
+.context {
+  width: 185px;
+  height: 160px;
+  background-color: #f8f8f8;
+  margin-right: 10px;
+  text-align: center;
+  border: 1px solid #dee9f9;
+}
+.context:last-child {
+  margin: 0;
+}
+.pic_title {
+  background-color: #22529a;
+  width: 185px;
+  line-height: 30px;
+  height: 30px;
+  font-size: 16px;
+  color: #fff;
+  margin: 37px 0 0 -1px;
+}
+.context .image {
+  margin: 30px 0 0 0;
+}
+.context:hover {
+  background-color: #dee9f9;
+  color: #3981e5;
+}
+</style>

src/layout/government/news.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="news">
+    <el-col :span="24" class="tab">
+      <el-tabs type="border-card">
+        <el-tab-pane>
+          <span slot="label">创新吉林</span>
+          <el-col :span="24" class="list">
+            <ul>
+              <li class="chuangxinList" v-for="(item, index) in chuangxinList" :key="index">
+                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
+                <el-col :span="4" class="date"> {{ item.date }}</el-col>
+              </li>
+            </ul>
+            <el-col class="more" :span="24">查看更多</el-col>
+          </el-col>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">国内动态</span>
+          <el-col :span="24" class="list">
+            <ul>
+              <li class="chuangxinList" v-for="(item, index) in guoneiList" :key="index">
+                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
+                <el-col :span="4" class="date"> {{ item.date }}</el-col>
+              </li>
+            </ul>
+            <el-col class="more" :span="24">查看更多</el-col>
+          </el-col>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">政务活动</span>
+          <el-col :span="24" class="list">
+            <ul>
+              <li class="chuangxinList" v-for="(item, index) in zhengwuList" :key="index">
+                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
+                <el-col :span="4" class="date"> {{ item.date }}</el-col>
+              </li>
+            </ul>
+            <el-col class="more" :span="24">查看更多</el-col>
+          </el-col>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">媒体焦距</span>
+          <el-col :span="24" class="list">
+            <ul>
+              <li class="chuangxinList" v-for="(item, index) in meitiList" :key="index">
+                <el-col :span="19" class="title textOver">{{ item.title }}</el-col>
+                <el-col :span="4" class="date"> {{ item.date }}</el-col>
+              </li>
+            </ul>
+            <el-col class="more" :span="24">查看更多</el-col>
+          </el-col>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news',
+  props: {
+    chuangxinList: null,
+    guoneiList: null,
+    zhengwuList: null,
+    meitiList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  padding: 0 20px 0 20px;
+  color: #95a3c0;
+}
+.list ul {
+  padding: 0 0 0 20px;
+  max-height: 280px;
+  overflow: hidden;
+}
+.chuangxinList {
+  width: 540px;
+  padding: 0 0 7px 0;
+}
+.list .title {
+  margin: 0 20px 0 0;
+  color: #6d6d77;
+}
+.date {
+  text-align: right;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__header {
+  background-color: transparent;
+  border-bottom: none;
+}
+/deep/.el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+/deep/.el-tabs__item {
+  font-size: 22px;
+  font-weight: bold;
+  height: 60px;
+  line-height: 60px;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #2c3350;
+}
+/deep/.el-tabs__header {
+  padding: 0 20px;
+}
+/deep/.el-tabs__item {
+  padding: 0 20px 0 0;
+}
+/deep/.el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2) {
+  padding-left: 0;
+}
+.more {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #f5f5f5;
+  font-size: 16px;
+  color: #60636d;
+  margin: 10px 0 0 0;
+}
+</style>

src/layout/government/notice.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="notice">
+    <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 :span="4" class="more">
+            <el-link :underline="false"><el-image :src="more"></el-image></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="zixunList" v-for="(item, index) in tongzhiList" :key="index">
+              <el-link :underline="false">
+                <span class="title textOver">{{ item.title }}</span>
+                <span class="date textOver">{{ item.date }}</span>
+              </el-link>
+            </li>
+          </ul>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    tongzhiList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '通知公告',
+    more: require('@/assets/更多.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  width: 100%;
+  height: 320px;
+  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 {
+  padding: 0 0 0 20px;
+  height: 240px;
+  overflow: hidden;
+}
+.list ul {
+  height: 240px;
+  float: left;
+  overflow: hidden;
+}
+.zixunList {
+  padding: 0 0 6px 0;
+}
+.zixunList .title {
+  font-size: 14px;
+  color: #60626e;
+  display: inline-block;
+  width: 230px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+</style>

src/layout/government/photoNews.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="phontoNews">
+    <el-col :span="24" class="info">
+      <el-link :underline="false">
+        <el-image style="width:550px;height:360px;" :src="photoNews.pic"> </el-image>
+        <p>{{ photoNews.title }}</p>
+      </el-link>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'phontoNews',
+  props: {
+    photoNews: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  position: relative;
+  padding: 20px;
+}
+.info p {
+  display: block;
+  width: 540px;
+  height: 30px;
+  background-color: #22529a;
+  color: #fff;
+  position: absolute;
+  bottom: 4px;
+  left: 0px;
+  line-height: 30px;
+  padding: 0 0 0 10px;
+}
+</style>

src/layout/government/zhengwu.vue

@@ -0,0 +1,70 @@
+npm<template>
+  <div id="zhengwu">
+    <el-col :span="24" class="zhengwu">
+      <el-col :span="24" class="title">{{ title }}</el-col>
+      <el-col class="tubiao" :span="6" v-for="(item, index) in zhengwu" :key="index">
+        <el-link :underline="false" :href="item.url" target="_blank">
+          <el-image class="image" :src="item.pic"></el-image>
+          <el-col class="pic_title">{{ item.title }}</el-col>
+        </el-link>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zhengwu',
+  props: {
+    zhengwu: null,
+  },
+  components: {},
+  data: () => ({
+    title: '政务公开',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.zhengwu {
+  padding: 20px 20px 20px 20px;
+  height: 320px;
+}
+.title {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+  margin: 0 0 10px 0;
+}
+.tubiao {
+  border: 1px solid #dee9f9;
+  width: 180px;
+  height: 110px;
+  margin: 0 10px 10px 0;
+  text-align: center;
+}
+.tubiao:nth-child(4n) {
+  margin: 0 10px 10px 0;
+}
+.tubiao .pic_title {
+  display: block;
+  float: left;
+  width: 178px;
+  height: 30px;
+  font-size: 22px;
+  line-height: 30px;
+  text-align: center;
+  color: #3981e5;
+  font-size: 18px;
+}
+.tubiao .image {
+  margin: 20px 0 0 0;
+}
+.tubiao:hover {
+  background-color: #dee9f9;
+  color: #3981e5;
+}
+</style>

src/views/government/government.vue

@@ -1,6 +1,17 @@
 <template>
   <div id="government">
-    <government-detail :info="info"></government-detail>
+    <government-detail
+      :info="info"
+      :photoNews="photoNews"
+      :zhengwu="zhengwu"
+      :chuangxinList="chuangxinList"
+      :guoneiList="guoneiList"
+      :zhengwuList="zhengwuList"
+      :meitiList="meitiList"
+      :tongzhiList="tongzhiList"
+      :gongzhongList="gongzhongList"
+      :linkList="linkList"
+    ></government-detail>
   </div>
 </template>
 
@@ -23,6 +34,154 @@ export default {
       phone: '电话：0431-1234567',
       email: '邮箱：123456@163.com',
     },
+
+    gongzhongList: [
+      {
+        url: 'http://kjt.jl.gov.cn/gzcy/tzxx/',
+        pic: require('@/assets/gk1.png'),
+        title: '厅长信箱',
+      },
+      {
+        url: 'http://kjt.jl.gov.cn/gzcy/zxzx/',
+        pic: require('@/assets/gk2.png'),
+        title: '在线咨询',
+      },
+      {
+        url: 'http://kjt.jl.gov.cn/gzcy/jdts/',
+        pic: require('@/assets/gk3.png'),
+        title: '监督投诉',
+      },
+      {
+        url: 'http://kjt.jl.gov.cn/gzcy/jyxc/',
+        pic: require('@/assets/gk4.png'),
+        title: '建言献策',
+      },
+      {
+        url: 'http://kjt.jl.gov.cn/gzcy/wsdc/',
+        pic: require('@/assets/gk5.png'),
+        title: '网上调查',
+      },
+      {
+        title: '党政资料',
+        url: 'http://139.210.167.203/free-technological-management/PersonalFiles/getPersonalFileList?pageNumber=1',
+        pic: require('@/assets/gk6.png'),
+      },
+    ],
+    photoNews: {
+      pic: require('@/assets/photoNews.jpg'),
+      title: '标题',
+    },
+    zhengwu: [
+      {
+        title: '高企认定',
+        url: 'http://kjt.jl.gov.cn/bsfw/gxjsqyrd/',
+        pic: require('@/assets/zw1.png'),
+      },
+      {
+        title: '成果登记',
+        url: 'http://kjt.jl.gov.cn/bsfw/kjcgdj/',
+        pic: require('@/assets/zw2.png'),
+      },
+      {
+        title: '合同登记',
+        url: 'http://kjt.jl.gov.cn/bsfw/jshtdj/',
+        pic: require('@/assets/zw3.png'),
+      },
+      {
+        title: '计划管理',
+        url: 'http://kjt.jl.gov.cn/bsfw/kjjhxmsb/',
+        pic: require('@/assets/zw4.png'),
+      },
+      {
+        title: '奖励申报',
+        url: 'http://kjt.jl.gov.cn/bsfw/kjjlsb/',
+        pic: require('@/assets/zw5.png'),
+      },
+      {
+        title: '专利申请',
+        url: 'http://kjt.jl.gov.cn/bsfw/zlsq/',
+        pic: require('@/assets/zw6.png'),
+      },
+      {
+        title: '相关下载',
+        url: 'http://kjt.jl.gov.cn/bsfw/xzzx/',
+        pic: require('@/assets/zw7.png'),
+      },
+      {
+        title: '政务信息公开',
+        url: 'http://kjt.jl.gov.cn/xxgk/',
+        pic: require('@/assets/zw8.png'),
+      },
+    ],
+
+    chuangxinList: [
+      {
+        title: '创新吉林',
+        date: '2019-03-06',
+      },
+      {
+        title: '十条数据',
+        date: '2019-03-06',
+      },
+    ],
+    guoneiList: [
+      {
+        title: '国内动态',
+        date: '2019-03-06',
+      },
+      {
+        title: '十条数据',
+        date: '2019-03-06',
+      },
+    ],
+    zhengwuList: [
+      {
+        title: '政务活动',
+        date: '2019-03-06',
+      },
+      {
+        title: '十条数据',
+        date: '2019-03-06',
+      },
+    ],
+    meitiList: [
+      {
+        title: '媒体聚焦',
+        date: '2019-03-06',
+      },
+      {
+        title: '十条数据',
+        date: '2019-03-06',
+      },
+    ],
+    tongzhiList: [
+      {
+        title: '通知公告',
+        date: '2019-03-06',
+      },
+      {
+        title: '八条数据',
+        date: '2019-03-06',
+      },
+    ],
+    linkList: [
+      {
+        url: '',
+        pic: require('@/assets/link1.jpg'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/link2.jpg'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/link3.jpg'),
+      },
+      {
+        url: '',
+        pic: require('@/assets/link3.jpg'),
+      },
+    ],
   }),
   created() {},
   computed: {},