更新园区页面

App.vue

@@ -45,4 +45,7 @@
 		display: flex;
 		flex-wrap: wrap;
 	}
+	.items-center {
+		align-items: center;
+	}
 </style>

components/footer-share/footer-share.vue

@@ -0,0 +1,46 @@
+<template>
+	<view class="footer-share-box display-around">
+		<view class="display-flex-start items-center share-font" :style="{'border-right': isCollection ? '1px solid #d8d8d8' : 'none'}">
+			<view style="margin-right:15rpx;font-size: 26rpx;">分享</view>
+			<image src="../../static/share_icon.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
+		</view> 
+		<view class="display-flex-start items-center share-font" v-if='isCollection'>
+			<view style="margin-right:15rpx;font-size: 26rpx;">收藏</view>
+			<image src="../../static/collection.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"footer-share",
+		props:{
+			isCollection: {
+			  type: Boolean,
+			  default:false
+			}
+		},
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style>
+   .footer-share-box {
+	   height: 50rpx;
+	   position: fixed;
+	   bottom: 0;
+	   width: 100%;
+	   border-radius: 10rpx;
+	   box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
+	   padding: 20rpx;
+	   background: #fff;
+   }
+   .share-font {
+	   width: 45%;
+	   justify-content: center;
+   }
+</style>

components/v-tabs/readme.md

@@ -0,0 +1,182 @@
+## 插件说明
+
+> 这是 `v-tabs` 插件的升级版本，参数上有很大变动，支持 `H5` `小程序` `手机端`，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。
+
+## 使用说明
+
+### 1、最基本用法
+
+- 视图文件
+
+```html
+<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
+```
+
+- 脚本文件
+
+```js
+export default {
+  data() {
+    return {
+      current: 0,
+      tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
+    }
+  },
+  methods: {
+    changeTab(index) {
+      console.log('当前选中的项：' + index)
+    }
+  }
+}
+```
+
+### 2、平铺整个屏幕
+
+- 视图文件
+
+```html
+<v-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '进行中', '已完成']"></v-tabs>
+```
+
+- 脚本文件
+
+```js
+export default {
+  data() {
+    return {
+      activeTab: 0
+    }
+  }
+}
+```
+
+### 3、胶囊用法
+
+- 视图文件
+
+```html
+<v-tabs v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
+```
+
+- 脚本文件
+
+```js
+data() {
+  return {
+    current: 2,
+    tabs: [
+        '军事',
+        '国内',
+        '新闻新闻',
+        '军事',
+        '国内',
+        '新闻',
+        '军事',
+        '国内',
+        '新闻',
+      ],
+  },
+  methods: {
+    changeTab(index) {
+      console.log('当前选中索引：' + index)
+    }
+  }
+}
+```
+
+## 文档说明
+
+### 1、属性说明
+
+|       参数        |  类型   |  默认值   |                    说明                    |
+| :---------------: | :-----: | :-------: | :----------------------------------------: |
+|       value       | Number  |     0     |             必传(双向绑定的值)             |
+|       color       | String  |  '#333'   |                默认文字颜色                |
+|    activeColor    | String  | '#2979ff' |               选中文字的颜色               |
+|     fontSize      | String  |  '28rpx'  |          默认文字大小(rpx 或 px)           |
+|       bold        | Boolean |   true    |               是否加粗选中项               |
+|      scroll       | Boolean |   true    |       是否显示滚动条，平铺设置 false       |
+|      height       | String  |  '70rpx'  |            tab 高度(rpx 或 px)             |
+|    lineHeight     | String  |  '10rpx'  |            滑块高度(rpx 或 px)             |
+|     lineColor     | String  | '#2979ff' |                 滑块的颜色                 |
+|     lineScale     | Number  |    0.5    |               滑块宽度缩放值               |
+|    lineRadius     | String  |  '10rpx'  |          滑块圆角宽度(rpx 或 px)           |
+|       pills       | Boolean |   false   |                是否开启胶囊                |
+|    pillsColor     | String  | '#2979ff' |          胶囊背景颜色(rpx 或 px)           |
+| pillsBorderRadius | String  |  '10rpx'  |          胶囊圆角宽度(rpx 或 px)           |
+|       field       | String  |    ''     |  如果 tabs 子项是对象，输入需要展示的键名  |
+|      bgColor      | String  |  '#fff'   |     背景色，支持 linear-gradient 渐变      |
+|      padding      | String  |    '0'    |           整个 tab padding 属性            |
+|       fixed       | Boolean |   false   |               是否固定在顶部               |
+|    paddingItem    | String  | '0 22rpx' | 选项的边距（设置上下不生效，需要设置高度） |
+
+### 2、事件说明
+
+|  名称  | 参数  |                说明                |
+| :----: | :---: | :--------------------------------: |
+| change | index | 改变选中项触发, index 选中项的下标 |
+
+## 更新日志
+
+### 2020-09-24
+
+1. 修复 `v-tabs` 第一次可能出现第一个标签显示不完整的情况
+2. 修改了 `pages/tabs/order` 示例文件
+
+### 2020-09-21
+
+1. 修复添加 `fixed` 属性后，滚动条无效
+2. 修复选项很少的情况下，下划线计算计算错误
+3. 新增 `paddingItem` 属性，设置选项左右边距（上下边距需要设置 `height` 属性，或者设置 `padding` 属性）
+
+**写在最后：**
+欢迎各位老铁反馈 bug ，本人后端 PHP 一枚，只是应为感兴趣前端，自己琢磨，自己搞。如果你在使用的过程中有什么不合理，需要优化的，都可以在下面评论（或加我 QQ: 1207791534），本人看见后回复、修正，感谢。
+
+### 2020-09-17
+
+1. 紧急修复 bug，横向滑动不了的情况
+
+### 2020-09-16
+
+1. 新增 `fixed` 属性，是否固定在顶部，示例地址：`pages/tabs/tabs-static`
+2. 优化之前的页面结构
+
+**注意：**
+
+1. 使用 `padding` 属性的时候，尽量不要左右边距，会导致下划线位置不对
+2. 如果不绑定 `v-model` 会导致 `change` 事件改变的时候，下划线不跟随问题
+
+### 2020-09-09
+
+1. 修复 `width` 错误，dom 加载的时候没有及时获取到 `data` 属性导致的。
+
+### 2020-08-29
+
+1. 优化异步改变 `tabs` 后，下划线不初始化问题
+2. `github` 地址上有图 2 的源码，需要的自行下载，页面路径：`pages/tabs/order`
+
+### 2020-08-20
+
+1. 优化 `节点查询` 和 `选中渲染`
+2. 优化支付宝中 `createSelectorQuery()` 的影响
+
+### 2020-08-19
+
+1. 优化 `change` 事件触发机制
+
+### 2020-08-16
+
+1. 修改默认高度为 `70rpx`
+2. 新增属性 `bgColor`，可设置背景颜色，默认 `#fff`
+3. 新增整个 `tab` 的 `padding` 属性，默认 `0`
+
+### 2020-08-13
+
+1. 全新的 `v-tabs 2.0`
+2. 支持 `H5` `小程序` `APP`
+3. 属性高度可配置
+
+## 预览
+
+![v-tabs 2.0.1.gif](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif)
+![v-tabs 2.0.2.gif](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963)

components/v-tabs/v-tabs.vue

