新增深海限时时间

view/yinmeng/activity/act-ocean/css/mall.css

@@ -1,50 +1,52 @@
 @font-face {
-  font-family: 'pingfang-medium';
+  font-family: "pingfang-medium";
   src: url("../../../common/fonts/PingFang-Medium.ttf");
   src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
 }
-
 @font-face {
-  font-family: 'pingfang-bold';
+  font-family: "pingfang-bold";
   src: url("../../../common/fonts/PingFang Bold.ttf");
   src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
 }
-
 body {
-  font-family: 'pingfang-medium';
+  font-family: "pingfang-medium";
   background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
 }
 
 .banner {
   width: 10rem;
-  height: 6.66667rem;
+  height: 6.6666666667rem;
   background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
+  overflow: hidden;
+}
+.banner .newDate {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.2666666667rem;
+  margin-top: 2rem;
 }
 
 .buy-area {
-  width: 9.46667rem;
+  width: 9.4666666667rem;
   height: 14.4rem;
   margin: auto;
   box-sizing: border-box;
-  padding: 1.06667rem 0.56rem 0 0.8rem;
+  padding: 1.0666666667rem 0.56rem 0 0.8rem;
   background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
   margin-top: -0.88rem;
 }
-
 .buy-area.bg-long {
   background-image: url("../images/mall/buy-area-long.png");
 }
-
 .buy-area li {
   display: flex;
   align-items: center;
-  margin-bottom: 0.53333rem;
+  margin-bottom: 0.5333333333rem;
 }
-
 .buy-area li.li-bg-long {
   margin-bottom: 1.2rem;
 }
