<template>
  <div class="home-container layout-pd">
    <el-row :gutter="10">
      <el-col :span="14">
        <div class="rowhome" v-if="state.uitem.total">
<!--          <div class="indextopitem" @click="gourl('/statistics/enterprise')">
            <div class="indextopitemlef">
              <span>企业总数</span>
              <p>{{ state.uitem.total.corpTotal }}</p>
            </div>
            <div class="indextoprig" style="background-color: #6484df">
              <i class="font24 iconfont icon-qiye1" style="color: #fff"></i>
            </div>
          </div>-->
          <div class="indextopitem" @click="gourl('/statistics/project')">
            <div class="indextopitemlef">
              <span>项目总数</span>
              <p>{{ state.uitem.total.projectTotal }}</p>
            </div>
            <div class="indextoprig" style="background-color: #6d63fc">
              <i class="font24 iconfont icon-qiye1" style="color: #fff"></i>
            </div>
          </div>
          <div class="indextopitem" @click="gourl('/query/projectQueryor')">
            <div class="indextopitemlef">
              <span>拿地未开工项目</span>
              <p>{{ state.uitem.total.waitProjectTotal }}</p>
            </div>
            <div class="indextoprig" style="background-color: #56b22d">
              <i class="font24 iconfont icon-tudi" style="color: #fff"></i>
            </div>
          </div>
          <div class="indextopitem" @click="gourl('/statistics/project')">
            <div class="indextopitemlef">
              <span>在建在售项目</span>
              <p>{{ state.uitem.total.buildSaleProjectTotal }}</p>
            </div>
            <div class="indextoprig" style="background-color: #ec8878">
              <i class="font24 iconfont icon-zaishouxiangmu" style="color: #fff"></i>
            </div>
          </div>
          <div class="indextopitem" @click="gourl('/statistics/project')">
            <div class="indextopitemlef">
              <span>停工停建项目</span>
              <p>{{ state.uitem.total.shutdownProjectTotal }}</p>
            </div>
            <div class="indextoprig" style="background-color: #f8c360">
              <i class="font24 iconfont icon-tinggongbiaoqian" style="color: #fff"></i>
            </div>
          </div>
        </div>
        <!-- <el-row :gutter="10">
          <el-col :span="4">

          </el-col>
          <el-col :span="4">
          
          </el-col>
          <el-col :span="4">
          
          </el-col>
          <el-col :span="4">
           
          </el-col>
          <el-col :span="4">
           
          </el-col>
        </el-row> -->
        <div class="card marin" v-if="state.uitem.supervise">
          <div class="cardTitle" @click="gourl('/statistics/funds')">预售资金监管统计</div>
          <div class="cardmoney">
            <div class="cardmoneyitem">
              <div class="cardmoneyitemlef" style="background-color: #ecfdf8">
                <SvgIcon name="ele-Coin" :size="32" style="color: #3ccde6" />
              </div>
              <div class="cardmoenyitemrig">
                <span>{{
      proxy?.$method.numFormat(state.uitem.supervise.superviseAmount, 0)
    }}</span>
                <p>监管总额度</p>
              </div>
            </div>
            <div class="cardmoneyitem">
              <div class="cardmoneyitemlef" style="background-color: #ecf2fd">
                <i class="flex-margin font30 iconfont icon-jine1" style="color: #3cabe6"></i>
              </div>
              <div class="cardmoenyitemrig">
                <span>{{
        proxy?.$method.numFormat(state.uitem.supervise.keepAmount, 0)
      }}</span>
                <p>留存总额度</p>
              </div>
            </div>
            <div class="cardmoneyitem">
              <div class="cardmoneyitemlef" style="background-color: #f7ecfd">
                <i class="flex-margin font30 iconfont icon-qianbao" style="color: #973ce6"></i>
              </div>
              <div class="cardmoenyitemrig">
                <span>{{
        proxy?.$method.numFormat(state.uitem.supervise.balance, 0)
      }}</span>
                <p>余额</p>
              </div>
            </div>
            <div class="cardmoneyitem">
              <div class="cardmoneyitemlef" style="background-color: #fdf6ec">
                <i class="flex-margin font30 iconfont icon-hetongjine" style="color: #e6a23c"></i>
              </div>
              <div class="cardmoenyitemrig">
                <span>{{
        proxy?.$method.numFormat(state.uitem.supervise.totalInAmount, 0)
      }}</span>
                <p>交存总金额</p>
              </div>
            </div>
            <div class="cardmoneyitem">
              <div class="cardmoneyitemlef" style="background-color: #fdecf0">
                <i class="flex-margin font30 iconfont icon-zhichu" style="color: #e63c67"></i>
              </div>
              <div class="cardmoenyitemrig">
                <span>{{
        proxy?.$method.numFormat(state.uitem.supervise.totalOutAmount, 0)
      }}</span>
                <p>支出总金额</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card marin" v-if="state.uitem.commercialHouse">
          <div class="cardTitle" @click="gourl('statistics/housing')">商品房统计</div>
          <div class="cardshophouse">
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/0.svg" alt="" />
                <span>商品房总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{ proxy?.$method.numFormat(state.uitem.commercialHouse.totalNum) }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
      proxy?.$method.numFormat(state.uitem.commercialHouse.totalArea, 0)
    }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/1.svg" alt="" />
                <span>批售总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.approveTotalNum
        )
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.approveTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/2.svg" alt="" />
                <span>销售总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(state.uitem.commercialHouse.saleTotalNum)
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.saleTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/3.svg" alt="" />
                <span>库存总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.inventoryTotalNum
        )
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.inventoryTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/4.svg" alt="" />
                <span>住宅总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(state.uitem.commercialHouse.resTotalNum)
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/5.svg" alt="" />
                <span>住宅批售总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resApproveTotalNum
        )
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resApproveTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/6.svg" alt="" />
                <span>住宅销售总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resSaleTotalNum
        )
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resSaleTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
            <div class="shophouseitem">
              <div class="shophouseitemtitle">
                <img src="../../assets/index/7.svg" alt="" />
                <span>住宅库存总量</span>
              </div>
              <div class="shophouseitembom">
                <div class="shbomitem">
                  <span>套数：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resInventoryTotalNum
        )
      }}
                  </p>
                </div>
                <div class="shbomitem">
                  <span>面积：</span>
                  <p>
                    {{
        proxy?.$method.numFormat(
          state.uitem.commercialHouse.resInventoryTotalArea,
          0
        )
      }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="card" v-if="state.uitem.earlyWarning">
          <div class="cardTitle cardTitlerow" @click="gourl('statistics/month')">
            <div class="cardtitlelef">上月销售情况分析</div>
            <div class="cardtitlerig">{{ state.uitem.earlyWarning.yearMonth }}</div>
          </div>
          <div class="earlycontent">
            <div class="earlyitem">
              <div class="earlyitemtop">
                <p>销售套数</p>
                <span>{{
      proxy?.$method.numFormat(state.uitem.earlyWarning.saleNum)
    }}</span>
              </div>
              <div class="earlyitembom">
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.saleNumQoq) == -1
        ? 'greencolor'
        : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>环比</p>
                    <span>{{ state.uitem.earlyWarning.saleNumQoq }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.saleNumQoq) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.saleNumYoy) == -1
      ? 'greencolor'
      : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>同比</p>
                    <span>{{ state.uitem.earlyWarning.saleNumYoy }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.saleNumYoy) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
              </div>
            </div>
            <div class="earlyitem">
              <div class="earlyitemtop">
                <p>销售面积</p>
                <span>{{
      proxy?.$method.numFormat(state.uitem.earlyWarning.saleArea, 1)
    }}</span>
              </div>
              <div class="earlyitembom">
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.saleAreaQoq) == -1
        ? 'greencolor'
        : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>环比</p>
                    <span>{{ state.uitem.earlyWarning.saleAreaQoq }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.saleAreaQoq) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.saleAreaYoy) == -1
      ? 'greencolor'
      : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>同比</p>
                    <span>{{ state.uitem.earlyWarning.saleAreaYoy }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.saleAreaYoy) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
              </div>
            </div>
            <div class="earlyitem">
              <div class="earlyitemtop">
                <p>销售单价</p>
                <span>{{
                  proxy?.$method.numFormat(state.uitem.earlyWarning.unitPrice)
                  }}</span>
              </div>
              <div class="earlyitembom">
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.unitPriceQoq) == -1
        ? 'greencolor'
        : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>环比</p>
                    <span>{{ state.uitem.earlyWarning.unitPriceQoq }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.unitPriceQoq) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
                <div class="earlyitembomitem" :class="Math.sign(state.uitem.earlyWarning.unitPriceYoy) == -1
      ? 'greencolor'
      : 'redcolor'
      ">
                  <div class="earlbomitemlef">
                    <p>同比</p>
                    <span>{{ state.uitem.earlyWarning.unitPriceYoy }}</span>
                  </div>
                  <div class="earlbomitemrig">
                    <SvgIcon :name="Math.sign(state.uitem.earlyWarning.unitPriceYoy) == -1
      ? 'ele-CaretBottom'
      : 'ele-CaretTop'
      " :size="15" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rowchars">
          <div class="rowsitem">
            <div class="cards">
              <div class="cardTitle">停工停建项目占比</div>
              <div class="earlyrowitemtitle"></div>
              <div class="sdiv">
                <ucharts width="100%" height="250px" :fullOptions="state.pieoptions" :loading="state.pieloding">
                </ucharts>
              </div>
            </div>
          </div>
          <div style="width: 10px"></div>
          <div class="rowsitem">
            <div class="cards">
              <div class="cardTitle">停工停建建筑面积占比</div>
              <div class="sdiv">
                <ucharts width="100%" height="250px" :fullOptions="state.piesoptions" :loading="state.piesloding">
                </ucharts>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="card marin">
      <div class="cardTitle">商品房总量分析</div>
      <ucharts height="300px" :fullOptions="state.lineoptions" :loading="state.loading"></ucharts>
    </div>
  </div>
