From c86561459e6d7acbab2c759701b0a034c9aac93d Mon Sep 17 00:00:00 2001 From: Dragon <13925835632@139.com> Date: Thu, 13 Apr 2023 21:24:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B7=B1=E6=B5=B7=E9=99=90?= =?UTF-8?q?=E6=97=B6=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/yinmeng/activity/act-ocean/css/mall.css | 120 +++++++----------- view/yinmeng/activity/act-ocean/css/mall.scss | 8 ++ view/yinmeng/activity/act-ocean/mall.html | 4 +- 3 files changed, 57 insertions(+), 75 deletions(-) diff --git a/view/yinmeng/activity/act-ocean/css/mall.css b/view/yinmeng/activity/act-ocean/css/mall.css index b835ecf..ef0fea4 100644 --- a/view/yinmeng/activity/act-ocean/css/mall.css +++ b/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; - 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 */ diff --git a/view/yinmeng/activity/act-ocean/css/mall.scss b/view/yinmeng/activity/act-ocean/css/mall.scss index 0e49db0..12629c6 100644 --- a/view/yinmeng/activity/act-ocean/css/mall.scss +++ b/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); diff --git a/view/yinmeng/activity/act-ocean/mall.html b/view/yinmeng/activity/act-ocean/mall.html index 022fe01..3ddf265 100644 --- a/view/yinmeng/activity/act-ocean/mall.html +++ b/view/yinmeng/activity/act-ocean/mall.html @@ -11,7 +11,9 @@ - +