fix: fix some bug

2025-11-15 14:03:36 +08:00 · 2021-04-20 14:33:07 +08:00
parent 9737014c0c
commit 055296ab53
11 changed files with 500 additions and 404 deletions
--- a/src/components/Cropper/src/Cropper.tsx
+++ b/src/components/Cropper/src/Cropper.tsx
@@ -1,14 +1,22 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";

-import { defineComponent, onBeforeMount, nextTick, ref, unref, computed, PropType } from 'vue'
-import { templateRef } from '@vueuse/core'
-import { useAttrs } from '/@/utils/useAttrs'
-import { emitter } from '/@/utils/mitt'
+import {
+  defineComponent,
+  onBeforeMount,
+  nextTick,
+  ref,
+  unref,
+  computed,
+  PropType,
+} from "vue";
+import { templateRef } from "@vueuse/core";
+import { useAttrs } from "/@/utils/useAttrs";
+import { emitter } from "/@/utils/mitt";

-import Cropper from 'cropperjs'
-import 'cropperjs/dist/cropper.css'
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";

-type Options = Cropper.Options
+type Options = Cropper.Options;

 const defaultOptions: Cropper.Options = {
  aspectRatio: 16 / 9,
@@ -31,7 +39,7 @@ const defaultOptions: Cropper.Options = {
  guides: true,
  movable: true,
  rotatable: true,
-}
+};
 export default defineComponent({
  name: "Cropper",
  props: {
@@ -44,11 +52,11 @@ export default defineComponent({
    },
    width: {
      type: [String, Number],
-      default: '',
+      default: "",
    },
    height: {
      type: [String, Number],
-      default: '360px',
+      default: "360px",
    },
    crossorigin: {
      type: String || Object,
@@ -61,57 +69,63 @@ export default defineComponent({
    options: {
      type: Object as PropType<Options>,
      default: {},
-    }
+    },
  },
  setup(props) {
-    const cropper: any = ref<Nullable<Cropper>>(null)
-    const imgElRef = templateRef<HTMLElement | null>('imgElRef', null)
+    const cropper: any = ref<Nullable<Cropper>>(null);
+    const imgElRef = templateRef<HTMLElement | null>("imgElRef", null);

-    const isReady = ref(false)
+    const isReady = ref(false);

    const getImageStyle = computed(
      (): CSSProperties => {
        return {
          height: props.height,
          width: props.width,
-          maxWidth: '100%',
+          maxWidth: "100%",
          ...props.imageStyle,
-        }
+        };
      }
-    )
+    );

    const getWrapperStyle = computed(
      (): CSSProperties => {
-        const { height, width } = props
-        return { width: `${width}`.replace(/px/, '') + 'px', height: `${height}`.replace(/px/, '') + 'px' }
+        const { height, width } = props;
+        return {
+          width: `${width}`.replace(/px/, "") + "px",
+          height: `${height}`.replace(/px/, "") + "px",
+        };
      }
-    )
+    );

    async function init() {
-      const imgEl = unref(imgElRef)
+      const imgEl = unref(imgElRef);
      if (!imgEl) {
-        return
+        return;
      }
      cropper.value = new Cropper(imgEl, {
        ...defaultOptions,
        ready: () => {
-          isReady.value = true
+          isReady.value = true;
        },
        ...props.options,
-      })
+      });
    }

    onBeforeMount(() => {
      nextTick(() => {
-        init()
+        init();
        // tsx语法返回渲染模板，外部组件想调用内部方法或者获取setup里面的实例，暂时想到的办法是通过公共事件
-        emitter.emit("cropperInstance", unref(cropper))
-      })
-    })
+        emitter.emit("cropperInstance", unref(cropper));
+      });
+    });

    return () => (
      <>
-        <div class={useAttrs({ excludeListeners: true, excludeKeys: ['class'] })} style={unref(getWrapperStyle)}>
+        <div
+          class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
+          style={unref(getWrapperStyle)}
+        >
          <img
            ref="imgElRef"
            src={props.src}
@@ -121,6 +135,6 @@ export default defineComponent({
          />
        </div>
      </>
-    )
+    );
  },
