add u

pages/index/index.wxml

@@ -8,16 +8,89 @@
          controls="{{false}}">
          playback-rate="{{playbackRate}}">
   </video>
-  <!-- 这里可以添加首页其他内容，比如标题、按钮等 -->
-  <view class="content">
-  <view class="xz_bg">
-    <image class='xz_xiannv' src="/images/xiannv2.png" mode=""/>
-    <image class='xz_lion' src="/images/lion1_yuhua.png" mode="" />
-    <image class='xz_juxie' src="/images/juxiezuo_yuhua.png" mode="" />
-    <image class='xz_sheshou' src="/images/sheshou_yuhua.png" mode="" />
-    <image class='xz_shuangyu' src="/images/shuangyu_yuhua.png" mode="" />
-  </view>
   
-    <text class="title"></text>
+  <!-- 遮罩层 -->
+  <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="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>
   </view>
 </view>