@@ -0,0 +1,339 @@
+<template>
+  <view :id="elId" class="v-tabs">
+    <scroll-view
+      id="scrollContainer"
+      :scroll-x="scroll"
+      :scroll-left="scroll ? scrollLeft : 0"
+      :scroll-with-animation="scroll"
+      :style="{ position: fixed ? 'fixed' : 'relative', zIndex: 1993 }"
+    >
+      <view
+        class="v-tabs__container"
+        :style="{
+          display: scroll ? 'inline-flex' : 'flex',
+          whiteSpace: scroll ? 'nowrap' : 'normal',
+          background: bgColor,
+          height,
+          padding
+        }"
+      >
+        <view
+          class="v-tabs__container-item"
+          v-for="(v, i) in tabs"
+          :key="i"
+          :style="{
+            color: current == i ? activeColor : color,
+            fontSize: current == i ? fontSize : fontSize,
+            fontWeight: bold && current == i ? 'bold' : '',
+            justifyContent: !scroll ? 'center' : '',
+            flex: scroll ? '' : 1,
+            padding: paddingItem
+          }"
+          @click="change(i)"
+        >
+          {{ field ? v[field] : v }}
+        </view>
+        <view
+          v-if="!pills"
+          class="v-tabs__container-line"
+          :style="{
+            background: lineColor,
+            width: lineWidth + 'px',
+            height: lineHeight,
+            borderRadius: lineRadius,
+            left: lineLeft + 'px',
+            transform: `translateX(-${lineWidth / 2}px)`
+          }"
+        ></view>
+        <view
+          v-else
+          class="v-tabs__container-pills"
+          :style="{
+            background: pillsColor,
+            borderRadius: pillsBorderRadius,
+            left: pillsLeft + 'px',
+            width: currentWidth + 'px',
+            height
+          }"
+        ></view>
+      </view>
+    </scroll-view>
+    <view
+      class="v-tabs__placeholder"
+      :style="{
+        height: fixed ? height : '0',
+        padding
+      }"
+    ></view>
+  </view>
+</template>
+
+<script>
+/**
+ * v-tabs
+ * @property {Number} value 选中的下标
+ * @property {Array} tabs tabs 列表
+ * @property {String} bgColor = '#fff' 背景颜色
+ * @property {String} color = '#333' 默认颜色
+ * @property {String} activeColor = '#2979ff' 选中文字颜色
+ * @property {String} fontSize = '28rpx' 默认文字大小
+ * @property {String} activeFontSize = '28rpx' 选中文字大小
+ * @property {Boolean} bold = [true | false] 选中文字是否加粗
+ * @property {Boolean} scroll = [true | false] 是否滚动
+ * @property {String} height = '60rpx' tab 的高度
+ * @property {String} lineHeight = '10rpx' 下划线的高度
+ * @property {String} lineColor = '#2979ff' 下划线的颜色
+ * @property {Number} lineScale = 0.5 下划线的宽度缩放比例
+ * @property {String} lineRadius = '10rpx' 下划线圆角
+ * @property {Boolean} pills = [true | false] 是否胶囊样式
+ * @property {String} pillsColor = '#2979ff' 胶囊背景色
+ * @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
+ * @property {String} field 如果是对象，显示的键名
+ * @property {Boolean} fixed = [true | false] 是否固定
+ * @property {String} paddingItem = '0 22rpx' 选项的边距
+ *
+ * @event {Function(current)} change 改变标签触发
+ */
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    tabs: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    bgColor: {
+      type: String,
+      default: '#fff'
+    },
+    padding: {
+      type: String,
+      default: '0'
+    },
+    color: {
+      type: String,
+      default: '#333'
+    },
+    activeColor: {
+      type: String,
+      default: '#2979ff'
+    },
+    fontSize: {
+      type: String,
+      default: '28rpx'
+    },
+    activeFontSize: {
+      type: String,
+      default: '32rpx'
+    },
+    bold: {
+      type: Boolean,
+      default: true
+    },
+    scroll: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: String,
+      default: '70rpx'
+    },
+    lineColor: {
+      type: String,
+      default: '#2979ff'
+    },
+    lineHeight: {
+      type: String,
+      default: '10rpx'
+    },
+    lineScale: {
+      type: Number,
+      default: 0.5
+    },
+    lineRadius: {
+      type: String,
+      default: '10rpx'
+    },
+    pills: {
+      type: Boolean,
+      deafult: false
+    },
+    pillsColor: {
+      type: String,
+      default: '#2979ff'
+    },
+    pillsBorderRadius: {
+      type: String,
+      default: '10rpx'
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    paddingItem: {
+      type: String,
+      default: '0 22rpx'
+    }
+  },
+  data() {
+    return {
+      elId: '',
+      lineWidth: 30,
+      currentWidth: 0, // 当前选项的宽度
+      lineLeft: 0, // 滑块距离左侧的位置
+      pillsLeft: 0, // 胶囊距离左侧的位置
+      scrollLeft: 0, // 距离左边的位置
+      containerWidth: 0, // 容器的宽度
+      current: 0 // 当前选中项
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.current = newVal
+      this.$nextTick(() => {
+        this.getTabItemWidth()
+      })
+    },
+    current(newVal) {
+      this.$emit('input', newVal)
+    },
+    tabs(newVal) {
+      this.$nextTick(() => {
+        this.getTabItemWidth()
+      })
+    }
+  },
+  methods: {
+    // 产生随机字符串
+    randomString(len) {
+      len = len || 32
+      let $chars =
+        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+      let maxPos = $chars.length
+      let pwd = ''
+      for (let i = 0; i < len; i++) {
+        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
+      }
+      return pwd
+    },
+    // 切换事件
+    change(index) {
+      if (this.current !== index) {
+        this.current = index
+
+        this.$emit('change', index)
+      }
+    },
+    // 获取左移动位置
+    getTabItemWidth() {
+      let query = uni
+        .createSelectorQuery()
+        // #ifndef MP-ALIPAY
+        .in(this)
+      // #endif
+      // 获取容器的宽度
+      query
+        .select(`#scrollContainer`)
+        .boundingClientRect((data) => {
+          if (!this.containerWidth && data) {
+            this.containerWidth = data.width
+          }
+        })
+        .exec()
+      // 获取所有的 tab-item 的宽度
+      query
+        .selectAll('.v-tabs__container-item')
+        .boundingClientRect((data) => {
+          if (!data) {
+            return
+          }
+          let lineLeft = 0
+          let currentWidth = 0
+          if (data) {
+            for (let i = 0; i < data.length; i++) {
+              if (i < this.current) {
+                lineLeft += data[i].width
+              } else if (i == this.current) {
+                currentWidth = data[i].width
+              } else {
+                break
+              }
+            }
+          }
+          // 当前滑块的宽度
+          this.currentWidth = currentWidth
+          // 缩放后的滑块宽度
+          this.lineWidth = currentWidth * this.lineScale * 1
+          // 滑块作移动的位置
+          this.lineLeft = lineLeft + currentWidth / 2
+          // 胶囊距离左侧的位置
+          this.pillsLeft = lineLeft
+          // 计算滚动的距离左侧的位置
+          if (this.scroll) {
+            this.scrollLeft = this.lineLeft - this.containerWidth / 2
+          }
+        })
+        .exec()
+    }
+  },
+  mounted() {
+    this.elId = 'xfjpeter_' + this.randomString()
+    this.current = this.value
+    this.$nextTick(() => {
+      this.getTabItemWidth()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-tabs {
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__container {
+    min-width: 100%;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      position: relative;
+      z-index: 10;
+      // padding: 0 11px;
+      transition: all 0.3s;
+      white-space: nowrap;
+    }
+
+    &-line {
+      position: absolute;
+      bottom: 0;
+      transition: all 0.3s linear;
+    }
+
+    &-pills {
+      position: absolute;
+      transition: all 0.3s linear;
+      z-index: 9;
+    }
+  }
+}
+</style>

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxdf31489738c33763",
+        "appid" : "wx889d7d76e7aa3cd3",
         "setting" : {
             "urlCheck" : false
         },

pages.json

@@ -3,7 +3,16 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "空i企"
+				"navigationBarTitleText": "空i企",
+				 "navigationStyle":"custom"  
+			}
+		},
+		{
+			"path": "pages/park/park_deatil",
+			"style": {
+				"navigationBarTitleText": "园区概况",
+				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
 			}
 		},
 		{
@@ -40,14 +49,7 @@
 				"navigationBarTextStyle":"white"
 			}
 		},
