取名小程序开发

NamingAssistant/pages/result/index.ttss

@@ -0,0 +1,148 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.glow-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(90px);
+  opacity: 0.5;
+  animation: float 20s ease-in-out infinite;
+}
+
+.glow-one {
+  width: 260px;
+  height: 260px;
+  top: -80px;
+  right: -40px;
+  background: radial-gradient(circle, rgba(84, 198, 255, 0.8), rgba(84, 198, 255, 0));
+}
+
+.glow-two {
+  width: 300px;
+  height: 300px;
+  bottom: -140px;
+  left: -60px;
+  background: radial-gradient(circle, rgba(214, 139, 255, 0.8), rgba(214, 139, 255, 0));
+  animation-delay: 6s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translate3d(40px, -30px, 0);
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.4;
+  }
+}
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+  padding: 18px 12px 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.headline {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.title {
+  font-size: 28px;
+  letter-spacing: 8px;
+  text-indent: 8px;
+  color: #fbe6ce;
+  text-shadow: 0 0 16px rgba(255, 196, 120, 0.35);
+}
+
+.subtitle {
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.78);
+  line-height: 1.6;
+}
+
+.tip {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.7);
+  letter-spacing: 4px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.result-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: linear-gradient(135deg, rgba(16, 22, 46, 0.86), rgba(36, 44, 80, 0.76));
+  border-radius: 18px;
+  padding: 18px 20px;
+  margin-bottom: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 18px 32px rgba(8, 12, 24, 0.45);
+  backdrop-filter: blur(16px);
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fdf0da;
+  flex: 1;
+}
+
+.collect-button {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 22px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fbe6ce;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.meaning {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.78);
+  line-height: 1.8;
+}
+
+.back-button {
+  width: 100%;
+  border-radius: 24px;
+  margin-top: 16px;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  margin-top: 80px;
+  color: rgba(255, 244, 227, 0.8);
+  font-size: 14px;
+}