</template>

<script setup lang="ts" name="homes">
import { homeApi } from "/@/api/home/index";
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();
import { useRouter } from "vue-router";
import {useLoginApi} from "/@/api/login";
import {Session} from "/@/utils/storage";
let router = useRouter();

const state = reactive({
  uitem: {} as any,
  lineoptions: {} as any,
  pieoptions: {} as any,
  piesoptions: {} as any,
  loading: true,
  pieloding: true,
  piesloding: true,
  tabs: "",
  areaCode:"",
}as any);

async function loadData() {
  let item = await homeApi().index({
    areaCode:state.areaCode
  });
  state.uitem = item.data;

  // 折线图
  let list = item.data.commercialHouseList;
  let data = {
    xname: [],
    yname: ["套", "㎡"],
    type: "bars",
    isd: true,
    series: [
      { name: "套数", data: [] },
      { name: "面积", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.areaName);
    data.series[0].data.push(res.totalNum);
    data.series[1].data.push(res.totalArea);
  });
  state.lineoptions = startChart(data);
  state.loading = false;

  // end 折线图
  piefun(item.data.project);
}

const gourl = (url: string) => {
  router.push(url);
};

function piefun(listpie: object | any) {
  // 饼状图
  let datapar = {
    xname: [],
    yname: [],
    type: "pies",
    grid: {
      bottom: "0",
    },
    label: "",
    series: [
      { name: "在建在售项目", data: listpie.buildSaleProjectTotal },
      { name: "停工停建项目", data: listpie.shutdownProjectTotal },
      { name: "拿地未开工项目", data: listpie.waitProjectTotal },
    ],
    title: "项目数量对比",
    bottom: "left",
  } as any;
  state.pieoptions = startChart(datapar);
  state.pieloding = false;
  piesfun(listpie);
}