-		{
-			"path": "pages/park/park_deatil",
-			"style": {
-				"navigationBarTitleText": "园区概况",
-				"navigationBarBackgroundColor": "#02A7F0",
-				"navigationBarTextStyle":"white"
-			}
-		},
+	
 		{
 			"path": "pages/activity/index",
 			"style": {

pages/park/park_deatil.vue

@@ -5,14 +5,129 @@
 		 		indicator-dots="true" 
 				 autoplay="true" 
 		 		 duration="500"	
-				 style="height:400rpx">
+				 style="height:300rpx">
 		 		<swiper-item v-for="(item , index) in swiperList" :key="index">
 		 			<image :src="item.img" mode="aspectFill" style="width: 100%;height: 100%;"></image>
 		 		</swiper-item>
 		 	</swiper>
 		 </view>
-		 </view> 
-		 
+	
+	    <view class="header-detail-box">
+			
+			<view class="header-title">
+				{{detailObj.parkName}}
+			</view>
+			
+			<view class="header-content-box display-around display-wrap">
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start"><image src="/static/park/detail/enterprise.png" mode="aspectFill" class="park-footer-img"></image>{{detailObj.nums}}</view>
+					  <view class="park-footer-font">入驻企业</view>
+				</view>
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start">
+						  <image src="/static/park/detail/mu.png" mode="aspectFill" class="park-footer-img"></image>
+						  {{detailObj.area1}}<text style="font-size: 12rpx;">万亩</text>
+					  </view>
+					  <view class="park-footer-font">占地亩数</view>
+				</view>
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start">
+						  <image src="/static/park/detail/rent.png" mode="aspectFill" class="park-footer-img"></image>
+						  {{detailObj.price}}<text style="font-size: 12rpx;">元/㎡/月</text>
+					  </view>
+					  <view class="park-footer-font">租赁价格</view>
+				</view>
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start">
+						  <image src="/static/park/detail/area.png" mode="aspectFill" class="park-footer-img"></image>
+						  {{detailObj.area2}}<text style="font-size: 12rpx;">万㎡</text>
+					  </view>
+					  <view class="park-footer-font">建设面积</view>
+				</view>
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start">
+						  <image src="/static/park/detail/area1.png" mode="aspectFill" class="park-footer-img"></image>
+						  {{detailObj.area3}}<text style="font-size: 12rpx;">万㎡</text>
+					  </view>
+					  <view class="park-footer-font">出租面积</view>
+				</view>
+				<view class="display-between-column items-center width-30 margin-bottom-20">
+					  <view class="display-flex-start"><image src="/static/park/detail/level.png" mode="aspectFill" class="park-footer-img"></image>{{detailObj.level}}</view>
+					  <view class="park-footer-font">园区级别</view>
+				</view>
+			</view>
+			
+		</view>
+	
+	    
+	    <view class="header-detail-box">
+	    	
+	    	<view class="header-title">
+	    		园区基本信息
+	    	</view>
+	    	
+			<view class="display-around-column content-font">
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">运营机构</view>
+					<view>{{detailObj.parkName}}</view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">产业定位</view>
+					<view>{{detailObj.direction}}</view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">园区类型</view>
+					<view>{{detailObj.type}}</view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">物业费</view>
+					<view>{{detailObj.property}}<text style="font-size: 16rpx;">元/㎡/月</text></view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">电费</view>
+					<view>{{detailObj.elePrice}}<text style="font-size: 16rpx;">KW·h</text></view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">水费</view>
+					<view>{{detailObj.waterPrice}}<text style="font-size: 16rpx;">m³</text></view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">一层楼高</view>
+					<view>{{detailObj.oneHeight}}<text style="font-size: 16rpx;">m</text></view>
+				</view>
+				<view  class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">最大承重</view>
+					<view>{{detailObj.bearing}}<text style="font-size: 16rpx;">kg</text></view>
+				</view>
+				<view class="display-flex-start items-center margin-bottom-20">
+					<view class="width-30 margin-left-60 color-cf">联系电话</view>
+					<view @click="makeCall(detailObj.tel)" style="color: #007AFF;">{{detailObj.tel}}</view>
+				</view>
+				<view class="display-flex-start items-center">
+					<view class="width-30 margin-left-60 color-cf">详细地址</view>
+					<view>{{detailObj.address}}</view>
+				</view>
+			</view>
+	    	
+			<map style="width: 100%;height: 300rpx;margin-top: 20rpx;" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="goTxMap(latitude,longitude)">
+			</map>
+	  
+		</view>
+	    
+		<view class="detail-footer-tabs">
+		   <v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
+		   <view class="tabs-box">
+			  <view v-if="current == 0" class="margin-bottom-20 content-font">
+				{{detailObj.introduce}}
+			  </view>
+			  <view v-if="current == 1" class="margin-bottom-20 content-font">
+			  	{{detailObj.facilities}}
+			  </view>
+			</view>
+		</view>
+	   
+		<footer-share style="width: 100%;" :isCollection="false"></footer-share>
+	</view> 
 	</view>
 </template>
 
@@ -28,13 +143,57 @@
 						img:'/static/swiper/swiper2.jpg'
 					},
 				],
+				detailObj:{
+					parkName:'新鸿辉工业园',
+					nums:484,
+					area1:1,
+					price:20,
+					area2:1.2,
+					area3:0.9,
+					level:'区级',
+					direction:'制造,智能制造',
+					type:'工业厂房，办公写字楼，商业综合体',
+					property:1,
+					elePrice:1.1,
+					waterPrice:8,
+					oneHeight:4.5,
+					bearing:750, //承重
+					tel:'81190876',
+					address:'西咸新区空港新城底张镇',
+					introduce:'新鸿辉工业园坐落于陕西省西安市西咸新区空港新城底张镇，占地面积一万平方米，内有大小企业共484家。',
+					facilities:'食堂、停车场、公寓、咖啡厅、便利店' //设施
+				},
+				 latitude: 39.909,
+				 longitude: 116.39742,
+				 covers: [{
+					 latitude: 39.909,
+					 longitude: 116.39742,
+				 }],
+				current: 0,
+				tabs: ['园区介绍', '配套设施']
 			}
 		},
 		onLoad(option) {
            console.log(option)
 		},
 		methods: {
-    }
+			makeCall(tel){
+				uni.makePhoneCall({
+					phoneNumber:tel
+				})
+			},
+			goTxMap(la,lo){
+				uni.openLocation({
+					latitude:la,
+					longitude:lo,
+					name:'新鸿辉工业园',
+					address:'新鸿辉工业园'
+				})
+			},
+			changeTab(index) {
+			  console.log('当前选中的项：' + index)
+			}
+		}
 	}
 </script>
 
