<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-15 16:15:50
 -->
<!--
<funnel-chart :funnelData="funnelData"></funnel-chart>

import funnelChart from '@/components/active/funnel-chart.vue';
-->

<template>

  <div class="funnel-chart">
    <div class="funnel-chart-body flex">
      <div class="chart-left">
        <div class="trapezoid-bg">
          <div class="space-line h-20 r-60"></div>
          <div class="bg-f5f7fa h-16"></div>
          <div class="space-line h-22 r-57"></div>
          <div class="bg-f5f7fa h-18"></div>
          <div class="space-line h-26 r-52"></div>
          <div class="bg-f5f7fa h-22"></div>
          <div class="space-line h-29 r-48"></div>
          <div class="bg-f5f7fa h-23"></div>
          <div class="space-line h-32 r-42"></div>
          <div class="bg-f5f7fa h-25"></div>
          <div class="space-line h-38"></div>
        </div>
      </div>
      <div class="chart-right">
        <div class="chart-text">
          <div class="space-line h-20 p-l-98  font-12 color-606066">关注服务号</div>
          <div class="bg-f5f7fa h-16"></div>
          <div class="space-line h-22 p-l-90 font-12 color-606066">访问活动着陆页</div>
          <div class="bg-f5f7fa h-18"></div>
          <div class="space-line h-26 p-l-80 font-12 color-606066">认证开卡</div>
          <div class="bg-f5f7fa h-22"></div>
          <div class="space-line h-29 p-l-72 font-12 color-606066">参与游戏</div>
          <div class="bg-f5f7fa h-23"></div>
          <div class="space-line h-32 p-l-60 font-12 color-606066">领取卡券</div>
          <div class="bg-f5f7fa h-25"></div>
          <div class="space-line h-38 p-l-45 font-12 color-606066">消费</div>
        </div>
      </div>
    </div>
    <div class="funnel-chart-title font-12 color-000">- 响应转化漏斗 -</div>
  </div>
</template>
<script>
export default {
  name: 'funnel-chart',
  data() {
    return {};
  }
  /* methods() {

  } */
};
</script>
<style lang="less" scoped>
.funnel-chart {
  width: 595px;
  min-width: 595px;
  height: 346px;
  padding: 40px 0 0 52px;
  margin-left: 38px;
  background: rgba(245, 247, 250, 1);
  &::after {
    overflow: hidden;
  }
  .funnel-chart-body {
    position: relative;
    height: 269px;
    &::after {
      overflow: hidden;
    }
  }
  .funnel-chart-title {
    height: 37px;
    line-height: 37px;
    padding-left: 59px;
    clear: both;
  }
  .p-l-98 {
    padding-left: 98px;
  }
  .p-l-90 {
    padding-left: 90px;
  }
  .p-l-80 {
    padding-left: 80px;
  }
  .p-l-72 {
    padding-left: 72px;
  }
  .p-l-60 {
    padding-left: 60px;
  }
  .p-l-45 {
    padding-left: 45px;
  }
  .h-16 {
    height: 16px;
    line-height: 16px;
  }
  .h-18 {
    height: 18px;
    line-height: 18px;
  }
  .h-20 {
    height: 20px;
    line-height: 20px;
  }
  .h-22 {
    height: 22px;
    line-height: 22px;
  }
  .h-23 {
    height: 23px;
    line-height: 23px;
  }
  .h-24 {
    height: 24px;
    line-height: 24px;
  }
  .h-25 {
    height: 25px;
    line-height: 25px;
  }
  .h-26 {
    height: 26px;
    line-height: 26px;
  }
  .h-27 {
    height: 27px;
    line-height: 16px;
  }
  .h-28 {
    height: 28px;
    line-height: 27px;
  }
  .h-29 {
    height: 29px;
    line-height: 29px;
  }
  .h-30 {
    height: 30px;
    line-height: 30px;
  }
  .h-32 {
    height: 32px;
    line-height: 32px;
  }
  .h-38 {
    height: 38px;
    line-height: 38px;
  }
  .chart-left {
    position: relative;
    width: 216px;
    height: 269px;
    // float: left;
    .trapezoid-bg {
      position: relative;
      width: 216px;
      height: 269px;
      background: linear-gradient(360deg, rgba(53, 195, 255, 1) 0%, rgba(24, 144, 255, 1) 100%);
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 54px solid rgba(245, 247, 250, 1);
        border-top: 269px solid transparent;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 54px solid rgba(245, 247, 250, 1);
        border-top: 269px solid transparent;
      }
      .space-line {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: -36%;
          width: 81px;
          height: 1px;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          // border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          // background: #dcdfe6;
          z-index: 1;
        }
        &.r-60 {
          &::after {
            right: -60%;
          }
        }
        &.r-57 {
          &::after {
            right: -57%;
          }
        }
        &.r-52 {
          &::after {
            right: -52%;
          }
        }
        &.r-48 {
          &::after {
            right: -48%;
          }
        }
        &.r-42 {
          &::after {
            right: -42%;
          }
        }
      }
    }
  }
  .chart-right {
    position: relative;
    width: 327px;
    // float: left;
    .chart-text {
      position: relative;
      width: 327px;
    }
  }
}
</style>
