<template>
  <button
    class="mix-btn mix-line mix-fix-ios-appearance"
    :class="[
      'mix-size-' + size,
      plain ? 'mix-btn--' + type + '--plain' : '',
      loading ? 'mix-loading' : '',
      getShapeClass,
      showHairLineBorder,
      'mix-btn--' + type,
      disabled ? (plain ? `mix-btn-disabled-plain` : `mix-btn-disabled`) : '',
      bold ? 'mix-btn_text-bold' : '',
      link ? 'mix-btn__link' : ''
    ]"
    :hover-start-time="Number(hoverStartTime)"
    :hover-stay-time="Number(hoverStayTime)"
    :disabled="disabled"
    :form-type="formType"
    :open-type="openType"
    :app-parameter="appParameter"
    :hover-stop-propagation="hoverStopPropagation"
    :send-message-title="sendMessageTitle"
    send-message-path="sendMessagePath"
    :lang="lang"
    :data-name="dataName"
    :session-from="sessionFrom"
    :send-message-img="sendMessageImg"
    :show-message-card="showMessageCard"
    @getphonenumber="getphonenumber"
    @getuserinfo="getuserinfo"
    @error="error"
    @opensetting="opensetting"
    @launchapp="launchapp"
    :style="[
      { overflow: ripple ? 'hidden' : 'visible' },
      { margin: margin, padding: padding },
      width ? { width: width } : {},
      height ? { height: height + 'rpx', lineHeight: height + 'rpx' } : {},
      margin ? { margin: margin } : {},
      ,
      padding ? { padding: padding } : {},
      fontSize ? { fontSize: fontSize + 'rpx' } : {}
    ]"
    @tap.stop="click($event)"
    :hover-class="getHoverClass"
    :loading="loading"
  >
    <!-- @slot 默认插槽 -->
    <slot></slot>
    <view
      v-if="ripple"
      class="mix-wave-ripple"
      :class="[waveActive ? 'mix-wave-active' : '']"
      :style="{
        top: rippleTop + 'px',
        left: rippleLeft + 'px',
        width: fields.targetWidth + 'px',
        height: fields.targetWidth + 'px',
        'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
      }"
    ></view>
  </button>
</template>

<script>
/**
 * button 按钮
 *
 * 基于u-button
 *
 * - 增加了直角形状，`shape='ra'`
 * - 增加了按钮的样式类型: `gray`,`white`,`black`,`brown`,`gray-primary`,`gray-error`,`gray-warning`,`gray-success`
 * - 增加了自定义样式属性: `width`,`height`,`fontSize`,`padding`,`margin`,`bold`
 * - 调整了边框实现，并且`plain`配合`link`属性可以去除边框
 *
 * @since 0.0.1
 * @displayName Button
 * @property {String} size = [default|medium|mini] 按钮的大小（默认default）
 * @property {Boolean} ripple = [true|false] 是否开启点击水波纹效果（默认false）
 * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效（默认rgba(0, 0, 0, 0.15)）
 * @property {String} type = [ default|primary|error|warning|success|gray|white|black|brown|gray-primary|gray-error|gray-warning|gray-success] 按钮的样式类型（默认default）
 * @property {Boolean} plain = [true|false] 按钮是否镂空，背景色透明（默认false）
 * @property {Boolean} link = [true|false] link样式，去掉边框，结合plain一起使用（默认false）
 * @property {Boolean} disabled = [true|false] 是否禁用（默认false）
 * @property {String} shape = [square|circle|ra] 按钮外观形状（默认square）
 *  @value 	square 	带小圆角
 *  @value 	circle 	两边为半圆
 *  @value 	ra 	直角 rightAngle
 * @property {Boolean} loading = [true|false] 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)（默认false）
 * @property {String} width 按钮宽度，比如 100%, 100px, 100rpx（默认''）
 * @property {String | Number} height 按钮高度，单位rpx（默认''）
 * @property {String | Number} font-size 按钮字体大小，单位rpx（默认30）
 * @property {Boolean} bold = [true|false] 字体是否加粗（默认false）
 * @property {String} margin = 调整与其他元素之间间距，比如 'auto 10rpx'（默认''）
 * @property {String} padding = 调整与其他元素之间间距，比如 '0 10rpx'（默认''）
 * @property {String | Number} throttle-time 节流的时间间隔，单位ms（一定时间内无论点击多少次，只会触发一次click事件）（默认300）
 * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件（默认''）
 * @property {String} open-type 开放能力，[uni-app方文档](https://uniapp.dcloud.io/component/button)（默认''）
 * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取（默认''）
 * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)（默认''）
 * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒（默认20）
 * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒（默认150）
 * @property {String} app-parameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效，只`微信小程序`、`QQ小程序`有效有效（默认''）
 * @property {Boolean} hover-stop-propagation = [true|false] 指定是否阻止本节点的祖先节点出现点击态，只`微信小程序`有效（默认false）
 * @property {String} lang = [en|zh_CN|zh_TW] 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文，只`微信小程序`有效（默认en）
 * @property {String} session-from 会话来源，open-type="contact"时有效，只`微信小程序`有效（默认''）
 * @property {String} session-message-title 会话内消息卡片标题，open-type="contact"时有效，默认当前标题，只`微信小程序`有效（默认''）
 * @property {String} session-message-path 会话内消息卡片点击跳转小程序路径，默认当前分享路径，open-type="contact"时有效，默认当前标题，只`微信小程序`有效（默认''）
 * @property {String} session-message-img 会话内消息卡片图片，默认当前页面截图，open-type="contact"时有效，默认当前标题，只`微信小程序`有效（默认''）
 * @property {Boolean} show-message-card = [true|false] 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效，只`微信小程序`有效（默认false）
 * @event {Function} click 按钮点击
 * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
 * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
 * @event {Function} error 当使用开放能力时，发生错误的回调
 * @event {Function} opensetting 在打开授权设置页并关闭后回调
 * @event {Function} launchapp 打开 APP 成功的回调
 */
