This commit is contained in:
parent
b14a0fa2ee
commit
f3fd34fe09
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center w-full md:justify-start">
|
||||
<div class=" w-full">
|
||||
<!-- 主下载按钮 -->
|
||||
<div class="mx-auto rounded-full bg-[#ADFF5B] md:-ml-2 h-[60px] w-[210px] md:h-[100px] md:w-[360px] ">
|
||||
<div class="relative mx-auto md:ml-0 flex h-[60px] w-[210px] items-center justify-center overflow-hidden rounded-full bg-[#ADFF5B] px-[16px] md:h-[83px] md:w-[300px] md:px-[24px]">
|
||||
<a
|
||||
v-if="mainButton?.link"
|
||||
:href="mainButton.link"
|
||||
target="_blank"
|
||||
:aria-label="mainButton.label"
|
||||
class="block transition-transform hover:brightness-110 active:scale-95"
|
||||
class="flex h-full w-full items-center justify-center transition-transform hover:brightness-110 active:scale-95"
|
||||
>
|
||||
<component :is="mainButton.mainIcon" class="h-full text-black" />
|
||||
<component :is="mainButton.mainIcon" class="h-auto w-full text-black transition-transform" />
|
||||
</a>
|
||||
<div
|
||||
v-else
|
||||
:id="mainButton?.id"
|
||||
:aria-label="mainButton?.label"
|
||||
class="cursor-pointer transition-transform hover:brightness-110 active:scale-95"
|
||||
class="flex h-full w-full cursor-pointer items-center justify-center transition-transform hover:brightness-110 active:scale-95"
|
||||
>
|
||||
<component :is="mainButton?.mainIcon" class="h-full text-black" />
|
||||
<component :is="mainButton?.mainIcon" class="h-auto w-full text-black transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="17 0 99 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="17" y="11" width="8.57529" height="8.60876" fill="currentColor"/>
|
||||
<rect x="26.3549" y="11" width="8.57529" height="8.60876" fill="currentColor"/>
|
||||
<rect x="17" y="20.3914" width="8.57529" height="8.60876" fill="currentColor"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
@ -1,4 +1,4 @@
|
||||
<svg viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="15 0 96 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1511_3352)">
|
||||
<path d="M28.2965 31C29.0321 31 29.6736 30.3585 29.6736 29.623V26.4069H30.5931C31.1448 26.4069 31.5126 26.0391 31.5126 25.4874V16.302H20.4875V25.4875C20.4875 26.0392 20.8553 26.407 21.407 26.407H22.3265V29.623C22.3265 30.3586 22.9679 31.0001 23.7036 31.0001C24.4391 31.0001 25.0805 30.3586 25.0805 29.623V26.407H26.9195V29.623C26.9195 30.3585 27.5609 31 28.2965 31Z" fill="currentColor"/>
|
||||
<path d="M33.8092 25.4875C34.5448 25.4875 35.1861 24.8461 35.1861 24.1105V17.6785C35.1861 16.9468 34.5448 16.302 33.8092 16.302C33.0735 16.302 32.4321 16.9468 32.4321 17.6785V24.1105C32.4321 24.846 33.0735 25.4875 33.8092 25.4875Z" fill="currentColor"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
@ -1,52 +1,59 @@
|
||||
<template>
|
||||
<div class="review-carousel-container relative">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="currentReview"
|
||||
:key="currentIndex"
|
||||
class="review-card flex items-center lucid-glass-bar text-white rounded-2xl overflow-hidden p-4 md:p-5 relative"
|
||||
:style="{ height: isMobile ? '114px' : '130px' }"
|
||||
<div
|
||||
class="review-card flex items-center lucid-glass-bar text-white rounded-2xl overflow-hidden p-4 md:p-5 relative"
|
||||
:style="{ height: isMobile ? '114px' : '130px' }"
|
||||
>
|
||||
<!-- Static More Reviews Button, 不受动画影响，随时可点 -->
|
||||
<a
|
||||
href="https://hifastvpn.com/reviews"
|
||||
target="_blank"
|
||||
class="absolute cursor-pointer top-[18px] right-4 md:top-[24px] md:right-5 z-20 text-[10px] md:text-sm text-white hover:text-[#ADFF5B] transition-colors underline decoration-white underline-offset-4"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
<div class="flex-shrink-0 mr-4 md:mr-6">
|
||||
<img
|
||||
:src="currentReview.avatar"
|
||||
alt="User Avatar"
|
||||
class="w-[70px] h-[70px] md:w-[84px] md:h-[84px] rounded-full object-cover border-2 border-pink-300/30"
|
||||
/>
|
||||
</div>
|
||||
More Reviews
|
||||
</a>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<h3 class="text-base md:text-xl font-bold truncate pr-2">{{ currentReview.username }}</h3>
|
||||
<a
|
||||
href="https://hifastvpn.com"
|
||||
target="_blank"
|
||||
class="more-reviews text-[10px] md:text-sm text-white hover:text-[#ADFF5B] transition-colors underline decoration-white underline-offset-4"
|
||||
>
|
||||
More Reviews
|
||||
</a>
|
||||
<!-- 动画应用在卡片内部的内容上 -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="currentReview"
|
||||
:key="currentIndex"
|
||||
class="flex items-center w-full h-full"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
<div class="flex-shrink-0 mr-4 md:mr-6">
|
||||
<img
|
||||
:src="currentReview.avatar"
|
||||
alt="User Avatar"
|
||||
class="w-[70px] h-[70px] md:w-[84px] md:h-[84px] rounded-full object-cover border-2 border-pink-300/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Stars and Rating -->
|
||||
<div class="flex items-center gap-1 mb-1 md:mb-2">
|
||||
<div class="flex gap-0.5">
|
||||
<svg v-for="i in 5" :key="i" class="w-3 h-3 md:w-4 md:h-4 text-[#ADFF5B]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
<!-- Content -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<h3 class="text-base md:text-xl font-bold truncate pr-20 md:pr-28">{{ currentReview.username }}</h3>
|
||||
</div>
|
||||
<span class="text-xs md:text-sm text-white/50 font-medium ml-1">4.9</span>
|
||||
<span class="text-xs md:text-sm text-white/30 ml-2">{{ currentReview.reviewCount }}k reviews</span>
|
||||
</div>
|
||||
|
||||
<!-- Comment Text -->
|
||||
<p class="text-xs md:text-sm text-white/90 leading-[1.4] line-clamp-2 md:pr-4">
|
||||
“{{ currentReview.comment }}”
|
||||
</p>
|
||||
<!-- Stars and Rating -->
|
||||
<div class="flex items-center gap-1 mb-1 md:mb-2">
|
||||
<div class="flex gap-0.5">
|
||||
<svg v-for="i in 5" :key="i" class="w-3 h-3 md:w-4 md:h-4 text-[#ADFF5B]" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs md:text-sm text-white/50 font-medium ml-1">4.9</span>
|
||||
<span class="text-xs md:text-sm text-white/30 ml-2">{{ currentReview.reviewCount }}k reviews</span>
|
||||
</div>
|
||||
|
||||
<!-- Comment Text -->
|
||||
<p class="text-xs md:text-sm text-white/90 leading-[1.4] line-clamp-2 md:pr-4">
|
||||
“{{ currentReview.comment }}”
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user