页面暂存

This commit is contained in:
Dragon
2023-09-26 16:30:29 +08:00
parent b9c3d5dd4e
commit ca8e62ccdb
25 changed files with 867 additions and 10 deletions

View File

@@ -24,7 +24,7 @@ html {
.header .rule_icon { .header .rule_icon {
width: 1.57333rem; width: 1.57333rem;
height: 0.53333rem; height: 0.61333rem;
position: absolute; position: absolute;
left: 0; left: 0;
top: 1.18667rem; top: 1.18667rem;
@@ -32,7 +32,7 @@ html {
.header .record_icon { .header .record_icon {
width: 1.57333rem; width: 1.57333rem;
height: 0.53333rem; height: 0.61333rem;
position: absolute; position: absolute;
left: 0; left: 0;
top: 2.04rem; top: 2.04rem;
@@ -68,7 +68,7 @@ html {
border: 0.16rem solid #FBC577; border: 0.16rem solid #FBC577;
box-sizing: border-box; box-sizing: border-box;
background: #8B4621; background: #8B4621;
margin: 0 auto 0; margin: -2.1rem auto 0;
position: relative; position: relative;
} }
@@ -80,5 +80,349 @@ html {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
top: -0.10667rem; top: -1rem;
text-align: center;
line-height: 0.92rem;
color: #FFFFFF;
font-size: 0.34667rem;
}
.box .boxTitle b {
font-weight: bold;
font-size: 0.53333rem;
line-height: 0.93333rem;
}
.box .tab {
width: 8.8rem;
height: 1.26667rem;
margin: 0.36rem auto 0;
display: flex;
justify-content: space-between;
}
.box .tab div {
width: 2.72rem;
height: 1.26667rem;
line-height: 1.13333rem;
text-align: center;
color: #975B25;
font-size: 0.53333rem;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
vertical-align: middle;
}
.box .tab div img {
display: block;
width: 0.53333rem;
height: 0.42667rem;
margin-top: 0.4rem;
}
.box .tab .active {
color: #B33E17;
background: url(../images/tab_active.png) no-repeat;
background-size: 100% 100%;
}
.box .box_in {
width: 9.36rem;
height: 3.48rem;
background: url(../images/box_in.png) no-repeat;
background-size: 100% 100%;
margin: 0.21333rem auto 0.13333rem;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.4rem;
}
.box .box_in .sBox {
width: 2.24rem;
height: 3.42667rem;
position: relative;
}
.box .box_in .sBox .sBox1 {
width: 2.24rem;
height: 2.34667rem;
background: url(../images/sBox.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.7rem;
}
.box .box_in .sBox .sBox1 img {
width: 1.6rem;
height: 1.6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -0.1rem;
}
.box .box_in .sBox .sBox_active {
background: url(../images/sBox_active.png) no-repeat;
background-size: 100% 100%;
}
.box .box_in .sBox .SboxText {
width: 1.81333rem;
height: 0.61333rem;
line-height: 0.61333rem;
background: url(../images/sBoxTextBg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0.1rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
font-weight: bold;
font-size: 0.32rem;
}
.box .box_in .sBox .qp {
width: 2.02667rem;
height: 1.05333rem;
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: -0.02667rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
}
.box .box_in .sBox .qp i {
font-style: normal;
font-size: 0.26667rem;
display: block;
margin-top: 0.2rem;
margin-bottom: 0.06667rem;
width: 100%;
}
.box .box_in .sBox .qp p {
font-size: 0.29333rem;
display: flex;
justify-content: center;
}
.box .box_in .sBox .qp p img {
width: 0.34667rem;
height: 0.29333rem;
}
.box .box_in .sBox .bei {
width: 0.97333rem;
height: 0.45333rem;
line-height: 0.45333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
background: url(../images/sBoxbei.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0.13333rem;
bottom: 1.05rem;
text-indent: -5px;
}
.resultOut {
width: 10rem;
height: 1.4rem;
background: url(../images/resultOut.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: -0.6rem auto 0;
}
.resultOut .wljg {
width: 1.57333rem;
height: 0.44rem;
position: absolute;
top: 0.41333rem;
left: 0.66667rem;
}
.resultOut .sqp {
float: left;
display: block;
width: 0.53333rem;
height: 0.53333rem;
position: absolute;
z-index: 3;
top: 0.37333rem;
}
.resultOut .sqp1 {
left: 2.42667rem;
}
.resultOut .sqp2 {
left: 3.12rem;
}
.resultOut .sqp3 {
left: 3.81333rem;
}
.resultOut .sqp4 {
left: 4.50667rem;
}
.resultOut .sqp5 {
left: 5.2rem;
}
.resultOut .sqp6 {
left: 5.89333rem;
}
.resultOut .sqp7 {
left: 6.58667rem;
}
.resultOut .sqp8 {
left: 7.28rem;
}
.resultOut .sqp9 {
left: 7.97333rem;
}
.resultOut .sqp10 {
left: 8.66667rem;
}
.resultOut .sqp_in {
float: left;
width: 0.42667rem;
height: 0.42667rem;
position: absolute;
top: 0.44rem;
}
.resultOut .sqp_in1 {
left: 2.48rem;
}
.resultOut .sqp_in2 {
left: 3.17333rem;
}
.resultOut .sqp_in3 {
left: 3.86667rem;
}
.resultOut .sqp_in4 {
left: 4.56rem;
}
.resultOut .sqp_in5 {
left: 5.25333rem;
}
.resultOut .sqp_in6 {
left: 5.94667rem;
}
.resultOut .sqp_in7 {
left: 6.64rem;
}
.resultOut .sqp_in8 {
left: 7.33333rem;
}
.resultOut .sqp_in9 {
left: 8.02667rem;
}
.resultOut .sqp_in10 {
left: 8.72rem;
}
.resultText {
width: 9.52rem;
height: 1.14667rem;
position: relative;
margin: -0.2rem auto 0.1rem;
background: url(../images/resultText.png) no-repeat;
background-size: 100% 100%;
}
h3 {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 0.26667rem;
}
h3 b {
margin-top: 0.10667rem;
display: block;
}
.my {
width: 10rem;
height: 2.10667rem;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 0 0.4rem;
}
.my div {
min-width: 4.37333rem;
height: 0.74667rem;
line-height: 0.74667rem;
color: #FFFFFF;
font-size: 0.32rem;
box-sizing: border-box;
background: #BD7F38;
border-radius: 0.74667rem;
margin-top: 0.48rem;
border: 1px solid #FBF6F2;
position: relative;
font-weight: bold;
}
.my div .Sdiamond {
width: 0.42667rem;
height: 0.37333rem;
position: absolute;
left: 0.25333rem;
top: 50%;
transform: translateY(-50%);
}
.my div .add {
width: 0.6rem;
height: 0.6rem;
position: absolute;
right: 0.08rem;
top: 50%;
transform: translateY(-50%);
}
.my .left {
padding: 0 0.81333rem 0 0.75rem;
}
.my .right {
padding: 0 0.54667rem 0 0.75rem;
} }

View File

@@ -27,7 +27,7 @@ html {
.rule_icon { .rule_icon {
width: px2rem(118); width: px2rem(118);
height: px2rem(40); height: px2rem(46);
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(89); top: px2rem(89);
@@ -35,7 +35,7 @@ html {
.record_icon { .record_icon {
width: px2rem(118); width: px2rem(118);
height: px2rem(40); height: px2rem(46);
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(153); top: px2rem(153);
@@ -72,8 +72,9 @@ html {
border: px2rem(12) solid #FBC577; border: px2rem(12) solid #FBC577;
box-sizing: border-box; box-sizing: border-box;
background: #8B4621; background: #8B4621;
margin: 0 auto 0; margin: -2.1rem auto 0;
position: relative; position: relative;
// overflow: hidden;
.boxTitle { .boxTitle {
width: px2rem(398); width: px2rem(398);
@@ -83,6 +84,351 @@ html {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
top: px2rem(-8); top: -1rem;
text-align: center;
line-height: px2rem(69);
color: #FFFFFF;
font-size: px2rem(26);
b {
font-weight: bold;
font-size: px2rem(40);
line-height: px2rem(70);
}
}
.tab {
width: px2rem(660);
height: px2rem(95);
margin: px2rem(27) auto 0;
display: flex;
justify-content: space-between;
div {
width: px2rem(204);
height: px2rem(95);
line-height: px2rem(85);
text-align: center;
color: #975B25;
font-size: px2rem(40);
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
vertical-align: middle;
img {
display: block;
width: px2rem(40);
height: px2rem(32);
margin-top: 0.4rem;
}
}
.active {
color: #B33E17;
background: url(../images/tab_active.png) no-repeat;
background-size: 100% 100%;
}
}
.box_in {
width: px2rem(702);
height: px2rem(261);
background: url(../images/box_in.png) no-repeat;
background-size: 100% 100%;
margin: px2rem(16) auto px2rem(10);
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.4rem;
.sBox {
width: px2rem(168);
height: px2rem(257);
position: relative;
.sBox1 {
width: px2rem(168);
height: px2rem(176);
background: url(../images/sBox.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.7rem;
img {
width: px2rem(120);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -0.1rem;
}
}
.sBox_active {
background: url(../images/sBox_active.png) no-repeat;
background-size: 100% 100%;
}
.SboxText {
width: px2rem(136);
height: px2rem(46);
line-height: px2rem(46);
background: url(../images/sBoxTextBg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0.1rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
font-weight: bold;
font-size: px2rem(24);
}
.qp {
width: px2rem(152);
height: px2rem(79);
background: url(../images/qp.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(-2);
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
i {
font-style: normal;
font-size: px2rem(20);
display: block;
margin-top: px2rem(15);
margin-bottom: px2rem(5);
width: 100%;
}
p {
font-size: px2rem(22);
display: flex;
justify-content: center;
img {
width: px2rem(26);
height: px2rem(22);
}
}
}
.bei {
width: px2rem(73);
height: px2rem(34);
line-height: px2rem(34);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
background: url(../images/sBoxbei.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: px2rem(10);
bottom: 1.05rem;
text-indent: -5px;
}
}
}
}
.resultOut {
width: px2rem(750);
height: px2rem(105);
background: url(../images/resultOut.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: -0.6rem auto 0;
.wljg {
width: px2rem(118);
height: px2rem(33);
position: absolute;
top: px2rem(31);
left: px2rem(50);
}
.sqp {
float: left;
display: block;
width: px2rem(40);
height: px2rem(40);
// margin-top: px2rem(28);
// margin-right: px2rem(12);
position: absolute;
z-index: 3;
top: px2rem(28);
}
.sqp1 {
left: px2rem(182);
}
.sqp2 {
left: px2rem(234);
}
.sqp3 {
left: px2rem(286);
}
.sqp4 {
left: px2rem(338);
}
.sqp5 {
left: px2rem(390);
}
.sqp6 {
left: px2rem(442);
}
.sqp7 {
left: px2rem(494);
}
.sqp8 {
left: px2rem(546);
}
.sqp9 {
left: px2rem(598);
}
.sqp10 {
left: px2rem(650);
}
.sqp_in {
float: left;
width: px2rem(32);
height: px2rem(32);
position: absolute;
top: px2rem(33);
}
.sqp_in1 {
left: px2rem(186);
}
.sqp_in2 {
left: px2rem(238);
}
.sqp_in3 {
left: px2rem(290);
}
.sqp_in4 {
left: px2rem(342);
}
.sqp_in5 {
left: px2rem(394);
}
.sqp_in6 {
left: px2rem(446);
}
.sqp_in7 {
left: px2rem(498);
}
.sqp_in8 {
left: px2rem(550);
}
.sqp_in9 {
left: px2rem(602);
}
.sqp_in10 {
left: px2rem(654);
}
}
.resultText {
width: px2rem(714);
height: px2rem(86);
position: relative;
margin: -0.2rem auto 0.1rem;
background: url(../images/resultText.png) no-repeat;
background-size: 100% 100%;
}
h3 {
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: px2rem(20);
b{
margin-top: px2rem(8);
display: block;
}
}
.my {
width: px2rem(750);
height: px2rem(158);
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 0 px2rem(30);
div {
min-width: px2rem(328);
height: px2rem(56);
line-height: px2rem(56);
color: #FFFFFF;
font-size: px2rem(24);
box-sizing: border-box;
background: #BD7F38;
border-radius: px2rem(56);
margin-top: px2rem(36);
border: 1px solid #FBF6F2;
position: relative;
font-weight: bold;
.Sdiamond {
width: px2rem(32);
height: px2rem(28);
position: absolute;
left: px2rem(19);
top: 50%;
transform: translateY(-50%);
}
.add {
width: px2rem(45);
height: px2rem(45);
position: absolute;
right: px2rem(6);
top: 50%;
transform: translateY(-50%);
}
}
.left {
padding: 0 px2rem(61) 0 0.75rem;
}
.right {
padding: 0 px2rem(41) 0 0.75rem;
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -17,11 +17,178 @@
<img src="./images/rule_icon.png" alt="" class="rule_icon"> <img src="./images/rule_icon.png" alt="" class="rule_icon">
<img src="./images/record_icon.png" alt="" class="record_icon"> <img src="./images/record_icon.png" alt="" class="record_icon">
<img src="./images/rank_icon.png" alt="" class="rank_icon"> <img src="./images/rank_icon.png" alt="" class="rank_icon">
<div class="headerH3">選擇鉆石 => 選擇圖標</div> <div class="headerH3">選擇鉆石 > 選擇圖標</div>
</div> </div>
<!-- 食材大盒子 --> <!-- 食材大盒子 -->
<div class="box"> <div class="box">
<div class="boxTitle"></div> <!-- 标题 -->
<div class="boxTitle">
請選擇:<b>30</b>
</div>
<!-- tab -->
<dib class="tab">
<div class="active">
<img src="./images/Bdiamond.png" alt="">
<b>100</b>
</div>
<div>
<img src="./images/Bdiamond.png" alt="">
<b>1000</b>
</div>
<div>
<img src="./images/Bdiamond.png" alt="">
<b>10000</b>
</div>
</dib>
<div class="box_in1 box_in">
<div class="sBox">
<div class="sBox1 sBox_active">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
</div>
<div class="box_in1 box_in">
<div class="sBox">
<div class="sBox1 sBox_active">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
<div class="sBox">
<div class="sBox1">
<img src="./images/iconsssssss.png" alt="">
</div>
<div class="SboxText">洋葱</div>
<div class="qp">
<i>已选择</i>
<p><img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>100</b>
</p>
</div>
<div class="bei">x15</div>
</div>
</div>
</div>
<!-- 往轮结果 -->
<div class="resultOut">
<img src="./images/wljg.png" alt="" class="wljg">
<img src="./images/sqp.png" alt="" class="sqp sqp1">
<img src="./images/sqp.png" alt="" class="sqp sqp2">
<img src="./images/sqp.png" alt="" class="sqp sqp3">
<img src="./images/sqp.png" alt="" class="sqp sqp4">
<img src="./images/sqp.png" alt="" class="sqp sqp5">
<img src="./images/sqp.png" alt="" class="sqp sqp6">
<img src="./images/sqp.png" alt="" class="sqp sqp7">
<img src="./images/sqp.png" alt="" class="sqp sqp8">
<img src="./images/sqp.png" alt="" class="sqp sqp9">
<img src="./images/sqp.png" alt="" class="sqp sqp10">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in1">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in2">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in3">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in4">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in5">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in6">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in7">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in8">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in9">
<img src="./images/iconsss.png" alt="" class="sqp_in sqp_in10">
</div>
<!-- 大奖展示 -->
<div class="resultText"></div>
<!-- 免责声明 -->
<h3>本活動最終解釋權歸Piko所有<br>
<b>活動獎勵與Google Play/Apple Store無關</b></h3>
<!-- 用户信息 -->
<div class="my">
<div class="left">
<img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<img src="./images/add.png" alt="" class="add">
<b>鉆石余額:0</b>
</div>
<div class="right">
<img src="./images/Sdiamond.png" alt="" class="Sdiamond">
<b>今日獎勵:0</b>
</div>
</div> </div>
</body> </body>