4.9 18.20

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/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/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/views/environment/journalism/index.vue

@@ -24,17 +24,7 @@
       </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">
@@ -108,8 +98,12 @@
 </template>
 
 <script>
+import environmentCarousel from '@/components/environmentCarousel.vue'
 export default {
   name: 'journaLism',
+  components: {
+    environmentCarousel
+  },
   data () {
     return {
       activeIndex: '4',

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/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

@@ -162,11 +162,11 @@ 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-delay: 0.5s;

src/views/login.vue

@@ -2,7 +2,7 @@
   <div class="loginbody">
     <div class="logindata">
       <div class="logintext">
-        <h2>Welcome</h2>
+        <h2>{{ create ? '注册' : '登陆' }}</h2>
       </div>
       <div class="formdata">
         <el-form ref="form" :model="form" :rules="rules">
@@ -21,11 +21,11 @@
               show-password
             ></el-input>
           </el-form-item>
-          <el-form-item prop="password">
+          <el-form-item prop="repassword" v-if="create">
             <el-input
-              v-model="form.affirm"
+              v-model="form.repassword"
               clearable
-              placeholder="请输入密码"
+              placeholder="请重复密码"
               show-password
             ></el-input>
           </el-form-item>
@@ -33,34 +33,36 @@
       </div>
       <div class="tool">
         <div>
-          <el-checkbox v-model="checked" @change="remenber"
+          <el-checkbox v-model="checked" @change="remenber" v-if="!create"
             >记住密码</el-checkbox
           >
         </div>
         <div>
-          <span class="shou" @click="forgetpas">忘记密码？</span>
+          <span class="shou" @click="forgetpas" v-if="!create">忘记密码？</span>
         </div>
       </div>
       <div class="butt">
         <el-button type="primary" @click.native.prevent="login"
-          >登录</el-button
+          >{{ create ? '注册' : '登陆' }}</el-button
         >
-        <el-button class="shou" @click="register">注册</el-button>
+        <el-button class="shou" @click="register">{{ create ? '返回' : '注册' }}</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { Message } from 'element-ui'
 
 export default {
   name: 'loGin',
   data () {
     return {
+      create: false,
       form: {
         password: '',
         username: '',
-        affirm: ''
+        repassword: ''
       },
       checked: false,
       rules: {
@@ -71,6 +73,10 @@ export default {
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' },
           { max: 10, message: '不能大于10个字符', trigger: 'blur' }
+        ],
+        repassword: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
         ]
       }
     }
@@ -83,8 +89,8 @@ export default {
   },
   methods: {
     login () {
-      if (this.form.username === '' && this.form.password === '') {
+      if (this.form.username === '' || this.form.password === '') {
-        alert('账号或密码不能为空')
+        Message.error('账号或密码不能为空')
       } else {
         this.$router.push('/index')
       }
@@ -98,10 +104,15 @@ export default {
       }
     },
     forgetpas () {
-      alert('请联系管理员')
+      Message({
+        message: '请联系管理员更改密码',
+        type: 'warning'
+      })
     },
     register () {
-      alert('请联系管理员')
+      this.create = !this.create
+      this.$refs.form.clearValidate('username')
+      this.$refs.form.clearValidate('password')
     }
   }
 }

src/views/resource/home/index.vue

@@ -13,9 +13,10 @@
         </ul>
       </div>
     </div>
-    <div class="slideshow">
+    <!-- <div class="slideshow">
 
-    </div>
+    </div> -->
+    <seamless-carousel />
     <div class="row">
       <div class="row-item" v-for="(item, index) in rowItem" :key="index">
           {{ item.title }}
@@ -63,8 +64,12 @@
 </template>
 
 <script>
+import SeamlessCarousel from '@/components/SeamlessCarousel.vue'
 export default {
   name: 'cleanEnergyHome',
+  components: {
+    SeamlessCarousel
+  },
   data () {
     return {
       rowItem: [
@@ -144,12 +149,6 @@ export default {
     }
   }
 
-  .slideshow{
-    width: 100%;
-    height: 825px;
-    background-color: paleturquoise;
-  }
-
   .row{
     width: 1320px;
     height: 210px;