页面暂存

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;
 }

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;
     }
 }

view/peko/activity/act-kitchen/index.html

@@ -17,11 +17,178 @@
         <img src="./images/rule_icon.png" alt="" class="rule_icon">
         <img src="./images/record_icon.png" alt="" class="record_icon">
         <img src="./images/rank_icon.png" alt="" class="rank_icon">
-        <div class="headerH3">選擇鉆石 => 選擇圖標</div>
+        <div class="headerH3">選擇鉆石 > 選擇圖標</div>
     </div>
     <!-- 食材大盒子 -->
     <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>
 </body>