feat: 首页header和城市列表

src/pages/index/index.jsx

@@ -1,24 +1,40 @@
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
-import { AtButton } from 'taro-ui'
-import { AtIcon } from 'taro-ui'
-import { AtAvatar } from 'taro-ui'
-import './index.scss'
+import { View, Text } from "@tarojs/components";
+import { useLoad } from "@tarojs/taro";
+import { AtButton } from "taro-ui";
+import { AtIcon } from "taro-ui";
+import { AtAvatar } from "taro-ui";
+import "./index.scss";
 
 export default function Index() {
-
   useLoad(() => {
-    console.log('Page loaded.')
-  })
+    console.log("Page loaded.");
+  });
+
+  const HomeCardItem = () => {
+    return [1, 2, 3].map((item, index) => {
+      return (
+        <View className="homeCardItem">
+          <View className="homeCard">left</View>
+          <View className="homeCard">right</View>
+        </View>
+      );
+    });
+  };
 
   return (
-    <View className='index'>
-      <AtButton>按钮文案</AtButton>
-      <AtButton type='primary' size='small'>按钮文案</AtButton>
-      <AtButton type='primary' size='normal'>按钮文案</AtButton>
-      <Text>Hello world1!</Text>
-      <View className='at-icon at-icon-settings'></View>
-      <AtAvatar text='凹凸实验室'></AtAvatar>
+    <View className="index">
+      {/* 顶部 */}
+      <View className="indexHeader">
+        {/* 头像 */}
+        <AtAvatar circle image="https://jdc.jd.com/img/200"></AtAvatar>
+        <AtIcon value='chevron-down' size='30' color='#F00'></AtIcon>
+        
+      </View>
+
+      {/* 城市列表 */}
+      <View className="homeCards">
+        <HomeCardItem />
+      </View>
     </View>
-  )
+  );
 }

src/pages/index/index.scss

@@ -0,0 +1,32 @@
+.index {
+  padding-left: 20px;
+  padding-right: 20px;
+
+  .indexHeader {
+    display: flex;
+    flex-direction: row;
+    // justify-content: space-between;
+    align-items: center;
+  }
+
+
+  .homeCards {
+    display: flex;
+    flex-direction: column;
+
+    .homeCardItem {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: row;
+      // background-color:aqua;
+      justify-content: space-between;
+      align-items: center;
+      .homeCard {
+        width: 340px;
+        height: 250px;
+        background-color: yellow;
+        border-radius: 20px;
+      }
+    }
+  }
+}