4.8 20:41

src/App.vue

@@ -1,9 +1,23 @@
 <template>
   <div id="app">
     <router-view />
+    <div class="copyright">
+      <div class="aa">
+        <span>
+        广西壮族自治区南宁市武鸣区宝源路29号广西制造工程职业技术学院<br>
+        邮编：530100<br>
+        联系电话：10086
+      </span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="less">
-
+.copyright{
+  width: 100%;
+  height: 150px;
+  margin-top: 30px;
+  background-color: palegreen;
+}
 </style>

src/main.js

@@ -19,7 +19,8 @@ import {
   MenuItem,
   Breadcrumb,
   BreadcrumbItem,
-  Avatar
+  Avatar,
+  Pagination
 } from 'element-ui'
 
 Vue.use(Avatar)
@@ -36,6 +37,7 @@ Vue.use(Menu)
 Vue.use(MenuItem)
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
+Vue.use(Pagination)
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -16,9 +16,9 @@ const routes = [
     component: () => import('../views/index.vue')
   },
   {
-    path: '/resource',
+    path: '/resourceHome',
-    name: 'resource',
+    name: 'resourceHome',
-    component: () => import('../views/resource')
+    component: () => import('../views/resource/home/index')
   },
   {
     path: '/environmental',

src/views/environment/journalism/index.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="journalism">
     <div class="nav">
-        <el-menu
+      <el-menu
-      :default-active="activeIndex"
+        :default-active="activeIndex"
-      class="el-menu-demo"
+        class="el-menu-demo"
-      mode="horizontal"
+        mode="horizontal"
-      background-color="#545c64"
+        background-color="#545c64"
-      text-color="#fff"
+        text-color="#fff"
-      active-text-color="#ffd04b"
+        active-text-color="#ffd04b"
-    >
+      >
-      <el-menu-item index="1">
+        <el-menu-item index="1">
-        <router-link to="/index">首页</router-link>
+          <router-link to="/index">首页</router-link>
-      </el-menu-item>
+        </el-menu-item>
-      <el-menu-item index="2">
+        <el-menu-item index="2">
-        <router-link to="/scheme">解决方案</router-link>
+          <router-link to="/scheme">解决方案</router-link>
-      </el-menu-item>
+        </el-menu-item>
-      <el-menu-item index="3">
+        <el-menu-item index="3">
-        <router-link to="/projectCase">工程案例</router-link>
+          <router-link to="/projectCase">工程案例</router-link>
-      </el-menu-item>
+        </el-menu-item>
-      <el-menu-item index="4">
+        <el-menu-item index="4">
-        <router-link to="journalism">新闻资讯</router-link>
+          <router-link to="journalism">新闻资讯</router-link>
-      </el-menu-item>
+        </el-menu-item>
-    </el-menu>
+      </el-menu>
     </div>
     <!-- 轮播图 -->
     <div class="slideshow">
@@ -97,6 +97,9 @@
             </div>
           </el-tab-pane>
         </el-tabs>
+
+        <el-pagination :hide-on-single-page="true" background layout="prev, pager, next" :total="30">
+        </el-pagination>
       </div>
 
       <div class="message-right"></div>
@@ -284,7 +287,7 @@ export default {
 <style lang="less" scoped>
 .message {
   width: 1300px;
-  height: 800px;
+  height: 1430px;
   margin: 10px auto;
 
   .message-left {
@@ -322,6 +325,10 @@ export default {
         margin-top: 80px;
       }
     }
+
+    .el-pagination{
+      text-align: center;
+    }
   }
 
   .message-right {

src/views/index.vue

@@ -63,7 +63,7 @@ export default {
           title: '可持续资源开发',
           title2: '环境和社会的可持续性',
           imgs: require('@/assets/images/2.jpg'),
-          url: '/resource'
+          url: '/resourceHome'
         },
         {
           title: '生态环保',
@@ -112,6 +112,7 @@ export default {
     .el-button {
       display: inline-block;
       margin-top: 15px;
+      cursor: pointer;
     }
 
     span {
@@ -168,14 +169,17 @@ export default {
     transition: all 0.5s;
     animation-duration: 3s;
     animation-name: slidein;
+    animation-delay: 0.5s;
+    animation-delay: .5s;
+    // animation: slidein 0.5s reverse;
   }
 
   @keyframes slidein {
-    from {
+    0% {
       width: 740px;
     }
 
-    to {
+    100% {
       width: 180px;
     }
   }

src/views/resource/home/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="cleanEnergy-home">
+    <div class="nav">
+      <div class="nav-left">
+        <h2>可持续资源开发</h2>
+      </div>
+      <div class="nav-right">
+        <ul>
+          <li>首页</li>
+          <li>关于</li>
+          <li>服务</li>
+          <li>项目</li>
+        </ul>
+      </div>
+    </div>
+    <div class="slideshow">
+
+    </div>
+    <div class="row">
+      <div class="row-item" v-for="(item, index) in rowItem" :key="index">
+          {{ item.title }}
+      </div>
+    </div>
+
+    <div class="row2">
+      <div class="row2-img">
+        <img src="../../../assets/images/2.jpg" alt="">
+      </div>
+      <div class="row2-content">
+        basbs
+      </div>
+    </div>
+
+    <div class="title">
+      <h1>世界可再生能源的先驱</h1>
+    </div>
+
+    <div class="row3">
+      <div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
+          {{ item.title }}
+      </div>
+    </div>
+
+    <div class="row4">
+      <div class="row4-img">
+        <img src="../../../assets/images/2.jpg" alt="">
+      </div>
+      <div class="row4-content">
+        basbs
+      </div>
+    </div>
+
+    <div class="title">
+      <h1>最新的太阳能电池板可再生能源项目</h1>
+    </div>
+
+    <div class="row3">
+      <div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
+          {{ item.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'cleanEnergyHome',
+  data () {
+    return {
+      rowItem: [
+        {
+          title: 1
+        },
+        {
+          title: 2
+        },
+        {
+          title: 3
+        },
+        {
+          title: 4
+        }
+      ],
+      rowItem3: [
+        {
+          title: 1
+        },
+        {
+          title: 2
+        },
+        {
+          title: 3
+        },
+        {
+          title: 4
+        },
+        {
+          title: 3
+        },
+        {
+          title: 4
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cleanEnergy-home {
+  .nav {
+    width: 100%;
+    height: 75px;
+    background-color: #ffffff;
+
+    .nav-left{
+      width: 220px;
+      height: 75px;
+      border-right: 1px solid #b4b4b4;
+      float: left;
+      line-height: 75px;
+      margin-left: 20px;
+
+      h2{
+        color: #32c36c;
+        cursor: pointer;
+      }
+    }
+
+    .nav-right{
+      float: right;
+      margin-right: 300px;
+
+      ul{
+        list-style: none;
+
+        li{
+          float: left;
+          line-height: 75px;
+          margin-left: 35px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .slideshow{
+    width: 100%;
+    height: 825px;
+    background-color: paleturquoise;
+  }
+
+  .row{
+    width: 1320px;
+    height: 210px;
+    border: 1px solid black;
+    margin: 50px auto;
+
+    .row-item{
+      width: 330px;
+      height: 210px;
+      background-color: pink;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      float: left;
+    }
+  }
+
+  .row2{
+    width: 100%;
+    height: 620px;
+    background-color: palegoldenrod;
+
+    .row2-img{
+      width: 50%;
+      height: 620px;
+      float: left;
+
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .row2-content{
+      float: left;
+    }
+  }
+
+  .title{
+    width: 100%;
+    height: 200px;
+
+    h1{
+      line-height: 200px;
+      text-align: center;
+    }
+  }
+
+  .row3{
+    width: 1350px;
+    height: 1055px;
+    margin: auto;
+
+    .row3-item{
+      width: 435px;
+      height: 504px;
+      background-color: cadetblue;
+      display: inline-block;
+      margin:15px 0 0 15px ;
+    }
+  }
+
+  .row4{
+    width: 100%;
+    height: 620px;
+    margin-top: 50px;
+    background-color: palegoldenrod;
+
+    .row4-img{
+      width: 50%;
+      height: 620px;
+      float: right;
+
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .row4-content{
+      float: left;
+    }
+  }
+}
+</style>

src/views/resource/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>资源开发</div>
-</template>
-
-<script>
-export default {
-  name: 'resouRce'
-}
-</script>
-
-<style>
-
-</style>