yinmeng/yinmeng-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增深海限时时间

Browse Source
This commit is contained in:
Dragon
2023-04-13 21:24:34 +08:00
parent a002ee097a
commit c86561459e
3 changed files with 57 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
view/yinmeng/activity/act-ocean/css/mall.css
View File

@@ -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;
height: 0.82667rem;
width: 1.7866666667rem;
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;
height: 1.33333rem;
margin: 0 0.26667rem 0 0.53333rem;
width: 1.3333333333rem;
height: 1.3333333333rem;
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;
height: 1.01333rem;
width: 6.8266666667rem;
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;
line-height: 1.01333rem;
height: 1.0133333333rem;
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;
line-height: 1.01333rem;
border-radius: 0.5066666667rem;
line-height: 1.0133333333rem;
text-align: center;
color: white;
margin-top: 1.2rem;
}
/*# sourceMappingURL=mall.css.map */

8
view/yinmeng/activity/act-ocean/css/mall.scss
View File

@@ -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);

4
view/yinmeng/activity/act-ocean/mall.html
View File

@@ -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>