首次提交

css/style.css

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

htmls/Interview.html

@@ -38,7 +38,7 @@
                         <a href="./indexBrand.html">盛堂品牌</a>
                         <a href="./aboutUs.html">關於Allen Zhou</a>
                         <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 href="./projectIntroduction.html">項目介紹</a>
                         <a   href="./brand.html">名品軟裝</a>

htmls/aboutUs.html

@@ -52,7 +52,7 @@
                         <div class="aboutUs">
                       <img src="../imgs/rw.png" alt="">
                       <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>

htmls/honoraryCertificate.html

@@ -36,7 +36,7 @@
                         <a href="./indexBrand.html">盛堂品牌</a>
                         <a href="./aboutUs.html">關於Allen Zhou</a>
                         <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 href="./projectIntroduction.html">項目介紹</a>
                         <a  href="./brand.html">名品軟裝</a>

htmls/projectIntroduction.html

@@ -24,29 +24,29 @@
     </head>
 
     <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">
             <img src="../imgs//xmjs.png" class="ber" alt="">
             <div class="con">
                 <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="">
@@ -85,17 +85,13 @@
                                 </div>
 
                                 <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 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>
 
@@ -110,13 +106,13 @@
 
         </div>
 
-        </div>
+      
 
         <div class="footer">
             <a href="">Copyright 2022 盛堂世家設計機構 All rights reserved 蜀ICP備12345678號 技术支持：全美网络 </a>
         </div>
 
-        </div>
+     
 
 
         <script src="../js/jquery.min.js"></script>
@@ -132,8 +128,61 @@
             <img src="../imgs/home.png" alt="">
         </a>
         <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($(".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")
 
                 e.preventDefault();
@@ -161,6 +210,7 @@
             })
 
             $(".projectIntroductionNav>p").on("click", function () {
+                dataMap($(this).data("index"))
                 $(".projectIntroductionNav>p").removeClass("on")
                 $(this).addClass("on")
 
@@ -187,6 +237,8 @@
                     el: '.swiper-scrollbar',
                 },
             })
+
+
         </script>
     </body>
 

htmls/siteImage.html

@@ -58,6 +58,7 @@
                             </select>
                         </div>
                         
+
                         <script>
                         function selectFun(e) {
                           window.location=event.target.value