feat: login

src/pages/start/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '',
+  navigationStyle: 'custom',
 });

src/pages/start/index.less

@@ -6,6 +6,12 @@
   height: 100vh;
   .flex-column();
 
+  &.color-bg {
+    background: linear-gradient(180deg, #efecff 0%, #f7f5ff 100%);
+    padding-top: 347px;
+    display: block;
+  }
+
   &__app {
     margin-top: 50%;
   }
@@ -22,4 +28,68 @@
     color: @blColorG2;
     margin-top: 32px;
   }
-}
+
+  &__role-app {
+    padding: 64px;
+  }
+
+  &__greet {
+    font-size: 28px;
+    line-height: 56px;
+    color: @blColorG1;
+    margin-bottom: 14px;
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 57px;
+    color: @blColor;
+    margin-bottom: 75px;
+  }
+
+  &__card {
+    background: rgba(255, 255, 255, 0.5);
+    border: 2px solid #ffffff;
+    border-radius: 16px;
+    padding: 56px 40px 56px;
+    .flex-row();
+
+    & + & {
+      margin-top: 64px;
+    }
+  }
+
+  &__avatar {
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+  }
+
+  &__content {
+    padding-left: 34px;
+    .flex-column();
+    flex: 1;
+    align-items: start;
+
+    .title {
+      font-weight: 600;
+      font-size: 40px;
+      line-height: 48px;
+
+      color: @blColor;
+
+      margin-bottom: 16px;
+    }
+    .desc {
+      font-size: 28px;
+      line-height: 40px;
+      color: @blColorG1;
+    }
+  }
+
+  &__arrow {
+    width: 24px;
+    height: 24px;
+  }
+}

src/pages/start/index.tsx

@@ -1,23 +1,76 @@
 import { Image } from '@tarojs/components';
-import { useLoad } from '@tarojs/taro';
 
-import { switchDefaultTab } from '@/utils/app';
+import { useLoad } from '@tarojs/taro';
+import Slogan from '@/components/slogan';
+import { PageUrl, RoleType } from '@/constants/app';
+import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
+import store from '@/store';
+import { changeHomePage } from '@/store/actions';
+import { getRoleType, switchDefaultTab, switchRoleType } from '@/utils/app';
+import { switchTab } from '@/utils/route';
 
 import './index.less';
 
 const PREFIX = 'page-start';
 
 export default function Start() {
+  const mode = getRoleType();
   useLoad(() => {
     switchDefaultTab();
   });
+  const handleAnchor = async () => {
+    await switchRoleType(RoleType.Anchor);
+    store.dispatch(changeHomePage(ANCHOR_TAB_LIST[0].type));
+    await switchTab(ANCHOR_TAB_LIST[0].pagePath as PageUrl);
+  };
+
+  const handleCompany = async () => {
+    await switchRoleType(RoleType.Company);
+    store.dispatch(changeHomePage(COMPANY_TAB_LIST[0].type));
+    await switchTab(COMPANY_TAB_LIST[0].pagePath as PageUrl);
+  };
 
   return (
-    <div className={PREFIX}>
-      <div className={`${PREFIX}__app`}>
-        <Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
-        <div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
-      </div>
+    <div className={`${PREFIX} ${mode ? '' : 'color-bg'}`}>
+      {mode && (
+        <div className={`${PREFIX}__app`}>
+          <Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
+          <div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
+        </div>
+      )}
+      {!mode && (
+        <>
+          <div className={`${PREFIX}__role-app`}>
+            <div className={`${PREFIX}__greet`}>Hi，很高兴见到你</div>
+            <div className={`${PREFIX}__title`}>请选择您的身份</div>
+            <div className={`${PREFIX}__card`} onClick={handleAnchor}>
+              <Image
+                className={`${PREFIX}__avatar anchor`}
+                src="https://publiccdn.neighbourhood.com.cn/img/avatar_f.png"
+                mode="aspectFill"
+              />
+              <div className={`${PREFIX}__content`}>
+                <div className="title">我是主播</div>
+                <div className="desc">我要找工作</div>
+              </div>
+              <Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
+            </div>
+            <div className={`${PREFIX}__card`} onClick={handleCompany}>
+              <Image
+                className={`${PREFIX}__avatar company`}
+                src="https://publiccdn.neighbourhood.com.cn/img/avatar_m.png"
+                mode="aspectFill"
+              />
+              <div className={`${PREFIX}__content`}>
+                <div className="title">我是企业</div>
+                <div className="desc">我要招主播</div>
+              </div>
+              <Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
+            </div>
+          </div>
+          <Slogan />
+        </>
+      )}
     </div>
   );
 }