<template>
  <div class="footer grid min-h-sm w-full bg-gray-800 text-white">
    <div class="w-full h-full flex flex-col justify-between max-w-screen-xl my-0 mx-auto">
      <div class="top w-full h-full mt-[60px] flex flex-row">
        <div class="left flex flex-col w-auto pr-[160px]">
          <img
            v-if="locale === 'zh'"
            src="@/assets/img/logo.png"
            alt="logo"
            class="logo-icon h-[43px] w-[160px] mb-5"
          />
          <img
            v-if="locale === 'en'"
            src="@/assets/img/swsd-en.png"
            alt="logo"
            class="logo-icon h-[43px] w-[160px] mb-5"
          />
          <template v-if="!browser.isMobile()">
            <span class="font-size-[16px]"> {{ $t('contact') }}</span>
            <span class="font-size-[24px] my-[10px]"> 400-669-8025</span>
          </template>
          <template v-else>
            <span class="font-size-[16px] my-1"> {{ $t('contact') }}：400-669-8025</span>
          </template>
          <span class="font-size-[16px] my-1"> {{ $t('sell_cor') }}：sales@4dage.com</span>
          <span class="font-size-[16px] my-1"> {{ $t('pub_r') }}：pr@4dage.com</span>
        </div>
        <div class="flex-1 middle font-size-[16px]">
          <div class="infos-list flex flex-row gap-col-[80px]">
            <div class="infos-item flex flex-col gap-row-[10px]" :class="{ active: openId === 1 }">
              <n-h6 class="line text-white" @click="toggleInfo(1)"
                >{{ $t('products') }}

                <n-icon class="arrow-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512"
                  >
                    <path
                      fill="none"
                      color="#909090"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="48"
                      d="M184 112l144 144l-144 144"
                    ></path>
                  </svg> </n-icon
              ></n-h6>
              <a class="item-a" target="_blank" href="https://4dkankan.com/#/Meta">{{
                $t('4DKanKan_Meta')
              }}</a>
              <a class="item-a" target="_blank" href="https://4dkankan.com/#/Mega">{{
                $t('4DKanKan_Mega')
              }}</a>
              <a class="item-a" target="_blank" href="https://4dkankan.com/#/Minion">{{
                $t('4DKanKan_Minion')
              }}</a>
              <a class="item-a" target="_blank" href="https://4dkankan.com/#/KanKan">{{
                $t('4DKanKan_Pro')
              }}</a>
            </div>
            <div class="infos-item flex flex-col gap-row-[10px]" :class="{ active: openId === 2 }">
              <n-h6 class="line text-white" @click="toggleInfo(2)"
                >{{ $t('solutions') }}
                <n-icon class="arrow-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512"
                  >
                    <path
                      fill="none"
                      color="#909090"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="48"
                      d="M184 112l144 144l-144 144"
                    ></path>
                  </svg> </n-icon
              ></n-h6>
              <a
                class="item-a"
                target="_blank"
                href="https://www.4dkankan.com/#/solutions/smartCity"
                >{{ $t('smart_city') }}</a
              >
              <a
                class="item-a"
                target="_blank"
                href="https://www.4dkankan.com/#/solutions/museum"
                >{{ $t('museums') }}</a
              >
              <a
                class="item-a"
                target="_blank"
                href="https://www.4dkankan.com/#/solutions/government"
                >{{ $t('fire_sec') }}</a
              >
              <a
                class="item-a"
                target="_blank"
                href="https://www.4dkankan.com/#/solutions/property"
                >{{ $t('real_estate') }}</a
              >
            </div>
            <!-- <div class="infos-item flex flex-col gap-row-[10px]">
              <n-h6 class="text-white">{{ $t('support') }}</n-h6>
              <a target="_blank" href="https://www.4dkankan.com/#/service/app/pro">{{ $t('app_download') }}</a>
              <a target="_blank">{{ $t('help_center') }}</a>
              <a target="_blank" href="https://www.4dkankan.com/#/service/clause/pro">{{ $t('post-sale') }}</a>
            </div> -->
            <div class="infos-item flex flex-col gap-row-[10px]" :class="{ active: openId === 3 }">
              <n-h6 class="line text-white" @click="toggleInfo(3)"
                >{{ $t('about_us') }}
                <n-icon class="arrow-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512"
                  >
                    <path
                      fill="none"
                      color="#909090"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="48"
                      d="M184 112l144 144l-144 144"
                    ></path>
                  </svg> </n-icon
              ></n-h6>
              <a class="item-a" target="_blank" href="https://www.4dkankan.com/#/about">{{
                $t('company_profile')
              }}</a>
              <a class="item-a" target="_blank" href="https://www.4dkankan.com/#/news">{{
                $t('news_report')
              }}</a
              ><a class="item-a" target="_blank" href="https://www.4dkankan.com/#/distributor">{{
                $t('distributor')
              }}</a>
            </div>
          </div>
        </div>
        <div class="right pr-[20px]">
          <div class="flex flex-row gap-col-4">
            <!-- <a class="block w-[32px] h-[32px] bg-[#EBEBEB] cursor-pointer">
              <img
                src="data:image/svg+xml;base64,PHN2ZyBpZD0iV0tORC1idXR0b24tc3RhbmRhcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZWJlYmViOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTIgew0KICAgICAgICBmaWxsOiAjMzIzMjMzOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHJlY3QgaWQ9ImJhY2tncm91bmQiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ii8+DQogIDxnIGlkPSLlvq7kv6EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjcwNiAxNC4yNjEpIj4NCiAgICA8ZyBpZD0i57uEXzMxNjgiIGRhdGEtbmFtZT0i57uEIDMxNjgiPg0KICAgICAgPHBhdGggaWQ9Iui3r+W+hF8zNzIwIiBkYXRhLW5hbWU9Iui3r+W+hCAzNzIwIiBjbGFzcz0iY2xzLTIiIGQ9Ik0tODMyLjc3OSw2Mi41NDhhMS4yNDgsMS4yNDgsMCwwLDAsLjM1Ny44NjMsMS4yMzMsMS4yMzMsMCwwLDAsLjg2NC4zNTcsMS4yMzIsMS4yMzIsMCwwLDAsLjg2My0uMzU3LDEuMjMzLDEuMjMzLDAsMCwwLC4zNTctLjg2MywxLjIzMiwxLjIzMiwwLDAsMC0uMzU3LS44NjMsMS4yMzIsMS4yMzIsMCwwLDAtLjg2My0uMzU3LDEuMjQ3LDEuMjQ3LDAsMCwwLS44NjQuMzU3LDEuMjYzLDEuMjYzLDAsMCwwLS4zNTcuODYzWm05LjUsNi4zMDlhLjk4Mi45ODIsMCwwLDAsLjI3NC42ODEuOTgyLjk4MiwwLDAsMCwuNjgxLjI3NC45NjIuOTYyLDAsMCwwLC42NzItLjI3NC45NTUuOTU1LDAsMCwwLC4yODItLjY4MS45MzYuOTM2LDAsMCwwLS4yODItLjY3My45Ny45NywwLDAsMC0uNjcyLS4yODIuOTY5Ljk2OSwwLDAsMC0uNjgxLjI4MiwxLDEsMCwwLDAtLjI3NC42NzNabS0zLjI3OS02LjMwOWExLjI0OCwxLjI0OCwwLDAsMCwuMzU3Ljg2MywxLjIzMywxLjIzMywwLDAsMCwuODY0LjM1NywxLjI0OCwxLjI0OCwwLDAsMCwuODYzLS4zNTcsMS4yMzMsMS4yMzMsMCwwLDAsLjM1Ny0uODYzLDEuMjMzLDEuMjMzLDAsMCwwLS4zNTctLjg2MywxLjI0OCwxLjI0OCwwLDAsMC0uODYzLS4zNTcsMS4yMzIsMS4yMzIsMCwwLDAtLjg2NC4zNTcsMS4yNjMsMS4yNjMsMCwwLDAtLjM1Ny44NjNaTS04MjguNTk1LDcyLjhhMTUuMDY0LDE1LjA2NCwwLDAsMS0zLjA3Mi0uNDRsLTMuMDcyLDEuNTM2Ljg3Mi0yLjY0Yy0yLjE5Mi0xLjUyNy0zLjUxMi0zLjUxMi0zLjUxMi01LjkyNywwLTQuMTc2LDMuOTUyLTcuNDYzLDguNzgzLTcuNDYzLDQuMzE3LDAsOC4xLDIuNjIzLDguODU4LDYuMTZhNy4yNTYsNy4yNTYsMCwwLDAtLjg0Ny0uMDUsNy4xOTIsNy4xOTIsMCwwLDAtNy40NjMsNi45NDksNi4zNjgsNi4zNjgsMCwwLDAsLjI3NCwxLjgzNSw2LjgzNCw2LjgzNCwwLDAsMS0uODIyLjA0MVptMTIuOTUxLDMuMDguNjU2LDIuMTkyLTIuNDA3LTEuMzJhMTEuMjUzLDExLjI1MywwLDAsMS0yLjY0LjQ0Yy00LjE3NiwwLTcuNDYzLTIuODU2LTcuNDYzLTYuMzc2czMuMjg3LTYuMzY4LDcuNDYzLTYuMzY4YzMuOTQzLDAsNy40NTUsMi44NjQsNy40NTUsNi4zNjguMDA4LDEuOTg0LTEuMywzLjczNi0zLjA2Myw1LjA2NFptLTIuODQ4LTcuMDIzYS45NTQuOTU0LDAsMCwwLC4yODIuNjgxLjk2Mi45NjIsMCwwLDAsLjY3Mi4yNzQuOTYyLjk2MiwwLDAsMCwuNjcyLS4yNzQuOTkuOTksMCwwLDAsLjI4Mi0uNjgxLjkzNi45MzYsMCwwLDAtLjI4Mi0uNjczLjk3Ljk3LDAsMCwwLS42NzItLjI4Mi45MzYuOTM2LDAsMCwwLS42NzIuMjgyLjkzNS45MzUsMCwwLDAtLjI4Mi42NzNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MzcuMzc4IC01Ny44NjYpIi8+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg=="
                alt="logo" class="h-[32px]" />
            </a>
            <a class="block w-[32px] h-[32px] bg-[#EBEBEB] cursor-pointer">
              <img
                src="data:image/svg+xml;base64,PHN2ZyBpZD0iV0tORC1idXR0b24tc3RhbmRhcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZWJlYmViOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTIgew0KICAgICAgICBmaWxsOiAjMzIzMjMzOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHJlY3QgaWQ9ImJhY2tncm91bmQiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ii8+DQogIDxnIGlkPSLlvq7ljZoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjI1IDE0LjMyOSkiPg0KICAgIDxnIGlkPSLnu4RfMzE2NyIgZGF0YS1uYW1lPSLnu4QgMzE2NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjA4MSkiPg0KICAgICAgPHBhdGggaWQ9Iui3r+W+hF8zNzE4IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzE4IiBjbGFzcz0iY2xzLTIiIGQ9Ik03MDIuMjMxLTI2LjY3M2MtLjM4OS0uMDM3LS43NDEtLjI1NS0uNDgzLS43MDZhMi4yOTMsMi4yOTMsMCwwLDAtLjE4Mi0yLjY4NmMtLjkxNS0uOTI5LTIuOTE3LS41NzctNC4zMzIuMDIycy0xLjMzNi4xODEtMS4yOTMtLjIyOWMuMDQ3LS40MzIuODA5LTIuODQ5LTEuNTIyLTMuMTQxLTMuMDU1LS4zOC02Ljk3NCwzLjQ2Ny04LjM1OCw1LjY4NC0yLjA5MiwzLjM0OS0xLjc2MSw1LjYxNS0xLjc2MSw1LjYxNWguMDE0Yy4yNSwzLjEyNSw0Ljc3Niw1LjYxNywxMC4zMjMsNS42MTcsNC43NjksMCw4Ljc4Ni0xLjg0NCw5Ljk3NC00LjM1YS4xNzEuMTcxLDAsMCwxLC4wMTQtLjAzLDMuNzY5LDMuNzY5LDAsMCwwLC4yNzUtLjgyOCw0LjgwOSw0LjgwOSwwLDAsMC0uMDE4LTIuNjEsMy43LDMuNywwLDAsMC0yLjY1MS0yLjM1OFptLTguMjgxLDguODA4Yy0zLjk0OCwwLTcuMTUyLTIuMTU4LTcuMTUyLTQuODJzMy4yLTQuODIsNy4xNTItNC44Miw3LjE1MiwyLjE1OCw3LjE1Miw0LjgyLTMuMiw0LjgyLTcuMTUyLDQuODJabTkuNzIzLTEwLjY4MmEuNTM2LjUzNiwwLDAsMCwuMjI1LjA0OC41NzkuNTc5LDAsMCwwLC41MzQtLjM2MkEyLjkzMywyLjkzMywwLDAsMCw3MDQuNjU3LTMwLDIuODg3LDIuODg3LDAsMCwwLDcwMS44LTMyLjlhMi43ODksMi43ODksMCwwLDAtMS4xMTEuMjI5LjYuNiwwLDAsMC0uMzA5Ljc3Ni41OC41OCwwLDAsMCwuMzE2LjMxNy41OC41OCwwLDAsMCwuNDQ3LDAsMS42OTMsMS42OTMsMCwwLDEsLjY2MS0uMTM3QTEuNzEzLDEuNzEzLDAsMCwxLDcwMy41LTMwYTEuNzIxLDEuNzIxLDAsMCwxLS4xMzMuNjczLjU5Mi41OTIsMCwwLDAsLjMwOS43NzZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjg0LjI4IDMzLjQ0MSkiLz4NCiAgICA8L2c+DQogICAgPHBhdGggaWQ9Iui3r+W+hF8zNzE5IiBkYXRhLW5hbWU9Iui3r+W+hCAzNzE5IiBjbGFzcz0iY2xzLTIiIGQ9Ik05MTcuMy0xNTkuNDhhNi43NTksNi43NTksMCwwLDAtMS45MzUuMjg0LjkuOSwwLDAsMC0uNiwxLjExLjg4NS44ODUsMCwwLDAsLjQyNC41MjkuODg0Ljg4NCwwLDAsMCwuNjczLjA3NCw1LjAzMiw1LjAzMiwwLDAsMSwxLjQzNS0uMjA5LDUuMDY0LDUuMDY0LDAsMCwxLDUuMDI4LDUuMDg3LDUuMjgyLDUuMjgyLDAsMCwxLS4yMTMsMS40NzguODk0Ljg5NCwwLDAsMCwuNTg4LDEuMTEzLjg5Ljg5LDAsMCwwLDEuMS0uNiw2Ljk4Miw2Ljk4MiwwLDAsMCwuMjktMiw2Ljg0Nyw2Ljg0NywwLDAsMC02LjgtNi44NzRabS04LjU5LDEwLjg2OWEzLjY2MiwzLjY2MiwwLDAsMC0zLjg2NCwzLjQyMSwzLjY2MiwzLjY2MiwwLDAsMCwzLjg2NCwzLjQyMiwzLjY2MywzLjY2MywwLDAsMCwzLjg2NS0zLjQyMiwzLjY2MiwzLjY2MiwwLDAsMC0zLjg2NS0zLjQyMVptLTEuMjYzLDUuNjQ1YTEuMzYzLDEuMzYzLDAsMCwxLTEuMzU0LTEuMzcxLDEuMzYzLDEuMzYzLDAsMCwxLDEuMzU0LTEuMzcsMS4zNjMsMS4zNjMsMCwwLDEsMS4zNTUsMS4zNywxLjM2NCwxLjM2NCwwLDAsMS0xLjM1NSwxLjM3MVptMi41MzMtMi40NjlhLjU0Ny41NDcsMCwwLDEtLjcyOS4yNjUuNTYyLjU2MiwwLDAsMS0uMTM2LS43NzEuNTQ1LjU0NSwwLDAsMSwuNzI4LS4yNjQuNTY0LjU2NCwwLDAsMSwuMTM3Ljc3MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04OTkuNDUzIDE1OS40OCkiLz4NCiAgPC9nPg0KPC9zdmc+DQo="
                alt="logo" class="h-[32px]" />
            </a>
            <a class="block w-[32px] h-[32px] bg-[#EBEBEB] cursor-pointer">
              <img
                src="data:image/svg+xml;base64,PHN2ZyBpZD0iV0tORC1idXR0b24tc3RhbmRhcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZWJlYmViOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTIgew0KICAgICAgICBmaWxsOiAjMzIzMjMzOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHJlY3QgaWQ9ImJhY2tncm91bmQiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ii8+DQogIDxnIGlkPSJkb3V5aW4iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0Ljk2OSAxNC4yMikiPg0KICAgIDxwYXRoIGlkPSLot6/lvoRfMzcxNyIgZGF0YS1uYW1lPSLot6/lvoQgMzcxNyIgY2xhc3M9ImNscy0yIiBkPSJNODkyLjA4NSwzOS4yMWE0LjgsNC44LDAsMCwxLTIuMTc5LTRIODg2LjQ3bDAsMTMuNzY3YTIuODg3LDIuODg3LDAsMSwxLTIuODg0LTMsMi43NjYsMi43NjYsMCwwLDEsLjg1My4xMzZWNDIuNjA2YTYuMTE3LDYuMTE3LDAsMCwwLS44NTMtLjA2MSw2LjMyMyw2LjMyMywwLDEsMCw2LjMyMyw2LjMyM3YtNi45OGE4LjE2OSw4LjE2OSwwLDAsMCw0Ljc3OCwxLjUzNlYzOS45ODlhNC43NjcsNC43NjcsMCwwLDEtMi42LS43NzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODc3LjI1OSAtMzUuMjA2KSIvPg0KICA8L2c+DQo8L3N2Zz4NCg=="
                alt="logo" class="h-[32px]" />
            </a> -->
          </div>
        </div>
      </div>
      <div class="bottom h-[82px] flex flex-row flex items-center justify-between">
        <div class="label">Copyright © 2022 4DAGE Co., Ltd. All rights reserved.</div>
        <div class="label icp">
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496647"
            class="icp-item text-white min-h-[20px] inline-flex items-center justify-center mr-3 decoration-none"
          >
            <img
              class="icp-icon"
              src="https://4dscene.4dage.com/new4dkk/v2/images/src/assets/images/baicon.d0289dc.png"
              alt=""
            />
            粤公网安备 44049102496647号
          </a>
          <a
            target="_blank"
            href="https://beian.miit.gov.cn/"
            class="icp-item text-white min-h-[20px] inline-flex items-center justify-center mr-3 decoration-none"
            ><img
              class="icp-icon"
              src="https://4dscene.4dage.com/new4dkk/v2/images/src/assets/images/baicon.d0289dc.png"
              alt=""
            />
            粤ICP备14078495号
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import browser from '@/utils/browser'
import { ChevronForward } from '@vicons/ionicons5'
import { NH6 } from 'naive-ui'
const { locale } = useI18n()