export default {
  name: 'mix-button',
  props: {
    /**
     * 按钮的大小
     * @values default，medium，mini
     */
    size: {
      type: String,
      default: 'default'
    },
    /**
     * 是否开启点击水波纹效果
     */
    ripple: {
      type: Boolean,
      default: false
    },
    /**
     * 水波纹的背景色，ripple为true时有效
     */
    rippleBgColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.15)'
    },
    /**
     * 按钮的样式类型
     * @values default，primary，error，warning，success,gray,white,black,brown,gray-primary,gray-error,gray-warning,gray-success
     */
    type: {
      type: String,
      default: 'default'
    },
    /**
     * 按钮是否镂空，背景色透明
     */
    plain: {
      type: Boolean,
      default: false
    },
    /**
     * link样式，去掉边框，结合plain一起使用
     */
    link: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 按钮外观形状
     *
     * circle（两边为半圆），square（带小圆角），ra（直角 rightAngle）
     * @values square,circle,ra
     */
    shape: {
      type: String,
      default: 'square'
    },
    /**
     * 按钮名称前是否带 loading 图标
     *
     * App-nvue 平台，在 ios 上为雪花，Android上为圆圈
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 按钮宽度
     *
     * 比如 100%, 100px, 100rpx
     */
    width: {
      type: String,
      default: ''
    },
    /**
     * 按钮高度，单位rpx
     */
    height: {
      type: [String, Number],
      default: ''
    },
    /**
     * 按钮字体大小，单位rpx
     */
    fontSize: {
      type: [String, Number],
      default: ''
    },
    /**
     * 字体加粗
     */
    bold: {
      type: Boolean,
      default: false
    },
    /**
     * 调整与其他元素之间间距
     *
     * 比如 'auto 10rpx'
     */
    margin: {
      type: String,
      default: ''
    },
    /**
     * 调整与其他元素之间间距
     *
     * 比如 '0 10rpx'
     */
    padding: {
      type: String,
      default: ''
    },
    /**
     * 用于 `<form>` 组件，点击分别会触发 `<form>` 组件的 submit/reset 事件
     *
     * 取值为submit（提交表单），reset（重置表单）
     */
    formType: {
      type: String,
      default: ''
    },
    /**
     * 开放能力，[uni-app方文档](https://uniapp.dcloud.io/component/button)
     */
    openType: {
      type: String,
      default: ''
    },
    /**
     * 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
     * @ignore
     */
    dataName: {
      type: String,
      default: ''
    },
    /**
     * 按下的类名
     */
    hoverClass: {
      type: String,
      default: ''
    },
    /**
     * 按住后多久出现点击态，单位毫秒
     */
    hoverStartTime: {
      type: [String, Number],
      default: 20
    },
    /**
     * 手指松开后点击态保留时间，单位毫秒
     */
    hoverStayTime: {
      type: [String, Number],
      default: 150
    },
    /**
     * 节流的时间间隔，单位ms，详见 [节流防抖](./#/JS工具库/节流防抖)
     *
     * 一定时间内无论点击多少次，只会触发一次click事件
     */
    throttleTime: {
      type: [String, Number],
      default: 300
    },
    //#region 小程序
    /**
     * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
     *
     * 只`微信小程序`、`QQ小程序`有效有效
     */
    appParameter: {
      type: String,
      default: ''
    },
    /**
     * 指定是否阻止本节点的祖先节点出现点击态
     *
     * 只`微信小程序`有效
     */
    hoverStopPropagation: {
      type: Boolean,
      default: false
    },
    /**
     * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
     *
     * 只`微信小程序`有效
     * @values en,zh_CN,zh_TW
     */
    lang: {
      type: String,
      default: 'en'
    },
    /**
     * 会话来源，open-type="contact"时有效。
     *
     * 只`微信小程序`有效
     */
    sessionFrom: {
      type: String,
      default: ''
    },
    /**
     * 会话内消息卡片标题，open-type="contact"时有效，默认当前标题
     *
     * 只`微信小程序`有效
     */
    sendMessageTitle: {
      type: String,
      default: ''
    },
    /**
     * 会话内消息卡片点击跳转小程序路径，默认当前分享路径
     *
     * open-type="contact"时有效
     *
     * 只`微信小程序`有效
     */
    sendMessagePath: {
      type: String,
      default: ''
    },
    /**
     * 会话内消息卡片图片，默认当前页面截图
     *
     * open-type="contact"时有效
     *
     * 只`微信小程序`有效
     */
    sendMessageImg: {
      type: String,
      default: ''
    },
    /**
     * 是否显示会话内消息卡片，设置此参数为 true，
     *
     * 用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
     *
     * 用户点击后可以快速发送小程序消息，open-type="contact"时有效
     *
     * 只`微信小程序`有效
     */
    showMessageCard: {
      type: Boolean,
      default: false
    }
    //#endregion
  },
  computed: {
    // 当没有传bgColor变量时，按钮按下去的颜色类名
    getHoverClass() {
      // 如果开启水波纹效果，则不启用hover-class效果
      if (this.loading || this.disabled || this.ripple || this.hoverClass) return ''
      let hoverClass = ''
      hoverClass = this.plain ? 'mix-btn-plain-hover' : 'mix-btn--' + this.type + '-hover'
      return hoverClass
    },
    // 除了'default'类型，其他不显示边框，否则会造成四角有毛刺现象
    showHairLineBorder() {
      if (this.plain || this.type === 'default' || this.type === 'white') {
        return 'mix-hairline-border'
      } else {
        return ''
      }
    },
    getShapeClass() {
      let className = ''
      if (this.shape == 'circle') {
        className = 'mix-round-circle'
      } else if (this.shape == 'ra') {
        className = 'mix-round-rightAngle'
      }
      return className
    }
  },
  data() {
    return {
      rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
      rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
      fields: {}, // 波纹按钮节点信息
      waveActive: false // 激活水波纹
    }
  },
  methods: {
    // 按钮点击
    click(e) {
      // 进行节流控制，每this.throttle毫秒内，只在开始处执行
      this.$mix.throttle(() => {
        // 如果按钮时disabled和loading状态，不触发水波纹效果
        if (this.loading === true || this.disabled === true) return
        // 是否开启水波纹效果
        if (this.ripple) {
          // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
          this.waveActive = false
          this.$nextTick(function () {
            this.getWaveQuery(e)
          })
        }
        /**
         * 按钮点击，返回值为点击事件及参数
         *
         * 请勿使用@tap点击事件，微信小程序无效
         * @event click
         * @property {Object} e 点击事件及参数
         */
        this.$emit('click', e)
      }, this.throttleTime)
    },
    // 查询按钮的节点信息
    getWaveQuery(e) {
      this.getElQuery().then(res => {
        // 查询返回的是一个数组节点
        let data = res[0]
        // 查询不到节点信息，不操作
        if (!data.width || !data.width) return
        // 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
        // 最终的方形（变换后的圆形）才能覆盖整个按钮
        data.targetWidth = data.height > data.width ? data.height : data.width
        if (!data.targetWidth) return
        this.fields = data
        let touchesX = '',
          touchesY = ''
        // #ifdef MP-BAIDU
        touchesX = e.changedTouches[0].clientX
        touchesY = e.changedTouches[0].clientY
        // #endif
        // #ifdef MP-ALIPAY
        touchesX = e.detail.clientX
        touchesY = e.detail.clientY
        // #endif
        // #ifndef MP-BAIDU || MP-ALIPAY
        touchesX = e.touches[0].clientX
        touchesY = e.touches[0].clientY
        // #endif
        // 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
        // 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
        // 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
        this.rippleTop = touchesY - data.top - data.targetWidth / 2
        this.rippleLeft = touchesX - data.left - data.targetWidth / 2
        this.$nextTick(() => {
          this.waveActive = true
        })
      })
    },
    // 获取节点信息
    getElQuery() {
      return new Promise(resolve => {
        let queryInfo = ''
        // 获取元素节点信息，请查看uniapp相关文档
        // https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
        queryInfo = uni.createSelectorQuery().in(this)
        //#ifdef MP-ALIPAY
        queryInfo = uni.createSelectorQuery()
        //#endif
        queryInfo.select('.mix-btn').boundingClientRect()
        queryInfo.exec(data => {
          resolve(data)
        })
      })
    },
    // 下面为对接uniapp官方按钮开放能力事件回调的对接
    getphonenumber(res) {
      /**
       * open-type="getPhoneNumber"时有效
       *
       * 仅`微信小程序`有效
       * @event getphonenumber
       * @property {Object} res
       */
      this.$emit('getphonenumber', res)
    },
    getuserinfo(res) {
      /**
       * 用户点击该按钮时，会返回获取到的用户信息，
       *
       * 从返回参数的detail中获取到的值同uni.getUserInfo
       *
       * 仅`微信小程序`有效
       * @event getuserinfo
       * @property {Object} res
       */
      this.$emit('getuserinfo', res)
    },
    error(res) {
      /**
       * 当使用开放能力时，发生错误的回调
       *
       * 仅`微信小程序`有效
       * @event error
       * @property {Object} res
       */
      this.$emit('error', res)
    },
    opensetting(res) {
      /**
       * 在打开授权设置页并关闭后回调
       *
       * 仅`微信小程序`有效
       * @event opensetting
       * @property {Object} res
       */
      this.$emit('opensetting', res)
    },
    launchapp(res) {
      /**
       * 打开 APP 成功的回调
       *
       * 仅`微信小程序`有效
       * @event launchapp
       * @property {Object} res
       */
      this.$emit('launchapp', res)
    }
  }
}
</script>

