card

nova-tourism/components/my/index.js

@@ -48,10 +48,10 @@ Component({
      */
     methods: {
         gourl(e) {
-            // const url = e.currentTarget.dataset.url;
-            // wx.navigateTo({
-            //     url: `${url}`,
-            // });
+            const url = e.currentTarget.dataset.url;
+            wx.navigateTo({
+                url: `${url}`,
+            });
         },
         //获取头像名称
         async getname(){

nova-tourism/pages/my/my-card/index.js

@@ -11,7 +11,7 @@ Page({
         bottomNavHeight: 0,
         contentHeight: 0,
 
-        active: 0,
+        currentTab: 0,
     },
 
     /**
@@ -34,6 +34,13 @@ Page({
             contentHeight
         });
     },
+    switchTab (e) {
+        const index = e.currentTarget.dataset.index;
+        this.setData({
+          currentTab: index
+        });
+        console.log(this.data.currentTab);
+      },
 
     /**
      * 生命周期函数--监听页面初次渲染完成

nova-tourism/pages/my/my-card/index.less

@@ -1,9 +1,57 @@
 /* nova-tourism/pages/my/my-card/index.wxss */
 .all {
     width: 100vw;
-    padding-left: 30rpx;
-    padding-right: 30rpx;
+    padding-left: 42rpx;
     overflow-y: scroll;
+    font-family: 'NotoSans-Bold-5', sans-serif;
+    color: #382E2E;
+        //选中
+        @font-face {
+            font-family: 'NotoSans-Bold-5';
+            src: url('../../styles/font/Noto-sans/NotoSans-Bold-5.ttf'); /* 字体文件路径 */
+        }
+        //为选中
+        @font-face {
+            font-family: 'NotoSans-Regular-2';
+            src: url('../../styles/font/Noto-sans/NotoSans-Regular-2.ttf'); /* 字体文件路径 */
+        }
+        
+        .tab-bar {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 28rpx;
+            font-family: 'NotoSans-Regular-2', sans-serif;
+          }
+          
+          .tab-item {
+            padding: 10rpx 0;
+            text-align: center;
+            position: relative;
+            color: #969696;
+            font-size: 28rpx;
+            font-weight: 400;
+          }
+          
+          .tab-item.active {
+            position: relative;
+            color: #67806A;
+            font-size: 32rpx;
+            font-weight: 500;
+            font-family: 'NotoSans-Bold-5', sans-serif;
+          }
+          
+          .tab-item.active::after {
+            content: "";
+            width: 64rpx;
+            position: absolute;
+            left: calc(50% - 32rpx); 
+            right: calc(50% - 32rpx); 
+            bottom: 0;
+            height: 6rpx;
+            background-color: #67806A;
+            border-radius: 4rpx;
+            
+          }
     .cardbox{
         width: 100%;
         margin-top: 30rpx;
@@ -17,12 +65,13 @@
                 height: 56rpx;
             }
             .tex{
-                font-size: 32rpx;
-                margin-left: 20rpx;
+                font-size: 28rpx;
+                margin-left: 30rpx;
             }
         }
         .card{
-            height: 160rpx;
+            width: 584rpx;
+            height: 148rpx;
             margin-left: 74rpx;
             background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/d6k1uh050505973.png);
             background-position: center; /* 背景图片居中 */
@@ -32,7 +81,8 @@
             align-items: center;
             margin-bottom: 20rpx;
             .car{
-                height: 160rpx;
+                width: 584rpx;
+                height: 148rpx;
                 display: flex;
                 align-items: center;
                 .numbox{
@@ -41,12 +91,12 @@
                     justify-content: center;
                     align-items: flex-end;
                     .num{
-                        font-size: 50rpx;
+                        font-size: 48rpx;
                         color: #F73C2C ;
     
                     }
                     .num-tex{
-                        font-size: 28rpx;
+                        font-size: 24rpx;
                         color: #F73C2C;
                         margin-bottom: 6rpx;
                         margin-left: 4rpx;
@@ -56,25 +106,25 @@
                     height: 80rpx;
                     margin-left: 40rpx;
                     .text1{
-                        font-size: 26rpx;
+                        font-size: 24rpx;
                     }
                     .text2{
-                        font-size: 24rpx;
+                        font-size: 20rpx;
                         margin-top: 6rpx;
                         color: #A9A398;
                     }
                 } 
                 .bottom{
-                    width: 120rpx;
-                    height: 50rpx;
-                    border-radius: 32rpx;
+                    width: 146rpx;
+                    height: 48rpx;
+                    border-radius: 15rpx;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     margin-left: 20rpx;
                     color: white;
                     background-color: #F1A561;
-                    font-size: 26rpx;
+                    font-size: 24rpx;
                 }
 
             }

nova-tourism/pages/my/my-card/index.wxml

@@ -1,16 +1,46 @@
 <!--nova-tourism/pages/my/my-card/index.wxml-->
 <nav type="back" background-color="#ffffff" frontColor="#000000" title="卡卷包" />
 <view class="all" style="height: {{contentHeight}}rpx;">
-    <van-tabs active="{{ active }}" color='#B2CEB9' title-inactive-color='#969696' title-active-color='#B2CEB9'>
-        <van-tab title="优惠卷">
-            <!-- 名宿 -->
-            <view class="cardbox">
-                <!-- 标题 -->
-                <view class="picbox">
-                    <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/gdufd1104330219.png"></image>
-                    <view class="tex">望仙民宿</view>
+    <view class="tab-bar">
+        <view class="tab-item {{currentTab == 0? 'active' : ''}}" bindtap="switchTab" data-index="0">
+            <text>优惠卷</text>
+        </view>
+        <view class="tab-item {{currentTab == 1? 'active' : ''}}" bindtap="switchTab" data-index="1">
+            <text>会员卡</text>
+        </view>
+    </view>
+    <view wx:if="{{currentTab == 0}}">
+        <!-- 名宿 -->
+        <view class="cardbox">
+            <!-- 标题 -->
+            <view class="picbox">
+                <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/gdufd1104330219.png"></image>
+                <view class="tex">望仙民宿</view>
+            </view>
+            <!-- 卡片 -->
+            <view class="card">
+                <view class="car">
+                    <view class="numbox">
+                        <view class="num">100</view>
+                        <view class="num-tex">元</view>
+                    </view>
+                    <view class="textbox">
+                        <view class="text1">民宿住店带金卷</view>
+                        <view class="text2">2024.11.11-2025.11.11</view>
+                    </view>
+                    <view class="bottom">使用</view>
                 </view>
-                <!-- 卡片 -->
+            </view>
+        </view>
+        <!-- 风物 -->
+        <view class="cardbox">
+            <!-- 标题 -->
+            <view class="picbox">
+                <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/m1rt69104425214.png"></image>
+                <view class="tex">云上风物</view>
+            </view>
+            <!-- 卡片 -->
+            <block wx:for="{{6}}">
                 <view class="card">
                     <view class="car">
                         <view class="numbox">
@@ -24,33 +54,12 @@
                         <view class="bottom">使用</view>
                     </view>
                 </view>
-            </view>
-            <!-- 风物 -->
-            <view class="cardbox">
-                <!-- 标题 -->
-                <view class="picbox">
-                    <image class="image" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/m1rt69104425214.png"></image>
-                    <view class="tex">云上风物</view>
-                </view>
-                <!-- 卡片 -->
-                <block wx:for="{{6}}">
-                    <view class="card">
-                        <view class="car">
-                            <view class="numbox">
-                                <view class="num">100</view>
-                                <view class="num-tex">元</view>
-                            </view>
-                            <view class="textbox">
-                                <view class="text1">民宿住店带金卷</view>
-                                <view class="text2">2024.11.11-2025.11.11</view>
-                            </view>
-                            <view class="bottom">使用</view>
-                        </view>
-                    </view>
-                </block>
+            </block>
 
-            </view>
-        </van-tab>
-        <van-tab title="会员卡">内容 2</van-tab>
-    </van-tabs>
+        </view>
+    </view>
+
+    <view wx:if="{{currentTab == 1}}">
+        会员卡
+    </view>
 </view>

nova-tourism/pages/my/my-wallet/index.less

@@ -5,17 +5,16 @@
     padding-right: 20rpx;
     .textbox{
         width: 100%;
-        height: 80rpx;
+        margin-bottom: 46rpx;
         display: flex;
         align-items: center;
-        margin-bottom: 10rpx;
         image{
-            width: 50rpx;
-            height: 50rpx;
+            width: 56rpx;
+            height: 56rpx;
         }
         .text{
-            font-size: 30rpx;
-            margin-left: 20rpx;
+            font-size: 32rpx;
+            margin-left: 18rpx;
         }   
     }
 }

nova-tourism/pages/my/my-wallet/index.wxml

@@ -1,7 +1,7 @@
 <!--nova-tourism/pages/my/my-wallet/index.wxml-->
 <nav type="back" background-color="#ffffff" frontColor="#000000" title="钱包" />
 <view class="all" style="height: {{contentHeight}}rpx;">
-    <view class="textbox">
+    <view class="textbox" style="margin-top: 20rpx;">
         <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241212/qjtn9s104029899.png"></image>
         <view class="text">零钱</view>
     </view>

nova-tourism/pages/my/my-wallet/index.wxss

@@ -1 +1 @@
-.all{width:100vw;padding-left:20rpx;padding-right:20rpx}.all .textbox{width:100%;height:80rpx;display:flex;align-items:center;margin-bottom:10rpx}.all .textbox image{width:50rpx;height:50rpx}.all .textbox .text{font-size:30rpx;margin-left:20rpx}
+.all{width:100vw;padding-left:20rpx;padding-right:20rpx}.all .textbox{width:100%;margin-bottom:46rpx;display:flex;align-items:center}.all .textbox image{width:56rpx;height:56rpx}.all .textbox .text{font-size:32rpx;margin-left:18rpx}