|
|
@@ -255,7 +255,7 @@
|
|
|
"
|
|
|
>
|
|
|
<img
|
|
|
- style="min-height: 15.5vh"
|
|
|
+ style="min-height: 15.5%"
|
|
|
:src="` ${
|
|
|
item.coverImg.includes('https')
|
|
|
? item.coverImg
|
|
|
@@ -322,7 +322,7 @@
|
|
|
</div>
|
|
|
<div class="result-box" id="result-box-div">
|
|
|
<!-- 日期排布 -->
|
|
|
- <div v-show="productActive === '大事纪'" class="category-box">
|
|
|
+ <div v-show="productActive === '大事记'" class="category-box">
|
|
|
<div
|
|
|
class="box-item"
|
|
|
v-for="item in daShiJiList"
|
|
|
@@ -335,8 +335,8 @@
|
|
|
</div>
|
|
|
<div
|
|
|
class="result-html"
|
|
|
- v-if="productActive === '大事纪'"
|
|
|
- :style="{ marginTop: productActive === '大事纪' ? '80px' : '' }"
|
|
|
+ v-if="productActive === '大事记'"
|
|
|
+ :style="{ marginTop: productActive === '大事记' ? '80px' : '' }"
|
|
|
>
|
|
|
<div
|
|
|
v-html="item.text"
|
|
|
@@ -550,7 +550,7 @@ export default {
|
|
|
offsetTopArr: [],
|
|
|
detailId: null,
|
|
|
productActive: "历史",
|
|
|
- // 大事纪高亮月份
|
|
|
+ // 大事记高亮月份
|
|
|
productYearActive: {},
|
|
|
daShiJiList: [],
|
|
|
productHtml: "",
|
|
|
@@ -755,7 +755,6 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
getInitData() {
|
|
|
-
|
|
|
// 新简介细节（从后台获取）
|
|
|
this.$request.get("/show/about/getList").then((res) => {
|
|
|
let introduction = [];
|
|
|
@@ -768,9 +767,8 @@ export default {
|
|
|
|
|
|
this.changeType(introduction[0]);
|
|
|
|
|
|
- this.introduction = [...introduction,...this.dataAll.product.list];
|
|
|
+ this.introduction = [...introduction, ...this.dataAll.product.list];
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
openHtml(href, id) {
|
|
|
if (!href) return;
|
|
|
@@ -790,7 +788,7 @@ export default {
|
|
|
changeType(item) {
|
|
|
console.log("changeType", item);
|
|
|
this.productActive = item.name;
|
|
|
- item.name === "大事纪"
|
|
|
+ item.name === "大事记"
|
|
|
? ((this.daShiJiList = item.list), this.changeYear(item.list[0]))
|
|
|
: "";
|
|
|
// this.productHtml = item.rtf?decodeURIComponent(item.rtf): item.text;
|
|
|
@@ -928,8 +926,9 @@ export default {
|
|
|
left: -50px;
|
|
|
}
|
|
|
|
|
|
-/deep/#result-box-div img{
|
|
|
-max-width: 90%;}
|
|
|
+/deep/#result-box-div img {
|
|
|
+ width: 90%;
|
|
|
+}
|
|
|
|
|
|
.home {
|
|
|
width: 100%;
|
|
|
@@ -983,8 +982,8 @@ max-width: 90%;}
|
|
|
}
|
|
|
|
|
|
.openVideo-box {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
@@ -1044,17 +1043,17 @@ max-width: 90%;}
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 28vh 0 25vh 10%;
|
|
|
+ padding: 28% 0 25% 10%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.village {
|
|
|
img {
|
|
|
- width: 16.5vw;
|
|
|
+ width: 16.5%;
|
|
|
height: 39.5%;
|
|
|
position: absolute;
|
|
|
- right: -28.3vw;
|
|
|
+ right: -28.3%;
|
|
|
top: 23.7%;
|
|
|
}
|
|
|
}
|
|
|
@@ -1090,7 +1089,7 @@ max-width: 90%;}
|
|
|
}
|
|
|
|
|
|
.tabbar-list {
|
|
|
- width: 20vw;
|
|
|
+ width: 20%;
|
|
|
height: 100%;
|
|
|
background: #0a2629ab;
|
|
|
position: absolute;
|
|
|
@@ -1100,7 +1099,7 @@ max-width: 90%;}
|
|
|
|
|
|
.title {
|
|
|
width: 100%;
|
|
|
- height: 7vh;
|
|
|
+ height: 7%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
@@ -1113,7 +1112,7 @@ max-width: 90%;}
|
|
|
|
|
|
.list {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 7vh);
|
|
|
+ height: 93%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
@@ -1121,7 +1120,7 @@ max-width: 90%;}
|
|
|
&-item {
|
|
|
animation: numeInLeft 3s 1 0s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
|
width: 100%;
|
|
|
- height: 10vh;
|
|
|
+ height: 10%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 10px;
|
|
|
@@ -1137,7 +1136,7 @@ max-width: 90%;}
|
|
|
color: white;
|
|
|
|
|
|
img {
|
|
|
- width: 4vw;
|
|
|
+ width: 4%;
|
|
|
}
|
|
|
|
|
|
.item-right {
|
|
|
@@ -1181,7 +1180,7 @@ max-width: 90%;}
|
|
|
}
|
|
|
|
|
|
.babar-content {
|
|
|
- width: calc(100% - 20vw);
|
|
|
+ width: 80%;
|
|
|
// width: 70%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -1269,7 +1268,7 @@ max-width: 90%;}
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
box-shadow: 5px 8px 10px #142c23;
|
|
|
- height: 16.8vh;
|
|
|
+ height: 16.8%;
|
|
|
background-image: url(@/assets/images/new/qjbg.png);
|
|
|
|
|
|
&:hover {
|
|
|
@@ -1282,14 +1281,14 @@ max-width: 90%;}
|
|
|
|
|
|
img {
|
|
|
width: calc(100% - 10px);
|
|
|
- height: calc(16.8vh - 14px);
|
|
|
+ height: calc(16.8% - 14px);
|
|
|
object-fit: fill;
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
.border {
|
|
|
width: 100%;
|
|
|
- height: 16.8vh;
|
|
|
+ height: 16.8%;
|
|
|
}
|
|
|
|
|
|
.shade-box {
|
|
|
@@ -1436,7 +1435,7 @@ max-width: 90%;}
|
|
|
box-shadow: 5px 8px 10px #142c23;
|
|
|
width: 98%;
|
|
|
height: 282px;
|
|
|
- margin-bottom: 4vh;
|
|
|
+ margin-bottom: 4%;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
z-index: 5;
|
|
|
@@ -1516,7 +1515,7 @@ max-width: 90%;}
|
|
|
color: white;
|
|
|
|
|
|
.dimension-box {
|
|
|
- width: 15vw;
|
|
|
+ width: 15%;
|
|
|
border-right: 1px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -1553,7 +1552,7 @@ max-width: 90%;}
|
|
|
|
|
|
.category-box {
|
|
|
display: flex;
|
|
|
- max-width: 40vw;
|
|
|
+ // max-width: 40%;
|
|
|
overflow: auto;
|
|
|
|
|
|
.box-item {
|
|
|
@@ -1583,7 +1582,7 @@ max-width: 90%;}
|
|
|
height: 28px;
|
|
|
margin-bottom: 11px;
|
|
|
position: relative;
|
|
|
- width: 16.8vw;
|
|
|
+ width: 16.8%;
|
|
|
|
|
|
input {
|
|
|
border: none;
|
|
|
@@ -1638,12 +1637,13 @@ max-width: 90%;}
|
|
|
// overflow-y: hidden;
|
|
|
justify-items: center;
|
|
|
height: calc(100% - 55px);
|
|
|
- overflow-x: hidden;
|
|
|
- overflow-y: scroll;
|
|
|
+ // overflow-x: hidden;
|
|
|
+ // overflow-y: scroll;
|
|
|
// align-items: center;
|
|
|
font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 20px;
|
|
|
+ overflow: auto;
|
|
|
color: #ffffff !important;
|
|
|
line-height: 36px;
|
|
|
letter-spacing: 1px;
|
|
|
@@ -1779,8 +1779,11 @@ max-width: 90%;}
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
width: 43%;
|
|
|
- height: 100vh;
|
|
|
+ height: 100%;
|
|
|
overflow: hidden;
|
|
|
+ /deep/div {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@keyframes bounceopacity {
|
|
|
@@ -1863,4 +1866,21 @@ max-width: 90%;}
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 手机端
|
|
|
+
|
|
|
+// @media screen and (max-width: 1200px) {
|
|
|
+// .box-item {
|
|
|
+// width: 80px !important;
|
|
|
+// }
|
|
|
+// .select-box {
|
|
|
+// font-size: 26px;
|
|
|
+// }
|
|
|
+// .result-html {
|
|
|
+// font-size: 26px;
|
|
|
+// }
|
|
|
+// .list-item{
|
|
|
+// font-size: 26px;
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|
