合并

src/layout/altai/index/native.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="native">
+    <el-row>
+      <el-col :span="24">
+        <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
+          <el-menu-item index="/">首页</el-menu-item>
+          <el-menu-item index="/info">科技资讯</el-menu-item>
+          <el-menu-item index="/train">科技培训</el-menu-item>
+          <el-menu-item index="/natural">科技资源</el-menu-item>
+          <el-menu-item index="/service">科技服务</el-menu-item>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'native',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(this);
+      console.log(key, keyPath);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-menu {
+  background-color: rgba(0,0,0,0.4);
+}
+/deep/.el-menu--horizontal > .el-menu-item {
+  height: 50px;
+  line-height: 50px;
+  color: #fff;
+  font-size: 18px;
+  padding: 0 50px;
+  border-bottom: none;
+  border-right: 1px solid #ccc;
+}
+/deep/.el-menu--horizontal > .el-menu-item:hover {
+  color: #fff;
+  background-color: #215299;
+}
+/deep/.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: none;
+  background-color: #215299;
+  color: #fff;
+  font-size: 18px;
+}
+</style>

src/views/altai/index.vue

@@ -6,7 +6,7 @@
           <top></top>
         </el-col>
         <el-col :span="24" class="nav">
-
+          <native></native>
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="12" class="ditu">
@@ -45,6 +45,7 @@ import law from '../../layout/altai/index/law.vue';
 import keji from '../../layout/altai/index/keji.vue';
 import lianjie from '../../layout/altai/index/lianjie.vue';
 import foot from '../../layout/altai/index/foot.vue';
+import native from '../../layout/altai/index/native.vue';
 export default {
   name: 'index',
   props: {
@@ -61,6 +62,7 @@ export default {
     keji,
     lianjie,
     foot,
+    native,//导航
   },
   data: () => ({}),
   created() { },
@@ -81,9 +83,9 @@ export default {
   color: #f2f5fa;
 }
 .nav {
-  background-color: aliceblue;
   height: 50px;
   overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
 }
 .ditu {
   margin-top: 10px;

src/views/altai/info.vue

@@ -0,0 +1,114 @@
+<template>
+  <div id="info">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24">
+          <el-col :span="24" class="top">
+            <top></top>
+          </el-col>
+          <el-col :span="24" class="nav">
+            <native></native>
+          </el-col>
+          <el-col :span="24" class="main">
+            <el-col :span="6" class="news">
+              国际新闻
+            </el-col>
+            <el-col :span="12" class="dongtai">
+              科技动态
+            </el-col>
+            <el-col :span="8" class="meiti">
+              媒体聚距
+            </el-col>
+            <el-col :span="16" class="zhiwu">
+              政务公开
+            </el-col>
+            <el-col :span="24" class="link">
+              友情链接
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="foot"> </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+export default {
+  name: 'info',
+  props: {},
+  components: {
+    top, //头部
+    native, //导航
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+  padding: 35px 0;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+}
+.news {
+  width: 590px;
+  height: 360px;
+  padding: 20px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 0 10px 0 0;
+}
+.dongtai {
+  width: 600px;
+  height: 360px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+}
+
+.meiti {
+  height: 320px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 10px 10px 0 0;
+}
+.zhiwu {
+  width: 790px;
+  height: 320px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 10px 0 0 0;
+}
+.link {
+  height: 100px;
+  overflow: hidden;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/altai/natural.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="natural">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24">
+          <el-col :span="24" class="top">
+            <top></top>
+          </el-col>
+          <el-col :span="24" class="nav">
+            <native></native>
+          </el-col>
+          <el-col :span="24" class="main">
+            科技资源
+          </el-col>
+          <el-col :span="24" class="foot">
+            底部
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+export default {
+  name: 'info',
+  props: {},
+  components: {
+    top, //头部
+    native, //导航
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+  padding: 35px 0;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+  min-height:500px;
+  border:1px solid #ccc;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/altai/service.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="service">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24">
+          <el-col :span="24" class="top">
+            <top></top>
+          </el-col>
+          <el-col :span="24" class="nav">
+            <native></native>
+          </el-col>
+          <el-col :span="24" class="main">
+            <el-col :span="8" class="left">
+              <el-col :span="24" class="zhengwu">
+                政务公开
+              </el-col>
+              <el-col :span="24" class="gongzhong">
+                公众参与
+              </el-col>
+            </el-col>
+            <el-col :span="16" class="right">
+              <el-col :span="24" class="service">
+                常用服务
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="link">
+              友情链接
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="foot">
+            底部
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+export default {
+  name: 'service',
+  props: {},
+  components: {
+    top, //头部
+    native, //导航
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+  padding: 35px 0;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+}
+.main .left {
+  margin: 0 10px 0 0;
+}
+.main .left .zhengwu {
+  height: 320px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+}
+.main .left .gongzhong {
+  height: 320px;
+  overflow: hidden;
+  margin: 10px 0 0 0;
+  border: 1px solid #ccc;
+}
+.main .right {
+  width: 790px;
+  height: 650px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+}
+.link {
+  height: 100px;
+  overflow: hidden;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>

src/views/altai/train.vue

@@ -0,0 +1,94 @@
+<template>
+  <div id="train">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24">
+          <el-col :span="24" class="top">
+            <top></top>
+          </el-col>
+          <el-col :span="24" class="nav">
+            <native></native>
+          </el-col>
+          <el-col :span="24" class="main">
+            <el-col :span="8" class="huiyi">
+              国际会议中心
+            </el-col>
+            <el-col :span="16" class="jishu">
+              科技动态
+            </el-col>
+            <el-col :span="24" class="service">
+              常用服务
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="foot">
+            底部
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/altai/index/top.vue';
+import native from '../../layout/altai/index/native.vue';
+export default {
+  name: 'info',
+  props: {},
+  components: {
+    top, //头部
+    native, //导航
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  background-color: rgba(0, 0, 0, 0);
+  height: 100px;
+  overflow: hidden;
+  color: #f2f5fa;
+  padding: 35px 0;
+}
+.nav {
+  height: 50px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+.main {
+  margin: 10px 0 0 0;
+}
+.huiyi {
+  height: 300px;
+  overflow: hidden;
+  margin: 0 10px 0 0;
+  border: 1px solid #ccc;
+}
+.jishu {
+  width: 790px;
+  height: 300px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+}
+.service {
+  height: 300px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  margin: 10px 0 0 0;
+}
+.foot {
+  overflow: hidden;
+  margin-top: 10px;
+  height: 120px;
+  color: #858f9b;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>