响应式及样式修改

css/style.css

@@ -182,7 +182,6 @@
     line-height: 30px;
     color: #fefefe;
     margin-bottom: 38px;
-	text-align: justify;
 }
 .contentPage::-webkit-scrollbar {/*滚动条整体样式*/
 
@@ -313,7 +312,7 @@ transition: all 1s;
 .Interview{
     flex: 1;
     margin-right: -300px;
-    padding-left: 200px;
+    padding-left: 250px;
 }
 
 .InterviewCon{
@@ -427,6 +426,7 @@ transition: all 1s;
     margin-bottom: 16px;
     line-height: 24px;
     color: #e8e8e8;
+	cursor: pointer;
 }
 .projectIntroductionList>div>.on{
     text-decoration: underline;
@@ -460,19 +460,29 @@ option{
     font-size: 20px;
     background-color: rgba(0,0,0,0);
     color: #bfbfbf;
-    padding: 0 15px;box-sizing: border-box;
+	box-sizing: border-box;
     border: 1px solid #bfbfbf;
     display: flex;
     align-items: center;
-    margin: auto;margin-top: 20px;
+    margin: auto;
+	margin-top: 20px;
+	cursor: pointer;
+	appearance:none; /*去掉下拉箭头*/
+	background-image: url(../imgs/arrow.png);
+	background-repeat: no-repeat;
+	background-size: 11px 7px;
+	background-position: 74px center;
 }
 .projectIntroductionCon .select select{
+	padding: 0 15px;
     font-size: 20px;
     background-color: rgba(0,0,0,0);
     color: #bfbfbf;
     border: none;
     width: 100%;
     height: 100%;
+	cursor: pointer;
+	appearance:none; /*去掉下拉箭头*/
 }
 .projectIntroductionJt>a{
     margin-right: 14px;
@@ -550,20 +560,26 @@ padding-right: 30px;
     font-size: 20px;
     background-color: rgba(0,0,0,0);
     color: #bfbfbf;
-    padding: 0 15px;box-sizing: border-box;
+	box-sizing: border-box;
     border: 1px solid #bfbfbf;
     display: flex;
     align-items: center;
     margin: auto;
     margin-bottom: 43px;
+	background-image: url(../imgs/arrow.png);
+	background-repeat: no-repeat;
+	background-size: 11px 7px;
+	background-position: 74px center; 
 }
 .brand .select select{
+	padding: 0 15px;
     font-size: 20px;
     background-color: rgba(0,0,0,0);
     color: #bfbfbf;
     border: none;
     width: 100%;
     height: 100%;
+	appearance:none; /*去掉下拉箭头*/
 }
 .brand  .title{
     margin-bottom: 22px;
@@ -784,6 +800,7 @@ height: 31px;
     color: #e8e8e8;
     display: inline-block;
     padding: 5px;
+	cursor: pointer;
 }
 .indexBrandNav .list  .on{
     background-color: #3b3a39;
@@ -996,6 +1013,9 @@ select{
     .siteImage .listImg{
         height: auto;
     }
+	.nav{
+		width: 230px;
+	}
     .siteImage{
         width: 100%;
         height: auto;
@@ -1007,7 +1027,7 @@ select{
         width: 200px;
     }
     .engineeringConText{
-        width: 80%;
+        width: 100%;
     }
     .engineeringConText .listImg{
         width: 80%;
@@ -1038,7 +1058,8 @@ select{
         margin-bottom: 10px;
     }
     .projectIntroductionCon{
-        width: 70%;
+        width: calc(100% - 250px);
+		max-width: 950px;
    margin-left: 30px;
     }
     .mainCon{
@@ -1063,13 +1084,16 @@ select{
         width: 70%;
         margin: 0px;
     }
-    .honoraryCertificateCon{
+	.honoraryCertificate{
 		width: calc(100% - 250px);
-        max-width: 954px;
 		margin-left: 250px;
+		max-width: 954px;
+	}
+    .honoraryCertificateCon{
+		
     }
     .honoraryCertificateCon>.list{
-        width: 700px;
+        width: 100%;
     }
 }
 
@@ -1079,6 +1103,9 @@ select{
     }
 }
 @media screen and (max-width:1020px){
+	.nav{
+		width: 250px;
+	}
     .wellKnownProductsNav{
         display: flex;
         justify-content: space-between;
@@ -1131,6 +1158,9 @@ select{
         width: 30px;
         margin: auto;
       
+    }
+	.honoraryCertificate{
+		margin: 0;
 	}
     .projectIntroductionNavButton{
         position: absolute;
@@ -1312,10 +1342,35 @@ select{
     .projectIntroduction{
         display: block;
     }
+	.contentPage{
+		padding-right: 0;
+	}
+	.text{
+		padding: 50px;
+		height: auto;
+	}
+	.text img{
+		max-width: 100%;
+		margin: 10px auto;
+	}
+	.engineeringConText{
+		height: auto;
+		text-align: justify;
+	}
+	.contentPage .p{
+		text-align: justify;
+	}
+	.aboutUsText{
+		width: 100%;
+		text-align: justify;
+	}
+	.projectIntroductionConMain img{
+		width: 100%;
+		margin: 0 auto;
+	}
 }
 
 @media screen and (max-width:768px){
-   
     .contactUsTel{
         display: block;
     }

htmls/projectIntroduction.html

@@ -58,7 +58,7 @@
 							<div class="projectIntroductionList">
 								<div class="projectIntroductionNav">
 									<p>開元集團光霧合谷酒店 </p>
-									<p class="on">釋玥森林度假酒店 </p>
+									<p>釋玥森林度假酒店 </p>
 									<p>樂山.清水荷花素食餐廳 </p>
 									<p>巴中通江主題酒店 </p>
 									<p>甘南州臨潭縣臨潭大酒店 </p>
@@ -73,7 +73,6 @@
 									<p>寬窄巷子.天趣.紫園 </p>
 									<div class="projectIntroductionNavButton">
 										<img src="../imgs/zk.png" class="" alt="">
-
 									</div>
 								</div>
 								<div class="projectIntroductionJt">
@@ -205,4 +204,11 @@
 		</script>
 	</body>
 	<script src="../js/navBar.js"></script>
+	<script>
+		$(".projectIntroductionNav>p").eq(0).addClass("on")
+		$(".projectIntroductionNav>p").on("click", function() {
+			$(".projectIntroductionNav>p").removeClass("on")
+			$(this).addClass("on")
+		})
+	</script>
 </html>