|
|
@@ -114,7 +114,7 @@
|
|
|
font-size: 1.37rem;
|
|
|
font-family: Microsoft YaHei;
|
|
|
letter-spacing: 2px;
|
|
|
- font-weight: 600;
|
|
|
+ /* font-weight: 600; */
|
|
|
padding: 25px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
@@ -217,7 +217,7 @@
|
|
|
color: #176ED0;
|
|
|
font-size: 1.375rem;
|
|
|
border-bottom: 1px solid #176ED0;
|
|
|
- width: calc(100% - 45px);
|
|
|
+ width: calc(100% - 50px);
|
|
|
margin: auto;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
@@ -279,6 +279,64 @@
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ /* Chrome Safari */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .jbqk {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk img {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk .list {
|
|
|
+ width: 189px;
|
|
|
+ height: 80px;
|
|
|
+ background: #4EB2AD;
|
|
|
+ display: flex;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ffffff;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text-indent: 0;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk .right>div {
|
|
|
+ text-align: left;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk .right>div span:last-child {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jbqk .right>div span:first-child {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cyfb {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 15px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
@keyframes fadeOut {
|
|
|
from {
|
|
|
opacity: 0.8;
|
|
|
@@ -330,7 +388,33 @@
|
|
|
:style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
|
|
|
<div class="title">
|
|
|
<span class="subtitle">{{parkName}}</span>
|
|
|
- <div class="mainTitle">{{parkDesc?parkDesc:'暂无简介'}}</div>
|
|
|
+ <div class="mainTitle">
|
|
|
+
|
|
|
+ <div class="jbqk">
|
|
|
+ <div class="list" style="">
|
|
|
+ <img src="images/jbqki1.png" alt="">
|
|
|
+ <div class="right">
|
|
|
+ <div>总面积</div>
|
|
|
+ <div><span id="totalSpace">-</span><span>平方公里</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list" style="background-color: #4B98F6;">
|
|
|
+ <img src="images/jbqki2.png" alt="">
|
|
|
+ <div class="right">
|
|
|
+ <div>建成面积</div>
|
|
|
+ <div><span id="buildSpace">-</span><span>平方公里</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list" style="background-color: #4BB664;">
|
|
|
+ <img src="images/jbqki3.png" alt="">
|
|
|
+ <div class="right" style="justify-content: flex-start;">
|
|
|
+ <div>产业分布</div>
|
|
|
+ <span class="cyfb" :title="jbqk.industry">{{this.jbqk.industry?this.jbqk.industry:'- '}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {{parkDesc?parkDesc:'暂无简介'}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="backbutton" @click="window.history.go(-1)">
|
|
|
<img src="images/backlogo.png" alt="">
|
|
|
@@ -353,7 +437,7 @@
|
|
|
<img src="images/arrowR.png" />
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li class="contentList" @click="golink('wybdb.html')">
|
|
|
+ <li class="contentList" @click="window.open('wybdb.html')">
|
|
|
<div class="listLeft">
|
|
|
<img src="images/bdbfw.png" /> 帮代办服务
|
|
|
</div>
|
|
|
@@ -377,6 +461,14 @@
|
|
|
<img src="images/arrowR.png" />
|
|
|
</div>
|
|
|
</li>
|
|
|
+ <li class="contentList" @click="golink('znxzchoice.html')">
|
|
|
+ <div class="listLeft">
|
|
|
+ <img src="images/tsfw2.png" /> 智能选址
|
|
|
+ </div>
|
|
|
+ <div class="listRight">
|
|
|
+ <img src="images/arrowR.png" />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
<li class="contentList" @click="dialogVisible=!dialogVisible">
|
|
|
<div class="listLeft">
|
|
|
<img src="images/mxqy.png" /> 明星企业
|
|
|
@@ -419,7 +511,8 @@
|
|
|
fadeOut: false,
|
|
|
fadeIn: false,
|
|
|
id: null,
|
|
|
- dialogVisible: false
|
|
|
+ dialogVisible: false,
|
|
|
+ jbqk: {}
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -518,6 +611,22 @@
|
|
|
}
|
|
|
|
|
|
},
|
|
|
+ animateValue(obj, start, end, duration) {
|
|
|
+ let startTimestamp = null;
|
|
|
+ const step = (timestamp) => {
|
|
|
+ if (!startTimestamp) startTimestamp = timestamp;
|
|
|
+ const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
|
+ obj.innerHTML = Math.floor(progress * (end - start) + start);
|
|
|
+ if (progress < 1) {
|
|
|
+ window.requestAnimationFrame(step);
|
|
|
+ } else {
|
|
|
+ obj.innerHTML = end;
|
|
|
+ obj.classList.remove('animate');
|
|
|
+ }
|
|
|
+ };
|
|
|
+ obj.classList.add('animate');
|
|
|
+ window.requestAnimationFrame(step);
|
|
|
+ },
|
|
|
getJBQK(id) {
|
|
|
let that = this;
|
|
|
$.ajax({
|
|
|
@@ -526,7 +635,16 @@
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
that.parkDesc = data.desc;
|
|
|
- that.parkName = data.title
|
|
|
+ that.jbqk = data;
|
|
|
+ that.parkName = data.title;
|
|
|
+ document.title = data.title;
|
|
|
+ const time = 500;
|
|
|
+ // 总面积
|
|
|
+ const totalSpaceElement = document.getElementById('totalSpace');
|
|
|
+ that.animateValue(totalSpaceElement, 0, data.totalArea ? parseFloat(data.totalArea).toFixed(2) : '-', time);
|
|
|
+ // 建成面积
|
|
|
+ const buildSpaceElement = document.getElementById('buildSpace');
|
|
|
+ that.animateValue(buildSpaceElement, 0, data.buildArea ? parseFloat(data.buildArea).toFixed(2) : '-', time);
|
|
|
}
|
|
|
})
|
|
|
},
|
MS-FUUVYHVOEAYJ\Administrator