-})
+});
--- a/src/components/countTo/index.ts
+++ b/src/components/countTo/index.ts
@@ -1,10 +1,10 @@
-import { App } from "vue"
-import countTo from "./src/CountTo"
+import { App } from "vue";
+import countTo from "./src/CountTo";

 export const CountTo = Object.assign(countTo, {
  install(app: App) {
-    app.component(countTo.name, countTo)
-  }
-})
+    app.component(countTo.name, countTo);
+  },
+});

-export default CountTo
+export default CountTo;
--- a/src/components/countTo/src/countTo.tsx
+++ b/src/components/countTo/src/countTo.tsx
@@ -5,10 +5,9 @@ import {
  watch,
  onMounted,
  unref,
-  toRef
-} from "vue"
-import { countToProps } from "./props"
-import { isNumber } from "/@/utils/is"
+} from "vue";
+import { countToProps } from "./props";
+import { isNumber } from "/@/utils/is";

 export default defineComponent({
  name: "CountTo",
@@ -16,17 +15,17 @@ export default defineComponent({
  emits: ["mounted", "callback"],
  setup(props, { emit }) {
    const state = reactive<{
-      localStartVal: number
-      printVal: number | null
-      displayValue: string
-      paused: boolean
-      localDuration: number | null
-      startTime: number | null
-      timestamp: number | null
-      rAF: any
-      remaining: number | null
-      color: string
-      fontSize: string
+      localStartVal: number;
+      printVal: number | null;
+      displayValue: string;
+      paused: boolean;
+      localDuration: number | null;
+      startTime: number | null;
+      timestamp: number | null;
+      rAF: any;
+      remaining: number | null;
+      color: string;
+      fontSize: string;
    }>({
      localStartVal: props.startVal,
      displayValue: formatNumber(props.startVal),
@@ -38,63 +37,63 @@ export default defineComponent({
      remaining: null,
      rAF: null,
      color: null,
-      fontSize: "16px"
-    })
+      fontSize: "16px",
+    });

    const getCountDown = computed(() => {
-      return props.startVal > props.endVal
-    })
+      return props.startVal > props.endVal;
+    });

    watch([() => props.startVal, () => props.endVal], () => {
      if (props.autoplay) {
-        start()
+        start();
      }
-    })
+    });

    function start() {
-      const { startVal, duration, color, fontSize } = props
-      state.localStartVal = startVal
-      state.startTime = null
-      state.localDuration = duration
-      state.paused = false
-      state.color = color
-      state.fontSize = fontSize
-      state.rAF = requestAnimationFrame(count)
+      const { startVal, duration, color, fontSize } = props;
+      state.localStartVal = startVal;
+      state.startTime = null;
+      state.localDuration = duration;
+      state.paused = false;
+      state.color = color;
+      state.fontSize = fontSize;
+      state.rAF = requestAnimationFrame(count);
    }

    function pauseResume() {
      if (state.paused) {
-        resume()
-        state.paused = false
+        resume();
+        state.paused = false;
      } else {
-        pause()
-        state.paused = true
+        pause();
+        state.paused = true;
      }
    }

    function pause() {
-      cancelAnimationFrame(state.rAF)
+      cancelAnimationFrame(state.rAF);
    }

    function resume() {
-      state.startTime = null
-      state.localDuration = +(state.remaining as number)
-      state.localStartVal = +(state.printVal as number)
-      requestAnimationFrame(count)
+      state.startTime = null;
+      state.localDuration = +(state.remaining as number);
+      state.localStartVal = +(state.printVal as number);
+      requestAnimationFrame(count);
    }

    function reset() {
-      state.startTime = null
-      cancelAnimationFrame(state.rAF)
-      state.displayValue = formatNumber(props.startVal)
+      state.startTime = null;
+      cancelAnimationFrame(state.rAF);
+      state.displayValue = formatNumber(props.startVal);
    }

    function count(timestamp: number) {
-      const { useEasing, easingFn, endVal } = props
-      if (!state.startTime) state.startTime = timestamp
-      state.timestamp = timestamp
-      const progress = timestamp - state.startTime
-      state.remaining = (state.localDuration as number) - progress
+      const { useEasing, easingFn, endVal } = props;
+      if (!state.startTime) state.startTime = timestamp;
+      state.timestamp = timestamp;
+      const progress = timestamp - state.startTime;
+      state.remaining = (state.localDuration as number) - progress;
      if (useEasing) {
        if (unref(getCountDown)) {
          state.printVal =
@@ -104,70 +103,75 @@ export default defineComponent({
              0,
              state.localStartVal - endVal,
              state.localDuration as number
-            )
+            );
        } else {
          state.printVal = easingFn(
            progress,
            state.localStartVal,
            endVal - state.localStartVal,
            state.localDuration as number
-          )
+          );
        }
      } else {
        if (unref(getCountDown)) {
          state.printVal =
            state.localStartVal -
            (state.localStartVal - endVal) *
-            (progress / (state.localDuration as number))
+              (progress / (state.localDuration as number));
        } else {
          state.printVal =
            state.localStartVal +
            (endVal - state.localStartVal) *
-            (progress / (state.localDuration as number))
+              (progress / (state.localDuration as number));
        }
      }
      if (unref(getCountDown)) {
-        state.printVal = state.printVal < endVal ? endVal : state.printVal
+        state.printVal = state.printVal < endVal ? endVal : state.printVal;
      } else {
-        state.printVal = state.printVal > endVal ? endVal : state.printVal
+        state.printVal = state.printVal > endVal ? endVal : state.printVal;
      }
-      state.displayValue = formatNumber(state.printVal)
+      state.displayValue = formatNumber(state.printVal);
      if (progress < (state.localDuration as number)) {
-        state.rAF = requestAnimationFrame(count)
+        state.rAF = requestAnimationFrame(count);
      } else {
-        emit("callback")
+        emit("callback");
      }
    }

    function formatNumber(num: number | string) {
-      const { decimals, decimal, separator, suffix, prefix } = props
-      num = Number(num).toFixed(decimals)
-      num += ""
-      const x = num.split(".")
-      let x1 = x[0]
-      const x2 = x.length > 1 ? decimal + x[1] : ""
-      const rgx = /(\d+)(\d{3})/
+      const { decimals, decimal, separator, suffix, prefix } = props;
+      num = Number(num).toFixed(decimals);
+      num += "";
+      const x = num.split(".");
+      let x1 = x[0];
+      const x2 = x.length > 1 ? decimal + x[1] : "";
+      const rgx = /(\d+)(\d{3})/;
      if (separator && !isNumber(separator)) {
        while (rgx.test(x1)) {
-          x1 = x1.replace(rgx, "$1" + separator + "$2")
+          x1 = x1.replace(rgx, "$1" + separator + "$2");
        }
      }
-      return prefix + x1 + x2 + suffix
+      return prefix + x1 + x2 + suffix;
    }

    onMounted(() => {
      if (props.autoplay) {
-        start()
+        start();
      }
-      emit("mounted")
-    })
+      emit("mounted");
+    });

    return () => (
      <>
-        <span style={{
-          color: props.color, fontSize: props.fontSize
-        }}>{state.displayValue}</span>
+        <span
+          style={{
+            color: props.color,
+            fontSize: props.fontSize,
+          }}
+        >
+          {state.displayValue}
+        </span>
      </>
-    )
-  }
-})
+    );
+  },
+});
--- a/src/components/countTo/src/props.ts
+++ b/src/components/countTo/src/props.ts
@@ -1,5 +1,5 @@
-import { PropType } from 'vue'
-import { propTypes } from '/@/utils/propTypes'
+import { PropType } from "vue";
+import { propTypes } from "/@/utils/propTypes";
 export const countToProps = {
  startVal: propTypes.number.def(0),
  endVal: propTypes.number.def(2020),
@@ -10,20 +10,22 @@ export const countToProps = {
    required: false,
    default: 0,
    validator(value: number) {
-      return value >= 0
+      return value >= 0;
    },
  },
  color: propTypes.string.def(),
  fontSize: propTypes.string.def(),
-  decimal: propTypes.string.def('.'),
-  separator: propTypes.string.def(','),
-  prefix: propTypes.string.def(''),
-  suffix: propTypes.string.def(''),
+  decimal: propTypes.string.def("."),
+  separator: propTypes.string.def(","),
+  prefix: propTypes.string.def(""),
+  suffix: propTypes.string.def(""),
  useEasing: propTypes.bool.def(true),
  easingFn: {
-    type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
+    type: Function as PropType<
+      (t: number, b: number, c: number, d: number) => number
+    >,
    default(t: number, b: number, c: number, d: number) {
-      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
    },
  },
-}
+};
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -10,7 +10,32 @@
        <span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
      </div>
    </el-scrollbar>
