首次提交

master
tangyi 2022-02-15 10:14:02 +08:00
parent 3b93867aa6
commit f6e60f1d78
6 changed files with 130 additions and 41 deletions

View File

@ -25,6 +25,7 @@
box-shadow: 0px -19px 69px #000 inset; box-shadow: 0px -19px 69px #000 inset;
} }
.nav{ .nav{
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
width: 250px; width: 250px;
@ -32,6 +33,7 @@
height: 100%; height: 100%;
padding-top: 60px; padding-top: 60px;
box-sizing: border-box; box-sizing: border-box;
position: absolute;
text-align: center; text-align: center;
} }
.navTop{ .navTop{
@ -128,7 +130,7 @@
width: 1440px; width: 1440px;
margin: auto; margin: auto;
} }
.navLsit>.on{ .navLsit .on{
color: #fff; color: #fff;
} }
.text{ .text{
@ -145,7 +147,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 74px; padding-bottom: 74px;
justify-content: space-between; justify-content: flex-end;
} }
.contentPage{ .contentPage{
overflow-y:auto ; overflow-y:auto ;
@ -246,6 +248,7 @@ padding-top: 60px;
color: #e8e8e8; color: #e8e8e8;
} }
.honoraryCertificate .title{ .honoraryCertificate .title{
font-size: 44px; font-size: 44px;
margin-bottom: 43px; margin-bottom: 43px;
@ -253,6 +256,7 @@ font-style:italic;
padding-top: 30px; padding-top: 30px;
text-align: center; text-align: center;
color: #e8e8e8; color: #e8e8e8;
animation: myfirste 2s;
} }
.honoraryCertificateCon>.list{ .honoraryCertificateCon>.list{
width: 950px; width: 950px;
@ -263,8 +267,12 @@ align-items: center;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 12px; margin-bottom: 12px;
transition: all 1s;
}
.honoraryCertificateCon>.list:hover{
transition: all 1s;
transform: scale(1.1);
} }
.honoraryCertificateCon>.list .listImg{ .honoraryCertificateCon>.list .listImg{
height: 130px; height: 130px;
width: 180px; width: 180px;
@ -302,9 +310,7 @@ margin-bottom: 12px;
margin-right: -300px; margin-right: -300px;
padding-left: 200px; padding-left: 200px;
} }
.mainInterview{
justify-content: space-between;
}
.InterviewCon{ .InterviewCon{
overflow: hidden; overflow: hidden;
padding-left: 30px; padding-left: 30px;
@ -368,6 +374,7 @@ margin-bottom: 12px;
font-size: 44px; font-size: 44px;
color: #fefefe; color: #fefefe;
font-style:italic; font-style:italic;
animation: myfirstTe 2s;
text-align: center; text-align: center;
} }
.Interview .select{ .Interview .select{
@ -428,6 +435,7 @@ margin-bottom: 12px;
.projectIntroductionCon{ .projectIntroductionCon{
padding-left: 0px; padding-left: 0px;
width: 950px; width: 950px;
animation: myfirstTe 2s;
} }
.projectIntroductionCon .title{ .projectIntroductionCon .title{
@ -435,6 +443,7 @@ margin-bottom: 12px;
color: #fefefe; color: #fefefe;
font-style:italic; font-style:italic;
text-align: center; text-align: center;
} }
option{ option{
font-size: 20px; font-size: 20px;
@ -465,10 +474,13 @@ option{
} }
.projectIntroductionConMain{ .projectIntroductionConMain{
margin-left: 44px; margin-left: 44px;
padding-right: 30px;
} }
.projectIntroductionConMain{ .projectIntroductionConMain{
height: 596px; height: 596px;
overflow-x: auto; overflow-x: auto;
} }
.projectIntroductionConMain img{ .projectIntroductionConMain img{
max-width: 100%; max-width: 100%;
@ -489,7 +501,7 @@ option{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353; background: #EDEDED;
} }
@ -498,8 +510,8 @@ option{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px; border-radius: 10px;
background: #535353;
background: #EDEDED;
} }
.projectIntroductionDetails .title{ .projectIntroductionDetails .title{
@ -516,7 +528,7 @@ option{
} }
.projectIntroductionDetails{ .projectIntroductionDetails{
margin-left: 44px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.projectIntroductionDetailsNav{ .projectIntroductionDetailsNav{
@ -1321,6 +1333,7 @@ select{
margin-left: 0px; margin-left: 0px;
margin-top: 20px; margin-top: 20px;
height: auto; height: auto;
} }
.aboutUs>img{ .aboutUs>img{
left: 0px; left: 0px;
@ -1421,4 +1434,27 @@ select{
margin-top: 0px; margin-top: 0px;
opacity: 1; opacity: 1;
} }
}
@keyframes myfirste
{
from {
padding-top: 100vh;
opacity: 0;
}
to {
padding-top: 30px;
opacity: 1;
}
}
@keyframes projectConMainmyfirs
{
from {
padding-top: 100%;
opacity: 0;
}
to {
padding-top: 0px;
opacity: 1;
}
} }

View File

@ -38,7 +38,7 @@
<a href="./indexBrand.html">盛堂品牌</a> <a href="./indexBrand.html">盛堂品牌</a>
<a href="./aboutUs.html">關於Allen Zhou</a> <a href="./aboutUs.html">關於Allen Zhou</a>
<a class="on" href="./honoraryCertificate.html">資質榮譽 <a class="on" href="./honoraryCertificate.html">資質榮譽
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object> <object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a class="on" href="./Interview.html">人物專訪</a></object>
</a> </a>
<a href="./projectIntroduction.html">項目介紹</a> <a href="./projectIntroduction.html">項目介紹</a>
<a href="./brand.html">名品軟裝</a> <a href="./brand.html">名品軟裝</a>

View File

@ -52,7 +52,7 @@
<div class="aboutUs"> <div class="aboutUs">
<img src="../imgs/rw.png" alt=""> <img src="../imgs/rw.png" alt="">
<div class="aboutUsText"> <div class="aboutUsText">
<p class="aboutUsTitle">Allen Zhou</p> <p class="aboutUsTitle ">Allen Zhou</p>
<p class="aboutUsSubtitle">執行副總裁 </p> <p class="aboutUsSubtitle">執行副總裁 </p>
<p class="aboutUsSubtitle">管理合夥人</p> <p class="aboutUsSubtitle">管理合夥人</p>
<p class="aboutUsSubtitle">設計總監</p> <p class="aboutUsSubtitle">設計總監</p>

View File

@ -36,7 +36,7 @@
<a href="./indexBrand.html">盛堂品牌</a> <a href="./indexBrand.html">盛堂品牌</a>
<a href="./aboutUs.html">關於Allen Zhou</a> <a href="./aboutUs.html">關於Allen Zhou</a>
<a class="on" href="./honoraryCertificate.html">資質榮譽 <a class="on" href="./honoraryCertificate.html">資質榮譽
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object> <object class="make"><a class="on" href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object>
</a> </a>
<a href="./projectIntroduction.html">項目介紹</a> <a href="./projectIntroduction.html">項目介紹</a>
<a href="./brand.html">名品軟裝</a> <a href="./brand.html">名品軟裝</a>

View File

@ -24,29 +24,29 @@
</head> </head>
<body> <body>
<div class="nav conNav navIpd">
<div class="navTop">
<img src="../imgs/logo.png" alt="">
</div>
<div class="navLsit">
<a href="./contentPage.html">盛堂世家</a>
<a href="./indexBrand.html">盛堂品牌</a>
<a href="./aboutUs.html">關於Allen Zhou</a>
<a href="./honoraryCertificate.html">資質榮譽
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object>
</a>
<a class="on" href="./projectIntroduction.html">項目介紹</a>
<a href="./brand.html">名品軟裝</a>
<a href="./engineering.html">工程工藝 </a>
<a href="./contactUs.html">聯繫我們</a>
</div>
</div>
<div class="main"> <div class="main">
<img src="../imgs//xmjs.png" class="ber" alt=""> <img src="../imgs//xmjs.png" class="ber" alt="">
<div class="con"> <div class="con">
<div class="h100 mainCon mainInterview"> <div class="h100 mainCon mainInterview">
<div class="nav conNav navIpd">
<div class="navTop">
<img src="../imgs/logo.png" alt="">
</div>
<div class="navLsit">
<a href="./contentPage.html">盛堂世家</a>
<a href="./indexBrand.html">盛堂品牌</a>
<a href="./aboutUs.html">關於Allen Zhou</a>
<a href="./honoraryCertificate.html">資質榮譽
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object>
</a>
<a class="on" href="./projectIntroduction.html">項目介紹</a>
<a href="./brand.html">名品軟裝</a>
<a href="./engineering.html">工程工藝 </a>
<a href="./contactUs.html">聯繫我們</a>
</div>
</div>
<div class="projectIntroductionCon"> <div class="projectIntroductionCon">
<div class=""> <div class="">
@ -85,17 +85,13 @@
</div> </div>
<div class="projectIntroductionJt"> <div class="projectIntroductionJt">
<a href="" class="jth"><img src="../imgs/jt3.png" alt=""></a> <a rel="nofollow" onclick="addNum()" class="jth"><img src="../imgs/jt3.png" alt=""></a>
<a href="" class="jth"> <img src="../imgs/jt.png" alt=""></a> <a rel="nofollow" onclick="addNum()" class="jth"> <img src="../imgs/jt.png" alt=""></a>
</div> </div>
</div> </div>
<div class="projectIntroductionConMain"> <div class="projectIntroductionConMain">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
</div> </div>
@ -110,13 +106,13 @@
</div> </div>
</div>
<div class="footer"> <div class="footer">
<a href="">Copyright 2022 盛堂世家設計機構 All rights reserved 蜀ICP備12345678號 技术支持:全美网络 </a> <a href="">Copyright 2022 盛堂世家設計機構 All rights reserved 蜀ICP備12345678號 技术支持:全美网络 </a>
</div> </div>
</div>
<script src="../js/jquery.min.js"></script> <script src="../js/jquery.min.js"></script>
@ -132,8 +128,61 @@
<img src="../imgs/home.png" alt=""> <img src="../imgs/home.png" alt="">
</a> </a>
<script> <script>
$(".navCon").on("click", (e) => { let arr = ["開元集團光霧合谷酒店", "釋玥森林度假酒店",
"樂山.清水荷花素食餐廳",
"巴中通江主題酒店",
"甘南州臨潭縣臨潭大酒店",
"南部銘流主題酒店",
"長城國際酒店",
"康普雷斯國際酒店",
"紅原羅布林卡酒店",
"新疆庫爾勒金泰國際酒店",
"烏魯木齊天成國際酒店",
"長城國際酒店",
"康普雷斯國際酒店",
"寬窄巷子.天趣.紫園",
]
let dataArr = [` <img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
`, `
<div class="projectIntroductionDetails">
<p class="title">釋玥森林度假酒店</p>
<p class="p">專職為高品質業主、地產商、精品酒店,商業綜合體,企業大廈提供建築設計,室內外裝飾設計,園林景觀,家居,軟裝藝術配飾,機電設備,燈光,標識,藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體,也正是這個群體對於「家」所承載的責任和所能傳承的文化,盛堂世家就是專業服務於這樣一個群體的機構。 </p>
</div>
<div class="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
<img src="../imgs/imga.png" alt="">
</div>
`]
function dataMap(num = 0) {
console.log(dataArr[num]);
console.log(123); console.log(123);
console.log($(".projectIntroductionConMain"));
$(".projectIntroductionConMain").html(`${dataArr[num]}`)
}
dataMap()
let indexArr = 0
let strArr = ""
for (let index = indexArr * 14; index < (indexArr + 1) * 14; index++) {
strArr += `<p data-index=${index}>${v} </p>`
}
$(".projectIntroductionNav").html(
strArr
)
$($(".projectIntroductionNav>p")[0]).addClass("on")
$(".navCon").on("click", (e) => {
$(".navIpd").css("right", "0px") $(".navIpd").css("right", "0px")
e.preventDefault(); e.preventDefault();
@ -161,6 +210,7 @@
}) })
$(".projectIntroductionNav>p").on("click", function () { $(".projectIntroductionNav>p").on("click", function () {
dataMap($(this).data("index"))
$(".projectIntroductionNav>p").removeClass("on") $(".projectIntroductionNav>p").removeClass("on")
$(this).addClass("on") $(this).addClass("on")
@ -186,7 +236,9 @@
scrollbar: { scrollbar: {
el: '.swiper-scrollbar', el: '.swiper-scrollbar',
}, },
}) })
</script> </script>
</body> </body>

View File

@ -57,6 +57,7 @@
<option value="./engineering.html">工艺</option> <option value="./engineering.html">工艺</option>
</select> </select>
</div> </div>
<script> <script>
function selectFun(e) { function selectFun(e) {