123

css/style.css

@@ -136,7 +136,9 @@ img {
   left: 100%;
   position: fixed;
   z-index: 99;
-  background-color: #f7f7f7;
+  background-color: #fff;
+  /* background-color: #f7f7f7; */
+
   /* padding-top: 48px; */
   overflow-y: scroll;
   box-sizing: border-box;
@@ -150,7 +152,10 @@ img {
   position: fixed;
   z-index: 99;
   top: 0;
-  background-color: #f7f7f7;
+
+  background-color: #fff;
+  /* background-color: #f7f7f7; */
+
   /* padding-top: 48px; */
   overflow-y: scroll;
   box-sizing: border-box;
@@ -189,6 +194,7 @@ img {
 
 .account-header {
   position: relative;
+  background-color: #f7f7f7;
 }
 .account-back {
   width: 4rem;
@@ -225,6 +231,10 @@ img {
     transform: rotate(360deg);
   }
 }
+.bb-list-box {
+  background-color: #f7f7f7;
+  min-height: 88vh;
+}
 
 .bb-list,
 .bb-list .item {
@@ -261,6 +271,8 @@ img {
 }
 .billing-list {
   width: 100%;
+  background-color: #f7f7f7;
+  min-height: 80vh;
 }
 .billing-list .item {
   position: relative;
@@ -326,7 +338,7 @@ img {
 .card-number {
   position: absolute;
   z-index: 2;
-  top: 37%;
+  top: 36.4%;
   font-size: 1.7rem;
   color: rgba(0, 0, 0, 0.7);
   left: 11.2%;
@@ -410,14 +422,14 @@ img {
   position: absolute;
   /* background-color: rgba(0, 0, 0, 0.2); */
   left: 0;
-  top: 7.8rem;
+  top: 21.4vw;
   display: flex;
   /* top: 0; */
   padding: 1.5rem;
   font-size: 1.3rem;
 }
 .filter-item {
-  padding: 0.6rem 1.5rem;
+  padding: 1.6vw 4.4vw;
   background-color: #fff;
   margin-left: 1.5rem;
   border-radius: 3rem;

index.html

@@ -16,9 +16,12 @@
       <a href="#home" class="account-back account-back-bb"></a>
       <img class="bg" src="./img/account.jpg" alt="">
     </div>
-    <div class="bb-list">
+    <div class="bb-list-box">
+      <div class="bb-list">
+      </div>
+      <img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
     </div>
-    <img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
+
   </div>
 
   <div id="list" class="billing list-class">