detail

src/onlineSelling/pages/detail/index.js

@@ -86,18 +86,41 @@ export default class Index extends Component {
             className="wrap"
             scrollY>
             <View className='detail__main'>
-
-              <View className="title">
-                <View className="name">A户型</View>
-                <View className="btn">询问优惠</View>
+              <View style="padding: 0 30rpx;">
+
+                <View className="title">
+                  <View className="name">A户型</View>
+                  <View className="btn">询问优惠</View>
+                </View>
+                <View className="price">
+                  现价：234万
+              </View>
+                <View className="area">
+                  <Text> 建面<Text style="color:#FE1C1C">270</Text>m²</Text>
+                  <Text style="margin-left:20rpx"> 套内<Text style="color:#FE1C1C">270</Text>m²</Text>
+                </View>
+                <View className="address">
+                  XX嘉园1号楼2单元3楼303号
+              </View>
+                <View className="date">
+                  预选时间：2/12 12:23:33--2/13 12:23:34
+              </View>
+                <View className="date">
+                  认筹时间：2/12 12:23:33--2/13 12:23:34
               </View>
-              <View className="price">
-                现价：234万
               </View>
-              <View className="area">
-               <Text> 建面<Text style="color:#FE1C1C">270</Text>m²</Text>
-               <Text style="margin-left:20rpx"> 套内<Text style="color:#FE1C1C">270</Text>m²</Text>
+              <View className="num">
+                已有12人预选此房源，快快预选认筹~
               </View>
+              <View style="padding: 0 30rpx;">
+                <View className="choose-btn">
+                  预选此房源
+              </View>
+                <View className="close-btn">
+                  认筹功能未开放
+              </View>
+              </View>
+
 
             </View>
           </ScrollView>

src/onlineSelling/pages/detail/index.scss

@@ -3,6 +3,7 @@
 .detail {
   position: relative;
   width: 100%;
+  font-weight: 300;
   .cover-img{
     width:100%;
     height:600px;
@@ -16,8 +17,8 @@
 
   &__main {
     background: #fff;
-    border-radius: 28px 28px 0 0;
-    padding: 60px 30px;
+    border-radius: 40px 40px 0 0;
+    padding: 60px 0;
     .title{
       display: flex;
       align-items: center;
@@ -47,5 +48,45 @@
       font-weight: 300;
       line-height: 50px;
     }
+    .address{
+      font-size: 30px;
+      color: #666;
+      font-weight: 300;
+      margin-bottom: 10px;
+    }
+    .date{
+      font-size: 22px;
+      color: #999;
+      line-height: 1.8;
+    }
+    .num{
+      font-size: 26px;
+      color: #999;
+      background-color: #F8F8F8;
+      line-height: 54px;
+      padding: 0 30px;
+      margin-top: 10px;
+      font-weight: 300;
+      margin-bottom: 78px;
+   
+    }
+    .choose-btn{
+      color: #fff;
+      font-size: 36px;
+      background-color: $primary-color;
+      line-height: 94px;
+      border-radius:10px;
+      text-align: center;
+      
+    }
+    .close-btn{
+      color: $primary-color;
+      font-size: 36px;
+      background-color: #F8F8F8;
+      line-height: 94px;
+      border-radius:10px;
+      text-align: center;
+      margin: 40px 0 80px 0;
+    }
   }
 }