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

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,20 +241,25 @@
         <div class="sign-in-content" v-if="navIndex == 1">
           <div class="calen-content">
             <div class="calen-content-tips">
-              <p>
-                <span class="calen-content-tips-title">
-                  <span>Event</span>
-                  <span>start:</span>
-                </span>
-                <span> {{ formatDateGMT(activityData.startTime )}}</span>
-              </p> 
-              <p>
-                <span class="calen-content-tips-title">
-                  <span>Event</span>
-                  <span>end:</span>
-                </span>
-                <span>{{ formatDateGMT(activityData.endTime) }}</span>
-              </p>
+              <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>
+                    <span>start:</span>
+                  </span>
+                  <span> {{ formatDateGMT(activityData.startTime )}}</span>
+                </p> 
+                <p>
+                  <span class="calen-content-tips-title">
+                    <span>Event</span>
+                    <span>end:</span>
+                  </span>
+                  <span>{{ formatDateGMT(activityData.endTime) }}</span>
+                </p>
+              </div>
             </div>
             <Calen ref="renewCheck" :activityData='activityData' />
             <div class="rewards">
@@ -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;
-          p {
-            display: flex;
-            text-align: left;
-            font-size: 14px;
-            .calen-content-tips-title {
+          display: flex;
+          margin-bottom: 30px;
+          .event-icon {
+            width: 35px;
+            height: 35px;
+            margin-right: 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .event-time {
+            p {
               display: flex;
-              align-items: center;
-              justify-content: space-between;
-              width: 80px;
-              margin-right: 10px;
-              >span {
-                display: inline-block;
+              text-align: left;
+              font-size: 14px;
+              line-height: 1.4;
+              .calen-content-tips-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                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;
           }