Browse Source

ws-土地出让详情页

ws 1 year ago
parent
commit
11eb16dc86

+ 86 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/detail.js

@@ -0,0 +1,86 @@
+// pagesPublic/pages/tdcr/details/detail.js
+const {IMG_PATH} = require('../../../../utils/path')
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgPath: IMG_PATH,
+    headerStyle: {},
+    title: '廖家山地块',
+    tabs: [{
+      label: '概况',
+    }, {
+      label: '基本情况',
+    }, {
+      label: '周边配套',
+    }, {
+      label: '其他地块',
+    }],
+    tabActive: 0,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({
+      headerStyle: wx.getMenuButtonBoundingClientRect()
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  tabEvent(e) {
+    this.setData({
+      tabActive: e.target.dataset.index,
+    })
+  }
+})

+ 6 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/detail.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "廖家山地块"
+}

+ 20 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/detail.wxml

@@ -0,0 +1,20 @@
+<!--pagesPublic/pages/tdcr/details/detail.wxml-->
+<view class="main" style="background-image: url({{imgPath}}/index/bg.png);">
+  <view class="header" style="height: {{headerStyle.height}}px;line-height: {{headerStyle.height}}px;margin-top: {{headerStyle.top}}px;">{{title}}</view>
+  <view class="map-content" style="background-image: url({{imgPath}}/details/map-border.png);">
+    <map class="map" enable-satellite="true"></map>
+  </view>
+  <view class="tab">
+    <view class="tab-item" wx:for="{{tabs}}" style="{{tabActive == index ? 'background-image: url(' + imgPath + '/details/tab-bg.png);' : ''}}" data-index="{{index}}" bindtap="tabEvent">{{item.label}}</view>
+  </view>
+  <view class="content" style="background-image: url({{imgPath}}/details/content-bg.png);">
+    <include wx:if="{{tabActive == 0}}" src="./wxml/survey.wxml"/>
+    <include wx:if="{{tabActive == 1}}" src="./wxml/info.wxml"/>
+    <include wx:if="{{tabActive == 2}}" src="./wxml/periphery.wxml"/>
+    <include wx:if="{{tabActive == 3}}" src="./wxml/other.wxml"/>
+  </view>
+  <view class="bottom-btn" style="background-image: url({{imgPath}}/details/btn-bg.png);">
+    <image src="{{imgPath}}/details/icon-phone.png"/>
+    <text>与我联系</text>
+  </view>
+</view>

+ 78 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/detail.wxss

@@ -0,0 +1,78 @@
+/* pagesPublic/pages/tdcr/details/detail.wxss */
+.main {
+  height: 100vh;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  color: white;
+  text-align: center;
+  font-family: PingFang SC;
+  font-weight: 800;
+  font-size: 42rpx;
+  width: 96vw;
+  margin: 0 auto;
+}
+.map-content {
+  background-size: 100% 100%;
+  height: 30vh;
+  width: 96vw;
+  margin: 0 auto;
+  margin-top: 3vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.map {
+  width: 97%;
+  height: 96%;
+}
+.tab {
+  width: 96vw;
+  margin: 0 auto;
+  margin-top: 2vh;
+  display: flex;
+  flex-direction: row;
+}
+.tab-item {
+  width: 25vw;
+  text-align: center;
+  background-size: 100% 100%;
+  color: white;
+  height: 60rpx;
+  line-height: 60rpx;
+  font-family: SourceHanSansCN;
+  font-weight: bold;
+  font-size: 30rpx;
+}
+.content {
+  width: 96vw;
+  margin: 0 auto;
+  height: 40vh;
+  background-size: 100% 100%;
+  margin-top: 1vh;
+}
+.bottom-btn {
+  width: 96vw;
+  margin: 0 auto;
+  height: 5vh;
+  background-size: 100% 100%;
+  margin-top: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bottom-btn text {
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  font-size: 36rpx;
+  color: white;
+  margin-left: 3vw;
+}
+.bottom-btn image {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+@import './wxml/survey.wxss';

+ 0 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/info.wxml


+ 0 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/other.wxml


+ 0 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/periphery.wxml


+ 23 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/survey.wxml

@@ -0,0 +1,23 @@
+<view class="survey-content">
+  <view class="s-title">廖家山地块</view>
+  <text class="s-type">已开始供地</text>
+  <image class="s-img" src="{{imgPath}}/details/1711353373724.png" />
+  <view class="s-list">
+    <view class="s-item">
+      <view class="s-item-t"><text class="s-item-num">26</text>亩</view>
+      <view class="s-item-f">供应面积</view>
+    </view>
+    <view class="s-item">
+      <view class="s-item-t"><text class="s-item-num">26</text>㎡</view>
+      <view  class="s-item-f">建筑面积</view>
+    </view>
+    <view class="s-item">
+      <view class="s-item-t"><text class="s-item-num">26</text></view>
+      <view  class="s-item-f">容积率</view>
+    </view>
+  </view>
+  <view class="s-use">计划供地用途<text>居住用地</text></view>
+  <view class="s-hr"></view>
+  <view>
+  </view>
+</view>

+ 70 - 0
nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/survey.wxss

@@ -0,0 +1,70 @@
+.survey-content {
+  height: 100%;
+  width: 90%;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+.survey-content .s-title {
+  font-family: PingFang SC;
+  font-weight: 800;
+  font-size: 42rpx;
+  color: #FFFFFF;
+  margin-top: 1vh;
+  margin-bottom: 15rpx;
+}
+.survey-content .s-type {
+  background: #00A4FF;
+  border-radius: 20rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  padding: 5rpx;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+}
+.survey-content .s-img {
+  width: 100%;
+  margin-top: 15rpx;
+  height: 22vh;
+}
+.survey-content .s-list {
+  display: flex;
+  justify-content: space-between;
+  color: white;
+  margin-top: 2vh;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+}
+.s-list .s-item .s-item-f {
+  font-size: 26rpx;
+}
+.s-list .s-item .s-item-t {
+  font-size: 32rpx;
+}
+.s-list .s-item .s-item-t .s-item-num {
+  font-size: 42rpx;
+}
+.survey-content .s-use {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #FFFFFF;
+  margin-top: 2vh;
+}   
+.survey-content .s-use text {
+  border-radius: 8rpx;
+  border: 1px solid #00FFFF;
+  color: #00FFFF;
+  margin-left: 20rpx;
+  padding: 1rpx;
+  padding-left: 10rpx;
+  padding-right: 10rpx;
+}
+.survey-content .s-hr {
+  height: 1rpx;
+  width: 100%;
+  background: #30A1DB;
+  opacity: 0.5;
+  margin-top: 3vh;
+}

+ 2 - 2
nnzwminiapp/pagesPublic/pages/tdcr/index.wxss

@@ -62,8 +62,8 @@
 }
 .bottom-btn {
   width: 80vw;
-  height: 5vh;
-  line-height: 5vh;
+  height: 6vh;
+  line-height: 6vh;
   font-family: Microsoft YaHei;
   font-weight: bold;
   font-size: 32rpx;