<template>
  <div class="growth">
    <div style="background-color: #0078fc;">
      <portalHeader textColor="#fff" class="qa-nav" @emitInput="emitInput" @showClass="showClass"></portalHeader>
    </div>
    <div class="growth-content">
      <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
      <div class="pathdetails">
        <div class="pdname">
          销售岗Band6路径图
        </div>
        <div class="detailinfo">
          <div class="select">
            <div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
            <div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
            <div class="select-radio"><span style="background: #F2675D;"></span>已完成</div>
          </div>
          <div class="btn">
            <el-button type="primary" @click="dialogTableVisible = true">全岗位路径图</el-button>
            <el-button type="primary" @click="drawer = true" style="margin-left: 0;margin-top: 30px;">信息概览</el-button>
          </div>
          <div class="detailContent">
            <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
              <div v-for="item, index in dataList" :key="index">
                <el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="hover"
                  :visible-arrow="false">
                  <div style="font-size: 14px;padding: 20px 20px 10px; ">
                    <div style="font-size: 16px;font-weight: 600">{{ item.title }}</div>
                    <div style="margin: 20px 0;">
                      <el-tag>必修</el-tag>
                      <el-tag type="success">在线</el-tag>
                    </div>
                    <div>
                      <span style="color: #387DF7;">学习进度</span>
                      <el-progress :percentage="50"></el-progress>
                    </div>
                    <div style="margin: 20px 0;">课程讲师：启用家</div>
                    <div>课程简介：无</div>
                    <el-button style="width: 100%;margin-top: 20px;" type="primary">
                      <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div></div>
                        <span>去学习</span>
                        <svg t="1706166377362" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="10521" width="24"
                          height="24">
                          <path
                            d="M512 102.4a422.912 422.912 0 1 0 422.570667 423.936A422.570667 422.570667 0 0 0 512 102.4z m117.418667 446.805333L462.506667 716.8a34.133333 34.133333 0 0 1-48.469334-48.128l143.018667-143.018667-143.018667-143.018666a34.133333 34.133333 0 0 1 0-48.128 34.133333 34.133333 0 0 1 48.469334 0l166.912 166.912a34.133333 34.133333 0 0 1 0 49.152z"
                            fill="#b4caf7" p-id="10522"></path>
                        </svg>
                      </div>
                    </el-button>
                  </div>
                  <div slot="reference" class="address" :style="{
                    backgroundColor: getColor(item.status, 0),
                    left: getPosition(item.name, index).left + 'px',
                    top: getPosition(item.name, index).top + 'px'
                  }">
                    <div class="icon">
                      <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
                        {{ item.progress }}%
                      </div>
                      <div v-else class="icon-content" style="background-color: #fff;">
                        <svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
                          version="1.1" p-id="4648">
                          <path
                            d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
                            fill="#F2675D" p-id="4649"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </el-popover>
                <div :style="{
                  left: (getPosition(item.name, index).left + 55) + 'px',
                  top: getPosition(item.name, index).top + 'px'
                }" class="iconTitle">{{ item.title }}</div>
              </div>
            </div>
          </div>
          <div class="footerBtn">
            <el-button type="primary">1-7课</el-button>
            <el-button>8-14课程</el-button>
            <el-button type="primary" @click="switchInfo(5)">5</el-button>
            <el-button type="primary" @click="switchInfo(7)">7</el-button>
            <el-button type="primary" @click="switchInfo(14)">14</el-button>
          </div>
        </div>
      </div>
    </div>




    <div class="u-class">
      <el-dialog :visible.sync="showUClass" width="833px">
        <div class="ClassBoxContent">
          <img src="@/assets/images/u_class.png" alt="" class="img" />
          <div class="ContentBox">
            <div class="left">
              <div class="title">U选小课堂</div>
              <div class="jy">项目简介</div>
              <div class="msg">
                于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
              </div>
              <div class="bottom"></div>
            </div>
            <div class="right">
              <div class="tyl" @click="tylClick">
                <div class="tyl_title">
                  <img src="@/assets/images/dc.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">通用力专区</span>
                </div>
                <div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
                <div class="tyl_msg">
                  内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
                </div>
              </div>
              <div class="cyl" @click="cylClick">
                <div class="tyl_title">
                  <img src="@/assets/images/cyl.png" alt="" class="tyl_title_img" />
                  <span class="tyl_title_msg">创新力专区</span>
                </div>
                <div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
                <div class="tyl_msg">
                  内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog width="60%" :visible.sync="dialogTableVisible">
      <span slot="title" class="dialog-header">
        <div style="margin-right: 10px;">全岗位路径</div>
        <div class="otherImg">
          <img src="../../assets/images/growth/CurrentPath.png" alt="">
          <span>当前路径</span>
        </div>
        <div class="otherImg">
          <img src="../../assets/images/growth/OtherPath.png" alt="">
          <span>其他路径</span>
        </div>
        <div class="otherImg">
          <img src="../../assets/images/growth/NoPermissionPath.png" alt="">
          <span>其他路径（无权限）</span>
        </div>
      </span>
      <el-table :data="gridData" border :span-method="objectSpanMethod">
        <el-table-column align="center" property="name" label=""></el-table-column>
        <el-table-column align="center" label="市场企划岗">
          <template slot-scope="scope">
            <span v-if="scope.row.marketStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
            <span v-else-if="scope.row.marketStatus === 1">
              <img src="../../assets/images/growth/OtherPath.png" alt="">
            </span>
            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售岗">
          <template slot-scope="scope">
            <span v-if="scope.row.saleStatus === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
            <span v-else-if="scope.row.saleStatus === 1">
              <img src="../../assets/images/growth/OtherPath.png" alt="">
            </span>
            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品企划岗">
          <template slot-scope="scope">
            <span v-if="scope.row.productStatus === 0"><img src="../../assets/images/growth/CurrentPath.png"
                alt=""></span>
            <span v-else-if="scope.row.productStatus === 1">
              <img src="../../assets/images/growth/OtherPath.png" alt="">
            </span>
            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="FAE岗">
          <template slot-scope="scope">
            <span v-if="scope.row.FAEStatusL === 0"><img src="../../assets/images/growth/CurrentPath.png" alt=""></span>
            <span v-else-if="scope.row.FAEStatusL === 1">
              <img src="../../assets/images/growth/OtherPath.png" alt="">
            </span>
            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销售管理岗位">
          <template slot-scope="scope">
            <span v-if="scope.row.salesManagement === 0"><img src="../../assets/images/growth/CurrentPath.png"
                alt=""></span>
            <span v-else-if="scope.row.salesManagement === 1">
              <img src="../../assets/images/growth/OtherPath.png" alt="">
            </span>
            <span v-else><img src="../../assets/images/growth/NoPermissionPath.png" alt=""></span>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <el-drawer title="信息概况" :visible.sync="drawer" size="40%">
      <div style="padding:0 40px;">
        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="公告" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="共享文档" name="second">配置管理</el-tab-pane>
          </el-tabs>
        </el-card>

      </div>
    </el-drawer>
  </div>
