页面初版

src/layout/altai/index/ditu.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="ditu">
+    <el-row>
+      <el-col :span="24">
+        <el-image :src="mapUrl" style="margin:20px"></el-image>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ditu',
+  props: {
+    mapUrl:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/layout/altai/index/foot.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="foot">
+    <el-row>
+      <div class="w_626">
+        <el-col :span="24">
+          <p>{{foot.banquan}}</p>
+          <p>{{foot.jishu}}</p>
+          <p>{{foot.youbian}}</p>
+          <p>{{foot.chuanzhen}}</p>
+          <p>{{foot.address}}</p>
+          <p>{{foot.tele}}</p>
+          <p>{{foot.email}}</p>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'foot',
+  props: {
+    foot:null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+  line-height: 24px;
+  margin-right: 18px;
+  float: left;
+}
+p:first-child {
+  float: none;
+}
+.w_626 {
+  width: 626px;
+  margin: 0 auto;
+  color: #858f9b;
+  font-size: 14px;
+}
+.w_626 div {
+  margin: 20px auto;
+}
+</style>

src/layout/altai/index/keji.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="keji">
+    <el-row>
+      <el-col :span="24">
+        <a href="#">
+          <h2>科技服务
+            <span></span>
+            <span></span>
+            <span></span>
+          </h2>
+        </a>
+        <ul>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-11</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'keji',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+h2 {
+  margin: 20px 20px 0;
+  color: #2c3350;
+  font: 22px;
+}
+h2 span {
+  width: 4px;
+  height: 4px;
+  background-color: #3d6fb4;
+  margin: 12px 0 3px 3px;
+  float: right;
+}
+ul {
+  padding-left: 20px;
+  margin: 8px 20px;
+}
+li {
+  padding: 3px 0;
+  color: #95a3c0;
+}
+li a {
+  font-size: 14px;
+  color: #60626e;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+</style>

src/layout/altai/index/law.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="law">
+    <el-row>
+      <el-col :span="24">
+        <a href="#">
+          <h2>政策法规
+            <span></span>
+            <span></span>
+            <span></span>
+          </h2>
+        </a>
+        <ul>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-11</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'law',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+h2 {
+  margin: 20px 20px 0;
+  color: #2c3350;
+  font: 22px;
+}
+h2 span {
+  width: 4px;
+  height: 4px;
+  background-color: #3d6fb4;
+  margin: 12px 0 3px 3px;
+  float: right;
+}
+ul {
+  padding-left: 20px;
+  margin: 8px 20px;
+}
+li {
+  padding: 3px 0;
+  color: #95a3c0;
+}
+li a {
+  font-size: 14px;
+  color: #60626e;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+</style>

src/layout/altai/index/lianjie.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="lianjie">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="3" class="text">
+          <h2>友情链接</h2>
+        </el-col>
+        <el-col class="img" :span="5" v-for="(item,index) in linkList" :key="index">
+          <a href="#">
+          <el-image :src="item.url" style="width:240px;height:50px;"></el-image>
+          </a>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'lianjie',
+  props: {
+    linkList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.text {
+  line-height: 100px;
+  padding: 0 30px;
+}
+h2 {
+  font-size: 22px;
+  font-weight: bold;
+  color: #2e3351;
+  margin: 0;
+}
+.img {
+  height: 100px;
+  padding: 25px 0;
+  width: 240px;
+  margin: 0 10px;
+}
+</style>

src/layout/altai/index/notice.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="notice">
+    <el-row>
+      <el-col :span="24">
+        <a href="#">
+          <h2>通知通告
+            <span></span>
+            <span></span>
+            <span></span>
+          </h2>
+        </a>
+        <ul>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-11</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+h2 {
+  margin: 20px 20px 0;
+  color: #2c3350;
+  font: 22px;
+}
+h2 span {
+  width: 4px;
+  height: 4px;
+  background-color: #3d6fb4;
+  margin: 12px 0 3px 3px;
+  float: right;
+}
+ul {
+  padding-left: 20px;
+  margin: 8px 20px;
+}
+li {
+  padding: 3px 0;
+  color: #95a3c0;
+}
+li a {
+  font-size: 14px;
+  color: #60626e;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+</style>
+

src/layout/altai/index/top.vue

@@ -25,5 +25,6 @@ export default {
   font-size: 30px;
   font-family: Cursive;
   font-style: italic;
+  line-height: 100px;
 }
 </style>

src/layout/altai/index/zixun.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="zixun">
+    <el-row>
+      <el-col :span="24">
+        <a href="#">
+          <h2>最新资讯
+            <span></span>
+            <span></span>
+            <span></span>
+          </h2>
+        </a>
+        <ul>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-11</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>国内外参展商和广大客户的广泛好评。尤其是参展的“太阳能无线充电</span>
+              <span class="tt">2018-02-01</span>
+            </a>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zixun',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+a {
+  text-decoration: none;
+}
+h2 {
+  margin: 20px 20px 0;
+  color: #2c3350;
+  font: 22px;
+}
+h2 span {
+  width: 4px;
+  height: 4px;
+  background-color: #3d6fb4;
+  margin: 12px 0 3px 3px;
+  float: right;
+}
+ul {
+  padding-left: 20px;
+  margin: 8px 20px;
+}
+li {
+  padding: 3px 0;
+  color: #95a3c0;
+}
+li a {
+  font-size: 14px;
+  color: #60626e;
+}
+.tt {
+  color: #abaab8;
+  float: right;
+}
+</style>

src/views/altai/index.vue

@@ -10,26 +10,26 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="12" class="ditu">
-
+            <ditu :mapUrl="mapUrl"></ditu>
           </el-col>
           <el-col :span="12" class="zixun">
-
+            <zixun></zixun>
           </el-col>
           <el-col :span="8" class="notice">
-
+            <notice></notice>
           </el-col>
           <el-col :span="8" class="law">
-
+            <law></law>
           </el-col>
           <el-col :span="8" class="keji">
-
+            <keji></keji>
           </el-col>
-          <el-col :span="24" class="link">
-
+          <el-col :span="24" class="lianjie">
+            <lianjie :linkList="linkList"></lianjie>
           </el-col>
         </el-col>
         <el-col :span="24" class="foot">
-
+          <foot :foot="foot"></foot>
         </el-col>
       </div>
     </el-row>
@@ -38,14 +38,32 @@
 
 <script>
 import top from '../../layout/altai/index/top.vue';
+import ditu from '../../layout/altai/index/ditu.vue';
+import zixun from '../../layout/altai/index/zixun.vue';
+import notice from '../../layout/altai/index/notice.vue';
+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';
 export default {
   name: 'index',
-  props: {},
+  props: {
+    mapUrl: null,
+    linkList: null,
+    foot:null,
+  },
   components: {
     top,//头部
+    ditu,
+    zixun,
+    notice,
+    law,
+    keji,
+    lianjie,
+    foot,
   },
   data: () => ({}),
-  created() {},
+  created() { },
   computed: {},
   methods: {},
 };
@@ -61,7 +79,6 @@ export default {
   height: 100px;
   overflow: hidden;
   color: #f2f5fa;
-  padding: 35px 0;
 }
 .nav {
   background-color: aliceblue;
@@ -70,7 +87,7 @@ export default {
 }
 .ditu {
   margin-top: 10px;
-  background-color: blue;
+  background-color: #ffffff;
   overflow: hidden;
   height: 400px;
   width: 587px;
@@ -81,7 +98,7 @@ export default {
   overflow: hidden;
   height: 400px;
   width: 603px;
-  background-color: aqua;
+  background-color: #ffffff;
 }
 .notice {
   overflow: hidden;
@@ -89,7 +106,7 @@ export default {
   margin-right: 10px;
   width: 394px;
   height: 331px;
-  background-color: aqua;
+  background-color: #ffffff;
 }
 .law {
   overflow: hidden;
@@ -97,20 +114,20 @@ export default {
   margin-right: 10px;
   width: 394px;
   height: 331px;
-  background-color: aliceblue;
+  background-color: #ffffff;
 }
 .keji {
   overflow: hidden;
   margin-top: 10px;
   width: 392px;
   height: 331px;
-  background-color: blue;
+  background-color: #ffffff;
 }
-.link {
+.lianjie {
   overflow: hidden;
   margin-top: 10px;
   height: 100px;
-  background-color: blue;
+  background-color: #ffffff;
 }
 .foot {
   overflow: hidden;