first commit

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})

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>