7.28

admin/src/main.js

@@ -53,7 +53,7 @@ import DocAlert from '@/components/DocAlert'
 // 头部标签插件
 import VueMeta from 'vue-meta'
 
-Vue.use(directive)
+Vue.use(directive)+
 Vue.use(plugins)
 Vue.use(VueMeta)
 // Vue.use(hljs.vuePlugin);

admin/src/moudel/list/list.vue

@@ -0,0 +1,120 @@
+<template>
+  <div id="list">
+    <div class="main">
+      <div class="tab-header">
+        <div :class="flag == 1 ? 'item active' : 'item'" @click="flag = 1">
+          1
+        </div>
+        <div :class="flag == 2 ? 'item active' : 'item'" @click="flag = 2">
+          2
+        </div>
+        <div :class="flag == 3 ? 'item active' : 'item'" @click="flag = 3">
+          3
+        </div>
+      </div>
+      <div
+        class="box-list"
+        v-for="(item, i) in data"
+        :key="item.id"
+        v-show="flag == i + 1"
+      >
+        <ul>
+          <li v-for="child in item.children" :key="child.id">
+            <img src="../../assets/images/pic.png" alt="" />
+            <div>
+              <p>{{ child.name }}</p>
+              <p>时间</p>
+              <p>链接</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      flag: 1,
+      data: [
+        {
+          id: 1,
+          children: [
+            {
+              id: 5,
+              name: "1111111",
+            },
+          ],
+        },
+        {
+          id: 2,
+          children: [
+            {
+              id: 6,
+              name: "22222222",
+            },
+          ],
+        },
+        {
+          id: 3,
+          children: [
+            {
+              id: 7,
+              name: "333333333",
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+#list .main {
+  display: flex;
+  flex-direction: column;
+}
+.main .tab-header {
+  display: flex;
+  width: 90%;
+  align-self: center;
+  justify-content: space-around;
+}
+.item {
+  background-color: #8cdff0;
+  border: 1px solid pink;
+  width: 120px;
+  line-height: 20px;
+  text-align: center;
+  color: #4c404d;
+}
+.active {
+  background-color: pink;
+}
+.box-list {
+  border: 3px solid pink;
+  width: 90%;
+  align-self: center;
+}
+img {
+  width: 100px;
+  /* height: 200px; */
+  margin-right: 10px;
+}
+
+.box-list ul {
+  display: flex;
+  flex-direction: column;
+}
+.box-list ul li {
+  list-style: none;
+  display: flex;
+}
+.box-list ul li > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+</style>

admin/src/moudel/swipe/index.vue

@@ -1,131 +1,84 @@
 <template>
-  <div class="big-box">
+  <div class="view">
     <div class="img-box">
-      <div
-        class="show-box"
-        :style="{
-          transform: 'translateX(' + translate + 'px)',
+      <div class="show-box" :style="{
+          transform: 'translateX(' + translate + 'rem)',
           transition: tsion ? 'all 0.5s' : 'none',
-        }"
-      >
-        <img
-          v-for="(item, i) in src"
-          :key="i"
-          :src="item.img"
-          alt=""
-          class="imgg"
-        />
+        }" ref="swip">
+        <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
+        <img v-for="(item, i) in msg" :key="i" :src="item.img" alt="" class="imgg" />
+        <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
       </div>
     </div>
-    <div class="arrowhead-box" ref="swiper">
-      <span @click="last"
-        ><img
-          src="../../assets/OIP-C.jpg"
-          alt=""
-          style="height: 40px; width: 40px"
-      /></span>
-      <span @click="next"
-        ><img
-          src="../../assets/OIP-C.jpg"
-          alt=""
-          style="height: 40px; width: 40px"
-      /></span>
+    <div class="arrowhead-box">
+      <span @click="last"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
+      <span @click="next"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
     </div>
     <div class="swiper-boxs" ref="swiper">
-      <span v-for="(item, i) in src" :key="i"></span>
+      <span v-for="(item, i) in msg" :key="i" @click="swiper(i)"></span>
     </div>
-
-    <button @click="change1">改变颜色</button>
-    <button @click="change2">直角</button>
   </div>
 </template>
 
 <script>
 export default {
   name: "Banner",
-  data() {
+  props: {
+    msg: Array,
+    requirdd: true,
+  },
+  data () {
     return {
-      src: [
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-      ],
       translateX: 0,
       tsion: true,
     };
   },
   methods: {
-    change1() {
-      console.log(11);
-      let a = this.$refs.swiper.querySelectorAll("span");
-      a.forEach((element) => {
-        console.log(element);
-        element.style.width = "12px";
-        element.style.background = "red";
-      });
-    },
-
-    change2() {
-      console.log(22);
-      let a = this.$refs.swiper.querySelectorAll("span");
-      a.forEach((element) => {
-        console.log(element);
-        element.style.width = "12px";
-        element.style.borderRadius = "1px";
-      });
-    },
-
-    last() {
+    last () {
       this.translateX--;
       this.tsion = true;
       if (this.translateX < 0) {
         setTimeout(() => {
           this.tsion = false;
-          this.translateX = this.src.length - 1;
+          this.translateX = this.msg.length - 1;
         }, 500);
       }
     },
-    next() {
+    next () {
       this.translateX++;
       this.tsion = true;
-      if (this.translateX > this.src.length - 1) {
+      if (this.translateX > this.msg.length - 1) {
         setTimeout(() => {
           this.tsion = false;
           this.translateX = 0;
         }, 500);
       }
     },
-    swiper(i) {
+    swiper (i) {
       this.translateX = i;
     },
   },
-  mounted() {
+  mounted () {
     setInterval(() => {
       this.next();
     }, 3000);
   },
   computed: {
-    translate() {
-      return -(this.translateX + 1) * 1050;
+    translate () {
+      return -(this.translateX + 1) * 36;
     },
   },
   watch: {
     translateX: {
-      handler(val) {
+      handler (val) {
         let a = this.$refs.swiper.querySelectorAll("span");
         a.forEach((element) => {
           element.style.width = "12px";
         });
         if (this.translateX < 0) {
-          val = this.src.length - 1;
+          val = this.msg.length - 1;
         }
-        if (this.translateX > this.src.length - 1) {
+        if (this.translateX > this.msg.length - 1) {
           val = 0;
         }
         a[val].style.width = "30px";
@@ -141,11 +94,15 @@ body {
   background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
 }
 button {
-  width: 100px;
+  width: 90px;
   height: 85px;
-  margin-top: 100px;
+  margin-top: 10px;
+}
+.view {
+  width: 380px;
+  /* height: 160px; */
+  margin-top: 10px;
 }
-
 span {
   margin: 0;
   padding: 0;
@@ -160,25 +117,18 @@ span {
   margin-left: 2%;
 }
 
-/* .img-box {
-  width: 380px;
-  height: 160px;
-  overflow: hidden;
-} */
 .show-box {
   display: flex;
-  /* height: 30%;
-  width: 30%; */
   transition: all 0.5s;
 }
 .show-box img {
   float: left;
-  min-width: 500px;
+  min-width: 35rem;
   height: 200px;
 }
 .arrowhead-box {
-  position: absolute;
-  top: 40%;
+  position: fixed;
+  top: 160px;
   float: left;
   width: 100%;
   height: 50px;
@@ -186,12 +136,15 @@ span {
 .arrowhead-box span {
   float: left;
   display: block;
-  height: 60px;
+  /* height: 60px; */
   border-radius: 50px;
   background-position: 6px 14px;
   cursor: pointer;
   opacity: 0.5;
 }
+.arrowhead-box span img {
+  border-radius: 50px;
+}
 .arrowhead-box span:nth-child(2) {
   float: right;
   transform: rotate(180deg);
@@ -205,18 +158,20 @@ span {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: fixed;
+  top: 230px;
 }
 .swiper-boxs span {
   float: left;
   width: 12px;
   height: 12px;
-  background-color: white;
+  background-color: rgb(250, 177, 177);
   border-radius: 50px;
   margin-left: 10px;
   cursor: pointer;
   transition: all 0.5s;
 }
 .swiper-boxs span:nth-child(1) {
-  width: 100px;
+  width: 30px;
 }
 </style>

admin/src/moudel/swipe/index1.vue

@@ -1,161 +0,0 @@
- <template>
-  <div id="mySwiper">
-    <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
-      <slot></slot>
-    </div>
-
-    <div class="indicator">
-      <div class="indicatorItem" v-for="(item, index) in slideCount" :key="index" :class="{ active: index === currentIndex - 1 }"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Swiper",
-  props: {},
-  data: function () {
-    return {
-      slideCount: 0,
-      interval: 3000,
-      imgWidth: 0, //swiper每张图片的宽度一样
-      swiperStyle: {}, //利用swiper的style对象来控制着“过渡”
-      currentIndex: 1, //记录当前滑动的下标
-      scrolling: false, //当用手触摸和移动时,则暂停滚动
-      animalDuration: 300, //切换一张图片0.3
-      showIndicator: true, //当只有一张图片时，不显示小点点
-      moveRatio: 0.25,
-      playTimer: null, //控制着计时器的开始与暂停
-      moveRatio: 0.25
-    };
-  },
-  methods: {
-    handleDom: function () {
-      let swiperEle = document.querySelector(".swiper");
-      let slideEles = document.getElementsByClassName("slide");
-      this.slideCount = slideEles.length;
-      console.log(this.slideCount);
-      if (this.slideCount > 1) {
-        let cloneFirst = slideEles[0].cloneNode(true);
-        let cloneLast = slideEles[this.slideCount - 1].cloneNode(true);
-        swiperEle.insertBefore(cloneLast, slideEles[0]);
-        swiperEle.appendChild(cloneFirst);
-        console.log(slideEles);
-        this.imgWidth = swiperEle.offsetWidth;
-        this.swiperStyle = swiperEle.style;
-      }
-      //显示第一张图片（不是刚刚从最后面添加到前面的那张）
-      this.setTransform(-this.imgWidth);
-    },
-
-    startTimer: function () {
-      let that = this;
-      this.playTimer = setInterval(function () {
-        that.currentIndex++;
-        that.scrollContent(-that.currentIndex * that.imgWidth); //使用过渡实现移动轮播图，效果更舒适
-      }, that.interval);
-    },
-
-    setTransform: function (movePosition) {
-      //控制着轮播图向左右移动
-      this.swiperStyle.transform = `translateX(${movePosition}px)`;
-      this.swiperStyle["-webkit-transform"] = `translateX(${movePosition}px)`;
-      this.swiperStyle["-ms-transform"] = `translateX(${movePosition}px)`;
-    },
-
-    scrollContent: function (position) {
-      this.scrolling = true; //滚动时不能用手滑动图片
-      this.swiperStyle.transition = `transform ${this.animalDuration}ms ease`;
-      this.setTransform(position);
-      this.checkPosition();
-      this.scrolling = false;
-    },
-    checkPosition: function () {
-      //在确保“过渡”结束后再检查下标是否合理
-
-      let that = this;
-      setTimeout(function () {
-        that.swiperStyle.transition = "0ms";
-        if (that.currentIndex >= that.slideCount + 1) {
-          that.currentIndex = 1;
-          that.setTransform(-that.currentIndex * that.imgWidth); //当移动到最后一张，直接移动到第一张，不用过渡
-        } else if (that.currentIndex <= 0) {
-          that.currentIndex = that.slideCount;
-          that.setTransform(-that.currentIndex * that.imgWidth);
-        }
-      }, that.animalDuration);
-    },
-    touchStart: function (e) {
-      //如果图片正在滚动，则不能滑动图片
-      if (this.scrolling) return;
-      //滑动时，暂停计时器
-      this.stopTimer();
-      this.startX = e.touches[0].pageX; //记录手指进入屏幕的距离，用于判断划痕的距离判断是否滑动图片
-    },
-    touchMove: function (e) {
-      this.currentX = e.touches[0].pageX;
-      this.distance = this.currentX - this.startX;
-      let currentPosition = -this.currentIndex * this.imgWidth;
-      let moveDistance = this.distance + currentPosition;
-      this.setTransform(moveDistance);
-    },
-    touchEnd: function (e) {
-      let endDistance = Math.abs(this.distance); //取绝对值
-      let movePercentage = this.imgWidth * this.moveRatio; //当手指滑动到这个距离，则自动跳到下一张图片
-      if (this.distance === 0) {
-        return;
-      } else if (this.distance > 0 && endDistance > movePercentage) {
-        //this.distance>0 则说明手指向右滑
-        this.currentIndex--;
-      } else {
-        this.currentIndex++;
-      }
-      this.scrollContent(-this.currentIndex * this.imgWidth);
-      this.startTimer();
-    },
-    stopTimer: function () {
-      clearInterval(this.playTimer);
-    }
-  },
-  mounted: function () {
-    //1.操作dom，在前后添加slide
-    setTimeout(() => {
-      this.handleDom();
-      this.startTimer();
-    }, 200);
-  }
-};
-</script>
-
-<style>
-* {
-  margin: 0px;
-  padding: 0px;
-}
-#mySwiper {
-  overflow: hidden;
-  position: relative;
-}
-
-.swiper {
-  display: flex;
-}
-.indicator {
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  bottom: 12px;
-  width: 100%;
-}
-.indicatorItem {
-  width: 8px;
-  height: 8px;
-  margin: 5px 3px;
-  border-radius: 50%;
-  background-color: #fff;
-}
-.active {
-  background-color: rgba(212, 62, 46, 1);
-}
-</style>
-

admin/src/moudel/swipe/swiperitem.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="slide">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Slide"
-};
-</script>
-
-<style scoped>
-.slide {
-  width: 100%;
-  flex-shrink: 0;
-}
-
-.slide img {
-  width: 100%;
-}
-</style>
-
-

admin/src/moudel/tab/tab.vue

@@ -1,72 +1,29 @@
 <template>
   <div class="tab" ref="tabs">
-    <div class="tab_item" v-for="(item, index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
-      <img :src="$route.path === item.path ? item.icon : item.normal" alt="" />
-      <span :class="$route.path === item.path ? 'active' : ''">
-        {{ item.title }}</span>
+    <div class="tab_item" v-for="(item, index) in msg" :key="index" @click="switchToTab(item.path)">
+      <img :src="item.normal" alt="" />
+      <span :class="$route.path === item.path ? 'active' : ''">{{
+        item.title
+      }}</span>
     </div>
-    <button @click="change">change</button>
-    <button @click="change2">change2</button>
-    <!-- <a href="../../assets/OIP-C.jpg"></a> -->
   </div>
 </template>
 <script type="text/javascript">
 export default {
   name: "Tabbar",
+  props: {
+    msg: Array,
+    requirdd: true,
+  },
   data () {
     return {
-      src: [
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-        {
-          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
-        },
-      ],
-      translateX: 0,
-      tsion: true,
-
-      tabBarImg: [
-        {
-          path: "/home",
-          normal: require("../../assets/OIP-C.jpg"),
-          // icon: require('./../assets/images/ahome.png'),
-          title: "首页",
-        },
-        {
-          path: "/chat",
-          normal: require("../../assets/OIP-C.jpg"),
-          // icon: require('./../assets/images/ahead.png'),
-          title: "列表",
-        },
 
-        {
-          path: "/login",
-          normal: require("../../assets/OIP-C.jpg"),
-          // icon: require('./../assets/images/ahead.png'),
-          title: "我的",
-        },
-      ],
     };
   },
   methods: {
-    change () {
-      console.log(22);
-      // console.log(this.$refs);
-      let a = this.$refs.tabs.querySelectorAll("span");
-      a.forEach((element) => {
-        console.log(element);
-        element.style.color = "red";
-      });
-    },
-    change2 () {
-      console.log(22);
-    },
+
     switchToTab (path) {
-      // console.log(path);
+
       // this.$router.replace(path);
     },
   },
@@ -86,8 +43,10 @@ export default {
   bottom: 0;
   background: #fff;
   z-index: 999;
+  /* color: midnightblue; */
 }
 .tab_item {
+  /* background: white; */
   width: 100%;
   display: flex;
   align-items: center;
@@ -95,9 +54,13 @@ export default {
   flex-direction: column;
 }
 .tab_item img {
+  margin-top: 5px;
   width: 30px;
   height: 30px;
 }
+.tab_item span {
+  margin-top: -10px;
+}
 .active {
   color: blue;
 }

admin/src/moudel/tab/tab1.vue

@@ -1,35 +0,0 @@
-<template>
-  <footer>
-    <el-tabs :tab-position="tabPosition" style="height: 100px" class="tab">
-      <el-tab-pane label="用户管理">用户管理</el-tab-pane>
-      <el-tab-pane label="配置管理">配置管理</el-tab-pane>
-      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
-    </el-tabs>
-  </footer>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      tabPosition: "bottom",
-    };
-  },
-};
-</script>
-<style scope>
-.iconfont {
-  font-size: 20px;
-}
-.el-tabs__item {
-  flex: 1;
-}
-.tab {
-  position: relative;
-  top: 390px;
-}
-.el-tabs__nav {
-  width: 100%;
-  display: flex;
-  text-align: center;
-}
-</style>

admin/src/views/test/1index.vue

@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <swipe></swipe>
-    <tab></tab>
-  </div>
-</template>
-
-<script>
-import swipe from "../../moudel/swipe/index.vue";
-import tab from "../../moudel/tab/tab.vue";
-export default {
-  data() {
-    return {};
-  },
-  components: {
-    swipe,
-    tab,
-  },
-};
-</script>

admin/src/views/test/inde.vue

@@ -1,183 +0,0 @@
-<template>
-  <div class="big-box">
-    <div class="img-box">
-      <div class="show-box" :style="{
-          transform: 'translateX(' + translate + 'px)',
-          transition: tsion ? 'all 0.5s' : 'none',
-        }">
-        <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
-
-        <img v-for="(item, i) in src" :key="i" :src="item.img" alt="" />
-        <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
-      </div>
-    </div>
-    <div class="arrowhead-box" ref="swiper">
-      <span @click="last"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
-      <span @click="next"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
-    </div>
-    <div class="swiper-boxs" ref="swiper">
-      <span v-for="(item,i) in src" :key="i" @click="swiper(i)"></span>
-    </div>
-  </div>
-</template>
- 
-<script>
-export default {
-  name: "Banner",
-  data () {
-    return {
-      src: [
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-        { img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" },
-      ],
-      translateX: 0,
-      tsion: true,
-    };
-  },
-  methods: {
-    last () {
-      this.translateX--;
-      this.tsion = true;
-      if (this.translateX < 0) {
-        setTimeout(() => {
-          this.tsion = false;
-          this.translateX = this.src.length - 1;
-        }, 500);
-      }
-    },
-    next () {
-      this.translateX++;
-      this.tsion = true;
-      if (this.translateX > this.src.length - 1) {
-        setTimeout(() => {
-          this.tsion = false;
-          this.translateX = 0;
-        }, 500);
-      }
-    },
-    swiper (i) {
-      console.log(11)
-      this.translateX = i;
-    },
-  },
-  mounted () {
-    setInterval(() => {
-      this.next();
-    }, 3000);
-  },
-  computed: {
-    translate () {
-      return -(this.translateX + 1) * 1050;
-    },
-  },
-  watch: {
-    translateX: {
-      handler (val) {
-        let a = this.$refs.swiper.querySelectorAll("span");
-        a.forEach((element) => {
-          element.style.width = "12px";
-        });
-        if (this.translateX < 0) {
-          val = this.src.length - 1;
-        }
-        if (this.translateX > this.src.length - 1) {
-          val = 0;
-        }
-        a[val].style.width = "100px";
-      },
-    },
-  },
-};
-</script>
-<style scoped>
-body {
-  margin: 0;
-  padding: 0;
-  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
-}
-span {
-  margin: 0;
-  padding: 0;
-}
-.big-box {
-  width: 380px;
-  height: 200px;
-  background-color: #999;
-  margin: 10px auto;
-  position: fixed;
-  top: 2px;
-  left: 2px;
-  position: absolute;
-  /* margin-top: 11.6%;
-  margin-left: 16%; */
-  box-shadow: 0 0 3pc rgb(0, 0, 0, 0.4);
-}
-.img-box {
-  overflow: hidden;
-  /* height: 100%; */
-  width: 380px;
-}
-.show-box {
-  display: flex;
-  /* height: 100%; */
-  width: 380px;
-  transition: all 0.5s;
-}
-.show-box img {
-  float: left;
-  min-width: 500px;
-  height: 200px;
-}
-.arrowhead-box {
-  position: absolute;
-  top: 40%;
-  float: left;
-  width: 100%;
-  height: 50px;
-}
-.arrowhead-box span {
-  float: left;
-  display: block;
-  height: 60px;
-  border-radius: 50px;
-  /* background: url("../assets/img/banner2.jpg") no-repeat; */
-  /* background-color: rgb(0, 0, 0, 0.4); */
-  background-position: 6px 14px;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.arrowhead-box span:nth-child(2) {
-  float: right;
-  transform: rotate(180deg);
-}
-.arrowhead-box span:hover {
-  opacity: 1;
-}
-.swiper-boxs {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.swiper-boxs span {
-  float: left;
-  width: 12px;
-  height: 12px;
-  background-color: white;
-  border-radius: 50px;
-  margin-left: 10px;
-  cursor: pointer;
-  transition: all 0.5s;
-}
-.swiper-boxs span:nth-child(1) {
-  width: 100px;
-}
-</style>

admin/src/views/test/index.vue

@@ -1,24 +1,6 @@
 <template>
   <div>
-    <div class="view">
-      <div class="img-box">
-        <div class="show-box" :style="{
-            transform: 'translateX(' + translate + 'px)',
-            transition: tsion ? 'all 0.5s' : 'none',
-          }" ref="swip">
-          <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
-          <img v-for="(item, i) in src" :key="i" :src="item.img" alt="" class="imgg" />
-          <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
-        </div>
-      </div>
-      <div class="arrowhead-box">
-        <span @click="last"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
-        <span @click="next"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
-      </div>
-      <div class="swiper-boxs" ref="swiper">
-        <span v-for="(item, i) in src" :key="i" @click="swiper(i)"></span>
-      </div>
-    </div>
+    <swipe :msg="src" ref="aa"></swipe>
     <button @click="change3">多图轮播</button>
     <button @click="change2">圆角</button>
     <button @click="change1">颜色直角</button>
@@ -27,25 +9,20 @@
     <button @click="tabChange4">改变tab图片</button>
     <button @click="tabChange5">改变tab标题</button>
     <button @click="tabChange3">改变tab</button>
+    <tab :msg="tabBarImg" ref="bb"></tab>
 
-    <div class="tab" ref="tabs">
-      <div class="tab_item" v-for="(item, index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
-        <img :src="item.normal" alt="" />
-        <span :class="$route.path === item.path ? 'active' : ''">{{
-        item.title
-      }}</span>
-      </div>
-    </div>
-
+    <!-- <list></list> -->
   </div>
 </template>
 
 <script>
+import swipe from "../../moudel/swipe/index.vue";
+import tab from "../../moudel/tab/tab.vue";
+import list from "../../moudel/list/list.vue";
+
 export default {
   data () {
     return {
-      translateX: 0,
-      tsion: true,
       src: [
         {
           img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
@@ -56,101 +33,101 @@ export default {
         {
           img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
         },
-
       ],
       tabBarImg: [
         {
-          path: '/home',
-          normal: require('../../assets/首页.png'),
+          path: "/home",
+          normal: require("../../assets/首页.png"),
           // icon: require('./../assets/images/ahome.png'),
-          title: '首页'
+          title: "首页",
         },
         {
-          path: '/chat',
-          normal: require('../../assets/列表.png'),
+          path: "/chat",
+          normal: require("../../assets/列表.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '列表'
+          title: "列表",
         },
 
         {
-          path: '/login',
-          normal: require('../../assets/我的.png'),
+          path: "/login",
+          normal: require("../../assets/我的.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '我的'
+          title: "我的",
         },
-      ]
-
+      ],
     };
   },
+  components: {
+    swipe,
+    tab,
+    list,
+  },
   methods: {
-    //改变tab底色，文字颜色
-    tabChange3 () {
-      let a = this.$refs.tabs.querySelectorAll("div");
-      a.forEach((element) => {
-        element.style.background = "hotpink";
-        element.style.color = "white";
-      });
-    },
     //改变tab图片
     tabChange4 () {
       this.tabBarImg = [
         {
-          path: '/home',
-          normal: require('../../assets/蝴蝶结.png'),
+          path: "/home",
+          normal: require("../../assets/蝴蝶结.png"),
           // icon: require('./../assets/images/ahome.png'),
-          title: '首页'
+          title: "首页",
         },
         {
-          path: '/chat',
-          normal: require('../../assets/列表.png'),
+          path: "/chat",
+          normal: require("../../assets/列表.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '列表'
+          title: "列表",
         },
 
         {
-          path: '/login',
-          normal: require('../../assets/蝴蝶结.png'),
+          path: "/login",
+          normal: require("../../assets/蝴蝶结.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '我的'
+          title: "我的",
         },
         {
-          path: '/login',
-          normal: require('../../assets/我的.png'),
+          path: "/login",
+          normal: require("../../assets/我的.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '我的'
+          title: "我的",
         },
-
-      ]
-
+      ];
     },
-    //改变tab标题
+
     tabChange5 () {
       this.tabBarImg = [
         {
-          path: '/home',
-          normal: require('../../assets/首页.png'),
+          path: "/home",
+          normal: require("../../assets/首页.png"),
           // icon: require('./../assets/images/ahome.png'),
-          title: '啦啦啦啦啦'
+          title: "啦啦啦啦啦",
         },
         {
-          path: '/chat',
-          normal: require('../../assets/列表.png'),
+          path: "/chat",
+          normal: require("../../assets/列表.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '啦啦啦啦啦'
+          title: "啦啦啦啦啦",
         },
         {
-          path: '/login',
-          normal: require('../../assets/我的.png'),
+          path: "/login",
+          normal: require("../../assets/我的.png"),
           // icon: require('./../assets/images/ahead.png'),
-          title: '啦啦啦啦啦'
+          title: "啦啦啦啦啦",
         },
+      ];
+    },
 
-      ]
+    tabChange3 () {
+      let a = this.$refs.bb.$refs.tabs.querySelectorAll("div");
+      a.forEach((element) => {
+        element.style.background = "hotpink";
+        element.style.color = "white";
+      });
     },
-    //轮播五图
+
     change3 () {
-      console.log(11);
-      this.src = [
+      console.log(111);
+      let src = [
         {
           img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
         },
@@ -166,227 +143,36 @@ export default {
         {
           img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
         },
-
-      ]
+      ];
+      this.src = src;
+    },
+    change2 () {
+      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
+      a.forEach((element) => {
+        element.style.borderRadius = "50px";
+      });
     },
-    //改变轮播图分页器颜色圆角
     change1 () {
-      let a = this.$refs.swiper.querySelectorAll("span");
+      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
       a.forEach((element) => {
-
         element.style.width = "12px";
         element.style.background = "hotpink";
         element.style.borderRadius = "1px";
       });
     },
-
     change5 () {
-      // let a = this.$refs.swiper
-      // console.log(a)
-      // let b = this.$refs.swiper.querySelectorAll("span");
-      // b.forEach((element) => {
-      //   a.removeChild(element)
-      // });
-      let a = this.$refs.swiper.querySelectorAll("span");
+      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
       a.forEach((element) => {
-        element.style.display = "none"
-      });
-
-
-    },
-    change2 () {
-      let a = this.$refs.swiper.querySelectorAll("span");
-      a.forEach((element) => {
-        console.log(element);
-
-        element.style.borderRadius = "50px";
+        element.style.display = "none";
       });
     },
     change4 () {
-      let a = this.$refs.swip.querySelectorAll("img");
+      console.log(this.$refs.aa.$refs.swip);
+      let a = this.$refs.aa.$refs.swip.querySelectorAll("img");
       a.forEach((element) => {
-        console.log(element);
-
         element.style.borderRadius = "12px";
       });
     },
-    last () {
-      this.translateX--;
-      this.tsion = true;
-      if (this.translateX < 0) {
-        setTimeout(() => {
-          this.tsion = false;
-          this.translateX = this.src.length - 1;
-        }, 500);
-      }
-    },
-    next () {
-      this.translateX++;
-      this.tsion = true;
-      if (this.translateX > this.src.length - 1) {
-        setTimeout(() => {
-          this.tsion = false;
-          this.translateX = 0;
-        }, 500);
-      }
-    },
-    switchToTab (path) {
-      // console.log(path);
-      // this.$router.replace(path);
-    },
-    swiper (i) {
-      this.translateX = i;
-    },
-  },
-  mounted () {
-    setInterval(() => {
-      this.next();
-    }, 3000);
-  },
-  computed: {
-    translate () {
-      return -(this.translateX + 1) * 383;
-    },
-  },
-  watch: {
-    translateX: {
-      handler (val) {
-        let a = this.$refs.swiper.querySelectorAll("span");
-        a.forEach((element) => {
-          element.style.width = "12px";
-        });
-        if (this.translateX < 0) {
-          val = this.src.length - 1;
-        }
-        if (this.translateX > this.src.length - 1) {
-          val = 0;
-        }
-        a[val].style.width = "30px";
-      },
-    },
   },
 };
 </script>
-<style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-.tab {
-  width: 100%;
-  height: 10vh;
-  display: flex;
-  border-top: 1px solid #ccc;
-  position: fixed;
-  bottom: 0;
-  background: #fff;
-  z-index: 999;
-  /* color: midnightblue; */
-}
-.tab_item {
-  /* background: white; */
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  flex-direction: column;
-}
-.tab_item img {
-  margin-top: 5px;
-  width: 30px;
-  height: 30px;
-}
-.tab_item span {
-  margin-top: -10px;
-}
-.active {
-  color: blue;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
-}
-button {
-  width: 90px;
-  height: 85px;
-  margin-top: 10px;
-}
-.view {
-  width: 380px;
-  /* height: 160px; */
-  margin-top: 10px;
-}
-span {
-  margin: 0;
-  padding: 0;
-}
-.big-box {
-  width: 100%;
-  background-color: #999;
-  margin: 10px auto;
-  /* position: fixed; */
-  position: absolute;
-  margin-top: 2%;
-  margin-left: 2%;
-}
-
-.show-box {
-  display: flex;
-  transition: all 0.5s;
-}
-.show-box img {
-  float: left;
-  min-width: 384px;
-  height: 200px;
-}
-.arrowhead-box {
-  position: fixed;
-  top: 160px;
-  float: left;
-  width: 100%;
-  height: 50px;
-}
-.arrowhead-box span {
-  float: left;
-  display: block;
-  /* height: 60px; */
-  border-radius: 50px;
-  background-position: 6px 14px;
-  cursor: pointer;
-  opacity: 0.5;
-}
-.arrowhead-box span img {
-  border-radius: 50px;
-}
-.arrowhead-box span:nth-child(2) {
-  float: right;
-  transform: rotate(180deg);
-}
-.arrowhead-box span:hover {
-  opacity: 1;
-}
-.swiper-boxs {
-  width: 100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 230px;
-}
-.swiper-boxs span {
-  float: left;
-  width: 12px;
-  height: 12px;
-  background-color: rgb(250, 177, 177);
-  border-radius: 50px;
-  margin-left: 10px;
-  cursor: pointer;
-  transition: all 0.5s;
-}
-.swiper-boxs span:nth-child(1) {
-  width: 30px;
-}
-</style>

admin/src/views/test/index1.vue

@@ -0,0 +1,390 @@
+<template>
+  <div>
+    <div class="view">
+      <div class="img-box">
+        <div class="show-box" :style="{
+            transform: 'translateX(' + translate + 'px)',
+            transition: tsion ? 'all 0.5s' : 'none',
+          }" ref="swip">
+          <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
+          <img v-for="(item, i) in src" :key="i" :src="item.img" alt="" class="imgg" />
+          <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="" />
+        </div>
+      </div>
+      <div class="arrowhead-box">
+        <span @click="last"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
+        <span @click="next"><img src="../../assets/OIP-C.jpg" alt="" style="height: 40px; width: 40px" /></span>
+      </div>
+      <div class="swiper-boxs" ref="swiper">
+        <span v-for="(item, i) in src" :key="i" @click="swiper(i)"></span>
+      </div>
+    </div>
+    <button @click="change3">多图轮播</button>
+    <button @click="change2">圆角</button>
+    <button @click="change1">颜色直角</button>
+    <button @click="change5">删除分页</button>
+    <button @click="change4">图片直圆角</button>
+    <button @click="tabChange4">改变tab图片</button>
+    <button @click="tabChange5">改变tab标题</button>
+    <button @click="tabChange3">改变tab</button>
+
+    <div class="tab" ref="tabs">
+      <div class="tab_item" v-for="(item, index) in tabBarImg" :key="index" @click="switchToTab(item.path)">
+        <img :src="item.normal" alt="" />
+        <span :class="$route.path === item.path ? 'active' : ''">{{
+        item.title
+      }}</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      translateX: 0,
+      tsion: true,
+      src: [
+        {
+          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
+        },
+        {
+          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
+        },
+        {
+          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
+        },
+
+      ],
+      tabBarImg: [
+        {
+          path: '/home',
+          normal: require('../../assets/首页.png'),
+          // icon: require('./../assets/images/ahome.png'),
+          title: '首页'
+        },
+        {
+          path: '/chat',
+          normal: require('../../assets/列表.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '列表'
+        },
+
+        {
+          path: '/login',
+          normal: require('../../assets/我的.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '我的'
+        },
+      ]
+    };
+  },
+  methods: {
+    //改变tab底色，文字颜色
+    tabChange3 () {
+      let a = this.$refs.tabs.querySelectorAll("div");
+      a.forEach((element) => {
+        element.style.background = "hotpink";
+        element.style.color = "white";
+      });
+    },
+    //改变tab图片
+    tabChange4 () {
+      this.tabBarImg = [
+        {
+          path: '/home',
+          normal: require('../../assets/蝴蝶结.png'),
+          // icon: require('./../assets/images/ahome.png'),
+          title: '首页'
+        },
+        {
+          path: '/chat',
+          normal: require('../../assets/列表.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '列表'
+        },
+
+        {
+          path: '/login',
+          normal: require('../../assets/蝴蝶结.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '我的'
+        },
+        {
+          path: '/login',
+          normal: require('../../assets/我的.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '我的'
+        },
+
+      ]
+
+    },
+    //改变tab标题
+    tabChange5 () {
+      this.tabBarImg = [
+        {
+          path: '/home',
+          normal: require('../../assets/首页.png'),
+          // icon: require('./../assets/images/ahome.png'),
+          title: '啦啦啦啦啦'
+        },
+        {
+          path: '/chat',
+          normal: require('../../assets/列表.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '啦啦啦啦啦'
+        },
+        {
+          path: '/login',
+          normal: require('../../assets/我的.png'),
+          // icon: require('./../assets/images/ahead.png'),
+          title: '啦啦啦啦啦'
+        },
+
+      ]
+    },
+    //轮播五图
+    change3 () {
+
+      this.src = [
+        {
+          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
+        },
+        {
+          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
+        },
+        {
+          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
+        },
+        {
+          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
+        },
+        {
+          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
+        },
+
+      ]
+    },
+    //改变轮播图分页器颜色圆角
+    change1 () {
+      let a = this.$refs.swiper.querySelectorAll("span");
+      a.forEach((element) => {
+
+        element.style.width = "12px";
+        element.style.background = "hotpink";
+        element.style.borderRadius = "1px";
+      });
+    },
+
+    change5 () {
+      // let a = this.$refs.swiper
+      // console.log(a)
+      // let b = this.$refs.swiper.querySelectorAll("span");
+      // b.forEach((element) => {
+      //   a.removeChild(element)
+      // });
+      let a = this.$refs.swiper.querySelectorAll("span");
+      a.forEach((element) => {
+        element.style.display = "none"
+      });
+
+    },
+    change2 () {
+      let a = this.$refs.swiper.querySelectorAll("span");
+      a.forEach((element) => {
+
+
+        element.style.borderRadius = "50px";
+      });
+    },
+    change4 () {
+      let a = this.$refs.swip.querySelectorAll("img");
+      a.forEach((element) => {
+
+
+        element.style.borderRadius = "12px";
+      });
+    },
+    last () {
+      this.translateX--;
+      this.tsion = true;
+      if (this.translateX < 0) {
+        setTimeout(() => {
+          this.tsion = false;
+          this.translateX = this.src.length - 1;
+        }, 500);
+      }
+    },
+    next () {
+      this.translateX++;
+      this.tsion = true;
+      if (this.translateX > this.src.length - 1) {
+        setTimeout(() => {
+          this.tsion = false;
+          this.translateX = 0;
+        }, 500);
+      }
+    },
+    switchToTab (path) {
+
+      // this.$router.replace(path);
+    },
+    swiper (i) {
+      this.translateX = i;
+    },
+  },
+  mounted () {
+    setInterval(() => {
+      this.next();
+    }, 3000);
+  },
+  computed: {
+    translate () {
+      return -(this.translateX + 1) * 425;
+    },
+  },
+  watch: {
+    translateX: {
+      handler (val) {
+        let a = this.$refs.swiper.querySelectorAll("span");
+        a.forEach((element) => {
+          element.style.width = "12px";
+        });
+        if (this.translateX < 0) {
+          val = this.src.length - 1;
+        }
+        if (this.translateX > this.src.length - 1) {
+          val = 0;
+        }
+        a[val].style.width = "30px";
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+.tab {
+  width: 100%;
+  height: 10vh;
+  display: flex;
+  border-top: 1px solid #ccc;
+  position: fixed;
+  bottom: 0;
+  background: #fff;
+  z-index: 999;
+  /* color: midnightblue; */
+}
+.tab_item {
+  /* background: white; */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+}
+.tab_item img {
+  margin-top: 5px;
+  width: 30px;
+  height: 30px;
+}
+.tab_item span {
+  margin-top: -10px;
+}
+.active {
+  color: blue;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
+}
+button {
+  width: 90px;
+  height: 85px;
+  margin-top: 10px;
+}
+.view {
+  width: 380px;
+  /* height: 160px; */
+  margin-top: 10px;
+}
+span {
+  margin: 0;
+  padding: 0;
+}
+.big-box {
+  width: 100%;
+  background-color: #999;
+  margin: 10px auto;
+  /* position: fixed; */
+  position: absolute;
+  margin-top: 2%;
+  margin-left: 2%;
+}
+
+.show-box {
+  display: flex;
+  transition: all 0.5s;
+}
+.show-box img {
+  float: left;
+  min-width: 394px;
+  height: 200px;
+}
+.arrowhead-box {
+  position: fixed;
+  top: 160px;
+  float: left;
+  width: 100%;
+  height: 50px;
+}
+.arrowhead-box span {
+  float: left;
+  display: block;
+  /* height: 60px; */
+  border-radius: 50px;
+  background-position: 6px 14px;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.arrowhead-box span img {
+  border-radius: 50px;
+}
+.arrowhead-box span:nth-child(2) {
+  float: right;
+  transform: rotate(180deg);
+}
+.arrowhead-box span:hover {
+  opacity: 1;
+}
+.swiper-boxs {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 230px;
+}
+.swiper-boxs span {
+  float: left;
+  width: 12px;
+  height: 12px;
+  background-color: rgb(250, 177, 177);
+  border-radius: 50px;
+  margin-left: 10px;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+.swiper-boxs span:nth-child(1) {
+  width: 30px;
+}
+</style>