<style scoped lang="scss">
uni-button:after {
  // width: 201%;
  // height: 201%;
}
@import '../../libs/css/style.components.scss';
.mix-btn::after {
  border: none;
}

.mix-btn {
  position: relative;
  border: 0;
  border-radius: 6rpx;
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  // 避免边框某些场景可能被“裁剪”，不能设置为hidden
  overflow: visible;
  line-height: 1;
  @include vue-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 40rpx;
  z-index: 1;
  box-sizing: border-box;
  transition: all 0.15s;

  &-plain-hover {
    opacity: 0.5;
  }
  &-disabled {
    opacity: 0.5;
  }
  &-disabled-plain {
    opacity: 0.35;
  }

  &--default {
    color: $mix-content-c;
    border-color: #c0c4cc;
    background-color: #ffffff;
  }
  &--default--plain {
    background-color: transparent !important;
  }
  &--default-hover {
    // color: $mix-c-primary-dark !important;
    // border-color: $mix-c-primary-dark !important;
    // background-color: $mix-c-primary-light !important;
    opacity: 0.5;
  }

  &--primary {
    color: #ffffff !important;
    border-color: $mix-c-primary;
    background-color: $mix-c-primary !important;
  }
  &--primary--plain {
    color: $mix-c-primary !important;
    background-color: transparent !important;
  }
  &--primary-hover {
    background: $mix-c-primary-dark !important;
  }

  &--success {
    color: #ffffff !important;
    border-color: $mix-c-success;
    background-color: $mix-c-success !important;
  }
  &--success--plain {
    color: $mix-c-success !important;
    background-color: transparent !important;
  }
  &--success-hover {
    background: $mix-c-success-dark !important;
  }

  &--error {
    color: #ffffff !important;
    border-color: $mix-c-error;
    background-color: $mix-c-error !important;
  }
  &--error--plain {
    color: $mix-c-error !important;
    background-color: transparent !important;
  }
  &--error-hover {
    background: $mix-c-error-dark !important;
  }

  &--warning {
    color: #ffffff !important;
    border-color: $mix-c-warning;
    background-color: $mix-c-warning !important;
  }
  &--warning--plain {
    color: $mix-c-warning !important;
    background-color: transparent !important;
  }
  &--warning-hover {
    background: $mix-c-warning-dark !important;
  }

  &--gray {
    color: #999 !important;
    border-color: #999;
    background-color: #ededed !important;
  }
  &--gray--plain {
    color: #999 !important;
    background-color: transparent !important;
  }
  &--gray-hover {
    background: #d5d5d5 !important;
    color: #898989 !important;
  }

  &--white {
    color: #333 !important;
    border-color: #bfbfbf;
    background-color: #fff !important;
  }
  &--white--plain {
    color: #333 !important;
    background-color: transparent !important;
  }
  &--white-hover {
    background: #e5e5e5 !important;
    color: #2e2e2e !important;
  }
  &--white.mix-hairline-border:after {
    border-color: #bfbfbf;
  }

  &--black {
    color: #ffffff !important;
    border-color: #333;
    background-color: #333 !important;
  }
  &--black--plain {
    color: #333 !important;
    background-color: transparent !important;
  }
  &--black-hover {
    background: #555 !important;
    color: #e5e5e5 !important;
  }

  &--brown {
    color: #ffffff !important;
    border-color: #ac9157;
    background-color: #ac9157 !important;
  }
  &--brown--plain {
    color: #ac9157 !important;
    background-color: transparent !important;
  }
  &--brown-hover {
    background: #a37f49 !important;
    color: #e5e5e5 !important;
  }

  &--gray-primary {
    color: $mix-c-primary !important;
    border-color: #f2f2f2;
    background-color: #f2f2f2 !important;
  }
  &--gray-primary--plain {
    color: $mix-c-primary !important;
    background-color: transparent !important;
  }
  &--gray-primary-hover {
    background: #d9d9d9 !important;
  }

  &--gray-error {
    color: $mix-c-error !important;
    border-color: #f2f2f2;
    background-color: #f2f2f2 !important;
  }
  &--gray-error--plain {
    color: $mix-c-error !important;
    background-color: transparent !important;
  }
  &--gray-error-hover {
    background: #d9d9d9 !important;
  }

  &--gray-warning {
    color: $mix-c-warning !important;
    border-color: #f2f2f2;
    background-color: #f2f2f2 !important;
  }
  &--gray-warning--plain {
    color: $mix-c-warning !important;
    background-color: transparent !important;
  }
  &--gray-warning-hover {
    background: #d9d9d9 !important;
  }

  &--gray-success {
    color: $mix-c-success !important;
    border-color: #f2f2f2;
    background-color: #f2f2f2 !important;
  }
  &--gray-success--plain {
    color: $mix-c-success !important;
    background-color: transparent !important;
  }
  &--gray-success-hover {
    background: #d9d9d9 !important;
  }
}

