<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';
import { getStoreData } from '@/utils/composition';


const { getResolution, getWebStyle } = useHome();
const multihost = getStoreData('loct', 'multihost');
const resolution = getResolution;
const webStyle = getWebStyle();
const locale = getStoreData('loct', 'locale');
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);
const router = useRouter();
let resourceData = data?.value?.data;
let memResource = [
  {
    label: 'OTHER_RAID_CARD',
    value: resourceData.Storage?.RaidControllerNum ?? '--'
  },
  {
    label: 'HOME_LOGICAL_DISK',
    value: resourceData.Storage?.LogicalDriveNum ?? '--'
  },
  {
    label: 'HOME_PHYSICAL_DISK',
    value: resourceData.Storage?.PhysicalDriveNum ?? '--'
  },
  {
    label: 'HOME_DISK_COUNT',
    value: resourceData.Storage?.PhysicalDriveSlotTotalNum ?? '--'
  }
];

let resources = reactive([
  {
    title: 'HOME_PROCESSOR',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'cpu-img' : 'home-style-icon-3',
    id: 'Cpu',
    targetNav: '/navigate/system/info/processor',
    details: [
      {
        label: 'HOME_HEALTH_TOTALNUM',
        value: resourceData.Processor?.MaxNum ?? '--',
      },
      {
        label: 'HOME_HEALTH_CURRENTNUM',
        value: resourceData.Processor?.CurrentNum ?? '--',
      },
    ],
  },
  {
    title: 'HOME_MEMORY',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'memory-img' : 'home-style-icon-1',
    id: 'Memory',
    targetNav: '/navigate/system/info/memory',
    details: [
      {
        label: 'HOME_HEALTH_TOTALNUM',
        value: resourceData.Memory?.MaxNum ?? '--',
      },
      {
        label: 'HOME_HEALTH_CURRENTNUM',
        value: resourceData.Memory?.CurrentNum ?? '--',
      },
      {
        label: 'COMMON_CAPACITY',
        value: (resourceData.Memory?.CapacityGiB ?? '--') + 'GB',
      },
    ],
  },
  {
    title: 'HOME_STORE',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'store-img' : 'home-style-icon-4',
    id: 'Store',
    targetNav: '/navigate/system/storage',
    hide: multihost || false,
    details: resourceData?.Storage?.PhysicalDriveSlotTotalNum || resourceData?.Storage?.PhysicalDriveSlotTotalNum === 0 ? memResource : memResource.splice(0, 3),
  },
  {
    title: 'HOME_POWER',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'power-img' : 'home-style-icon-5',
    id: 'Power',
    targetNav: '/navigate/system/power',
    hide: false,
    details: [
      {
        label: 'HOME_HEALTH_TOTALNUM',
        value: resourceData.Power?.MaxNum ?? '--',
      },
      {
        label: 'HOME_HEALTH_CURRENTNUM',
        value: resourceData.Power?.CurrentNum ?? '--',
      },
    ],
  },
  {
    title: 'HOME_FAN',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'fan-img' : 'home-style-icon-uniE902',
    id: 'Fan',
    targetNav: '/navigate/system/fans',
    hide: !resourceData.Fan?.MaxNum,
    details: [
      {
        label: 'HOME_HEALTH_TOTALNUM',
        value: resourceData.Fan?.MaxNum ?? '--',
      },
      {
        label: 'HOME_HEALTH_CURRENTNUM',
        value: resourceData.Fan?.CurrentNum ?? '--',
      },
    ],
  },
  {
    title: 'COMMON_NETWORK',
    backgroundClassName: webStyle === WebStyleType.DEFAULT ? 'netcard-img' : 'home-style-icon-2',
    id: 'Internet',
    targetNav: '/navigate/system/info/net',
    details: [
      {
        label: 'HOME_HEALTH_TOTALNUM',
        value: resourceData.Netadapter?.MaxNum ?? '--',
      },
      {
        label: 'HOME_HEALTH_CURRENTNUM',
        value: resourceData.Netadapter?.CurrentNum ?? '--',
      },
    ],
  },
]);

function navigatorToResource(url: string) {
  router.push({ path: url });
}
</script>

