|
@@ -114,19 +114,21 @@
|
|
|
|
|
|
#indexcygyy .menu {
|
|
|
width: 60%;
|
|
|
- max-width: 765px;
|
|
|
+ max-width: 1065px;
|
|
|
font-size: 1rem;
|
|
|
display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: center;
|
|
|
}
|
|
|
|
|
|
#indexcygyy .menu li {
|
|
|
+ width: 16%;
|
|
|
cursor: pointer;
|
|
|
white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
- #indexcygyy .menu .active {
|
|
|
+ #indexcygyy .menu .active span {
|
|
|
font-size: 1.25rem;
|
|
|
padding-bottom: 0.3125rem;
|
|
|
box-sizing: border-box;
|
|
@@ -253,6 +255,36 @@
|
|
|
font-size: 33px;
|
|
|
}
|
|
|
|
|
|
+ /* 淡出动画 */
|
|
|
+ .fade-out {
|
|
|
+ animation: fadeOut 1s forwards;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 淡入动画 */
|
|
|
+ .fade-in {
|
|
|
+ animation: fadeIn 1s forwards;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeOut {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
@media screen and (max-width:1600px) {
|
|
|
|
|
|
html,
|
|
@@ -300,7 +332,8 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div class="" id="indexcygyy">
|
|
|
+ <div class="" id="indexcygyy" :class="{ 'fade-out': fadeOut, 'fade-in': fadeIn }"
|
|
|
+ :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
|
|
|
<div class="backbutton" @click="back">
|
|
|
<img src="images/backlogo.png" alt="">
|
|
|
<span>返回</span>
|
|
@@ -313,8 +346,9 @@
|
|
|
</div>
|
|
|
<ul class="menu">
|
|
|
<li :class="{ active: currentTab == tab.id }" v-for="(tab, index) in this.titleList" :key="index"
|
|
|
- @click="menuChange(tab.id)">
|
|
|
- {{tab.title}}</li>
|
|
|
+ @click="menuChange(tab.id)" :style="{width:tab.textwidth+'px'}">
|
|
|
+ <span>{{tab.title}}</span>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="content">
|
|
@@ -350,13 +384,16 @@
|
|
|
el: '#indexcygyy',
|
|
|
data: function () {
|
|
|
return {
|
|
|
- reqPtah: 'http://8.137.113.116:8082',
|
|
|
+ reqPtah: 'http://183.64.61.180:8082',
|
|
|
currentTab: -1,
|
|
|
titleList: [],
|
|
|
currentTitle: '',
|
|
|
parkDesc: '',
|
|
|
swiperList: [
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ backgroundImage: 'images/indexcygyy.png',
|
|
|
+ fadeOut: false,
|
|
|
+ fadeIn: false
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -371,17 +408,46 @@
|
|
|
this.getDetailData(id);
|
|
|
this.currentTab = id;
|
|
|
this.getSellBuild(id);
|
|
|
- if (id == 4) {
|
|
|
- var bgClass = `bg-npxq`;
|
|
|
- } else if (id == 6) {
|
|
|
- var bgClass = `bg-dxkjy`;
|
|
|
- } else if (id == 5) {
|
|
|
- var bgClass = `bg-ylcxg`;
|
|
|
- } else {
|
|
|
- var bgClass = `bg-cygyy`;
|
|
|
- }
|
|
|
- $('#indexcygyy').removeClass();
|
|
|
- $('#indexcygyy').addClass(bgClass);
|
|
|
+ // if (id == 4) {
|
|
|
+ // var bgClass = `bg-npxq`;
|
|
|
+ // } else if (id == 6) {
|
|
|
+ // var bgClass = `bg-dxkjy`;
|
|
|
+ // } else if (id == 5) {
|
|
|
+ // var bgClass = `bg-ylcxg`;
|
|
|
+ // } else {
|
|
|
+ // var bgClass = `bg-cygyy`;
|
|
|
+ // }
|
|
|
+ // $('#indexcygyy').removeClass();
|
|
|
+ // $('#indexcygyy').addClass(bgClass);
|
|
|
+ // .bg-dxkjy {
|
|
|
+ // background-image: url() !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .bg-npxq {
|
|
|
+ // background-image: url() !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .bg-ylcxg {
|
|
|
+ // background-image: url(images/bg-ylcxg.jpg) !important;
|
|
|
+ // }
|
|
|
+ this.fadeOut = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (id == 4) {
|
|
|
+ this.backgroundImage = 'images/bg-npxq.png';
|
|
|
+ } else if (id == 6) {
|
|
|
+ this.backgroundImage = 'images/bg-dxkjy.png';
|
|
|
+ } else if (id == 5) {
|
|
|
+ this.backgroundImage = 'images/bg-ylcxg.jpg';
|
|
|
+ } else {
|
|
|
+ this.backgroundImage = 'images/indexcygyy.png';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.fadeOut = false;
|
|
|
+ this.fadeIn = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.fadeIn = false;
|
|
|
+ }, 1000);
|
|
|
+ }, 1000);
|
|
|
},
|
|
|
back() {
|
|
|
window.location.href = "indexsyyg.html"
|
|
@@ -413,7 +479,6 @@
|
|
|
d.logo = d.imgUrl ? d.imgUrl.split(",")[0] : '';
|
|
|
});
|
|
|
that.swiperList = dataList;
|
|
|
- console.log(that.swiperList)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -426,8 +491,10 @@
|
|
|
success: function (data) {
|
|
|
data.forEach(function (item) {
|
|
|
item.subtitleList = item.subtitle ? item.subtitle.split(",") : [];
|
|
|
+ item.textwidth = item.title.length * 20;
|
|
|
})
|
|
|
that.titleList = data;
|
|
|
+ console.log(that.titleList)
|
|
|
}
|
|
|
})
|
|
|
},
|