Merge branch 'master' of https://git.ddmt.top/6666/123

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/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/resourceHome/homeIndex.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="title">
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+  .title{
+    width: 100%;
+    height: 200px;
+  }
+</style>

src/components/slideshow/SeamlessCarousel.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="carousel"
+    @mousedown="startDrag"
+    @mousemove="drag"
+    @mouseup="endDrag"
+    @mouseleave="endDrag"
+  >
+    <div
+      class="carousel-item"
+      v-for="(image, index) in images"
+      :key="index"
+      :class="{ active: currentIndex === index }"
+    >
+      <img :src="image.imgs" :alt="image.description" @mousedown.prevent />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      images: [
+        {
+          imgs: require('@/assets/images/1.jpg')
+        },
+        {
+          imgs: require('@/assets/images/2.jpg')
+        },
+        {
+          imgs: require('@/assets/images/3.jpg')
+        }
+      ],
+      currentIndex: 0,
+      dragging: false,
+      startX: 0,
+      currentX: 0
+    }
+  },
+  methods: {
+    nextImage () {
+      if (this.dragging) {
+        this.currentIndex = (this.currentIndex + 1) % this.images.length
+      }
+    },
+    prevImage () {
+      if (this.dragging) {
+        this.currentIndex =
+          (this.currentIndex - 1 + this.images.length) % this.images.length
+      }
+    },
+    startDrag (event) {
+      event.preventDefault() // 阻止默认拖拽行为
+      this.dragging = true
+      this.startX = event.clientX
+      this.currentX = event.clientX
+    },
+    drag (event) {
+      if (this.dragging) {
+        event.preventDefault() // 阻止默认拖拽行为
+        const deltaX = event.clientX - this.currentX
+        this.currentX = event.clientX
+        if (Math.abs(deltaX) > 10) {
+          // 假设移动超过10px时切换图片
+          if (deltaX > 0) {
+            this.nextImage()
+          } else {
+            this.prevImage()
+          }
+        }
+      }
+    },
+    endDrag () {
+      this.dragging = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 800px;
+  overflow: hidden;
+  cursor: pointer;
+
+  .carousel-item {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.carousel-item.active {
+  opacity: 1;
+}
+</style>

src/components/slideshow/environmentCarousel.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="slideshow">
+      <el-carousel :interval="3000" arrow="always" type="card">
+        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+          <img
+            :src="item.image"
+            :alt="item.description"
+            style="width: 100%; height: auto"
+          />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      carouselItems: [
+        {
+          image: require('@/assets/images/1.jpg')
+        },
+        {
+          image: require('@/assets/images/2.jpg')
+        },
+        {
+          image: require('@/assets/images/3.jpg')
+        },
+        {
+          image: require('@/assets/images/4.jpg')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.slideshow {
+  width: 1800px;
+  margin: auto;
+  margin-top: 10px;
+}
+</style>

src/main.js

@@ -20,10 +20,9 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   Avatar,
-  Message
+  Pagination
 } from 'element-ui'
 
-Vue.use(Message)
 Vue.use(Avatar)
 Vue.use(Button)
 Vue.use(Form)
@@ -38,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,40 +1,30 @@
 <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">
+    <environmentCarousel/>
-      <el-carousel :interval="3000" arrow="always" type="card">
-        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
-          <img
-            :src="item.image"
-            :alt="item.description"
-            style="width: 100%; height: auto"
-          />
-        </el-carousel-item>
-      </el-carousel>
-    </div>
 
     <!-- 新闻 -->
     <div class="message">
@@ -97,6 +87,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>
@@ -105,8 +98,12 @@
 </template>
 
 <script>
+import environmentCarousel from '@/components/slideshow/environmentCarousel.vue'
 export default {
   name: 'journaLism',
+  components: {
+    environmentCarousel
+  },
   data () {
     return {
       activeIndex: '4',
@@ -284,7 +281,7 @@ export default {
 <style lang="less" scoped>
 .message {
   width: 1300px;
-  height: 800px;
+  height: 1430px;
   margin: 10px auto;
 
   .message-left {
@@ -322,6 +319,10 @@ export default {
         margin-top: 80px;
       }
     }
+
+    .el-pagination{
+      text-align: center;
+    }
   }
 
   .message-right {

src/views/environment/scheme/index.vue

@@ -24,17 +24,9 @@
         </el-menu-item>
       </el-menu>
     </div>
-    <div class="home-scheme">
+
-      <el-carousel :interval="3000" arrow="always" type="card">
+    <environmentCarousel/>
-        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
+
-          <img
-            :src="item.image"
-            :alt="item.description"
-            style="width: 100%; height: auto"
-          />
-        </el-carousel-item>
-      </el-carousel>
-    </div>
     <div class="scheme">
       <div class="details" v-for="(item, index) in schemeItem" :key="index">
         <h3>
@@ -51,8 +43,12 @@
 </template>
 
 <script>
+import environmentCarousel from '@/components/slideshow/environmentCarousel.vue'
 export default {
   name: 'HoMe',
+  components: {
+    environmentCarousel
+  },
   data () {
     return {
       activeIndex: '2',
@@ -103,12 +99,6 @@ export default {
 </script>
 
   <style lang="less">
-.home-scheme {
-  width: 1800px;
-  margin: auto;
-  margin-top: 10px;
-}
-
 .scheme {
   width: 1200px;
   height: 700px;

src/views/index.vue

@@ -7,9 +7,18 @@
         </router-link>
       </div>
       <div class="navUser">
-        <div v-if="login" class="block"><el-avatar shape="square" :size="50" fit="cover" :src="squareUrl"></el-avatar></div>
+        <div v-if="login" class="block">
+          <el-avatar
+            shape="square"
+            :size="50"
+            fit="cover"
+            :src="squareUrl"
+          ></el-avatar>
+        </div>
         <span v-if="login">{{ userName }}</span>
-        <el-button v-else type="primary" icon="el-icon-user-solid">登陆</el-button>
+        <el-button v-else type="primary" icon="el-icon-user-solid"
+          >登陆</el-button
+        >
       </div>
     </div>
     <div class="content">
@@ -21,12 +30,12 @@
           <li v-for="(item, index) in parItem" :key="index">
             <div class="title">
               <router-link :to="item.url">
-                {{ item.title }}<br />{{ item.title2 }}<br>
+                {{ item.title }}<br />{{ item.title2 }}<br />
                 <button>查看详情</button>
               </router-link>
             </div>
             <router-link :to="item.url">
-              <img :src="item.imgs"/>
+              <img :src="item.imgs" />
             </router-link>
           </li>
         </ul>
@@ -54,7 +63,7 @@ export default {
           title: '可持续资源开发',
           title2: '环境和社会的可持续性',
           imgs: require('@/assets/images/2.jpg'),
-          url: '/resource'
+          url: '/resourceHome'
         },
         {
           title: '生态环保',
@@ -99,12 +108,14 @@ export default {
     float: right;
     margin-right: 100px;
 
-    .block, .el-button {
+    .block,
+    .el-button {
       display: inline-block;
       margin-top: 15px;
+      cursor: pointer;
     }
 
-    span{
+    span {
       float: right;
       line-height: 80px;
       margin-left: 10px;
@@ -151,24 +162,27 @@ export default {
     float: left;
     border-left: 1px solid #aaa;
     box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
-    -webkit-transition: all 0.5s;
+    -webkit-transition: all 0.8s;
-    -moz-transition: all 0.5s;
+    -moz-transition: all 0.8s;
-    -ms-transition: all 0.5s;
+    -ms-transition: all 0.8s;
-    -o-transition: all 0.5s;
+    -o-transition: all 0.8s;
-    transition: all 0.5s;
+    transition: all 0.8s;
     animation-duration: 3s;
-  animation-name: slidein;
+    animation-name: slidein;
+    animation-delay: 0.5s;
+    animation-delay: .5s;
+    // animation: slidein 0.5s reverse;
   }
 
   @keyframes slidein {
-  from {
+    0% {
-    width: 740px;
+      width: 740px;
-  }
+    }
 
-  to {
+    100% {
-    width: 180px;
+      width: 180px;
+    }
   }
-}
 
   li img {
     object-fit: cover;

src/views/login.vue

@@ -89,7 +89,7 @@ export default {
   },
   methods: {
     login () {
-      if (this.form.username === '' && this.form.password === '') {
+      if (this.form.username === '' || this.form.password === '') {
         Message.error('账号或密码不能为空')
       } else {
         this.$router.push('/index')
@@ -104,7 +104,10 @@ export default {
       }
     },
     forgetpas () {
-      Message.error('请联系管理员')
+      Message({
+        message: '请联系管理员更改密码',
+        type: 'warning'
+      })
     },
     register () {
       this.create = !this.create

src/views/resource/home/index.vue

@@ -0,0 +1,225 @@
+<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>
+
+    <seamless-carousel />
+
+    <div class="row">
+      <div class="row-item" v-for="(item, index) in rowItem" :key="index">
+          {{ item.title }}
+      </div>
+    </div>
+
+    <homeIndex/>
+
+    <div class="row2">
+      <div class="row2-img">
+        <img src="../../../assets/images/2.jpg" alt="">
+      </div>
+      <div class="row2-content">
+        basbs
+      </div>
+    </div>
+
+    <homeIndex/>
+
+    <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>
+
+    <homeIndex/>
+
+    <div class="row3">
+      <div class="row3-item" v-for="(item, index) in rowItem3" :key="index">
+          {{ item.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SeamlessCarousel from '@/components/slideshow/SeamlessCarousel.vue'
+import homeIndex from '@/components/resourceHome/homeIndex.vue'
+export default {
+  name: 'cleanEnergyHome',
+  components: {
+    SeamlessCarousel,
+    homeIndex
+  },
+  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;
+        }
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .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>