解决英文换行问题，新增活动时间显示

src/App.vue

@@ -18,6 +18,8 @@
   color: #2c3e50;
   background: url('@/assets/common/Bg.png') no-repeat;
   background-size: 100% 100%;
+  word-break: keep-all;
+  word-wrap: break-word;
 }
 .grecaptcha-badge {
   display: none !important
@@ -114,5 +116,7 @@ video {
 
   list-style: none;
   text-align: center;
+  word-break: keep-all;
+  word-wrap: break-word;
 }
 </style>

src/views/home/boxBtm.vue

@@ -733,6 +733,8 @@ export default {
     background: #fff;
     background: url('./../../assets/box/Bg_chest.png') no-repeat;
     background-size: 100% 100%;
+    position: relative;
+    top: -20px;
     .content-no {
       position: relative;
       height: 100%;
@@ -832,7 +834,12 @@ export default {
         width: 700px;
         height: 200px;
         margin: 0 auto;
+        position: relative;
         .box-btn-content {
+          position: absolute;
+          top: -10px;
+          left: 50%;
+          transform: translateX(-50%);
           height: 100%;
           position: relative;
           .box-btm-con-btn-bar {

src/views/home/index.vue

@@ -241,6 +241,10 @@
         <div class="sign-in-content" v-if="navIndex == 1">
           <div class="calen-content">
             <div class="calen-content-tips">
+              <div class="event-icon">
+                <img src="@/assets/common/Event .png" alt="">
+              </div>
+              <div class="event-time">
                 <p>
                   <span class="calen-content-tips-title">
                     <span>Event</span>
@@ -256,6 +260,7 @@
                   <span>{{ formatDateGMT(activityData.endTime) }}</span>
                 </p>
               </div>
+            </div>
             <Calen ref="renewCheck" :activityData='activityData' />
             <div class="rewards">
               <p>Consecutive Sign-In Rewards</p>
@@ -2172,20 +2177,38 @@ export default {
         background-size: 100% 100%;
         border-radius: 40px;
         box-sizing: border-box;
+        padding-top: 10px;
         .calen-content-tips {
-          // display: flex;
+          display: flex;
+          margin-bottom: 30px;
+          .event-icon {
+            width: 35px;
+            height: 35px;
+            margin-right: 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .event-time {
             p {
               display: flex;
               text-align: left;
               font-size: 14px;
+              line-height: 1.4;
               .calen-content-tips-title {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-              width: 80px;
+                width: 70px;
                 margin-right: 10px;
                 >span {
                   display: inline-block;
+                  color: #8e5cd4;
+                }
+              }
+              span {
+                color: #9889af;
               }
             }
           }
@@ -2201,7 +2224,7 @@ export default {
             p {
               font-size: 14px;
               text-align: left;
-              margin: 20px 0;
+              margin: 10px 0;
             }
             .rewards-list {
               display: flex;

src/views/home/ruleDialog.vue

@@ -89,8 +89,8 @@ div {
             text-align: center;
             margin-bottom: 20px;
           }
-          >div {
-            width: 570px;
+          div {
+            width: 580px;
             text-align: left;
             margin: 0 auto;
           }