</template>

<script>
import portalHeader from '@/components/PortalHeader.vue';
export default {
  name: 'Growth',
  components: { portalHeader },
  data() {
    return {
      showUClass: false,
      colorAttrValue: {
        0: ['#f1c9c3', "#e27166"],
        1: ["#b8e3b8", "#8ac84a"],
        2: ['#FFD04B', '#FBA944']
      },
      iconAttrs: {
        '路径图背景': {
          positions: [
            { left: 656, top: 594 },
            { left: 3, top: 530 },
            { left: 436, top: 360 },
            { left: 904, top: 334 },
            { left: 990, top: 56 },
          ]
        },
        '路径图背景7': {
          positions: [
            { left: 656, top: 594 },
            { left: 323, top: 560 },
            { left: 118, top: 426 },
            { left: 504, top: 360 },
            { left: 904, top: 336 },
            { left: 1200, top: 190 },
            { left: 988, top: 56 },
          ]
        },
        '路径图背景全': {
          positions: [
            { left: 500, top: 1440 },
            { left: 270, top: 1380 },
            { left: 0, top: 1225 },
            { left: 215, top: 1088 },
            { left: 606, top: 1000 },
            { left: 920, top: 936 },
            { left: 1106, top: 658 },
            { left: 880, top: 580 },
            { left: 520, top: 528 },
            { left: 168, top: 476 },
            { left: 140, top: 286 },
            { left: 334, top: 140 },
            { left: 592, top: 38 },
            { left: 970, top: -30 },
          ]
        }
      },
      dataList: [{
        name: '路径图背景',
        progress: '99',
        title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
        status: 0
      }, {
        name: '路径图背景',
        progress: '10',
        title: '岗前培JT辅导OJT辅导',
        status: 1
      },
      {
        name: '路径图背景',
        progress: '10',
        title: '岗前',
        status: 2
      },
      {
        name: '路径图背景',
        progress: '10',
        title: '岗位',
        status: 0
      },
      {
        name: '路径图背景',
        progress: '10',
        title: '岗前岗前',
        status: 1
      }],
      dialogTableVisible: false,
      gridData: [{
        name: 'Band10+',
        marketStatus: 0,
        saleStatus: 1,
        productStatus: 2,
        FAEStatusL: 0,
        salesManagement: 1
      }, {
        name: 'Band10',
        marketStatus: 1,
        saleStatus: 2,
        productStatus: 1,
        FAEStatusL: 0,
        salesManagement: 1
      }, {
        name: 'Band9',
        marketStatus: 2,
        saleStatus: 0,
        productStatus: 0,
        FAEStatusL: 0,
        salesManagement: 1
      }, {
        name: 'Band8',
        marketStatus: 0,
        saleStatus: 1,
        productStatus: 2,
        FAEStatusL: 0,
        salesManagement: 1
      }, {
        name: 'Band7',
        marketStatus: 1,
        saleStatus: 2,
        productStatus: 0,
        FAEStatusL: 0,
        salesManagement: 1
      }, {
        name: 'Band6',
        marketStatus: 2,
        saleStatus: 0,
        productStatus: 1,
        FAEStatusL: 0,
        salesManagement: 1
      }],
      drawer: false,
      activeName: 'first'

    };
  },
  mounted() {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex !== 0) {
        if (rowIndex <= 1) { return false }
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    switchInfo(num) {
      if (num === 5) {
        this.dataList = [{
          name: '路径图背景',
          progress: '99',
          title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
          status: 0
        }, {
          name: '路径图背景',
          progress: '10',
          title: '岗前培JT辅导OJT辅导',
          status: 1
        },
        {
          name: '路径图背景',
          progress: '10',
          title: '岗前',
          status: 2
        },
        {
          name: '路径图背景',
          progress: '10',
          title: '岗位',
          status: 0
        },
        {
          name: '路径图背景',
          progress: '10',
          title: '岗前岗前',
          status: 1
        }]
        return false
      }
      if (num === 7) {
        this.dataList = [{
          name: '路径图背景7',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 0
        }, {
          name: '路径图背景7',
          progress: '10',
          title: '入模培训',
          status: 2
        },
        {
          name: '路径图背景7',
          progress: '10',
          title: '岗前培训+OJT辅导',
          status: 1
        },
        {
          name: '路径图背景7',
          progress: '10',
          title: 'BOE薪酬福利体系',
          status: 0
        },
        {
          name: '路径图背景7',
          progress: '10',
          title: 'PDCA循环工作法',
          status: 1
        },
        {
          name: '路径图背景7',
          progress: '10',
          title: '如何让沟通更有效率',
          status: 2
        },
        {
          name: '路径图背景7',
          progress: '10',
          title: '商务邮件撰写技巧',
          status: 1
        }]
        return false
      }
      if (num === 14) {
        this.dataList = [{
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 0
        }, {
          name: '路径图背景全',
          progress: '10',
          title: '入模培训',
          status: 2
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: '岗前培训+OJT辅导',
          status: 1
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: 'BOE薪酬福利体系',
          status: 0
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: 'PDCA循环工作法',
          status: 1
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: '如何让沟通更有效率',
          status: 2
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: '商务邮件撰写技巧',
          status: 1
        },
        {
          name: '路径图背景全',
          progress: '10',
          title: '商务邮件撰写技巧',
          status: 1
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 0
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 2
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 0
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招GROW180/社招入职',
          status: 1
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招',
          status: 2
        }, {
          name: '路径图背景全',
          progress: '99',
          title: '特训营/校招',
          status: 0
        }]
      }
    },
    showClass(flag) {
      if (flag) {
        this.showUClass = flag;
      }
    },
    emitInput(val) {
      this.queryKeyWord = val;
      this.isSeach = true;
      this.search();
    },
    getColor(status, index) {
      return this.colorAttrValue[status][index]
    },
    getPosition(name, index) {
      return this.iconAttrs[name].positions[index]
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header {
  border-bottom: 1px solid #E8E8E8;
  padding-bottom: 20px;

  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333333;

    .otherImg {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 40px;

      img {
        width: 27px;
        height: 24px;
        margin-right: 6px;
      }
    }
  }
}



.address {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    clip: rect(26px 100px 50px 26px);
    background: inherit;
    transform: rotate(45deg);
  }

  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);

    .icon-content {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 12px;
      color: #fff;
      text-align: center;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      line-height: 36px;
      // background-color: #8bc94b;
      border-radius: 50%;
    }
  }

}

