Update style.css

style.css

@@ -1,3 +1,208 @@
+body {
+    background-color: #ffe4e1;
+    margin: 0;
+    overflow-x: hidden;
+    color: #333;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: bold;
+    text-align: center;
+}
+
+h2 {
+    color: #ff1493;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+
+.indent {
+    text-indent: 2rem;
+}
+
+.icon {
+    width: 25px;
+    height: 25px;
+}
+
+.memory-wrapper img {
+    width: 80vw;
+    height: auto;
+    border: 3px solid #ff69b4;
+    border-radius: 15px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: opacity 1s ease-in-out;
+}
+
+.heart {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #ff69b4;
+    transform: rotate(-45deg);
+    animation: float 4s infinite;
+    bottom: 0;
+}
+
+.heart:before,
+.heart:after {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #ff69b4;
+    border-radius: 50%;
+}
+
+.heart:before {
+    top: -15px;
+    left: 0;
+}
+
+.heart:after {
+    top: 0;
+    left: 15px;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) scale(1) rotate(-45deg);
+        opacity: 1;
+    }
+    50% {
+        transform: translateY(-50vh) scale(1.2) rotate(-45deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: translateY(-100vh) scale(1.5) rotate(-45deg);
+        opacity: 0;
+    }
+}
+
+.tab-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 20px 20px;
+    padding-bottom: 70px;
+}
+
+.bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    background: linear-gradient(to right, #ff69b4, #ff1493);
+    padding: 10px 0;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+
+.bottom-nav button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 10px;
+    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+.bottom-nav button:hover,
+.bottom-nav button.active {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.article-wrapper {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.article {
+    display: none;
+    background-color: #fff0f5;
+    border: 2px solid #ff69b4;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
+    width: 90%;
+    text-align: left;
+    margin-bottom: 25px;
+}
+
+.article h3 {
+    color: #ff69b4;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.article .content {
+    color: #333;
+    font-size: 16px;
+    height: calc(100vh - 400px);
+    max-height: calc(100vh - 400px);
+    overflow-y: auto;
+}
+
+.article .content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.article .content::-webkit-scrollbar-track {
+    background-color: #f0f0f0;
+}
+
+.article .content::-webkit-scrollbar-thumb {
+    background-color: #ff69b4;
+    border-radius: 10px;
+}
+
+.article .content::-webkit-scrollbar-thumb:hover {
+    background-color: #ff1493;
+}
+
+.article-nav {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background-color: #fff0f5;
+    border-radius: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+}
+
+.article-nav button {
+    background: linear-gradient(to right, #ff69b4, #ff1493);
+    border: none;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 50px;
+    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+
+.article-nav button:hover {
+    background: linear-gradient(to right, #ff1493, #ff69b4);
+}
+
+.article-nav button:disabled {
+    background-color: #d3d3d3; 
+    color: #ccc; 
+    cursor: not-allowed;
+}
+
 .music-icon {
     position: fixed;
     top: 8px;
@@ -32,5 +237,5 @@
 
 .music-player {
     position: absolute;
-    left: -9999px; /* 隐藏音频元素 */
+    left: -9999px;
 }