@@ -64,5 +223,56 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
-	
+	.header-title {
+		font-size: 28rpx;
+		font-weight: 600;
+		line-height: 36rpx;
+		letter-spacing: 0.02em;
+		color: #0D1937;
+		margin: 20rpx 0 25rpx 10rpx;
+	}
+	.header-content-box {
+		font-size: 24rpx;
+	}
+	.header-detail-box {
+		width: 90%;
+		border-radius: 10rpx;
+		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
+		margin-top: 20rpx;
+		padding: 20rpx;
+	}
+	.park-footer-img{
+		width: 24rpx;
+		height: 24rpx;
+		margin-right: 6rpx;
+	}
+	.park-footer-font {
+		color: #CFCFCF;
+		font-size: 19rpx;
+		margin-top: 10rpx;
+	}
+	.width-30 {
+		width: 30%;
+	}
+	.content-font {
+		font-size: 20rpx;
+	}
+	.margin-left-60 {
+		margin-left: 60rpx;
+	}
+	.margin-bottom-20 {
+		margin-bottom: 20rpx;
+	}
+	.color-cf {
+		color: #ccc;
+	}
+	.detail-footer-tabs {
+		width: 90%;
+		padding: 20rpx;
+		margin-bottom:80rpx;
+	}
+	.tabs-box {
+		padding-left: 20rpx;
+		margin-top: 20rpx;
+	}
 </style>