<template>
  <template v-if="!webStyle || webStyle === WebStyleType.DEFAULT">
    <div class="dashboard-overview-com-data">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
      <div class="resouce-content">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          class="resource-container"
          :class="{
            'special-fan-content': locale === 'ru' && item.title === 'HOME_FAN',
            'special-power-content': locale === 'fr' && item.title === 'HOME_PROCESSOR',
            'special-fan1-content': locale === 'fr' && item.title === 'HOME_FAN',
          }"
          @click="navigatorToResource(item.targetNav)"
          v-show="!item.hide"
        >
          <span v-t="item.title" class="detail-title"></span>
          <div class="resource-details">
            <div class="img-background">
              <div :class="item.backgroundClassName" class="details resource-img icon"></div>
            </div>
            <div class="details">
              <table>
                <tr v-for="resource in item.details" :key="resource.label">
                  <td v-t="resource.label" class="resource-key"></td>
                  <td class="resource-value">{{ resource.value }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.STANDARD">
    <div class="dashboard-overview-com-data-standard">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
      <div v-if="resolution === Resolution.SMALL" class="resouce-content-small">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <span v-t="item.title" class="detail-title"></span>
          <div class="resource-details">
            <div class="img-background">
              <div :class="item.backgroundClassName" class="details resource-img icon"></div>
            </div>
            <div class="details">
              <table>
                <tr v-for="resource in item.details" :key="resource.label">
                  <td v-t="resource.label" class="resource-key"></td>
                  <td class="resource-value">{{ resource.value }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="resouce-content">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <span v-t="item.title" class="detail-title"></span>
          <div class="resource-details">
            <div class="img-background">
              <div :class="item.backgroundClassName" class="details resource-img icon"></div>
            </div>
            <div class="details">
              <table>
                <tr v-for="resource in item.details" :key="resource.label">
                  <td v-t="resource.label" class="resource-key"></td>
                  <td class="resource-value">{{ resource.value }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.IBMA">
    <div class="dashboard-overview-com-data-ibma">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
      <div
        v-if="resolution === Resolution.SMALL || resolution === Resolution.MID"
        class="resouce-content-small"
        :class="{ 'resouce-content-mid': resolution === Resolution.MID }"
      >
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <span v-t="item.title" class="detail-title"></span>
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
            <div class="resource-details">
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="resouce-content">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <span v-t="item.title" class="detail-title"></span>
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
            <div class="resource-details">
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.SIMPLE">
    <div class="dashboard-overview-com-data-simple">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
      <div v-if="resolution === Resolution.SMALL" class="resouce-content-small">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <span v-t="item.title" class="detail-title"></span>
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
            <div class="resource-details">
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="resouce-content">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <span v-t="item.title" class="detail-title"></span>
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
            <div class="resource-details">
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.BEAUTIFUL">
    <div class="dashboard-overview-com-data-beautiful">
      <span v-t="'HOME_RESOURCE_TITLE'" class="title"></span>
      <div v-if="resolution !== Resolution.DEFAULT" class="resouce-content-small">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <div v-t="item.title" class="detail-title"></div>
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
            <div class="resource-details">
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="resouce-content">
        <div
          v-for="item in resources"
          :id="'homeResource' + item.id"
          :key="item.id"
          v-show="!item.hide"
          class="resource-container"
          @click="navigatorToResource(item.targetNav)"
        >
          <div class="mid-content">
            <div class="detail-top">
              <div v-t="item.title" class="detail-title"></div>
              <div class="details">
                <table>
                  <tr v-for="resource in item.details" :key="resource.label">
                    <td v-t="resource.label" class="resource-key"></td>
                    <td class="resource-value">{{ resource.value }}</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="resource-details">
              <div class="img-background">
                <div :class="item.backgroundClassName" class="details resource-img icon"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<style lang="scss" scoped>
.inline-block {
  display: inline-block;
  vertical-align: middle;
}

.common-font-size-big4 {
  font-size: 20px;
}

.dashboard-overview-com-data {
  width: 100%;
  .title {
    font-weight: normal !important;
  }
  .resouce-content {
    display: flex;
    margin-bottom: 24px;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      margin-right: 40px;
      padding-bottom: 24px;
      width: auto;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }

      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
    .img-background {
      width: 72px;
      height: 72px;
      background: var(--o-bg-color-light);
      border: 1px solid var(--o-border-color-lighter);
      border-radius: 4px;
      text-align: center;
      margin: 8px 8px 0 0;
    }
    .detail-title {
      font-size: 16px;
    }
  }
  .details {
    float: left;
    cursor: pointer;
    margin-top: 4px;
  }
  .resource-img {
    width: 64px;
    height: 64px;
    background-size: contain !important;
    margin-top: 4px;
    margin-left: 4px;
  }
  .resource-details {
    display: flex;
    margin-top: 8px;
  }
  .resource-key {
    margin-left: 0;
    text-align: left;
    color: var(--o-text-color-secondary);
    line-height: 16px;
    font-size: 12px;
  }

  .resource-value {
    padding-left: 8px;
    text-align: right;
    color: var(--o-text-color-primary);
    font-size: 16px;
  }
  .blank-line {
    margin-bottom: 24px;
  }

  @media screen and (max-width: 1600px) {
    .special-fan-content {
      min-width: 210px;
    }
    .special-power-content {
      min-width: 188px;
    }
    .special-fan1-content {
      min-width: 186px;
    }
  }
  @media screen and (max-width: 1599px) {
    .special-fan-content {
      min-width: 0px;
    }
    .special-power-content {
      min-width: 0px;
    }
  }
}

.dashboard-overview-com-data-standard {
  width: 100%;
  .resouce-content-small {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      margin-right: 16px;
      padding: 24px 16px 16px 16px;
      margin-bottom: 24px;
      border-radius: 4px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      &:nth-child(3n) {
        margin-right: 0;
        width: 219px;
      }
      &:nth-child(1) {
        width: 219px;
      }
      &:nth-child(2) {
        width: 211px;
      }
      &:nth-child(4) {
        width: 219px;
      }
      &:nth-child(5) {
        width: 211px;
      }
      @media screen and (width: 1280px) {
        &:nth-child(2) {
          width: 241px;
        }
        &:nth-child(5) {
          width: 241px;
        }
      }
      background-color: var(--o-bg-color-light);
      .detail-title {
        padding-left: 8px;
        font-size: 16px;
        font-family: 'HarmonyOS Sans SC';
        font-weight: bolder;
        font-size: 16px;
        line-height: 24px;
      }
      .resource-details {
        display: flex;
        margin-top: 8px;
        .details {
          display: flex;
          align-items: center;
          flex: 1;
          width: 100%;
          table {
            width: 100%;
          }
          .resource-value {
            padding-left: 8px;
            text-align: left;
            color: var(--o-text-color-primary);
            font-size: 16px;
            font-family: 'HarmonyOS Sans SC Medium';
            font-weight: bolder;
            line-height: 24px;
            text-align: right;
          }
        }
        .img-background {
          width: 72px;
          height: 72px;
          background: var(--o-bg-color-light);
          // border: 1px solid var(--o-border-color-lighter);
          border-radius: 4px;
          text-align: center;
          margin: 8px 16px 0 0;
          .resource-img {
            width: 64px;
            height: 64px;
            background-size: contain !important;
            margin-top: 4px;
            margin-left: 4px;
            color: #1d7ddf;
          }
        }
      }
    }
  }
  .resouce-content {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      margin-right: 16px;
      padding: 24px 16px 16px 16px;
      width: calc(33.3% - 11px);
      margin-bottom: 24px;
      border-radius: 4px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:nth-child(4) {
        margin-bottom: 0;
      }
      &:nth-child(5) {
        margin-bottom: 0;
      }
      &:nth-child(6) {
        margin-bottom: 0;
      }
      background-color: var(--o-bg-color-light);
      .detail-title {
        padding-left: 8px;
        font-size: 16px;
        font-family: HarmonyOS_Sans_SC;
        font-weight: bolder;
        font-size: 16px;
        line-height: 24px;
      }
      .resource-details {
        display: flex;
        margin-top: 8px;
        .details {
          display: flex;
          align-items: center;
          flex: 1;
          width: 100%;
          table {
            width: 100%;
          }
          .resource-value {
            padding-left: 24px;
            text-align: left;
            color: var(--o-text-color-primary);
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC_Medium;
            font-weight: bolder;
            line-height: 24px;
            text-align: right;
          }
        }
        .img-background {
          width: 72px;
          height: 72px;
          background: var(--o-bg-color-light);
          border-radius: 4px;
          text-align: center;
          margin: 8px 16px 0 0;
          .resource-img {
            width: 64px;
            height: 64px;
            background-size: contain !important;
            margin-top: 4px;
            margin-left: 4px;
            color: #1d7ddf;
          }
        }
      }
    }
  }
}

