<template>
  <div class="app-container">
    <div class="title">营销中心</div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
        <img :src="item.icon" class="icon" />
        <div class="info">
          <div class="name">{{ item.name }}</div>
          <div class="intro">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import card from "@/assets/images/marketing/card.png";
import charge from "@/assets/images/marketing/charge.png";
import invite from "@/assets/images/marketing/invite.png";
import score from "@/assets/images/marketing/score.png";
const router = useRouter();
const to = (item) => {
  router.push("/application/" + item.path);
};
const list = ref([
  { name: "优惠券", icon: card, path: "coupon" },
  { name: "霸王餐", icon: charge, path: "bwc" },
  { name: "邀请裂变", icon: invite, path: "invite" },
  { name: "积分锁客", icon: score, path: "points" },
]);
</script>

<style scoped lang="scss">
.title {
  font-size: 24px;
  font-weight: bold;
  padding-top: 10px;
}

.list {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  .item {
    width: 400px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 14px;

    &:hover {
      cursor: pointer;

      .info {
        .name {
          color: #39d47a;
        }

        .intro {
          color: #39d47a;
        }
      }
    }

    .icon {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }

    .info {
      flex: 1;
      padding-left: 10px;

      .name {
        font-weight: bold;
      }

      .intro {
        color: #999;
        margin-top: 4px;
      }
    }
  }
}
</style>