修改样式

2025-11-25 09:21:46 +08:00
parent f57b989144
commit 377b53f9e2
6 changed files with 252 additions and 438 deletions
--- a/app.json
+++ b/app.json
@@ -15,10 +15,11 @@
    "color": "#7A7E83",
    "selectedColor": "#4a6fa5",
    "borderStyle": "black",
+    "backgroundColor": "#1a1d3a",
    "list": [
      {
        "pagePath": "pages/index/index",
-        "text": "首页",
+        "text": "主页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
@@ -30,7 +31,7 @@
      },
      {
        "pagePath": "pages/history/history",
-        "text": "历史",
+        "text": "我的",
        "iconPath": "images/history.png",
        "selectedIconPath": "images/history-active.png"
      }
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -1,118 +1,22 @@
 Page({
  data: {
-    playbackRate: 5.0,  // 默认1倍速
-    animationFrame: null, // 用于保存定时器ID
-    activeConstellation: '', // 当前激活的星座
-    tapTimer: null // 用于处理点击延迟
-  },
-  
-  onReady() {
    
  },

-  // 处理星座点击事件
-  handleConstellationTap(e) {
-    const { constellation, title, page } = e.currentTarget.dataset;
-    
-    // 如果已经有激活的星座，直接跳转页面
-    if (this.data.activeConstellation === constellation) {
-      if (page) {
-        // 添加跳转前的渐出效果
-        wx.vibrateShort({ type: 'medium' });
-        
-        setTimeout(() => {
-          wx.navigateTo({
-            url: page,
-            fail: () => {
-              wx.showToast({
-                title: `${title}功能开发中`,
-                icon: 'none',
-                duration: 2000
-              });
-            }
-          });
-          this.hideMask();
-        }, 200);
-      } else {
-        wx.showToast({
-          title: `${title}功能开发中`,
-          icon: 'none',
-          duration: 2000
-        });
-        this.hideMask();
-      }
-      return;
-    }
+  onLoad() {
+    // 页面加载时的初始化
+  },

-    // 如果有其他激活的星座，先重置
-    if (this.data.activeConstellation) {
-      this.hideMask();
-    }
-
-    // 轻微的震动反馈（点击瞬间）
+  // 进入应用
+  enterApp() {
+    // 添加震动反馈
    wx.vibrateShort({
      type: 'light'
    });

-    // 延迟50ms后开始动画，制造"弹起"的感觉
-    setTimeout(() => {
-      // 激活当前星座（放大并居中）
-      this.setData({
-        activeConstellation: constellation
-      });
-
-      // 动画进行到一半时给予第二次震动反馈
-      setTimeout(() => {
-        wx.vibrateShort({
-          type: 'light'
-        });
-      }, 400);
-    }, 50);
-
-    // 2秒后自动跳转（给用户更多时间欣赏动画）
-    if (this.data.tapTimer) {
-      clearTimeout(this.data.tapTimer);
-    }
-    
-    const timer = setTimeout(() => {
-      if (page) {
-        wx.navigateTo({
-          url: page,
-          success: () => {
-            this.hideMask();
-          },
-          fail: () => {
-            wx.showToast({
-              title: `${title}功能开发中`,
-              icon: 'none',
-              duration: 2000
-            });
-            this.hideMask();
-          }
-        });
-      }
-    }, 2000);
-
-    this.setData({
-      tapTimer: timer
+    // 切换到记录页
+    wx.switchTab({
+      url: '/pages/record/record'
    });
-  },
-
-  // 隐藏遮罩和重置状态
-  hideMask() {
-    if (this.data.tapTimer) {
-      clearTimeout(this.data.tapTimer);
-    }
-    this.setData({
-      activeConstellation: '',
-      tapTimer: null
-    });
-  },
-
-  onUnload() {
-    // 页面卸载时清除定时器
-    if (this.data.tapTimer) {
-      clearTimeout(this.data.tapTimer);
-    }
  }
 })
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -1,96 +1,33 @@
-<view class="page-container">
-  <video class="bg-video"
-         src="http://exam.yinyue.click/sky.mp4"  
-         loop
-         muted
-         autoplay
-         object-fit="cover"
-         controls="{{false}}">
-         playback-rate="{{playbackRate}}">
-  </video>
-  
-  <!-- 遮罩层 -->
-  <view class="mask {{activeConstellation ? 'mask-show' : ''}}" bindtap="hideMask"></view>
-  
-  <!-- 星座容器 -->
-  <view class="content">
-    <view class="xz_bg">
-      <!-- 仙女座 - 梦境记录 -->
-      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'xiannv' ? 'dimmed' : ''}}">
-        <image 
-          class='xz_xiannv {{activeConstellation === "xiannv" ? "active-center" : ""}}' 
-          src="/images/xiannv2.png" 
-          mode="aspectFit"
-          bindtap="handleConstellationTap"
-          data-constellation="xiannv"
-          data-title="梦境记录"
-          data-page="/pages/record/record"
-        />
-        <view class="constellation-title {{activeConstellation === 'xiannv' ? 'title-show' : ''}}">
-          梦境记录
-        </view>
-      </view>
+<view class="welcome-container">
+  <!-- 星星背景装饰 -->
+  <view class="stars">
+    <view class="star star-1"></view>
+    <view class="star star-2"></view>
+    <view class="star star-3"></view>
+    <view class="star star-4"></view>
+    <view class="star star-5"></view>
+    <view class="star star-6"></view>
+  </view>

-      <!-- 狮子座 - 梦境分享 -->
-      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'lion' ? 'dimmed' : ''}}">
-        <image 
-          class='xz_lion {{activeConstellation === "lion" ? "active-center" : ""}}' 
-          src="/images/lion1_yuhua.png" 
-          mode="aspectFit"
-          bindtap="handleConstellationTap"
-          data-constellation="lion"
-          data-title="梦境分享"
-        />
-        <view class="constellation-title {{activeConstellation === 'lion' ? 'title-show' : ''}}">
-          梦境分享
-        </view>
-      </view>
-
-      <!-- 巨蟹座 - 私密功能 -->
-      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'juxie' ? 'dimmed' : ''}}">
-        <image 
-          class='xz_juxie {{activeConstellation === "juxie" ? "active-center" : ""}}' 
-          src="/images/juxiezuo_yuhua.png" 
-          mode="aspectFit"
-          bindtap="handleConstellationTap"
-          data-constellation="juxie"
-          data-title="私密功能"
-          data-page="/pages/history/history"
-        />
-        <view class="constellation-title {{activeConstellation === 'juxie' ? 'title-show' : ''}}">
-          私密功能
-        </view>
-      </view>
-
-      <!-- 射手座 - 梦境探索 -->
-      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'sheshou' ? 'dimmed' : ''}}">
-        <image 
-          class='xz_sheshou {{activeConstellation === "sheshou" ? "active-center" : ""}}' 
-          src="/images/sheshou_yuhua.png" 
-          mode="aspectFit"
-          bindtap="handleConstellationTap"
-          data-constellation="sheshou"
-          data-title="梦境探索"
-        />
-        <view class="constellation-title {{activeConstellation === 'sheshou' ? 'title-show' : ''}}">
-          梦境探索
-        </view>
-      </view>
-
-      <!-- 双鱼座 - 梦境分析 -->
-      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'shuangyu' ? 'dimmed' : ''}}">
-        <image 
-          class='xz_shuangyu {{activeConstellation === "shuangyu" ? "active-center" : ""}}' 
-          src="/images/shuangyu_yuhua.png" 
-          mode="aspectFit"
-          bindtap="handleConstellationTap"
-          data-constellation="shuangyu"
-          data-title="梦境分析"
-        />
-        <view class="constellation-title {{activeConstellation === 'shuangyu' ? 'title-show' : ''}}">
-          梦境分析
-        </view>
-      </view>
+  <!-- 主内容区域 -->
+  <view class="main-content">
+    <!-- 书本图标 -->
+    <view class="book-icon-single">
+      <view class="book-page-left"></view>
+      <view class="book-page-right"></view>
+      <view class="book-spine"></view>
    </view>
