修改样式

miniprogram/components/navigation-bar/navigation-bar.less

@@ -58,7 +58,7 @@
 }
 
 .weui-navigation-bar__center {
-  font-size: 17px;
+  font-size: 18px;
   text-align: center;
   position: relative;
   display: flex;

miniprogram/pages/index/index.less

@@ -1,32 +1,144 @@
 /**index.less**/
+.firstConainer {
+  height: 100vh;
+}
+
+.firstPageContainer {
+  position: relative;
+  background: url('https://oss.dayaedu.com/ktyq/1733123043908.png') no-repeat center;
+  background-size: cover;
+
+  .weui-navigation-bar {
+    color: #FFF;
+  }
+
+  .fistSwiperSection {
+    height: 1142rpx;
+    padding-top: 48rpx;
+
+    swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .swiper-item {
+    transition: all 0.15s ease;
+    /* 调整过渡动画的时长和缓动函数，影响淡入淡出和缩放的速度 */
+    transform-origin: center center;
+    /* 明确缩放的中心点位置 */
+    max-width: 90%;
+    /* 适当增大最大宽度，让缩放效果更明显 */
+    max-height: 90%;
+    /* 适当增大最大高度，让缩放效果更明显 */
+    width: 592rpx;
+    height: 1142rpx;
+
+    &.current {
+      transition: all 0.2s ease;
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    image {
+      display: block;
+      margin: 0 auto;
+      height: 100%;
+      width: 100%;
+      background: #FFFFFF;
+      border-radius: 32rpx;
+    }
+  }
+
+  .pageDot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 32rpx;
+    display: none;
+
+    .dot-item {
+      width: 12rpx;
+      height: 12rpx;
+      background: #FFFFFF;
+      border-radius: 6rpx;
+      opacity: 0.5;
+      margin: 0 8rpx;
+      transition: all 0.15s ease;
+
+      &.current {
+        width: 36rpx;
+        height: 12rpx;
+        background: #FFFFFF;
+        border-radius: 6rpx;
+        opacity: 1;
+      }
+    }
+  }
+
+  .upArrow {
+    position: absolute;
+    bottom: 40rpx;
+    left: 50%;
+    width: 75.2rpx;
+    height: 86.4rpx;
+    z-index: 1;
+    transform: translateX(-50%);
+    animation: breathe 2s infinite cubic-bezier(0, 0.21, 0, 0.88);
+  }
+  @keyframes breathe {
+    0% {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0rpx);
+    }
+    75%{
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-40rpx);
+    }
+  }
+}
+
+.pageContainer {
+  height: 100vh;
+  width: 100%;
+}
+
 page {
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: #F5F6F7;
 }
