ChangSha_XiangJiang_YongWang_V/src/views/Index/Index.vue

<template>
  <div class="relative flex h-screen w-screen justify-center pt-98">
    <div class="relative z-10 px-[102px]">
      <div class="mb-1 flex">
        <div class="mr-1 w-100">
          <div class="mb-1 flex h-24 items-center rounded-lg bg-gradient-to-r from-pink-100 to-pink-200 pl-8" @pointerdown="handleSearch">
            <i class="iconfont icon-jichu_gongneng_sousuo text-48 text-white"></i>
            <div class="mx-5 h-8 w-0.5 bg-white/40"></div>
            <div>
              <p class="font-700 text-24 leading-8 text-white">超快搜</p>
              <p class="font-700 text-14 uppercase leading-4.5 text-white/80">search</p>
            </div>
          </div>
          <div
            class="linear relative h-[550px] bg-cover"
            :style="{ backgroundImage: `url(${menuList[1].moduleActivateLogo})` }"
            @pointerdown="goPage(menuList[1])"
          >
            <p class="flex items-center justify-between px-8 pt-8">
              <span class="font-700 text-28 leading-9 text-black/80">{{ menuList[1].moduleName }}</span>
              <span class="font-700 text-20 leading-7 text-black/50">{{ device.building }}-{{ device.floor }}</span>
            </p>
            <div class="px-8 text-18 uppercase leading-7 text-black/40">{{ menuList[1].moduleNameEn }}</div>
          </div>
        </div>
        <div>
          <div
            :style="{ backgroundImage: `url(${menuList[2].moduleActivateLogo})` }"
            class="mb-1 h-[403px] w-[432px] overflow-hidden rounded-xl bg-cover bg-center bg-no-repeat pl-10 pt-8"
            @pointerdown="goPage(menuList[2])"
          >
            <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[2].moduleName }}</div>
            <div class="font-700 text-28 uppercase leading-9 text-white/80">{{ menuList[2].moduleNameEn }}</div>
          </div>
          <div
            :style="{ backgroundImage: `url(${menuList[4].moduleActivateLogo})` }"
            class="h-[243px] w-[432px] bg-cover pl-10 pt-8"
            @pointerdown="goPage(menuList[4])"
          >
            <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[4].moduleName }}</div>
            <div class="font-700 text-28 uppercase leading-9 text-white/80">{{ menuList[4].moduleNameEn }}</div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div
          :style="{ backgroundImage: `url(${menuList[3].moduleActivateLogo})` }"
          class="linear relative mr-1 h-[308px] w-60 bg-cover pl-10 pt-8"
          @pointerdown="goPage(menuList[3])"
        >
          <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[3].moduleName }}</div>
          <div class="mb-0.5 font-700 text-28 uppercase leading-9 text-white">{{ menuList[3].moduleNameEn }}</div>
        </div>
        <div
          :style="{ backgroundImage: `url(${menuList[5].moduleActivateLogo})` }"
          class="linear relative mr-1 h-[308px] w-60 bg-cover pl-10 pt-8"
          @pointerdown="goPage(menuList[5])"
        >
          <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[5].moduleName }}</div>
          <div class="mb-0.5 font-700 text-28 uppercase leading-9 text-white">{{ menuList[5].moduleNameEn }}</div>
        </div>
        <div class="linear relative">
          <div
            :style="{ backgroundImage: `url(${menuList[6].moduleActivateLogo})` }"
            class="mb-1 h-[152px] w-[388px] bg-cover pl-10 pt-8"
            @pointerdown="goPage(menuList[6])"
          >
            <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[6].moduleName }}</div>
            <div class="mb-0.5 font-700 text-28 uppercase leading-9 text-white">{{ menuList[6].moduleNameEn }}</div>
          </div>
          <div
            :style="{ backgroundImage: `url(${menuList[7].moduleActivateLogo})` }"
            class="h-[152px] w-[388px] bg-cover pl-10 pt-8"
            @pointerdown="goPage(menuList[7])"
          >
            <div class="mb-0.5 font-700 text-28 leading-9 text-white">{{ menuList[7].moduleName }}</div>
            <div class="mb-0.5 font-700 text-28 uppercase leading-9 text-white">{{ menuList[7].moduleNameEn }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    v-if="recommendTabList.length"
    class="recommend absolute bottom-[266px] left-1/2 z-10 -translate-x-1/2 flex-col gap-y-0.5 bg-cover flex-center"
    @click="handleSpecialRecommend"
  >
    <i class="iconfont icon-jichu_gongneng_dianzan-zan text-38 text-pink-default"></i>
    <p class="text-center text-16 leading-normal text-pink-default">推荐</p>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useRootStore } from '@/stores/root'
import { getModuleStatistics } from '@/http/api/statistics'

const router = useRouter()
const store = useRootStore()
const { device, recommendTabList, menuList } = storeToRefs(store)

function goPage(item: Menu) {
  router.push(item.routePath)
  getModuleStatistics({
    deviceCode: device.value.machineCode,
    moduleName: item.moduleName,
    projectCode: device.value.projectCode,
    recordType: '1'
  })
}

function handleSearch() {
  store.SET_SHOW_SEARCH(true)
}

function handleSpecialRecommend() {
  store.SET_SHOW_SPECIAL_RECOMMEND(true)
}
</script>

<style lang="scss" scoped>
.linear {
  &::after {
    position: absolute;
    right: 0;
    bottom: -104px;
    left: 0;
    height: 100px;
    background: linear-gradient(180deg, rgb(44 2 32 / 6%) 0%, rgb(0 0 0 / 0%) 100%);
    border-radius: 6px;
    filter: blur(8px);
    content: '';
  }
}
.recommend {
  width: 120px;
  height: 120px;
  background-image: url('../../assets/images/circle.svg');
}
</style>