Home Explore Help
Sign In
service-platform
/
web-test
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1

guhongwei 4 years ago
parent
0a0a9ac8af
commit
8918a63554
8 changed files with 271 additions and 96 deletions
Unified View Show Diff Stats
  1. 1 1
      package.json
  2. 0 2
      public/index.html
  3. 0 13
      public/static/home/css/swiper-bundle.min.css
  4. 0 14
      public/static/js/swiper-bundle.min.js
  5. 172 0
      src/components/swiper-frame.md
  6. 64 0
      src/components/swiper-frame.vue
  7. 16 31
      src/views/hall/direct.vue
  8. 18 35
      src/views/halltwo/directTwo.vue

+ 1 - 1
package.json
View File 

@@ -21,7 +21,7 @@
 
     "naf-core": "^0.1.2",
 
     "naf-core": "^0.1.2",
 
     "qrcode": "^1.4.4",
 
     "qrcode": "^1.4.4",
 
     "stomp": "^0.1.1",
 
     "stomp": "^0.1.1",
 
-    "swiper": "^6.3.5",
 
+    "swiper": "^5.3.6",
 
     "videojs-contrib-hls": "^5.15.0",
 
     "videojs-contrib-hls": "^5.15.0",
 
     "videojs-flash": "^2.2.1",
 
     "videojs-flash": "^2.2.1",
 
     "vue": "^2.6.11",
 
     "vue": "^2.6.11",

+ 0 - 2
public/index.html
View File 

@@ -5,8 +5,6 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <link rel="stylesheet" href="/platlive/static/home/css/swiper-bundle.min.css">
 
-    <script src="/platlive/static/js/swiper-bundle.min.js"></script>
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>

File diff suppressed because it is too large
+ 0 - 13
public/static/home/css/swiper-bundle.min.css


File diff suppressed because it is too large
+ 0 - 14
public/static/js/swiper-bundle.min.js


+ 172 - 0
src/components/swiper-frame.md
View File 

@@ -0,0 +1,172 @@
 
+# 组件文档说明
 
+
 
+## 下载依赖
 
+### npm install vue-awesome-swiper  --save
 
+### npm install swiper@5.3.6  --save
 
+
 
+## options设置
 
+### 1
 
+切换效果 fade cube coverflow flip
 
+effect: 'flip',
 
+样式设定
 
+fadeEffect: {
 
+淡出fade
 
+crossFade: true,
 
+方块切换 cube
 
+slideShadows: true,
 
+shadow: true,
 
+shadowOffset: 100,
 
+shadowScale: 0.6,
 
+coverflow
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+coverflowEffect: {
 
+  rotate: 30,
 
+  stretch: 10,
 
+  depth: 60,
 
+  modifier: 2,
 
+  slideShadows: true,
 
+},
 
+flip
 
+slideShadows: true,
 
+limitRotation: true,
 
+},
 
+### 2
 
+不可拖动文字
 
+noSwiping: true,
 
+### 3
 
+当你的Swiper在过渡时将无法滑动
 
+preventInteractionOnTransition : true,
 
+短切换，长切花
 
+shortSwipes: false,
 
+自由滑动，不知道滑过几个
 
+freeMode: true,
 
+### 4
 
+设置预览值 px
 
+slidesOffsetBefore: 100,
 
+显示多行
 
+slidesPerView: 3, //一行显示3个
 
+slidesPerColumn: 2, //显示2行
 
+### 5
 
+一页显示三个，一组为三个
 
+slidesPerView: 3,
 
+slidesPerGroup: 3,
 
+### 6
 
+slidesPerView: 2,
 
+//slidesPerView : 'auto',    根据slide的宽度自动调整展示数量。此时需要设置slide的宽度，如下style所示
 
+//slidesPerView : 3.7,
 
+### 7
 
+默认居中，并一页显示三个，第一条在左侧
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+centeredSlidesBounds: true,
 
+### 8
 
