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
2024-02-27 21:52:45 +08:00
parent db7d0183db
commit 8dee937bb9
3 changed files with 116 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
view/yinmeng/modules/rule/luckyGiftRule.html
View File

@@ -6,9 +6,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>幸运礼物玩法说明</title> <title>幸运礼物活动规则</title>
<link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./style/luckyGiftRule.css"> <link rel="stylesheet" href="./style/luckyGiftRule.css?v=1.0">
<style> <style>
body { body {
background: #F4F4FA; background: #F4F4FA;
@@ -19,7 +19,12 @@
<body> <body>
<div class="wrap"> <div class="wrap">
<div class="fixed_wrap" style="background: #F4F4FA;"> <div class="fixed_wrap" style="background: #F4F4FA;">
<div class="tip">送出不同的幸运礼物，有机会获得以下高价礼物</div> <div class="tip">送出幸运礼物，获得不同图标和特效</div>
<div class="rule">
<p>您知悉“幸运礼物”是旨在提升平台娱乐性和用户活跃度的互动功能，该活动仅供互动娱乐，用户通过活动获取的礼物仅限在平台内消耗使用;</p>
<p>活动期间，用户应当遵守法律法规及平台规则，如发现用户违规 (包括但不限于使用外挂作弊、套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理。您也可通过点击用户资料，右上角进行举报。</p>
<p>本活动仅限年龄18岁及以上用户参加，请参与互动玩法的用户务必注意健康娱乐，适度消费;</p>
</div>
<div class="gift_list_contain"> <div class="gift_list_contain">
<ul class="gift_list"> <ul class="gift_list">
<!-- <li class="active" id="1"> <!-- <li class="active" id="1">

82
view/yinmeng/modules/rule/style/luckyGiftRule.css
View File

@@ -1,113 +1,145 @@
.wrap {
overflow: hidden;
}
.wrap .fixed_wrap { .wrap .fixed_wrap {
position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} }
.wrap .fixed_wrap .tip { .wrap .fixed_wrap .tip {
text-align: center; text-align: center;
font-size: 0.32rem; font-size: 0.32rem;
color: #666; color: #666;
margin-top: 0.64rem; margin-top: 0.64rem;
margin-bottom: 0.4533333333rem; margin-bottom: 0.45333rem;
} }
.wrap .fixed_wrap .rule {
font-size: 0.32rem;
color: #666;
width: 90%;
margin: 0 auto 0.45333rem;
line-height: 0.45rem;
}
.wrap .fixed_wrap .rule p {
margin-bottom: 0.13333rem;
}
.wrap .fixed_wrap .gift_list_contain { .wrap .fixed_wrap .gift_list_contain {
overflow-x: scroll; overflow-x: scroll;
margin-bottom: 0.5333333333rem; margin-bottom: 0.53333rem;
} }
.wrap .fixed_wrap .gift_list_contain .gift_list { .wrap .fixed_wrap .gift_list_contain .gift_list {
width: max-content; width: max-content;
padding: 0 0.3733333333rem; padding: 0 0.37333rem;
box-sizing: border-box; box-sizing: border-box;
} }
.wrap .fixed_wrap .gift_list_contain .gift_list::after { .wrap .fixed_wrap .gift_list_contain .gift_list::after {
content: ""; content: '';
display: block; display: block;
clear: both; clear: both;
} }
.wrap .fixed_wrap .gift_list_contain .gift_list li { .wrap .fixed_wrap .gift_list_contain .gift_list li {
float: left; float: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 2.2933333333rem; width: 2.29333rem;
height: 2.88rem; height: 2.88rem;
margin-left: 0.32rem; margin-left: 0.32rem;
font-size: 0.32rem; font-size: 0.32rem;
text-align: center; text-align: center;
background: #fff; background: #fff;
} }
.wrap .fixed_wrap .gift_list_contain .gift_list li img { .wrap .fixed_wrap .gift_list_contain .gift_list li img {
width: 1.6rem; width: 1.6rem;
height: 1.6rem; height: 1.6rem;
margin-top: 0.32rem; margin-top: 0.32rem;
margin-bottom: 0.1333333333rem; margin-bottom: 0.13333rem;
} }
.wrap .fixed_wrap .gift_list_contain .gift_list li.active { .wrap .fixed_wrap .gift_list_contain .gift_list li.active {
background: url("../images/2.png") no-repeat 0 0/100% 100%; background: url("../images/2.png") no-repeat 0 0/100% 100%;
color: #FFB606; color: #FFB606;
width: 2.2933333333rem; width: 2.29333rem;
height: 3.0666666667rem; height: 3.06667rem;
} }
.wrap .box { .wrap .box {
background: #fff; background: #fff;
width: 90%; width: 90%;
box-sizing: border-box; box-sizing: border-box;
padding: 0.2666666667rem; padding: 0.26667rem;
border-radius: 0.2rem; border-radius: 0.2rem;
margin: 5.1rem auto 1.0666666667rem; margin: 1rem auto 1.06667rem;
} }
.wrap .select_gift_name { .wrap .select_gift_name {
position: relative; position: relative;
height: 0.5333333333rem; height: 0.53333rem;
line-height: 0.5333333333rem; line-height: 0.53333rem;
font-weight: bold; font-weight: bold;
font-size: 0.3733333333rem; font-size: 0.37333rem;
color: #333; color: #333;
background: #fff; background: #fff;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.wrap .select_gift_name::after { .wrap .select_gift_name::after {
content: ""; content: '';
position: absolute; position: absolute;
left: -0.3733333333rem; left: -0.37333rem;
height: inherit; height: inherit;
width: 0.1066666667rem; width: 0.10667rem;
background-color: #FFBC51; background-color: #FFBC51;
border-radius: 0.0533333333rem; border-radius: 0.05333rem;
} }
.wrap .gift_item_contain li { .wrap .gift_item_contain li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.4266666667rem; margin-bottom: 0.42667rem;
padding: 0 0.72rem; padding: 0 0.72rem;
box-sizing: border-box; box-sizing: border-box;
} }
.wrap .gift_item_contain li .gift_item_pic { .wrap .gift_item_contain li .gift_item_pic {
width: 1.28rem; width: 1.28rem;
height: 1.28rem; height: 1.28rem;
margin-right: 0.3466666667rem; margin-right: 0.34667rem;
} }
.wrap .gift_item_contain li .gift_item_name { .wrap .gift_item_contain li .gift_item_name {
width: 2.6666666667rem; width: 2.66667rem;
text-align: left; text-align: left;
font-size: 0.3466666667rem; font-size: 0.34667rem;
color: #333; color: #333;
} }
.wrap .gift_item_contain li .gift_item_price { .wrap .gift_item_contain li .gift_item_price {
flex: 1; flex: 1;
} }
.wrap .gift_item_contain li .gift_item_price img { .wrap .gift_item_contain li .gift_item_price img {
width: 0.3466666667rem; width: 0.34667rem;
height: 0.2666666667rem; height: 0.26667rem;
margin-right: 0.08rem; margin-right: 0.08rem;
} }
.wrap .gift_item_contain li .gift_item_price span { .wrap .gift_item_contain li .gift_item_price span {
font-size: 0.32rem; font-size: 0.32rem;
color: #333; color: #333;
} }
.wrap .gift_item_contain li .ratio { .wrap .gift_item_contain li .ratio {
font-size: 0.32rem; font-size: 0.32rem;
color: #666; color: #666;
@@ -116,5 +148,3 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
/*# sourceMappingURL=luckyGiftRule.css.map */

91
view/yinmeng/modules/rule/style/luckyGiftRule.scss
View File

@@ -1,10 +1,11 @@
@function px2rem($px, $rem:75) { @function px2rem($px) {
@return $px / $rem+rem; @return $px / 75+rem;
} }
.wrap { .wrap {
overflow: hidden;
.fixed_wrap { .fixed_wrap {
position: fixed; // position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
@@ -13,19 +14,31 @@
.tip { .tip {
text-align: center; text-align: center;
font-size: px2rem(24, ); font-size: px2rem(24);
color: #666; color: #666;
margin-top: px2rem(48, ); margin-top: px2rem(48);
margin-bottom: px2rem(34, ); margin-bottom: px2rem(34);
}
.rule {
font-size: px2rem(24);
color: #666;
// margin-top: px2rem(48);
// margin-bottom: px2rem(34);
width: 90%;
margin: 0 auto px2rem(34);
line-height: 0.45rem;
p{
margin-bottom: px2rem(10);
}
} }
.gift_list_contain { .gift_list_contain {
overflow-x: scroll; overflow-x: scroll;
margin-bottom: px2rem(40, ); margin-bottom: px2rem(40);
.gift_list { .gift_list {
width: max-content; width: max-content;
padding: 0 px2rem(28, ); padding: 0 px2rem(28);
box-sizing: border-box; box-sizing: border-box;
&::after { &::after {
@@ -39,25 +52,25 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: px2rem(172, ); width: px2rem(172);
height: px2rem(216, ); height: px2rem(216);
margin-left: px2rem(24, ); margin-left: px2rem(24);
font-size: px2rem(24, ); font-size: px2rem(24);
text-align: center; text-align: center;
background: #fff; background: #fff;
img { img {
width: px2rem(120, ); width: px2rem(120);
height: px2rem(120, ); height: px2rem(120);
margin-top: px2rem(24, ); margin-top: px2rem(24);
margin-bottom: px2rem(10, ); margin-bottom: px2rem(10);
} }
&.active { &.active {
background: url('../images/2.png') no-repeat 0 0/100% 100%; background: url('../images/2.png') no-repeat 0 0/100% 100%;
color: #FFB606; color: #FFB606;
width: px2rem(172, ); width: px2rem(172);
height: px2rem(230, ); height: px2rem(230);
} }
} }
} }
@@ -68,17 +81,17 @@
background: #fff; background: #fff;
width: 90%; width: 90%;
box-sizing: border-box; box-sizing: border-box;
padding: px2rem(20, ); padding: px2rem(20);
border-radius: px2rem(15, ); border-radius: px2rem(15);
margin: 5.1rem auto px2rem(80, ); margin: 1rem auto px2rem(80);
} }
.select_gift_name { .select_gift_name {
position: relative; position: relative;
height: px2rem(40, ); height: px2rem(40);
line-height: px2rem(40, ); line-height: px2rem(40);
font-weight: bold; font-weight: bold;
font-size: px2rem(28, ); font-size: px2rem(28);
color: #333; color: #333;
background: #fff; background: #fff;
margin-left: 0.5rem; margin-left: 0.5rem;
@@ -86,11 +99,11 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
left: px2rem(-28, ); left: px2rem(-28);
height: inherit; height: inherit;
width: px2rem(8, ); width: px2rem(8);
background-color: #FFBC51; background-color: #FFBC51;
border-radius: px2rem(4, ); border-radius: px2rem(4);
} }
} }
@@ -98,20 +111,20 @@
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: px2rem(32, ); margin-bottom: px2rem(32);
padding: 0 px2rem(54, ); padding: 0 px2rem(54);
box-sizing: border-box; box-sizing: border-box;
.gift_item_pic { .gift_item_pic {
width: px2rem(96, ); width: px2rem(96);
height: px2rem(96, ); height: px2rem(96);
margin-right: px2rem(26, ); margin-right: px2rem(26);
} }
.gift_item_name { .gift_item_name {
width: px2rem(200, ); width: px2rem(200);
text-align: left; text-align: left;
font-size: px2rem(26, ); font-size: px2rem(26);
color: #333; color: #333;
} }
@@ -119,19 +132,19 @@
flex: 1; flex: 1;
img { img {
width: px2rem(26, ); width: px2rem(26);
height: px2rem(20, ); height: px2rem(20);
margin-right: px2rem(6, ); margin-right: px2rem(6);
} }
span { span {
font-size: px2rem(24, ); font-size: px2rem(24);
color: #333; color: #333;
} }
} }
.ratio { .ratio {
font-size: px2rem(24, ); font-size: px2rem(24);
color: #666; color: #666;
} }
} }