.cpu-img {
  background: url(/src/assets/assets-bmc/default/CPU.png) no-repeat;
}

.memory-img {
  background: url(/src/assets/assets-bmc/default/memory.png) no-repeat;
}
.store-img {
  background: url(/src/assets/assets-bmc/default/RAM.png) no-repeat;
}
.power-img {
  background: url(/src/assets/assets-bmc/default/power.png) no-repeat;
}
.fan-img {
  background: url(/src/assets/assets-bmc/default/fan.png) no-repeat;
}
.netcard-img {
  background: url(/src/assets/assets-bmc/default/netcard.png) no-repeat;
}

.resource-key {
  margin-left: 0;
  text-align: left;
  color: var(--o-text-color-secondary);
  line-height: 16px;
  font-size: 12px;
}

.blank-line {
  margin-bottom: 24px;
}

.dashboard-overview-com-data-simple {
  width: 100%;
  .resouce-content {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding: 16px 0px 24px 0px;
      border-radius: 4px;
      min-width: 200px;
      width: 16.6%;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding: 0px 24px;
        border-right: 1px solid var(--o-border-color-base);
        height: 100%;
        .detail-top {
          display: flex;
          justify-content: space-between;
          .detail-title {
            font-size: 16px;
            line-height: 24px;
          }
          .img-background {
            padding: 0px;
            .resource-img {
              width: 64px;
              height: 64px;
              background-size: contain !important;
              color: var(--o-text-color-tertiary);
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          .details {
            display: flex;
            align-items: center;
            .resource-value {
              padding-left: 24px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 16px;
              line-height: 24px;
            }
          }
        }
      }
      &:nth-last-child(1) {
        .mid-content {
          border-right: none;
        }
      }
    }
  }
  .resouce-content-small {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding: 24px 0px;
      border-radius: 4px;
      width: 392px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding: 0px 24px;
        border-right: 1px solid #dfe5ef;
        height: 100%;
        .detail-top {
          display: flex;
          justify-content: space-between;
          .detail-title {
            font-size: 16px;
            line-height: 24px;
          }
          .img-background {
            padding: 0px;
            .resource-img {
              width: 64px;
              height: 64px;
              background-size: contain !important;
              color: var(--o-text-color-tertiary);
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          .details {
            display: flex;
            align-items: center;
            .resource-value {
              padding-left: 24px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 16px;
              line-height: 24px;
            }
          }
        }
      }
      &:nth-last-child(1) {
        .mid-content {
          border-right: none;
        }
      }
      &:nth-child(3n) {
        .mid-content {
          border-right: none;
        }
      }
      &:nth-child(1) {
        margin-bottom: 16px;
      }
      &:nth-child(2) {
        margin-bottom: 16px;
      }
      &:nth-child(3) {
        margin-bottom: 16px;
      }
    }
  }
}