function piesfun(listpie: any) {
  // 饼状图
  let datapar = {
    xname: [],
    yname: [],
    type: "pies",
    grid: {
      bottom: "0",
    },
    label: "m²",
    series: [
      { name: "在建在售面积", data: listpie.buildAreaTotal },
      { name: "停工停建面积", data: listpie.shutdownAreaTotal },
      { name: "拿地未开工面积", data: listpie.waitAreaTotal },
    ],
    title: "面积对比",
    bottom: "left",
  } as any;
  setTimeout(() => {
    state.piesoptions = startChart(datapar);
    state.piesloding = false;
  }, 100);
}

onMounted(async () => {
  let item =  await useLoginApi().getUserInfo()
  state.areaCode = item.data.areaCode
  await loadData();
});
</script>

<style scoped lang="scss">
$color: #457ae3;

.sdiv {
  height: 250px;
}

div {
  box-sizing: border-box;
}

.cardTitlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;

  .cardtitlerig {
    font-weight: normal;
  }
}

.rowchars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;

  .rowsitem {
    flex: 1;
  }
}

.earlycontent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px;
  padding-top: 4px;
  justify-content: space-between;

  .earlyitem {
    width: 32.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(247, 243, 243);

    &:nth-child(1) {
      .earlyitemtop {
        span {
          &::after {
            font-weight: normal;
            content: "套";
          }
        }
      }
    }

    &:nth-child(3) {
      .earlyitemtop {
        span {
          &::after {
            font-weight: normal;
            content: "元/m²";
          }
        }
      }
    }

    &:nth-child(2) {
      .earlyitemtop {
        span {
          &::after {
            font-weight: normal;
            content: "万㎡";
          }
        }
      }
    }

    &:hover {
      // .earlyitembomitem {
      //   background-color: #0f3a8f;
      //   color: #fff;
      // }
    }

    .earlyitemtop {
      padding: 10px 20px;
      width: 100%;
      border-bottom: 2px solid #fff;

      p {
        color: #666;
        font-size: 13px;
        margin-bottom: 6px;
      }

      span {
        font-size: 20px;
        font-weight: bold;

        &::after {
          font-size: 14px;
          margin-left: 2px;
        }
      }
    }

    .earlyitembom {
      width: 100%;

      .redcolor {
        .earlbomitemlef {
          span {
            color: rgb(88, 232, 59);
          }
        }

        .earlbomitemrig {
          color: rgb(232, 59, 59);
        }
      }

      .greencolor {
        .earlbomitemlef {
          span {
            color: rgb(43, 205, 227);
          }
        }

        .earlbomitemrig {
          color: rgb(43, 205, 227);
        }
      }

      .earlyitembomitem {
        padding: 10px 20px;
        border-bottom: 2px solid #fff;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        p {
          font-size: 13px;
          color: #666;
          margin-bottom: 6px;
        }

        span {
          font-size: 20px;
          font-weight: bold;
          width: 100%;

          &::after {
            font-size: 14px;
            margin-left: 4px;
            content: "%";
          }
        }
      }
    }
  }
}

