修改样式
This commit is contained in:
Dragon
@@ -6,9 +6,9 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport"
|
||||
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="./style/luckyGiftRule.css">
|
||||
<link rel="stylesheet" href="./style/luckyGiftRule.css?v=1.0">
|
||||
<style>
|
||||
body {
|
||||
background: #F4F4FA;
|
||||
@@ -20,6 +20,11 @@
|
||||
<div class="wrap">
|
||||
<div class="fixed_wrap" style="background: #F4F4FA;">
|
||||
<div class="tip">送出幸运礼物，获得不同图标和特效</div>
|
||||
<div class="rule">
|
||||
<p>您知悉“幸运礼物”是旨在提升平台娱乐性和用户活跃度的互动功能，该活动仅供互动娱乐，用户通过活动获取的礼物仅限在平台内消耗使用;</p>
|
||||
<p>活动期间，用户应当遵守法律法规及平台规则，如发现用户违规 (包括但不限于使用外挂作弊、套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理。您也可通过点击用户资料，右上角进行举报。</p>
|
||||
<p>本活动仅限年龄18岁及以上用户参加，请参与互动玩法的用户务必注意健康娱乐，适度消费;</p>
|
||||
</div>
|
||||
<div class="gift_list_contain">
|
||||
<ul class="gift_list">
|
||||
<!-- <li class="active" id="1">
|
||||
|
||||
@@ -1,113 +1,145 @@
|
||||
.wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .tip {
|
||||
text-align: center;
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
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 {
|
||||
overflow-x: scroll;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .gift_list_contain .gift_list {
|
||||
width: max-content;
|
||||
padding: 0 0.3733333333rem;
|
||||
padding: 0 0.37333rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .gift_list_contain .gift_list::after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .gift_list_contain .gift_list li {
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 2.2933333333rem;
|
||||
width: 2.29333rem;
|
||||
height: 2.88rem;
|
||||
margin-left: 0.32rem;
|
||||
font-size: 0.32rem;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .gift_list_contain .gift_list li img {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-top: 0.32rem;
|
||||
margin-bottom: 0.1333333333rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.wrap .fixed_wrap .gift_list_contain .gift_list li.active {
|
||||
background: url("../images/2.png") no-repeat 0 0/100% 100%;
|
||||
color: #FFB606;
|
||||
width: 2.2933333333rem;
|
||||
height: 3.0666666667rem;
|
||||
width: 2.29333rem;
|
||||
height: 3.06667rem;
|
||||
}
|
||||
|
||||
.wrap .box {
|
||||
background: #fff;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2666666667rem;
|
||||
padding: 0.26667rem;
|
||||
border-radius: 0.2rem;
|
||||
margin: 5.1rem auto 1.0666666667rem;
|
||||
margin: 1rem auto 1.06667rem;
|
||||
}
|
||||
|
||||
.wrap .select_gift_name {
|
||||
position: relative;
|
||||
height: 0.5333333333rem;
|
||||
line-height: 0.5333333333rem;
|
||||
height: 0.53333rem;
|
||||
line-height: 0.53333rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.wrap .select_gift_name::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.3733333333rem;
|
||||
left: -0.37333rem;
|
||||
height: inherit;
|
||||
width: 0.1066666667rem;
|
||||
width: 0.10667rem;
|
||||
background-color: #FFBC51;
|
||||
border-radius: 0.0533333333rem;
|
||||
border-radius: 0.05333rem;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4266666667rem;
|
||||
margin-bottom: 0.42667rem;
|
||||
padding: 0 0.72rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .gift_item_pic {
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
margin-right: 0.3466666667rem;
|
||||
margin-right: 0.34667rem;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .gift_item_name {
|
||||
width: 2.6666666667rem;
|
||||
width: 2.66667rem;
|
||||
text-align: left;
|
||||
font-size: 0.3466666667rem;
|
||||
font-size: 0.34667rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .gift_item_price {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .gift_item_price img {
|
||||
width: 0.3466666667rem;
|
||||
height: 0.2666666667rem;
|
||||
width: 0.34667rem;
|
||||
height: 0.26667rem;
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .gift_item_price span {
|
||||
font-size: 0.32rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrap .gift_item_contain li .ratio {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
@@ -116,5 +148,3 @@
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=luckyGiftRule.css.map */
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
overflow: hidden;
|
||||
.fixed_wrap {
|
||||
position: fixed;
|
||||
// position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
@@ -13,19 +14,31 @@
|
||||
|
||||
.tip {
|
||||
text-align: center;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
color: #666;
|
||||
margin-top: px2rem(48, );
|
||||
margin-bottom: px2rem(34, );
|
||||
margin-top: px2rem(48);
|
||||
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 {
|
||||
overflow-x: scroll;
|
||||
margin-bottom: px2rem(40, );
|
||||
margin-bottom: px2rem(40);
|
||||
|
||||
.gift_list {
|
||||
width: max-content;
|
||||
padding: 0 px2rem(28, );
|
||||
padding: 0 px2rem(28);
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
@@ -39,25 +52,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: px2rem(172, );
|
||||
height: px2rem(216, );
|
||||
margin-left: px2rem(24, );
|
||||
font-size: px2rem(24, );
|
||||
width: px2rem(172);
|
||||
height: px2rem(216);
|
||||
margin-left: px2rem(24);
|
||||
font-size: px2rem(24);
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
img {
|
||||
width: px2rem(120, );
|
||||
height: px2rem(120, );
|
||||
margin-top: px2rem(24, );
|
||||
margin-bottom: px2rem(10, );
|
||||
width: px2rem(120);
|
||||
height: px2rem(120);
|
||||
margin-top: px2rem(24);
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: url('../images/2.png') no-repeat 0 0/100% 100%;
|
||||
color: #FFB606;
|
||||
width: px2rem(172, );
|
||||
height: px2rem(230, );
|
||||
width: px2rem(172);
|
||||
height: px2rem(230);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -68,17 +81,17 @@
|
||||
background: #fff;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(20, );
|
||||
border-radius: px2rem(15, );
|
||||
margin: 5.1rem auto px2rem(80, );
|
||||
padding: px2rem(20);
|
||||
border-radius: px2rem(15);
|
||||
margin: 1rem auto px2rem(80);
|
||||
}
|
||||
|
||||
.select_gift_name {
|
||||
position: relative;
|
||||
height: px2rem(40, );
|
||||
line-height: px2rem(40, );
|
||||
height: px2rem(40);
|
||||
line-height: px2rem(40);
|
||||
font-weight: bold;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
color: #333;
|
||||
background: #fff;
|
||||
margin-left: 0.5rem;
|
||||
@@ -86,11 +99,11 @@
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: px2rem(-28, );
|
||||
left: px2rem(-28);
|
||||
height: inherit;
|
||||
width: px2rem(8, );
|
||||
width: px2rem(8);
|
||||
background-color: #FFBC51;
|
||||
border-radius: px2rem(4, );
|
||||
border-radius: px2rem(4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,20 +111,20 @@
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(32, );
|
||||
padding: 0 px2rem(54, );
|
||||
margin-bottom: px2rem(32);
|
||||
padding: 0 px2rem(54);
|
||||
box-sizing: border-box;
|
||||
|
||||
.gift_item_pic {
|
||||
width: px2rem(96, );
|
||||
height: px2rem(96, );
|
||||
margin-right: px2rem(26, );
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
margin-right: px2rem(26);
|
||||
}
|
||||
|
||||
.gift_item_name {
|
||||
width: px2rem(200, );
|
||||
width: px2rem(200);
|
||||
text-align: left;
|
||||
font-size: px2rem(26, );
|
||||
font-size: px2rem(26);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -119,19 +132,19 @@
|
||||
flex: 1;
|
||||
|
||||
img {
|
||||
width: px2rem(26, );
|
||||
height: px2rem(20, );
|
||||
margin-right: px2rem(6, );
|
||||
width: px2rem(26);
|
||||
height: px2rem(20);
|
||||
margin-right: px2rem(6);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.ratio {
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user