静态页面

src/components/ProjectListItem/index.scss

@@ -52,18 +52,18 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-top: 20px;
+      margin-top: 16px;
     }
     > .Tags {
       font-size: 0;
       white-space: nowrap;
-      margin-top: 18px;
+      margin-top: 12px;
       > text {
         display: inline-block;
         vertical-align: middle;
-        font-size: 16px;
+        font-size: 22px;
         padding: 0 10px;
-        line-height: 28px;
+        line-height: 36px;
         background: rgba(251, 171, 87, 0.3);
         color: #333;
         margin-left: 20px;
@@ -75,11 +75,11 @@
     > .ShareInfo {
       font-size: 0;
       white-space: nowrap;
-      margin-top: 20px;
+      margin-top: 12px;
       > text {
         display: inline-block;
         vertical-align: middle;
-        font-size: 16px;
+        font-size: 22px;
         color: #333;
         line-height: 1;
         margin-left: 10px;
@@ -99,11 +99,11 @@
         > view {
           display: inline-block;
           vertical-align: middle;
-          width: 24px;
-          height: 24px;
+          width: 30px;
+          height: 30px;
           background: #eee;
           border-radius: 100%;
-          margin-left: -6px;
+          margin-left: -10px;
           position: relative;
           overflow: hidden;
           &:nth-child(1) {

src/pages/index/buildingDetail/components/BasicInfo/index.scss

@@ -38,15 +38,17 @@
     >text {
       display: inline-block;
       vertical-align: middle;
-      margin-top: 20px;
-      margin-right: 6px;
+      margin-top: 16px;
+      margin-right: 12px;
       font-size: 22px;
       color: #666;
-      padding: 0 12px;
+      padding: 0 10px;
       line-height: 36px;
       color: #666;
       background: rgba(251, 171, 87, 0.3);
       border-radius: 8px;
+      min-width: 90px;
+      text-align: center;
     }
   }
   >.ProjectList {

src/pages/index/buildingDetail/components/SpecialPriceHouse/index.jsx

@@ -16,6 +16,25 @@ export default function SpecialPriceHouse (props) {
         <text className='iconfont icon-jiantouright'></text>
       </view>
 
+      <view className='List'>
+        <ScrollView scroll-x={true}>
+          {
+            ['', '', '', '', ''].map((item, index) => (
+              <view className='ListItem' key={`List-${index}`}>
+                <text className='Tips'>省17.8万</text>
+                <view className='Price'>
+                  <text>867.3万</text>
+                  <text>888.1万</text>
+                </view>
+                <text className='Time'>距结束还有06天10时14分</text>
+                <text className='HouseType'>4室2厅2卫 23433元/㎡</text>
+                <text className='DoorNumber'>1#-5单元-401</text>
+              </view>
+            ))
+          }
+        </ScrollView>
+      </view>
+
     </view>
   )
 }

src/pages/index/buildingDetail/components/SpecialPriceHouse/index.scss

@@ -1,9 +1,10 @@
 .components.SpecialPriceHouse {
   position: relative;
   overflow: hidden;
-  padding: 40px 30px;
+  padding: 40px 0;
   >.Title {
     align-items: center;
+    padding: 0 30px;
     >.flex-item {
       >text {
         display: block;
@@ -19,4 +20,88 @@
       color: #A1A1A1;
     }
   }
+  >.List {
+    position: relative;
+    overflow: hidden;
+    margin-top: 28px;
+    height: 222px;
+    >scroll-view {
+      width: 100%;
+      height: 100%;
+      font-size: 0;
+      white-space: nowrap;
+      .ListItem {
+        width: 336px;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px solid rgba(0, 0, 0, 0.2);
+        margin-right: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        overflow: hidden;
+        border-radius: 10px;
+        &:first-child {
+          margin-left: 30px;
+        }
+        >.Tips {
+          min-width: 90px;
+          display: inline-block;
+          padding: 0 10px;
+          font-size: 16px;
+          color: #fff;
+          background: #193C83;
+          border-radius: 0 0 0 10px;
+          text-align: center;
+          position: absolute;
+          right: 0;
+          top: 0;
+          line-height: 24px;
+        }
+        >.Price {
+          white-space: nowrap;
+          margin-top: 30px;
+          padding: 0 20px;
+          >text {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 32px;
+            font-weight: bold;
+            color: red;
+            line-height: 1;
+            &:last-child {
+              color: #ccc;
+              text-decoration: line-through;
+              margin-left: 20px;
+              font-size: 28px;
+            }
+          }
+        }
+        >.Time {
+          display: block;
+          padding: 0 20px;
+          font-size: 20px;
+          color: red;
+          line-height: 1;
+          margin-top: 20px;
+        }
+        >.HouseType {
+          display: block;
+          padding: 0 20px;
+          font-size: 24px;
+          line-height: 1;
+          margin-top: 30px;
+          font-weight: bold;
+        }
+        >.DoorNumber {
+          display: block;
+          padding: 0 20px;
+          font-size: 20px;
+          line-height: 1;
+          margin-top: 20px;
+          color: #999;
+        }
+      }
+    }
+  }
 }

src/pages/index/index.jsx

@@ -24,20 +24,20 @@ export default withLayout((props) => {
   const [PullTimer, setPullTimer] = useState(null)
 
   useEffect(() => {
-    if(city.curCity.name) {
+    if (city.curCity.name) {
       GetBanner()
       GetProjectList()
     }
   }, [city])
 
   const GetBanner = () => { // 获取banner
-    fetch({url: `${API_BANNER_LIST}/banner`, method: 'get', payload: {cityId: city.curCity.id, showPosition: 'index'}}).then((res) => {
+    fetch({ url: `${API_BANNER_LIST}/banner`, method: 'get', payload: { cityId: city.curCity.id, showPosition: 'index' } }).then((res) => {
       setBannerList(res || [])
     })
   }
 
   const GetProjectList = () => { // 获取项目列表
-    fetch({url: API_INDEX_PROJECTS, method: 'get', payload: {cityId: city.curCity.id, pageNum: 1, pageSize: 10}}).then((res) => {
+    fetch({ url: API_INDEX_PROJECTS, method: 'get', payload: { cityId: city.curCity.id, pageNum: 1, pageSize: 10 } }).then((res) => {
       setProjectList(res.records || [])
     })
   }
@@ -109,6 +109,19 @@ export default withLayout((props) => {
             <text>已经到底了~</text>
           </view>
 
+          <view className='Bottom'>
+            <view>
+              <view>
+                <text className='iconfont icon-shengming'></text>
+                <text>免责声明</text>
+              </view>
+              <view>
+                <text>&emsp;&emsp;以上价格仅供参考,具体一房一价的信息以售楼处展示为准。房屋位置交通、医疗、教育、商业等配套信息，来源于第三方不作为要约,仅供参考,双方具体权利义务应以法律规定及买卖合同约定为准。本平台对项目周边文化教育的介绍旨在提供相关信息1 意味着信息发布方对就学安排作出承诺。相关教育资首页信息存在调整的可能,应以政府教育主管部门门及办学颁布的政策规定为准。详情请仔细阅读</text>
+                <text className='active'>《新联家使用免责条款》</text>
+              </view>
+            </view>
+          </view>
+
         </view>
       </ScrollView>
 

src/pages/index/index.scss

@@ -74,6 +74,29 @@
           margin: 20px auto;
         }
       }
+      >.Bottom {
+        padding: 0 30px 30px;
+        position: relative;
+        overflow: hidden;
+        >view {
+          padding: 30px;
+          position: relative;
+          overflow: hidden;
+          background: #F8F8F8;
+          border-radius: 8px;
+          >view {
+            >text {
+              font-size: 20px;
+              color: #999;
+              line-height: 30px;
+              letter-spacing: 2px;
+              &.active {
+                color: #193C83;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }