4.9 18.20

2024-04-09 18:20:47 +08:00 · 2024-04-09 18:20:47 +08:00 · f920a5fe21
commit f920a5fe21
parent f5705c8235 0ab329e3e0
8 changed files with 198 additions and 114 deletions
--- a/src/components/HelloWorld.vue
+++ b/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>
--- a/src/components/SeamlessCarousel.vue
+++ b/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>
--- a/src/components/environmentCarousel.vue
+++ b/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>
--- a/src/views/environment/journalism/index.vue
+++ b/src/views/environment/journalism/index.vue
@ -24,17 +24,7 @@
      </el-menu>
    </div>
    <!-- 轮播图 -->
-    <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>
+    <environmentCarousel/>

    <!-- 新闻 -->
    <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',
--- a/src/views/environment/scheme/index.vue
+++ b/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">
-        <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>
+
+    <environmentCarousel/>
+
    <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;
--- a/src/views/index.vue
+++ b/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;
-    -moz-transition: all 0.5s;
-    -ms-transition: all 0.5s;
-    -o-transition: all 0.5s;
-    transition: all 0.5s;
+    -webkit-transition: all 0.8s;
+    -moz-transition: all 0.8s;
+    -ms-transition: all 0.8s;
+    -o-transition: all 0.8s;
+    transition: all 0.8s;
    animation-duration: 3s;
    animation-name: slidein;
    animation-delay: 0.5s;
--- a/src/views/login.vue
+++ b/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 === '') {
-        alert('账号或密码不能为空')
+      if (this.form.username === '' || this.form.password === '') {
+        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')
    }
  }
 }
--- a/src/views/resource/home/index.vue
+++ b/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;