0210331-合并dev

src/app/bounty-store/bounty-store.page.html

@@ -0,0 +1,59 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>赏金商店</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="top-box">
+    <div class="left-section">
+      <div class="top-text">当前赏金（元）</div>
+      <div class="amount">{{ currentBounty }}</div>
+    </div>
+    <div class="right-section">
+      <div class="top-text">累计支出（元）</div>
+      <div class="amount">{{ totalSpent }}</div>
+    </div>
+  </div>
+
+  <div class="activity-box">
+    <ion-card (click)="openPopup('娱乐')">
+      <ion-card-header>
+        <ion-icon name="game-controller" color="primary"></ion-icon>
+        <ion-card-title>娱乐</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('电影')">
+      <ion-card-header>
+        <ion-icon name="film" color="secondary"></ion-icon>
+        <ion-card-title>电影</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('放纵餐')">
+      <ion-card-header>
+        <ion-icon name="restaurant" color="tertiary"></ion-icon>
+        <ion-card-title>放纵餐</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card (click)="openPopup('其他')">
+      <ion-card-header>
+        <ion-icon name="ellipsis-horizontal" color="dark"></ion-icon>
+        <ion-card-title>其他</ion-card-title>
+      </ion-card-header>
+    </ion-card>
+    
+    <!-- <ion-card (click)="openPopup('其他')">
+      <ion-card-header>
+        <ion-icon name="ellipsis-horizontal" color="dark"></ion-icon>
+        <ion-card-title>其他</ion-card-title>
+      </ion-card-header>
+    </ion-card> -->
+    
+  </div>
+</ion-content>

src/app/bounty-store/bounty-store.page.scss

@@ -0,0 +1,41 @@
+.top-box {
+    background-color: #4CAF50;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  
+    .left-section, .right-section {
+      text-align: center;
+      color: #fff;
+      padding: 15px;
+      border-radius: 15px;
+      margin: 10px;
+      font-size: 20px;
+    }
+    .amount {
+      font-size: 28px;
+      font-weight: bold;
+    }
+  }
+  
+  .activity-box {
+    ion-card {
+      margin: 10px;
+  
+      ion-card-header {
+        ion-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  
+    .other-card ion-card {
+      margin: 10px;
+  
+      ion-card-header {
+        ion-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }