调整”机构介绍“页面位置

ruoyi-ui/package.json

@@ -53,6 +53,8 @@
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",
         "jspdf": "^2.5.1",
+        "less": "^4.1.3",
+        "less-loader": "^7.3.0",
         "moment": "^2.29.3",
         "nprogress": "0.2.0",
         "quill": "1.3.7",

ruoyi-ui/src/components/ImageSwipe/index.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="m-slider" @mouseenter="onStop" @mouseleave="onStart">
+      <div class="m-panel" ref="slider" :style="`width: ${width}px;`">
+        <div
+          v-for="(item, index) in imageData"
+          :key="index"
+          class="m-image">
+          <img :src="item.src" :alt="item.title"/>
+          <p class="u-img-title" :title="item.title">{{ item.title }}</p>
+        </div>
+        <div class="m-image">
+          <img :src="imageData[0].src" :alt="imageData[0].title"/>
+          <p class="u-img-title" :title="imageData[0].title">{{ imageData[0].title }}</p>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+export default {
+  name: 'ImageSlider',
+  props: {
+    imageData: { // 图片数组
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    interval: { // 滑动轮播间隔
+      type: Number,
+      default: 3000
+    }
+  },
+  data () {
+    return {
+      visibilityChangeEvent: '',
+      timer: null,
+      imgWidth: 400, // 图片宽度，用于生成容器宽度
+      activeIndex: 0 // 当前展示的图片
+    }
+  },
+  computed: {
+    width () {
+      return (this.imageData.length + 1) * this.imgWidth
+    }
+  },
+  created () {
+    var hiddenProperty = 'hidden' in document ? 'hidden'
+      : 'webkitHidden' in document ? 'webkitHidden'
+        : 'mozHidden' in document ? 'mozHidden'
+          : null
+    this.visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange')
+    var onVisibilityChange = () => {
+      if (!document[hiddenProperty]) {
+        this.onStart()
+        console.log('页面激活')
+      } else {
+        this.onStop()
+        console.log('页面非激活')
+      }
+    }
+    document.addEventListener(this.visibilityChangeEvent, onVisibilityChange)
+    setTimeout(() => {
+      this.timer = setInterval(() => { // 自动切换
+        this.onMove()
+      }, this.interval)
+    }, this.interval)
+  },
+  methods: {
+    // 滑动动画效果
+    slideEffect (target) {
+      const offsetLeft = this.$refs.slider.offsetLeft // 求出元素的当前偏移位置
+      let step = (target - offsetLeft) / 10 // 由快到慢的过渡效果
+      step = step > 0 ? Math.ceil(step) : Math.floor(step) // 对每次移动的距离取整，ceil：向上取整，floor：向下取整
+      setTimeout(() => {
+        if (target !== offsetLeft) {
+          this.$refs.slider.style.left = offsetLeft + step + 'px' // 移动
+          this.slideEffect(target)
+        }
+      }, 15) // 每隔15ms执行一次
+    },
+    onSlider (moveX) {
+      const offset = this.$refs.slider.offsetLeft
+      const target = offset + moveX // 要移动的目标位置
+      this.slideEffect(target)
+    },
+    onMove () {
+      if (this.activeIndex === this.imageData.length - 1) { // 最后一张
+        this.activeIndex = 0 // 显示第一张
+        this.$refs.slider.style.left = 0
+        this.onSlider(-this.imgWidth)
+      } else {
+        this.activeIndex++ // 显示下一张
+        this.onSlider(-this.imgWidth)
+      }
+    },
+    onStop () {
+      clearInterval(this.timer)
+      this.timer = null
+    },
+    onStart () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.onMove()
+      }, this.interval)
+    },
+    beforeDestroy () {
+      document.removeEventListener(this.visibilityChangeEvent)
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@themeColor: #D93844;
+.m-slider {
+  margin: 100px auto;
+  width: 400px;
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+    .m-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    // width: 1600px; // (图片数组长度+1) * 图片宽度
+    height: 300px;
+     .m-image {
+      float: left;
+      width: 400px;
+      height: 300px;
+      img {
+        width: 400px;
+        height: 270px;
+        cursor: pointer;
+        }
+      .u-img-title {
+        width: 400px;
+        font-size: 16px;
+        color: #333;
+        line-height: 30px;
+        overflow: hidden;
+        text-align: left;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+          &:hover {
+          font-size: 16px;
+          color: @themeColor;
+          }
+        }
+     }
+  }
+}
+</style>

ruoyi-ui/src/main.js

@@ -47,6 +47,7 @@ import FileObsUpload from '@/components/FileObsUpload'
 
 // 图片上传组件
 import ImageUpload from '@/components/ImageUpload'
+import ImageSwipe from '@/components/ImageSwipe'
 // 图片预览组件
 import ImagePreview from '@/components/ImagePreview'
 // 字典标签组件
@@ -168,6 +169,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('FileObsUpload', FileObsUpload)
 Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImageSwipe', ImageSwipe)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('RegionCascaderSelect', RegionCascaderSelect)
 Vue.component('DeptCascader', DeptCascader)

ruoyi-ui/src/views/organization/jggl/jcxx/index.vue

@@ -45,38 +45,39 @@
               </el-form-item>
             </el-form-item>
           </div>
-          <div class="formFlex">
-            <el-form-item label="定位" class="contenrFlex" prop="lat">
-	            {{ form.lat && form.lng ? form.lng + ',' + form.lat : '' }}
-              <el-button type="primary" @click="openDw" style="margin-left: 15px">
-                获取
-              </el-button>
-              <el-button
-                type="primary"
-                @click="clearDw"
-                style="margin-left: 15px"
-              >
-                清空
-              </el-button>
-            </el-form-item>
 
-          </div>
           <div class="formFlex">
-            <el-form-item label="机构图片" prop="jgUrl" class="contenrFlex">
-              <image-upload v-model="form.jgUrl"></image-upload>
-            </el-form-item>
-          </div>
+            <div>
+              <el-form-item label="定位" class="contenrFlex" prop="lat">
+                {{ form.lat && form.lng ? form.lng + ',' + form.lat : '' }}
+                <el-button type="primary" @click="openDw" style="margin-left: 15px">
+                  获取
+                </el-button>
+                <el-button
+                  type="primary"
+                  @click="clearDw"
+                  style="margin-left: 15px"
+                >
+                  清空
+                </el-button>
+              </el-form-item>
+              <el-form-item label="机构图片" prop="jgUrl" class="contenrFlex">
+                <image-upload v-model="form.jgUrl"></image-upload>
+              </el-form-item>
+            </div>
+            <div>
+              <el-form :inline="true" ref="form" :model="form2" label-width="270px">
 
+                  <el-form-item label="机构介绍" prop="jgjs" class="contenrFlex" >
+                    <el-col style="width: 300px">
+                      <el-input v-model="form2.jgjs" :rows="12" type="textarea" />
+                    </el-col>
+                  </el-form-item>
+
+              </el-form>
+            </div>
+          </div>
 
-            <el-form :inline="true" ref="form" :model="form2" label-width="270px">
-              <div class="formFlex">
-                <el-form-item label="机构介绍" prop="jgjs" class="contenrFlex" >
-                  <el-col style="width: 300px">
-                  <el-input v-model="form2.jgjs" :rows="5" type="textarea" />
-                  </el-col>
-                </el-form-item>
-              </div>
-            </el-form>
 
 
         </div>
@@ -1761,7 +1762,7 @@ export default {
   .titleMonth {
     position: absolute;
     left: -58px;
-    top: 10px;
+    top: -95px;
     font-size: 16px;
     color: #99a9bf;
   }

ruoyi-ui/src/views/organization/jggl/sqJcxx/index.vue

@@ -65,39 +65,42 @@
             </el-form-item>
           </div>
           <div class="formFlex">
-            <el-form-item label="定位" class="contenrFlex" prop="lat">
-              {{ form.lat && form.lng ? form.lng + "," + form.lat : "" }}
-              <el-button
-                type="primary"
-                @click="openDw"
-                style="margin-left: 15px"
-              >
-                获取
-              </el-button>
-              <el-button
-                type="primary"
-                @click="clearDw"
-                style="margin-left: 15px"
-              >
-                清空
-              </el-button>
-            </el-form-item>
-          </div>
-          <div class="formFlex">
-            <el-form-item label="机构图片" prop="jgUrl" class="contenrFlex">
-              <image-upload v-model="form.jgUrl"></image-upload>
-            </el-form-item>
-          </div>
-
-          <el-form :inline="true" ref="form" :model="form2" label-width="270px">
-            <div class="formFlex">
-              <el-form-item label="机构介绍" prop="jgjs" class="contenrFlex" >
-                <el-col style="width: 300px">
-                  <el-input v-model="form2.jgjs" :rows="5" type="textarea" />
-                </el-col>
+            <div>
+              <el-form-item label="定位" class="contenrFlex" prop="lat">
+                {{ form.lat && form.lng ? form.lng + "," + form.lat : "" }}
+                <el-button
+                  type="primary"
+                  @click="openDw"
+                  style="margin-left: 15px"
+                >
+                  获取
+                </el-button>
+                <el-button
+                  type="primary"
+                  @click="clearDw"
+                  style="margin-left: 15px"
+                >
+                  清空
+                </el-button>
               </el-form-item>
+              <el-form-item label="机构图片" prop="jgUrl" class="contenrFlex">
+                <image-upload v-model="form.jgUrl"></image-upload>
+              </el-form-item>
+            </div>
+            <div>
+              <el-form :inline="true" ref="form" :model="form2" label-width="270px">
+                <div class="formFlex">
+                  <el-form-item label="机构介绍" prop="jgjs" class="contenrFlex" >
+                    <el-col style="width: 300px">
+                      <el-input v-model="form2.jgjs" :rows="12" type="textarea" />
+                    </el-col>
+                  </el-form-item>
+                </div>
+              </el-form>
             </div>
-          </el-form>
+          </div>
+
+
 
         </div>
       </div>