feat: update

src/components/partner-intro/index.less

@@ -2,26 +2,53 @@
 @import '@/styles/common.less';
 
 .partner-intro {
-  padding-top: 112px;
-  padding-bottom: calc(112px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(112px + env(safe-area-inset-bottom));
+  background: #eae5fb;
+  padding-top: 271px;
+  position: relative;
+  padding-bottom: calc(142px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(142px + env(safe-area-inset-bottom));
 
-  &__banner {
-    background: rgb(229, 225, 248);
-    height: 88px;
-    line-height: 88px;
-    text-align: center;
-    font-size: 28px;
-    position: fixed;
-    top: 98px;
+  &__bg {
+    width: 100%;
+    height: 705px;
+    position: absolute;
+    top: 0;
     left: 0;
-    right: 0;
-    width: 100vw;
+  }
+  &__slogan {
+    top: 66px;
+    left: 44px;
+    position: absolute;
+    font-family: 'Alimama ShuHeiTi';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 44px;
+    line-height: 62px;
+    color: #333333;
+
+    > div {
+      margin-bottom: 12px;
+    }
+
+    &-highlight {
+      display: inline-block;
+      padding-left: 12px;
+      padding-right: 9px;
+      font-size: 64px;
+      line-height: 62px;
+      background: linear-gradient(87.53deg, #683DE3 0.4%, #39227D 84.55%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+    }
   }
 
   &__main {
     padding-left: 24px;
     padding-right: 24px;
+    position: relative;
+    z-index: 1;
   }
 
   &__highlight {
@@ -34,15 +61,17 @@
   }
 
   &__block {
-    margin-bottom: 40px;
+    margin-bottom: 12px;
+    position: relative;
   }
 
   &__swiper {
-    margin-bottom: 48px;
     &-wrapper {
+      margin-bottom: 8px;
       background: #fff;
       border-radius: 24px;
       position: relative;
+      border: 1px solid #6d3df5;
     }
 
     &-bg {
@@ -54,12 +83,11 @@
     }
   }
 
-
   &__swiper-item {
     box-sizing: border-box;
     height: 130px;
     padding: 24px 32px;
-    &-item {
+    &-time {
       font-style: normal;
       font-size: 28px;
       line-height: 40px;
@@ -98,7 +126,7 @@
   &__card {
     background: #fff;
     border-radius: 24px;
-    padding: 24px 32px;
+    padding: 68px 32px 44px;
   }
 
   &__h1 {
@@ -108,10 +136,30 @@
     color: #1d2129;
     margin-bottom: 16px;
     margin-top: 32px;
+    position: relative;
+    z-index: 0;
+
+    &.no-dot {
+      &:after {
+        background: transparent;
+      }
+    }
 
     &:first-child {
       margin-top: 0;
     }
+
+    &:after {
+      content: '';
+      width: 28px;
+      height: 28px;
+      background: #ffd236;
+      border-radius: 50%;
+      position: absolute;
+      left: -6px;
+      top: -3px;
+      z-index: -1;
+    }
   }
 
   &__body {
@@ -130,12 +178,19 @@
   }
 
   &__title {
-    margin-bottom: 24px;
+    margin-left: 48px;
+    margin-right: 48px;
     font-weight: 500;
     font-size: 32px;
-    line-height: 32px;
-
+    line-height: 80px;
+    height: 80px;
+    transform: translateY(50%);
+    background: #ffd236;
+    box-shadow: 0px 12px 0px #ffa35d;
+    border-radius: 60px;
     color: #1d2129;
+    text-align: center;
+    position: relative;
   }
 
   &__recommend {
@@ -143,17 +198,19 @@
     line-height: 36px;
     padding: 0 8px;
     height: 36px;
-    margin-left: 16px;
-    background: rgba(255, 80, 81, 0.12);
+    background: rgb(255, 80, 81);
     border-radius: 4px;
     font-size: 24px;
-    color: #ff5051;
+    color: #fff;
     align-items: center;
+    position: absolute;
     gap: 6px;
+    right: -25px;
+    top: -18px;
   }
 
   &__special {
-    padding: 32px;
+    padding-top: 75px;
     .flex-column();
 
     .partner-intro__body {
@@ -176,6 +233,7 @@
   &__footer {
     position: fixed;
     bottom: 0;
+    z-index: 2;
     width: 100vw;
     background: #ffffff;
     padding: 12px 32px;
@@ -188,17 +246,20 @@
     display: flex;
     flex-direction: row;
     box-sizing: border-box;
+    justify-content: center;
   }
 
   &__download-button {
-    flex: 1 1;
+    //flex: 1 1;
     .button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px; @highlight: 0);
   }
 
   &__share-button {
-    flex: 2 2;
+    //flex: 2 2;
+    flex: 0 0  406px;
+    width: 406px;
     .button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
-    margin-left: 32px;
+    //margin-left: 32px;
   }
 }