更新轮播图

src/layout/index/contact.vue

@@ -8,7 +8,12 @@
         <p class="ii-text">服务热线：0431-85716395；0431-85717117;</p>
         <p class="ii-text">传真号码：0431-85717100</p>
         <p class="ii-text">邮箱地址：ccutjob@163.com</p> -->
-        <span v-html="site.content" v-if="site && site.content"></span>
+        <span
+          v-html="site.content"
+          v-if="site && site.content"
+          style="float: left;
+    padding: 0 10px;"
+        ></span>
       </el-col>
     </el-row>
   </div>

src/layout/index/lunbo.vue

@@ -5,12 +5,14 @@
         <el-col :span="24" class="lunboTop">
           <span>合作单位</span>
         </el-col>
-        <el-col :span="24">
-          <el-carousel height="270px" direction="vertical" :autoplay="true">
-            <el-carousel-item v-for="(item, index) in lunboList" :key="index" @click.native="toOpen(item.url)">
-              <img :src="item.pic" class="img" />
-            </el-carousel-item>
-          </el-carousel>
+        <el-col :span="24" class="lunboInfo">
+          <div class="box">
+            <div class="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
+              <el-col class="list" :span="24" v-for="(item, index) in lunboList" :key="index" @click.native="toOpen(item.url)">
+                <el-image class="image" :src="item.pic"></el-image>
+              </el-col>
+            </div>
+          </div>
         </el-col>
       </el-col>
     </el-row>
@@ -24,13 +26,40 @@ export default {
     lunboList: null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    animate: false,
+  }),
   created() {},
   computed: {},
+  mounted() {
+    this.timer1 = setInterval(this.scroll, 2000);
+  },
   methods: {
+    scroll() {
+      let con1 = this.$refs.con1;
+      con1.style.marginTop = '-105px';
+      this.animate = !this.animate;
+      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
+      setTimeout(function() {
+        that.lunboList.push(that.lunboList[0]);
+        that.lunboList.shift();
+        con1.style.marginTop = '0px';
+        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
+      }, 500);
+    },
+    mEnter() {
+      clearInterval(this.timer1);
+    },
+    mLeave() {
+      this.timer1 = setInterval(this.scroll, 1000);
+    },
     toOpen(url) {
-      if (url.includes('http')) window.open(url);
-      else window.open(`http://${url}`);
+      if (url === undefined) {
+        this.$message('此信息无网址');
+      } else {
+        if (url.includes('http')) window.open(url);
+        else window.open(`http://${url}`);
+      }
     },
   },
 };
@@ -49,9 +78,31 @@ export default {
   border-bottom: 1px solid #850000;
   padding: 0 5px;
 }
-.img {
-  max-width: 100%;
-  max-height: 100%;
-  vertical-align: middle;
+.lunboInfo {
+  float: left;
+  width: 100%;
+  height: 310px;
+  overflow: hidden;
+}
+.lunboInfo .list {
+  float: left;
+  width: 100%;
+  height: 90px;
+  margin: 0 0 15px 0;
+}
+.lunboInfo .list .image {
+  float: left;
+  width: 315px;
+  height: 90px;
+  border: 1px solid #ccc;
+  margin: 0 15px;
+}
+.box {
+  width: 100%;
+  height: 310px;
+  overflow: hidden;
+}
+.anim {
+  transition: all 0.5s;
 }
 </style>

src/views/index.vue

@@ -216,12 +216,12 @@ export default {
   height: 620px;
 }
 .mainWheel .wheelLeft .lunbo {
-  height: 270px;
-  margin: 0 0 40px 0;
+  height: 350px;
+  margin: 0 0 20px 0;
   overflow: hidden;
 }
 .mainWheel .wheelLeft .content {
-  height: 310px;
+  height: 250px;
   overflow: hidden;
 }
 .mainWheel .wheelRight {