Skip to content

N
NodeJS_671036

Five-菜鸟级 / NodeJS_671036
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 2
Star 0
Fork 0
N
NodeJS_671036
提交 75d2558c 编写于 作者: Q qq_41923622
浏览文件
操作

Fri Mar 21 21:26:00 CST 2025 inscode

上级 7ec37225
隐藏空白更改
内联 并排
Showing with 217 addition and 182 deletion
index.html
浏览文件 @ 75d2558c
...@@ -49,6 +49,35 @@ ...@@ -49,6 +49,35 @@
<section class="section-row"> <section class="section-row">
<div class="section-wrapper"> <div class="section-wrapper">
<div id="hotelAddressbdMap" class="address-map"></div> <div id="hotelAddressbdMap" class="address-map"></div>
<div v-scope="WeddingCalendar({})" class="wedding-calendar">
<h1 class="wedding-calendar-title">2025 年 5 月婚礼请柬</h1>
<div class="wedding-calendar-container">
<table>
<thead>
<tr>
<th class="wedding-calendar-weekend">日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th class="wedding-calendar-weekend">六</th>
</tr>
</thead>
<tbody>
<tr v-for="(week, index) in splitArray(mayDates, 7)" :key="index">
<td v-for="(date, idx) in week" :key="idx"
:class="{ 'wedding-calendar-weekend': date.isWeekend, 'wedding-calendar-special-day': date.isSpecial }">
<span v-if="date.day" class="wedding-calendar-date">{{ date.day }}</span>
<div v-if="date.isSpecial" class="wedding-calendar-heart-container">
<div class="wedding-calendar-heart"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-scope="CountDown({})" @vue:mounted="init"> <div v-scope="CountDown({})" @vue:mounted="init">
<div class="countdown-container"> <div class="countdown-container">
<h1 class="countdown-title">我们的婚礼即将开始</h1> <h1 class="countdown-title">我们的婚礼即将开始</h1>
...@@ -72,75 +101,7 @@ ...@@ -72,75 +101,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-scope="" @vue:mounted="init">
<h1>2025 年 5 月婚礼请柬</h1>
<div class="wedding-calendar-container">
<table>
<thead>
<tr>
<th class="wedding-calendar-weekend">日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th class="wedding-calendar-weekend">六</th>
</tr>
</thead>
<tbody>
<tr>
<td class="wedding-calendar-weekend"></td>
<td class="wedding-calendar-weekend"></td>
<td class="wedding-calendar-weekend"></td>
<td class="wedding-calendar-weekend"></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class="wedding-calendar-weekend">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td class="wedding-calendar-weekend wedding-calendar-special-day">
<span class="wedding-calendar-date">11</span>
<div class="wedding-calendar-heart-container">
<div class="wedding-calendar-heart"></div>
</div>
</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td class="wedding-calendar-weekend">18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td class="wedding-calendar-weekend">25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</section> </section>
<div v-scope="FormPopup({})" @vue:mounted="mounted"></div> <div v-scope="FormPopup({})" @vue:mounted="mounted"></div>
......
src/section/components/index.ts
浏览文件 @ 75d2558c
import { CountDown } from "./countdown/index" import { CountDown } from "./countdown/index"
import { WeddingCalendar } from "./wedding-calendar/index"
export default { export default {
CountDown, CountDown,
WeddingCalendar,
} }
\ No newline at end of file
src/section/components/wedding-calendar/index.scss
浏览文件 @ 75d2558c
@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 { h1 {
position: absolute; position: absolute;
top: 30px; top: 30px;
font-size: 3.5em; font-size: 32px;
color: #ff69b4; color: #ff69b4;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
} }
background: rgba(255, 255, 255, 0.8); .wedding-calendar-container {
border-radius: 25px; width: 90vw;
padding: 35px; margin: 15px auto;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); box-sizing: border-box;
backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.8);
position: relative; border-radius: 25px;
font-family: 'Pacifico', padding: 15px;
cursive; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
table { position: relative;
border-collapse: collapse; font-family: 'Pacifico', 'cursive';
width: 550px;
table {
th { border-collapse: collapse;
padding: 18px; width: 100%;
font-size: 1.3em;
color: #888; th {
border-bottom: 2px solid #d3e0ea; padding: 8px;
} font-size: 20px;
color: #888;
font-family: 'Pacifico', 'cursive';
border-bottom: 2px solid #d3e0ea;
}
td { td {
padding: 16px; padding: 10px;
text-align: center; text-align: center;
font-size: 1.4em; font-size: 20px;
color: #333; font-family: 'Pacifico', 'cursive';
position: relative; color: #333;
position: relative;
}
} }
} }
}
.wedding-calendar-weekend {
color: #ff69b4;
}
.wedding-calendar-special-day {
position: relative;
.wedding-calendar-date { .wedding-calendar-weekend {
color: #ff69b4; color: #ff69b4;
font-size: 1.6em;
z-index: 1;
} }
.wedding-calendar-heart-container { .wedding-calendar-special-day {
position: absolute; position: relative;
top: 0; .wedding-calendar-date {
left: 0; color: #fff;
width: 100%; font-size: 18px;
height: 100%; z-index: 1;
display: flex; }
justify-content: center;
align-items: center; .wedding-calendar-heart-container {
position: absolute;
.wedding-calendar-heart { z-index: -1;
width: 20px; top: 4px;
height: 20px; left: 0;
background-color: #ff69b4; width: 100%;
position: relative; height: 100%;
transform: rotate(-45deg); display: flex;
animation: wedding-calendar-heartbeat 1s infinite; justify-content: center;
align-items: center;
&:before,
&:after { .wedding-calendar-heart {
content: "";
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #ff69b4; background-color: #ff69b4;
border-radius: 50%; position: relative;
position: absolute; transform: rotate(-45deg);
} animation: wedding-calendar-heartbeat 1s infinite;
&:before { &:before,
top: -10px; &:after {
left: 0; content: "";
} width: 20px;
height: 20px;
&:after { background-color: #ff69b4;
left: 10px; border-radius: 50%;
top: 0; position: absolute;
}
&:before {
top: -10px;
left: 0;
}
&:after {
left: 10px;
top: 0;
}
} }
} }
} }
}
@keyframes wedding-calendar-heartbeat { @keyframes wedding-calendar-heartbeat {
0% { 0% {
transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1);
} }
50% { 50% {
transform: rotate(-45deg) scale(1.2); transform: rotate(-45deg) scale(1.2);
} }
100% { 100% {
transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1);
}
} }
} }
\ No newline at end of file
src/section/components/wedding-calendar/index.ts
浏览文件 @ 75d2558c
import "./index.scss" import "./index.scss"
export function CountDown(props:any){ export function WeddingCalendar(props: any) {
return { return {
weddingDate: new Date('2025-05-11T11:58:00').getTime(), mayDates: [
intervalId: null, { day: 0, isWeekend: false, isSpecial: false },
days: '00', { day: 0, isWeekend: false, isSpecial: false },
hours: '00', { day: 0, isWeekend: false, isSpecial: false },
minutes: '00', { day: 0, isWeekend: false, isSpecial: false },
seconds: '00', { day: 1, isWeekend: false, isSpecial: false },
init() { { day: 2, isWeekend: false, isSpecial: false },
this.intervalId = setInterval(() => { { day: 3, isWeekend: true, isSpecial: false },
const now = new Date().getTime(); { day: 4, isWeekend: true, isSpecial: false },
const distance = this.weddingDate - now; { day: 5, isWeekend: false, isSpecial: false },
{ day: 6, isWeekend: false, isSpecial: false },
if (distance < 0) { { day: 7, isWeekend: false, isSpecial: false },
clearInterval(this.intervalId); { day: 8, isWeekend: false, isSpecial: false },
this.days = '00'; { day: 9, isWeekend: false, isSpecial: false },
this.hours = '00'; { day: 10, isWeekend: true, isSpecial: false },
this.minutes = '00'; { day: 11, isWeekend: true, isSpecial: true },
this.seconds = '00'; { day: 12, isWeekend: false, isSpecial: false },
return; { day: 13, isWeekend: false, isSpecial: false },
} { day: 14, isWeekend: false, isSpecial: false },
{ day: 15, isWeekend: false, isSpecial: false },
const _days = Math.floor(distance / (1000 * 60 * 60 * 24)); { day: 16, isWeekend: true, isSpecial: false },
const _hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); { day: 17, isWeekend: true, isSpecial: false },
const _minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); { day: 18, isWeekend: false, isSpecial: false },
const _seconds = Math.floor((distance % (1000 * 60)) / 1000); { day: 19, isWeekend: false, isSpecial: false },
{ day: 20, isWeekend: false, isSpecial: false },
this.days = _days.toString().padStart(2, '0'); { day: 21, isWeekend: false, isSpecial: false },
this.hours = _hours.toString().padStart(2, '0'); { day: 22, isWeekend: true, isSpecial: false },
this.minutes = _minutes.toString().padStart(2, '0'); { day: 23, isWeekend: true, isSpecial: false },
this.seconds = _seconds.toString().padStart(2, '0'); { day: 24, isWeekend: false, isSpecial: false },
}, 1000); { 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
src/style.scss
浏览文件 @ 75d2558c
...@@ -31,6 +31,7 @@ body { ...@@ -31,6 +31,7 @@ body {
place-items: center; place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
} }
h1 { h1 {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或