+默认居中，并一页显示三个，第一个在中间
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+### 9
 
+如果有一个数据时，所有分页，按钮，分页点全部失效
 
+watchOverflow: true,
 
+### 10
 
+滑过触发回调
 
+runCallbacksOnInit: true,
 
+on: {
 
+  slideChangeTransitionStart: function() {
 
+    选中值
 
+    console.log(this.activeIndex);
 
+  },
 
+},
 
+### 11
 
+自适应高度 随silde变化而变化
 
+autoHeight: true,
 
+### 12
 
+默认一页显示数
 
+slidesPerView: 4,
 
+数据间隔 px
 
+spaceBetween: 30,
 
+不同屏幕配置
 
+breakpoints: {
 
+  320: {
 
+    //当屏幕宽度大于等于320
 
+    slidesPerView: 2,
 
+    spaceBetween: 10,
 
+  },
 
+  768: {
 
+    //当屏幕宽度大于等于768
 
+    slidesPerView: 3,
 
+    spaceBetween: 20,
 
+  },
 
+  1280: {
 
+    //当屏幕宽度大于等于1280
 
+    slidesPerView: 4,
 
+    spaceBetween: 30,
 
+  },
 
+},
 
+### 13
 
+鼠标滑过显示小手
 
+grabCursor: true,
 
+### 14
 
+自动滑过贴合时间
 
+speed: 300,
 
+autoplay: {
 
+  默认3秒切换一次
 
+  delay: 3000,
 
+到最后一个自动停止
 
+stopOnLastSlide: true,
 
+触碰当前页自动停止
 
+disableOnInteraction: true,
 
+反向自动轮播
 
+reverseDirection: true,
 
+},
 
+### 15
 
+自动滑过
 
+autoplay: true,
 
+//鼠标覆盖停止自动切换
 
+### 16
 
+默认索引值，0：开始
 
+initialSlide: 0,
 
+### 17
 
+垂直切换选项
 
+direction: 'vertical',
 
+### 18
 
+循环轮播
 
+loop: true,
 
+### 19
 
+分页
 
+pagination: {
 
+el: '.swiper-pagination',
 
+clickable为true时，点击小点控制轮播
 
+clickable: true,
 
+分页类型
 
+type: 'bullets',//点
 
+type: 'fraction',//数字
 
+type: 'progressbar',//上条
 
+type: 'custom', //自定义
 
+progressbarOpposite: true,//progressbar-左条
 
+bulletElement: 'li',//指定标签
 
+dynamicBullets: true,//bullets-点数过多，隐藏
 
+dynamicMainBullets: 4,//显示点数量
 
+hideOnClick: true,//点击数据时，隐藏分页
 
+自定义点样式
 
+renderBullet: function(index, className) {
 
+  return '<span class="' + className + '">' + (index + 1) + '</span>';
 
+},
 
+设置分式
 
+type: 'fraction',
 
+renderFraction: function(currentClass, totalClass) {
 
+  return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>';
 
+},
 
+自定义点样式
 
+type: 'custom',
 
+renderCustom: function(swiper, current, total) {
 
+  return current + ' of ' + total;
 
+},
 
+bulletClass: 'my-bullet', //需设置.my-bullet样式
 
+bulletActiveClass: 'my-bullet-active', //需设置my-bullet-active样式
 
+},
 
+### 20
 
+按钮导航
 
+navigation: {
 
+  nextEl: '.swiper-button-next',
 
+  prevEl: '.swiper-button-prev',
 
+},

+ 64 - 0
src/components/swiper-frame.vue
View File 

@@ -0,0 +1,64 @@
 
+<template>
 
+  <div id="swiper-frame">
 
+    <div class="container">
 
+      <div class="swiper-box">
 
+        <swiper ref="mySwiper" :options="options">
 
+          <swiper-slide v-for="(item, index) in list" :key="index">
 
+            <slot v-bind="{ index, item }"></slot>
 
+          </swiper-slide>
 
+          <!-- 分页 -->
 
