Browse Source

company_contact.html 页面调整

chenwen 3 years ago
parent
commit
ffd93d7e04
2 changed files with 55 additions and 14 deletions
  1. 29 0
      assets/js/company_contact.js
  2. 26 14
      html/company/company_contact.html

+ 29 - 0
assets/js/company_contact.js

@@ -0,0 +1,29 @@
+$(function() {
+	let data=[{
+		"name":"zhang123",
+		"title":"manager",
+		"region":"China",
+		"phone":"199 0989 6789",
+		"email":"zhang@gmail.com",
+		},
+		{
+			"name":"zhang456",
+			"title":"manager",
+			"region":"China",
+			"phone":"199 0989 6789",
+			"email":"zhang@gmail.com"
+		},
+		{
+			"name":"zhang789",
+			"title":"manager",
+			"region":"China",
+			"phone":"199 0989 6789",
+			"email":"zhang@gmail.com"
+		}
+	];
+	const tmphtml = template("list-contacts", {
+		contacts: data
+	});
+	
+	$(".contact-dtl").append(tmphtml);
+});

+ 26 - 14
html/company/company_contact.html

@@ -47,12 +47,16 @@
 			}
 			}
 			.contact-dtl .item-icon{
 			.contact-dtl .item-icon{
 				margin-right: 10px;
 				margin-right: 10px;
+				font-weight: bold;
+				font-size:14px;
 			}
 			}
 			
 			
 			.contact-dtl .dtl-item{
 			.contact-dtl .dtl-item{
 				font-weight: bold;
 				font-weight: bold;
 				color:#444;
 				color:#444;
+				margin-bottom: 5px;
 			}
 			}
+			
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
@@ -69,27 +73,19 @@
 		<div class="container-fluid" style="padding:0;">
 		<div class="container-fluid" style="padding:0;">
 			
 			
 			<div class="row" style="margin:0px;">
 			<div class="row" style="margin:0px;">
-				<div class="col-md-5" style="padding: 0px;">
+				<!-- <div class="col-md-5" style="padding: 0px;">
 					<img src="../../assets/img/wedloveto.png" style="width:100%;height:calc(100vh - 85px)">
 					<img src="../../assets/img/wedloveto.png" style="width:100%;height:calc(100vh - 85px)">
-				</div>
-				<div class="col-md-7" style="padding: 0px 60px;box-sizing: border-box;">
+				</div> -->
+				<div class="col-md-6 col-md-offset-3" style="padding: 0px 60px;box-sizing: border-box;">
 					<img src="../../assets/img/contact_icon.png" style="margin-top:80px;">
 					<img src="../../assets/img/contact_icon.png" style="margin-top:80px;">
 					<p style="font-size: 18px; margin:30px 0px 20px 0px;">Helen studio CHINA | interior</p>
 					<p style="font-size: 18px; margin:30px 0px 20px 0px;">Helen studio CHINA | interior</p>
 					<p style="margin:20px 0px;font-size: 16px;color:#999;">
 					<p style="margin:20px 0px;font-size: 16px;color:#999;">
 						It is a long established fact that a readerwill be distracted by the readable content of a page when looking at its layout.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
 						It is a long established fact that a readerwill be distracted by the readable content of a page when looking at its layout.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
 					</p>
 					</p>
+					<p style="font-size:16px;font-weight: bold;margin:25px 0px;">Interior design/Lighting(室内设计/照明)</p>
 					<div class="contact-dtl">
 					<div class="contact-dtl">
-						<p style="font-size:16px;font-weight: bold;">Interior design/Lighting(室内设计/照明)</p>
-						<p class="dtl-item"><img src="../../assets/img/us.png" class="item-icon"><span>Mir Wang, Manager</span></p>
-						<div>
-							<p class="dtl-item" style="float:left;"><img src="../../assets/img/tel.png" class="item-icon"><span>188 2088 8888</span></p>
-							<p class="dtl-item" style="margin-left:400px;"><img src="../../assets/img/tel.png" class="item-icon"><span>166 1234 4567</span></p>
-						</div>
-						<div>
-							<p class="dtl-item" style="float:left;"><img src="../../assets/img/msg.png" class="item-icon"><span>wang123@gmail.com</span></p>
-							<p class="dtl-item" style="margin-left:400px;"><img src="../../assets/img/msg.png" class="item-icon"><span>zhang123@gmail.com</span></p>
-						</div>
-						<p class="dtl-item"><img src="../../assets/img/us.png" class="item-icon"><span><span class="i18n-text" i18n="landingpage_Number of employees"></span> 3211</span></p>
+						
+						
 					</div>
 					</div>
 					
 					
 					<button type="button" class="btn btn-default" style="height: 42px;background-color: #000000;color: #fff;padding:0px 30px;margin:20px;float:right;">
 					<button type="button" class="btn btn-default" style="height: 42px;background-color: #000000;color: #fff;padding:0px 30px;margin:20px;float:right;">
@@ -100,5 +96,21 @@
 		</div>
 		</div>
 		</div>
 		</div>
 		<script src="../../js/bootstrap.min.js"></script>
 		<script src="../../js/bootstrap.min.js"></script>
+		<script src="../../assets/plugin/template-web.js"></script>
+		<script src="../../assets/js/company_contact.js"></script>
+		<script id="list-contacts" type="text/html">
+			{{each  contacts  contact index}}
+				<p class="dtl-item"><span class="glyphicon glyphicon-user item-icon" aria-hidden="true">&nbsp;{{contact.name}}</span></p>
+				<div>
+					<p class="dtl-item" style="float:left;"><span class="glyphicon glyphicon-education item-icon">&nbsp;{{contact.title}}</span></p>
+					<p class="dtl-item" style="margin-left:300px;"><span class="glyphicon glyphicon-globe item-icon">&nbsp;{{contact.region}}</span></p>
+				</div>
+				<div>
+					<p class="dtl-item" style="float:left;"><span class="glyphicon glyphicon-earphone item-icon">&nbsp;{{contact.phone}}</span></p>
+					<p class="dtl-item" style="margin-left:300px;"><span class="glyphicon glyphicon-envelope item-icon">&nbsp;{{contact.email}}</span></p>
+				</div>
+				<p></p>
+			{{ /each }}
+		</script>
 	</body>
 	</body>
 </html>
 </html>