首页

mbti-test-mini/src/app.scss

@@ -0,0 +1,4 @@
+.at-button--primary {
+  background: #88619a !important;
+  border-color: #88619a !important;
+}

mbti-test-mini/src/components/GlobalFooter/index.scss

@@ -0,0 +1,8 @@
+.globalFooter {
+  position: fixed;
+  bottom: 30px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+}

mbti-test-mini/src/components/GlobalFooter/index.tsx

@@ -0,0 +1,13 @@
+import { View } from "@tarojs/components";
+import "./index.scss";
+
+/**
+ * 全局底部栏组件
+ */
+export default () => {
+  return (
+    <View className='globalFooter'>
+      作者：轩辕龙儿
+    </View>
+  );
+};

mbti-test-mini/src/pages/index/index.scss

@@ -0,0 +1,31 @@
+.indexPage {
+  background-image: url('../../assets/headerBg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh; // 保证全屏
+  padding: 20px;
+
+  .title {
+    // color: #fff;
+    padding-top: 48px;
+    margin-bottom: 24px;
+    text-align: center;
+  }
+
+  .subTitle {
+    // color: #fff;
+    margin-bottom: 48px;
+  }
+
+  .enterBtn {
+    width: 30vw;
+    min-width: 180px;
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    color: #fff;
+    border-radius: 999px;
+    padding: 20px 0;
+  }
+}

mbti-test-mini/src/pages/index/index.tsx

@@ -1,23 +1,34 @@
-import { Component, PropsWithChildren } from 'react'
-import { View, Text } from '@tarojs/components'
+import {View} from "@tarojs/components";
+import {AtButton} from "taro-ui";
+import Taro from "@tarojs/taro";
+import "./index.scss";
+import GlobalFooter from "../../components/GlobalFooter";
 
-import "taro-ui/dist/style/components/button.scss" // 按需引入
-import './index.scss'
-
-export default class Index extends Component<PropsWithChildren> {
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!</Text>
+/**
+ * 主页
+ */
+export default () => {
+  return (
+    <View className="indexPage">
+      <View className="at-article__h1 title">MBTI 性格测试</View>
+      <View className="at-article__h3 subTitle">
+        只需 2 分钟，就能非常准确地描述出你是谁，以及你的性格特点
       </View>
-    )
-  }
-}
+      <AtButton
+        type="primary"
+        size="normal"
+        className="enterBtn"
+        circle
+        onClick={() => {
+          Taro.navigateTo({
+            url: "/pages/doQuestion/index",
+          });
+        }}
+        >
+        开始测试
+      </AtButton>
+      <GlobalFooter />
+    </View>
+  );
+};
+