.dashboard-overview-com-data-ibma {
  width: 100%;
  .resouce-content {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding-bottom: 24px;
      border-radius: 4px;
      width: calc(16.6% - 16px);
      margin-right: 16px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding-left: 24px;
        height: 100%;
        .detail-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .detail-title {
            font-family: HarmonyOS_Sans_SC;
            font-size: 16px;
            line-height: 24px;
            font-weight: bolder;
            min-width: 50px;
          }
          .img-background {
            padding: 0px;
            .resource-img {
              width: 88px;
              height: 88px;
              background-size: contain !important;
              opacity: 0.24;
              color: #163a94;
              &:before {
                font-size: 88px;
              }
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          .details {
            display: flex;
            align-items: center;
            .resource-value {
              padding-left: 24px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Medium;
              font-weight: bolder;
              line-height: 24px;
            }
          }
        }
      }
      &:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
  .resouce-content-small {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding-bottom: 24px;
      border-radius: 4px;
      min-width: 292px;
      width: calc(33% - 10px);
      margin-right: 16px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding-left: 24px;
        height: 100%;
        .detail-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .detail-title {
            font-family: HarmonyOS_Sans_SC;
            font-size: 16px;
            line-height: 24px;
            font-weight: bolder;
          }
          .img-background {
            padding: 0px;
            .resource-img {
              width: 82px;
              height: 82px;
              background-size: contain !important;
              opacity: 0.24;
              color: #163a94;
              &:before {
                font-size: 82px;
              }
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          .details {
            display: flex;
            align-items: center;
            .resource-value {
              padding-left: 24px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Medium;
              font-weight: bolder;
              line-height: 24px;
            }
          }
        }
      }
      &:nth-last-child(1) {
        margin-right: 0px;
      }
      &:nth-child(3n) {
        margin-right: 0px;
      }
      &:nth-child(4) {
        margin-top: 16px;
      }
      &:nth-child(5) {
        margin-top: 16px;
      }
      &:nth-child(6) {
        margin-top: 16px;
      }
    }
  }
  .resouce-content-mid {
    .resource-container {
      min-width: 0px;
    }
  }
}

