下载账单页面

2025-09-24 17:31:16 +08:00
parent 4183260d6b
commit dd1136d1e6
9 changed files with 314 additions and 20 deletions
--- a/src/user_pages/downloadBill/index.scss
+++ b/src/user_pages/downloadBill/index.scss
@@ -0,0 +1,134 @@
+@use "../../scss/common.scss" as *;
+
+// 个人页面样式
+.download_bill_page {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .hint_content {
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    margin: 40px 0;
+    text-align: center;
+    .button_text {
+      color: #007aff;
+    }
+  }
+
+  .form_container {
+    padding: 20px;
+    .form_item {
+      height: 50px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      color: #000;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      display: flex;
+      gap: 20px;
+      justify-content: space-between;
+      align-items: center;
+
+      .title_text {
+        font-weight: 600;
+        font-style: Semibold;
+        font-size: 14px;
+      }
+
+      .value_content {
+        display: flex;
+        flex: 1;
+        align-items: center;
+
+        &.arrow {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          &::before,
+          &::after {
+            content: "";
+            display: block;
+            width: 2px;
+            height: 8px;
+            border-radius: 2px;
+            background: #000;
+            transform: translateY(-3.5px) rotate(-45deg);
+            position: absolute;
+            right: 0;
+          }
+
+          &::after {
+            transform: translateY(3px) rotate(45deg);
+          }
+        }
+
+        .option_button {
+          font-weight: 400;
+          font-style: Regular;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0px;
+          background-color: #0000000d;
+          border-radius: 20px;
+          padding: 4px 8px;
+
+          & + .option_button {
+            margin-left: 12px;
+          }
+
+          &.active {
+            background-color: #000;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .time_box {
+      line-height: 52px;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      color: #3c3c4399;
+    }
+  }
+
+  .button_container {
+    position: fixed;
+    bottom: 40px;
+    left: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .button_text {
+      color: #007aff;
+    }
+    .download_button {
+      width: 345px;
+      height: 54px;
+      width: calc(100vw - 24px);
+      margin-top: 12px;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      background: #000;
+      box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(16px);
+      font-feature-settings: "liga" off, "clig" off;
+      font-family: "PingFang SC";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
+  }
+}