<template>
  <div class="robotRanking flex-col">
    <s-header :name="'机器排行'" :noback="true"></s-header>
    <div class="box1 flex-col">
      <div class="box3 flex-col">
        <div class="main1 flex-col">
          <div class="mod1 flex-col">
            <div class="block1 flex-col justify-between">
              <div class="section1 flex-row justify-between">
                <div class="ImageText1 flex-col">
                  <div class="group4 flex-row justify-between">
                    <div class="layer3 flex-col"></div>
                    <div class="TextGroup1 flex-col">
                      <span class="word3">机器销售排行榜</span>
                    </div>
                  </div>
                </div>
                <!-- <div class="ImageText2 flex-col">
                  <div class="group5 flex-row justify-between">
                    <img
                      class="icon1"
                      referrerpolicy="no-referrer"
                      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng42260e2a9b76fb5590104792c19b4e03a586f47f19f94820f1f44587b1c5bba3"
                    />
                    <div class="TextGroup2 flex-col">
                      <span class="word4">搜索</span>
                    </div>
                  </div>
                </div> -->
              </div>
              <img
                class="img1"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
              />
            </div>
          </div>
          <div class="mod2 flex-row justify-between">
            <span class="info2">日销售排行:</span>
            <div class="outer1 flex-col justify-between">
              <div class="section2 flex-row">
                <span class="txt2">今日</span> <span class="info3">昨日</span>
                <span class="word5">其他</span>
                <div class="bd1 flex-col"></div>
              </div>
              <div class="section3 flex-col">
                <div class="main2 flex-col"></div>
              </div>
            </div>
          </div>
          <div ref="dayChartBox" class="mod3 flex-col"></div>
          <div class="mod4 flex-row justify-between">
            <span class="info7">本周售排行:</span>
            <div class="main21 flex-col justify-between">
              <div class="outer2 flex-row">
                <span class="word17">本周</span>
                <span class="word18">上周</span> <span class="info8">其他</span>
                <div class="layer9 flex-col"></div>
              </div>
              <div class="outer3 flex-col">
                <div class="main22 flex-col"></div>
              </div>
            </div>
          </div>
          <div ref="weekChartBox" class="mod5 flex-col"></div>
          <div class="mod8 flex-row justify-between">
            <span class="word25">本月售排行:</span>
            <div class="box8 flex-col justify-between">
              <div class="outer6 flex-row">
                <span class="word26">本月</span>
                <span class="word27">上月</span>
                <span class="word28">其他</span>
                <div class="outer7 flex-col"></div>
              </div>
              <div class="outer8 flex-col">
                <div class="bd2 flex-col"></div>
              </div>
            </div>
          </div>
          <div ref="monthChartBox" class="mod9 flex-col">
          </div>
          <div class="mod10 flex-row justify-between">
            <span class="info20">本年售排行:</span>
            <div class="bd3 flex-col justify-between">
              <div class="main24 flex-row">
                <span class="word35">今年</span>
                <span class="info21">去年</span>
                <span class="word36">其他</span>
                <div class="main25 flex-col"></div>
              </div>
              <div class="main26 flex-col">
                <div class="box9 flex-col"></div>
              </div>
            </div>
          </div>
          <div ref="yearChartBox" class="mod11 flex-col"></div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import navBar from '@/components/NavBar';
import { getRankingList } from '@/service/robotRanking';
import { getLoginUser } from '@/common/js/utils';
import dateUtil from '@/utils/dateUtil';

