feat: partner enrty

src/components/partner-entry/index.less

@@ -0,0 +1,115 @@
+@import '@/styles/variables.less';
+@import '@/styles/common.less';
+
+.partner-fragment-entry {
+  &__join {
+    .flex-column();
+    text-align: center;
+    min-height: 280px;
+    padding: 32px 40px;
+    box-sizing: border-box;
+    background: linear-gradient(2.75deg, #ffffff 7.9%, #f2edff 97.24%);
+    border-radius: 16px;
+    margin-bottom: 24px;
+
+    &-title {
+      font-family: 'Alimama ShuHeiTi';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 32px;
+      line-height: 40px;
+      color: @blColor;
+      margin-bottom: 16px;
+      .flex-row();
+
+      .highlight {
+        color: @blHighlightColor;
+        font-family: 'DIN Alternate';
+        font-weight: 700;
+        font-size: 50px;
+        line-height: 56px;
+        padding: 0 8px;
+      }
+    }
+    &-desc {
+      font-size: 26px;
+      line-height: 32px;
+      color: @blColorG1;
+      margin-bottom: 32px;
+    }
+    &-button {
+      .button(@width: 273px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 43px);
+      background: rgba(109, 61, 245, 0.12);
+      text-align: center;
+      color: @blHighlightColor;
+    }
+  }
+
+  &__kanban {
+    min-height: 280px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    padding: 36px 40px;
+    position: relative;
+    background: #6d3df5;
+    color: #fff;
+    &-button {
+      position: absolute;
+      top: 44px;
+      right: 56px;
+      font-size: 24px;
+      line-height: 24px;
+      &__image {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        margin-left: 4px;
+      }
+    }
+    &-title {
+      font-style: normal;
+      font-weight: 400;
+      letter-spacing: 0.02em;
+      opacity: 0.7;
+    }
+    &-money {
+      font-family: 'Helvetica Neue';
+      font-style: normal;
+      font-weight: 700;
+    }
+    &-total {
+      margin-bottom: 24px;
+      .partner-fragment-entry__kanban {
+        &-title {
+          font-size: 26px;
+          line-height: 40px;
+          margin-bottom: 12px;
+        }
+        &-money {
+          font-size: 48px;
+          line-height: 42px;
+        }
+      }
+    }
+    &-details {
+      .flex-row();
+      &-part {
+        flex: 1;
+
+        .partner-fragment-entry__kanban {
+          &-title {
+            font-size: 24px;
+            line-height: 36px;
+            margin-bottom: 4px;
+          }
+          &-money {
+            font-size: 32px;
+            line-height: 42px;
+          }
+        }
+
+      }
+    }
+  }
+}

src/components/partner-entry/index.tsx

@@ -0,0 +1,60 @@
+import { Button, Image } from '@tarojs/components';
+
+import { useState } from 'react';
+import './index.less';
+
+const PREFIX = 'partner-fragment-entry';
+
+function JoinEntry() {
+  return (
+    <div className={`${PREFIX}__join`}>
+      <div className={`${PREFIX}__join-title`}>
+        加入播络合伙人，高达<span className="highlight">75%</span>分成
+      </div>
+      <div className={`${PREFIX}__join-desc`}>模式简单，分成比例高，欢迎各位群主、经纪人或机构</div>
+      <Button className={`${PREFIX}__join-button`}>立即加入</Button>
+    </div>
+  );
+}
+
+function PartnerKanban() {
+  return (
+    <div className={`${PREFIX}__kanban`}>
+      <div className={`${PREFIX}__kanban-button`}>
+        查看详情
+        <Image
+          className={`${PREFIX}__kanban-button__image`}
+          mode="aspectFit"
+          src={require('@/statics/svg/caret-right.svg')}
+        />
+      </div>
+      <div className={`${PREFIX}__kanban-total`}>
+        <div className={`${PREFIX}__kanban-title`}>总收益（元）</div>
+        <div className={`${PREFIX}__kanban-money`}>1666.66</div>
+      </div>
+      <div className={`${PREFIX}__kanban-details`}>
+        <div className={`${PREFIX}__kanban-details-part`}>
+          <div className={`${PREFIX}__kanban-title`}>可提现（元）</div>
+          <div className={`${PREFIX}__kanban-money`}>666.23</div>
+        </div>
+        <div className={`${PREFIX}__kanban-details-part`}>
+          <div className={`${PREFIX}__kanban-title`}>提现中（元）</div>
+          <div className={`${PREFIX}__kanban-money`}>666.23</div>
+        </div>
+        <div className={`${PREFIX}__kanban-details-part`}>
+          <div className={`${PREFIX}__kanban-title`}>待分账（元）</div>
+          <div className={`${PREFIX}__kanban-money`}>666.23</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PartnerEntry() {
+  const [state] = useState(1);
+
+  if (state === 0) {
+    return <JoinEntry />;
+  }
+  return <PartnerKanban />;
+}