投保王者界面效果实现

投保王者是一个单页应用，使用webpack作项目管理与应用打包，其核心在于对vue及vue-router的技术掌握。整个应用除了几张大图外都是用纯代码实现。

整个应用使用以下技术栈实现

webpack
vue
vue-router
echarts

在这里，不讲整个应用如何实现，只讲怎么写出如下图的页面效果：

投保王者

除了顶部的LOGO（图1）是图片外其余全用代码实现。以下就以这个页面作一个简单介绍。

图1

1、雷达图（图2）使用了ECharts实现，ECharts雷达图支持颜色自定义，中间的头像使用绝对定位，所以这里需要知道雷达图的相对位置。

图2

2、菱形方块（图3）使用CSS3的 transform: skew(-15deg);实现，期中要注意的是如果容器倾斜了那么里面的子容器也会随之倾斜，如何让内容不倾斜呢？所以需让子容器与父有一个相反的倾斜角度。
实现代码如下：

    // html部分
    <div class="ub grade bc-text-white">
      <div class="ub ub-ver ub-f1 ub-con ub-ac ub-pc left">
        <div class="ub">
          <span style="color:#FFF225">连续</span><span>答对题数</span>
        </div>
        <div style="font-size:1.8em" class="ub">15</div>
      </div>
      <div class="ub ub-ver ub-f1 ub-con ub-ac ub-pc right">
        <div class="ub">
          <span style="color:#FFF225">荣耀</span><span>称号</span>
        </div>
        <div style="font-size:1.8em" class="ub">投保少侠</div>
      </div>
    </div>
      //CSS部分
        .grade {
            margin: 1.2em -1em 0;
            .left {
                height: 5em;
                left: -0.2em;
                background-image: linear-gradient(90deg, #2767FF 0%, #EA17FF 100%);
                transform: skew(-15deg);
                div {
                    transform: skew(15deg);
                }
            }
            .right {
                height: 5em;
                top: 1em;
                right: -0.2em;
                background-image: linear-gradient(90deg, #2767FF 0%, #EA17FF 100%);
                transform: skew(-15deg);
                div {
                    transform: skew(15deg);
                }
            }
        }

以上代码css为 grade为父容器，right、left为子容器。

图3

3、背景渐变的实现同样使用的是css3技术，代码如下：

.content {
        background-image: linear-gradient(135deg, #0D1E46 0%, #6600BD 100%);
}

只需一句代码，是不是非常简单？