Merge branch 'feature/newDraw' into dev

components/Lottery/Timing/Rewards.vue

 <template>
-  <div
-    class="main"
-    :style="{
-      height: this.$route.path === '/mini/index' ? '65.5vh' : lotteryInfo.showType === 7 ? '46.5vh' : '37.5vh'
-    }"
-  >
-    <div class="intro">
-      <div class="intro__title">活动介绍</div>
-      <div class="intro__sub">本场活动奖品:</div>
-      <div class="intro__rewards">
-        <div v-for="item in lotteryInfo.prizeConfigs" :key="item.id" class="intro__rewards-item">
-          <img v-if="item.icon" :src="item.icon" alt="" />
-          <img v-else src="./img/gift.png" alt="" />
-          <div>{{ item.name }}</div>
-        </div>
+  <div class="main">
+    <div
+      :style="{
+        height: this.$route.path === '/mini/index' ? '65.5vh' : lotteryInfo.showType === 7 ? '46.5vh' : '37.5vh'
+      }"
+    >
+      <div class="intro">
+        <div class="intro__title">活动介绍</div>
+        <div class="intro__detail">{{ lotteryInfo.intro }}</div>
       </div>
-    </div>
-    <div class="rule">
-      <div class="intro__title">活动规则</div>
-      <div class="rule__detail">
-        <div>1.每位用户每场有1次抽奖机会</div>
-        <div>2.活动时间到达后自动开奖，逾期未参与兑奖概不负责</div>
-        <div>3.违反平台用户规则的用户默认放弃抽奖机会</div>
-        <div>4.通过抽奖活的的礼物不可兑换成现金</div>
-        <div>5.本活动最终解释权归平台所有</div>
+      <div class="rule">
+        <div class="rule__sub">本场活动奖品:</div>
+        <div class="intro__rewards">
+          <div v-for="item in lotteryInfo.prizeConfigs" :key="item.id" class="intro__rewards-item">
+            <img v-if="item.icon" :src="item.icon" alt="" />
+            <img v-else src="./img/gift.png" alt="" />
+            <div>{{ item.name }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -52,15 +46,19 @@ export default {
 </script>
 <style lang="less" scoped>
 .main {
+  width: 100%;
+  height: 100%;
+  padding: 0 13px;
+  overflow-x: scroll;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   .intro {
     // margin-bottom: 24px;
-    height: 40%;
+    // height: 30%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    margin-bottom: 30px;
     &__title {
       font-size: 16px;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -69,22 +67,38 @@ export default {
       line-height: 22.5px;
       text-align: center;
     }
-    &__sub {
+    // &__sub {
+    //   font-size: 14px;
+    //   font-family: PingFangSC-Regular, PingFang SC;
+    //   font-weight: 400;
+    //   color: #fff6da;
+    //   // line-height: 20px;
+    //   // margin-top: 4%;
+    //   margin-left: 16px;
+    // }
+    &__detail {
+      width: 335px;
       font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #fff6da;
       line-height: 20px;
-      // margin-top: 4%;
+      // margin-top: 15px;
       margin-left: 16px;
+      margin-top: 16px;
+      white-space: pre-wrap;
+      word-wrap: break-word;
     }
     &__rewards {
       width: 100%;
       display: flex;
       align-items: center;
-      justify-content: space-around;
+      justify-content: flex-start;
+      flex-wrap: wrap;
       // margin-top: 15px;
       &-item {
+        width: 33%;
+        display: inline-block;
         font-size: 13px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
@@ -94,13 +108,23 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        margin-bottom: 12px;
         img {
           width: 48px;
           height: 48px;
+          border-radius: 2px;
         }
         div {
+          width: 100%;
           margin-top: 4px;
           text-align: center;
+          height: 38.5px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          white-space: pre-wrap;
+          word-wrap: break-word;
         }
       }
     }
@@ -109,7 +133,22 @@ export default {
     height: 44%;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    &__sub {
+      // font-size: 16px;
+      // font-family: PingFangSC-Medium, PingFang SC;
+      // font-weight: 500;
+      // color: #fff6da;
+      // line-height: 22.5px;
+      // text-align: center;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #fff6da;
+      line-height: 20px;
+      // margin-top: 4%;
+      margin-left: 16px;
+      margin-bottom: 15px;
+    }
     &__detail {
       font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;

components/Lottery/Timing/RulePopup.vue

@@ -67,10 +67,11 @@ export default {
   height: calc(100% - 46px);
   &__main {
     width: 100%;
+    height: 100%;
     border-radius: 6px;
-    padding: 13px;
+    padding-bottom: 13px;
+    padding-top: 38px;
     position: relative;
-    padding-top: 44px;
     .main-link {
       width: 24px;
       height: 74px;