+          <div class="swiper-pagination" slot="pagination"></div>
 
+          <!-- 按钮导航 -->
 
+          <div class="swiper-button-prev" slot="button-prev"></div>
 
+          <div class="swiper-button-next" slot="button-next"></div>
 
+        </swiper>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
 
+import 'swiper/css/swiper.css';
 
+export default {
 
+  name: 'swiper-frame',
 
+  props: {
 
+    // 循环列表
 
+    list: { type: Array, default: () => [] },
 
+    // 配置文件
 
+    options: { type: Object, default: () => {} },
 
+  },
 
+  components: { Swiper, SwiperSlide },
 
+  data: function() {
 
+    return {};
 
+  },
 
+  created() {},
 
+  methods: {},
 
+  computed: {},
 
+  watch: {},
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.swiper-box {
 
+  .swiper-container {
 
+    height: 40px;
 
+  }
 
+}
 
+// 选中背景颜色，字颜色
 
+// .swiper-slide-active {
 
+//   background: #ff6600;
 
+//   color: #fff;
 
+// }
 
+// 设定固定值
 
+// .swiper-slide {
 
+//   width: 300px; /*设为固定值*/
 
+//   width: auto; /*根据内容调整宽度*/
 
+// }
 
+// 自定义按钮样式
 
+// .swiper-container {
 
+//   --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
 
+//   --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
 
+//   --swiper-navigation-size: 30px; /* 设置按钮大小 */
 
+// }
 
+</style>

+ 16 - 31
src/views/hall/direct.vue
View File 

@@ -64,21 +64,11 @@
 
                     </div>
 
                     </div>
 
                   </el-col>
 
                   </el-col>
 
                   <el-col :span="24" class="videoDown">
 
                   <el-col :span="24" class="videoDown">
 
-                    <div class="swiper-container">
 
-                      <div class="swiper-wrapper">
 
-                        <div
 
-                          v-for="(item, index) in videoData"
 
-                          :key="index"
 
-                          :class="`${menuIndex == index ? 'indexClass' : 'videodata'} swiper-slide`"
 
-                          @click="changeMenu(index, item)"
 
-                        >
 
-                          <p>第{{ index + 1 }}辑</p>
 
-                        </div>
 
-                      </div>
 
-                      <!-- 如果需要导航按钮 -->
 
-                      <div class="swiper-button-prev"></div>
 
-                      <div class="swiper-button-next"></div>
 
-                    </div>
 
+                    <swiper :list="videoData" :options="options">
 
+                      <template v-slot="{ index, item }">
 
+                        <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">第{{ index + 1 }}辑</p>
 
+                      </template>
 
+                    </swiper>
 
                   </el-col>
 
                   </el-col>
 
                 </el-col>
 
                 </el-col>
 
               </el-col>
 
               </el-col>
 
@@ -342,6 +332,7 @@ import expeDetail from '@/views/market/detail/expeDetail.vue';
 
 import trainList from './parts/trainList.vue';
 
 import trainList from './parts/trainList.vue';
 
 // 图文直播
 
 // 图文直播
 
 import imagetxtList from './parts/imagetxtList.vue';
 
 import imagetxtList from './parts/imagetxtList.vue';
 
+import swiper from '@c/swiper-frame.vue';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
 
 const { mapActions: dock } = createNamespacedHelpers('dock');
 
 const { mapActions: dock } = createNamespacedHelpers('dock');
 
 const { mapActions: market } = createNamespacedHelpers('market');
 
 const { mapActions: market } = createNamespacedHelpers('market');
 
@@ -363,6 +354,7 @@ export default {
 
     expeDetail, //专家详情
 
     expeDetail, //专家详情
 
     trainList, //交易列表
 
     trainList, //交易列表
 
     imagetxtList, //图文直播
 
     imagetxtList, //图文直播
 
+    swiper,
 
   },
 
   },
 
   data: () => ({
 
   data: () => ({
 
     // 对接会详情
 
     // 对接会详情
 
@@ -403,6 +395,15 @@ export default {
 
     zxzdlist: [],
 
     zxzdlist: [],
 
     // 路演
 
     // 路演
 
     xmlylist: [],
 
     xmlylist: [],
 
+    options: {
 
+      slidesPerView: 7,
 
+      spaceBetween: 10,
 
+      // 分页
 
+      navigation: {
 
+        nextEl: '.swiper-button-next',
 
+        prevEl: '.swiper-button-prev',
 
+      },
 
+    },
 
   }),
 
   }),
 
 
 
   async created() {
 
   async created() {
 
@@ -553,18 +554,6 @@ export default {
 
       let res = await this.dockFetch(this.dock_id);
 
       let res = await this.dockFetch(this.dock_id);
 
       if (this.$checkRes(res)) {
 
       if (this.$checkRes(res)) {
 
         this.$set(this, `videoData`, res.data.videodata);
 
         this.$set(this, `videoData`, res.data.videodata);
 
-        this.$nextTick(() => {
 
-          var mySwiper = new Swiper('.swiper-container', {
 
-            slidesPerView: 8,
 
-            centeredSlides: true,
 
-            centeredSlidesBounds: true,
 
-            // 如果需要前进后退按钮
 
-            navigation: {
 
-              nextEl: '.swiper-button-next',
 
-              prevEl: '.swiper-button-prev',
 
-            },
 
-          });
 
-        });
 
         this.changeMenu('0', this.videoData[0]);
 
         this.changeMenu('0', this.videoData[0]);
 
       }
 
       }
 
     },
 
     },
 
@@ -729,10 +718,6 @@ export default {
 
           height: 40px;
 
           height: 40px;
 
           overflow: hidden;
 
           overflow: hidden;
 
           border: 1px solid #ccc;
 
           border: 1px solid #ccc;
 
-          .swiper-container {
 
-            width: 100%;
 
-            height: 40px;
 
-          }
 
           .videodata {
 
           .videodata {
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             background: #cccccc8f;
 
             background: #cccccc8f;

+ 18 - 35
src/views/halltwo/directTwo.vue
View File 

@@ -112,21 +112,11 @@
 
                   </div>
 
                   </div>
 
                 </el-col>
 
                 </el-col>
 
                 <el-col :span="24" class="down">
 
                 <el-col :span="24" class="down">
 
-                  <div class="swiper-container">
 
-                    <div class="swiper-wrapper">
 
-                      <div
 
-                        v-for="(item, index) in videoData"
 
-                        :key="index"
 
-                        :class="`${menuIndex == index ? 'indexClass' : 'videodata'} swiper-slide`"
 
-                        @click="changeMenu(index, item)"
 
-                      >
 
-                        <p>第{{ index + 1 }}辑</p>
 
-                      </div>
 
-                    </div>
 
-                    <!-- 如果需要导航按钮 -->
 
-                    <div class="swiper-button-prev"></div>
 
-                    <div class="swiper-button-next"></div>
 
-                  </div>
 
+                  <swiper :list="videoData" :options="options">
 
+                    <template v-slot="{ index, item }">
 
+                      <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">第{{ index + 1 }}辑</p>
 
+                    </template>
 
+                  </swiper>
 
                 </el-col>
 
                 </el-col>
 
               </el-col>
 
               </el-col>
 
               <el-col :span="12" class="right">
 
               <el-col :span="12" class="right">
 
@@ -293,6 +283,7 @@ import { schoolList } from '@/util/school.js';
 
 import { adveronetList } from '@/util/adveronet.js';
 
 import { adveronetList } from '@/util/adveronet.js';
 
 // 业务联系
 
 // 业务联系
 
 import ywlx from './parts/ywlx.vue';
 
 import ywlx from './parts/ywlx.vue';
 
+import swiper from '@c/swiper-frame.vue';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
 
 import { mapState, createNamespacedHelpers } from 'vuex';
 
 const { mapActions: dock } = createNamespacedHelpers('dock');
 
 const { mapActions: dock } = createNamespacedHelpers('dock');
 
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
 
@@ -321,6 +312,7 @@ export default {
 
     dockchat,
 
     dockchat,
 
     // 业务联系
 
     // 业务联系
 
     ywlx,
 
     ywlx,
 
+    swiper,
 
   },
 
   },
 
   data: function() {
 
   data: function() {
 
     return {
 
     return {
 
@@ -376,6 +368,15 @@ export default {
 
       menuIndex: '0',
 
       menuIndex: '0',
 
       videoData: [],
 
       videoData: [],
 
       videoPath: '',
 
       videoPath: '',
 
+      options: {
 
+        slidesPerView: 7,
 
+        spaceBetween: 10,
 
+        // 分页
 
+        navigation: {
 
+          nextEl: '.swiper-button-next',
 
+          prevEl: '.swiper-button-prev',
 
+        },
 
+      },
 
     };
 
     };
 
   },
 
   },
 
   async created() {
 
   async created() {
 
@@ -526,18 +527,6 @@ export default {
 
       let res = await this.dockFetch(this.id);
 
       let res = await this.dockFetch(this.id);
 
       if (this.$checkRes(res)) {
 
       if (this.$checkRes(res)) {
 
         this.$set(this, `videoData`, res.data.videodata);
 
         this.$set(this, `videoData`, res.data.videodata);
 
-        this.$nextTick(() => {
 
-          var mySwiper = new Swiper('.swiper-container', {
 
-            slidesPerView: 7,
 
-            centeredSlides: true,
 
-            centeredSlidesBounds: true,
 
-            // 如果需要前进后退按钮
 
-            navigation: {
 
-              nextEl: '.swiper-button-next',
 
-              prevEl: '.swiper-button-prev',
 
-            },
 
-          });
 
-        });
 
         this.changeMenu('0', this.videoData[0]);
 
         this.changeMenu('0', this.videoData[0]);
 
       }
 
       }
 
     },
 
     },
 
@@ -741,7 +730,7 @@ export default {
 
       .left {
 
       .left {
 
         margin: 0 15px 0 0;
 
         margin: 0 15px 0 0;
 
         .top {
 
         .top {
 
-          height: 390px;
 
+          height: 400px;
 
           overflow: hidden;
 
           overflow: hidden;
 
           background: url('~@a/dock1.png');
 
           background: url('~@a/dock1.png');
 
           background-size: 100% 100%;
 
           background-size: 100% 100%;
 
@@ -773,20 +762,15 @@ export default {
 
           }
 
           }
 
         }
 
         }
 
         .down {
 
         .down {
 
-          height: 50px;
 
+          height: 40px;
 
           overflow: hidden;
 
           overflow: hidden;
 
           border: 1px solid #ccc;
 
           border: 1px solid #ccc;
 
-          .swiper-container {
 
-            width: 100%;
 
-            height: 50px;
 
-          }
 
           .videodata {
 
           .videodata {
 
             border-radius: 10px;
 
             border-radius: 10px;
 
             background: #cccccc8f;
 
             background: #cccccc8f;
 
             height: 39px;
 
             height: 39px;
 
             line-height: 39px;
 
             line-height: 39px;
 
             text-align: center;
 
             text-align: center;
 
-            margin: 0 5px;
 
             font-weight: bold;
 
             font-weight: bold;
 
           }
 
           }
 
           .videodata:hover {
 
           .videodata:hover {
 
@@ -799,7 +783,6 @@ export default {
 
             height: 39px;
 
             height: 39px;
 
             line-height: 39px;
 
             line-height: 39px;
 
             text-align: center;
 
             text-align: center;
 
-            margin: 0 5px;
 
             font-weight: bold;
 
             font-weight: bold;
 
             color: #fff;
 
             color: #fff;
 
             background: #409eff;
 
             background: #409eff;