周年庆预热

src/components/activity/2020-717/index.scss

@@ -30,10 +30,10 @@
     color: #fff;
     font-size: 15px;
     z-index: 100;
+    overflow: auto;
 
     ul {
       white-space: nowrap;
-      overflow: auto;
     }
 
     li {
@@ -57,6 +57,16 @@
   }
 
   .block {
+    &:target {
+      &::before {
+        display: block;
+        content: " ";
+        margin-top: -75px; // Set the Appropriate Height
+        height: 75px; // Set the Appropriate Height
+        visibility: hidden;
+      }
+    }
+
     &-title {
       width: 150px;
       height: 32px;
@@ -291,8 +301,15 @@
           }
 
           &:nth-child(5) {
-            background: url("./images/draw.png") no-repeat;
             background-size: contain;
+
+            &.available {
+              background: url("./images/lottery-button-available.png") no-repeat;
+            }
+
+            &.unavailable {
+              background: url("./images/draw.png") no-repeat !important;
+            }
           }
         }
 
@@ -605,10 +622,31 @@
         opacity: .8;
       }
 
-      .prize-des {
-        padding: 0 8px;
-        font-size: 13px;
-        white-space: pre-wrap;
+      .prize-display {
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+        }
+
+        li {
+          img {
+            width: 167px;
+            height: 80px;
+          }
+        }
+
+        .top-three {
+
+          img {
+            width: 110px;
+            height: 100px;
+          }
+
+          &:nth-child(3) {
+            margin-right: 0;
+          }
+        }
       }
 
       .btn {
@@ -804,4 +842,157 @@
       vertical-align: middle;
     }
   }
+
+  .modal-cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .6);
+    z-index: 200;
+
+    .modal {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 300px;
+      padding: 20px 25px;
+      background: #fff;
+      border-radius: 10px;
+    }
+
+    .close {
+      position: absolute;
+      bottom: -54px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 24px;
+      color: #fff;
+
+    }
+
+    .title {
+      font-size: 16px;
+      color: #525C65;
+      text-align: center;
+      margin-bottom: 6px;
+    }
+
+    .tip {
+      font-size: 13px;
+      color: #ED6A1D;
+    }
+
+    .recipient {
+      input {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+        margin-top: 10px;
+        border: 1px solid #DDD;
+        font-size: 13px;
+
+        &:first-child {
+          margin-top: 15px;
+        }
+
+        &::placeholder {
+          color: #999;
+        }
+      }
+
+      button {
+        @include button;
+        width: 121px;
+        height: 33px;
+        transform: translateX(50%);
+        margin-top: 18px;
+        border-radius: 17px;
+        color: #fff;
+        font-size: 15px;
+        background: #09f;
+
+        &[disabled] {
+          background: rgba(84, 92, 100, .3);
+        }
+
+      }
+    }
+  }
+}
+
+.rule-popup {
+  .title {
+    font-size: 16px;
+    color: #525C65;
+    text-align: center;
+    margin-bottom: 6px;
+  }
+
+  .content {
+    font-size: 14px;
+    color: #525C65;
+    white-space: pre-line;
+    line-height: 21px;
+  }
+}
+
+.prize-records {
+  .modal {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+
+  .content {
+    max-height: 280px;
+    overflow: auto;
+  }
+
+  .rule {
+    font-size: 13px;
+    color: #ED6A1D;
+    white-space: pre-line;
+  }
+
+  .records {
+    li {
+      .record {
+        display: flex;
+        justify-content: space-between;
+        width: 270px;
+        height: 30px;
+        margin-top: 5px;
+        line-height: 30px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(209, 219, 228, .4);
+      }
+
+      .name {
+        width: 140px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #271BD3;
+        font-size: 12px;
+      }
+
+      .time {
+        color: #545C64;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .contact {
+    width: 270px;
+    height: 15px;
+    line-height: 15px;
+    background: rgba(240, 240, 240, 1);
+    color: #333;
+    font-size: 12px;
+    text-align: center;
+  }
 }
\ No newline at end of file