-
 .buy-area li .headwear-pic {
   width: 2.4rem;
   height: 2.4rem;
@@ -55,12 +57,10 @@ body {
   justify-content: center;
   align-items: center;
 }
-
 .buy-area li .headwear-pic img {
   width: 2rem;
   height: 2rem;
 }
-
 .buy-area li .headwear-info {
   flex: 1;
   height: 1.6rem;
@@ -68,27 +68,22 @@ body {
   flex-direction: column;
   justify-content: space-between;
   color: white;
-  font-size: 0.34667rem;
+  font-size: 0.3466666667rem;
 }
-
 .buy-area li .headwear-info .headwear-name {
   font-size: 0.48rem;
   font-weight: bold;
 }
-
 .buy-area li .headwear-info .headwear-price {
   margin-bottom: -0.16rem;
 }
-
 .buy-area li .headwear-info .headwear-award {
   color: #FEEF60;
 }
-
 .buy-area li .buy-btn {
-  width: 1.78667rem;
+  width: 1.7866666667rem;
-  height: 0.82667rem;
+  height: 0.8266666667rem;
 }
-
 .buy-area li .buy-btn img {
   width: 100%;
 }
@@ -99,48 +94,41 @@ body {
   left: 0;
   z-index: 99;
   width: 100%;
-  height: 1.62667rem;
+  height: 1.6266666667rem;
   background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
   display: flex;
   align-items: center;
 }
-
 .bottom.mb-long {
-  margin-bottom: 0.90667rem;
+  margin-bottom: 0.9066666667rem;
 }
-
 .bottom .avatar {
-  width: 1.33333rem;
+  width: 1.3333333333rem;
-  height: 1.33333rem;
+  height: 1.3333333333rem;
-  margin: 0 0.26667rem 0 0.53333rem;
+  margin: 0 0.2666666667rem 0 0.5333333333rem;
 }
-
 .bottom .avatar img {
   width: 100%;
   border-radius: 50%;
 }
-
 .bottom .info-wrap {
   flex: 1;
-  height: 1.17333rem;
+  height: 1.1733333333rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  font-size: 0.26667rem;
+  font-size: 0.2666666667rem;
   color: white;
 }
-
 .bottom .info-wrap .nick {
-  font-size: 0.37333rem;
+  font-size: 0.3733333333rem;
   font-weight: bold;
 }
-
 .bottom .recharge {
   width: 2rem;
-  height: 0.85333rem;
+  height: 0.8533333333rem;
   margin-right: 0.8rem;
 }
-
 .bottom .recharge img {
   width: 100%;
 }
@@ -152,7 +140,7 @@ body {
   left: 0;
   z-index: 99;
   width: 100%;
-  height: 0.93333rem;
+  height: 0.9333333333rem;
   background-color: #60acfb;
 }
 
@@ -166,7 +154,6 @@ body {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .shade-mask-buy .shade-content-buy {
   position: absolute;
   top: 50%;
@@ -177,83 +164,71 @@ body {
   border-radius: 0.32rem;
   background-color: white;
 }
-
 .shade-mask-buy .shade-content-buy .title {
-  font-family: 'pingfang-bold';
+  font-family: "pingfang-bold";
   font-size: 0.48rem;
   font-weight: bold;
   color: #333333;
   text-align: center;
-  margin: 0.48rem 0 0.58667rem;
+  margin: 0.48rem 0 0.5866666667rem;
 }
-
 .shade-mask-buy .shade-content-buy .title span {
   font-weight: bold;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num, .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
   font-size: 0.4rem;
   color: #333333;
-  margin-bottom: 0.85333rem;
+  margin-bottom: 0.8533333333rem;
   margin-left: 0.64rem;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num p, .shade-mask-buy .shade-content-buy .buy-day p, .shade-mask-buy .shade-content-buy .buy-price p {
   font-weight: 550;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num {
   display: flex;
   align-items: center;
   height: 0.8rem;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num .decrease, .shade-mask-buy .shade-content-buy .buy-num .increase {
   width: 0.8rem;
   height: 0.8rem;
-  margin-right: 0.26667rem;
+  margin-right: 0.2666666667rem;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num .decrease img, .shade-mask-buy .shade-content-buy .buy-num .increase img {
   width: 100%;
 }
-
 .shade-mask-buy .shade-content-buy .buy-num input {
-  width: 2.13333rem;
+  width: 2.1333333333rem;
   height: 0.8rem;
   border-radius: 0.4rem;
   background-color: #EAE5FC;
   color: #7154EE;
   text-align: center;
-  margin-right: 0.26667rem;
+  margin-right: 0.2666666667rem;
   outline: none;
   caret-color: #7154EE;
 }
-
 .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
   display: flex;
   align-items: center;
 }
-
 .shade-mask-buy .shade-content-buy .buy-confirm-btn {
   display: flex;
   justify-content: space-between;
-  width: 6.82667rem;
+  width: 6.8266666667rem;
-  height: 1.01333rem;
+  height: 1.0133333333rem;
   margin: 1.2rem auto 0;
 }
-
 .shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel, .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
   width: 3.2rem;
-  height: 1.01333rem;
+  height: 1.0133333333rem;
-  line-height: 1.01333rem;
+  line-height: 1.0133333333rem;
   background-color: #EAE5FC;
-  font-size: 0.37333rem;
+  font-size: 0.3733333333rem;
   color: #7154EE;
   text-align: center;
-  border-radius: 0.50667rem;
+  border-radius: 0.5066666667rem;
 }
-
 .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
   background-image: linear-gradient(#735FFE, #8776FF);
   color: white;
@@ -269,7 +244,6 @@ body {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .shade-mask-no-money .shade-content-no-money {
   position: absolute;
   top: 50%;
@@ -283,33 +257,31 @@ body {
   flex-direction: column;
   align-items: center;
 }
-
 .shade-mask-no-money .shade-content-no-money .no-money-title {
   font-size: 0.48rem;
   font-weight: bold;
   color: #333333;
   margin: 0.48rem 0 1.44rem;
 }
-
 .shade-mask-no-money .shade-content-no-money .no-money-pic {
   width: 1.6rem;
   height: 1.6rem;
-  margin-bottom: 0.66667rem;
+  margin-bottom: 0.6666666667rem;
 }
-
 .shade-mask-no-money .shade-content-no-money .no-money-tip {
   font-size: 0.4rem;
   font-weight: 550;
   color: #333333;
 }
-
 .shade-mask-no-money .shade-content-no-money .no-money-recharge {
   width: 3.2rem;
-  height: 1.01333rem;
+  height: 1.0133333333rem;
   background-image: linear-gradient(#735FFE, #8776FF);
-  border-radius: 0.50667rem;
+  border-radius: 0.5066666667rem;
-  line-height: 1.01333rem;
+  line-height: 1.0133333333rem;
   text-align: center;
   color: white;
   margin-top: 1.2rem;
 }
+
+/*# sourceMappingURL=mall.css.map */

view/yinmeng/activity/act-ocean/css/mall.scss

@@ -27,6 +27,14 @@ body{
     width: px2rem(750);
     height: px2rem(500);
     background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
+    overflow: hidden;
+    .newDate{
+        width: 100%;
+        text-align: center;
+        color: #fff;
+        font-size: px2rem(20, );
+        margin-top: 1.8rem;
+    }
 }
 .buy-area{
     width: px2rem(710);

view/yinmeng/activity/act-ocean/mall.html

@@ -11,7 +11,9 @@
 </head>
 
 <body>
-    <div class="banner"></div>
+    <div class="banner">
+        <div class="newDate">活动时间：2023/4/1/-2023/6/30</div>
+    </div>
     <ul class="buy-area">
         <li>
             <div class="headwear-pic"><img src="" alt=""></div>