.dashboard-overview-com-data-beautiful {
  width: 100%;
  .resouce-content {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding-bottom: 24px;
      border-radius: 4px;
      min-width: 184px;
      width: calc(16.6% - 13px);
      margin-right: 16px;
      min-height: 196px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding-left: 24px;
        height: 100%;
        display: flex;
        .detail-top {
          flex: 1;
          .detail-title {
            font-family: HarmonyOS_Sans_SC;
            font-size: 16px;
            line-height: 24px;
            font-weight: bolder;
            min-width: 97px;
            word-wrap: break-word;
            margin-top: 24px;
            margin-bottom: 24px;
          }
          .details {
            display: flex;
            align-items: center;
            min-height: 100px;
            align-items: flex-end;
            .resource-key {
              font-size: 14px;
            }
            .resource-value {
              padding-left: 24px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 18px;
              font-family: HarmonyOS_Sans_SC_Medium;
              font-weight: bolder;
              line-height: 28px;
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          height: 64px;
          .img-background {
            padding: 0px;
            .resource-img {
              width: 88px;
              height: 88px;
              background-size: contain !important;
              color: #485cc7;
              opacity: 0.28;
              &:before {
                font-size: 88px;
              }
            }
          }
        }
      }
      &:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
  .resouce-content-small {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .resource-container {
      display: flex;
      flex-direction: column;
      padding-bottom: 16px;
      border-radius: 4px;
      width: calc((100% - 80px) / 6);
      margin-right: 16px;
      margin-top: 16px;
      &:hover {
        background: var(--o-bg-color-light);
        border-radius: 4px;
      }
      background-color: var(--o-bg-color-light);
      .mid-content {
        padding-left: 16px;
        height: 100%;
        .detail-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .detail-title {
            font-family: 'HarmonyOS Sans SC Medium';
            font-size: 16px;
            line-height: 24px;
            font-weight: bolder;
            min-width: 87px;
            margin-top: 24px;
            word-wrap: break-word;
          }
          .img-background {
            padding: 0px;
            .resource-img {
              width: 88px;
              height: 88px;
              background-size: contain !important;
              color: #485cc7;
              opacity: 0.28;
              &:before {
                font-size: 88px;
              }
            }
          }
        }
        .resource-details {
          display: flex;
          margin-top: 8px;
          .details {
            display: flex;
            align-items: center;
            .resource-value {
              padding-left: 16px;
              text-align: left;
              color: var(--o-text-color-primary);
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Medium;
              font-weight: bolder;
              line-height: 24px;
            }
          }
        }
      }
      &:nth-last-child(1) {
        margin-right: 0px;
      }
    }
  }
}
.resource-img {
  &:before {
    font-size: 64px;
  }
}
</style>
