|
|
@@ -11,6 +11,8 @@
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
<!-- 引入组件库 -->
|
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+ <!-- jquery-->
|
|
|
+ <script src="js/jquery-3.5.1.min.js"></script>
|
|
|
<style>
|
|
|
* {
|
|
|
padding: 0;
|
|
|
@@ -187,15 +189,15 @@
|
|
|
</div>
|
|
|
<div id="titleTabs">
|
|
|
<div class="tab">
|
|
|
- <div class="tab-items" :class="{ active: currentTab === tab.id }" v-for="(tab, index) in titleList"
|
|
|
- :key="index" @click="currentTab = tab.id">
|
|
|
+ <div class="tab-items" :class="{ active: currentTab === titleList.id }" v-for="(tab, index) in this.titleList"
|
|
|
+ :key="index" @click="currentTab = titleList.id">
|
|
|
<div class="name">
|
|
|
- {{tab.name}}
|
|
|
+ {{tab.title}}
|
|
|
</div>
|
|
|
<ul class="tab-contents">
|
|
|
- <li v-for="(tabl, indexl) in tab.listitem" :key="indexl">
|
|
|
+ <li v-for="(tabl, indexl) in tab.subtitleList" :key="indexl">
|
|
|
<img src="images/listlogo.png" alt="" />
|
|
|
- <div class="name">{{tabl.name}}</div>
|
|
|
+ <div class="name">{{tabl}}</div>
|
|
|
</li>
|
|
|
<li class="more" @click="tsmore()">
|
|
|
探索更多>>
|
|
|
@@ -216,122 +218,38 @@
|
|
|
return {
|
|
|
currentTab: 1,
|
|
|
titleList: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "茶园工业园",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "先进汽车电子产业园",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "长江绿色创新产业园",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "南坪西区产业园",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- name: "迎龙创新港",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- name: "大学科技园",
|
|
|
- listitem: [
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "5G产业园"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "高通·栖谷"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "重庆服装城"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
|
|
|
+ ],
|
|
|
+ // parkData: {
|
|
|
+ // id:[],
|
|
|
+ // title:[],
|
|
|
+ // subtitle:[]
|
|
|
+ // },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
tsmore() {
|
|
|
window.location.href = "indexcygyy.html"
|
|
|
+ },
|
|
|
+ getParkData(){
|
|
|
+ let that=this;
|
|
|
+ $.ajax({
|
|
|
+ url: "http://localhost:8082/parkData/",
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data) {
|
|
|
+
|
|
|
+ data.forEach(function (item) {
|
|
|
+ item.subtitleList=item.subtitle?item.subtitle.split(","):[];
|
|
|
+ })
|
|
|
+ that.titleList=data;
|
|
|
+ console.log(data);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getParkData();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
xyg