.marin {
  margin-top: 10px;
}

.cardshophouse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  .shophouseitem {
    width: 24%;
    border-radius: 5px;
    background: var(--next-bg-color);
    cursor: pointer;
    padding: 16px;
    transition: all 0.3s ease;

    .shophouseitembom {
      display: flex;
      flex-direction: column;
      padding: 10px 0;

      .shbomitem {
        display: flex;
        align-items: center;

        &:nth-child(1) {
          &::after {
            content: "套";
            margin-left: 4px;
          }
        }

        &:nth-child(2) {
          margin-top: 10px;

          &::after {
            content: "万m²";
            margin-left: 4px;
          }
        }

        p {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    &:nth-child(n + 5) {
      margin-top: 10px;
    }

    &:hover {
      background: var(--el-color-primary-light-9);
      transition: all 0.3s ease;
    }

    .shophouseitemtitle {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;

      img {
        height: 20px;
        margin-right: 4px;
      }
    }
  }
}

.cardmoney {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;

  .cardmoneyitem {
    flex: 1;
    height: 80px;
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .cardmoneyitemlef {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }

  .cardmoenyitemrig {
    display: flex;
    flex-direction: column;
    justify-content: center;

    p {
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }

    span:nth-child(1) {
      font-size: 18px;
      font-weight: bold;

      &::after {
        font-size: 12px;
        font-weight: normal;
        content: "亿元";
        margin-left: 4px;
      }
    }
  }
}

.cards {
  padding: 20px;
  border: 1px solid var(--next-border-color-light);
  background-color: #fff;

  .cardTitle {
    font-size: 15px;
    font-weight: bold;
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;

    &::before {
      content: "";
      width: 40px;
      height: 4px;
      border-radius: 10px;
      background-color: $color;
      position: absolute;
      bottom: -10px;
      left: 0;
    }
  }

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }
}

.card {
  padding: 20px;
  border: 1px solid var(--next-border-color-light);
  background-color: #fff;

  .cardTitles {
    margin-top: 20px;
  }

  .cardTitle {
    font-size: 15px;
    font-weight: bold;
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;

    &::before {
      content: "";
      width: 40px;
      height: 4px;
      border-radius: 10px;
      background-color: $color;
      position: absolute;
      bottom: -10px;
      left: 0;
    }
  }

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }
}

.rowhome {
  display: flex;
  flex-direction: row;
  align-items: center;

  .indextopitem {
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.indextopitem {
  background-color: #fff;
  height: 120px;
  width: 25%;
  display: flex;
  align-items: center;
  padding: 30px;
  overflow: hidden;
  justify-content: space-between;
  position: relative;
  border: 1px solid var(--next-border-color-light);
  cursor: pointer;

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }

  .indextoprig {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-top-left-radius: 80px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
  }

  .indextopitemlef {
    span {
      font-size: 14px;
      color: #666;
    }

    p {
      margin-top: 10px;
      font-size: 30px;
      font-weight: bold;
    }
  }
}
</style>
