yc-ui2 0.2.2-beta2 → 0.2.2-beta3

package/src/components/YcCustomerService/index.vue

@@ -1,272 +0,0 @@
-<template>
-  <div ref="customer" style="display: none">
-    <chat-vue
-      :visible.sync="visible"
-      :jumpPage="jumpPage"
-      :title="title"
-      :id="id"
-    />
-    <div class="customerService">
-      <div class="mobile" :data-mobile="hotlineService || '客服热线'">
-        <slot></slot>
-      </div>
-      <div
-        class="headset"
-        @click="visible = !visible"
-        :data-headset="onlineService"
-      >
-        <div><i class="el-icon-headset"></i></div>
-        <div>
-          <a>{{ onlineService }}</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import chatVue from "./chat.vue";
-export default {
-  name: "YcCustomerService",
-  components: {
-    chatVue,
-  },
-  props: {
-    jumpPage: String,
-    title: String,
-    tokenName: String,
-    id: Number,
-    hotlineService: String,
-  },
-  data() {
-    return {
-      visible: false,
-      // hotlineService: "客服热线",
-      onlineService: "在线客服",
-    };
-  },
-  computed: {
-    hasSlot() {
-      return Boolean(this.$slots.default);
-    },
-  },
-  watch: {
-    $route(to) {
-      if (to.path != this.jumpPage) {
-        this.$refs.customer.style.display = "block";
-      } else {
-        this.$refs.customer.style.display = "none";
-      }
-    },
-  },
-  mounted() {
-    sessionStorage.setItem(process.env.VUE_APP_TOKEN_NAME, this.tokenName);
-    this.$refs.customer.style.display = "block";
-  },
-};
-</script>
-<style lang="scss" scoped>
-.customerService {
-  @mixin repeated-styles($delay, $text) {
-    &:not(:hover) {
-      animation: animateMobileText 60s linear $delay infinite;
-      &:after {
-        content: $text;
-        width: 40px;
-        height: 51px;
-        padding: 0px 5px;
-        position: absolute;
-        top: 0px;
-        left: 50px;
-        font-size: 14px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #ffffff;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-      }
-    }
-  }
-  position: fixed;
-  right: 0px;
-  bottom: 35px;
-  z-index: 2001;
-  > div {
-    cursor: pointer;
-    position: absolute;
-    right: 0px;
-    display: flex;
-    align-items: center;
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-    &:hover {
-      > div:first-child {
-        color: #ff4949;
-        i {
-          animation-name: animateRotate;
-          animation-duration: 0.5s;
-          animation-iteration-count: infinite;
-        }
-      }
-    }
-    > div:first-child {
-      width: 50px;
-      height: 50px;
-      text-align: center;
-      line-height: 50px;
-      font-size: 18px;
-    }
-    > div:last-child {
-      opacity: 0;
-      // transition: all 0.3s linear;
-      padding: 10px;
-      border-radius: 6px;
-      position: absolute;
-      min-height: 50px;
-      display: flex;
-      flex-direction: column;
-      // align-items: center;
-      justify-content: space-around;
-      background-color: #ffffff;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-      &::after {
-        content: "";
-        position: absolute;
-        top: calc(50% - 10px);
-        right: -20px;
-        border-width: 10px;
-        border-style: solid;
-        border-color: transparent transparent transparent #ffffff;
-        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
-      }
-      a {
-        color: #333;
-        font-size: 14px;
-        display: block;
-      }
-    }
-  }
-  .mobile {
-    bottom: 50px;
-    border-bottom: 1px solid #e6ebf5;
-    @include repeated-styles(3s, attr(data-mobile));
-    &:hover {
-      > div:last-child {
-        left: -210px;
-        opacity: 1;
-        animation-name: animateMobile;
-        animation-duration: 0.5s;
-      }
-    }
-    > div:last-child {
-      left: -120vw;
-      width: 190px;
-      bottom: 0px;
-      a {
-        width: fit-content;
-        position: relative;
-        margin-top: 5px;
-        text-indent: 5px;
-        &:hover {
-          color: #ff4949;
-          &::before {
-            width: 100%;
-            right: auto;
-            left: 0px;
-          }
-        }
-        &::before {
-          content: "";
-          width: 0%;
-          height: 1px;
-          opacity: 0.6;
-          background: #ff4949;
-          transition: all 0.5s linear;
-          position: absolute;
-          right: 0px;
-          bottom: -2px;
-        }
-      }
-      &::after {
-        top: calc(100% - 35px);
-      }
-    }
-  }
-  .headset {
-    bottom: 0px;
-    @include repeated-styles(13s, attr(data-headset));
-    &:hover {
-      > div:last-child {
-        left: -110px;
-        opacity: 1;
-        animation-name: animateHeadset;
-        animation-duration: 0.5s;
-      }
-    }
-    > div:last-child {
-      left: -120vw;
-      width: 90px;
-    }
-  }
-  @keyframes animateMobile {
-    0% {
-      left: -200vw;
-      opacity: 0;
-    }
-    0.1% {
-      left: -310px;
-      opacity: 0;
-    }
-    100% {
-      left: -210px;
-      opacity: 1;
-    }
-  }
-  @keyframes animateHeadset {
-    0% {
-      left: -120vw;
-      opacity: 0;
-    }
-    0.1% {
-      left: -210px;
-      opacity: 0.5;
-    }
-    100% {
-      left: -110px;
-      opacity: 1;
-    }
-  }
-  @keyframes animateRotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    20% {
-      transform: rotate(7deg);
-    }
-    40% {
-      transform: rotate(0deg);
-    }
-    80% {
-      transform: rotate(-7deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
-
-  @keyframes animateMobileText {
-    0% {
-      transform: translateX(0px);
-    }
-    1% {
-      transform: translateX(-50px);
-    }
-    21% {
-      transform: translateX(-50px);
-    }
-    22% {
-      transform: translateX(0px);
-    }
-  }
-}
-</style>