const openId = ref<Number>(0)
const toggleInfo = (type: Number) => {
  if (!browser.isMobile()) {
    return
  }
  if (openId.value == type) {
    openId.value = 0
    return
  }
  openId.value = type
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.footer {
  background: linear-gradient(180deg, #0661c9 0%, #033063 100%);
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  .line {
    .arrow-icon {
      display: none;
    }
  }
}

.bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
<style>
.en .left {
  padding-right: 60px;
}

.en .infos-list {
  column-gap: 50px;
}
[is-mobile] {
  .footer {
    padding: 0 0.5333rem;
    box-sizing: border-box;
    min-height: auto;
  }
  .infos-list {
    flex-direction: column;
  }
  .top {
    flex-direction: column;
    .left {
      padding: 0;
      .my-1 {
        font-weight: 400;
        font-size: 0.32rem;
        color: #ebebeb;
        line-height: 0.3733rem;
      }
      .logo-icon {
        width: 2.5867rem;
        height: 0.6933rem;
      }
    }
  }
  .infos-list {
    margin-bottom: 1.0667rem;
    .infos-item {
      .item-a {
        display: none;
        font-weight: 400;
        font-size: 0.32rem;
        color: #ebebeb;
        line-height: 0.3733rem;
      }
      &.active {
        .item-a {
          display: block;
        }
        .line {
          .arrow-icon {
            transform: translateY(-50%) rotate(90deg);
          }
        }
      }

      .line {
        height: 1.44rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        font-weight: 400;
        font-size: 0.3733rem;
        color: #ffffff;
        line-height: 0.44rem;
        position: relative;
        .arrow-icon {
          width: 0.32rem;
          height: 0.1733rem;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%) rotate(0deg);
          display: block;
        }
      }
    }
  }
  .bottom {
    border: none;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    .label {
      font-weight: 400;
      font-size: 0.32rem;
      color: #ffffff;
      line-height: 0.3733rem;
      width: 100%;
    }
    .icp {
      margin-top: 0.2667rem;
      font-weight: 400;
      font-size: 0.32rem;
      color: #ffffff;
      line-height: 0.3733rem;
      margin-bottom: 0.2667rem;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      .icp-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .icp-icon {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1333rem;
        }
      }
    }
  }
}
</style>
