页面样式微调(线上未上线最终版)

src/App.vue

@@ -72,6 +72,7 @@ export default {
 
     // 初始化页面信息
     async init() {
+      return;
       // 微信内 取code
       const _this = this;
       document.addEventListener(

src/config.js

@@ -8,6 +8,7 @@ const CONFIG = {
     },
     startTime: "2021-6-30", // 活动开始时间
     nowMoney: 1810, // 当前进度
+    kfUrl: "https://kf.jhfly.cn/chatIndex?kefu_id=kefu2&refer=", // 联系客服
 }
 
 

src/views/Home/HomeLuckDraw/HomeLuckDraw.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home_luck_draw">
-    <div class="title">幸运大转盘 100%中奖</div>
+    <div class="title">幸运大转盘 <span>100%</span> 中奖</div>
 
     <!-- tab切换 -->
     <ul class="active_tab clear">
@@ -11,9 +11,9 @@
     <div class="time_box">
       <div class="top">
         超级大奖额度达到 <br />
-        10000 开启活动，
+        10000元 开启活动，
       </div>
-      <div class="time">当前进度: {{ $CONFIG.nowMoney }}</div>
+      <div class="time">当前进度: {{ $CONFIG.nowMoney }}元</div>
     </div>
 
     <!-- 十二宫格 -->
@@ -271,9 +271,15 @@ export default {
   margin: 20 / @rem auto;
 
   .title {
-    font-size: 40 / @rem;
+    font-size: 60 / @rem;
     font-weight: bold;
     color: #fff;
+    span {
+      font-size: 90 / @rem;
+      position: relative;
+      top: 8 / @rem;
+      color: #fbff00;
+    }
   }
 
   .active_tab {
@@ -284,7 +290,8 @@ export default {
       padding: 0 30 / @rem;
       line-height: 60 / @rem;
       float: left;
-      background-color: #ffc27a;
+      background-color: #fff;
+      color: #ff4a4c;
       cursor: pointer;
 
       &:nth-child(1) {
@@ -296,8 +303,9 @@ export default {
       }
 
       &.active {
-        background-image: linear-gradient(160deg, #fedbb6 0%, #fdc68a 75%);
-        color: #f44e4e;
+        // background-image: linear-gradient(160deg, #fedbb6 0%, #fdc68a 75%);
+        background: #ff4a4c;
+        color: #fff;
         font-weight: bold;
       }
     }
@@ -340,7 +348,12 @@ export default {
     margin: 10 / @rem auto;
 
     .title {
-      font-size: 20 / @rem;
+      font-size: 30 / @rem;
+
+      span {
+        font-size: 45 / @rem;
+        top: 4 / @rem;
+      }
     }
 
     .active_tab {

src/views/Home/HomeTips/HomeTips.vue

@@ -1,14 +1,44 @@
 <template>
   <ul class="home_tips">
-    <li>1、活动1、活动2开启时间：超级大奖奖池达到10000的时候活动开启</li>
-    <li>2、每次参与“活动1”消耗1次抽奖机会，每次参与“活动2”消耗2次抽奖机会；</li>
     <li>
-      3、充值“100鸿币”送1次抽奖机会（仅限首次）；充值“500鸿币”送2次抽奖机会（仅限首次）；一次性充值“1000鸿币”以上，每“1000鸿币”送3次抽奖机会；
+      1、<span>活动1/活动2</span> 开启时间：<span
+        >超级大奖奖池达到10000元的时候活动开启</span
+      >
+    </li>
+    <li>
+      2、每次参与<span>“活动1”</span>消耗
+      <span class="line">1次</span>
+      抽奖机会，每次参与
+      <span>“活动2”</span>
+      消耗
+      <span class="line">2次</span>
+      抽奖机会；
+    </li>
+    <li>
+      3、充值
+      <span>“100鸿币”</span>
+      送
+      <span>1次</span>
+      抽奖机会（仅限首次）；<br />
+      充值
+      <span>“500鸿币”</span>
+      送
+      <span>2次</span>
+      抽奖机会（仅限首次）；<br />
+      一次性充值
+      <span>“1000鸿币”</span>
+      以上，每“1000鸿币”送
+      <span>3次</span>
+      抽奖机会；
     </li>
     <li>4、“红包”大于等于100元可提现，提现需联系客服；</li>
     <li>5、兑换奖品“话费”需联系客服处理；</li>
     <li>6、所有玩家充值的1%会进入“超级大奖”奖池；</li>
-    <li>*最终解释权归官方所有，有任何疑问可以联系客服；</li>
+    <li>
+      *最终解释权归官方所有，有任何疑问可以
+      <a target="_blank" :href="$CONFIG.kfUrl">联系客服</a>
+      ；
+    </li>
   </ul>
 </template>
 
@@ -34,6 +64,16 @@ export default {
   margin: 40 / @rem auto;
   text-align: left;
   color: #fff;
+  span {
+    font-weight: bold;
+  }
+  .line {
+    border-bottom: 1px solid #fff;
+  }
+  a {
+    color: #0066cc;
+    border-bottom: 2px solid #0066cc;
+  }
 }
 
 /**横屏 */