Jelajahi Sumber

page3优化

LiuSiQi 4 bulan lalu
induk
melakukan
5c0bf56fd1
7 mengubah file dengan 18 tambahan dan 23 penghapusan
  1. 1 2
      src/app/tab1/tab1.page.html
  2. 6 18
      src/app/tab3/tab3.page.html
  3. 11 3
      src/app/tab3/tab3.page.scss
  4. TEMPAT SAMPAH
      src/assets/img/huiyuan2.jpg
  5. TEMPAT SAMPAH
      src/assets/img/p7.png
  6. TEMPAT SAMPAH
      src/assets/img/p8.jpg
  7. TEMPAT SAMPAH
      src/assets/img/zhanghu.png

+ 1 - 2
src/app/tab1/tab1.page.html

@@ -125,8 +125,7 @@
     </ion-grid>
   </ion-card-content>
 </ion-card>
->>>>>>> 9fc80d911babc0cd066a96ce55fcbf27739e418e
-
+>>>>>>
   <!-- 右下角上传按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button (click)="uploadFiles()">

+ 6 - 18
src/app/tab3/tab3.page.html

@@ -1,7 +1,7 @@
 <!-- tab3.page.html -->
 <ion-content class="profile">
   <!-- 卡片一 -->
-  <ion-card>
+  <ion-card style="background-image: url('/assets/img/p8.jpg'); background-size: 380px 180px;padding-top: 24px;padding-bottom: 2px">
     <ion-card-content>
       <div class="profile-info">
         <div class="avatar">
@@ -18,25 +18,13 @@
           <!-- 用户名 -->
           <div style="font-size: x-large">用户名:{{currentUser?.get('username')}}</div>
           <!-- 联系方式 -->
-          <div>联系方式:{{currentUser?.get('mobile')}}</div>
+          <div  style="margin-bottom: 17px;margin-top: 6px">联系方式:{{currentUser?.get('mobile')}}</div>
           <!-- 用户ID -->
           <!-- <div>用户ID:{{currentUser?.id}}</div> -->
 
-          <!-- <div class="button-container">
-            <ion-button color="primary" size="small" style="width: 120px" (click)="becomeGoldMember()">
-              <ion-icon name="trophy"></ion-icon>
-              黄金会员>
-            </ion-button>
-            <ion-button color="primary" size="small" style="width: 150px" (click)="openDigitalEstateAccount()">
-              开通数字遗产账户>
-            </ion-button>
-          </div> -->
-
           <!-- 新添加的按钮 -->
-          <div class="custom-buttons orange">
-            <!-- <div class="left"><span class="title"> 黄金会员</span></div> -->
-            <div class="right" (click)="openDigitalEstateAccount()"><span class="title">开通数字遗产账户></span></div>
-          </div>
+          <div (click)="openDigitalEstateAccount()" style="background-image: url('/assets/img/zhanghu.png'); background-size: 150px; background-position: center; background-repeat: no-repeat; width: 150px; height: 50px; margin: -10px;">
+        </div>
         </div>
       </div>
     </ion-card-content>
@@ -44,7 +32,7 @@
 
   <!-- 卡片三 -->
   <ion-card style="width: 90%; margin: -30px auto;">
-    <img src="/assets/img/huiyuan.png" alt="Card 3">
+    <img src="/assets/img/huiyuan2.jpg" alt="Card 3">
   </ion-card>
 
 
@@ -53,7 +41,7 @@
     <div class="card orange">
       <div class="left">
         <div class="top"><ion-icon name="card-outline"></ion-icon></div>
-        <div class="bottom"><span class="title">数字遗产信息</span></div>
+        <div class="bottom"><span class="title">数字遗产</span></div>
       </div>
       <div class="right">
         <div class="top"><span class="title">2个</span></div>

+ 11 - 3
src/app/tab3/tab3.page.scss

@@ -105,7 +105,7 @@
         ion-icon{
           color:#D47B63;
         }
-        background: linear-gradient(57deg,#D47B63 0%,#E3A83E 100%); 
+        background: linear-gradient(57deg,#e7927b 0%,#ecb959 100%); 
       }
       .blue{
         ion-icon{
@@ -117,13 +117,13 @@
         ion-icon{
           color:#B726E6;
         }
-        background: linear-gradient(90deg,#B726E6 0%,#EE82EE 100%); 
+        background: linear-gradient(90deg,#c96ee7 0%,#fd9be8 100%); 
       }
       .red{
         ion-icon{
           color:#D48FAB;
         }
-        background: linear-gradient(172deg,#D48FAB 0%,#783148 100%); 
+        background: linear-gradient(172deg,#e7a5bf 0%,#dd5d86 100%); 
       }
     }
 
@@ -197,6 +197,14 @@
         border-radius: 0 0 15px 15px;
         margin-top: 0.2%;
       }
+
+      .custom-background {
+        background-image: url('/assets/img/huiyuan.png');
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        /* 可根据需要添加其他样式 */
+    }
   
     }
     

TEMPAT SAMPAH
src/assets/img/huiyuan2.jpg


TEMPAT SAMPAH
src/assets/img/p7.png


TEMPAT SAMPAH
src/assets/img/p8.jpg


TEMPAT SAMPAH
src/assets/img/zhanghu.png