<route lang="json">
{ "style": { "navigationBarTitleText": "案例拍摄", "navigationBarBackgroundColor": "#ffffff" } }
</route>
<script setup lang="ts">
import { useRouter } from '../../../../core/utils/router'

const router = useRouter()
const data = ref([{}, {}, {}, {}, {}])
</script>
<template>
  <div class="flex-grow p-3.5">
    <div grid grid-cols-2 gap-x-2.5 gap-y-10>
      <template v-for="(it, i) in data" :key="i">
        <div
          class="flex flex-col gap-4"
          @click="router.push('/pages/home/spread/case-shooting/photographer/index')"
        >
          <div class="aspect-square rounded-2xl overflow-hidden relative">
            <wd-img
              width="100%"
              height="100%"
              src="https://via.placeholder.com/168x168"
              mode="aspectFill"
            />
            <div
              class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
            >
              <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
                方晓峰
              </div>
            </div>
          </div>
          <div class="flex items-center">
            <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
              1600
            </div>
            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              积分
            </div>
            <div class="flex-1"></div>
            <div
              class="w-[53px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
            >
              2000积分
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