export default {
  setup() {
    // dayChartBox weekChartBox monthChartBox yearChartBox
    const user = getLoginUser();
    const dayChartBox = ref();
    let dayChartObj = null;
    const weekChartBox = ref();
    let weeekChartObj = null;
    const monthChartBox = ref();
    let monthChartObj = null;
    const yearChartBox = ref();
    let yearChartObj = null;
    const chartOption = {
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      legend: {
        bottom: 0,
        right: 10,
        itemWidth: 10,
        itemHeight: 10,
        icon: 'rect'
      },
      yAxis: { type: 'value' },
      xAxis: {
        type: 'category',
        data: []
      },
      series: []
    }
    // 初始化页面获取列表
    onMounted(async () => {
      dayGetRankingList();
      weekGetRankingList();
      monthGetRankingList();
      yearGetRankingList();
    });
    // 日排行图表
    const dayGetRankingList = async () => {
      const params = {
        adminId: user.id, ifForeign: user.ifForeign, changeType: 1,
        chartType: 'day', startDate: '2022-08-01 00:00:00', endDate: '2022-08-07 00:00:00'
      };
      // 今日
      params.chartType = 'day';
      params.startDate = dateUtil.formateDate(new Date(new Date(new Date().getTime()).setHours(0,0,0,0)), 'yyyy-MM-dd hh:mm:ss');
      params.endDate = dateUtil.formateDate(new Date(new Date(new Date().getTime()).setHours(23,59,59,59)), 'yyyy-MM-dd hh:mm:ss');
      const { data } = await getRankingList(params);
      if (data.code && data.data) {
        dayChartObj = window.echarts.init(dayChartBox.value, null, { renderer: 'canvas', useDirtyRect: false });
        const dayChartOption = Object.assign({}, chartOption);
        dayChartOption.xAxis.data = data.data.categories;
        dayChartOption.series = [
          {
            ...data.data.series[0],
            type: 'bar',
            itemStyle: { color: '#4D6ADD' }
          },
          {
            ...data.data.series[1],
            type: 'bar',
            itemStyle: { color: '#E59A6D' }
          }
        ];
        dayChartObj.setOption(dayChartOption);
      }
    }
    // 周排行图表
    const weekGetRankingList = async () => {
      const params = {
        adminId: user.id, ifForeign: user.ifForeign, changeType: 1,
        chartType: 'day', startDate: '2022-08-01 00:00:00', endDate: '2022-08-07 00:00:00'
      };
      // 本周
      const curr = new Date;
      const firstday = new Date(curr.setDate(curr.getDate() - curr.getDay() + 1));
      const lastday = new Date(curr.setDate(curr.getDate() - curr.getDay() + 7));
      params.chartType = 'week';
      params.startDate = dateUtil.formateDate(firstday, 'yyyy-MM-dd') + ' 00:00:00';
      params.endDate = dateUtil.formateDate(lastday, 'yyyy-MM-dd') + ' 23:59:59';
      const { data } = await getRankingList(params);
      if (data.code && data.data) {
        weeekChartObj = window.echarts.init(weekChartBox.value, null, { renderer: 'canvas', useDirtyRect: false });
        const dayChartOption = Object.assign({}, chartOption);
        dayChartOption.xAxis.data = data.data.categories;
        dayChartOption.series = [
          {
            ...data.data.series[0],
            type: 'bar',
            itemStyle: { color: '#4D6ADD' }
          },
          {
            ...data.data.series[1],
            type: 'bar',
            itemStyle: { color: '#E59A6D' }
          }
        ];
        weeekChartObj.setOption(dayChartOption);
      }
    }
    // 月排行图表
    const monthGetRankingList = async () => {
      const params = {
        adminId: user.id, ifForeign: user.ifForeign, changeType: 1,
        chartType: 'day', startDate: '2022-08-01 00:00:00', endDate: '2022-08-07 00:00:00'
      };
      // 本月
      const now = new Date(); //当前日期 
      const nowMonth = now.getMonth(); //当前月 
      const nowYear = now.getFullYear(); //当前年
      params.chartType = 'month';
      params.startDate = dateUtil.formateDate(new Date(nowYear, nowMonth, 1), 'yyyy-MM-dd') + ' 00:00:00';
      params.endDate = dateUtil.formateDate(new Date(nowYear, nowMonth+1, 0), 'yyyy-MM-dd') + ' 23:59:59';
      const { data } = await getRankingList(params);
      if (data.code && data.data) {
        monthChartObj = window.echarts.init(monthChartBox.value, null, { renderer: 'canvas', useDirtyRect: false });
        const dayChartOption = Object.assign({}, chartOption);
        dayChartOption.xAxis.data = data.data.categories;
        dayChartOption.series = [
          {
            ...data.data.series[0],
            type: 'bar',
            itemStyle: { color: '#4D6ADD' }
          },
          {
            ...data.data.series[1],
            type: 'bar',
            itemStyle: { color: '#E59A6D' }
          }
        ];
        monthChartObj.setOption(dayChartOption);
      }
    }
    // 年排行图表
    const yearGetRankingList = async () => {
      const params = {
        adminId: user.id, ifForeign: user.ifForeign, changeType: 1,
        chartType: 'day', startDate: '2022-08-01 00:00:00', endDate: '2022-08-07 00:00:00'
      };
      // 本年
      const now = new Date(); //当前日期 
      const nowYear = now.getFullYear(); //当前年
      params.chartType = 'month';
      params.startDate = dateUtil.formateDate(new Date(nowYear, 0, 1), 'yyyy-MM-dd') + ' 00:00:00';
      params.endDate = dateUtil.formateDate(new Date(nowYear, 12, 0), 'yyyy-MM-dd') + ' 23:59:59';
      const { data } = await getRankingList(params);
      if (data.code && data.data) {
        yearChartObj = window.echarts.init(yearChartBox.value, null, { renderer: 'canvas', useDirtyRect: false });
        const dayChartOption = Object.assign({}, chartOption);
        dayChartOption.xAxis.data = data.data.categories;
        dayChartOption.series = [
          {
            ...data.data.series[0],
            type: 'bar',
            itemStyle: { color: '#4D6ADD' }
          },
          {
            ...data.data.series[1],
            type: 'bar',
            itemStyle: { color: '#E59A6D' }
          }
        ];
        yearChartObj.setOption(dayChartOption);
      }
    }
    return {
      dayChartBox,
      weekChartBox,
      monthChartBox,
      yearChartBox,
    };
  },
  components: { sHeader, navBar },
};
</script>

