静态页面

src/components/ProjectListItem/index.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+
+export default function ProjectListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components ProjectListItem flex-h'>
+      <view className='Img'>
+        <view>
+          {
+            Data.img &&
+            <Image mode='aspectFill' className='centerLabel' src={Data.img || null} />
+          }
+        </view>
+      </view>
+      <view className='flex-item'>
+        <view className='Name flex-h'>
+          <view className='flex-item'>
+            <text>楼盘名称</text>
+          </view>
+          <text>约</text>
+          <text>20000m²</text>
+        </view>
+        <text className='Address'>楼盘地址sdsdsdsdsds</text>
+        <view className='Tags'>
+          <text>标签1</text>
+          <text>标签2</text>
+          <text>标签3</text>
+        </view>
+        <view className='ShareInfo'>
+          {/* <text className='iconfont'></text> */}
+          <text>3次分享</text>
+          <view className='Users'>
+            <view></view>
+            <view></view>
+            <view></view>
+          </view>
+          <text>...9人围观</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/ProjectListItem/index.scss

@@ -0,0 +1,111 @@
+.components.ProjectListItem {
+  > .Img {
+    width: 260px;
+    position: relative;
+    overflow: hidden;
+    margin-right: 20px;
+    > view {
+      width: 100%;
+      padding-bottom: 62%;
+      background: #ccc;
+      position: relative;
+      overflow: hidden;
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  > .flex-item {
+    > .Name {
+      align-items: center;
+      > .flex-item {
+        margin-right: 10px;
+        > text {
+          display: block;
+          font-size: 28px;
+          font-weight: bold;
+          color: #000;
+          line-height: 40px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      > text {
+        font-size: 24px;
+        line-height: 40px;
+        color: #000;
+        &:last-child {
+          color: red;
+        }
+      }
+    }
+    > .Address {
+      display: block;
+      font-size: 24px;
+      color: #666;
+      line-height: 40px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    > .Tags {
+      font-size: 0;
+      white-space: nowrap;
+      > text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        padding: 0 10px;
+        line-height: 36px;
+        background: orangered;
+        color: #333;
+        margin-right: 10px;
+      }
+    }
+    > .ShareInfo {
+      font-size: 0;
+      white-space: nowrap;
+      margin-top: 10px;
+      > text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        color: #333;
+        line-height: 40px;
+        margin-left: 10px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      > .Users {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0;
+        white-space: nowrap;
+        margin-left: 30px;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          width: 40px;
+          height: 40px;
+          background: #ccc;
+          border-radius: 100%;
+          margin-left: -10px;
+          position: relative;
+          &:nth-child(1) {
+            z-index: 1;
+            margin-left: 0;
+          }
+          &:nth-child(2) {
+            z-index: 2;
+          }
+          &:nth-child(3) {
+            z-index: 3;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/index/components/IndexColumnTitle/index.scss

@@ -1,3 +1,21 @@
 .components.IndexColumnTitle {
   align-items: center;
-}
+  padding: 0 30px;
+  margin-top: 30px;
+  > text {
+    font-size: 32px;
+    font-weight: bold;
+    color: #000;
+    line-height: 40px;
+  }
+  > .More {
+    white-space: nowrap;
+    font-size: 0;
+    > text {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 24px;
+      line-height: 40px;
+    }
+  }
+}

src/pages/index/components/IndexHotActivity/index.jsx

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function IndexHotActivity (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexHotActivity'>
+      <ScrollView scroll-x={true}>
+        <view className='Content'>
+          {
+            List.map((item, index) => (
+              <view className={`IndexHotActivity-${index}`}>
+                <view>
+                  {
+                    item.img &&
+                    <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                  }
+                </view>
+              </view>
+            ))
+          }
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/index/components/IndexHotActivity/index.scss

@@ -0,0 +1,30 @@
+.components.IndexHotActivity {
+  margin-top: 30px;
+  .Content {
+    position: relative;
+    font-size: 0;
+    white-space: nowrap;
+    > view {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 30px;
+      width: calc((100vw - 90px) / 2);
+      position: relative;
+      &:first-child {
+        margin-left: 30px;
+      }
+      > view {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 56.25%;
+        background: #ccc;
+        height: 0;
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}

src/pages/index/index.jsx

@@ -5,6 +5,8 @@ import IndexBanner from './components/IndexBanner/index'
 import IndexMenu from './components/IndexMenu/index'
 import SubBanner from './components/SubBanner/index'
 import IndexColumnTitle from './components/IndexColumnTitle/index'
+import IndexHotActivity from './components/IndexHotActivity/index'
+import ProjectListItem from '../../components/ProjectListItem/index'
 import { ScrollView } from '@tarojs/components'
 
 export default withLayout((props) => {
@@ -13,6 +15,7 @@ export default withLayout((props) => {
   const [BannerList, setBannerList] = useState(['', '', ''])
   const [MenuList, setMenuList] = useState(['', '', '', '', '', '', '', '', '', ''])
   const [SubBannerList, setSubBannerList] = useState(['', '', ''])
+  const [ProjectList, setProjectList] = useState(['', '', ''])
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
@@ -63,6 +66,7 @@ export default withLayout((props) => {
           {/* hot activity */}
           <view className='HotActivity'>
             <IndexColumnTitle Name='热门活动'></IndexColumnTitle>
+            <IndexHotActivity List={['', '', '']}></IndexHotActivity>
           </view>
 
           {/* all project */}
@@ -73,6 +77,13 @@ export default withLayout((props) => {
                 <text>地图找房</text>
               </view>
             </IndexColumnTitle>
+            <view className='ProjectList'>
+              {
+                ProjectList.map((item, index) => (
+                  <ProjectListItem Data={item} key={`ProjectListItem-${index}`}></ProjectListItem>
+                ))
+              }
+            </view>
           </view>
 
           {/* bottom */}

src/pages/index/index.scss

@@ -61,6 +61,39 @@
           }
         }
       }
+      > .AllProject {
+        .ToMap {
+          margin-left: 20px;
+          font-size: 0;
+          white-space: nowrap;
+          > text {
+            font-size: 24px;
+            line-height: 40px;
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        > .ProjectList {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          > view {
+            margin-top: 30px;
+          }
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
     }
   }
 }