From ccabe846fb841a6864cb72c860f6f1db505f8554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=88=E5=AD=A6=E5=9D=A4?= <1107410514@qq.com>
Date: Tue, 24 Sep 2019 20:10:04 +0800
Subject: [PATCH] kun 19/9/24 20:10

---
 src/router.js                                 |   6 +
 src/store.js                                  |  12 +-
 src/views/homePage/homePage.vue               | 151 +++++++++++--
 src/views/homePage/newsDetails.vue            |  29 ++-
 src/views/homePage/newsList.vue               | 204 ++++++++++++++++++
 .../informationQuery/informationQuery.vue     | 154 ++++++++++---
 static/js/tool.js                             |  10 +
 tests/unit/shuffling.vue                      | 137 ++++++++++++
 8 files changed, 639 insertions(+), 64 deletions(-)
 create mode 100644 src/views/homePage/newsList.vue
 create mode 100644 static/js/tool.js
 create mode 100644 tests/unit/shuffling.vue

diff --git a/src/router.js b/src/router.js
index 290e663..03d88c9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -5,6 +5,7 @@ import Router from 'vue-router'
 import homePage from './views/homePage/homePage'
 import applyFor from './views/homePage/applyFor'
 import newsDetails from './views/homePage/newsDetails'
+import newsList from './views/homePage/newsList'
 /** 登录 */
 import login from './views/login/login'
 /** 注册 */
@@ -33,6 +34,11 @@ export default new Router({
   mode: 'hash',
   base: process.env.BASE_URL,
   routes: [
+    {
+      path: '/newsList',
+      name: 'newsList',
+      component: newsList
+    },
     {
       path: '/informationQuery',
       name: 'informationQuery',
diff --git a/src/store.js b/src/store.js
index 3c7424e..ef5f0b7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,13 +4,7 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
+  state: {},
+  mutations: {},
+  actions: {}
 })
diff --git a/src/views/homePage/homePage.vue b/src/views/homePage/homePage.vue
index c4119b1..f220e70 100644
--- a/src/views/homePage/homePage.vue
+++ b/src/views/homePage/homePage.vue
@@ -59,7 +59,7 @@
                 <img class="o" :src="imgUrl.gq" alt />
                 <span>党组织信息</span>
               </div>
-              <span @click="$jump('newsDetails')">更多>></span>
+              <span>更多>></span>
             </div>
             <div class="p">
               <div class="text">
@@ -84,11 +84,11 @@
                 <img class="n" :src="imgUrl.ws" alt />
                 <span>统一战线</span>
               </div>
-              <span @click="$jump('newsDetails')">更多>></span>
+              <span @click="$jump('newsList')">更多>></span>
             </div>
             <ul class="ulo">
               <template v-for="(item,index) in mmData">
-                <li :key="index" v-if="index<9">
+                <li :key="index" v-if="index<9" @click="$jump('newsDetails')">
                   <a href="javascript:void(0);">{{item.text}}</a>
                 </li>
               </template>
@@ -101,11 +101,11 @@
                 <img class="e" :src="imgUrl.zz" alt />
                 <span>组织生活</span>
               </div>
-              <span @click="$jump('newsDetails')">更多>></span>
+              <span @click="$jump('newsList')">更多>></span>
             </div>
             <ul class="ult">
               <template v-for="(item,index) in mmmData">
-                <li :key="index" v-if="index<9">
+                <li :key="index" v-if="index < 9" @click="$jump('newsDetails')">
                   <a href="javascript:void(0);">{{item.text}}</a>
                 </li>
               </template>
@@ -132,10 +132,27 @@
       <div class="container-four">
         <p class="title">党建矩阵</p>
         <div class="swiper-box-list">
-          <div class="swiper-container swiper-two">
+          <div id="img-box" class="f-row">
+            <template v-for="(list,index) in lists">
+              <div class="img-box" :key="index">
+                <img :src="imgUrl.img3" alt />
+                <p>中国政府网站</p>
+              </div>
+            </template>
+            <img
+              v-if="leftPos != 0"
+              @click="scrollFeeds('left')"
+              class="mv-btn left-side"
+              :src="imgUrl.left"
+              alt
+            />
+            <img @click="scrollFeeds('right')" class="mv-btn right-side" :src="imgUrl.right" alt />
+          </div>
+        </div>
+        <!-- <div class="swiper-container swiper-two">
             <div class="swiper-wrapper">
               <template v-for="(item,index) in list">
-                <div class="swiper-slide" :key="index">
+                <div class="swiper-slide" :key="index" v-if="index < 8">
                   <img :src="imgUrl.img3" alt />
                   <span>中国政府网站{{index+1}}</span>
                 </div>
@@ -143,8 +160,7 @@
             </div>
             <div class="swiper-button-prev"></div>
             <div class="swiper-button-next"></div>
-          </div>
-        </div>
+        </div>-->
       </div>
     </div>
     <footerNav class="footer"></footerNav>
@@ -167,6 +183,7 @@ export default {
   data() {
     return {
       index_num: 0,
+      leftPos: 0,
       imgUrl: {
         lb: require("../../../static/img/lb.png"),
         gq: require("../../../static/img/gq.png"),
@@ -261,7 +278,7 @@ export default {
             "活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
         }
       ],
-      list: [1, 2, 3, 4, 5, 6, 7, 8]
+      lists: [1, 2, 3, 4, 5, 6, 7, 8]
     };
   },
   computed: {},
@@ -281,29 +298,53 @@ export default {
         }
       });
     },
+    scrollFeeds: function(btn) {
+      let feeds = document.querySelector(".f-row");
+      if (btn === "left") {
+        this.leftPos += 460;
+        let scrollAmount = 0;
+        var slideTimer = setInterval(function() {
+          feeds.scrollLeft -= 10;
+          scrollAmount += 10;
+          if (scrollAmount >= 460) {
+            window.clearInterval(slideTimer);
+          }
+        }, 25);
+      } else {
+        this.leftPos -= 460;
+        let scrollAmount = 0;
+        // eslint-disable-next-line no-redeclare
+        var slideTimer = setInterval(function() {
+          feeds.scrollLeft += 10;
+          scrollAmount += 10;
+          if (scrollAmount >= 460) {
+            window.clearInterval(slideTimer);
+          }
+        }, 25);
+      }
+    }
+    /*
     initialSwiper() {
       var swiper = new Swiper(".swiper-two", {
         spaceBetween: 20,
-        slidesPerView: 4,
-        slidesPerGroup: 2,
-        /** loop: true,*/
+        slidesPerView: 18 / 4,
+        slidesPerGroup: 7 / 4,
         loopFillGroupWithBlank: true,
 
-        /** 如果需要前进后退按钮 */
+        // 如果需要前进后退按钮 
         navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev"
         },
 
-        observer: true /*启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。*/,
-        observeParents: true /*将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。*/
       });
     }
+    */
   },
   created() {},
   mounted() {
     this.initSwiper();
-    this.initialSwiper();
+    /*this.initialSwiper();*/
   }
 };
 </script>
