init

2025-07-07 16:58:26 +08:00
commit cd7a18b63f
34 changed files with 952 additions and 0 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Page1 from './pages/Page1.vue';
+</script>
+
+<template>
+  <main>
+    <Page1 class="page"/>
+
+  </main>
+</template>
+
+<style scoped>
+main{
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+  overflow: hidden;
+  position: relative;
+}
+.page{
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  height: calc(2462 / 1179 * 100vw);
+
+}
+</style>
@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Elan ITC Std';
+    src: url('ElanITCStd-Book.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
@@ -0,0 +1,17 @@
+export default {
+    "标准logo": new URL('./标准 logo.png', import.meta.url).href,
+    "p1": {
+        "奥莱": new URL('./p1/奥莱.png', import.meta.url).href,
+        "博物馆": new URL('./p1/博物馆.png', import.meta.url).href,
+        "大北区": new URL('./p1/大北区.png', import.meta.url).href,
+        "大东区": new URL('./p1/大东区.png', import.meta.url).href,
+        "大南区&免税": new URL('./p1/大南区&免税.png', import.meta.url).href,
+        "大西区": new URL('./p1/大西区.png', import.meta.url).href,
+        "弹性福利之旅": new URL('./p1/弹性福利之旅.png', import.meta.url).href,
+        "箭头": new URL('./p1/箭头.png', import.meta.url).href,
+        "蓝天": new URL('./p1/蓝天.png', import.meta.url).href,
+        "太阳": new URL('./p1/太阳.png', import.meta.url).href,
+        "Flexible benefits": new URL('./p1/Flexible benefits.png', import.meta.url).href,
+        "Tour": new URL('./p1/Tour.png', import.meta.url).href,
+    }
+}
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import 'normalize.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import assets from '../assets';
+
+const regions = [
+    { w: 68.8, h: 68.8, l: -1, t: -4, src: assets.p1.大北区, tt: '大北区', trt: -13, ad: 6 },
+    { w: 73.3, h: 73.3, l: 44, t: 20, src: assets.p1.大东区, tt: '大东区', ad: 3 },
+    { w: 62.3, h: 63.7, l: -32, t: 72, src: assets.p1['大南区&免税'], tt: '大南区&免税', trt: 5, ad: 3 },
+    { w: 59.6, h: 59.6, l: -37, t: 15, src: assets.p1.大西区, tt: '大西区', ad: 5 },
+    { w: 52.1, h: 52, l: 3, t: 40, src: assets.p1.奥莱, tt: '奥莱', ad: 2 },
+    { w: 62.7, h: 62.7, l: 33, t: 74, src: assets.p1.博物馆, tt: '博物馆', tc: '#fff', ad: 0 },
+]
+onMounted(() => {
+    const regionBubbles = document.querySelectorAll('.region-bubble');
+    regionBubbles.forEach((bubble, index) => {
+        const pDown = () => {
+            bubble.animate([
+                { transform: 'translate3d(-50%, -50%, 0) scale(1)', filter: 'brightness(1)' },
+                { transform: 'translate3d(-50%,-50%, 0) scale(0.92)', filter: 'brightness(0.9)' },
+            ], {
+                duration: 500,
+                easing: 'ease-in-out',
+                fill: 'forwards'
+            });
+        }
+        const pUp = () => {
+            bubble.querySelector('span')?.animate([
+                { opacity: 1 },
+                { opacity: 0 },
+            ], {
+                duration: 1000,
+                easing: 'ease-in-out',
+                fill: 'forwards'
+            });
+            bubble.animate([
+                { transform: 'translate3d(-50%, -50%, 0) scale(0.92)', filter: 'brightness(0.9)' },
+                { transform: 'translate3d(-50%, -50%, 0) scale(4)', filter: 'brightness(1)', top: '53%', left: '50%' },
+            ], {
+                duration: 1000,
+                easing: 'ease-in-out',
+                fill: 'forwards'
+            });
+
+            // 其他元素淡出
+            regionBubbles.forEach((otherBubble, otherIndex) => {
+                if (otherIndex == index) return
+                otherBubble.animate([
+                    { opacity: 1 },
+                    { opacity: 0 },
+                ], {
+                    duration: 1000,
+                    easing: 'ease-in-out',
+                    fill: 'forwards'
+                });
+
+            });
+
+            bubble.removeEventListener('pointerdown', pDown);
+        }
+        bubble.addEventListener('pointerdown', pDown);
+        bubble.addEventListener('pointerup', pUp, { once: true });
+    });
+});
+
+</script>
+
+<template>
+    <section class="p1">
+        <img :src="assets.标准logo" alt="" style="top: 6%;left: 8%;width: 12%;--base-delay: 2s;" class="fade-in">
+        <img :src="assets.p1.蓝天" alt="" class="bg">
+        <div style="height: 12vw;top: 11.4%;left: 6%">
+            <span class="green  scale-in-ctn" style="border-radius: 6vw;font-size: 9vw; padding: 0 3vw;height: 100%;">
+                <span class="scale-in-txt">太阳脸</span>
+            </span>
+            <span class="green fake scale-in-txt" style="border-radius: 6vw;font-size: 9vw; padding: 0 3vw;height: 100%;">
+                <span class="scale-in-txt">太阳脸</span>
+            </span>
+
+            <span class="green  scale-in-ctn"
+                style="width: 12vw;border-radius: 5vw; padding: 2vw 2vw 2vw 3vw; left: 34vw;height: 100%;">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 91.18 90.18" preserveAspectRatio="xMidYMid meet">
+                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
+                        stroke-linejoin="round" fill="none" d="M13.003,13.014 L13.003,71.540 L72.429,71.540 " />
+                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
+                        stroke-linejoin="round" fill="none" d="M60.428,21.892 L14.854,70.801 " />
+                </svg>
+            </span>
+            <span class="green fake scale-in-txt"
+                style="width: 12vw;border-radius: 5vw; padding: 2vw 2vw 2vw 3vw; left: 34vw;height: 100%;">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 91.18 90.18" preserveAspectRatio="xMidYMid meet">
+                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
+                        stroke-linejoin="round" fill="none" d="M13.003,13.014 L13.003,71.540 L72.429,71.540 " />
+                    <path fill-rule="evenodd" stroke="rgb(255, 255, 255)" stroke-width="12.12px" stroke-linecap="round"
+                        stroke-linejoin="round" fill="none" d="M60.428,21.892 L14.854,70.801 " />
+                </svg>
+            </span>
+
+        </div>
+        <div style="left: 12%;top: 17.2%;width: 73vw;height: 7%;">
+            <span class="black scale-in-ctn" style="border-radius: 7vw;height: 100%;width: 100%;--base-delay:0.1s">
+                <span>弹性福利之旅</span>
+            </span>
+            <span class="black fake scale-in-txt" style="border-radius: 7vw;height: 100%;width: 100%;--base-delay:0.1s">
+                <span>弹性福利之旅</span>
+            </span>
+            <span class="green scale-in-ctn"
+                style="padding: 0 1.5vw;top: -17%;font-size: 3.5vw;right: -6%;height: 30%;border-radius: 3vw;--base-delay:0.2s">
+                <span class="elan block relative">TOUR</span>
+            </span>
+            <span class="green fake scale-in-txt"
+                style="padding: 0 1.5vw;top: -17%;font-size: 3.5vw;right: -6%;height: 30%;border-radius: 3vw;--base-delay:0.2s">
+                <span class="elan block relative">TOUR</span>
+            </span>
+
+        </div>
+        <div style="top: 11.7%;left: 53%; display: flex; flex-direction: column;">
+            <span class="white relative swap-in" style="left: 30%;height: 5.5vw;--base-delay:0.6s">
+                <span class="elan">FLEXIBEL</span>
+            </span>
+            <span class="white relative swap-in" style="height: 5.5vw;--base-delay:0.9s">
+                <span class="elan">BENEFITS</span>
+            </span>
+        </div>
+        <img :src="assets.p1.太阳" alt="" style="top: 30%;left: 5%;width: 26%;">
+        <div style="width: 86vw;height: 86vw;top: 47%; left: 50%;transform: translate3d(-50%, -50%, 0); z-index: -1;">
+            <div v-for="i in regions" :style="{
+                width: i.w + '%', height: i.h + '%', left: (i.l + 50) + '%', top: (i.t + 50) + '%',
+                '--t-start': (i.t + 50 - 200 - (100 - i.t)) + '%',
+                '--l-start': (i.l / 2 + 50) + '%',
+                '--t-end': (i.t + 50) + '%',
+                '--l-end': (i.l + 50) + '%',
+                animationDuration: (600 + i.ad * 100) + 'ms',
+            }" class="region-bubble">
+
+                <img :src="i.src" alt="" style="height: 100%;width: 100%;">
+                <span
+                    style="font-size: 4.5vw;left: 50%;transform: translate(-50%, -50%);font-weight: 400;width: fit-content;"
+                    :style="{ color: i.tc || '#000', top: (i.trt ?? 0) + 50 + '%' }">
+                    *{{ i.tt }}
+                </span>
+            </div>
+        </div>
+
+        <div style="color: white; bottom: 16%;left: 50%;transform: translateX(-50%); font-size: 4.5vw;">
+            <span class="block tag scale-in-ctn" style="background-color: #000;top: -1vw;left: -12vw;color: transparent; --base-delay:1s;">
+                <span>点击</span>
+            </span>
+            <span class="block tag scale-in-ctn" style="background-color: #304A7B;top: 4vw;left: -6vw;color: transparent;--base-delay:1.1s;">
+                <span>选择</span>
+            </span>
+            <span class="block tag scale-in-ctn" style="background-color: #8FBE56;top: .8vw;left: 4.5vw;color: transparent;--base-delay:1.1s;">
+                <span>阵营</span>
+            </span>
+            <span class="block tag scale-in-txt" style="background-color: transparent;top: -1vw;left: -12vw;--base-delay:1.2s;">
+                <span>点击</span>
+            </span>
+            <span class="block tag scale-in-txt" style="background-color: transparent;top: 4vw;left: -6vw;--base-delay:1.2s;">
+                <span>选择</span>
+            </span>
+            <span class="block tag scale-in-txt" style="background-color: transparent;top: .8vw;left: 4.5vw;--base-delay:1.3s;">
+                <span>阵营</span>
+            </span>
+        </div>
+    </section>
+</template>
+
+<style scoped lang="scss">
+@mixin center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.fade-in {
+    opacity: 0;
+    animation: fade-in 0.5s ease-in-out forwards;
+    animation-delay: var(--base-delay, 0);
+}
+
+/* 使用 @property 注册你的自定义属性 */
+@property --gradient-stop {
+  syntax: '<percentage>'; /* 告诉浏览器这是一个百分比 */
+  inherits: false;         /* 这个属性不被子元素继承 */
+  initial-value: -20%;       /* 定义一个初始值 */
+}
+
+@keyframes swap-in {
+    /* from/to 也可以，这里 0%/100% 没问题 */
+    from {
+        --gradient-stop: -20%;
+    }
+    to {
+        --gradient-stop: 100%;
+    }
+}
+
+.swap-in {
+    mask-image: linear-gradient(to right, black var(--gradient-stop), transparent calc(var(--gradient-stop) + 20%));
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+
+    animation: swap-in 0.5s ease-in-out forwards;
+    animation-delay: var(--base-delay, 0);
+}
+@keyframes bubble-drop {
+    0% {
+        top: var(--t-start);
+        left: var(--l-start);
+        transform: translate3d(-50%, -50%, 0) scale(0.1);
+    }
+
+    100% {
+        top: var(--t-end);
+        left: var(--l-end);
+        transform: translate3d(-50%, -50%, 0) scale(1);
+    }
+
+}
+
+.region-bubble {
+    transform: translate3d(-50%, -50%, 0);
+    animation: bubble-drop 2s ease-out forwards;
+    animation-delay: 1s;
+    top: var(--t-start);
+    left: var(--l-start);
+    transform: translate3d(-50%, -50%, 0) scale(0);
+}
+
+@keyframes scale-in {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+
+.scale-in-ctn {
+    transform: scale(0);
+    animation: scale-in 0.5s cubic-bezier(0.5, 0, 0.71, 1.85) forwards;
+    animation-delay: calc(var(--base-delay, 0) + 0.2s);
+}
+
+.scale-in-txt {
+    transform: scale(0);
+    animation: scale-in 0.5s cubic-bezier(0.5, 0, 0.71, 1.5) forwards;
+    animation-delay: calc(var(--base-delay, 0) + 0.2s + 0.1s);
+}
+
+.tag {
+    width: max-content;
+    padding: 0.5vw .8vw;
+}
+
+.green {
+    @include center;
+    background-color: #85AF4C;
+    color: transparent;
+    font-weight: bold;
+    width: max-content;
+
+    &>span,
+    &>svg {
+        opacity: 0;
+    }
+
+    &.fake {
+        background-color: transparent;
+        color: #FFF;
+
+        &>span,
+        &>svg {
+            opacity: 1;
+        }
+    }
+}
+
+.white {
+    @include center;
+    background-color: #FFF;
+    font-size: 5vw;
+    font-weight: bold;
+    color: #000;
+}
+
+.black {
+    @include center;
+    background-color: #000;
+    font-size: 11vw;
+    font-weight: bold;
+    color: transparent;
+
+    &.fake {
+        background-color: transparent;
+        color: #FFF;
+    }
+}
+
+span,
+div {
+    position: absolute;
+}
+
+img {
+    position: absolute;
+}
+
+.bg {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    width: 100%;
+    object-fit: cover;
+}
+</style>
@@ -0,0 +1,30 @@
+@import "tailwindcss";
+@import "./assets/fonts/stylesheet.css";
+
+body {
+  margin: 0;
+  font-family: 'Noto Serif SC Variable' sans-serif;
+  user-select: none;
+  touch-action: none;
+}
+
+.elan {
+  font-family: 'Elan ITC Std', sans-serif;
+  vertical-align: middle;
+  text-box-edge: cap alphabetic;
+  text-box-trim: trim-both;
+}
+span>span{
+
+  position: relative !important;
+}
+.block{
+  display: block !important;
+}
+.relative {
+  position: relative !important;
+}
+
+* {
+  box-sizing: border-box;
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />