diff --git a/index.html b/index.html index 00f2ab05aac33c2c4f3bc9b668573a7d851d91b9..18007b8ee9fa2fdb8bbeeefc313f6500d72dd655 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,35 @@
+
+

2025 年 5 月婚礼请柬

+
+ + + + + + + + + + + + + + + + + +
日一二三四五六
+ {{ date.day }} +
+
+
+
+
+

我们的婚礼即将开始

@@ -72,75 +101,7 @@
-
-

2025 年 5 月婚礼请柬

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
日一二三四五六
123
45678910
- 11 -
-
-
- 		121314151617
18192021222324
25262728293031
-
+
diff --git a/src/section/components/index.ts b/src/section/components/index.ts index 6d493cc5065d970b8b714cc18903a9b03c3b9b92..b1875d9db95c29c4691682342e3331713d3b00b6 100644 --- a/src/section/components/index.ts +++ b/src/section/components/index.ts @@ -1,6 +1,8 @@ import { CountDown } from "./countdown/index" +import { WeddingCalendar } from "./wedding-calendar/index" export default { CountDown, + WeddingCalendar, } \ No newline at end of file diff --git a/src/section/components/wedding-calendar/index.scss b/src/section/components/wedding-calendar/index.scss index 634d1ab1b4159931d5333b91dd7ae3eec060575d..ca40dae183b8ea84f7fe57a2f2403d2d63731fc5 100644 --- a/src/section/components/wedding-calendar/index.scss +++ b/src/section/components/wedding-calendar/index.scss @@ -1,108 +1,166 @@ -@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); +/* cyrillic-ext */ +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6K6MmTpA.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6D6MmTpA.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* vietnamese */ +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6I6MmTpA.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6J6MmTpA.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} -.wedding-calendar-container { +.wedding-calendar { + font-family: 'Pacifico', 'cursive'; + position: relative; + padding-top:110px ; h1 { position: absolute; top: 30px; - font-size: 3.5em; + font-size: 32px; color: #ff69b4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } - background: rgba(255, 255, 255, 0.8); - border-radius: 25px; - padding: 35px; - box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(8px); - position: relative; - font-family: 'Pacifico', - cursive; - - table { - border-collapse: collapse; - width: 550px; - - th { - padding: 18px; - font-size: 1.3em; - color: #888; - border-bottom: 2px solid #d3e0ea; - } + .wedding-calendar-container { + width: 90vw; + margin: 15px auto; + box-sizing: border-box; + background: rgba(255, 255, 255, 0.8); + border-radius: 25px; + padding: 15px; + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(8px); + position: relative; + font-family: 'Pacifico', 'cursive'; + + table { + border-collapse: collapse; + width: 100%; + + th { + padding: 8px; + font-size: 20px; + color: #888; + font-family: 'Pacifico', 'cursive'; + border-bottom: 2px solid #d3e0ea; + } - td { - padding: 16px; - text-align: center; - font-size: 1.4em; - color: #333; - position: relative; + td { + padding: 10px; + text-align: center; + font-size: 20px; + font-family: 'Pacifico', 'cursive'; + color: #333; + position: relative; + } } } -} - -.wedding-calendar-weekend { - color: #ff69b4; -} - -.wedding-calendar-special-day { - position: relative; - .wedding-calendar-date { + .wedding-calendar-weekend { + color: #ff69b4; - font-size: 1.6em; - z-index: 1; } - .wedding-calendar-heart-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - .wedding-calendar-heart { - width: 20px; - height: 20px; - background-color: #ff69b4; - position: relative; - transform: rotate(-45deg); - animation: wedding-calendar-heartbeat 1s infinite; - - &:before, - &:after { - content: ""; + .wedding-calendar-special-day { + position: relative; + .wedding-calendar-date { + color: #fff; + font-size: 18px; + z-index: 1; + } + + .wedding-calendar-heart-container { + position: absolute; + z-index: -1; + top: 4px; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + .wedding-calendar-heart { width: 20px; height: 20px; background-color: #ff69b4; - border-radius: 50%; - position: absolute; - } - - &:before { - top: -10px; - left: 0; - } - - &:after { - left: 10px; - top: 0; + position: relative; + transform: rotate(-45deg); + animation: wedding-calendar-heartbeat 1s infinite; + + &:before, + &:after { + content: ""; + width: 20px; + height: 20px; + background-color: #ff69b4; + border-radius: 50%; + position: absolute; + } + + &:before { + top: -10px; + left: 0; + } + + &:after { + left: 10px; + top: 0; + } } } } -} -@keyframes wedding-calendar-heartbeat { - 0% { - transform: rotate(-45deg) scale(1); - } + @keyframes wedding-calendar-heartbeat { + 0% { + transform: rotate(-45deg) scale(1); + } - 50% { - transform: rotate(-45deg) scale(1.2); - } + 50% { + transform: rotate(-45deg) scale(1.2); + } - 100% { - transform: rotate(-45deg) scale(1); + 100% { + transform: rotate(-45deg) scale(1); + } } } \ No newline at end of file diff --git a/src/section/components/wedding-calendar/index.ts b/src/section/components/wedding-calendar/index.ts index c746aab3621c4e86620e3714782cdf5fab615da0..372a1c977ed26c3d3d4788a1633e42e9ab7e8ed7 100644 --- a/src/section/components/wedding-calendar/index.ts +++ b/src/section/components/wedding-calendar/index.ts @@ -1,36 +1,49 @@ import "./index.scss" -export function CountDown(props:any){ +export function WeddingCalendar(props: any) { return { - weddingDate: new Date('2025-05-11T11:58:00').getTime(), - intervalId: null, - days: '00', - hours: '00', - minutes: '00', - seconds: '00', - init() { - this.intervalId = setInterval(() => { - const now = new Date().getTime(); - const distance = this.weddingDate - now; - - if (distance < 0) { - clearInterval(this.intervalId); - this.days = '00'; - this.hours = '00'; - this.minutes = '00'; - this.seconds = '00'; - return; - } - - const _days = Math.floor(distance / (1000 * 60 * 60 * 24)); - const _hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const _minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); - const _seconds = Math.floor((distance % (1000 * 60)) / 1000); - - this.days = _days.toString().padStart(2, '0'); - this.hours = _hours.toString().padStart(2, '0'); - this.minutes = _minutes.toString().padStart(2, '0'); - this.seconds = _seconds.toString().padStart(2, '0'); - }, 1000); + mayDates: [ + { day: 0, isWeekend: false, isSpecial: false }, + { day: 0, isWeekend: false, isSpecial: false }, + { day: 0, isWeekend: false, isSpecial: false }, + { day: 0, isWeekend: false, isSpecial: false }, + { day: 1, isWeekend: false, isSpecial: false }, + { day: 2, isWeekend: false, isSpecial: false }, + { day: 3, isWeekend: true, isSpecial: false }, + { day: 4, isWeekend: true, isSpecial: false }, + { day: 5, isWeekend: false, isSpecial: false }, + { day: 6, isWeekend: false, isSpecial: false }, + { day: 7, isWeekend: false, isSpecial: false }, + { day: 8, isWeekend: false, isSpecial: false }, + { day: 9, isWeekend: false, isSpecial: false }, + { day: 10, isWeekend: true, isSpecial: false }, + { day: 11, isWeekend: true, isSpecial: true }, + { day: 12, isWeekend: false, isSpecial: false }, + { day: 13, isWeekend: false, isSpecial: false }, + { day: 14, isWeekend: false, isSpecial: false }, + { day: 15, isWeekend: false, isSpecial: false }, + { day: 16, isWeekend: true, isSpecial: false }, + { day: 17, isWeekend: true, isSpecial: false }, + { day: 18, isWeekend: false, isSpecial: false }, + { day: 19, isWeekend: false, isSpecial: false }, + { day: 20, isWeekend: false, isSpecial: false }, + { day: 21, isWeekend: false, isSpecial: false }, + { day: 22, isWeekend: true, isSpecial: false }, + { day: 23, isWeekend: true, isSpecial: false }, + { day: 24, isWeekend: false, isSpecial: false }, + { day: 25, isWeekend: false, isSpecial: false }, + { day: 26, isWeekend: false, isSpecial: false }, + { day: 27, isWeekend: false, isSpecial: false }, + { day: 28, isWeekend: true, isSpecial: false }, + { day: 29, isWeekend: true, isSpecial: false }, + { day: 30, isWeekend: false, isSpecial: false }, + { day: 31, isWeekend: false, isSpecial: false } + ], + splitArray(arr, chunkSize) { + const result = []; + for (let i = 0; i < arr.length; i += chunkSize) { + result.push(arr.slice(i, i + chunkSize)); + } + return result; } } } \ No newline at end of file diff --git a/src/style.scss b/src/style.scss index 52a38fc404dcbe470e76814f731b36db1aca4831..93b0d97df84e634508406ad932d17913c240ceab 100644 --- a/src/style.scss +++ b/src/style.scss @@ -31,6 +31,7 @@ body { place-items: center; min-width: 320px; min-height: 100vh; + } h1 {