|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="max-w-screen-xl content my-0 mx-auto">
|
|
|
- <div v-for="(item, index) in list" :key="index" class="m-y-[180px]">
|
|
|
- <n-h1 class="text-center mb-[120px]">{{ item.title }}</n-h1>
|
|
|
+ <div v-for="(item, index) in list" :key="index" class="m-y-[140px]">
|
|
|
+ <n-h1 class="text-center mb-[160px]">{{ item.title }}</n-h1>
|
|
|
|
|
|
<n-grid x-gap="100" y-gap="100" :cols="item.grid || 3">
|
|
|
<n-gi v-for="child of item.children" :key="child.id">
|
|
|
@@ -11,7 +11,7 @@
|
|
|
:style="{ backgroundImage: `url(${child.cover})` }"
|
|
|
>
|
|
|
<div
|
|
|
- class="w-full h-full flex flex-col absolute top-0 left-0 -mx-auto justify-end overflow-hidden"
|
|
|
+ class="w-full h-full flex flex-col absolute top-0 left-0 -mx-auto justify-end overflow-hidden shadow-blueGray"
|
|
|
>
|
|
|
<div
|
|
|
class="w-full h-[60px] title text-white text-size-2xl flex items-center p-x-10 bg-white bg-op-50"
|
|
|
@@ -20,12 +20,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <n-card class="flex items-center" :title="child.title">-->
|
|
|
- <!-- <template #cover>-->
|
|
|
- <!-- <img :src="child.cover" alt="" object-fit="scale-down" />-->
|
|
|
- <!-- </template>-->
|
|
|
- <!-- {{ child.title }}-->
|
|
|
- <!-- </n-card>-->
|
|
|
</n-gi>
|
|
|
</n-grid>
|
|
|
</div>
|
|
|
@@ -62,5 +56,10 @@ getMenuList().then((data) => {
|
|
|
width: 614px;
|
|
|
height: 346px;
|
|
|
}
|
|
|
+
|
|
|
+ &.grid-4 {
|
|
|
+ width: 300px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
gemercheung