+
+    <!-- 标题 -->
+    <view class="app-title">梦之笺</view>
+
+    <!-- 副标题 -->
+    <view class="app-subtitle">记录你的思绪与梦境</view>
+  </view>
+
+  <!-- 进入按钮 - 左下角 -->
+  <view class="enter-button" bindtap="enterApp">
+    <text class="button-icon">✨</text>
+    <text class="button-text">进入梦境</text>
  </view>
 </view>
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -1,252 +1,224 @@
-.page-container {
-  position: relative;
+/* 欢迎页容器 */
+.welcome-container {
  width: 100%;
  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, #1a1d3a 0%, #2d1b4e 50%, #3d2456 100%);
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 100rpx;
+}
+
+/* 星星装饰 */
+.stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.star {
+  position: absolute;
+  width: 4rpx;
+  height: 4rpx;
+  background: #ffffff;
+  border-radius: 50%;
+  opacity: 0.8;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+.star-1 {
+  top: 15%;
+  left: 20%;
+  animation-delay: 0s;
+}
+
+.star-2 {
+  top: 25%;
+  right: 25%;
+  width: 6rpx;
+  height: 6rpx;
+  animation-delay: 0.5s;
+}
+
+.star-3 {
+  top: 45%;
+  left: 15%;
+  animation-delay: 1s;
+}
+
+.star-4 {
+  top: 60%;
+  right: 20%;
+  width: 5rpx;
+  height: 5rpx;
+  animation-delay: 1.5s;
+}
+
+.star-5 {
+  top: 75%;
+  left: 30%;
+  animation-delay: 2s;
+}
+
+.star-6 {
+  top: 85%;
+  right: 35%;
+  width: 6rpx;
+  height: 6rpx;
+  animation-delay: 2.5s;
+}
+
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+/* 主内容区域 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 1;
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) translateY(0);
+  }
+}
+
+/* 书本图标 - 单一整体样式 */
+.book-icon-single {
+  width: 140rpx;
+  height: 110rpx;
+  position: relative;
+  margin-bottom: 60rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.book-page-left,
+.book-page-right {
+  width: 60rpx;
+  height: 90rpx;
+  background: #ffffff;
+  position: absolute;
+  border-radius: 6rpx;
+}
+
+.book-page-left {
+  left: 8rpx;
+  transform: perspective(300rpx) rotateY(20deg);
+  box-shadow: 2rpx 2rpx 12rpx rgba(0, 0, 0, 0.25);
+  z-index: 2;
+}
+
+.book-page-right {
+  right: 8rpx;
+  transform: perspective(300rpx) rotateY(-20deg);
+  box-shadow: -2rpx 2rpx 12rpx rgba(0, 0, 0, 0.25);
+  z-index: 2;
+}
+
+.book-spine {
+  width: 10rpx;
+  height: 90rpx;
+  background: #e5e5e5;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 2rpx;
+  z-index: 1;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+/* 应用标题 */
+.app-title {
+  font-size: 88rpx;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 24rpx;
+  letter-spacing: 8rpx;
+  text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
+}
+
+/* 应用副标题 */
+.app-subtitle {
+  font-size: 30rpx;
+  color: rgba(255, 255, 255, 0.65);
+  letter-spacing: 2rpx;
+}
+
+/* 进入按钮 - 左下角定位 */
+.enter-button {
+  width: 240rpx;
+  height: 88rpx;
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(168, 85, 247, 0.4);
+  transition: all 0.3s ease;
+  position: fixed;
+  bottom: 120rpx;
+  left: 32rpx;
+  z-index: 10;
  overflow: hidden;
 }

-.bg-video {
+.enter-button::before {
+  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
-  z-index: -1;
-}
-
-/* 遮罩层 - 隐藏不显示 */
-.mask {
-  display: none;
-}
-
-.mask-show {
-  display: none;
-}
-
-.content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: white;
-  text-align: center;
-}
-
-.title {
-  font-size: 64rpx;
-  font-weight: bold;
-}
-
-.xz_bg {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-/* 星座包装器 */
-.constellation-wrapper {
-  position: absolute;
-  z-index: 2;
-  transition: opacity 0.6s ease;
-}
-
-/* 当有激活星座时，其他星座稍微变暗 */
-.constellation-wrapper.dimmed {
-  opacity: 0.5;
-}
-
-/* 星座图片通用样式 */
-.xz_xiannv,
-.xz_lion,
-.xz_juxie,
-.xz_sheshou,
-.xz_shuangyu {
-  width: 280rpx;
-  height: 280rpx;
-  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  cursor: pointer;
-  display: block;
-  transform-origin: center center;
-  will-change: transform, opacity, filter;
-  /* 去除边框和轮廓 */
-  border: none;
-  outline: none;
-  box-shadow: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* 悬停效果（移动端用active代替） */
-.xz_xiannv:active:not(.active-center),
-.xz_lion:active:not(.active-center),
-.xz_juxie:active:not(.active-center),
-.xz_sheshou:active:not(.active-center),
-.xz_shuangyu:active:not(.active-center) {
-  transform: scale(0.95);
-  transition: all 0.1s ease;
-}
-
-/* 仙女座 - 左上角 */
-.xz_xiannv {
-  opacity: 95%;
-  position: relative;
-}
-
-.constellation-wrapper:nth-child(1) {
-  top: 120rpx;
-  left: 40rpx;
-}
-
-/* 狮子座 - 右上角 */
-.xz_lion {
-  opacity: 95%;
-  position: relative;
-}
-
-.constellation-wrapper:nth-child(2) {
-  top: 120rpx;
-  right: 40rpx;
-}
-
-/* 巨蟹座 - 左中部 */
-.xz_juxie {
-  opacity: 95%;
-  position: relative;
-}
-
-.constellation-wrapper:nth-child(3) {
-  top: 360rpx;
-  left: 60rpx;
-}
-
-/* 射手座 - 右中部 */
-.xz_sheshou {
-  opacity: 95%;
-  position: relative;
-}
-
-.constellation-wrapper:nth-child(4) {
-  top: 360rpx;
-  right: 60rpx;
-}
-
-/* 双鱼座 - 底部居中 */
-.xz_shuangyu {
-  opacity: 85%;
-  position: relative;
-}
-
-.constellation-wrapper:nth-child(5) {
-  bottom: 180rpx;
-  left: 50%;
-  margin-left: -140rpx;
-}
-
-/* 激活状态 - 放大并居中 */
-.active-center {
-  position: fixed !important;
-  top: 50% !important;
-  left: 50% !important;
-  width: 280rpx !important;
-  height: 280rpx !important;
-  margin: 0 !important;
-  opacity: 1 !important;
-  z-index: 100 !important;
-  pointer-events: auto !important;
-  /* 平移放大动画 + 后续脉冲动画 */
-  animation: zoomIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
-             smoothPulse 2s ease-in-out 0.6s infinite,
-             glow 2s ease-in-out 0.6s infinite;
-}
-
-/* 标题文字 */
-.constellation-title {
-  position: fixed;
-  top: 65%;
-  left: 50%;
-  transform: translateX(-50%) translateY(20rpx);
-  font-size: 72rpx;
-  font-weight: bold;
-  color: #ffffff;
+  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
  opacity: 0;
-  z-index: 101;
-  pointer-events: none;
-  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
-  text-shadow: 0 0 20rpx rgba(74, 111, 165, 1),
-               0 0 40rpx rgba(74, 111, 165, 0.8),
-               0 4rpx 8rpx rgba(0, 0, 0, 0.5);
-  letter-spacing: 16rpx;
-  white-space: nowrap;
-}
-
-.title-show {
-  opacity: 1;
-  top: 63%;
-  transform: translateX(-50%) translateY(0);
-}
-
-/* 平滑的脉冲效果 */
-@keyframes smoothPulse {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1.8);
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.85);
-  }
-}
-
-/* 发光动画 */
-@keyframes glow {
-  0%, 100% {
-    filter: brightness(1.3) drop-shadow(0 0 60rpx rgba(74, 111, 165, 1)) 
-            drop-shadow(0 0 100rpx rgba(74, 111, 165, 0.6));
-  }
-  50% {
-    filter: brightness(1.4) drop-shadow(0 0 80rpx rgba(74, 111, 165, 1)) 
-            drop-shadow(0 0 120rpx rgba(74, 111, 165, 0.8));
-  }
-}
-
-/* 星座包装器的过渡效果 */
-.constellation-wrapper {
-  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* 平移放大入场动画（无旋转） */
-@keyframes zoomIn {
-  0% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1.8);
-    opacity: 1;
-  }
-}
-
-/* 星云粒子效果（伪元素） */
-.active-center::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 120%;
-  height: 120%;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(circle, rgba(74, 111, 165, 0.3) 0%, transparent 70%);
-  border-radius: 50%;
-  animation: nebula 3s ease-in-out infinite;
+  transition: opacity 0.3s ease;
  z-index: -1;
 }

-@keyframes nebula {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 0.5;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.2);
-    opacity: 0.8;
-  }
+.enter-button:active {
+  transform: scale(0.96);
+}
+
+.enter-button:active::before {
+  opacity: 1;
+}
+
+.button-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
+.button-text {
+  font-size: 30rpx;
+  color: #ffffff;
+  font-weight: 500;
+  letter-spacing: 2rpx;
 }
--- a/project.config.json
+++ b/project.config.json
@@ -1,5 +1,5 @@
 {
-  "appid": "wxb902b6272b3d647c",
+  "appid": "touristappid",
  "compileType": "miniprogram",
  "libVersion": "3.10.1",
  "packOptions": {
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -19,6 +19,6 @@
    "ignoreDevUnusedFiles": true,
    "bigPackageSizeSupport": false
  },
-  "libVersion": "3.10.1",
+  "libVersion": "3.5.2",
  "condition": {}
 }