.iconTitle {
  position: absolute;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
  border-radius: 80px 80px 80px 8px;
  padding: 0 20px;
  white-space: nowrap;
}


.growth-content {
  position: relative;
  height: 100vh;

  .pathdetails {
    padding: 30px;
    display: flex;
    flex-direction: column;

    .pdname {
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      margin-top: 17px;
    }

    .detailinfo {
      position: relative;
      width: 100%;
      margin-top: 30px;
      background: #ffffff;
      border-radius: 8px;
      padding: 23px 25px;
      min-width: 1380px;

      .btn {
        position: absolute;
        left: 30px;
        display: flex;
        flex-direction: column;
      }

      .select {
        position: absolute;
        top: 30px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .select-radio {
          margin-left: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #333333;

          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 4px;
            margin-right: 9px;
          }
        }
      }

      .detailContent {
        width: 100%;
        margin: 80px 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        .detailbgc {
          width: 1380px;
          height: 699px;
          min-width: 1380px;
          position: relative;
          background-image: url('../../assets/images/growth/firstRoadmap.png');
          background-repeat: no-repeat;

          &::before {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 737px;
            background-image: url('../../assets/images/growth/begin.png');
            background-repeat: no-repeat;
            width: 190px;
            height: 55px;
            z-index: 1000;
          }
        }

        .detailAllbgc {
          width: 1380px;
          height: 1590px;
          min-width: 1380px;
          position: relative;
          background-image: url('../../assets/images/growth/roadmap.png');
          background-repeat: no-repeat;

          &::before {
            content: '';
            position: absolute;
            bottom: 10px;
            left: 750px;
            background-image: url('../../assets/images/growth/begin.png');
            background-repeat: no-repeat;
            width: 190px;
            height: 55px;
            z-index: 1000;
          }
        }
      }

      .footerBtn {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-button {
          width: 100px;
        }
      }
    }
  }
}