-    <slot></slot>
+    <!-- 右侧功能按钮 -->
+    <ul class="right-func">
+      <li>
+        <i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
+      </li>
+      <li>
+        <el-dropdown trigger="click" placement="bottom-end">
+          <i class="el-icon-arrow-down"></i>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="(item,key) in tagsViews"
+                :key="key"
+                :icon="item.icon"
+                :divided="item.divided"
+                :disabled="item.disabled"
+                @click="onClickDrop(key, item)"
+              >{{item.text}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </li>
+      <li>
+        <slot></slot>
+      </li>
+    </ul>
  </div>
 </template>

@@ -20,21 +45,52 @@ import { useRoute, useRouter } from "vue-router"
 import { ref, watchEffect, onBeforeMount, unref } from "vue"
 import { storageLocal } from "/@/utils/storage"
 import { emitter } from "/@/utils/mitt"
+import { toggleClass, removeClass } from "/@/utils/operate"
+import { nextTick } from 'vue'
+let refreshDiv = "refresh-div"

 export default {
  setup() {
+    const { deleteDynamicTag, dynamicRouteTags, dRoutes, routesLength } = useDynamicRoutesHook()
    const route = useRoute()
    const router = useRouter()
    const showTags = ref(storageLocal.getItem("tagsVal") || false)

-    const { deleteDynamicTag, dRoutes } = ref(useDynamicRoutesHook()).value
+    const tagsViews = ref([
+      {
+        icon: "el-icon-refresh-right",
+        text: "重新加载",
+        divided: false,
+        disabled: false
+      },
+      {
+        icon: "el-icon-close",
+        text: "关闭当前标签页",
+        divided: false,
+        disabled: unref(routesLength) > 1 ? false : true
+      },
+      {
+        icon: "el-icon-more",
+        text: "关闭其他标签页",
+        divided: true,
+        disabled: false
+      },
+      {
+        icon: "el-icon-minus",
+        text: "关闭全部标签页",
+        divided: false,
+        disabled: false
+      },
+    ])

    function deleteMenu(item) {
+      let tagslen = storageLocal.getItem("routesInStorage").length - 1
+      if (tagslen === 1) {
+        tagsViews.value[1].disabled = true
+      }
      deleteDynamicTag(item, route.path)
    }

-    const { dynamicRouteTags } = useDynamicRoutesHook()
-
    // 初始化页面刷新保证当前路由tabview存在
    let stop = watchEffect(() => {
      let parentPath = route.path.slice(0, route.path.lastIndexOf("/"))
@@ -46,6 +102,49 @@ export default {
      stop()
    })

+    function onFresh() {
+      toggleClass(true, refreshDiv, document.querySelector(".rotate"))
+      const { path, fullPath } = unref(route)
+      router.replace({
+        path: "/redirect" + fullPath
+      })
+      setTimeout(() => {
+        removeClass(document.querySelector(".rotate"), refreshDiv)
+      }, 600)
+    }
+
+    function onClickDrop(key, item) {
+      if (item.disabled) return
+      switch (key) {
+        case 0:
+          // 重新加载
+          onFresh()
+          break
+        case 1:
+          // 关闭当前标签页
+          deleteMenu({ meta: route.meta, path: route.path })
+          break
+        case 2:
+          // 关闭其他标签页
+          break
+        case 3:
+          // 关闭全部标签页
+          dRoutes.value = [{
+            path: "/welcome",
+            meta: {
+              title: "home",
+              icon: "el-icon-s-home",
+              showLink: true,
+              savedPosition: false,
+            },
+          }]
+          storageLocal.setItem("routesInStorage", dRoutes.value)
+          router.push("/welcome")
+          tagsViews.value[1].disabled = true
+          break
+      }
+    }
+
    onBeforeMount(() => {
      emitter.on("tagViewsChange", (key) => {
        if (unref(showTags) === key) return
@@ -56,7 +155,10 @@ export default {
    return {
      dynamicTagList: dRoutes,
      deleteMenu,
-      showTags
+      showTags,
+      onFresh,
+      tagsViews,
+      onClickDrop
    }
  },
 };
@@ -118,4 +220,78 @@ export default {
 :deep(.el-scrollbar__wrap) {
  height: 100vh;
 }
+
+.right-func {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
+  font-size: 16px;
+  li {
+    width: 40px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    border-right: 1px solid #ccc;
+    cursor: pointer;
+  }
+}
+
+.refresh-div {
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 600ms;
+  -moz-transition-property: -moz-transform;
+  -moz-transition-duration: 600ms;
+  -webkit-animation: rotate 600ms linear infinite;
+  -moz-animation: rotate 600ms linear infinite;
+  -o-animation: rotate 600ms linear infinite;
+  animation: rotate 600ms linear infinite;
+}
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-o-keyframes rotate {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(360deg);
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.el-dropdown-menu {
+  padding: 0;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+.el-dropdown-menu__item,
+.el-menu-item {
+  padding: 0 14px;
+  overflow: hidden;
+}
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
 </style>
--- a/src/layout/components/tag/tagsHook.ts
+++ b/src/layout/components/tag/tagsHook.ts
@@ -1,4 +1,4 @@
-import { reactive, toRefs, nextTick } from "vue";
+import { reactive, toRefs, nextTick, computed } from "vue";
 import { storageLocal } from "/@/utils/storage";
 import { useRouter } from "vue-router";

@@ -39,7 +39,6 @@ export function useDynamicRoutesHook() {
          let pathConcat = parentPath + "/" + arrItem.path;
          if (arrItem.path === value || pathConcat === value) {
            dynamic.dRoutes.push({ path: value, meta: arrItem.meta });
-            // console.log(dynamic.dRoutes)
          } else {
            if (arrItem.children && arrItem.children.length > 0) {
              concatPath(arrItem.children, value, parentPath);
@@ -49,14 +48,12 @@ export function useDynamicRoutesHook() {
      }
    }
    concatPath(router.options.routes, value, parentPath);
-
    // if (storageLocal.getItem("routesInStorage") && storageLocal.getItem("routesInStorage").length > 2) {
    //   let lens = storageLocal.getItem("routesInStorage").length
    //   let itemss = storageLocal.getItem("routesInStorage")[lens - 1]
    //   dynamic.dRoutes.push({ path: itemss.path, meta: itemss.meta })
    // }
-
-    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes);
  };
  /**
   * @param value any 当前删除tag路由
@@ -68,7 +65,7 @@ export function useDynamicRoutesHook() {
    });
    // 从当前匹配到的路径中删除
    await dynamic.dRoutes.splice(valueIndex, 1);
-    // storageLocal.setItem("routesInStorage", dynamic.dRoutes)
+    storageLocal.setItem("routesInStorage", dynamic.dRoutes);
    if (current === obj.path) {
      // 如果删除当前激活tag就自动切换到最后一个tag
      let newRoute: any = dynamic.dRoutes.slice(-1);
@@ -79,10 +76,14 @@ export function useDynamicRoutesHook() {
      });
    }
  };
+  const routesLength = computed(() => {
+    return storageLocal.getItem("routesInStorage").length;
+  });

  return {
    ...toRefs(dynamic),
    dynamicRouteTags,
    deleteDynamicTag,
+    routesLength,
  };
 }
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -13,21 +13,10 @@
        <navbar v-if="!containerHiddenSideBar" />
        <!-- tabs标签页 -->
        <tag>
-          <!-- 右侧功能按钮 -->
-          <ul class="right-func">
-            <li>
-              <i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
-            </li>
-            <li>
-              <i class="el-icon-arrow-down"></i>
-            </li>
-            <li>
-              <i
-                :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
-                @click="onFullScreen"
-              ></i>
-            </li>
-          </ul>
+          <i
+            :class="containerHiddenSideBar? 'iconfont team-iconhidden-main-container': 'iconfont team-iconshow-main-container'"
+            @click="onFullScreen"
+          ></i>
        </tag>
      </div>
      <!-- 主体内容 -->
@@ -57,7 +46,6 @@ import { useStore } from "vuex";
 import { useEventListener, useFullscreen } from "@vueuse/core";
 import { toggleClass, removeClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
-let refreshDiv = "refresh-div";
 import options from "/@/settings";
 import { useRouter, useRoute } from "vue-router";

@@ -154,17 +142,6 @@ export default {
      }
    }

-    function onFresh() {
-      toggleClass(true, refreshDiv, document.querySelector(".rotate"));
-      const { path, fullPath } = unref(route);
-      router.replace({
-        path: "/redirect" + fullPath
-      });
-      setTimeout(() => {
-        removeClass(document.querySelector(".rotate"), refreshDiv);
-      }, 600);
-    }
-
    onMounted(() => {
      const isMobile = $_isMobile();
      if (isMobile) {
@@ -186,8 +163,7 @@ export default {
      ...toRefs(set),
      handleClickOutside,
      containerHiddenSideBar,
-      onFullScreen,
-      onFresh
+      onFullScreen
    };
  }
 };
@@ -240,64 +216,7 @@ $sideBarWidth: 210px;
  width: 100%;
 }

-.right-func {
-  display: flex;
-  align-items: center;
-  background: #fff;
-  border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
-  font-size: 16px;
-  li {
-    width: 40px;
-    height: 34px;
-    line-height: 34px;
-    text-align: center;
-    border-right: 1px solid #ccc;
-    cursor: pointer;
-  }
-}
 .hidden-main-container {
  margin-left: 0 !important;
 }
-.refresh-div {
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-duration: 600ms;
-  -moz-transition-property: -moz-transform;
-  -moz-transition-duration: 600ms;
-  -webkit-animation: rotate 600ms linear infinite;
-  -moz-animation: rotate 600ms linear infinite;
-  -o-animation: rotate 600ms linear infinite;
-  animation: rotate 600ms linear infinite;
-}
-@-webkit-keyframes rotate {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@-moz-keyframes rotate {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(360deg);
-  }
-}
-@-o-keyframes rotate {
-  from {
-    -o-transform: rotate(0deg);
-  }
-  to {
-    -o-transform: rotate(360deg);
-  }
-}
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>