.mix-hairline-border:after {
  content: ' ';
  pointer-events: none;
  width: 199.8%;
  height: 199.7%;
  // transform: scale(0.5, 0.5);
  // z-index: 1;
  border-radius: 12rpx;
  position: absolute;
  // width: 200%;
  // height: 200%;
  // 中心点作为变形(scale())的原点
  transform-origin: 0 0;
  transform: scale(0.5, 0.5) translateZ(0);
  // 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
  box-sizing: border-box;
  left: 0;
  top: 0;
  border: 1px solid currentColor;
}

.mix-wave-ripple {
  z-index: 0;
  position: absolute;
  border-radius: 100%;
  background-clip: padding-box;
  pointer-events: none;
  user-select: none;
  transform: scale(0);
  opacity: 1;
  transform-origin: center;
}

.mix-wave-ripple.mix-wave-active {
  opacity: 0;
  transform: scale(2);
  transition: opacity 1s linear, transform 0.4s linear;
}

.mix-btn__link::after {
  border: 0 !important;
}

.mix-btn_text-bold {
  font-weight: bold;
}

.mix-round-circle {
  border-radius: 100rpx;
}

.mix-round-circle::after {
  border-radius: 200rpx;
}

.mix-round-rightAngle {
  border-radius: 0;
}
.mix-round-rightAngle::after {
  border-radius: 0;
}

.mix-loading::after {
  background-color: hsla(0, 0%, 100%, 0.35);
}

.mix-size-default {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.mix-size-medium {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  width: auto;
  font-size: 26rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 80rpx;
}

.mix-size-mini {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  width: auto;
  font-size: 22rpx;
  padding-top: 1px;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 20rpx;
}
</style>
