项目列表页增加empty样式

src/pages/project/index.jsx

@@ -6,6 +6,7 @@ import Avator from '@root/components/Avator';
 import Welcome from './components/welcome';
 import { fetchProjectList } from './service';
 import Page from '@root/components/Page';
+import { getFileUrl } from '@root/service/oss';
 
 export default function ProjectListView() {
   const [projectList, setProjectList] = useState([]);
@@ -23,12 +24,18 @@ export default function ProjectListView() {
     <Page wrapperClassName={styles.page}>
       <ScrollView className={styles.project} scrollY>
         <View className={styles.wrapPadding}>
-          <Avator className={styles.avator} onClick={() => Taro.navigateTo({ url: '/pages/usercenter/index' })}  />
+          <Avator className={styles.avator} onClick={() => Taro.navigateTo({ url: '/pages/usercenter/index' })} />
         </View>
         <Welcome className={[styles.wrapPadding, styles.mt10]} />
-        <View className={[styles.listTitle, styles.wrapPadding]}>
-          <Text>我的项目</Text>
-        </View>
+        {
+          projectList.length
+            ? (
+              <View className={[styles.listTitle, styles.wrapPadding]}>
+                <Text>我的项目</Text>
+              </View>
+            )
+            : null
+        }
         {
           projectList.map(project => (
             <View
@@ -45,6 +52,16 @@ export default function ProjectListView() {
             </View>
           ))
         }
+        {
+          !projectList.length
+            ? (
+              <View className={styles.empty}>
+                <Image className={styles.empty_img} src={getFileUrl('oss://assets/empty.png')} />
+                <Text className={styles.text}>暂无项目</Text>
+              </View>
+            )
+            : null
+        }
       </ScrollView>
     </Page>
   )

src/pages/project/index.module.scss

@@ -47,4 +47,20 @@
 
     }
   }
+
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 126px * 2;
+    text-align: center;
+    &_img {
+      width: 124px * 2;
+      height: 124px * 2;
+    }
+    .text {
+      font-size: 16px * 2;
+      line-height: (22px + 20) * 2;
+    }
+  }
 }