feat: 设置alias别名@=>src, 以及城市图片展示

src/pages/index/index.jsx

@@ -1,9 +1,10 @@
-import { View, Text } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
 import { useLoad } from "@tarojs/taro";
-import { AtButton } from "taro-ui";
-import { AtIcon } from "taro-ui";
-import { AtAvatar } from "taro-ui";
+
+import { AtAvatar, AtTag, AtIcon } from "taro-ui";
 import "./index.scss";
+import beijing from "@/images/city/beijing.jpg";
+// import beijing from "../../images/city/beijing.jpg";
 
 export default function Index() {
   useLoad(() => {
@@ -14,7 +15,14 @@ export default function Index() {
     return [1, 2, 3].map((item, index) => {
       return (
         <View className="homeCardItem">
-          <View className="homeCard">left</View>
+          <View className="homeCard">
+            {/* 城市封面图片 */}
+            <Image
+              style="width: 100%;height: 100%;background: #fff;"
+              mode="scaleToFill"
+              src={beijing}
+            />
+          </View>
           <View className="homeCard">right</View>
         </View>
       );
@@ -26,9 +34,28 @@ export default function Index() {
       {/* 顶部 */}
       <View className="indexHeader">
         {/* 头像 */}
-        <AtAvatar circle image="https://jdc.jd.com/img/200"></AtAvatar>
-        <AtIcon value='chevron-down' size='30' color='#F00'></AtIcon>
-        
+        <AtAvatar circle image=""></AtAvatar>
+        {/* color="#F00" */}
+        <AtIcon value="chevron-down" size="30"></AtIcon>
+      </View>
+
+      {/* 省份标签 */}
+      <View className="provinceTag">
+        <AtTag type="primary" circle>
+          北京
+        </AtTag>
+        <AtTag type="primary" circle>
+          上海
+        </AtTag>
+        <AtTag type="primary" circle>
+          广州
+        </AtTag>
+        <AtTag type="primary" circle>
+          深圳
+        </AtTag>
+        <AtTag type="primary" circle>
+          武汉
+        </AtTag>
       </View>
 
       {/* 城市列表 */}

src/pages/index/index.scss

@@ -7,8 +7,16 @@
     flex-direction: row;
     // justify-content: space-between;
     align-items: center;
+    margin-bottom: 10px;
   }
 
+  .provinceTag {
+    display: flex;
+    flex-direction: row;
+    // justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
 
   .homeCards {
     display: flex;