更新

src/layout/altai/index/keji.vue

@@ -13,6 +13,7 @@
         <ul>
           <li v-for="(item,index) in keJiList" :key="index">
             <a href="#">
+              <span class="dot"></span>
               <span>{{item.title}}</span>
               <span class="tt">{{item.time}}</span>
             </a>
@@ -67,11 +68,18 @@ a {
 ul {
   padding: 0;
   margin: 8px 20px;
-  list-style-position: inside;
+}
+.dot {
+  width: 5px;
+  height: 5px;
+  background-color: #abaab8;
+  border-radius: 90px;
+  margin: 0 10px 6px 0;
 }
 li {
   padding: 5px 0;
   color: #95a3c0;
+  list-style-type: none;
 }
 li a {
   font-size: 14px;

src/layout/altai/info/dongtai.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="dongtai">
+    <el-row>
+      <el-col :span="24">
+        <el-tabs type="border-card" style="height:400px">
+          <el-tab-pane v-for="(item,index) in dongTaiList" :key="index">
+            <span slot="label" class="title">{{item.title}}
+              <!-- <span></span> -->
+            </span>
+            <el-col :span="24" class="content">
+              <ul>
+                <li v-for="(tag,index) in item.content" :key="index">
+                  <a href="#">
+                    <span class="dot"></span>
+                    <span>{{tag.title}}</span>
+                    <span class="tt">{{tag.time}}</span>
+                  </a>
+                </li>
+              </ul>
+              <div class="entermore">
+                <a href="#">查看更多</a>
+              </div>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dongtai',
+  props: {
+    dongTaiList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+ul {
+  padding: 0px;
+  list-style: none;
+}
+/deep/.el-tabs__nav {
+  padding: 10px 10px 0 10px;
+  background-color: #ffffff;
+  width: 100%;
+}
+/deep/.el-tabs__item {
+  display: contents;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0 15px 15px 15px;
+}
+/deep/.el-tabs__nav-wrap.is-scrollable {
+  padding: 0;
+}
+/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+    color: #2c3350;
+}
+/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+   color: #2c3350;
+}
+.title {
+  height: 45px;
+  font-size: 22px;
+  font-weight: bold;
+  padding-left: 10px;
+}
+.title span {
+  display: inline-block;
+  height: 4px;
+  width: 4px;
+  text-align: center;
+  background-color: #2b324e;
+  margin: -16px 0px 4px 6px;
+}
+.dot {
+  width: 5px;
+  height: 5px;
+  background-color: #abaab8;
+  border-radius: 90px;
+  margin: 0 10px 6px 0;
+}
+.content ul {
+  height: 250px;
+}
+.content li {
+  padding: 3px 0;
+}
+.content a {
+  font-size: 16px;
+  color: #6d6d77;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+.content a > span {
+  display: inline-block;
+  max-width: 410px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.entermore {
+  margin-top: 10px;
+  width: 563px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #f5f5f5;
+  font-size: 16px;
+}
+</style>

src/layout/altai/info/meiti.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="meiti">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="top">
+          <el-link :underline="false">
+            <el-col :span="21" class="title">媒体聚距</el-col>
+            <el-col :span="3" class="more">
+              <el-image style="width:25px;height:25px;padding: 20px 0 0 0;" :src="dian"></el-image>
+            </el-col>
+          </el-link>
+        </el-col>
+        <ul>
+          <li v-for="(item, index) in meitiList" :key="index">
+            <a href="#">
+              <span class="dot"></span>
+              <span>{{ item.title }}</span>
+              <span class="tt">{{ item.time }}</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'meiti',
+  props: {
+    meitiList: null,
+  },
+  components: {},
+  data: () => ({
+    dian: require('../../../assets/dot.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+.top {
+  height: 60px;
+  line-height: 60px;
+}
+.top .el-link {
+  width: 100%;
+}
+/deep/.top .el-link .el-link--inner {
+  width: 100%;
+}
+.top .title {
+  font-size: 22px;
+  color: #2c3350;
+  font-family: 微软雅黑;
+  font-weight: bold;
+  padding: 0 0 0 20px;
+}
+.top .more {
+  text-align: center;
+  height: 60px;
+}
+ul {
+  padding: 0;
+  margin: 8px 20px;
+}
+li {
+  padding: 5px 0;
+  color: #95a3c0;
+  list-style-type: none;
+}
+li a {
+  font-size: 14px;
+  color: #60626e;
+}
+.dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin: 0 10px 6px 0;
+  background-color: #95a3c0;
+  border-radius: 90px;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+a > span {
+  display: inline-block;
+  max-width: 230px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+

src/layout/altai/info/news.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="news">
+    <el-row>
+      <el-col :span="24">
+        <el-image :src="newsInfo.url" style="height:360px;width:550px"></el-image>
+        <span class="title">{{newsInfo.title}}</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news',
+  props: {
+    newsInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 550px;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  background-color: #22529a;
+  text-indent: 4px;
+}
+</style>

src/layout/altai/info/zhengwu.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="zhengwu">
+    <el-row>
+      <el-col :span="24" class="top">
+        <el-link :underline="false">
+          <el-col :span="24" class="title">政务公开</el-col>
+        </el-link>
+      </el-col>
+      <el-col :span="24" class="content">
+          <a href="#" v-for="(item,index) in zhengWuList" :key="index">
+            <el-image :src="item.url" style="width:42px;height:40px;margin-top: 20px"></el-image>
+            <span>{{item.title}}</span>
+          </a>
+        </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zhengwu',
+  props: {
+    zhengWuList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 60px;
+  line-height: 60px;
+}
+.top .el-link {
+  width: 100%;
+}
+/deep/.top .el-link .el-link--inner {
+  width: 100%;
+}
+.top .title {
+  font-size: 22px;
+  color: #2c3350;
+  font-family: 微软雅黑;
+  font-weight: bold;
+  padding: 0 0 0 20px;
+}
+.content {
+  width: 756px;
+  height: 230px;
+  margin: 0 20px;
+}
+.content a {
+  display: block;
+  width: 174px;
+  height: 110px;
+  float: left;
+  margin-right: 10px;
+  margin-top: 10px;
+  text-align: center;
+  color: #3981e5;
+  border: 1px solid #dee9f9;
+  font-size: 18px;
+}
+.content span {
+  display: block;
+  float: left;
+  width: 178px;
+  height: 30px;
+  line-height: 30px;
+}
+</style>

src/views/altai/info.vue

@@ -11,19 +11,19 @@
           </el-col>
           <el-col :span="24" class="main">
             <el-col :span="6" class="news">
-              国际新闻
+              <news :newsInfo="newsInfo"></news>
             </el-col>
             <el-col :span="12" class="dongtai">
-              科技动态
+              <dongtai :dongTaiList="dongTaiList"></dongtai>
             </el-col>
             <el-col :span="8" class="meiti">
-              媒体聚距
+              <meiti :meitiList="meitiList"></meiti>
             </el-col>
             <el-col :span="16" class="zhiwu">
-              政务公开
+              <zhengwu :zhengWuList="zhengWuList"></zhengwu>
             </el-col>
             <el-col :span="24" class="link">
-              友情链接
+              <lianjie :linkList="linkList"></lianjie>
             </el-col>
           </el-col>
           <el-col :span="24" class="foot">
@@ -38,15 +38,30 @@
 <script>
 import top from '../../layout/altai/index/top.vue';
 import native from '../../layout/altai/index/native.vue';
+import news from '../../layout/altai/info/news.vue';
+import dongtai from '../../layout/altai/info/dongtai.vue';
+import meiti from '../../layout/altai/info/meiti.vue';
+import zhengwu from '../../layout/altai/info/zhengwu.vue';
+import lianjie from '../../layout/altai/index/lianjie.vue';
 import foot from '../../layout/altai/index/foot.vue';
 export default {
   name: 'info',
   props: {
+    newsInfo:null,//国际新闻
+    dongTaiList:null,//科技动态
+    meitiList:null,//，媒体聚距
+    zhengWuList:null,//政务公开
+    linkList: null,//友情链接
     foot: null,
   },
   components: {
     top, //头部
     native, //导航
+    news,//国际新闻
+    dongtai,//科技动态
+    meiti,//媒体聚距
+    zhengwu,//政务公开
+    lianjie,//链接
     foot, //底部
   },
   data: () => ({}),
@@ -77,37 +92,36 @@ export default {
 }
 .news {
   width: 590px;
-  height: 360px;
+  height: 400px;
   padding: 20px;
   overflow: hidden;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
   margin: 0 10px 0 0;
 }
 .dongtai {
   width: 600px;
-  height: 360px;
+  height: 400px;
   overflow: hidden;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
 }
-
 .meiti {
-  height: 320px;
+  height: 331px;
   overflow: hidden;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
   margin: 10px 10px 0 0;
 }
 .zhiwu {
   width: 790px;
-  height: 320px;
+  height: 331px;
   overflow: hidden;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
   margin: 10px 0 0 0;
 }
 .link {
   height: 100px;
   overflow: hidden;
   margin-top: 10px;
-  border: 1px solid #ccc;
+  background-color: #ffffff;
 }
 .foot {
   overflow: hidden;