+
 .scrollarea {
   flex: 1;
   overflow-y: hidden;
+  height: 100%;
 }
 
 .container {
   position: relative;
+
   .topShadow {
     position: absolute;
     top: 0;
     z-index: 1;
     width: 100%;
     height: 200rpx;
-    background: linear-gradient( 180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
   }
+
   .slider-count {
     position: absolute;
     top: 674rpx;
     right: 32rpx;
-    background: rgba(0,0,0,0.4);
+    background: rgba(0, 0, 0, 0.4);
     border-radius: 26rpx;
-    border: 2rpx solid rgba(255,255,255,0.3);
+    border: 2rpx solid rgba(255, 255, 255, 0.3);
     font-weight: 600;
     font-size: 28rpx;
     color: #FFFFFF;
@@ -35,23 +147,29 @@ page {
     padding: 2rpx 26rpx;
     z-index: 1;
   }
+
   swiper {
     height: 750rpx;
   }
+
   .swiper-item {
     width: 100%;
     height: 100%;
+
     image {
       width: 100%;
       height: 100%;
     }
   }
+
   .demo-text-1 {
     background-color: red;
   }
+
   .demo-text-2 {
     background-color: black;
   }
+
   .demo-text-3 {
     background-color: gray;
   }
@@ -63,31 +181,38 @@ page {
   border-radius: 20rpx;
   margin: 16rpx 16rpx 0;
   padding: 24rpx 24rpx 40rpx;
+
   .showPrice {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+
   .left {
     flex: 1 auto;
     display: flex;
     align-items: flex-end;
   }
+
   .currentPrice {
     font-weight: bold;
     color: #FE2451;
     font-family: DINAlternate, DINAlternate;
+
     .stuff {
       padding-right: 2rpx;
       font-size: 36rpx;
     }
+
     .priceZ {
       font-size: 60rpx;
     }
+
     .priceF {
       font-size: 36rpx;
     }
   }
+
   .originPrice {
     padding-left: 16rpx;
     font-size: 32rpx;
@@ -96,6 +221,7 @@ page {
     text-decoration: line-through;
     padding-bottom: 12rpx;
   }
+
   .right {
     padding-top: 14rpx;
     font-weight: 400;
@@ -104,6 +230,7 @@ page {
     line-height: 40rpx;
   }
 }
+
 .shopName {
   font-weight: 600;
   font-size: 32rpx;
@@ -114,6 +241,7 @@ page {
 
 .goodsInfo {
   display: flex;
+
   // align-items: center;
   .desc {
     font-size: 28rpx;
@@ -128,6 +256,7 @@ page {
     align-items: center;
     flex-wrap: wrap;
   }
+
   .goodsItem {
     line-height: 68rpx;
     background: #F4F4F5;
@@ -149,6 +278,7 @@ page {
       background: #F4F4F5;
       color: #B1B1B1;
     }
+
     image {
       position: absolute;
       top: -14rpx;
@@ -165,6 +295,7 @@ page {
   // margin-bottom: 156rpx;
   padding-bottom: 174rpx;
 }
+
 .goodsIntro {
   background: #FFFFFF;
   border-radius: 20rpx;
@@ -184,15 +315,19 @@ page {
       display: block;
       width: 100%;
     }
+
     .img1 {
       height: 1128rpx;
     }
+
     .img2 {
       height: 1810rpx
     }
+
     .img3 {
       height: 1336rpx;
     }
+
     .img4 {
       height: 1750rpx;
     }
@@ -210,14 +345,17 @@ page {
   display: flex;
   align-items: center;
   box-sizing: border-box;
+
   .orders {
     display: flex;
     flex-direction: column;
     margin-right: 40rpx;
+
     image {
       width: 48rpx;
       height: 48rpx;
     }
+
     text {
       font-weight: 500;
       font-size: 22rpx;
@@ -226,12 +364,14 @@ page {
       text-align: center;
     }
   }
+
   .btnSection {
     flex: 1 auto;
+
     button {
       width: 100%;
       line-height: 88rpx;
-      background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+      background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
       border-radius: 44rpx;
       font-weight: 500;
       font-size: 32rpx;
@@ -259,9 +399,10 @@ page {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0,0,0,0.6);
+    background-color: rgba(0, 0, 0, 0.6);
     z-index: 9;
   }
+
   .popup-container {
     position: fixed;
     bottom: 0;
@@ -293,6 +434,7 @@ page {
   .product-section {
     display: flex;
     padding-bottom: 60rpx;
+
     .product-img {
       width: 160rpx;
       height: 160rpx;
@@ -300,29 +442,36 @@ page {
       margin-right: 32rpx;
       border-radius: 6px;
       overflow: hidden;
+
       image {
         width: 100%;
         height: 100%;
       }
     }
+
     .product-left {
       display: flex;
       align-items: flex-start;
+
       .currentPrice {
         font-weight: bold;
         color: #FE2451;
         font-family: DINAlternate, DINAlternate;
+
         .stuff {
           padding-right: 2rpx;
           font-size: 36rpx;
         }
+
         .priceZ {
           font-size: 60rpx;
         }
+
         .priceF {
           font-size: 36rpx;
         }
       }
+
       .originPrice {
         padding-left: 16rpx;
         font-size: 32rpx;
@@ -350,7 +499,7 @@ page {
   button {
     width: 100%;
     line-height: 88rpx;
-    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+    background: linear-gradient(270deg, #FF204B 0%, #FE5B71 100%);
     border-radius: 44rpx;
     font-weight: 500;
     font-size: 32rpx;

miniprogram/pages/index/index.ts

@@ -11,6 +11,13 @@ Page({
    * 页面的初始数据
    */
   data: {
+    firstImgList: [
+      'https://oss.dayaedu.com/ktyq/1733122868440.png',
+      'https://oss.dayaedu.com/ktyq/1733122881253.png',
+      'https://oss.dayaedu.com/ktyq/1733122891820.png',
+      'https://oss.dayaedu.com/ktyq/1733122903954.png'
+    ],
+    firstCurrent: 0,
     imgList: [
       'https://oss.dayaedu.com/ktyq/1732610921517.png',
       'https://oss.dayaedu.com/ktyq/1732610940095.png',
@@ -114,6 +121,14 @@ Page({
       selected: item || {}
     })
   },
+  onFirstChange(e: any) {
+    const detail = e.detail;
+    if(detail.source === 'touch' || detail.source == 'autoplay') {
+      this.setData({
+        firstCurrent: detail.current
+      })
+    }
+  },
   // 事件处理函数
   changeSwiper(e: any) {
     const detail = e.detail;

miniprogram/pages/index/index.wxml

@@ -1,98 +1,125 @@
-<!--index.wxml-->
-<scroll-view class="scrollarea" scroll-y="{{popupShow ? false : true}}" type="list">
-  <view class="container">
-    <!-- <view class="topShadow"></view> -->
-    <view class="slider-count">{{current + 1}}/{{imgList.length}}</view>
-    <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
-      <swiper-item wx:for="{{imgList}}" wx:key="index">
-        <view class="swiper-item">
-          <image bind:tap="onPreivewBannerImg" data-src="{{ item }}" src="{{ item }}"></image>
-        </view>
-      </swiper-item>
-    </swiper>
-
-    <view class="shop-section">
-      <view class="showPrice">
-        <view class="left">
-          <view class="currentPrice">
-            <text class="stuff">¥</text>
-            <text class="priceZ">{{ selected.integerPart || 0 }}</text>
-            <text class="priceF">.{{ selected.decimalPart || '00' }}</text>
+<swiper indicator-dots="{{false}}" vertical="true" class="firstConainer">
+  <swiper-item>
+    <view class="pageContainer firstPageContainer">
+      <navigation-bar title="音乐数字AI工具" back="{{false}}"></navigation-bar>
+      <swiper indicator-dots="{{false}}" class="fistSwiperSection" previous-margin="78rpx" next-margin="78rpx" bindchange="onFirstChange">
+        <swiper-item wx:for="{{firstImgList}}" wx:key="index">
+          <view class="swiper-item {{ firstCurrent == index ? 'current' : '' }}">
+            <image data-src="{{ item }}" src="{{ item }}"></image>
           </view>
-          <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">¥{{ selected.originalPrice || '0.00' }}</view>
-        </view>
-        <view class="right">
-          已售1w+
-        </view>
+        </swiper-item>
+      </swiper>
+      <view class="pageDot">
+        <view wx:for="{{firstImgList}}" wx:key="index" class="dot-item {{ firstCurrent == index ? 'current' : '' }}"></view>
       </view>
 
-      <view class="shopName">
-        {{ selected.name }}
-      </view>
-
-      <view class="goodsInfo">
-        <text class="desc">已选：</text>
-        <view class="goodsList">
-          <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}<image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image></view>
-        </view>
-      </view>
-    </view>
-    
-    <view class="goodsSection">
-      <view class="goodsIntro">
-        <view class="title">图文详情</view>
-        <view class="images">
-          <block wx:for="{{goodsImgList}}" wx:key="index">
-            <image  mode="widthFix" bind:tap="onPreivewGoodsImg" data-src="{{item}}" src="{{item}}"></image>
-          </block>
-        </view>
-      </view>
+      <image src="./images/up-arrow.png" class="upArrow"></image>
     </view>
+  </swiper-item>
+  <swiper-item>
+    <view class="pageContainer">
+      <!--index.wxml-->
+      <scroll-view class="scrollarea" bounces="false" scroll-y="{{popupShow ? false : true}}" type="list">
+        <view class="container">
+          <!-- <view class="topShadow"></view> -->
+          <view class="slider-count">{{current + 1}}/{{imgList.length}}</view>
+          <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
+            <swiper-item wx:for="{{imgList}}" wx:key="index">
+              <view class="swiper-item">
+                <image bind:tap="onPreivewBannerImg" data-src="{{ item }}" src="{{ item }}"></image>
+              </view>
+            </swiper-item>
+          </swiper>
 
-    <view class="bottom-section">
-      <view class="orders" bind:tap="onService">
-        <image src="./images/icon-service.png" />
-        <text>客服</text>
-      </view>
-      <view class="orders" bind:tap="onOrder">
-        <image src="./images/icon-order.png" />
-        <text>订单</text>
-      </view>
-      <view class="btnSection">
-        <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
-      </view>
-    </view>
+          <view class="shop-section">
+            <view class="showPrice">
+              <view class="left">
+                <view class="currentPrice">
+                  <text class="stuff">¥</text>
+                  <text class="priceZ">{{ selected.integerPart || 0 }}</text>
+                  <text class="priceF">.{{ selected.decimalPart || '00' }}</text>
+                </view>
+                <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">¥{{ selected.originalPrice || '0.00' }}</view>
+              </view>
+              <view class="right">
+                已售1w+
+              </view>
+            </view>
 
-    <view class="popup-section" wx:if="{{popupShow}}">
-      <view class="popup-mask" bind:tap="onClose"></view>
-      <view class="popup-container">
-        <image bind:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>
+            <view class="shopName">
+              {{ selected.name }}
+            </view>
 
-        <view class="product-section">
-          <view class="product-img">
-            <image bind:tap="onPreivewGoods" data-src="{{ selected.pic }}" src="{{ selected.pic }}"></image>
+            <view class="goodsInfo">
+              <text class="desc">已选：</text>
+              <view class="goodsList">
+                <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}
+                  <image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
+                </view>
+              </view>
+            </view>
           </view>
-          <view class="product-left">
-            <view class="currentPrice">
-              <text class="stuff">¥</text>
-              <text class="priceZ">{{ selected.integerPart }}</text>
-              <text class="priceF">.{{ selected.decimalPart }}</text>
+
+          <view class="goodsSection">
+            <view class="goodsIntro">
+              <view class="title">图文详情</view>
+              <view class="images">
+                <block wx:for="{{goodsImgList}}" wx:key="index">
+                  <image mode="widthFix" bind:tap="onPreivewGoodsImg" data-src="{{item}}" src="{{item}}"></image>
+                </block>
+              </view>
             </view>
-            <view class="originPrice">¥{{ selected.originalPrice }}</view>
           </view>
-        </view>
 
-        <view class="goodsInfo">
-          <view class="desc">规格</view>
-          <view class="goodsList">
-            <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}<image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image></view>
+          <view class="bottom-section">
+            <view class="orders" bind:tap="onService">
+              <image src="./images/icon-service.png" />
+              <text>客服</text>
+            </view>
+            <view class="orders" bind:tap="onOrder">
+              <image src="./images/icon-order.png" />
+              <text>订单</text>
+            </view>
+            <view class="btnSection">
+              <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
+            </view>
+          </view>
+
+          <view class="popup-section" wx:if="{{popupShow}}">
+            <view class="popup-mask" bind:tap="onClose"></view>
+            <view class="popup-container">
+              <image bind:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>
+
+              <view class="product-section">
+                <view class="product-img">
+                  <image bind:tap="onPreivewGoods" data-src="{{ selected.pic }}" src="{{ selected.pic }}"></image>
+                </view>
+                <view class="product-left">
+                  <view class="currentPrice">
+                    <text class="stuff">¥</text>
+                    <text class="priceZ">{{ selected.integerPart }}</text>
+                    <text class="priceF">.{{ selected.decimalPart }}</text>
+                  </view>
+                  <view class="originPrice">¥{{ selected.originalPrice }}</view>
+                </view>
+              </view>
+
+              <view class="goodsInfo">
+                <view class="desc">规格</view>
+                <view class="goodsList">
+                  <view wx:for="{{ list }}" wx:key="index" class="goodsItem {{ item.id == selected.id ? 'selected' : '' }} {{ item.stockNum <= 0 ? 'nosale' : '' }}" bind:tap="onSelectGoods" data-id="{{ item.id }}">{{ item.typeName }}
+                    <image wx:if="{{ item.stockNum <= 0 }}" src="./images/nosale.png"></image>
+                  </view>
+                </view>
+              </view>
+
+              <button type="primary" bind:tap="onSubmit">立即购买</button>
+            </view>
           </view>
         </view>
 
-        <button type="primary" bind:tap="onSubmit">立即购买</button>
-      </view>
+        <service popShow="{{ showService }}" bind:changePop="changePop"></service>
+      </scroll-view>
     </view>
-  </view>
-
-  <service popShow="{{ showService }}" bind:changePop="changePop"></service>
-</scroll-view>
+  </swiper-item>
+</swiper>

miniprogram/pages/login/login.wxml

@@ -2,8 +2,8 @@
 <view class="container">
   <navigation-bar title="登录" ></navigation-bar>
   <view class="appInfo">
-    <image src="https://oss.dayaedu.com/ktyq/1732255278268.png"></image>
-    <text class="appname">音乐数字AI工具</text>
+    <image src="https://oss.dayaedu.com/ktyq/1733126154750.png"></image>
+    <text class="appname">器乐数字AI工具</text>
   </view>
   <view class="login-section">
     <view class="btnSection">

miniprogram/pages/protocol/register.ts

@@ -6,7 +6,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    src: app.globalData.baseUrl + '/classroom-app/#/preview-protocol'
+    src: app.globalData.baseUrl + '/classroom-app/#/preview-protocol?wx=1'
   },
 
   /**
@@ -17,11 +17,11 @@ Page({
     if(options.type) {
       if(options.type === "privacy") {
         this.setData({
-          src: app.globalData.baseUrl + '/classroom-app/#/privacy-protocol'
+          src: app.globalData.baseUrl + '/classroom-app/#/privacy-protocol?wx=1'
         })
       } else if(options.type === "register") {
         this.setData({
-          src: app.globalData.baseUrl + '/classroom-app/#/preview-protocol'
+          src: app.globalData.baseUrl + '/classroom-app/#/preview-protocol?wx=1'
         })
       }
     }