@@ -332,18 +373,83 @@ export default {
 
     .swiper-box-list {
       width: 100%;
-      height: 196px;
+      height: 250px;
       box-sizing: border-box;
-      padding: 0 42px 0 4px;
-      display: flex;
+      padding: 0 42px 0 0px;
+      position: relative;
 
-      .swiper-button-prev.swiper-button-disabled,
-      .swiper-button-next.swiper-button-disabled {
+      .mv-btn {
+        cursor: pointer;
+        height: 60px;
+        width: 60px;
+        border-radius: 18px;
+        z-index: 20;
+        position: absolute;
+        &.left-side {
+          left: 0px;
+          top: 60px;
+        }
+        &.right-side {
+          right: 40px;
+          top: 60px;
+        }
+      }
+
+      #img-box {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        overflow-y: scroll;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .img-box {
+          width: 239px;
+          height: 196px;
+          background-color: #ffffff;
+          box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
+          border-radius: 5px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          margin-right: 20px;
+
+          img {
+            width: 239px;
+            height: 130px;
+            border-radius: 5px 5px 0px 0px;
+          }
+
+          p {
+            font-family: "MicrosoftYaHei";
+            font-size: 18px;
+            font-weight: bold;
+            font-stretch: normal;
+            line-height: 60px;
+            letter-spacing: 0px;
+            color: #333333;
+          }
+        }
+      }
+
+      /*
+      .swiper-button-prev.swiper-button-disabled {
         opacity: 0;
         cursor: auto;
         pointer-events: none;
       }
 
+      .swiper-button-next.swiper-button-disabled {
+        opacity: 1;
+        cursor: auto;
+        pointer-events: none;
+      }
+
       .swiper-button-prev {
         outline: none;
         position: absolute;
@@ -403,6 +509,7 @@ export default {
           color: #333333;
         }
       }
+      */
     }
 
     .title {
diff --git a/src/views/homePage/newsDetails.vue b/src/views/homePage/newsDetails.vue
index 386bd63..555b310 100644
--- a/src/views/homePage/newsDetails.vue
+++ b/src/views/homePage/newsDetails.vue
@@ -6,7 +6,11 @@
         <dl>
           <dt>
             <img class="one" :src="imgUrl.img5" alt />
-            <img class="two" :src="imgUrl.wjx" alt />
+            <span
+              @click="collection()"
+              class="iconfont icon-changyongtubiao-mianxing-"
+              :class="coll ? 'colorTrue' : 'colorFalse'"
+            ></span>
           </dt>
           <dd>
             <span class="d-o">因势而谋书写能源转型发展大文章</span>
@@ -30,7 +34,7 @@
         <h3>热点新闻</h3>
         <div>
           <template v-for="(item,index) in list">
-            <dl :key="index" v-if="index < 4">
+            <dl :key="index" v-if="index < 4" @click="$jump('newsDetails')">
               <dt>
                 <img :src="imgUrl.img4" alt />
               </dt>
@@ -63,6 +67,7 @@ export default {
   data() {
     return {
       index_num: 0,
+      coll: false,
       imgUrl: {
         img4: require("../../../static/img/img4.png"),
         img5: require("../../../static/img/img5.png"),
@@ -73,7 +78,11 @@ export default {
   },
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    collection() {
+      this.coll = !this.coll;
+    }
+  },
   created() {},
   mounted() {}
 };
@@ -133,9 +142,17 @@ export default {
             height: 494px;
           }
 
-          .two {
-            width: 28px;
-            height: 26px;
+          .colorFalse {
+            font-size: 28px;
+            color: #ccc;
+            position: absolute;
+            right: 0%;
+            bottom: 5%;
+          }
+
+          .colorTrue {
+            font-size: 28px;
+            color: #fec300;
             position: absolute;
             right: 0%;
             bottom: 5%;
diff --git a/src/views/homePage/newsList.vue b/src/views/homePage/newsList.vue
new file mode 100644
index 0000000..7955f85
--- /dev/null
+++ b/src/views/homePage/newsList.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="wrapper">
+    <headerNav :index_num="index_num"></headerNav>
+    <div id="box">
+      <template v-for="(list,index) in four">
+        <div id="news" :key="index" @click="$jump('newsDetails')">
+          <div class="news-box">
+            <img src="../../../static/img/img5.png" alt />
+            <section>
+              <h3>因势而谋书写能源转型发展大文章</h3>
+              <aside>
+                <span>来源:央视网</span>
+                <span>发布时间:2019-08-08</span>
+                <span>浏览量:11123</span>
+              </aside>
+              <p>近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义 近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义 近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义</p>
+            </section>
+          </div>
+        </div>
+      </template>
+      <!-- 分页按钮 -->
+      <div class="page">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          background
+          layout="prev, pager, next"
+          :total="10"
+        ></el-pagination>
+      </div>
+    </div>
+    <footerNav class="footer"></footerNav>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import headerNav from "../../components/headerNav";
+/* eslint-disable */
+import footerNav from "../../components/footerNav";
+export default {
+  components: {
+    headerNav,
+    footerNav
+  },
+  props: {},
+  data() {
+    return {
+      index_num: 0,
+      pageSize: 1,
+      currentPage: 1,
+      totalCount: 1,
+      four: [1, 2, 3, 4]
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    handleSizeChange(val) {
+      this.pageNum = val;
+      this.getPackData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getPackData();
+    },
+    getPackData() {}
+  },
+  created() {
+    this.currentPage = Number(localStorage.getItem("pagination")) || 1;
+    this.handleCurrentChange(this.currentPage);
+  },
+  mounted() {}
+};
+</script>
+
+<style lang='scss' scoped>
+.wrapper {
+  width: 1280px;
+  box-sizing: border-box;
+  position: relative;
+
+  #box {
+    width: 1200px;
+    background-color: #ffffff;
+    margin: 40px auto 80px;
+    box-sizing: border-box;
+    padding: 21px 30px 100px 11px;
+
+    .news-box {
+      width: 1159px;
+      height: 255px;
+      padding: 14px 7px 40px 19px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #e6e6e6;
+      margin-bottom: 26px;
+
+      img {
+        width: 290px;
+        height: 200px;
+        border-radius: 10px;
+      }
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      section {
+        width: 813px;
+        height: 96%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: flex-start;
+        h3 {
+          font-family: "MicrosoftYaHei";
+          font-size: 22px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #333333;
+        }
+
+        aside {
+          width: 434px;
+          height: 17px;
+          font-family: "MicrosoftYaHei";
+          font-size: 16px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #999999;
+        }
+
+        p {
+          width: 813px;
+          height: 100px;
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 36px;
+          letter-spacing: 0px;
+          color: #666666;
+          overflow: hidden;
+          -o-text-overflow: clip;
+          text-overflow: clip;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+          white-space: normal;
+        }
+      }
+    }
+
+    .page {
+      margin-top: 60px;
+      height: 36px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      /deep/ .el-pagination.is-background .el-pager li {
+        color: #333 !important;
+      }
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background-color: #e60012;
+        color: #fff !important;
+      }
+
+      /deep/ .el-icon.el-icon-arrow-left::before {
+        content: "上一页";
+        font-family: "MicrosoftYaHei";
+        font-size: 12px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 1px;
+        color: #666;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        width: 80px;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        width: 80px;
+      }
+
+      /deep/ .el-icon.el-icon-arrow-right::before {
+        content: "下一页";
+        font-family: "MicrosoftYaHei";
+        font-size: 12px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 1px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/informationQuery/informationQuery.vue b/src/views/informationQuery/informationQuery.vue
index 7981d25..ba17dfd 100644
--- a/src/views/informationQuery/informationQuery.vue
+++ b/src/views/informationQuery/informationQuery.vue
@@ -4,8 +4,8 @@
     <div id="box">
       <!-- 搜索框 -->
       <div class="search">
-        <input type="text" placeholder="请输入搜索内容" />
-        <label for>搜索</label>
+        <input type="text" placeholder="请输入搜索内容" v-model.trim="searchVal" />
+        <label @click="getSearch()">搜索</label>
       </div>
       <!-- 分类搜索 -->
       <div class="select-box">
@@ -55,20 +55,41 @@
             <th>成立登记日期</th>
             <th>状态</th>
           </tr>
-          <tr v-for="(item,index) in sData" :key="index" :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'">
-            <td>{{item.id}}</td>
-            <td>{{item.zuzhi}}</td>
-            <td>{{item.daima}}</td>
-            <td>{{item.type}}</td>
-            <td>{{item.dbr}}</td>
-            <td>{{item.date}}</td>
-            <td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
-            <td v-if="item.zt == 1" style="color:#e13232">异常</td>
-          </tr>
+          <template v-if="searchValue.length == 0">
+            <tr
+              v-for="(item,index) in sData"
+              :key="index"
+              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
+            >
+              <td>{{item.id}}</td>
+              <td>{{item.organization}}</td>
+              <td>{{item.credit}}</td>
+              <td>{{item.type}}</td>
+              <td>{{item.representative}}</td>
+              <td>{{item.date}}</td>
+              <td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
+              <td v-if="item.zt == 1" style="color:#e13232">异常</td>
+            </tr>
+          </template>
+          <template v-if="searchValue.length > 0">
+            <tr
+              v-for="(item,index) in searchValue"
+              :key="index"
+              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
+            >
+              <td v-html="item.id">{{item.id}}</td>
+              <td v-html="item.organization">{{item.organization}}</td>
+              <td v-html="item.credit">{{item.credit}}</td>
+              <td v-html="item.type">{{item.type}}</td>
+              <td v-html="item.representative">{{item.representative}}</td>
+              <td v-html="item.date">{{item.date}}</td>
+              <td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
+              <td v-if="item.zt == 1" style="color:#e13232">异常</td>
+            </tr>
+          </template>
         </table>
       </div>
     </div>
-
     <footerNav class="footer"></footerNav>
   </div>
 </template>
@@ -78,6 +99,7 @@
 import headerNav from "../../components/headerNav";
 /* eslint-disable */
 import footerNav from "../../components/footerNav";
+
 export default {
   components: {
     headerNav,
@@ -92,32 +114,61 @@ export default {
       imgUrl: {
         xa: require("../../../static/img/xa.png")
       },
+      searchVal: "",
+      searchValue: [],
       sData: [
         {
           id: 1,
-          zuzhi: "劳动经济学会",
-          daima: "51100000MJ000035X2",
-          type: "社会团体",
-          dbr: "王五",
-          date: "2019-10-14",
+          organization: "劳动经济学会",
+          credit: "51100000MJ000035X2",
+          type: "团体",
+          representative: "王五",
+          date: "2019-01-14",
           zt: 0
         },
         {
           id: 2,
-          zuzhi: "劳动经济学会",
-          daima: "51100000MJ000035X2",
-          type: "社会团体",
-          dbr: "王五",
+          organization: "华为",
+          credit: "51100000MJ000035X2",
+          type: "社会",
+          representative: "李四",
+          date: "2019-10-14",
+          zt: 1
+        },
+        {
+          id: 4,
+          organization: "华为",
+          credit: "51100000MJ000035X2",
+          type: "社会",
+          representative: "李四",
+          date: "2019-10-14",
+          zt: 1
+        },
+        {
+          id: 5,
+          organization: "华为",
+          credit: "51100000MJ000035X2",
+          type: "社会",
+          representative: "李四",
+          date: "2019-10-14",
+          zt: 1
+        },
+        {
+          id: 6,
+          organization: "华为",
+          credit: "51100000MJ000035X2",
+          type: "社会",
+          representative: "李四",
           date: "2019-10-14",
           zt: 1
         },
         {
           id: 3,
-          zuzhi: "劳动经济学会",
-          daima: "51100000MJ000035X2",
-          type: "社会团体",
-          dbr: "王五",
-          date: "2019-10-14",
+          organization: "小米",
+          credit: "51100000MJ000035X2",
+          type: "手机",
+          representative: "张三",
+          date: "2019-11-14",
           zt: 0
         }
       ]
@@ -126,11 +177,60 @@ export default {
   computed: {},
   watch: {},
   methods: {
+    /** 搜索函数 */
+    getSearch() {
+      this.searchValue = [];
+      if (this.searchVal === "") {
+        this.$message.warning("请输入搜索内容");
+        return;
+      }
+      this.sData.forEach((item, index) => {
+        if (
+          item.organization.indexOf(this.searchVal) > -1 ||
+          item.credit.indexOf(this.searchVal) > -1 ||
+          item.type.indexOf(this.searchVal) > -1 ||
+          item.representative.indexOf(this.searchVal) > -1 ||
+          item.date.indexOf(this.searchVal) > -1
+        ) {
+          this.searchValue.push(item);
+        }
+      });
+
+      /*
+      if (this.searchValue != "") {
+        this.searchValue.map(item => {
+          //遍历
+          item.organization = this.brightKeyword(item.organization);
+          item.credit = this.brightKeyword(item.credit);
+          item.type = this.brightKeyword(item.type);
+          item.representative = this.brightKeyword(item.representative);
+          item.date = this.brightKeyword(item.date);
+        }); //到这里search方法结束
+      }
+      */
+      this.searchVal = "";
+    },
+
+    /** 高亮函数 */
+    /*
+    brightKeyword(val) {
+      let keyword = this.searchVal; //获取输入框输入的内容
+      if (val.indexOf(keyword) !== -1) {
+        //判断这个字段中是否包含keyword
+        //如果包含的话，就把这个字段中的那一部分进行替换成html字符
+        return val.replace(keyword, `<mark>${keyword}</mark>`);
+      } else {
+        return val;
+      }
+      val = "";
+    },*/
+
     btn(index) {
       let s = this.sub;
       s = index;
       this.sub = s;
     },
+
     getData() {}
   },
   created() {},
diff --git a/static/js/tool.js b/static/js/tool.js
new file mode 100644
index 0000000..747ac02
--- /dev/null
+++ b/static/js/tool.js
@@ -0,0 +1,10 @@
+/** 筛选函数 */
+export function multiFilter (array, filters) {
+  const filterKeys = Object.keys(filters)
+  return array.filter(item => {
+    return filterKeys.every(key => {
+      if (!filters[key].length) return true
+      return !!~filters[key].indexOf(item[key])
+    })
+  })
+}
diff --git a/tests/unit/shuffling.vue b/tests/unit/shuffling.vue
new file mode 100644
index 0000000..ec505dd
--- /dev/null
+++ b/tests/unit/shuffling.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="wrapper">
+    <div id="img-box" class="f-row">
+      <template v-for="(list,index) in lists">
+        <div class="img-box" :key="index">
+          <img src="../../static/img/img3.png" alt />
+          <p>中国政府网站</p>
+        </div>
+      </template>
+    </div>
+    <img
+      v-if="leftPos != 0"
+      @click="scrollFeeds('left')"
+      class="mv-btn left-side"
+      src="../../static/img/left.png"
+      alt
+    />
+    <img
+      @click="scrollFeeds('right')"
+      class="mv-btn right-side"
+      src="../../static/img/right.png"
+      alt
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data () {
+    return {
+      lists: [1, 2, 3, 4, 5, 6, 7],
+      leftPos: 0
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    scrollFeeds: function (btn) {
+      let feeds = document.querySelector('.f-row')
+      if (btn === 'left') {
+        this.leftPos += 460
+        let scrollAmount = 0
+        var slideTimer = setInterval(function () {
+          feeds.scrollLeft -= 10
+          scrollAmount += 10
+          if (scrollAmount >= 460) {
+            window.clearInterval(slideTimer)
+          }
+        }, 25)
+      } else {
+        this.leftPos -= 460
+        let scrollAmount = 0
+        // eslint-disable-next-line no-redeclare
+        var slideTimer = setInterval(function () {
+          feeds.scrollLeft += 10
+          scrollAmount += 10
+          if (scrollAmount >= 460) {
+            window.clearInterval(slideTimer)
+          }
+        }, 25)
+      }
+    }
+  },
+  created () {},
+  mounted () {}
+}
+</script>
+
+<style lang='scss' scoped>
+.wrapper {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+
+  #img-box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    overflow-y: scroll;
+    position: relative;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .img-box {
+      width: 239px;
+      height: 196px;
+      background-color: #ffffff;
+      box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin-right: 20px;
+
+      img {
+        width: 239px;
+        height: 130px;
+        border-radius: 5px 5px 0px 0px;
+      }
+
+      p {
+        font-family: "MicrosoftYaHei";
+        font-size: 18px;
+        font-weight: bold;
+        font-stretch: normal;
+        line-height: 60px;
+        letter-spacing: 0px;
+        color: #333333;
+      }
+    }
+  }
+
+  .mv-btn {
+    cursor: pointer;
+    height: 60px;
+    width: 60px;
+    border-radius: 18px;
+    z-index: 20;
+    position: absolute;
+    &.left-side {
+      left: -18px;
+      top: 115px;
+    }
+    &.right-side {
+      right: -18px;
+      top: 115px;
+    }
+  }
+}
+</style>