.u-class {
  ::v-deep .el-dialog {
    border-radius: 15px;

    .el-dialog__headerbtn .el-dialog__close {
      color: white;
      position: absolute;
      z-index: 99;
      right: 15px;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0px;
  }

  .ClassBoxContent {
    width: 100%;
    height: 456px;
    // background: red;
    border-radius: 15px;

    .ContentBox {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 9;
      display: flex;

      .left,
      .right {
        height: calc(100% - 30px);
      }

      .left {
        padding-left: 30px;
        width: 48%;

        .title {
          width: 200px;
          height: 59px;
          line-height: 59px;
          text-align: center;
          margin-left: -8px;
          font-size: 38px;
          color: white;
          margin-top: 42.97px;
          padding-top: 5px;
          text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
        }

        .jy {
          color: white;
          font-size: 20px;
          margin-top: 87.53px;
          font-weight: 400;
        }

        .msg {
          margin-top: 5px;
          color: rgba(255, 255, 255, 0.85);
          width: 326px;
          text-align: justify;
          line-height: 20px;
        }

        .bottom {
          width: 100px;
          height: 1px;
          background: rgba(255, 255, 255, 0.85);
          margin-top: 40px;
        }
      }

      .right {
        // padding-left: 10px;
        width: 50%;

        .tyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 160px;
          margin-top: 83px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .tyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
        }

        .cyl {
          cursor: pointer;
          width: calc(100% - 20px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          height: 160px;
          margin-top: 10px;

          .tyl_title {
            width: 100%;
            padding-left: 20px;
            padding-top: 20px;

            .tyl_title_img {
              width: 18px;
              height: 18px;
            }

            .tyl_title_msg {
              font-size: 20px;
              margin-left: 10px;
              color: #333333;
              font-weight: 600;
            }
          }

          .tyl_jy {
            margin-top: 6.5px;
            font-size: 14px;
            font-weight: 600;
            padding-left: 20px;
            color: #333333;
          }

          .tyl_msg {
            width: 350.36px;
            margin-top: 13px;
            margin-left: 20px;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
            letter-spacing: 0;
            text-align: justify;
          }
        }

        .cyl:hover {
          border: 0.96px solid rgba(140, 105, 242, 1);
          box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
        }
      }
    }

    .img {
      width: 835px;
      margin-left: -1px;
      margin-top: -1px;
      position: absolute;
      top: 0px;
    }
  }
}
</style>
