mp-ui-pc/src/views/index.vue

<template>
  <div ref="workbench" class="index-workbench">
    <div >
      <div class="brief-box-top">
        <div class="brief-title">
          <span class="icon wk wk-briefing" />
          <span class="text">数据驾驶舱(今日实时数据)</span>
        </div>
        <div class="brief">
          <flexbox
            :span="2"
            class="brief-item">
            <flexbox class="brief-item__body">
              <div class="info">
                <div class="title">
                 实时交易金额
                </div>
                <div
                  class="number">
                  ￥ {{ accDiv((daily.payAmt && daily.payAmt.today || 0), 100)}}
                </div>
               <div class="brief-item__others">
                 <div class="text">
                   较昨天
                 </div>
                 <div class="rate text-one-line">
                   <span class="rate__num">
                      <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) > 0 ">
                          <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: green;" />
                           <span v-if="(daily.payAmt && daily.payAmt.today || 0) >0">
                              {{((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) / daily.payAmt.yesterday }}
                           </span>
                           <span v-else>100</span>
                      </span>
                      <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) == 0">
                          <span v-if="(daily.payAmt && daily.payAmt.today || 0) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="(daily.payAmt && daily.payAmt.today || 0) > 0" class="el-icon-top rate__icon" style="color: red;" />
                           {{(daily.payAmt && daily.payAmt.today || 0) > 0 ? 100 : 0 }}
                      </span>
                      %
                    </span>
                 </div>
               </div>
              </div>
            </flexbox>
          </flexbox>

          <flexbox
            :span="2"
            class="brief-item">
            <flexbox class="brief-item__body">
              <div class="info">
                <div class="title">
                 交易用户
                </div>
                <div
                  class="number">
                  {{daily.payUser && daily.payUser.today || 0}}
                </div>
               <div class="brief-item__others">
                 <div class="text">
                   较昨天
                 </div>
                 <div class="rate text-one-line">
                   <span class="rate__num">
                     <span v-if="(daily.payUser && daily.payUser.yesterday || 0) > 0 ">
                          <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: green;" />
                          <span v-if="(daily.payUser && daily.payUser.today || 0) >0">
                            {{((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) / daily.payUser.yesterday }}
                          </span>
                          <span v-else>100</span>
                     </span>
                     <span v-if="(daily.payUser && daily.payUser.yesterday || 0) == 0">
                          <span v-if="(daily.payUser && daily.payUser.today || 0) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="(daily.payUser && daily.payUser.today || 0) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          {{(daily.payUser && daily.payUser.today || 0) > 0 ? 100 : 0 }}
                     </span>
                     %
                   </span>
                 </div>
               </div>
              </div>
            </flexbox>
          </flexbox>

         <flexbox
            :span="2"
            class="brief-item">
            <flexbox class="brief-item__body">
              <div class="info">
                <div class="title">
                 盲票销售张数
                </div>
                <div
                  class="number">
                  {{daily.ticketNum && daily.ticketNum.today || 0}}
                </div>
               <div class="brief-item__others">
                 <div class="text">
                   较昨天
                 </div>
                 <div class="rate text-one-line">
                   <span class="rate__num">
                     <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) > 0 ">
                          <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: green;" />
                          <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) >0">
                            {{((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) / daily.ticketNum.yesterday }}
                          </span>
                          <span v-else>100</span>
                     </span>
                     <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) == 0">
                         <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) == 0" class="el-icon-sort rate__icon" />
                         <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          {{(daily.ticketNum && daily.ticketNum.today || 0) > 0 ? 100 : 0 }}
                     </span>
                     %
                   </span>

                 </div>
               </div>
              </div>
            </flexbox>
          </flexbox>

          <flexbox
            :span="2"
            class="brief-item">
            <flexbox class="brief-item__body">
              <div class="info">
                <div class="title">
                 新增经销商
                </div>
                <div
                  class="number">
                  {{daily.newSite && daily.newSite.today || 0}}
                </div>
               <div class="brief-item__others">
                 <div class="text">
                   较昨天
                 </div>
                 <div class="rate text-one-line">
                   <span class="rate__num">
                     <span v-if="(daily.newSite && daily.newSite.yesterday || 0) > 0 ">
                          <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: green;" />
                          <span v-if="(daily.newSite && daily.newSite.today || 0) >0">
                            {{((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) / daily.newSite.yesterday }}
                          </span>
                          <span v-else>100</span>
                     </span>
                     <span v-if="(daily.newSite && daily.newSite.yesterday || 0) == 0">
                          <span v-if="(daily.newSite && daily.newSite.today || 0) == 0" class="el-icon-sort rate__icon" />
                          <span v-if="(daily.newSite && daily.newSite.today || 0) > 0" class="el-icon-top rate__icon" style="color: red;" />
                          {{(daily.newSite && daily.newSite.today || 0) > 0 ? 100 : 0 }}
                     </span>
                     %
                   </span>
                 </div>
               </div>
              </div>
            </flexbox>
          </flexbox>
        </div>
        <!-- 交易金额 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">交易金额</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr1"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect1"
              >
              </el-date-picker>
            </span>

            <el-select
              v-model="queryParams1.level"
              placeholder="请选择统计粒度"
              style="width: 160px;height: 30px;line-height: 30px;float: right;"
              filterable
              @change="getPayAmtList()">
               <el-option value="day" label="日粒度">日粒度</el-option>
               <el-option value="week" label="周粒度">周粒度</el-option>
               <el-option value="month" label="月粒度">月粒度</el-option>
            </el-select>
          </div>
          <div class="brief">
             <div ref="echart1" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 交易用户 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">交易用户</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr2"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect2"
              >
              </el-date-picker>
            </span>

            <el-select
              v-model="queryParams2.level"
              placeholder="请选择统计粒度"
              style="width: 160px;height: 30px;line-height: 30px;float: right;"
              filterable
              @change="getPayUserCntList()">
               <el-option value="day" label="日粒度">日粒度</el-option>
               <el-option value="week" label="周粒度">周粒度</el-option>
               <el-option value="month" label="月粒度">月粒度</el-option>
            </el-select>
          </div>
          <div class="brief">
             <div ref="echart2" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 票组销售Top10 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">票组销售Top10</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr3"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect3"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="brief">
             <div ref="echart3" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 经销商销售Top10 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">经销商交易额Top10</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr4"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect4"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="brief">
             <div ref="echart4" style="width: 100%;height: 250px;"></div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>


<!--
<template>
  <div class="coontent">
      <div ref="echart1" style="width: 100%;height: 250px;"></div>
  </div>
</template> -->

<script>
import { getDailyData,getPayAmtList, getPayUserCntList, getTicketBoxTop, getTicketSiteTop} from "@/api/admin/index";
import echarts from "echarts"
import moment from 'moment'
import { mapGetters } from 'vuex'
import { numberFormat, getTimeResult } from "@/utils/util";
import { accDiv, accMul } from '@/utils/util'
export default {
  data() {
    return {
      daily:{},
      chartObj1:null,
      chartObj2:null,
      chartObj3:null,
      chartObj4:null,
      axisOption1: null,
      axisOption2: null,
      axisOption3: null,
      axisOption4: null,
      queryParams1:{
        days:7,
        level:"day"
      },
      queryParams2:{
        days:7,
        level:"day"
      },
      queryParams3:{
        days:7
      },
      queryParams4:{
        days:7
      },
      pickerOptions: {
         shortcuts: [{
          text: '最近7天',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近30天',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近六个月',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
          picker.$emit('pick', [start, end]);
          }
        }]
      },
      timeArr1: [],
      timeArr2: [],
      timeArr3: [],
      timeArr4: []
    };
  },
  mounted: function () {

    this.initChart()
    // this.$nextTick(function () {

    // });
  },

  computed: {
    ...mapGetters(['userInfo']),
  },

  created() {
    this.getDailyData()
  },
  methods: {

    initChart(){
      // 初始化echarts实例
      this.chartObj1 = echarts.init(this.$refs.echart1);
      // 绘制图表
      this.axisOption1 = {
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '交易金额',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                normal: {
                    color: '#F00', //改变折线点的颜色
                    lineStyle: {
                        color: '#508FDE' //改变折线颜色
                    }
                }
            }
          }
        ]
      }
      this.chartObj1.setOption(this.axisOption1, true)

      this.chartObj2 = echarts.init(this.$refs.echart2);
      // 绘制图表
      this.axisOption2 = {
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '交易用户',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                normal: {
                    color: '#F00', //改变折线点的颜色
                    lineStyle: {
                        color: '#508FDE' //改变折线颜色
                    }
                }
            }
          }
        ]
      }
      this.chartObj2.setOption(this.axisOption2, true)

      this.chartObj3 = echarts.init(this.$refs.echart3);
      // 绘制图表
      this.axisOption3 = {
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销售金额',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
    　　　　　　　　//这里是重点
                    color: function(params) {

                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#409EFF','#67C23A', '#E6A23C', '#F56C6C', '#909399','#bae7ff', '#b7eb8f'];
                        if (params.dataIndex >= colorList.length) {
                            let index = params.dataIndex / colorList.length;
                            return colorList[index]
                        }
                        return colorList[params.dataIndex]
                    }
                }
            }
          }
        ]
      }
      this.chartObj3.setOption(this.axisOption3, true)


      this.chartObj4 = echarts.init(this.$refs.echart4);
      // 绘制图表
      this.axisOption4 = {
        title: {
          text: ''
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销售金额',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
    　　　　　　　　//这里是重点
                    color: function(params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#bae7ff', '#b7eb8f', '#409EFF','#67C23A', '#E6A23C', '#F56C6C', '#909399'];
                        if (params.dataIndex >= colorList.length) {
                            let index = params.dataIndex / colorList.length;
                            return colorList[index]
                        }
                        return colorList[params.dataIndex]
                    }
                }
            }
          }
        ]
      }
      this.chartObj4.setOption(this.axisOption4, true)

      this.getPayAmtList()
      this.getPayUserCntList()
      this.getTicketBoxTop()
      this.getTicketSiteTop()
    },

    // 统计今日实时交易金额、交易用户、盲票销售张数、新增经销商数量
    getDailyData() {
      getDailyData({}).then(res => {
          // console.log("getDailyData == "+JSON.stringify(res));
          this.daily = res.data
      }).catch(() => {
        this.loading = false
      })
    },

    accDiv(data){
      return accDiv(data, 100)
    },

    // 统计交易金额（带粒度）
    getPayAmtList() {
      getPayAmtList(this.queryParams1).then(res => {
          // console.log("getPayAmtList == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption1.xAxis.data = xAxisData
          this.axisOption1.series[0].data = yAxisData
          this.chartObj1.setOption(this.axisOption1, true)
      }).catch(() => {
        this.loading = false
      })
    },

    //统计交易用户数（带粒度）
    getPayUserCntList() {
      getPayUserCntList(this.queryParams2).then(res => {
          // console.log("getPayUserCntList == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(element.y)
          }
          this.axisOption2.xAxis.data = xAxisData
          this.axisOption2.series[0].data = yAxisData
          this.chartObj2.setOption(this.axisOption2, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 统计票组销售TOP10
    getTicketBoxTop() {
      getTicketBoxTop(this.queryParams3).then(res => {
          // console.log("getTicketBoxTop == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption3.xAxis.data = xAxisData
          this.axisOption3.series[0].data = yAxisData
          this.chartObj3.setOption(this.axisOption3, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 统计经销商交易额TOP10
    getTicketSiteTop() {
      getTicketSiteTop(this.queryParams4).then(res => {
          // console.log("getTicketSiteTop == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption4.xAxis.data = xAxisData
          this.axisOption4.series[0].data = yAxisData
          this.chartObj4.setOption(this.axisOption4, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 选择时间
    dateSelect1(e) {
      if (e) {
        this.queryParams1.startTime = e[0];
        this.queryParams1.endTime = e[1];
        this.queryParams1.days = 0;
        this.getPayAmtList();
      } else {
        this.queryParams1.startTime = "";
        this.queryParams1.endTime = "";
        this.queryParams1.days = 7;
        this.getPayAmtList();
      }
    },

    // 选择时间
    dateSelect2(e) {
      if (e) {
        this.queryParams2.startTime = e[0];
        this.queryParams2.endTime = e[1];
        this.queryParams2.days = 0;
        this.getPayUserCntList();
      } else {
        this.queryParams2.startTime = "";
        this.queryParams2.endTime = "";
        this.queryParams2.days = 7;
        this.getPayUserCntList();
      }
    },

    // 选择时间
    dateSelect3(e) {
      if (e) {
        this.queryParams3.startTime = e[0];
        this.queryParams3.endTime = e[1];
        this.queryParams3.days = 0;
        this.getTicketBoxTop();
      } else {
        this.queryParams3.startTime = "";
        this.queryParams3.endTime = "";
        this.queryParams3.days = 7;
        this.getTicketBoxTop();
      }
    },

    // 选择时间
    dateSelect4(e) {
      if (e) {
        this.queryParams4.startTime = e[0];
        this.queryParams4.endTime = e[1];
        this.queryParams4.days = 0;
        this.getTicketSiteTop();
      } else {
        this.queryParams4.startTime = "";
        this.queryParams4.endTime = "";
        this.queryParams4.days = 7;
        this.getTicketSiteTop();
      }
    },

  },
};
</script>
<style lang="scss" scoped>

</style>

<style rel="stylesheet/scss" scoped lang="scss">
  .index-workbench {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    padding: 15px 20px 20px;
    position: relative;
    background-color: #f0f2f5;

    &__body {
      height: 100%;
      overflow: auto;
      padding-top: 55px;
    }

    .head {
      position: absolute;
      padding: 15px 20px;
      top: 0;
      right: 0;
      left: 0;
      background: #f5f6f9;
      z-index: 1;

      &__body {
        position: relative;
        .user-box {
          width: unset;
          height: 36px;
          padding: 4px 7px;
          border: 1px solid #E1E1E1;
          border-radius: 3px;
          background-color: white;
          margin-right: 20px;
          display: flex;
          cursor: pointer;
          .user-icon {
            background: #ddd;
            color: white;
            padding: 5px 6px;
            border-radius: 50%;
          }
          .username {
            font-size: 12px;
            margin: 0 8px;
          }
        }


      .sort-btn {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    .brief-box-top {
      width: 100%;
      border-radius: 3px;
      margin-top: 10px;
    }

    .brief-box {
      width: 100%;
      background-color: white;
      border-radius: 3px;
    }

    .brief-title {
      background-color: white;
      padding: 16px 24px;
      border-bottom: 1px solid rgba(0,0,0,.06);
      border-radius: 3px 3px 0 0;
      .icon {
        color: #50CF9E;
        font-size: 18px;
      }
      .text {
        color: #333;
        font-size: 16px;
        margin-left: 5px;
      }
    }

    .brief {
      width: 100%;
      padding: 20px 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 24px;
      border-radius: 0 0 3px 3px;
      .brief-item {
        cursor: pointer;
        width: calc(25% - 20px);
        height: 125px;
        box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
        border-radius: 3px;
        padding: 15px 0px;
        margin: 10px;
        .brief-item__body {
          flex: 1;
          overflow: hidden;
          .icon-box {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 50%;
            margin-right: 10px;
            margin-left: 15px;
            flex-shrink: 0;

            .icon {
              color: white;
              font-size: 19px;
            }
          }
          .info {
            overflow: hidden;
            padding-left: 10px;
            .title {
              font-size: 13px;
            }
            .number {
              font-size: 23px;
              font-weight: bold;
              line-height: 1;
              margin-top: 8px;
              margin-right: 5px;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
        .brief-item__others {
          // position: relative;
          margin-top: 15px;
          width: 100px;
          // text-align: center;
          padding: 0 3px;
          overflow: hidden;

          .text {
            font-size: 12px;
            // margin-left: -5px;
          }
          .rate {
            font-size: 14px;
            color: #000;
            margin-top: 8px;

            .rate__icon {
              font-size: 14px;
              font-weight: bold;
            }
            &.bottom {
              color: #2BBF24;
            }
            &.top {
              color: #F24B4B;
            }
          }
        }
        &:hover {
          box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
        }
      }
    }

    .section {
      margin-top: 18px;
      .left {
        width: calc(60.5% - 20px);
        margin-right: 20px;
        &-content {
          height: 400px;
        }
      }
      .right {
        width: 39.5%;
        &-content {
          height: 400px;
        }
      }

      .left-content + .left-content,
      .right-content + .right-content {
        margin-top: 18px;
      }
    }
  }
</style>