This commit is contained in:
8
.env
8
.env
@@ -1,8 +0,0 @@
|
||||
VITE_OJ=https://oj.xuyue.cc
|
||||
VITE_CODE=https://code.xuyue.cc
|
||||
VITE_WEB=https://web.xuyue.cc
|
||||
VITE_PLAY=https://play.xuyue.cc
|
||||
VITE_BOOK=https://book.xuyue.cc
|
||||
VITE_HUABU=https://huabu.xuyue.cc
|
||||
VITE_PPT=https://ppt.xuyue.cc/py
|
||||
VITE_PY=https://python.xuyue.cc
|
||||
@@ -1,5 +1,6 @@
|
||||
VITE_OJ=http://10.13.114.114:81
|
||||
VITE_CODE=http://10.13.114.114:82
|
||||
VITE_WEB=http://10.13.114.114:91
|
||||
# VITE_PLAY=http://10.13.114.114:83
|
||||
VITE_BOOK=http://10.13.114.114:84
|
||||
VITE_HUABU=http://10.13.114.114:85
|
||||
|
||||
165
index.html
165
index.html
@@ -1,17 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>徐越的在线学习平台</title>
|
||||
<title>物联网专业の在线学习平台</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="promo-left">
|
||||
<div class="promo-content">
|
||||
<h3 class="promo-title-shake">
|
||||
<img
|
||||
src="/icons/noto--fire.svg"
|
||||
alt="火"
|
||||
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||
/>
|
||||
<img
|
||||
src="/icons/noto--no-one-under-eighteen.svg"
|
||||
alt="未满十八禁"
|
||||
style="width: 1em; height: 1em; vertical-align: middle"
|
||||
/>游<span class="heart-shake">♥</span>戏<span class="heart-shake"
|
||||
>♥</span
|
||||
>推<span class="heart-shake">♥</span>荐
|
||||
<img
|
||||
src="/icons/noto--fire.svg"
|
||||
alt="火"
|
||||
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||
/>
|
||||
</h3>
|
||||
<p class="promo-text-shake">
|
||||
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
||||
>♥</span
|
||||
>不<span class="heart-shake">♥</span>在<span class="heart-shake"
|
||||
>♥</span
|
||||
>家
|
||||
</p>
|
||||
<p class="promo-text-shake">
|
||||
一<span class="heart-shake">♥</span>个<span class="heart-shake"
|
||||
>♥</span
|
||||
>人<span class="heart-shake">♥</span>寂<span class="heart-shake"
|
||||
>♥</span
|
||||
>寞<span class="heart-shake">♥</span>？
|
||||
</p>
|
||||
<div class="promo-placeholder">
|
||||
<div class="game-promo">
|
||||
<div class="language-list">
|
||||
<div class="game-title game-title-shake">
|
||||
P<span class="heart-shake">♥</span>Y<span class="heart-shake"
|
||||
>♥</span
|
||||
>T<span class="heart-shake">♥</span>H<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>O<span class="heart-shake">♥</span>N
|
||||
</div>
|
||||
<div class="game-title game-title-shake">
|
||||
W<span class="heart-shake">♥</span>E<span class="heart-shake"
|
||||
>♥</span
|
||||
>B
|
||||
</div>
|
||||
<div class="game-title game-title-shake">
|
||||
C<span class="heart-shake">♥</span>语<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>言
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-subtitle game-subtitle-shake">
|
||||
劲<span class="heart-shake">♥</span>爽<span class="heart-shake"
|
||||
>♥</span
|
||||
>游<span class="heart-shake">♥</span>戏<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>体<span class="heart-shake">♥</span>验
|
||||
</div>
|
||||
<div class="promo-rental game-subtitle-shake">
|
||||
广<span class="heart-shake">♥</span>告<span class="heart-shake"
|
||||
>♥</span
|
||||
>位<span class="heart-shake">♥</span>出<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>租
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<main class="main">
|
||||
<h1 class="title">徐越的在线学习平台</h1>
|
||||
<h1 class="title gradient">
|
||||
♥️ 物联网专业の在线学习平台 ♥️
|
||||
</h1>
|
||||
<h2 class="subtitle"></h2>
|
||||
<div class="grid" id="sites"></div>
|
||||
</main>
|
||||
@@ -31,6 +113,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promo-right">
|
||||
<div class="promo-content">
|
||||
<h3 class="promo-title-shake">
|
||||
<img
|
||||
src="/icons/noto--video-game.svg"
|
||||
alt="游戏"
|
||||
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||
/>
|
||||
游<span class="heart-shake">♥</span>戏<span class="heart-shake"
|
||||
>♥</span
|
||||
>时<span class="heart-shake">♥</span>间<span class="heart-shake"
|
||||
>♥</span
|
||||
>到
|
||||
<img
|
||||
src="/icons/noto--video-game.svg"
|
||||
alt="游戏"
|
||||
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||
/>
|
||||
</h3>
|
||||
<p class="promo-text-shake">
|
||||
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
||||
>♥</span
|
||||
>不<span class="heart-shake">♥</span>在<span class="heart-shake"
|
||||
>♥</span
|
||||
>家
|
||||
</p>
|
||||
<p class="promo-text-shake">
|
||||
一<span class="heart-shake">♥</span>个<span class="heart-shake"
|
||||
>♥</span
|
||||
>人<span class="heart-shake">♥</span>寂<span class="heart-shake"
|
||||
>♥</span
|
||||
>寞<span class="heart-shake">♥</span>？
|
||||
</p>
|
||||
<div class="promo-placeholder">
|
||||
<div class="game-promo">
|
||||
<div class="language-list">
|
||||
<div class="game-title game-title-shake">
|
||||
P<span class="heart-shake">♥</span>Y<span class="heart-shake"
|
||||
>♥</span
|
||||
>T<span class="heart-shake">♥</span>H<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>O<span class="heart-shake">♥</span>N
|
||||
</div>
|
||||
<div class="game-title game-title-shake">
|
||||
W<span class="heart-shake">♥</span>E<span class="heart-shake"
|
||||
>♥</span
|
||||
>B
|
||||
</div>
|
||||
<div class="game-title game-title-shake">
|
||||
C<span class="heart-shake">♥</span>语<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>言
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-subtitle game-subtitle-shake">
|
||||
劲<span class="heart-shake">♥</span>爽<span class="heart-shake"
|
||||
>♥</span
|
||||
>游<span class="heart-shake">♥</span>戏<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>体<span class="heart-shake">♥</span>验
|
||||
</div>
|
||||
<div class="promo-rental game-subtitle-shake">
|
||||
广<span class="heart-shake">♥</span>告<span class="heart-shake"
|
||||
>♥</span
|
||||
>位<span class="heart-shake">♥</span>出<span
|
||||
class="heart-shake"
|
||||
>♥</span
|
||||
>租
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
|
||||
6
main.js
6
main.js
@@ -1,5 +1,3 @@
|
||||
import "./style.css"
|
||||
|
||||
const pins = [
|
||||
// {
|
||||
// url: "https://code.xuyue.cc?query=30",
|
||||
@@ -34,7 +32,7 @@ const sites = [
|
||||
},
|
||||
{
|
||||
url: import.meta.env.VITE_WEB,
|
||||
title: "前端蜂",
|
||||
title: "哈基米",
|
||||
description: "Web 前端开发",
|
||||
icon: "noto--honeybee.svg",
|
||||
},
|
||||
@@ -42,7 +40,7 @@ const sites = [
|
||||
url: import.meta.env.VITE_SHUATI,
|
||||
title: "刷题鸭",
|
||||
description: "梁老师的刷题网站",
|
||||
icon: "",
|
||||
icon: "noto--paintbrush.svg",
|
||||
},
|
||||
{
|
||||
url: import.meta.env.VITE_PLAY,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"start": "vite --mode=production",
|
||||
"build": "vite build",
|
||||
"build:staging": "vite build --mode=staging",
|
||||
"fmt": "prettier --write *.js style.css index.html"
|
||||
|
||||
1
public/icons/noto--fire.svg
Normal file
1
public/icons/noto--fire.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><radialGradient id="SVG6bAUKdJt" cx="68.884" cy="124.296" r="70.587" gradientTransform="matrix(-1 -.00434 -.00713 1.6408 131.986 -79.345)" gradientUnits="userSpaceOnUse"><stop offset=".314" stop-color="#ff9800"/><stop offset=".662" stop-color="#ff6d00"/><stop offset=".972" stop-color="#f44336"/></radialGradient><path fill="url(#SVG6bAUKdJt)" d="M35.56 40.73c-.57 6.08-.97 16.84 2.62 21.42c0 0-1.69-11.82 13.46-26.65c6.1-5.97 7.51-14.09 5.38-20.18c-1.21-3.45-3.42-6.3-5.34-8.29c-1.12-1.17-.26-3.1 1.37-3.03c9.86.44 25.84 3.18 32.63 20.22c2.98 7.48 3.2 15.21 1.78 23.07c-.9 5.02-4.1 16.18 3.2 17.55c5.21.98 7.73-3.16 8.86-6.14c.47-1.24 2.1-1.55 2.98-.56c8.8 10.01 9.55 21.8 7.73 31.95c-3.52 19.62-23.39 33.9-43.13 33.9c-24.66 0-44.29-14.11-49.38-39.65c-2.05-10.31-1.01-30.71 14.89-45.11c1.18-1.08 3.11-.12 2.95 1.5"/><radialGradient id="SVG5R9TgbPb" cx="64.921" cy="54.062" r="73.86" gradientTransform="matrix(-.0101 .9999 .7525 .0076 26.154 -11.267)" gradientUnits="userSpaceOnUse"><stop offset=".214" stop-color="#fff176"/><stop offset=".328" stop-color="#fff27d"/><stop offset=".487" stop-color="#fff48f"/><stop offset=".672" stop-color="#fff7ad"/><stop offset=".793" stop-color="#fff9c4"/><stop offset=".822" stop-color="#fff8bd" stop-opacity="0.804"/><stop offset=".863" stop-color="#fff6ab" stop-opacity="0.529"/><stop offset=".91" stop-color="#fff38d" stop-opacity="0.209"/><stop offset=".941" stop-color="#fff176" stop-opacity="0"/></radialGradient><path fill="url(#SVG5R9TgbPb)" d="M76.11 77.42c-9.09-11.7-5.02-25.05-2.79-30.37c.3-.7-.5-1.36-1.13-.93c-3.91 2.66-11.92 8.92-15.65 17.73c-5.05 11.91-4.69 17.74-1.7 24.86c1.8 4.29-.29 5.2-1.34 5.36c-1.02.16-1.96-.52-2.71-1.23a16.1 16.1 0 0 1-4.44-7.6c-.16-.62-.97-.79-1.34-.28c-2.8 3.87-4.25 10.08-4.32 14.47C40.47 113 51.68 124 65.24 124c17.09 0 29.54-18.9 19.72-34.7c-2.85-4.6-5.53-7.61-8.85-11.88"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
public/icons/noto--no-one-under-eighteen.svg
Normal file
1
public/icons/noto--no-one-under-eighteen.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#c33" d="M64 4C30.86 4 4 30.86 4 64s26.86 60 60 60s60-26.86 60-60S97.14 4 64 4m50 60a49.37 49.37 0 0 1-11.3 31.6L32.4 25.3A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50M14 64a49.37 49.37 0 0 1 11.3-31.6l70.3 70.3A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50"/><circle cx="60.1" cy="63.1" r="56.1" fill="#f44336"/><path fill="#fff" d="M95.6 102.7A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50a49.37 49.37 0 0 1 11.3-31.6l7.1-7.1A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50a49.37 49.37 0 0 1-11.3 31.6"/><path fill="#231f20" d="M95.6 102.7A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50a49.37 49.37 0 0 1 11.3-31.6l7.1-7.1A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50a49.37 49.37 0 0 1-11.3 31.6"/><path fill="#414042" d="M96.4 103.2c-20.49 16.74-50.66 13.7-67.4-6.79c-14.41-17.63-14.41-42.97 0-60.61l6.8-6.8a47.3 47.3 0 0 1 30.3-10.8c26.45 0 47.9 21.44 47.9 47.9a47.93 47.93 0 0 1-10.8 30.3"/><path fill="#fafafa" d="M93 58.3c.04 2.74-.77 5.43-2.3 7.7a15.3 15.3 0 0 1-6.2 5.3c2.88 1.2 5.37 3.18 7.2 5.7c1.79 2.47 2.74 5.45 2.7 8.5c.19 4.56-1.68 8.97-5.1 12c-3.4 3-7.9 4.5-13.4 4.5s-10.1-1.5-13.4-4.5a15.19 15.19 0 0 1-5.1-12c-.01-3.03.89-5.99 2.6-8.5c1.79-2.55 4.25-4.55 7.1-5.8a15.04 15.04 0 0 1-6.1-5.3a13.57 13.57 0 0 1-2.2-7.7c0-4.9 1.6-8.8 4.7-11.7s7.3-4.3 12.4-4.3s9.2 1.4 12.4 4.3A15.67 15.67 0 0 1 93 58.3m-6.1 27.1c.13-2.98-1-5.88-3.1-8c-2.18-2.07-5.1-3.18-8.1-3.1c-5.69-.39-10.61 3.91-11 9.59q-.045.705 0 1.41c-.14 2.89.91 5.71 2.9 7.8c1.9 1.9 4.7 2.8 8.2 2.8S82 95 83.9 93c2-1.7 3-4.3 3-7.6m-11.1-37c-2.61-.13-5.15.85-7 2.7a9.8 9.8 0 0 0-2.7 7.3c-.11 2.67.87 5.26 2.7 7.2a9.48 9.48 0 0 0 7.1 2.7c2.64.13 5.21-.85 7.1-2.7a9.72 9.72 0 0 0 2.7-7.2c.14-2.69-.88-5.31-2.8-7.2a10.05 10.05 0 0 0-7.1-2.8M49.1 43l-14.3 5.4c-.68.23-1.13.88-1.1 1.6v3.2c0 .94.77 1.71 1.71 1.71c.2 0 .4-.04.59-.11l4.9-1.8a1.7 1.7 0 0 1 2.19 1.01c.07.19.1.39.11.59v45.1c.03.93.77 1.67 1.7 1.7H49c.93-.03 1.67-.77 1.7-1.7V44.1c0-.67-.55-1.22-1.23-1.21c-.06 0-.12 0-.17.01zm35.5-8.3h-1.1a.675.675 0 0 0-.7.66v3.04c.01.38-.28.69-.66.7h-.54a.675.675 0 0 1-.7-.66V28.3c-.01-.38.28-.69.66-.7h3.34c1.11-.07 2.2.25 3.1.9c.74.66 1.14 1.61 1.1 2.6c.02.71-.19 1.41-.6 2c-.26.38-.6.68-1 .9c-.3.24-.42.64-.3 1l2.3 4.2v.1h-1.7a1 1 0 0 1-.7-.4l-1.9-3.7c-.1-.4-.3-.5-.6-.5m-1.8-2.4c-.01.38.28.69.66.7h1.34c.57.02 1.14-.16 1.6-.5c.41-.34.64-.86.6-1.4c.02-.51-.16-1.01-.5-1.4c-.46-.34-1.03-.52-1.6-.5h-1.4a.675.675 0 0 0-.7.66zM77.3 34h-3.9a.43.43 0 0 0-.4.4v2.7c.01.21.19.39.4.4H78c.21.01.39.19.4.4v.8a.43.43 0 0 1-.4.4h-6.6a.43.43 0 0 1-.4-.4V28.1a.43.43 0 0 1 .4-.4H78c.21.01.39.19.4.4v.8a.43.43 0 0 1-.4.4h-4.6a.43.43 0 0 0-.4.4V32c.01.21.19.39.4.4h3.9c.21.01.39.19.4.4v.8c.02.2-.13.38-.34.4zm-16.8 4.7V28.1a.43.43 0 0 1 .4-.4h2.9c.95-.03 1.88.22 2.7.7c.79.42 1.42 1.09 1.8 1.9c.41.88.61 1.83.6 2.8v.6c.03.97-.18 1.93-.6 2.8c-.41.79-1.03 1.45-1.8 1.9c-.83.44-1.76.68-2.7.7h-2.9a.43.43 0 0 1-.4-.4m2-9v7.4c.01.21.19.39.4.4h.9c.91.05 1.79-.32 2.4-1c.62-.8.9-1.8.8-2.8v-.6a4.5 4.5 0 0 0-.8-2.8a2.93 2.93 0 0 0-2.3-1h-1a.43.43 0 0 0-.4.4m-16-2c.21.01.39.19.4.4v7.2c.05 1.1-.39 2.16-1.2 2.9c-.86.74-1.96 1.14-3.1 1.1c-1.12.07-2.23-.29-3.1-1a3.62 3.62 0 0 1-1.1-2.9v-7.2a.43.43 0 0 1 .4-.4H40c.21.01.39.19.4.4v7.2c-.05.63.17 1.25.6 1.7c.46.42 1.08.63 1.7.6c1.15.13 2.18-.69 2.31-1.84c.02-.19.02-.37-.01-.56v-7.1a.43.43 0 0 1 .4-.4c0-.1 1.1-.1 1.1-.1m11 11.4h-1.3c-.1 0-.3-.1-.3-.2l-4.2-6.7c-.2-.3-.8-.2-.8.2v6.2a.43.43 0 0 1-.4.4h-1.2a.43.43 0 0 1-.4-.4V28.1a.43.43 0 0 1 .4-.4h1.3c.1 0 .3.1.3.2l4.2 6.7c.2.3.8.2.8-.2v-6.3a.43.43 0 0 1 .4-.4h1.1c.21.01.39.19.4.4v10.5c.08.17.01.38-.17.47c-.04.02-.08.03-.13.03"/><path fill="#231f20" d="M23.4 35.6L95 102.1l2-1.9l-66.4-66.8" opacity="0.8"/><path fill="#f44336" d="M103.9 96.8L25.3 18.9L18.2 26l78.6 77.9"/><path fill="#ff8a80" d="M45 10.9c1.7-.4 4.2-1.6 5.9-1.1c1.09.3 1.75 1.4 1.5 2.5a2.61 2.61 0 0 1-2 1.5c-3.9.97-7.68 2.35-11.3 4.1A52 52 0 0 0 21 33.7c-1.9 2.7-3.4 5.5-5.8 7.8c-.21.23-.49.37-.8.4a.74.74 0 0 1-.5-.1c-1.2-.5-1.4-1.1-1.2-2.3c.18-1.01.52-1.99 1-2.9q1.515-2.64 3.3-5.1c1.89-2.91 4.11-5.59 6.6-8c6.8-6.3 15.6-11.1 21.4-12.6"/><path fill="#c33" d="m32.4 25.3l-2 2l71.1 71.1l1.8-2.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
1
public/icons/noto--paintbrush.svg
Normal file
1
public/icons/noto--paintbrush.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="none" d="M119.88 54.21c-.12.06-.25.12-.37.19"/><path fill="#f09300" d="M39.85 84.34c-7.99 5.29-19.23.44-27.01 12.41c-1.26 1.94-2.39 5.34-3.84 10.3c-1.14 3.88-7.26 6.61-7.26 6.61s5.27 5.58 10.24 6.65c7.19 1.56 17.52 2.34 24.52-5.29c7.98-8.7 4.41-16.73 11.44-21.56c-.01 0-.1-14.42-8.09-9.12"/><path fill="#c67100" d="M33.92 86.82c-.8.7-1.01 1.86-.98 2.92c.13 4.03 3.35 7.75 7.32 8.44c1.61.28 3.49.01 4.48-1.29c1.11-1.45.69-3.55-.09-5.2c-.86-1.81-2.09-3.44-3.61-4.74"/><path fill="#1565c0" d="M122.3 6.51s-1.98-2.66-7.05.31c-6.89 4.03-29.19 20.63-55.94 48.19c-6.02 6.2-8.39 9.77-8.39 9.77s-1.49 2.28 4.22 7.99c5.7 5.7 10.99 6.86 10.99 6.86l4.52-4.65c32.26-33.22 48.5-54.52 51.57-61.4c2.38-5.37.08-7.07.08-7.07"/><path fill="#bdbdbd" d="M58.08 72.66c-5.71-5.55-6.58-8.47-6.58-8.47s-1.71 1.11-2.74 2.43c-1.56 2-1.73 3.44-1.73 3.44l-12.8 16.03s-1.63 3.04 3.25 7.77c4.87 4.73 7.87 3.02 7.87 3.02L61 83.63s1.43-.21 3.39-1.83c1.29-1.07 2.35-2.81 2.35-2.81s-2.95-.79-8.66-6.33"/><path fill="#eee" d="M55.13 72.76c-.02.02-.03.04-.05.06c-.35.4-.96.41-1.49.31c-1.92-.37-3.25-1.65-3.94-3.41c-.32-.83-.38-1.79.01-2.59c.71-1.44 1.75-.47 2.55.33a18.4 18.4 0 0 1 2.65 3.38c.18.3.36.62.43.97c.07.33.04.69-.16.95"/><path fill="#2196f3" d="M61.59 59.56c1.8 4.01 17-11.78 20.85-15.88c1.92-2.04 15.19-13.98 12.19-14.48s-9.83 5.38-12.09 7.18c-4.52 3.59-10.31 9.26-14.78 13.92c-2.19 2.27-6.85 7.75-6.17 9.26"/><path fill="#eee" d="M43.73 76.94c.41-.43.9-.9 1.54-.9c.6 0 1.1.42 1.51.82c1.35 1.32 2.6 3.15 1.87 4.8c-.3.67-.88 1.19-1.45 1.69l-6.68 5.9c-1.34 1.18-2.61-.36-3.11-1.54c-.45-1.08-.11-1.94.47-2.89c1.67-2.79 3.59-5.47 5.85-7.88"/><path fill="#9e9e9e" d="M59.48 82.62c.23.16.48.38.45.65a.6.6 0 0 1-.13.28c-.53.73-1.6.88-2.46.59c-.85-.29-1.54-.92-2.2-1.53c-2.51-2.36-4.99-4.81-6.79-7.75c-.28-.45-1.73-3.06-.73-3.31c.64-.16 2.08 2.16 2.49 2.64a53.6 53.6 0 0 0 5.79 5.69c1.16.96 2.35 1.88 3.58 2.74"/><path fill="#c67100" d="M36.49 115.02s-9.59 5.38-19.79 3.86c0 0 8.07-1.47 11.49-12.4c0 0-7.77 8.09-14.79 8.64c0 0 6.7-3.49 7.13-14.07c-3.58 6.38-5.93 9.57-11.63 11.5c6.13-6.59 3.9-15.75 3.9-15.75c-1.25 1.95-2.37 5.32-3.81 10.24c-1.14 3.88-7.26 6.61-7.26 6.61s5.27 5.58 10.24 6.65c7.19 1.57 17.53 2.34 24.52-5.28"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
1
public/icons/noto--video-game.svg
Normal file
1
public/icons/noto--video-game.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#464c4f" d="M19.64 35.33c.09-.26-.09-4.82 2.45-8.41s5.87-4.12 8.33-4.56c2.98-.53 10.17-1.4 11.31 1.05s.26 3.77 2.1 4.47s-1.49 4.82-1.49 4.82zm88.25-.09s.72-4.43-1.81-7.42c-3.8-4.51-9.75-5.97-15.38-5.97c-1.81 0-3.98.35-4.68 2.51c-.4 1.25-.68 2.77-1.56 2.94c-.87.18 17.73 5.93 23.43 7.94"/><path fill="#5e6268" d="M39.04 81.29c-2.99 2.32-6.96 18.32-13.17 22.55s-20.28 1.97-21.34-6.66c-.93-7.61.76-23.61 5-39.96s7.5-24.45 17.41-27.1c7.95-2.13 23.53-3.63 38.66-3.48c15.14.15 28.39.15 36.72 3.33c7.47 2.85 12.56 10.6 16.05 25.73c3.48 15.14 6.17 33.34 5.75 39.36c-.61 8.78-13.02 14.38-22.25 7.57c-7.35-5.42-8.78-19.22-12.56-21.19s-47.55-2.27-50.27-.15"/><path fill="#9e9e9e" d="M93.25 77.17c-.72.9.94 2.24 2.12 5.17s4.22 12.63 7.17 15.34c3.68 3.37 6.55 2.74 7.11 1.68s-2.62-3.8-6.36-9.91s-8.54-14.15-10.04-12.28m-82.73-2.49c-1.11.2-4.05 14.96-1.87 21.2c1.82 5.2 8.79 5.49 11.41 4.74c5.22-1.49 6.86-6.55 5.67-7.11c-1.18-.56-5.32 3.4-9.23 1.56c-4.36-2.06-4.3-7.86-4.86-13.72c-.5-5.28-.06-6.86-1.12-6.67m27.49-32.73c-.41 0-4.01-.02-4.01-.02l.02-4.35s.08-3.51-3.68-3.43c-3.37.07-3.3 2.88-3.3 3.43s-.02 4.32-.02 4.32s-3.82-.04-4.53-.02s-3.37.06-3.37 3.49c0 3.24 2.75 3.47 3.37 3.49s4.51.02 4.51.02s-.03 3.63-.02 4.22s.12 3.37 3.49 3.37c3.68 0 3.49-3.37 3.49-3.37l.02-4.19s3.44.03 4.04.02c.86-.02 3.39-.25 3.43-3.68c.03-3.39-3.02-3.3-3.44-3.3"/><circle cx="48.4" cy="62.42" r="8.54" fill="#afafaf"/><circle cx="77.75" cy="62.55" r="8.54" fill="#afafaf"/><circle cx="48.39" cy="62.21" r="5.71" fill="#c8c8c8"/><circle cx="77.75" cy="62.4" r="5.71" fill="#c8c8c8"/><circle cx="85.82" cy="45.67" r="4.6" fill="#2086fa"/><circle cx="94.94" cy="54.48" r="4.6" fill="#06ac48"/><circle cx="104.12" cy="46.4" r="4.6" fill="#f72e26"/><circle cx="95.02" cy="37.01" r="4.6" fill="#fdb700"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/images/1.jpg
Normal file
BIN
public/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
public/images/2.jpg
Normal file
BIN
public/images/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
public/images/3.jpg
Normal file
BIN
public/images/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
public/images/4.jpg
Normal file
BIN
public/images/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/images/5.jpg
Normal file
BIN
public/images/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
841
style.css
841
style.css
@@ -2,35 +2,502 @@ html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(255, 182, 193, 0.3) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(221, 160, 221, 0.3) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(173, 216, 230, 0.2) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#ffeef8 0%,
|
||||
#f0e6ff 25%,
|
||||
#e6f3ff 50%,
|
||||
#fff0f5 75%,
|
||||
#f8f0ff 100%
|
||||
);
|
||||
color: #4a4a4a;
|
||||
min-height: 100vh;
|
||||
letter-spacing: 0.01em;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 添加可爱的装饰星星 */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, #ff69b4, transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, #ffb6c1, transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, #dda0dd, transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, #87ceeb, transparent),
|
||||
radial-gradient(2px 2px at 160px 30px, #ffc0cb, transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: 200px 100px;
|
||||
animation: twinkle 3s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动漫风格链接 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: #ff69b4;
|
||||
text-shadow: 0 1px 2px rgba(255, 105, 180, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
a:hover {
|
||||
color: #ff1493;
|
||||
text-shadow: 0 2px 4px rgba(255, 20, 147, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
.promo-left,
|
||||
.promo-right {
|
||||
width: 350px;
|
||||
min-height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 0;
|
||||
flex: 1;
|
||||
.promo-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.promo-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.promo-content {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 2px solid rgba(255, 182, 193, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
animation:
|
||||
adFloat 3s ease-in-out infinite,
|
||||
adShake 2s ease-in-out infinite,
|
||||
adFlash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.promo-content h3 {
|
||||
color: #ff69b4;
|
||||
font-size: 1.6rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
|
||||
}
|
||||
|
||||
.promo-content p {
|
||||
color: #9370db;
|
||||
font-size: 1.2rem;
|
||||
margin: 0.3rem 0;
|
||||
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
|
||||
}
|
||||
|
||||
.promo-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 182, 193, 0.3) 0%,
|
||||
rgba(221, 160, 221, 0.3) 100%
|
||||
);
|
||||
border: 2px solid rgba(255, 105, 180, 0.5);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ff69b4;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
animation: adPulse 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-promo {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
color: #ff1493;
|
||||
text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3);
|
||||
margin-bottom: 0.5rem;
|
||||
animation: gameTitleGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.game-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #9370db;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
|
||||
}
|
||||
|
||||
.promo-rental {
|
||||
font-size: 1rem;
|
||||
color: #ff69b4;
|
||||
margin-top: 0.5rem;
|
||||
text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.language-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
background: linear-gradient(45deg, #ff69b4, #ff1493);
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 8px rgba(255, 20, 147, 0.3);
|
||||
animation: buttonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.play-button:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 12px rgba(255, 20, 147, 0.5);
|
||||
}
|
||||
|
||||
@keyframes gameTitleGlow {
|
||||
0%,
|
||||
100% {
|
||||
text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3);
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
2px 2px 8px rgba(255, 20, 147, 0.6),
|
||||
0 0 12px rgba(255, 20, 147, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buttonPulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 爱心抖动效果 */
|
||||
.heart-shake {
|
||||
display: inline-block;
|
||||
color: #ff1493;
|
||||
animation: heartShake 0.5s ease-in-out infinite;
|
||||
text-shadow: 0 0 3px rgba(255, 20, 147, 0.6);
|
||||
font-size: 0.8em;
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
|
||||
.promo-title-shake,
|
||||
.promo-text-shake,
|
||||
.game-title-shake,
|
||||
.game-subtitle-shake,
|
||||
.play-button-shake {
|
||||
animation: textShake 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes heartShake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
||||
-webkit-transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1);
|
||||
-webkit-transform: translateX(-1px) translateY(-1px) rotate(-2deg)
|
||||
scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
|
||||
-webkit-transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
|
||||
-webkit-transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textShake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0) translateY(0);
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(-0.5px) translateY(-0.5px);
|
||||
-webkit-transform: translateX(-0.5px) translateY(-0.5px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(0.5px) translateY(0.5px);
|
||||
-webkit-transform: translateX(0.5px) translateY(0.5px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-0.3px) translateY(0.3px);
|
||||
-webkit-transform: translateX(-0.3px) translateY(0.3px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0.3px) translateY(-0.3px);
|
||||
-webkit-transform: translateX(0.3px) translateY(-0.3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-0.2px) translateY(0.2px);
|
||||
-webkit-transform: translateX(-0.2px) translateY(0.2px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0.2px) translateY(-0.2px);
|
||||
-webkit-transform: translateX(0.2px) translateY(-0.2px);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-0.1px) translateY(0.1px);
|
||||
-webkit-transform: translateX(-0.1px) translateY(0.1px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0.1px) translateY(-0.1px);
|
||||
-webkit-transform: translateX(0.1px) translateY(-0.1px);
|
||||
}
|
||||
90% {
|
||||
transform: translateX(0) translateY(0);
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes adFloat {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
-webkit-transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
-webkit-transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes adShake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0) translateY(0) rotate(0deg);
|
||||
-webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(-3px) translateY(-3px) rotate(-2deg);
|
||||
-webkit-transform: translateX(-3px) translateY(-3px) rotate(-2deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(3px) translateY(3px) rotate(2deg);
|
||||
-webkit-transform: translateX(3px) translateY(3px) rotate(2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
|
||||
-webkit-transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(2px) translateY(-2px) rotate(1.5deg);
|
||||
-webkit-transform: translateX(2px) translateY(-2px) rotate(1.5deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
|
||||
-webkit-transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
|
||||
-webkit-transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
|
||||
-webkit-transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(1px) translateY(-1px) rotate(0.5deg);
|
||||
-webkit-transform: translateX(1px) translateY(-1px) rotate(0.5deg);
|
||||
}
|
||||
90% {
|
||||
transform: translateX(0) translateY(0) rotate(0deg);
|
||||
-webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes adFlash {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||
}
|
||||
25% {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 4px 20px rgba(255, 182, 193, 0.4);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 25px rgba(255, 182, 193, 0.6);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 4px 30px rgba(255, 182, 193, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes adPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
margin: 0 370px;
|
||||
}
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
min-height: 100vh;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 1.15;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Orbitron", sans-serif;
|
||||
color: #ff69b4;
|
||||
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
||||
letter-spacing: 0.02em;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
/* 动漫风格渐变文字 */
|
||||
.title.gradient {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ff69b4 0%,
|
||||
#ff1493 25%,
|
||||
#da70d6 50%,
|
||||
#9370db 75%,
|
||||
#8a2be2 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
animation:
|
||||
rainbow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes centerRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
-webkit-filter: hue-rotate(0deg);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: hue-rotate(360deg);
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
@@ -39,9 +506,34 @@ a {
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
line-height: 1.6;
|
||||
font-size: 1.2rem;
|
||||
color: #9370db;
|
||||
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
-webkit-transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
@@ -49,42 +541,164 @@ a {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
gap: 1.5rem;
|
||||
max-width: 1000px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
margin: 1rem;
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
border: 2px solid rgba(255, 182, 193, 0.3);
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 动漫风格卡片 */
|
||||
.card {
|
||||
color: #4a4a4a;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.9) 0%,
|
||||
rgba(255, 240, 245, 0.8) 100%
|
||||
);
|
||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
animation:
|
||||
cardFloat 4s ease-in-out infinite,
|
||||
cardRotate 8s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
rgba(255, 182, 193, 0.1),
|
||||
transparent
|
||||
);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
animation: shine 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||
-webkit-transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||
-webkit-transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cardFloat {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
-webkit-transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
-webkit-transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cardRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card.pin {
|
||||
background-color: whitesmoke;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 192, 203, 0.9) 0%,
|
||||
rgba(255, 182, 193, 0.8) 100%
|
||||
);
|
||||
border-color: rgba(255, 105, 180, 0.6);
|
||||
animation:
|
||||
pinPulse 2s ease-in-out infinite,
|
||||
cardRotate 8s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@keyframes pinPulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
color: #ff1493;
|
||||
border-color: rgba(255, 20, 147, 0.8);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
-webkit-transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(255, 20, 147, 0.3);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #ff69b4;
|
||||
text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover h2 {
|
||||
color: #ff1493;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
color: #666;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover p {
|
||||
color: #ff1493;
|
||||
}
|
||||
|
||||
.card .single {
|
||||
@@ -98,52 +712,193 @@ a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.title-icon .icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 12px;
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0 2px 4px rgba(255, 105, 180, 0.3));
|
||||
}
|
||||
|
||||
.card:hover .title-icon .icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.4));
|
||||
}
|
||||
|
||||
.beian {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 15px;
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 182, 193, 0.2);
|
||||
}
|
||||
|
||||
.beian img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.beian img:hover {
|
||||
transform: scale(1.2) rotate(10deg);
|
||||
}
|
||||
|
||||
.beian a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: #9370db;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
|
||||
}
|
||||
|
||||
.beian a:hover {
|
||||
color: #ff69b4;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.beian {
|
||||
color: #9370db;
|
||||
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.promo-left,
|
||||
.promo-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
.main {
|
||||
padding: 1.5rem;
|
||||
border-radius: 15px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-color: #222;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pin.card {
|
||||
background-color: #222;
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.promo-left,
|
||||
.promo-right {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 320px;
|
||||
}
|
||||
|
||||
.promo-placeholder {
|
||||
width: 250px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.promo-left,
|
||||
.promo-right {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 270px;
|
||||
}
|
||||
|
||||
.promo-placeholder {
|
||||
width: 200px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.promo-left,
|
||||
.promo-right {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 220px;
|
||||
}
|
||||
|
||||
.promo-placeholder {
|
||||
width: 160px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加更多动漫风格装饰 */
|
||||
.main::after {
|
||||
content: "✨";
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 2rem;
|
||||
animation: sparkle 2s ease-in-out infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 雨滴图片动画样式 */
|
||||
|
||||
.rain-icon {
|
||||
position: fixed;
|
||||
top: -64px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
animation: rainFall linear forwards;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes rainFall {
|
||||
0% {
|
||||
transform: translateY(0) scale(1) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) scale(0.8) rotate(360deg);
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
@keyframes sparkle {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
-webkit-transform: scale(1) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
-webkit-transform: scale(1.2) rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user