feat: ui

src/pages/give-vip/index.less

@@ -1 +1,130 @@
-.give-vip {}
+@import '@/styles/variables.less';
+@import '@/styles/common.less';
+
+.give-vip {
+  padding: 40px 24px 200px 24px;
+  &__hint {
+    font-size: 28px;
+    line-height: 48px;
+    color: @blColorG2;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+  }
+  &__icon {
+    width: 65px;
+    height: 65px;
+  }
+  &__title {
+    margin-top: 24px;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 48px;
+    color: @blColor;
+    text-align: center;
+    flex: 0 1 auto;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+    .highlight {
+      margin-left: -12px;
+      display: inline-block;
+      color: @blHighlightColor;
+    }
+  }
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  &__info {
+    &-block {
+      margin-top: 48px;
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 32px;
+      color: #1d2129;
+      margin-bottom: 24px;
+    }
+    &-card {
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 24px;
+      padding: 32px;
+    }
+    &-body {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 40px;
+      color: #333333;
+      margin-bottom: 32px;
+    }
+    &-img {
+      width: 100%;
+      height: 614px;
+    }
+  }
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 12px 32px;
+    box-shadow: 0px -4px 20px 0px #00000014;
+    box-sizing: border-box;
+    background: #ffffff;
+  }
+
+  &__footer-body {
+    .flex-row();
+    justify-content: center;
+  }
+  &__button {
+    .button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
+    width: 400px;
+  }
+  &__coupon {
+    &-info {
+      position: relative;
+      margin-top: 32px;
+      padding: 24px;
+      box-sizing: border-box;
+      border-radius: 24px;
+
+      .flex-column();
+      justify-content: center;
+    }
+
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+      color: @blHighlightColor;
+      margin-bottom: 8px;
+    }
+    &-intro {
+      font-size: 28px;
+      line-height: 40px;
+      margin-bottom: 12px;
+      color: @blColor;
+      gap: 4px;
+      .flex-row();
+      .highlight {
+        font-weight: 600;
+        font-size: 32px;
+        line-height: 56px;
+        color: @blHighlightColor;
+      }
+    }
+    &-valid {
+      font-size: 28px;
+      line-height: 40px;
+
+      color: @blColorG2;
+    }
+  }
+}

src/pages/give-vip/index.tsx

@@ -1,6 +1,11 @@
-import { Button } from '@taroify/core';
+import { Image, Button } from '@tarojs/components';
 
+import { Fragment, useCallback } from 'react';
+
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import { PageUrl } from '@/constants/app';
 import { logWithPrefix } from '@/utils/common';
+import { switchTab } from '@/utils/route';
 
 import './index.less';
 
@@ -8,5 +13,59 @@ const PREFIX = 'give-vip';
 const log = logWithPrefix(PREFIX);
 
 export default function GiveVip() {
-  return <div className={PREFIX}></div>;
+  const handleNavigate = useCallback(() => {
+    switchTab(PageUrl.Job);
+  }, []);
+  return (
+    <div className={PREFIX}>
+      <Fragment>
+        <div className={`${PREFIX}__title`}>
+          <Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
+          <div>宝子，播络会员领取成功</div>
+        </div>
+        <div className={`${PREFIX}__coupon-info`}>
+          <Image src="https://publiccdn.neighbourhood.com.cn/img/parnet-share-bg.png" className={`${PREFIX}__bg`} />
+          <div className={`${PREFIX}__coupon-title`}>播络日会员</div>
+          <div className={`${PREFIX}__coupon-intro`}>
+            会员有效期内可增加<div className="highlight">10次</div>报单机会
+          </div>
+          <div className={`${PREFIX}__coupon-valid`}>有效期至：2025年/8/26 22:23:56</div>
+        </div>
+      </Fragment>
+      <Fragment>
+        <div className={`${PREFIX}__hint`}>
+          <Image
+            src="https://publiccdn.neighbourhood.com.cn/img/link-invalid.svg"
+            mode="aspectFit"
+            className={`${PREFIX}__icon`}
+          />
+          <div className={`${PREFIX}__hint-title`}>宝子，链接已失效</div>
+        </div>
+        <div className={`${PREFIX}__title`}>
+          请联系分享人<div className="highlight">再次分享</div>
+        </div>
+      </Fragment>
+      <div className={`${PREFIX}__info-block`}>
+        <div className={`${PREFIX}__info-title`}>播络简介</div>
+        <div className={`${PREFIX}__info-card`}>
+          <div className={`${PREFIX}__info-body`}>
+            播络通告整理汇集了本地每日新增带货主播通告，方便大家及时找到高薪工作
+          </div>
+          <Image
+            className={`${PREFIX}__info-img`}
+            src="https://publiccdn.neighbourhood.com.cn/img/partner-share-coupon-img.png"
+            mode="heightFix"
+          />
+        </div>
+      </div>
+      <div className={`${PREFIX}__footer`}>
+        <div className={`${PREFIX}__footer-body`}>
+          <Button className={`${PREFIX}__button`} onClick={handleNavigate}>
+            立即使用
+          </Button>
+        </div>
+        <SafeBottomPadding />
+      </div>
+    </div>
+  );
 }