|
|
@@ -74,11 +74,12 @@
|
|
|
|
|
|
#map {
|
|
|
width: 60%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.contentR {
|
|
|
- width: 40%;
|
|
|
+ width: calc(40% - 10px);
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -133,6 +134,15 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+ .mainTab>span:hover {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activeTab {
|
|
|
+ background-color: rgba(0, 0, 0, .4) !important;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
.main>div {
|
|
|
width: 100%;
|
|
|
}
|
|
|
@@ -161,7 +171,7 @@
|
|
|
|
|
|
.yqlb {
|
|
|
display: grid;
|
|
|
- padding: 0.9rem;
|
|
|
+ padding: 0 0 0.9rem 0.9rem;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
|
grid-column-gap: 0.2rem;
|
|
|
@@ -178,16 +188,33 @@
|
|
|
-ms-overflow-style: none;
|
|
|
scrollbar-width: none;
|
|
|
box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ztfw {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 20px;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ scrollbar-width: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.tdgyList {
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid rgba(245, 250, 255, .2);
|
|
|
+ cursor: pointer;
|
|
|
padding: 5px 0;
|
|
|
overflow: hidden;
|
|
|
word-break: break-all;
|
|
|
white-space: nowrap;
|
|
|
width: 100%;
|
|
|
+ position: relative;
|
|
|
+ -webkit-animation: 40s rowup linear infinite normal;
|
|
|
+ animation: 40s rowup linear infinite normal;
|
|
|
}
|
|
|
|
|
|
.tdgyList:last-child {
|
|
|
@@ -202,6 +229,31 @@
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
+ .ztfwList:last-child {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ztfwList>img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ztfwList {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgba(245, 250, 255, .2);
|
|
|
+ padding: 5px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ -webkit-animation: 20s rowupzt linear infinite normal;
|
|
|
+ animation: 20s rowupzt linear infinite normal;
|
|
|
+ }
|
|
|
+
|
|
|
.tdgyContent {
|
|
|
width: calc(100% - 35px);
|
|
|
}
|
|
|
@@ -411,6 +463,7 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
+ <div style="width:100%;height:570px" class="header"></div>
|
|
|
<div class="" id="cytz">
|
|
|
<div class="top">
|
|
|
<div class="toplogo">
|
|
|
@@ -427,10 +480,14 @@
|
|
|
<div class="contentR">
|
|
|
<div class="location"><i class="el-icon-location"></i> 南岸区</div>
|
|
|
<div class="contentBox">
|
|
|
- <div class="contentItem"></div>
|
|
|
<div class="contentItem">
|
|
|
- <div class="mainTab"><span @click="switchTab(1)">区位条件</span><span @click="switchTab(2)">创新优势</span><span
|
|
|
- @click="switchTab(3)">产业特色</span></div>
|
|
|
+ <video autoplay loop muted playsinline style="width:100%;height: 100%;">
|
|
|
+ <source style="width:100%;height: 100%;" src="media/业.ecabc222.mp4" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <div class="contentItem">
|
|
|
+ <div class="mainTab"><span class="activeTab" @click="switchTab(1)">区位条件</span><span
|
|
|
+ @click="switchTab(2)">创新优势</span><span @click="switchTab(3)">产业特色</span></div>
|
|
|
<div class="main">
|
|
|
<div v-show="this.activeName===1">
|
|
|
<li><img src="image/listcricle.png" />15分钟直达江北国际机场，20分钟可抵重庆西部物流园</li>
|
|
|
@@ -477,17 +534,18 @@
|
|
|
<span class="text">园区列表</span>
|
|
|
</div>
|
|
|
<div class="yqlb">
|
|
|
- <div class="mainList" v-for="(tab, index) in this.titleList"
|
|
|
- @click="golink(`indexsyy.html?id=${tab.id}`)" :key="index"> {{tab.title}}</div>
|
|
|
+ <div class="mainList" v-for="(tab, index) in this.titleList" @click="golink(`dqfwNew.html?id=${tab.id}`)"
|
|
|
+ :key="index"> {{tab.title}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="contentItem" style="background:url(image/tdgybg.png) no-repeat;background-size: 100% 100%;">
|
|
|
<div class="title">
|
|
|
<span class="text">土地供应</span>
|
|
|
- <span class="more" @click="golink('tdcrlist.html',1)">更多>></span>
|
|
|
+ <span class="more" @click="golink('tdcrlist.html?id=-1',1)">更多>></span>
|
|
|
</div>
|
|
|
<div class="tdgy">
|
|
|
- <div class="tdgyList" v-for="(tab, index) in this.contentList" :key="index">
|
|
|
+ <div :data="contentList" class="tdgyList" v-for="(tab, index) in this.contentList"
|
|
|
+ @click="golink('tdcr.html?tdid=' + tab.id)" :key="index">
|
|
|
<img src="image/listcricle.png" />
|
|
|
<div class="tdgyContent">
|
|
|
<div class="tdgyTitle">{{tab.landName}}</div>
|
|
|
@@ -502,8 +560,9 @@
|
|
|
<span class="text">载体服务</span>
|
|
|
<span class="more" @click="golink('ztcrlist.html',2)">更多>></span>
|
|
|
</div>
|
|
|
- <div class="tdgy">
|
|
|
- <div class="tdgyList" v-for="(tab, index) in this.buildList" :key="index">
|
|
|
+ <div class="ztfw">
|
|
|
+ <div class="ztfwList" v-for="(tab, index) in this.buildList"
|
|
|
+ @click="golink('ztcrdetail.html?ztid=' + tab.id)" :key="index">
|
|
|
<img src="image/listcricle.png" />
|
|
|
<div class="tdgyContent">
|
|
|
<div class="tdgyTitle">{{tab.carrierName}}</div>
|
|
|
@@ -520,7 +579,7 @@
|
|
|
<div class="yqfwBox mb" @click="golink('tsfw.html')">
|
|
|
<img src="image/listcricle.png" />特色服务
|
|
|
</div>
|
|
|
- <div class="yqfwBox mb" @click="golink('dqfw.html')">
|
|
|
+ <div class="yqfwBox mb" @click="tolink('dqfw.html')">
|
|
|
<img src="image/listcricle.png" />党群服务
|
|
|
</div>
|
|
|
<div class="yqfwBox" @click="window.open('wybdb.html')">
|
|
|
@@ -535,8 +594,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div style="width:100%;" class="footer"></div>
|
|
|
</body>
|
|
|
<script>
|
|
|
+ $(function () {
|
|
|
+ /*公共部分
|
|
|
+ * 导航栏
|
|
|
+ * footer CopyRight
|
|
|
+ */
|
|
|
+ $(".header").load('https://www.cqna.gov.cn/ggbf_search/top/top_style.html');
|
|
|
+ $(".footer").load('https://www.cqna.gov.cn/ggbf_search/ggyr/2022foot/bottomBlack.html');
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<script>
|
|
|
// 初始化Vue实例
|
|
|
new Vue({
|
|
|
el: '#cytz',
|
|
|
@@ -558,15 +628,21 @@
|
|
|
};
|
|
|
},
|
|
|
created() { },
|
|
|
- mounted() {
|
|
|
+ async mounted() {
|
|
|
const url = new URL(window.location.href);
|
|
|
this.id = url.searchParams.get('id');
|
|
|
- this.getParkData()
|
|
|
+ await this.getParkData()
|
|
|
this.loadAllMap()
|
|
|
},
|
|
|
methods: {
|
|
|
switchTab(val) {
|
|
|
this.activeName = val
|
|
|
+ const arr = document.querySelectorAll('.mainTab>span')
|
|
|
+ arr.forEach(item => {
|
|
|
+ item.classList.remove('activeTab')
|
|
|
+ arr[val - 1].classList.add('activeTab')
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
goIndex() {
|
|
|
window.location.href = "indexsyyg.html"
|
|
|
@@ -577,6 +653,9 @@
|
|
|
golink(hrf, val) {
|
|
|
window.location.href = hrf;
|
|
|
},
|
|
|
+ tolink(hrf, val) {
|
|
|
+ window.location.href = `${hrf}?id=1`;
|
|
|
+ },
|
|
|
getParkAllPoint() {
|
|
|
let that = this;
|
|
|
var points;
|
|
|
@@ -591,6 +670,19 @@
|
|
|
});
|
|
|
return points;
|
|
|
},
|
|
|
+ addKey(y) {
|
|
|
+ var style = document.createElement('style');
|
|
|
+ style.type = 'text/css';
|
|
|
+ var keyFrames = '\
|
|
|
+ @keyframes rowup {\
|
|
|
+ 100% {\
|
|
|
+ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
|
|
|
+ top: -A_DYNAMIC_VALUEpx;\
|
|
|
+ }\
|
|
|
+ }';
|
|
|
+ style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
|
|
|
+ document.getElementsByClassName('ztfw')[0].appendChild(style);
|
|
|
+ },
|
|
|
loadAllMap() {
|
|
|
var that = this;
|
|
|
fetch('js/najson.json')
|
|
|
@@ -718,9 +810,9 @@
|
|
|
.catch(error => console.error('Error fetching JSON:', error));
|
|
|
|
|
|
},
|
|
|
- getParkData() {
|
|
|
+ async getParkData() {
|
|
|
let that = this;
|
|
|
- $.ajax({
|
|
|
+ await $.ajax({
|
|
|
url: conpath + "/parkData/",
|
|
|
type: "get",
|
|
|
dataType: "json",
|
|
|
@@ -733,7 +825,7 @@
|
|
|
that.titleList = data;
|
|
|
}
|
|
|
})
|
|
|
- $.ajax({
|
|
|
+ await $.ajax({
|
|
|
url: conpath + "/sellLand",
|
|
|
type: "post",
|
|
|
contentType: 'application/json',
|
|
|
@@ -749,7 +841,7 @@
|
|
|
that.contentList = dataList;
|
|
|
}
|
|
|
});
|
|
|
- $.ajax({
|
|
|
+ await $.ajax({
|
|
|
url: conpath + "/sellBuild",
|
|
|
type: "post",
|
|
|
contentType: 'application/json',
|
|
|
@@ -766,6 +858,25 @@
|
|
|
that.buildList = dataList;
|
|
|
}
|
|
|
});
|
|
|
+ var height = document.querySelector('.tdgyList').clientHeight;
|
|
|
+ console.log(height);
|
|
|
+ this.addKeyFrames('-' + height * this.contentList.length + 'px');
|
|
|
+ var height1 = document.querySelector('.ztfwList').clientHeight;
|
|
|
+ console.log(height1);
|
|
|
+ this.addKey('-' + height1 * this.buildList.length + 'px');
|
|
|
+ },
|
|
|
+ addKeyFrames(y) {
|
|
|
+ var style = document.createElement('style');
|
|
|
+ style.type = 'text/css';
|
|
|
+ var keyFrames = '\
|
|
|
+ @keyframes rowupzt {\
|
|
|
+ 100% {\
|
|
|
+ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
|
|
|
+ top: -A_DYNAMIC_VALUEpx;\
|
|
|
+ }\
|
|
|
+ }';
|
|
|
+ style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
|
|
|
+ document.getElementsByClassName('tdgy')[0].appendChild(style);
|
|
|
}
|
|
|
}
|
|
|
});
|
tml
