Merge remote-tracking branch 'origin/main' into develop
This commit is contained in:
commit
31c1ecb612
@ -1 +1,2 @@
|
||||
VITE_APP_BASE_URL=https://api.hifast.biz
|
||||
# https://h.hifastapp.com
|
||||
VITE_APP_BASE_URL=
|
||||
|
||||
@ -1 +1,2 @@
|
||||
VITE_APP_BASE_URL=https://api.hifast.biz
|
||||
https://h.hifastapp.com
|
||||
VITE_APP_BASE_URL=
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
<svg width="49" height="73" viewBox="0 0 49 73" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="49" height="73" fill="url(#pattern_android)"/>
|
||||
<svg width="49" height="73" viewBox="0 0 49 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.175484 64L2.94748 55.06H5.51548L8.28748 64H6.03148L4.91548 59.536C4.79548 59.088 4.67548 58.612 4.55548 58.108C4.44348 57.604 4.32748 57.124 4.20748 56.668H4.15948C4.05548 57.132 3.94348 57.616 3.82348 58.12C3.70348 58.616 3.58748 59.088 3.47548 59.536L2.35948 64H0.175484ZM2.05948 61.948V60.292H6.37948V61.948H2.05948ZM9.05736 64V57.172H10.7974L10.9534 58.024H10.9894C11.2694 57.744 11.5854 57.504 11.9374 57.304C12.2974 57.104 12.7094 57.004 13.1734 57.004C13.9174 57.004 14.4574 57.252 14.7934 57.748C15.1294 58.244 15.2974 58.92 15.2974 59.776V64H13.1614V60.04C13.1614 59.568 13.0974 59.248 12.9694 59.08C12.8414 58.912 12.6414 58.828 12.3694 58.828C12.1294 58.828 11.9254 58.88 11.7574 58.984C11.5894 59.088 11.4014 59.24 11.1934 59.44V64H9.05736ZM19.4038 64.168C18.8358 64.168 18.3398 64.024 17.9158 63.736C17.4998 63.448 17.1758 63.036 16.9438 62.5C16.7198 61.964 16.6078 61.324 16.6078 60.58C16.6078 59.836 16.7438 59.2 17.0158 58.672C17.2878 58.136 17.6398 57.724 18.0718 57.436C18.5038 57.148 18.9558 57.004 19.4278 57.004C19.8038 57.004 20.1158 57.068 20.3638 57.196C20.6118 57.324 20.8478 57.496 21.0718 57.712L20.9998 56.692V54.412H23.1358V64H21.3958L21.2398 63.34H21.1918C20.9518 63.58 20.6758 63.78 20.3638 63.94C20.0518 64.092 19.7318 64.168 19.4038 64.168ZM19.9678 62.416C20.1758 62.416 20.3598 62.376 20.5198 62.296C20.6878 62.216 20.8478 62.064 20.9998 61.84V59.152C20.8398 59 20.6678 58.896 20.4838 58.84C20.2998 58.776 20.1158 58.744 19.9318 58.744C19.7398 58.744 19.5558 58.808 19.3798 58.936C19.2118 59.064 19.0718 59.26 18.9598 59.524C18.8558 59.788 18.8038 60.132 18.8038 60.556C18.8038 60.988 18.8478 61.344 18.9358 61.624C19.0318 61.896 19.1678 62.096 19.3438 62.224C19.5198 62.352 19.7278 62.416 19.9678 62.416ZM24.8542 64V57.172H26.5942L26.7502 58.36H26.7862C27.0422 57.904 27.3422 57.564 27.6862 57.34C28.0382 57.116 28.3862 57.004 28.7302 57.004C28.9382 57.004 29.1022 57.02 29.2222 57.052C29.3502 57.076 29.4622 57.108 29.5582 57.148L29.2102 58.984C29.0822 58.952 28.9622 58.928 28.8502 58.912C28.7382 58.888 28.6062 58.876 28.4542 58.876C28.2062 58.876 27.9422 58.968 27.6622 59.152C27.3902 59.336 27.1662 59.652 26.9902 60.1V64H24.8542ZM33.162 64.168C32.586 64.168 32.042 64.028 31.53 63.748C31.018 63.46 30.602 63.048 30.282 62.512C29.97 61.976 29.814 61.332 29.814 60.58C29.814 59.828 29.97 59.188 30.282 58.66C30.602 58.124 31.018 57.716 31.53 57.436C32.042 57.148 32.586 57.004 33.162 57.004C33.594 57.004 34.01 57.084 34.41 57.244C34.81 57.404 35.166 57.64 35.478 57.952C35.79 58.256 36.038 58.628 36.222 59.068C36.406 59.508 36.498 60.012 36.498 60.58C36.498 61.332 36.338 61.976 36.018 62.512C35.706 63.048 35.294 63.46 34.782 63.748C34.278 64.028 33.738 64.168 33.162 64.168ZM33.162 62.44C33.426 62.44 33.642 62.364 33.81 62.212C33.986 62.06 34.114 61.844 34.194 61.564C34.274 61.284 34.314 60.956 34.314 60.58C34.314 60.204 34.274 59.88 34.194 59.608C34.114 59.328 33.986 59.112 33.81 58.96C33.642 58.808 33.426 58.732 33.162 58.732C32.898 58.732 32.678 58.808 32.502 58.96C32.334 59.112 32.206 59.328 32.118 59.608C32.038 59.88 31.998 60.204 31.998 60.58C31.998 60.956 32.038 61.284 32.118 61.564C32.206 61.844 32.334 62.06 32.502 62.212C32.678 62.364 32.898 62.44 33.162 62.44ZM37.8386 64V57.172H39.9746V64H37.8386ZM38.9066 56.224C38.5466 56.224 38.2586 56.124 38.0426 55.924C37.8266 55.724 37.7186 55.456 37.7186 55.12C37.7186 54.792 37.8266 54.528 38.0426 54.328C38.2586 54.128 38.5466 54.028 38.9066 54.028C39.2586 54.028 39.5426 54.128 39.7586 54.328C39.9826 54.528 40.0946 54.792 40.0946 55.12C40.0946 55.456 39.9826 55.724 39.7586 55.924C39.5426 56.124 39.2586 56.224 38.9066 56.224ZM44.1421 64.168C43.5741 64.168 43.0781 64.024 42.6541 63.736C42.2381 63.448 41.9141 63.036 41.6821 62.5C41.4581 61.964 41.3461 61.324 41.3461 60.58C41.3461 59.836 41.4821 59.2 41.7541 58.672C42.0261 58.136 42.3781 57.724 42.8101 57.436C43.2421 57.148 43.6941 57.004 44.1661 57.004C44.5421 57.004 44.8541 57.068 45.1021 57.196C45.3501 57.324 45.5861 57.496 45.8101 57.712L45.7381 56.692V54.412H47.8741V64H46.1341L45.9781 63.34H45.9301C45.6901 63.58 45.4141 63.78 45.1021 63.94C44.7901 64.092 44.4701 64.168 44.1421 64.168ZM44.7061 62.416C44.9141 62.416 45.0981 62.376 45.2581 62.296C45.4261 62.216 45.5861 62.064 45.7381 61.84V59.152C45.5781 59 45.4061 58.896 45.2221 58.84C45.0381 58.776 44.8541 58.744 44.6701 58.744C44.4781 58.744 44.2941 58.808 44.1181 58.936C43.9501 59.064 43.8101 59.26 43.6981 59.524C43.5941 59.788 43.5421 60.132 43.5421 60.556C43.5421 60.988 43.5861 61.344 43.6741 61.624C43.7701 61.896 43.9061 62.096 44.0821 62.224C44.2581 62.352 44.4661 62.416 44.7061 62.416Z" fill="white"/>
|
||||
<g clip-path="url(#clip0_9522_1052)">
|
||||
<path d="M28.3624 37.0001C29.5995 37.0001 30.6784 35.9213 30.6784 34.6842V29.2754H32.2248C33.1527 29.2754 33.7712 28.6567 33.7712 27.729V12.2808H15.229V27.7291C15.229 28.657 15.8476 29.2755 16.7754 29.2755H18.3219V34.6843C18.3219 35.9214 19.4005 37.0003 20.6379 37.0003C21.8749 37.0003 22.9536 35.9214 22.9536 34.6843V29.2755H26.0466V34.6843C26.0464 35.9213 27.1253 37.0001 28.3624 37.0001Z" fill="white"/>
|
||||
<path d="M37.6333 27.7291C38.8705 27.7291 39.9491 26.6504 39.9491 25.4132V14.5957C39.9491 13.3652 38.8705 12.2808 37.6333 12.2808C36.3961 12.2808 35.3174 13.3652 35.3174 14.5957V25.4132C35.3174 26.6503 36.396 27.7291 37.6333 27.7291Z" fill="white"/>
|
||||
<path d="M11.3665 27.7291C12.6037 27.7291 13.6825 26.6504 13.6825 25.4132V14.5957C13.6825 13.3652 12.6039 12.2808 11.3665 12.2808C10.1294 12.2808 9.05078 13.3652 9.05078 14.5957V25.4132C9.05078 26.6503 10.1294 27.7291 11.3665 27.7291Z" fill="white"/>
|
||||
<path d="M31.9154 0.23335C31.6062 -0.0777832 31.1459 -0.0777832 30.8368 0.23335L28.7627 2.30053L28.667 2.39609C27.4371 1.78025 26.0583 1.4727 24.5227 1.46973C24.5152 1.46973 24.5078 1.46949 24.5003 1.46949H24.5C24.4922 1.46949 24.4851 1.46973 24.4773 1.46973C22.9419 1.4727 21.563 1.78025 20.3333 2.39609L20.2374 2.30053L18.1634 0.23335C17.854 -0.0777832 17.394 -0.0777832 17.0848 0.23335C16.7754 0.542754 16.7754 1.00192 17.0848 1.31108L19.0911 3.31776C18.4447 3.7494 17.8584 4.27758 17.3487 4.8817C16.1282 6.32835 15.3498 8.21107 15.2427 10.251C15.2417 10.2722 15.2396 10.2932 15.2386 10.3144C15.2321 10.4533 15.229 10.593 15.229 10.7331H33.7712C33.7712 10.593 33.7678 10.4533 33.7615 10.3144C33.7605 10.2932 33.7584 10.2722 33.7572 10.251C33.6504 8.21107 32.8717 6.32822 31.6513 4.88182C31.1417 4.27771 30.5553 3.74952 29.9088 3.31789L31.9154 1.3112C32.2248 1.00192 32.2248 0.542754 31.9154 0.23335ZM20.6349 8.03303C19.9951 8.03303 19.4765 7.51436 19.4765 6.87456C19.4765 6.23476 19.9951 5.71608 20.6349 5.71608C21.2747 5.71608 21.7934 6.23476 21.7934 6.87456C21.7934 7.51436 21.2747 8.03303 20.6349 8.03303ZM28.3652 8.03303C27.7254 8.03303 27.2068 7.51436 27.2068 6.87456C27.2068 6.23476 27.7254 5.71608 28.3652 5.71608C29.005 5.71608 29.5237 6.23476 29.5237 6.87456C29.5237 7.51436 29.005 8.03303 28.3652 8.03303Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<pattern id="pattern_android" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image_android" transform="scale(0.0204082 0.0136986)"/>
|
||||
</pattern>
|
||||
<image id="image_android" width="49" height="73" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAABJCAYAAACU7c6wAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMpSURBVHgB7ZqNldowDIDFvQ7ABk0nKBvUGzQbQCc4OgF0AugE0AmgE5CbAG6C0AmuG6jWRSaKLwETh5L3Tt97fsGWfyT8E9sRQCSIOLThxYbZleVmNuRUHiL5AJEMBoO/VpHf9ufcPin+gxVLbUhE1gMFKz+ywXMbflF56AtWsTUW7PE8O36uoW9YpQwPq1AM9Amr0BjbMYY+YBVJvB6g4ZQ3KE35dl48gXvjKbXitLTBCMPypUjbQSQPEAH/i0YkueXyY0ORrzVyg/ecH7bxOXbDHCKI6gnLZ+iGEUQQ+7L7Y0MG8eTw3hmEZMJiG/EIxSSmrcKa0xcQORQY2o585zonUCwAtE352dm2hJZObyJOOH2H3bBzBnjpmxD9Qid26sW/wG0wF+K1hBoRvV1uSVC7sUtsL1Aj+oIa0RfUiL6gRvSFUCPudTcU1G6oEZkXf4LbkHnxLQQQeij6ZsMzFCe5J7cV7xqq1+5c6Sdd5dAftYRbg92dsW+v7AVDDIdNjXJGBJ+M07s4VHUDlnexJzy5zwo6Qt8TfUGN6AtdGnH04gcvnnnxZ+gbWHy7cyvUDr0reyw+AbivSLQc3+vyQVEURVEURVEURbkIFh/vV21Pb1g6guUN8hHXv6gTdHKxJepJoAVCl5e6PwLLG8VXI+VFQdrw+79jL5bpkuEThat8O/gQT5Y71zYjZDkf/h+x9PebCXmCpZ+HvJNNOORcrys/53IzUd/G9Zwok4s2xl5elHJXCFkR5ySyFHJJLpUURrrur8hF3bI8+QguRJm9kA1lGU8/xKqjZMUIp/iUK3mtvMaI1FNa3nifPCvPGDFl+VCkjbw6JzVGuNGx5XgqjXBzYiyezj2HGjJQpW58Jvw8kgs1nMHKXe8ORZq7ZDt69Ulc/kOdHg9YzH7D8RFU3XMMhJNckfekBL5dfY5n8tf6HFJPuJUoGzBQfN4iQvyattwI9RxNuIt+rrziZBylMU69b6AwIGtog0g5b/UVgOVMn4q0oTeuHYbluRefiDwk29fNCa/dBKsrWS7mx5syWHUIpnKNL8PWsOEJXMk15dq2oSiKorxv/gHGudupLz/9HwAAAABJRU5ErkJggg=="/>
|
||||
<clipPath id="clip0_9522_1052">
|
||||
<rect width="37" height="37" fill="white" transform="translate(6)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 7.0 KiB |
@ -2,77 +2,87 @@
|
||||
<div class="min-h-screen bg-black text-white">
|
||||
<!-- Full Width Header -->
|
||||
<div class="h-[88px] md:h-[125px]">
|
||||
<div class="fixed top-[20px] z-50 w-full md:top-[45px]">
|
||||
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
|
||||
<div class="container">
|
||||
<header
|
||||
class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px]"
|
||||
class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
|
||||
>
|
||||
<router-link to="/" class="flex items-center gap-2">
|
||||
<!-- Desktop Logo -->
|
||||
<!-- <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
|
||||
<!-- Mobile Logo -->
|
||||
<MobileLogo
|
||||
:src="MobileLogo"
|
||||
alt="Hi快VPN"
|
||||
class="block h-[28px] text-black md:h-[50px]"
|
||||
/>
|
||||
<MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[50px]" />
|
||||
</router-link>
|
||||
<div class="text-xl font-[600] text-black md:text-3xl">Hi快iOS版本下载教程</div>
|
||||
<RightText class="block h-[15px] text-black md:h-[31px]" />
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container md:px-[252px]">
|
||||
<div
|
||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
|
||||
>
|
||||
请选择适用您情形的选项
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="w-1/2 rounded-full border-5 p-[6px]"
|
||||
:class="[activeIndex === 0 ? 'border-white' : 'border-black']"
|
||||
@click="activeIndex = 0"
|
||||
>
|
||||
<Button
|
||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||||
<div class="h-[145px] md:h-[262px]">
|
||||
<div class="fixed z-50 w-full bg-black">
|
||||
<div class="container pb-[10px] md:px-[12vw]">
|
||||
<div
|
||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
|
||||
>
|
||||
我只有中国大陆Apple ID
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="w-1/2 rounded-full border-5 p-[6px]"
|
||||
:class="[activeIndex === 1 ? 'border-white' : 'border-black']"
|
||||
@click="activeIndex = 1"
|
||||
>
|
||||
<Button
|
||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||||
>
|
||||
我有海外Apple ID
|
||||
</Button>
|
||||
请选择适用您情形的选项
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
|
||||
:class="[activeIndex === 0 ? 'border-white' : 'border-black']"
|
||||
@click="activeIndex = 0"
|
||||
>
|
||||
<Button
|
||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||||
>
|
||||
我只有中国大陆Apple ID
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
|
||||
:class="[activeIndex === 1 ? 'border-white' : 'border-black']"
|
||||
@click="activeIndex = 1"
|
||||
>
|
||||
<Button
|
||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||||
>
|
||||
我有海外Apple ID
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tab1 -->
|
||||
<div v-show="activeIndex === 0">
|
||||
<div
|
||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
|
||||
>
|
||||
Hi快提供三种下载方式
|
||||
<div class="container md:px-[12vw]">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<!-- tab1 -->
|
||||
<div v-if="activeIndex === 0" key="tab1">
|
||||
<div
|
||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
|
||||
>
|
||||
Hi快提供三种下载方式
|
||||
</div>
|
||||
<DownloadMethodList />
|
||||
</div>
|
||||
<DownloadMethodList />
|
||||
</div>
|
||||
<div v-show="activeIndex === 1">
|
||||
<div
|
||||
class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
|
||||
>
|
||||
<ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
|
||||
<!-- tab2 -->
|
||||
<div v-else-if="activeIndex === 1" key="tab2">
|
||||
<div
|
||||
class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
|
||||
>
|
||||
<ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
|
||||
</div>
|
||||
<div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[494px]">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167"
|
||||
target="_blank"
|
||||
class="block h-full w-full"
|
||||
>
|
||||
<img src="./Group%20100.png" class="h-full w-full" alt="下载" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[594px]">
|
||||
<img src="./Group%20100.png" class="h-full w-full" alt="下载" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- tab2 -->
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="container md:px-[92px]">
|
||||
@ -98,7 +108,7 @@
|
||||
<div class="pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-3xl">
|
||||
其他客户端下载
|
||||
</div>
|
||||
<div class="flex justify-center gap-2">
|
||||
<div class="flex justify-center gap-4">
|
||||
<template v-for="client in otherClients" :key="client.link">
|
||||
<a :href="client.link" target="_blank">
|
||||
<MacosIcon v-if="client.type === 'mac'" />
|
||||
@ -116,6 +126,7 @@ import { ref } from 'vue'
|
||||
// Help page logic
|
||||
import Logo from '@/pages/Home/logo.svg?component'
|
||||
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
|
||||
import RightText from './right-text.svg?component'
|
||||
import ChatIcon from './Vector.svg?component'
|
||||
import MacosIcon from './macos.svg?component'
|
||||
import WindowsIcon from './windows.svg?component'
|
||||
@ -134,3 +145,15 @@ const otherClients = [
|
||||
{ icon: AndroidIcon, link: downLoadAndroid, type: 'android' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 8.2 KiB |
3
src/pages/Help/right-text.svg
Normal file
3
src/pages/Help/right-text.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 335 KiB |
BIN
src/pages/Home/bg-desktop.webp
Normal file
BIN
src/pages/Home/bg-desktop.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 501 KiB After Width: | Height: | Size: 382 KiB |
@ -9,7 +9,7 @@
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.5px 1.5px -3px #b3b3b3 inset,
|
||||
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
||||
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
||||
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
||||
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
||||
@ -34,7 +34,7 @@
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.5px 1.5px -3px #b3b3b3 inset,
|
||||
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
||||
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
||||
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
||||
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
||||
@ -62,8 +62,8 @@ import Icon4 from './Group 108.svg?component'
|
||||
import { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
|
||||
// 定义下载链接数据
|
||||
const downloadLinks = [
|
||||
{ icon: Icon1, link: downLoadWin },
|
||||
{ icon: Icon2, link: '/help', isInternal: true },
|
||||
{ icon: Icon1, link: downLoadWin },
|
||||
{ icon: Icon3, link: downLoadMac },
|
||||
{ icon: Icon4, link: downLoadAndroid },
|
||||
]
|
||||
|
||||
BIN
src/pages/Home/connected-bg.png
Normal file
BIN
src/pages/Home/connected-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/pages/Home/connected-mobile-bg.png
Normal file
BIN
src/pages/Home/connected-mobile-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative min-h-screen overflow-hidden bg-[#24963e] bg-[url('@/pages/Home/bg-mobile.jpg')] bg-cover bg-center bg-no-repeat pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:bg-[url('@/pages/Home/bg-desktop.jpg')] md:pb-6"
|
||||
class="relative min-h-screen overflow-hidden bg-[#24963e] bg-[url('@/pages/Home/bg-mobile.jpg')] bg-cover bg-center bg-no-repeat pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:bg-[url('@/pages/Home/bg-desktop.webp')] md:pb-0"
|
||||
>
|
||||
<!-- Full Width Header -->
|
||||
<div class="h-[88px] md:h-[125px]">
|
||||
@ -12,7 +12,7 @@
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.5px 1.5px -3px #b3b3b3 inset,
|
||||
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
||||
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
||||
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
||||
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
||||
@ -41,7 +41,7 @@
|
||||
<button
|
||||
v-else
|
||||
@click="openLoginModal"
|
||||
class="flex h-[48px] items-center rounded-full bg-[#70C877] px-6 text-sm font-bold backdrop-blur-md transition hover:scale-[0.97] hover:bg-white/30 md:text-2xl"
|
||||
class="flex h-[48px] items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:scale-[0.97] hover:bg-white/30 md:h-[60px] md:w-[220px] md:text-2xl"
|
||||
>
|
||||
登录 / 注册
|
||||
</button>
|
||||
@ -69,6 +69,19 @@
|
||||
alt="App Screenshot"
|
||||
class="h-auto w-full drop-shadow-2xl"
|
||||
/>
|
||||
<div class="absolute right-[8%] bottom-[97px] z-50 aspect-square w-[58%]">
|
||||
<!-- Ripple Animation (Background) -->
|
||||
<div class="ripple-container absolute inset-0 top-[7px]">
|
||||
<div class="ripple ripple-outer-3"></div>
|
||||
<div class="ripple ripple-outer-2"></div>
|
||||
<div class="ripple ripple-outer-1"></div>
|
||||
<div class="ripple ripple-core"></div>
|
||||
</div>
|
||||
<!-- Center Image (Foreground/Top Layer) -->
|
||||
<div
|
||||
class="absolute inset-0 bottom-0 z-100 bg-[url('@/pages/Home/connected-mobile-bg.png')] bg-cover bg-center bg-no-repeat"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Buttons Grid -->
|
||||
@ -82,10 +95,36 @@
|
||||
<div
|
||||
class="mb-5 w-full text-center text-xs leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
|
||||
>
|
||||
<p>最先进加密协议 - 安全有保障</p>
|
||||
<p>全真实IEPL专线 - IP纯净且稳定</p>
|
||||
<p>4K高清 / 不限流量 - 网速有多快, Hi快有多快</p>
|
||||
<p>极速闪连功能 - 连接永远快人一步</p>
|
||||
<p>最新加密协议-安全有保障</p>
|
||||
<p>EPL专线-纯净、稳定</p>
|
||||
<p>不限速/不限流-网速多快，Hi快多快</p>
|
||||
<p>极速闪连-永远快人一步</p>
|
||||
<div class="flex justify-center md:justify-start">
|
||||
<a
|
||||
href="https://x.com/hifasttech"
|
||||
target="_blank"
|
||||
class="mt-[12px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform active:scale-95 md:mt-[16px]"
|
||||
style="
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
||||
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
||||
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
||||
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
||||
border-image-source: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0) 30%
|
||||
);
|
||||
border-image-slice: 1;
|
||||
"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<img src="./x-logo.png" class="h-[16px] w-[77px]" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mb-1 h-[20px] w-[352px] md:ml-[17px]">
|
||||
@ -99,13 +138,24 @@
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Phone Screenshot -->
|
||||
<div class="relative hidden w-full md:mt-0 md:block">
|
||||
<!-- Decorative elements behind phone -->
|
||||
<img
|
||||
:src="ScreenshotDesktop"
|
||||
alt="App Screenshot"
|
||||
class="absolute right-[52px] -bottom-[62px] w-[632px]"
|
||||
/>
|
||||
<div class="relative hidden w-full max-w-[632px] md:mt-0 md:block">
|
||||
<!-- Screenshot with Ripple Effect -->
|
||||
<div class="absolute right-[9%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
|
||||
<!-- Ripple Animation (Background) -->
|
||||
<div class="ripple-container absolute inset-0">
|
||||
<div class="ripple ripple-outer-3"></div>
|
||||
<div class="ripple ripple-outer-2"></div>
|
||||
<div class="ripple ripple-outer-1"></div>
|
||||
<div class="ripple ripple-core"></div>
|
||||
</div>
|
||||
<!-- Center Image (Foreground/Top Layer) -->
|
||||
<div
|
||||
class="absolute inset-0 bottom-[36px] z-100 bg-[url('@/pages/Home/connected-bg.png')] bg-cover bg-center bg-no-repeat"
|
||||
></div>
|
||||
</div>
|
||||
<div class="absolute right-[2vw] bottom-0 max-w-[632px]">
|
||||
<img :src="ScreenshotDesktop" alt="App Screenshot" class="relative z-10 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -180,3 +230,63 @@ const openLoginModal = () => {
|
||||
loginModalRef.value?.show()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ripple-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background: #a8ff53; /* Brand neon green */
|
||||
will-change: width, height, opacity;
|
||||
}
|
||||
|
||||
/* Core: Fixed minimum diameter (~57% of max) */
|
||||
.ripple-core {
|
||||
width: 57%;
|
||||
height: 57%;
|
||||
opacity: 1;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
/* Outer Layer 1: Opacity 0.8, 5.4s */
|
||||
.ripple-outer-1 {
|
||||
animation: breathe 5.4s ease-in-out infinite alternate;
|
||||
opacity: 0.8;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Outer Layer 2: Opacity 0.6, 4.2s */
|
||||
.ripple-outer-2 {
|
||||
animation: breathe 4.2s ease-in-out infinite alternate;
|
||||
opacity: 0.6;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Outer Layer 3 (Outer-most): Opacity 0.4, 3s */
|
||||
.ripple-outer-3 {
|
||||
animation: breathe 3s ease-in-out infinite alternate;
|
||||
opacity: 0.4;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0% {
|
||||
width: 57%;
|
||||
height: 57%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/pages/Home/x-logo.png
Normal file
BIN
src/pages/Home/x-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -2,10 +2,10 @@
|
||||
<div class="flex min-h-screen flex-col bg-black text-black">
|
||||
<!-- Full Width Header -->
|
||||
<div class="h-[88px] md:h-[125px]">
|
||||
<div class="fixed top-[20px] z-50 w-full md:top-[45px]">
|
||||
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
|
||||
<div class="container">
|
||||
<header
|
||||
class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px]"
|
||||
class="flex min-h-[66px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
|
||||
>
|
||||
<router-link to="/" class="flex items-center gap-2">
|
||||
<!-- Desktop Logo -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user