From c577ee4b253ebe31b28003eef360471b26cad786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Wed, 26 Apr 2023 20:28:32 +0800
Subject: [PATCH] fix: mask

---
 components/Carousel.vue | 2 +-
 pages/index.vue         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Carousel.vue b/components/Carousel.vue
index 5dc088b..e1078b4 100644
--- a/components/Carousel.vue
+++ b/components/Carousel.vue
@@ -52,7 +52,7 @@ useIntervalFn(() => {
             {{ $t(item.entry) }}
           </ABtn>
         </div>
-        <img style="mask-image:linear-gradient(0deg,transparent ,#000 80%, transparent 190%)" :src="item.img">
+        <img style="-webkit-mask-image:linear-gradient(0deg,transparent ,#000 80%, transparent 190%)" :src="item.img">
       </div>
       <!-- <ACard
         :title="item.title"
diff --git a/pages/index.vue b/pages/index.vue
index 1cf8feb..5773d23 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -112,7 +112,7 @@ const imgs = [
   <Section
     relative h-380px md:h-400px xl:h-450px
   >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);mask-image:linear-gradient(0deg, transparent, #000);" />
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);-webkit-mask-image:linear-gradient(0deg, transparent, #000);" />
     <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
       <h2 class="text-h2">
         {{ $t('home.sectionFour.topic') }}
@@ -186,7 +186,7 @@ const imgs = [
   <Section
     relative h-380px md:h-400px xl:h-450px
   >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);mask-image:linear-gradient(0deg, transparent, #000);" />
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat style="background-image: url(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);-webkit-mask-image:linear-gradient(0deg, transparent, #000);" />
     <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
       <p class="text-title">
         {{ $t('home.sectionSeven.title') }}