merge

public/css/main.css

@@ -36,8 +36,20 @@ img,video{ width: 100%; display: block;}
   width: 10.26rem; height: 5.6rem;background: rgba(89, 89, 89, 0.6); position: absolute; top:0; left: 0; text-align: center;
 }
 .time-out-img{
-  width: 5.12rem !important;
-  display: inline-block !important;
+  width: 100%!important;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  display: block !important;
+}
+.time-out-img > a{
+  display: flex;
+  justify-content: center;
+}
+.time-out-img > a > img{
+  width: 100% !important;
+  width: 2.10rem !important;
+  /* display: inline-block !important; */
 }
 .cit1{ width: 9.07rem; margin: 0 auto 0.7rem; padding-top: 0.85rem;}
 .cit2{ width: 2.06rem; margin: 0 auto 0.54rem;}

public/css/mobile.css

@@ -38,6 +38,9 @@ img{ width: 100%; display: block;}
     width: 5.12rem !important;
     display: inline-block !important;
 }
+.time-out-img a{
+    display: inline-block !important;
+}
 /* .time-out-img>img{
     width: 0.3rem;
 } */

public/desktop.html

@@ -162,7 +162,7 @@
               <img class="title-img" src="./images/time-title.png" alt="" />
             </div>
             <div class="time-out-img">
-              <img src="./images/time-out.png" alt="" />
+              <a href="https://twitter.com/CEBG_GAME"  > <img src="./images/f_icon2-1.png" alt="" /></a> 
             </div>
           </div>
         </div>

public/mobile.html

@@ -180,7 +180,7 @@
               <img class="title-img" src="./images/time-title.png" alt="" />
             </div>
             <div class="time-out-img">
-              <img src="./images/time-out.png" alt="" />
+              <a href="https://twitter.com/CEBG_GAME"> <img src="./images/f_icon2.png" alt="" /></a> 
             </div>
           </div>
         </div>

src/views/mobile/RankingList.vue

@@ -87,7 +87,8 @@
             </div>
           </div>
           <div class="time-out">
-            <img src="../../assets/mobile/time-out.png" alt="" />
+            <div class="time-title-img"><img src="../../assets/mobile/time-title.png" alt="" /></div>
+           <div class="time-tweitter"> <img src="../../assets/mobile/twitter.png" alt="" /></div>
           </div>
         </div>
         <div class="points-list">
@@ -486,16 +487,30 @@ export default {
 .time-out {
   background: rgba(58, 56, 56, 0.8);
   position: absolute;
-  height: 17.8vh;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
   text-align: center;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  // justify-content: center;
   align-items: center;
-  img {
-    width: 45%;
+  .time-title-img{
+    margin-top: 1.1vh;
+    width: 80%; 
+    img {
+    width: 100%;
   }
+  }
+  .time-tweitter{
+    width: 50%; 
+    height: 6vh;
+    img {
+    width: 30%;
+  }
+  }
+ 
 }
 .time-text {
   text-align: center;
@@ -683,10 +698,21 @@ export default {
   left: 0;
   text-align: center;
   display: flex;
-  justify-content: center;
+  // justify-content: center;
   align-items: center;
-  img {
-    width: 45%;
+  .time-title-img{
+    margin-top: 0px;
+    width: 80%; 
+    img {
+    width: 100%;
+  }
+  }
+  .time-tweitter{
+    width: 41%; 
+    // height: 6vw;
+    img {
+    width: 30%;
+  }
   }
 }
   .container {