<style lang="less" scoped>
// @import "../common/style/mixin";
body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}
.robotRanking {
  background-color: rgba(245, 245, 245, 1);
  position: relative;
  width: 375px;
  height: 1829px;
  overflow: hidden;
  .box1 {
    width: 375px;
    height: 1829px;
    .box2 {
      height: 64px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged210ff8540d1e20d828b0758e650612a9ea018b41f720bede87fea0f933d8d8)
        100% no-repeat;
      width: 375px;
      .layer1 {
        width: 364px;
        height: 20px;
        margin: 1px 0 0 7px;
        .group1 {
          width: 34px;
          height: 6px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga64b2ae35561e96115c75cc6dfc235eedb108ecf95df957be1ef364417a9806e)
            100% no-repeat;
          margin-top: 7px;
        }
        .word1 {
          width: 38px;
          height: 17px;
          overflow-wrap: break-word;
          color: rgba(81, 84, 106, 1);
          font-size: 12px;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin-left: 21px;
          display: block;
        }
        .group2 {
          width: 30px;
          height: 17px;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin: 3px 0 0 73px;
          .info1 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }
          .word2 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }
        }
        .group3 {
          width: 26px;
          height: 10px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2e68dee6e62554db0f6ac40572f41b7be9cc24d35fc06b24c556fed2b7b18626)
            100% no-repeat;
          margin: 5px 0 0 142px;
        }
      }
      .layer2 {
        width: 218px;
        height: 22px;
        margin: 9px 0 12px 10px;
        .label1 {
          width: 10px;
          height: 18px;
          margin-top: 4px;
        }
        .txt1 {
          width: 80px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          text-align: center;
          white-space: nowrap;
          line-height: 22px;
          display: block;
        }
      }
    }
    .box3 {
      background-color: rgba(255, 255, 255, 1);
      height: 1722px;
      margin-top: 1px;
      width: 375px;
      .main1 {
        width: 375px;
        height: 1716px;
        .mod1 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          width: 375px;
          .block1 {
            width: 375px;
            height: 33px;
            margin-top: 21px;
            .section1 {
              width: 345px;
              height: 17px;
              margin-left: 15px;
              .ImageText1 {
                height: 16px;
                margin-top: 1px;
                width: 135px;
                .group4 {
                  width: 135px;
                  height: 16px;
                  .layer3 {
                    width: 14px;
                    height: 16px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaf434f154dc423fe53e1c1f756bb2336f532874e7b7ea909f1680d0cabd0ab9d)
                      100% no-repeat;
                  }
                  .TextGroup1 {
                    height: 14px;
                    margin-top: 2px;
                    width: 113px;
                    .word3 {
                      width: 113px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 15px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 15px;
                      display: block;
                    }
                  }
                }
              }
              .ImageText2 {
                height: 16px;
                width: 39px;
                .group5 {
                  width: 39px;
                  height: 16px;
                  .icon1 {
                    width: 14px;
                    height: 14px;
                    margin-top: 1px;
                  }
                  .TextGroup2 {
                    height: 16px;
                    width: 22px;
                    .word4 {
                      width: 22px;
                      height: 16px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 11px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 16px;
                      display: block;
                    }
                  }
                }
              }
            }
            .img1 {
              width: 375px;
              height: 2px;
              margin-top: 14px;
            }
          }
        }
        .mod2 {
          width: 345px;
          height: 21px;
          margin: 20px 0 0 15px;
          .info2 {
            width: 69px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .outer1 {
            width: 268px;
            height: 21px;
            .section2 {
              width: 203px;
              height: 13px;
              margin-left: 24px;
              .txt2 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                // color: #8787a6;
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .info3 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .word5 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .bd1 {
                width: 8px;
                height: 4px;
                background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0a67adf0a1b64add5ca4e2d35ffe79b174c71c55cbff3edbe6616c21217895a7)
                  100% no-repeat;
                margin: 7px 0 0 1px;
              }
            }
            .section3 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 80;
              position: relative;
              width: 268px;
              height: 1px;
              margin-top: 7px;
              .main2 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 81;
                position: absolute;
                left: 18px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
        }
        .mod3 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 24;
          height: 350px;
          margin-top: 10px;
          width: 375px;
          position: relative;
        }
        .mod4 {
          width: 345px;
          height: 21px;
          margin: 40px 0 0 15px;
          .info7 {
            width: 69px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .main21 {
            width: 268px;
            height: 21px;
            .outer2 {
              width: 203px;
              height: 13px;
              margin-left: 24px;
              .word17 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .word18 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .info8 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .layer9 {
                width: 8px;
                height: 4px;
                background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0a67adf0a1b64add5ca4e2d35ffe79b174c71c55cbff3edbe6616c21217895a7)
                  100% no-repeat;
                margin: 7px 0 0 1px;
              }
            }
            .outer3 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 140;
              position: relative;
              width: 268px;
              height: 1px;
              margin-top: 7px;
              .main22 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 141;
                position: absolute;
                left: 18px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
        }
        .mod5 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 84;
          height: 350px;
          margin-top: 10px;
          width: 375px;
          position: relative;
        }
        .mod8 {
          width: 345px;
          height: 21px;
          margin: 39px 0 0 15px;
          .word25 {
            width: 69px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .box8 {
            width: 268px;
            height: 21px;
            .outer6 {
              width: 203px;
              height: 13px;
              margin-left: 24px;
              .word26 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .word27 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .word28 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .outer7 {
                width: 8px;
                height: 4px;
                background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0a67adf0a1b64add5ca4e2d35ffe79b174c71c55cbff3edbe6616c21217895a7)
                  100% no-repeat;
                margin: 7px 0 0 1px;
              }
            }
            .outer8 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 213;
              position: relative;
              width: 268px;
              height: 1px;
              margin-top: 7px;
              .bd2 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 214;
                position: absolute;
                left: 18px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
        }
        .mod9 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 156;
          height: 350px;
          margin-top: 10px;
          width: 375px;
          position: relative;
        }
        .mod10 {
          width: 345px;
          height: 21px;
          margin: 39px 0 0 15px;
          .info20 {
            width: 69px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .bd3 {
            width: 268px;
            height: 21px;
            .main24 {
              width: 203px;
              height: 13px;
              margin-left: 24px;
              .word35 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .info21 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .word36 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                margin-left: 55px;
                display: block;
              }
              .main25 {
                width: 8px;
                height: 4px;
                background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0a67adf0a1b64add5ca4e2d35ffe79b174c71c55cbff3edbe6616c21217895a7)
                  100% no-repeat;
                margin: 7px 0 0 1px;
              }
            }
            .main26 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 273;
              position: relative;
              width: 268px;
              height: 1px;
              margin-top: 7px;
              .box9 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 274;
                position: absolute;
                left: 18px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
        }
        .mod11 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 217;
          height: 350px;
          margin-top: 10px;
          width: 375px;
          position: relative;
        }
      }
    }
  }
}
</style>
