7.13轮播，tab

admin/package.json

@@ -77,30 +77,31 @@
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
+    "@vue/compiler-sfc": "^3.0.1",
+    "@vue/eslint-config-prettier": "^5.0.0",
     "babel-eslint": "10.1.0",
+    "bpmn-js": "8.9.0",
+    "bpmn-js-properties-panel": "0.46.0",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",
     "eslint": "7.15.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "7.2.0",
+    "fs-extra": "^8.1.0",
     "lint-staged": "10.5.3",
-    "sass": "1.32.13",
     "runjs": "4.4.2",
+    "sass": "1.32.13",
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
+    "swiper": "^5.4.5",
+    "terser-webpack-plugin": "^4.2.3",
     "vue-template-compiler": "2.6.12",
     "vue2-ace-editor": "^0.0.15",
-    "@vue/compiler-sfc": "^3.0.1",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "bpmn-js": "8.9.0",
-    "bpmn-js-properties-panel": "0.46.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "fs-extra": "^8.1.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.20.0"
+    "webpack-bundle-analyzer": "^3.9.0"
   },
   "engines": {
     "node": ">=8.9",

admin/public/index.html

@@ -6,8 +6,11 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
     <title><%= webpackConfig.name %></title>
-    <!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
+
+
+
     <style>
     html,
     body,

admin/src/main.js

@@ -27,6 +27,8 @@ import RightToolbar from "@/components/RightToolbar"
 // import 'highlight.js/styles/github-gist.css'
 import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
 
+
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

admin/src/moudel/swipe/index.vue

@@ -0,0 +1,222 @@
+<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
+          v-for="(item, i) in src"
+          :key="i"
+          :src="item.img"
+          alt=""
+          class="imgg"
+        />
+      </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"></span>
+    </div>
+
+    <button @click="change1">改变颜色</button>
+    <button @click="change2">直角</button>
+  </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",
+        },
+      ],
+      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() {
+      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) {
+      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 = "30px";
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+body {
+  margin: 0;
+  padding: 0;
+  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
+}
+button {
+  width: 100px;
+  height: 85px;
+  margin-top: 100px;
+}
+
+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%;
+}
+
+/* .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;
+  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-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 {
+  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/moudel/swipe/index1.vue

@@ -0,0 +1,161 @@
+ <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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,104 @@
+<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>
+    <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",
+  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);
+    },
+  },
+};
+</script>
+<style type="text/css">
+* {
+  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;
+}
+.tab_item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+}
+.tab_item img {
+  width: 30px;
+  height: 30px;
+}
+.active {
+  color: blue;
+}
+</style>

admin/src/moudel/tab/tab1.vue

@@ -0,0 +1,35 @@
+<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/router/index.js

@@ -42,6 +42,7 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/login'], resolve),
     hidden: true
   },
+  
   {
     path: '/sso',
     component: (resolve) => require(['@/views/sso'], resolve),
@@ -73,7 +74,21 @@ export const constantRoutes = [
         meta: {title: '首页', icon: 'dashboard', affix: true}
       }
     ]
-  }, {
+  },
+  {
+    path: '',
+    component: Layout,
+    redirect: 'test',
+    children: [{
+        path: '/test/index',
+        component: (resolve) => require(['@/views/test/index'], resolve),
+        name: 'test',
+        meta: {title: 'test', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
+
+   {
     path: '/user',
     component: Layout,
     hidden: true,
@@ -166,7 +181,8 @@ export const constantRoutes = [
         meta: {title: '流程详情', activeMenu: '/bpm/task/my'}
       }
     ]
-  }
+  },
+
 ]
 
 // 防止连续点击多次路由报错

admin/src/views/channel/channelEdit.vue

@@ -137,14 +137,14 @@ export default {
   data () {
     return {
       form: {
-
+        channelPattern: "1",
         channelStatus: 1,
         parentId: 0,
       },
       formm: {
         channelPattern: "1",
         channelStatus: 1,
-        parentId: this.$route.query.id,
+        parentId: "",
         onlineTime: "",
         strategyId: "",
         wotv: "1"
@@ -248,6 +248,10 @@ export default {
       pageNum: 1,
     }).then((res) => {
       this.options = res.data.list;
+      let obj = this.options.filter((item) => {
+        return item.id == this.$route.query.id
+      })
+      this.formm.parentId = obj[0].id
     });
     this.refresh();
   },

admin/src/views/schemeGlobal/index.vue

@@ -228,7 +228,6 @@ export default {
               duration: 3000,
               offset: 360
             })
-
             this.getItemList()
           })
           this.init()

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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,183 @@
+<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

@@ -0,0 +1,392 @@
+<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 () {
+      console.log(11);
+      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) => {
+        console.log(element);
+
+        element.style.borderRadius = "50px";
+      });
+    },
+    change4 () {
+      let a = this.$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>