90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<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: "" },
|
|
{ name: "积分锁客", icon: score, path: "" },
|
|
]);
|
|
</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> |