diff --git a/view/peko/activity/act-kitchen/css/index.css b/view/peko/activity/act-kitchen/css/index.css index 64bf171..6568f38 100644 --- a/view/peko/activity/act-kitchen/css/index.css +++ b/view/peko/activity/act-kitchen/css/index.css @@ -24,7 +24,7 @@ html { .header .rule_icon { width: 1.57333rem; - height: 0.53333rem; + height: 0.61333rem; position: absolute; left: 0; top: 1.18667rem; @@ -32,7 +32,7 @@ html { .header .record_icon { width: 1.57333rem; - height: 0.53333rem; + height: 0.61333rem; position: absolute; left: 0; top: 2.04rem; @@ -68,7 +68,7 @@ html { border: 0.16rem solid #FBC577; box-sizing: border-box; background: #8B4621; - margin: 0 auto 0; + margin: -2.1rem auto 0; position: relative; } @@ -80,5 +80,349 @@ html { position: absolute; left: 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; } diff --git a/view/peko/activity/act-kitchen/css/index.scss b/view/peko/activity/act-kitchen/css/index.scss index 2b6319b..2173b58 100644 --- a/view/peko/activity/act-kitchen/css/index.scss +++ b/view/peko/activity/act-kitchen/css/index.scss @@ -27,7 +27,7 @@ html { .rule_icon { width: px2rem(118); - height: px2rem(40); + height: px2rem(46); position: absolute; left: 0; top: px2rem(89); @@ -35,7 +35,7 @@ html { .record_icon { width: px2rem(118); - height: px2rem(40); + height: px2rem(46); position: absolute; left: 0; top: px2rem(153); @@ -72,8 +72,9 @@ html { border: px2rem(12) solid #FBC577; box-sizing: border-box; background: #8B4621; - margin: 0 auto 0; + margin: -2.1rem auto 0; position: relative; + // overflow: hidden; .boxTitle { width: px2rem(398); @@ -83,6 +84,351 @@ html { position: absolute; left: 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; } } \ No newline at end of file diff --git a/view/peko/activity/act-kitchen/images/Bdiamond.png b/view/peko/activity/act-kitchen/images/Bdiamond.png new file mode 100644 index 0000000..9ba9fc4 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/Bdiamond.png differ diff --git a/view/peko/activity/act-kitchen/images/Sdiamond.png b/view/peko/activity/act-kitchen/images/Sdiamond.png new file mode 100644 index 0000000..cbf9b6b Binary files /dev/null and b/view/peko/activity/act-kitchen/images/Sdiamond.png differ diff --git a/view/peko/activity/act-kitchen/images/add.png b/view/peko/activity/act-kitchen/images/add.png new file mode 100644 index 0000000..ddb3aac Binary files /dev/null and b/view/peko/activity/act-kitchen/images/add.png differ diff --git a/view/peko/activity/act-kitchen/images/boxTitle.png b/view/peko/activity/act-kitchen/images/boxTitle.png index a550abf..c8996d8 100644 Binary files a/view/peko/activity/act-kitchen/images/boxTitle.png and b/view/peko/activity/act-kitchen/images/boxTitle.png differ diff --git a/view/peko/activity/act-kitchen/images/box_in.png b/view/peko/activity/act-kitchen/images/box_in.png new file mode 100644 index 0000000..73424ba Binary files /dev/null and b/view/peko/activity/act-kitchen/images/box_in.png differ diff --git a/view/peko/activity/act-kitchen/images/iconsss.png b/view/peko/activity/act-kitchen/images/iconsss.png new file mode 100644 index 0000000..057cf61 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/iconsss.png differ diff --git a/view/peko/activity/act-kitchen/images/iconsssssss.png b/view/peko/activity/act-kitchen/images/iconsssssss.png new file mode 100644 index 0000000..dcd4f62 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/iconsssssss.png differ diff --git a/view/peko/activity/act-kitchen/images/logo.png b/view/peko/activity/act-kitchen/images/logo.png new file mode 100644 index 0000000..70ff4ef Binary files /dev/null and b/view/peko/activity/act-kitchen/images/logo.png differ diff --git a/view/peko/activity/act-kitchen/images/my.png b/view/peko/activity/act-kitchen/images/my.png new file mode 100644 index 0000000..7c404d8 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/my.png differ diff --git a/view/peko/activity/act-kitchen/images/qp.png b/view/peko/activity/act-kitchen/images/qp.png new file mode 100644 index 0000000..af1f2fb Binary files /dev/null and b/view/peko/activity/act-kitchen/images/qp.png differ diff --git a/view/peko/activity/act-kitchen/images/record_icon.png b/view/peko/activity/act-kitchen/images/record_icon.png index 41d2ad3..0380e3d 100644 Binary files a/view/peko/activity/act-kitchen/images/record_icon.png and b/view/peko/activity/act-kitchen/images/record_icon.png differ diff --git a/view/peko/activity/act-kitchen/images/resultOut.png b/view/peko/activity/act-kitchen/images/resultOut.png new file mode 100644 index 0000000..8bc6907 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/resultOut.png differ diff --git a/view/peko/activity/act-kitchen/images/resultText.png b/view/peko/activity/act-kitchen/images/resultText.png new file mode 100644 index 0000000..7e7badc Binary files /dev/null and b/view/peko/activity/act-kitchen/images/resultText.png differ diff --git a/view/peko/activity/act-kitchen/images/rule_icon.png b/view/peko/activity/act-kitchen/images/rule_icon.png index 1b553f9..f4dd08a 100644 Binary files a/view/peko/activity/act-kitchen/images/rule_icon.png and b/view/peko/activity/act-kitchen/images/rule_icon.png differ diff --git a/view/peko/activity/act-kitchen/images/sBox.png b/view/peko/activity/act-kitchen/images/sBox.png new file mode 100644 index 0000000..689221f Binary files /dev/null and b/view/peko/activity/act-kitchen/images/sBox.png differ diff --git a/view/peko/activity/act-kitchen/images/sBoxTextBg.png b/view/peko/activity/act-kitchen/images/sBoxTextBg.png new file mode 100644 index 0000000..977f3c3 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/sBoxTextBg.png differ diff --git a/view/peko/activity/act-kitchen/images/sBox_active.png b/view/peko/activity/act-kitchen/images/sBox_active.png new file mode 100644 index 0000000..fbca8ca Binary files /dev/null and b/view/peko/activity/act-kitchen/images/sBox_active.png differ diff --git a/view/peko/activity/act-kitchen/images/sBoxbei.png b/view/peko/activity/act-kitchen/images/sBoxbei.png new file mode 100644 index 0000000..bae429c Binary files /dev/null and b/view/peko/activity/act-kitchen/images/sBoxbei.png differ diff --git a/view/peko/activity/act-kitchen/images/sqp.png b/view/peko/activity/act-kitchen/images/sqp.png new file mode 100644 index 0000000..2651efe Binary files /dev/null and b/view/peko/activity/act-kitchen/images/sqp.png differ diff --git a/view/peko/activity/act-kitchen/images/tab.png b/view/peko/activity/act-kitchen/images/tab.png new file mode 100644 index 0000000..a650f83 Binary files /dev/null and b/view/peko/activity/act-kitchen/images/tab.png differ diff --git a/view/peko/activity/act-kitchen/images/tab_active.png b/view/peko/activity/act-kitchen/images/tab_active.png new file mode 100644 index 0000000..8124aee Binary files /dev/null and b/view/peko/activity/act-kitchen/images/tab_active.png differ diff --git a/view/peko/activity/act-kitchen/images/wljg.png b/view/peko/activity/act-kitchen/images/wljg.png new file mode 100644 index 0000000..421dd2c Binary files /dev/null and b/view/peko/activity/act-kitchen/images/wljg.png differ diff --git a/view/peko/activity/act-kitchen/index.html b/view/peko/activity/act-kitchen/index.html index 0371a67..04adce5 100644 --- a/view/peko/activity/act-kitchen/index.html +++ b/view/peko/activity/act-kitchen/index.html @@ -17,11 +17,178 @@ -
選擇鉆石 => 選擇圖標
+
選擇鉆石 > 選擇圖標
-
+ +
+ 請選擇:30 秒 +
+ + +
+ + 100 +
+
+ + 1000 +
+
+ + 10000 +
+
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+
洋葱
+
+ 已选择 +

+ 100 +

+
+
x15
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

本活動最終解釋權歸Piko所有
+ 活動獎勵與Google Play/Apple Store無關

+ +
+
+ + + 鉆石余額:0 +
+
+ + 今日獎勵:0 +