<script lang="ts" setup>
import Card from '@/components/card.vue'

const items = [
  {
    id: 1,
    title: '设计游学',
    desc: '游学项目',
    path: '/pages/home/study-tour/index',
    icon: '/static/svgs/iconly-glass-edit.svg',
  },
  {
    id: 2,
    title: '线下活动',
    desc: '骑行俱乐部',
    path: '/pages/home/offline-activity/index',
    icon: '/static/svgs/iconly-glass-star.svg',
  },
  {
    id: 3,
    title: '设计传播',
    desc: '运营推广',
    path: '/pages/home/spread/index',
    icon: '/static/svgs/iconly-glass-play.svg',
  },
  {
    id: 4,
    title: '品质商城',
    desc: '所需周边',
    path: '/pages/home/mall/index',
    icon: '/static/svgs/message.svg',
  },
]
const handleClick = (path: string) => {
  uni.navigateTo({ url: path })
}
</script>
<template>
  <view class="w-full px-3.5 box-border grid grid-cols-2 grid-gap-4 my-6">
    <template v-for="it of items" :key="it.id">
      <view class="" @click="handleClick(it.path)">
        <Card>
          <view class="flex justify-between">
            <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5">
              <view class="my-0.75">{{ it.title }}</view>
              <view class="text-[rgba(0,0,0,0.45)] text-3.5 my-2.5">{{ it.desc }}</view>
            </view>
            <view class="">
              <wd-img
                custom-class="w-10.5 h-10.5 mt-3.5 vertical-bottom"
                :src="it.icon"
                mode="scaleToFill"
              ></wd-img>
            </view>
          </view>
        </Card>
      </view>
    </template>
  </view>
</template>
