福田皮卡代码提交

.gitignore

@@ -0,0 +1,3 @@
+nav.html
+nav-m.html
+static/

README.md

@@ -1,3 +1,35 @@
 # foton_pickup-202304
 
-福田皮卡火星7+火星9
+福田皮卡火星7+火星9
+
+*** 如何使用
+1. 本地启动web服务（如Apache）后将tunland放在根目录
+2. 火星7 PC端访问 http://127.0.0.1/tunland/p7/index.html
+3. 火星7 移动端访问 http://127.0.0.1/tunland/p7/indexm.html
+4. 火星9 PC端访问 http://127.0.0.1/tunland/p9/index.html
+5. 火星9 移动端访问 http://127.0.0.1/tunland/p9/indexm.html
+
+
+*** 目录结构
+```
+.
+├── README.md
+├── tunland 
+│   ├── p7 //火星7
+│   │   ├── index.html //pc端页面
+│   │   ├── indexm.html //移动端页面
+│   │   ├── js //js文件
+│   │   ├── css //css文件
+│   │   ├── common //字体等文件
+│   │   ├── libs //第三方依赖
+│   │   ├── images //pc端图片
+│   │   ├── images_mb //移动端图片
+│   ├── p9 //火星9  js、css、libs、common引用的是p7中的文件
+│   │   ├── index.html //pc端页面
+│   │   ├── indexm.html //移动端页面
+│   │   ├── images //pc端图片
+│   │   ├── images_mb //移动端图片
+│   ├── nav.html //全站公共文件，不需要修改
+│   ├── nav-m.html //全站公共文件，不需要修改
+│   ├── static //全站公共文件，不需要修改
+```

tunland/nav-m.html

@@ -0,0 +1,140 @@
+
+
+<ul class="piccarbox-list">
+	<li>
+		<div class="type-box">
+			福田大将军
+		</div>
+		<ul class="type-list">
+			<li>
+				<a href="https://tunland.foton.com.cn/generalM_new/index.html">大将军G9 2023款</a>
+			</li>
+			<li>
+				<a href="https://tunland.foton.com.cn/generalM/index.html">大将军G9 2022款</a>
+			</li>
+			<li>
+				<a href="/g7/">大将军G7</a>
+			</li>
+			<li>
+				<a href="/yutu921/m/">大将军F9</a>
+			</li>
+		</ul>
+	</li>
+	<li style="display: none;">
+		<div class="type-box">
+			福田拓陆者
+		</div>
+		<ul class="type-list">
+<!-- 			<li>
+				<div class="type-box">
+					驭途
+				</div>
+				<ul class="type-list">
+					<li>
+						<a href="/yutu9/m/">
+							驭途9
+						</a>
+					</li>
+					<li>
+						<a href="/yutu8/m/">
+							驭途8
+						</a>
+					</li>
+				</ul>
+			</li> -->
+			<li>
+				<div class="type-box">
+					胜途
+				</div>
+				<ul class="type-list">
+					<!-- <li>
+						<a href="/shengtu5/m/">
+							胜途5
+						</a>
+					</li> -->
+					<li>
+						<a href="/shengtu7/m/">
+							胜途7
+						</a>
+					</li>
+				</ul>
+			</li>
+			<li style="display: none;">
+				<div class="type-box">
+					其他
+				</div>
+				<ul class="type-list">
+					<li>
+						<a href="/tunland/car/mobile/modelDetail/36:43">
+							拓陆者E7
+						</a>
+					</li>
+					<li>
+						<a href="/MarchCyWebsite/index.html">
+							拓陆者E5
+						</a>
+					</li>
+					<li>
+						<a href="/tunland/car/mobile/modelDetail/36:29">
+							拓陆者E3
+						</a>
+					</li>
+					<li>
+						<a href="/tunland/car/mobile/modelDetail/36:28">
+							拓陆者S
+						</a>
+					</li>
+					<!-- <li>
+						<a href="/tunland/car/mobile/modelDetail/36:30">
+							萨普
+						</a>
+					</li> -->
+					
+				</ul>
+			</li>
+
+		</ul>
+	</li>
+	<li>
+		<div class="type-box">
+			福田征服者
+		</div>
+		<ul class="type-list">
+			<li>
+				<a href="https://tunland.foton.com.cn/cars/zfz_plus/m/">
+					福田征服者PLUS
+				</a>
+			</li>
+			<li>
+				<a href="/cars/zfz7/m/">
+					福田征服者7
+				</a>
+			</li>
+			<li>
+				<a href="/cars/zfz5/m/">
+					福田征服者5
+				</a>
+			</li>
+			<li>
+				<a href="/cars/zfz3/m/">
+					福田征服者3
+				</a>
+			</li>
+		</ul>
+	</li>
+	<!-- <li>
+		<div class="type-box">
+			萨普
+		</div>
+		<ul class="type-list">
+			<li>
+				<a href="/hl1103/mindex.html">
+					萨普轿卡
+				</a>
+			</li>
+		</ul>
+	</li> -->
+	 <li>
+		<a href="https://tunland.foton.com.cn/tunland/car/zycm">专用车</a>
+	</li> 
+</ul>

tunland/nav.html

@@ -0,0 +1,279 @@
+
+	<ul class="car_name car_name2">
+	<li>
+			<a class="subNav" target="_blank">火星皮卡</a>
+			<div class="car_imgbox">
+				<ul class="car_name">
+					<li>
+						<a href="https://pickup.foton.com.cn/p7/" class="subNav" target="_blank" data-name="火星7">火星7</a>
+						<div class="car_conone" data-name="火星7">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/activity/testdrive/pc/images/img/P7.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">火星7</p>
+								<a href="https://pickup.foton.com.cn/p7/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/p9/" class="subNav" target="_blank" data-name="火星9">火星9</a>
+						<div class="car_conone" data-name="火星9">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/activity/testdrive/pc/images/img/P9.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">火星9</p>
+								<a href="https://pickup.foton.com.cn/p9/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</li>
+		<li>
+			<a class="subNav" target="_blank">福田大将军</a>
+			<div class="car_imgbox">
+				<ul class="car_name car_namebox">
+					<li>
+						<a href="https://pickup.foton.com.cn/general_new/index.html" class="subNav" target="_blank">大将军G9 2023款</a>
+						<div class="car_conone" data-name="大将军G9 2023款">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/g9_2023.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">大将军G9 2023款</p>
+								<!-- <p class="car_conpace car_conpace2">官方指导价：￥11.98万-19.38万元</p> -->
+								<a href="https://pickup.foton.com.cn/general_new/index.html" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/general/" class="subNav" target="_blank">大将军G9 2021款</a>
+						<div class="car_conone" data-name="大将军G9 2022款">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/G9.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">大将军G9 2021款</p>
+								<!-- <p class="car_conpace car_conpace2">官方指导价：￥11.98万-19.38万元</p> -->
+								<a href="https://pickup.foton.com.cn/general/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/g7/" class="subNav" target="_blank">大将军G7</a>
+						<div class="car_conone" data-name="大将军G7">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/g7.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">大将军G7</p>
+								<!-- <p class="car_conpace car_conpace2">官方指导价：￥11.98万-19.38万元</p> -->
+								<a href="https://pickup.foton.com.cn/g7/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/yutu921/" class="subNav" target="_blank">大将军F9</a>
+						<div class="car_conone" data-name="大将军F9">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/f9.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">大将军F9</p>
+								<!-- <p class="car_conpace car_conpace2">官方指导价：￥12.68万—15.48万元</p> -->
+								<a href="https://pickup.foton.com.cn/yutu921/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</li>
+		<li style="display: none;">
+			<a class="subNav" target="_blank">福田拓陆者</a>
+			<div class="car_imgbox">
+				<ul class="car_name car_namebox">
+					<li style="display: none;">
+						<a class="subNav" target="_blank">驭途</a>
+
+						<div class="car_imgbox">
+							<ul class="car_name">
+							
+								<li>
+									<a href="/yutu8/" class="subNav" target="_blank" data-name="驭途8">驭途8</a>
+									<div class="car_conone" data-name="驭途8">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/yutu8/images/car-img.png" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">驭途8</p>
+										
+											<a href="/yutu8/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+							
+							</ul>
+						</div>
+					</li>
+					<li>
+						<a class="subNav" target="_blank">胜途</a>
+						<div class="car_imgbox">
+							<ul class="car_name">
+							
+								<li>
+									<a href="/shengtu7/" class="subNav" target="_blank" data-name="胜途7">胜途7</a>
+									<div class="car_conone" data-name="胜途7">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/shengtu7/images/car-img.png" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">胜途7</p>
+											<a href="/shengtu7/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li style="display: none;">
+						<a class="subNav" target="_blank">其他</a>
+						<div class="car_imgbox">
+							<ul class="car_name">
+								<li>
+									<a href="/E7/index.html" class="subNav" target="_blank" data-name="拓陆者E7">拓陆者E7</a>
+									<div class="car_conone" data-name="拓陆者E7">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/tunland/resources/attachment/2vpfExTr6cD9u1FzUKSTSp" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">拓陆者E7</p>
+											<a href="/E7/index.html" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+								<li>
+									<a href="/MarchCyWebsite/index.html" class="subNav" target="_blank" data-name="拓陆者E5">拓陆者E5</a>
+									<div class="car_conone" data-name="拓陆者E5">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/tunland/resources/attachment/XDYJcWHejmH5K8JmQdk75w" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">拓陆者E5</p>
+											<a href="https://pickup.foton.com.cn/MarchCyWebsite/index.html" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+								<li>
+									<a href="/E3/index.html" class="subNav" target="_blank" data-name="拓陆者E3">拓陆者E3</a>
+									<div class="car_conone" data-name="拓陆者E3">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/tunland/resources/attachment/D7sxS962mLyxqp8XWXM9FQ" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">拓陆者E3</p>
+											<a href="https://pickup.foton.com.cn/E3/index.html" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+								<li>
+									<a href="/tunland/car/modelDetail/36:28" class="subNav" target="_blank" data-name="拓陆者S">拓陆者S</a>
+									<div class="car_conone" data-name="拓陆者S">
+										<div class="car-img">
+											<img src="https://pickup.foton.com.cn/tunland/resources/attachment/2HoaeJj2QvRMnSuasV1gDa" class="car-img" />
+										</div>
+										<div class="car-info">
+											<p class="car_conname car_conname2">拓陆者S</p>
+											<a href="https://pickup.foton.com.cn/tunland/car/modelDetail/36:28" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+										</div>
+									</div>
+								</li>
+							
+							</ul>
+						</div>
+					</li>
+
+				</ul>			
+			</div>
+		</li>
+		<li>
+			<a class="subNav" target="_blank">福田征服者</a>
+			<div class="car_imgbox">
+				<ul class="car_name">
+					<li>
+						<a href="https://pickup.foton.com.cn/cars/zfz_plus/" class="subNav" target="_blank" data-name="福田征服者PLUS">福田征服者PLUS</a>
+						<div class="car_conone" data-name="福田征服者PLUS">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/zfz_plus.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">福田征服者PLUS</p>
+								<a href="https://pickup.foton.com.cn/cars/zfz_plus/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/cars/zfz7/" class="subNav" target="_blank" data-name="福田征服者7">福田征服者7</a>
+						<div class="car_conone" data-name="福田征服者7">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/zfz7.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">福田征服者7</p>
+								<a href="https://pickup.foton.com.cn/cars/zfz7/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/cars/zfz5/" class="subNav" target="_blank" data-name="福田征服者5">福田征服者5</a>
+						<div class="car_conone" data-name="福田征服者5">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/zfz5.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">福田征服者5</p>
+								<a href="https://pickup.foton.com.cn/cars/zfz5/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					<li>
+						<a href="https://pickup.foton.com.cn/cars/zfz3/pc/" class="subNav" target="_blank" data-name="福田征服者3">福田征服者3</a>
+						<div class="car_conone" data-name="福田征服者3">
+							<div class="car-img">
+								<img src="https://pickup.foton.com.cn/van_img/zfz3.png" class="car-img" />
+							</div>
+							<div class="car-info">
+								<p class="car_conname car_conname2">福田征服者3</p>
+								<a href="https://pickup.foton.com.cn/cars/zfz3/pc/" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+							</div>
+						</div>
+					</li>
+					
+				</ul>
+			</div>
+		</li>
+		<!-- <li>
+			<a href="https://pickup.foton.com.cn/hl1103/index.html" class="subNav" target="_blank">萨普</a>
+			<div class="car_imgbox">
+					<ul class="car_name">
+						<li>
+							<a href="/hl1103/index.html" class="subNav" target="_blank" data-name="萨普轿卡">	萨普轿卡</a>
+							<div class="car_conone" data-name="萨普轿卡">
+								<div class="car-img">
+									<img src="/tunland/resources/attachment/QJVJ468Ctz2TPEPDwh7c9q" class="car-img" />
+								</div>
+								<div class="car-info">
+									<p class="car_conname car_conname2">萨普轿卡</p>
+									<a href="/hl1103/index.html" target="_blank" class="car_moreBtn trans car_moreBtn2">查看详情</a>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			
+		</li> -->
+		<li>
+			<a href="https://pickup.foton.com.cn/tunland/car/zyc" class="subNav" target="_blank">专用车</a>
+		</li>
+	</ul>

tunland/p7/common/reset.css

@@ -0,0 +1,33 @@
+* {
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+
+    /* h1 ~ h6 */
+    font-size: inherit;
+    font-weight: normal;
+
+    /* ol ul */
+    list-style: none;
+}
+
+button {
+    all: unset;
+
+    display: inline-block;
+
+    box-sizing: border-box;
+
+    cursor: pointer;
+}
+
+a {
+    all: unset;
+
+    cursor: pointer;
+}
+
+iframe {
+    border: none;
+}

tunland/p7/css/contentBox.css

@@ -0,0 +1,110 @@
+.tab-1-car-1{
+    width:100%; 
+    height:589px;
+    background-color:transparent;
+ }
+ .contentBox{
+     margin-top:12px;
+     color: #FFFFFF;
+     position:relative;
+     padding-left: 4.2%;
+     padding-right: 4.2%;
+ }
+ 
+ .contentBox .contentTitle{
+     font-size: 20px;
+     font-family: SourceHanSansCN;
+     font-weight: bold;
+     position:absolute;
+     top:45px;
+     left: 50%;
+     transform: translateX(-50%);
+ }
+ .contentBox .contentTitle2{
+    font-size: 20px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    text-align:center;
+}
+.contentTitle2{
+    font-size: 20px;
+    color: #fff;
+    padding-bottom: 9px;
+    margin-bottom: 12px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    text-align:center;
+    /* width: 92.6%; */
+    width: 95.4%;
+    margin-left: 2.2%;
+    background: url("../images/title_line.png") no-repeat bottom center;
+}
+ 
+ .contentBox .contentMain{
+    margin-top:-140px;
+    top: -140px;
+    position:relative;
+ }
+ .contentBox .contentMain .contentMainHeader{
+    height: 16px;
+    font-size: 15px;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: #FFFFFF;
+ }
+
+ .item {
+     font-size: 13px;
+     font-family: MicrosoftYaHei;
+     font-weight: 400;
+     color: #B9B9B9;
+     line-height: 24px;
+     margin-top:15px;
+    list-style: disc;
+    margin-left: 4.2%;
+ }
+ ::marker{
+    color: #fff;
+ }
+ .back-img{
+    background: url(../images_mb/Mars7_06.jpg) no-repeat center center;
+    background-size: cover;
+    width: 100%;
+    position:relative;
+    top:-58px;
+    z-index:-1;
+ }
+ .back-img2{
+    background: url(../images_mb/Mars7_09.jpg) no-repeat center center;
+    background-size: cover;
+    width: 100%;
+ }
+ .back-img3{
+    background: url(../images_mb/Mars7_11.jpg) no-repeat center center;
+    background-size: cover;
+    width: 100%;
+ }
+ .back-img4{
+    background: url(../images_mb/Mars7_13.jpg) no-repeat center center;
+    background-size: cover;
+    width: 100%;
+ }
+
+ .swiper-container{
+    margin-top:14px;
+ }
+ .swiper-container .swiper-wrapper .swiper-slide img{
+    width:100%;
+ }
+.swiper1{
+        height: auto;
+        max-height: 850px;
+        overflow: hidden;
+}
+.swiper1 img{
+    width:100%;
+}
+ ul{
+    padding-inline-start:4.2%;
+    margin-block: 0;
+ }

tunland/p7/css/index.css

@@ -0,0 +1,398 @@
+/* select{
+    appearance:none;
+    -moz-appearance:none;
+    -webkit-appearance:none;
+} */
+
+.w1200-1400{
+    max-width: 1920px;
+}
+
+body{
+    background-color: #000;
+    min-width: 1400px;
+}
+
+/* input背景色透明 */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus, 
+input:-webkit-autofill:active {
+    transition-delay: 999999999s;
+    transition: color  999999999s ease-out, background-color  999999999s ease-out;
+    -webkit-transition-delay:  999999999s;
+    -webkit-transition: color  999999999s ease-out, background-color  999999999s ease-out;
+    -webkit-text-fill-color: #fff;
+}
+
+#banner{
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+#banner img{ width: 100%; display: block;}
+
+
+
+
+#navContainer{
+    width: 100%;
+    height: 80px;
+    box-sizing: border-box;
+    background-color: #000;
+    z-index: 9;
+}
+#navContainer .content{
+    width: 100%;
+    max-width: 1920px;
+    padding: 23px 150px 0;
+    margin: 0 auto;
+    position: relative;
+    box-sizing: border-box;
+}
+#navContainer.fixed{
+    position: fixed;
+    left: 0;
+    top: 71px;
+}
+#navContainer .nav{ height: 38px; position: relative; float: left;}
+#navContainer .nav .n{
+    height: 36px;
+    font-size: 17px;
+    line-height: 36px;
+    margin-right: 38px;
+    color: #fff;
+    cursor: pointer;
+    float: left;
+}
+#navContainer .nav .n.active{ color: #0091FF;}
+#navContainer .line{
+    width: 68px;
+    height: 0;
+    border-bottom: solid 2px #0091FF;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    transition: all .3s;
+}
+#navContainer .order{
+    width: 119px;
+    height: 41px;
+    border-radius: 21px;
+    border: solid 1px #0091FF;
+    font-size: 18px;
+    font-family: FZLTHK;
+    color: #0091FF;
+    box-sizing: border-box;
+    line-height: 39px;
+    text-align: center;
+    float: right;
+    margin-right: 170px;
+    cursor: pointer;
+}
+
+
+
+
+
+
+#container{
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    overflow-x: hidden;
+}
+#container .section{
+    width: 100%;
+    margin-top: 120px;
+}
+#container .section .title{
+    width: 100%;
+    height: 90px;
+    font-size: 48px;
+    line-height: 1;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #fff;
+    margin: 0 auto;
+    text-align: center;
+    margin-bottom: 45px;
+    background: url("../images/title_line.png") no-repeat bottom center;
+}
+#container .cpld .content{
+    width: 100%;
+}
+#container .cpld .content .item{
+    display: flex;
+    justify-content: space-between;
+}
+/* #container .cpld .content .item .l{ float: left;}
+#container .cpld .content .item .r{ float: right;} */
+#container .cpld .content .item .l.info{ margin-left: 150px;}
+#container .cpld .content .item .r.info{ margin-right: 150px;}
+#container .cpld .content .item .info{
+    width: 690px;
+
+}
+#container .cpld .content .item .img{
+    position: relative;
+}
+#container .cpld .content .item .img img{
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: none;
+}
+#container .cpld .content .item .info .subTitle{
+    font-size: 36px;
+    line-height: 1;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 45px;
+}
+#container .cpld .content .item .info .row{
+    display: flex;
+}
+#container .cpld .content .item .info span{
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    background-color: #fff;
+    border-radius: 50%;
+    margin-right: 12px;
+    margin-top: 18px;
+}
+#container .cpld .content .item .info p{
+    width: 100%;
+    font-size: 18px;
+    font-family: MicrosoftYaHei;
+    font-weight: 400;
+    color: #B9B9B9;
+    line-height: 48px;
+    flex: 1;
+}
+#container .cpld .content .item .clear{ width: 100%; clear: both;}
+
+
+#container .qjzs{
+    width: 100%;
+    max-width: 1620px;
+    margin: 200px auto 0;
+}
+#container .qjzs .content{ 
+    height: auto;
+    position: relative;
+}
+#container .qjzs .content img{
+    width: 100%;
+}
+#container .qjzs .nav{
+    width: 250px;
+    height: 40px;
+    margin: 0 auto;
+    color: #fff;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 60px;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 1px rgba(255, 255, 255, .4);
+}
+#container .qjzs .nav .n{
+    width: 109px;
+    float: left;
+    text-align: center;
+    font-size: 28px;
+    line-height: 1;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: rgba(255, 255, 255, .6);
+    cursor: pointer;
+}
+#container .qjzs .nav .n.swiper-button-disabled{
+    color: #fff;
+}
+#container .qjzs .nav .line{
+    width: 110px;
+    height: 0;
+    border-bottom: solid 2px #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    transition: all .3s;
+}
+#container .qjzs .nav .line.right{
+    left: 140px;
+}
+#container .qjzs .vr{
+    width: 321px;
+    height: 64px;
+    border: 2px solid #fff;
+    border-radius: 32px;
+    display: flex;
+    justify-content: center;
+    line-height: 62px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    position: absolute;
+    bottom: 104px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    z-index: 2;
+    cursor: pointer;
+}
+#container .qjzs .vr img{
+    width: 35px;
+    height: 24px;
+    margin-right: 12px;
+    margin-top: 19px;
+}
+
+
+#container .jctj{ width: 100%; color: #fff; overflow: hidden;}
+#container .jctj .swiper1{
+    height: auto;
+    max-height: 850px;
+    overflow: hidden;
+}
+#container .jctj .swiper1 img{ 
+    width: 100%;
+}
+#container .jctj .swiper2{
+    height: 340px;
+    margin-top: 30px;
+}
+#container .jctj .swiper2 .swiper-slide{
+    width: 30% !important;
+    overflow: hidden;
+}
+#container .jctj .swiper2 img{ height: 340px;}
+
+#container .yysj{
+    width: 1220px;
+    margin: 120px auto 0;
+    padding-bottom: 120px;
+}
+#container .yysj .title{ background: none;}
+#container .yysj .content .row{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+#container .yysj .content .row input,
+#container .yysj .content .row select{
+    width: 100%;
+    outline: none;
+    width: 100%;
+    border: none;
+    border-bottom: solid 1px rgba(255, 255, 255, .5);
+    background: none;
+    height: 60px;
+    line-height: 60px;
+    font-size: 16px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    color: #fff;
+}
+#container .yysj .content .row select option{ color: #000;}
+#container .yysj .content .row input:first-child,
+#container .yysj .content .row select:first-child{
+    margin-right: 20px;
+}
+#container .yysj .btn{
+    width: 232px;
+    height: 60px;
+    border: 1px solid #0091FF;
+    border-radius: 30px;
+    line-height: 58px;
+    text-align: center;
+    margin: 18px auto 0;
+    font-size: 18px;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: #0091FF;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+#container .cspz .content{
+    padding: 0 150px;
+    box-sizing: border-box;
+}
+#container .cspz img{
+    width: 100%;
+    /* max-width: 1628px; */
+    /* margin: 0 auto; */
+    display: block;
+}
+
+
+/* 提示框 */
+.alertbox{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    display: none;
+    background: rgba(0,0,0,.6);
+}
+.alertbox .boxwrap{
+    max-width: 640px;
+    margin: 0 auto;
+}
+.alertbox .boxwrap .content{
+    position: relative;
+    margin: 100px auto;
+    width: 70%;
+    outline: 0;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: .5rem;
+    background-color: #fff;
+    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+}
+.alertbox .alertheader {
+    padding: 15px;
+    min-height: 16.43px;
+}
+.alertbox .modaltitle {
+    margin: 0;
+    line-height: 2rem;
+    font-size: .75rem;
+    background-size: 70%;
+    text-align: center;
+    padding: 1rem 0 0;
+    color: #ad2f27;
+}
+.alertbox .modalbody {
+    position: relative;
+    padding: .5rem;
+    text-align: center;
+}
+.modalbody p {
+    margin: 0 0 10px;
+}
+.alertbox .modalfooter {
+    padding: .5rem 15px;
+    text-align: right;
+}
+.alertbox .modalfooter .btn {
+    font-size: .5rem;
+    margin: 0 auto;
+    width: 7rem;
+    background: #ad2f27;
+    color: #fff;
+    display: block;
+    height: 1.6rem;
+    border: none;
+    border-radius: .8rem;
+}

tunland/p7/css/indexm.css

@@ -0,0 +1,304 @@
+body{
+    padding:0;
+    margin:0;
+    background:#000;
+    width:100%
+}
+input{
+    border-radius: 0;
+}
+/* input背景色透明 */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus, 
+input:-webkit-autofill:active {
+    transition-delay: 999999999s;
+    transition: color  999999999s ease-out, background-color  999999999s ease-out;
+    -webkit-transition-delay:  999999999s;
+    -webkit-transition: color  999999999s ease-out, background-color  999999999s ease-out;
+    -webkit-text-fill-color: #fff;
+}
+
+.main{
+    width:100%;
+}
+#container .section{
+    width: 100%;
+}
+#container .section .title{
+    font-size: 20px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    text-align:center;
+    background: url("../images/title_line.png") no-repeat bottom center;
+}
+#container .cpld .content{
+    width: 100%;
+}
+#container .cpld .content .item .l{ float: left;}
+#container .cpld .content .item .r{ float: right;}
+#container .cpld .content .item .l.info{ margin-left: 150px;}
+#container .cpld .content .item .r.info{ margin-right: 150px;}
+/* #container .cpld .content .item .info{
+} */
+#container .cpld .content .item .info .subTitle{
+    font-size: 18px;
+    line-height: 1;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 22.5px;
+}
+#container .cpld .content .item .info .row{
+    display: flex;
+}
+#container .cpld .content .item .info span{
+    width: 4px;
+    height: 4px;
+    display: inline-block;
+    background-color: #fff;
+    border-radius: 50%;
+    margin-right: 6px;
+    margin-top: 9px;
+}
+#container .cpld .content .item .info p{
+    width: 100%;
+    font-size: 9px;
+    font-family: MicrosoftYaHei;
+    font-weight: 400;
+    color: #B9B9B9;
+    line-height: 48px;
+    flex: 1;
+}
+#container .cpld .content .item .clear{ width: 100%; clear: both;}
+
+
+#container .qjzs{
+    width: 100%;
+    margin-top: -145px;
+}
+#container .qjzs .content{
+    position: relative;
+}
+#container .qjzs .content img{
+    width: 100%;
+}
+#container .qjzs .nav{
+    width: 125px;
+    height: 20px;
+    margin: 0 auto;
+    color: #fff;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 30px;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 1px rgba(255, 255, 255, .4);
+}
+#container .qjzs .nav .n{
+    width: 54.5px;
+    float: left;
+    text-align: center;
+    font-size: 14px;
+    line-height: 1;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: rgba(255, 255, 255, .6);
+    cursor: pointer;
+}
+#container .qjzs .nav .n.swiper-button-disabled{
+    color: #fff;
+}
+#container .qjzs .nav .line{
+    width: 55px;
+    height: 0;
+    border-bottom: solid 1px #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    transition: all .3s;
+}
+#container .qjzs .nav .line.right{
+    left: 70px;
+}
+#container .qjzs .vr{
+    width: 112px;
+    height: 24px;
+    border: 1px solid #FFFFFF;
+    border-radius: 12px;
+    display: flex;
+    justify-content: center;
+    line-height: 24px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 12px;
+    font-family: MicrosoftYaHei;
+    position: absolute;
+    bottom: 22px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    z-index: 2;
+    cursor: pointer;
+}
+#container .qjzs .vr img{
+    width: 17.5px;
+    height: 12px;
+    margin-right: 6px;
+    margin-top: 6px;
+}
+
+
+#container .jctj{ 
+    width: 100%; 
+    color: #fff;
+    overflow: hidden;
+    margin-top:70px;
+}
+#container .jctj .swiper1{
+    overflow: hidden;
+}
+#container .jctj .swiper1 img{ 
+    width: 100%;
+}
+#container .jctj .swiper2{
+    margin-top: 15px;
+    position: relative;
+    left: -35%;
+}
+#container .jctj .swiper2 .swiper-slide{
+    width: auto !important;
+}
+#container .jctj .swiper2 img{ 
+    width: 105px;
+}
+
+#container .yysj{
+    padding-left: 4.2%;
+    /* width:92.6%; */
+    width: 95.4%;
+    margin-top:60px;
+    margin-bottom:60px;
+}
+#container .yysj .title{ background: none;}
+#container .yysj .content .row{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-left:0;
+    margin-right:0;
+}
+
+#container .yysj .content .row input,
+#container .yysj .content .row select{
+    width: 100%;
+    outline: none;
+    width: 100%;
+    border: none;
+    border-bottom: solid 1px rgba(255, 255, 255, .5);
+    background: none;
+    height: 30px;
+    line-height: 30px;
+    font-size: 8px;
+    padding: 0 7.5px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    color: #fff;
+}
+#container .yysj .content .row select option{ color: #000;}
+#container .yysj .content .row input:first-child,
+#container .yysj .content .row select:first-child{
+    margin-right: 10px;
+}
+#container .yysj .btn{
+    width: 144px;
+    height: 35px;
+    border: 1px solid #0091FF;
+    border-radius: 9px;
+    line-height: 29px;
+    text-align: center;
+    margin: 9px auto 0;
+    font-size: 9px;
+    font-family: MicrosoftYaHei;
+    font-weight: bold;
+    color: #0091FF;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+
+/* 提示框 */
+.alertbox{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    display: none;
+    background: rgba(0,0,0,.6);
+}
+.alertbox .boxwrap{
+    margin: 0 auto;
+}
+.alertbox .boxwrap .content{
+    position: relative;
+    margin: 100px auto;
+    width: 70%;
+    outline: 0;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 15px;
+    background-color: #fff;
+    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+}
+.alertbox .alertheader {
+    padding: 15px;
+    min-height: 8.2px;
+}
+.alertbox .modaltitle {
+    margin: 0;
+    line-height: 50px;
+    font-size: 22px;
+    background-size: 70%;
+    text-align: center;
+}
+.alertbox .modalbody {
+    position: relative;
+    padding: 15px;
+    text-align: center;
+}
+.modalbody p {
+    margin: 0 0 5px;
+}
+.alertbox .modalfooter {
+    padding: 15px;
+    text-align: right;
+}
+.alertbox .modalfooter .btn {
+    font-size: 15px;
+    margin: 0 auto;
+    width: 200px;
+    background: #ad2f27;
+    color: #fff;
+    display: block;
+    height: 40px;
+    border: none;
+    border-radius: 20px;
+}
+.contentBox .contentTitle2{
+    font-size: 20px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    text-align:center;
+    color: #fff;
+    background: url(../images_mb/Mars7_11.jpg) no-repeat center center;
+}
+.titleBox.fixed{
+    position: fixed;
+    left: 0;
+    top: 53px;
+    z-index:9;
+}

tunland/p7/css/topBox.css

@@ -0,0 +1,132 @@
+.topBox {
+    width:100%;
+}
+
+.titleBox {
+    /* width: 95.4%; */
+    width:100%;
+    height: 35.5pt;
+    background: #000000;
+    padding:0pt 1pt;
+    margin-top: 4.5px;
+}
+
+/* .topImg{
+    width:375pt;
+    height:187.5pt;
+} */
+
+
+.titleBox .title {
+    width: 70px;
+    font-size: 23px;
+    font-weight: 550;
+}
+
+.titleBox .tab {
+    text-align: center;
+    font-size: 10px;
+    display:inline-block;
+    vertical-align: middle;
+    width:12.7%;
+    font-family: FZLTHK;
+    font-weight: normal;
+    color: #ffffff;
+    text-decoration: none;
+    margin-left:4.2%;
+    padding-bottom: 4.5px;
+    padding-top: 4.5px;
+}
+
+.titleBox .radio{
+    border: 1px solid #0091FF;
+    border-radius: 12px;
+    width:21%;
+    padding-top:6px;
+    padding-bottom:6px;
+    color: #0091FF;
+}
+
+.titleBox .tab:hover {
+    color: #FC4832;
+}
+
+.titleBox .active {
+    color: #0091FF;
+    border-bottom:2px solid #0091FF;
+}
+
+.titleBox .search {
+    padding-left: 75px;
+    margin-left: 40px;
+    width: 536px;
+    height: 52px;
+    border: 1px solid #CCCCCC;
+}
+
+.typeBox {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #E5E5E5;
+    position: relative;
+}
+
+.topTitle {
+    float: left;
+    font-size: 14px;
+    height: 65px;
+    line-height: 65px;
+    color: #999999;
+}
+
+.typeBox .topTitle {
+    width: 35px;
+}
+
+.aItem {
+    font-size: 14px;
+    padding-left: 10px;
+    padding-right: 10px;
+    height: 24px;
+    line-height: 24px;
+    top: 20px;
+    cursor: pointer;
+    float: left;
+    margin: 20px 0 0 20px;
+}
+
+.aItem:hover {
+    color: #fff;
+    background: #FC4832;
+}
+
+.typeBox .item1 {
+    left: 50px;
+}
+
+.typeBox .item2 {
+    left: 117px;
+}
+
+.typeBox .item3 {
+    left: 225px;
+}
+
+.typeBox .item4 {
+    left: 310px;
+}
+
+.typeBox .item5 {
+    left: 383px;
+}
+
+
+.typeBox2 {
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+
+.typeBox2 .topTitle {
+    width: 50px;
+}

tunland/p7/index.html

@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>皮卡</title>
+    <link rel="stylesheet" type="text/css" href="./libs/animate.min.css">
+    <link rel="stylesheet" type="text/css" href="./libs/swiper-3.4.2.min.css">
+    <script src="./libs/jquery-1.11.3.min.js"></script>
+    <script src="../static/lib/jquery_scrollBar.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="/tunland/static/css/common.css">
+	<script src="/tunland/static/js/headerAndFooter.js" type="text/javascript" charset="utf-8"></script>
+    <script src="https://pv.sohu.com/cityjson" type="text/javascript" charset="utf-8"></script>
+
+    <link rel="stylesheet" href="./css/index.css">
+    <script>
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+            window.location.href = "indexm.html";
+        }
+
+        $(document).ready(function() {
+            new foton.HeaderAndFooter();
+		});
+    </script>
+</head>
+<body>
+    <!-- 头 -->
+    <div id="header">
+        <div class="header w1200-1400">
+            <div class="header w1200-1400">
+                <a href="/tunland/"><img class="logo" src="/tunland/static/images/index/2oyearslogo.png" alt="福田皮卡" />
+                </a>
+                <div class="navPanel">
+                    <a class="homeNav" href="/tunland/">首页</a>
+                    <!--
+                                <a class="mpvNav" style="font-family: arial;font-weight: normal;">MPV</a>
+                                
+                                <a class="suvNav" style="font-family: arial;font-weight: normal;">SUV</a>
+                    
+                    -->
+                    <!--
+                                <a class="pickupNav" style="font-family: arial;font-weight: normal;">皮卡</a>
+                    -->
+                    <a class="pickupNav">产品展厅</a>
+                    <!--<a class="newNav" href="/tunland/support#youhuiline">最新活动</a>-->
+                    <a class="newNav" href="/tunland/support/data">最新活动</a>
+                    
+                    <!--<a class="vrNav">VR看车</a>-->
+                    <a class="supportNav" href="/tunland/support">购车支持</a>
+                    <a class="customerNav" href="/tunland/customer">客户服务</a>
+                    <a class="zhaoshangNav" href="/tunland/about/join">招商加盟</a>
+                    <a class="ppNav" href="/tunland/about">关于品牌</a>
+                    <a class="aboutNav" href="https://www.foton.com.cn/webback/about/brand" target="_blank">福田世界</a>
+                </div>
+                <div class="rightPanel">
+                    <a class="languageIcon" href="http://www.foton-global.com/"></a>
+                    <div class="line"></div>
+                    <div class="searchIcon"></div>
+                    <!--
+                                <div class="wscbox">
+                        <span class="wscicon"></span>
+                        <span class="wsckey">拓路者微商城</span>
+                        <img src="/tunland/static/images/wscewm.jpg" class="wscpic trans"/>
+                    </div>
+                    
+                    -->
+                </div>
+                <form class="searchPanel" action="/tunland/bottom/search" method="post">
+                    <input class="searchBtn" type="submit" value="" />
+                    <input class="searchInput" type="text" name="title" value="search" />
+                    <div class="searchClose"></div>
+                </form>
+                <div class="loginPanel">
+                    <div class="title">
+                        <a href="/tunland/bottom/regist">注册</a>
+                    </div>
+                    <div class="line"></div>
+                    <div class="title">
+                        <a href="/tunland/bottom/login">登录</a>
+                    </div>
+                    <div class="line"></div>
+                    <div class="title">
+                        <a class="onlineservice">在线客服</a>
+                    </div>
+                </div>
+                <div class="subNavMask">
+                    <div class="subNavScrollPanel">
+                        <div class="subNavGroup"></div>
+        
+                        <!--
+                                        <div class="subNavGroup" style="width: 990px;height: 280px;">
+                                    <div class="car_togeter clearfix">
+                                <ul class="car_name car_name0">
+                                </ul>
+                                <div class="car_imgbox car_imgbox0">
+                                </div>
+                                <div class="car_conbox">
+                                    <div class="car_conone">
+                                        <p class="car_conname car_conname0"></p>
+                                        <p class="car_conpace car_conpace0"></p>
+                                        <a href="" target="_blank" class="car_moreBtn trans car_moreBtn0">查看详情</a>
+                                    </div>
+                                </div>
+                            </div>
+                                </div>
+                                
+                                
+                                        <div class="subNavGroup" style="width: 990px;height: 280px;">
+                                    <div class="car_togeter clearfix">
+                                <ul class="car_name car_name1">
+                                </ul>
+                                <div class="car_imgbox car_imgbox1">
+                                </div>
+                                <div class="car_conbox">
+                                    <div class="car_conone">
+                                        <p class="car_conname car_conname1"></p>
+                                        <p class="car_conpace car_conpace1"></p>
+                                        <a href="" target="_blank" class="car_moreBtn trans car_moreBtn1">查看详情</a>
+                                    </div>
+                                </div>
+                            </div>
+                                </div>
+                                -->
+        
+                        <div class="subNavGroup" style="width: 990px;height: 280px;">
+                            <div class="car_togeter clearfix">
+                            </div>
+                        </div>
+                        <!--  <div class="subNavGroup">
+                                                <a class="subNav" href="http://fpv.foton.com.cn/virtual/waiguan/e5/index.html" target="_blank">E5</a>
+                                </div> -->
+                                
+                                <div class="subNavGroup">
+                                    <!--<a class="subNav" href="/tunland/support#youhuiline">优惠活动</a>-->
+                                    <a class="subNav" href="/tunland/support/data">最新活动</a>
+                                </div>
+                        <div class="subNavGroup">
+                                
+                            <!--<a class="subNav" href="http://fpv.foton.com.cn/tunland/1111/index.html" target="_blank">1111大促</a>-->
+                            <!--<a class="subNav" href="/tunland/support/carOnline">在线订车</a>-->
+                            <a class="subNav" href="/tunland/support/sale">在线订车</a>
+                            <a class="subNav" href="/activity/testdrive/pc">预约试驾</a>
+                            <a class="subNav" href="http://www.fotonmall.com/" target="_blank">福田车e购</a>
+                            <a class="subNav" href="/tunland/support#jingxiaoline">经销商查询</a>
+                            <!-- <a class="subNav" href="/tunland/support/carProcess">购车流程</a> -->
+                            
+                            
+                            
+                            <!-- <a class="subNav" href="https://futian.tmall.com/shop/view_shop.htm?spm=a1z10.1-b.w5002-7470620951.7.87TB6k&user_number_id=2257394727&rn=daba8095af1890e6bf5c292cd691683e&scene=taobao_shop" target="_blank">汽车精品</a> -->
+                        </div>
+                        <div class="subNavGroup">
+                            <!-- <a class="subNav" href="/tunland/customer/servicepolicy">服务政策</a> -->
+                            <a class="subNav" href="/tunland/customer/customerService">维修与保养</a>
+                            <a class="subNav" href="/tunland/customer#serviceline">服务商查询</a>
+                        
+                            <!-- <a class="subNav" href="/tunland/customer/carZonghe">爱车宝典</a> -->
+                            <!--<a class="subNav" href="/tunland/customer/genuineParts">纯正配件</a>-->
+                            <!-- <a class="subNav" href="/tunland/customer/finance">金融服务</a> -->
+                            <!--<a class="subNav" href="/tunland/customer#tsjy">投诉建议</a>-->
+                            <!-- <a class="subNav" href="/tunland/baoke/getparam">车主有礼</a> -->
+                        </div>
+                        <div class="subNavGroup">
+                        </div>
+                        <div class="subNavGroup">
+                            <a class="subNav" href="/tunland/about#ppjs">品牌介绍</a>
+                            <a class="subNav" href="/tunland/about/data">品牌新闻</a>
+                            <!-- 20180806 注释
+                                                <a class="subNav" href="/tunland/about#ppry">品牌荣誉</a>
+                                                <a class="subNav" href="/tunland/about#pplc">品牌历程</a>
+                            
+                            -->
+                            <a class="subNav" href="/tunland/about#rmsp">热门视频</a>
+                            <!--<a class="subNav" href="/tunland/about/join">招商加盟</a>-->
+                            <a class="subNav" href="/tunland/about/contactUs">联系我们</a>
+                        </div>
+                        <div class="subNavGroup">
+                            <a class="subNav" href="https://www.foton.com.cn/webback/about/brand" target="_blank">走进福田</a>
+                            <a class="subNav" href="https://www.foton.com.cn/webback/news" target="_blank">新闻中心</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="toolPanel w1200-1400">
+                <div class="toolGroup">
+                    <div class="icon marketingIcon" href="/webback/baoke/getparam">
+                        <div class="title">
+                            <a href="/tunland/baoke/getparam">车主有礼</a>
+                        </div>
+                    </div>
+                    <div class="icon phoneIcon" href="/tunland/support/testDrive">
+                        <div class="title">
+                            <a href="/activity/testdrive/pc">预约试驾</a>
+                        </div>
+                    </div>
+                    <a class="icon driveIcon">
+                        <div class="title">4008-199-199贵宾专线</div>
+                    </a>
+                    <div class="icon codeIcon">
+                        <div class="innerIcon"></div>
+                        <div class="arrow"></div>
+                    </div>
+                    <div class="icon zxydIcon" href="/tunland/support/carOnline">
+                        <div class="title">
+                            <a href="/tunland/support/carOnline">在线预订</a>
+                        </div>
+                    </div>
+                    <a class="icon tmallIcon_jqr onlineservice"></a>
+                    <!-- <a class="icon tmallIcon" href="https://foton.tmall.com/search.htm" target="_blank"></a> -->
+                </div>
+                <ul class="codePanel">
+        
+                    <li>
+                        <div class="codeTitle">拓陆者微信</div>
+                        <img src="/tunland/static/images/contact_us/code4.jpg" width="84" height="84">
+                    </li>
+                    <li>
+                        <div class="codeTitle">拓陆者微博</div>
+                        <img src="/tunland/static/images/contact_us/code2.jpg" width="84" height="84">
+                    </li>
+                </ul>
+                <div class="xfcarbox">
+                    <a href="/tunland/support/testDrive" class="buttonone"></a>
+                    <a href="javascript:;" class="buttontwo" id="infortop"></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+
+    <div id="banner"><img src="./images/banner.jpg"/></div>
+
+    <!-- 导航 -->
+    <div id="navContainer">
+        <div class="content">
+            <div class="nav">
+                <div class="n active">产品亮点</div>
+                <div class="n">全景展示</div>
+                <div class="n">精彩图集</div>
+                <div class="n">参数配置</div>
+                <div class="line"></div>
+            </div>
+            <a class="order" href="/tunland/support/testDrive" target="_blank">预约试驾</a>
+        </div>
+    </div>
+    <div id="container" style="background: url('./images/bg.jpg') no-repeat center top;">
+        <div class="zhanwei" style="height:1px;"></div>
+        <div class="section cpld">
+            <div class="title wow fadeInUp">产品亮点</div>
+            <div class="content">
+                <div class="item" style="margin-top:170px; height:273px;">
+                    <div class="l info wow fadeInLeft" style="width:40%;">
+                        <div class="subTitle">天生越级  引领不凡</div>
+                        <div class="row"><span></span><p>基于FIA（Full-size Intelligent Architecture）全尺寸智能架构，兼容混合动力、纯电、燃料电池等动力总成</p></div>
+                        <div class="row"><span></span><p>国内首个全尺寸皮卡平台，双叉臂前悬架+多连杆后悬架，开创舒适驾乘新境界</p></div>
+                        <div class="row"><span></span><p>全新升级底盘架构，通信网络架构可拓展，充分满足性能安全、信息安全与功能安全</p></div>
+                    </div>
+                    <div class="r img" style="width:685px; margin-right: 100px;"><img src="./images/details/1.png"/></div>
+                </div>
+                <div class="item" style="margin-top:390px">
+                    <div class="l img" style="width:600px; top:-50px; margin-left: 10%;"><img src="./images/details/2.png"/></div>
+                    <div class="r info wow fadeInRight">
+                        <div class="subTitle">天生强劲  激擎无限</div>
+                        <div class="row"><span></span><p>强劲动力：行业首创48V柴油混合动力，中低速扭矩提升至220N·m，峰值扭矩可达450N·m</p></div>
+                        <div class="row"><span></span><p>高效节油：48V混动系统具备启停及能量回收功能，搭载2000bar博世高压共轨系统，燃烧更充分，整车节油率最高达15%，综合油耗低至百公里6.8L</p></div>
+                        <div class="row"><span></span><p>百年基因：传承百年康明斯澎湃技术，匹配经典采埃孚8AT变速箱，换挡效率提升50%，传动效率最高可达96%，双百基因铸就黄金动力</p></div>
+                        <div class="row"><span></span><p>性能强大：博格华纳智能适时四驱系统+前中后三把差速锁，可满足泥地、沙地、雪地、运动、标准、经济，2H七种驾驶模式，实现全地形掌控</p></div>
+                    </div>
+                </div>
+                <div class="item" style="margin-top:340px; height:417px;">
+                    <div class="l info wow fadeInLeft" style="width: 32%;">
+                        <div class="subTitle">天生硬悍  刚毅威猛</div>
+                        <div class="row"><span></span><p>全尺寸硬派设计理念，近2.1米车宽，5.8米车长，3.5米超长轴距，威猛之躯傲视群雄，舒适驾乘越级之享</p></div>
+                        <div class="row"><span></span><p>机甲硬派+幻影时尚两款前脸设计，配以星际锋芒跃动腰线，引领潮流新风尚</p></div>
+                        <div class="row"><span></span><p>全LED矩阵式透镜大灯+L型日间行车灯，造型简洁；贯穿式后尾灯，具有开闭锁迎宾灯语，彰显时尚与未来感</p></div>
+                        <div class="row"><span></span><p>后尾门蹬车踏步，人性化设计更显实用之美</p></div>
+                    </div>
+                    <div class="r img" style="width:890px; margin-right:120px;"><img src="./images/details/3.png"/></div>
+                </div>
+                <div class="item" style="margin-top:300px">
+                    <div class="l img" style="flex:1;"><img src="./images/details/4.png" style="max-width:100%;"/></div>
+                    <div class="r info wow fadeInRight" style="width: 550px;">
+                        <div class="subTitle">天生舒享  品质驾乘</div>
+                        <div class="row"><span></span><p>宇宙科技静音座舱，国际领先的NVH调校，振动感受减小30%以上，带来舒适静谧的驾乘体验</p></div>
+                        <div class="row"><span></span><p>沉稳黑、激情橙、儒雅蓝三款套色内饰，彰显多面人生；大面积皮质包覆，搭配多彩氛围灯，豪华感跃然而生</p></div>
+                        <div class="row"><span></span><p>超1.1㎡全景天窗，后排靠背黄金倾斜角度，开阔视界与舒享驾乘伴你一路同行</p></div>
+                        <div class="row"><span></span><p>10向电动调节座椅，具备三档记忆与通风加热功能，减轻旅途疲惫</p></div>
+                        <div class="row"><span></span><p>双温区自动恒温空调+后排出风口，支持手机无线充电+数字钥匙开锁车，乐享驾乘，更享惬意人生</p></div>
+                        <div class="row"><span></span><p>驾舱与货箱预留220V电源接口，告别户外用电焦虑，纵享露营乐趣</p></div>
+                    </div>
+                </div>
+                <div class="item" style="margin-top:330px">
+                    <div class="l info wow fadeInLeft" style="width: 670px;">
+                        <div class="subTitle">天生睿智  科技智能</div>
+                        <div class="row"><span></span><p>14.6英寸超大中控高清显示屏，12.3英寸全彩数字液晶仪表，尽享科技豪华之美</p></div>
+                        <div class="row"><span></span><p>拥有投屏交互、智能情景模拟、智能人机互动等个性化功能，交互响应迅速，识别准确度高，结合专属虚拟卡通形象，让交互感受更加直观亲切</p></div>
+                        <div class="row"><span></span><p>腾讯TAI4.0智能生态座舱，集成内容优势，提供全场景智能车载服务，并支持实时通讯、K歌娱乐等，让用户尽享智能生活、智能社交、智能出行生态</p></div>
+                        <div class="row"><span></span><p>支撑整车OTA远程升级，为用户提供及时优质的智能服务</p></div>
+                    </div>
+                    <div class="r img" style="flex:1;"><img src="./images/details/5.png"/></div>
+                </div>
+                <div class="item" style="margin-top:250px">
+                    <div class="l img" style="flex:1;"><img src="./images/details/6.png" style="width:100%;"/></div>
+                    <div class="r info wow fadeInRight" style="width:45%; max-width: 690px; height: 513px;">
+                        <div class="subTitle">天生可靠  五星防护</div>
+                        <div class="row"><span></span><p>高强度笼型车身+双安全气囊+侧气囊+侧气帘+全员预紧式安全带，全方位守护人员安全</p></div>
+                        <div class="row"><span></span><p>博世9.3版本ESP，在车辆紧急状态下保持车身稳定，守护行车安全</p></div>
+                        <div class="row"><span></span><p>L2+级智能驾驶辅助系统，12项辅助功能，（支持AEB自动刹车辅助、ACC自适应巡航、TSR交通标志识别、TJA交通拥堵辅助、FCW前碰撞预警、LDW车道保持系统、LCC车道居中辅助、LCA变道辅助、BSD盲区监测、RTCA倒车横穿预警、DOW开门预警、DMS疲劳驾驶监测，打造皮卡圈最强驾辅系统）</p></div>
+                        <div class="row"><span></span><p>“透明底盘”功能快速捕捉道路状况，避免坑洼、崎岖路面带来的底盘伤害</p></div>
+                        <div class="row"><span></span><p>DVR车载视频终端、MOD移动物体监测全景环视为安全驾驶提供有力的支持</p></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section qjzs">
+            <div class="title wow fadeInUp">全景展示</div>
+            <div class="content wow fadeInUp">
+                <div class="nav">
+                    <div class="n wg">外观</div>
+                    <div class="n ns">内饰</div>
+                    <div class="line"></div>
+                </div>
+                <a class="vr" href="http://foton.cloud-top.com.cn/p4_7/" target="_blank"><img src="./images/vr.png"/>全景观车</a>
+                <div class="swiper-container">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images/qjzs_1.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/qjzs_2.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section jctj">
+            <div class="title wow fadeInUp">精彩图集</div>
+            <div class="content wow fadeInUp">
+                <div class="swiper1">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/1.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/2.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/3.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/4.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper2">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/1.jpg" alt="" style="margin-left:-240px;">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/2.jpg" alt="" style="margin-left:-160px;">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/3.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images/jctj/4.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section cspz">
+            <div class="title wow fadeInUp">参数配置</div>
+            <div class="content wow fadeInUp"><img src="./images/parameter.jpg" alt=""></div>
+        </div>
+        <div class="section yysj">
+            <div class="title wow fadeInUp">预约试驾</div>
+            <div class="content wow fadeInUp">
+                <div class="row first">
+                    <input type="text" id="name" placeholder="请输入姓名">
+                    <input type="text" id="realPhone" placeholder="请输入手机号">
+                </div>
+                <div class="row">
+                    <select name="" id="province"><option value=-1>省份</option></select>
+                    <select name="" id="city"><option value=-1>请选择市</option></select>
+                </div>
+                <div class="row">
+                    <select name="" id="brand"><option value=-1>品牌</option></select>
+                    <select name="" id="carSeries"><option value=-1>选择车型</option></select>
+                </div>
+            </div>
+            <div class="btn submit">预约试驾</div>
+        </div>
+    </div>
+
+    <!-- 尾 -->
+    <div id="footer" class="phonehide" >
+        <div class="footer w1200-1400">
+            <div class="innerPanel w1200">
+                <div class="col col1">
+                    <div class="otherNavPanel">
+                        <a href="/tunland/about/contactUs">联系我们</a>
+                        <div class="line"></div>
+                        <a href="/tunland/bottom/siteMap">网站地图</a>
+                        <div class="line"></div>
+                            <a href="https://www.foton.com.cn/webback/static/images/code44.jpg">营业执照</a>
+                                    <div class="line"></div>
+                        <a href="http://futurefoton.zhiye.com/home" target="_blank">招贤纳士</a>
+                        <div class="line"></div>
+                        <a href="https://www.foton.com.cn/webback/privacy/index.html">隐私政策</a>
+                    </div>
+                    <div class="searchTitle">探索福田皮卡官网</div>
+                    <form class="searchPanel" action="/tunland/bottom/search" method="post">
+                        <input class="searchInput" type="text" value="SEARCH" name="title"/>
+                        <input type="submit" class="searchBtn trans"  value="" />
+                    </form>
+                </div>
+                <div class="footLine"></div>
+                <div class="col2 col">
+                    <div class="qrcodeBox">
+                        <div class="title">福田皮卡微信</div>
+                        <img class="qrcode" src="/tunland/static/images/contact_us/code4.jpg"/>
+                    </div>
+                    <div class="qrcodeBox">
+                        <div class="title">福田皮卡微博</div>
+                        <img class="qrcode" src="/tunland/static/images/contact_us/code2.jpg"/>
+                    </div>
+                    <div class="qrcodeBox">
+                        <div class="title">福田皮卡APP</div>
+                        <img class="qrcode" src="/tunland/static/images/contact_us/code3.jpg"/>
+                    </div>
+                </div>
+                <div class="footLine"></div>
+                <div class="col3 col">
+                    <div class="phoneTitle">24小时贵宾热线：</div>
+                    <div class="phone">4008-199-199</div>
+                    <p class="text">福田汽车旗下产品品牌</p>
+                    <div class="linkPanel">
+                        <div class="linkTitle">福田汽车家族网站</div>
+                        <div class="linkGroup trans">
+                            <div class="linkBox">
+                                <a href="https://www.foton.com.cn/" target="_blank" class="linkBtn">福田汽车官方网站</a>
+                                <a href="https://www.aumantruck.com/" target="_blank" class="linkBtn">欧曼官方网站</a>
+                                <a href="https://auv.foton.com.cn/" target="_blank" class="linkBtn">欧辉客车官方网站</a>
+                                <a href="https://aumark.foton.com.cn/" target="_blank" class="linkBtn">欧航欧马可官方网站</a>
+                                <a href="https://ollin.foton.com.cn" target="_blank" class="linkBtn">奥铃汽车官方网站</a>
+                                <a href="http://forland.foton.com.cn/" target="_blank" class="linkBtn">时代汽车官方网站</a>
+                                <a href="http://rowor.foton.com.cn" target="_blank" class="linkBtn">瑞沃品牌官方网站</a>
+                                <a href="http://www.fotonloxa.com/" target="_blank" class="linkBtn">雷萨重机官方网站</a>
+                                <a href="http://www.bfcec.com.cn/" target="_blank" class="linkBtn">福田康明斯官方网站</a>
+                                <a href="http://pbms.foton.com.cn" target="_blank" class="linkBtn">供应商门户网站</a>
+                                <a href="https://van.foton.com.cn/" target="_blank" class="linkBtn">图雅诺官方网站</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="copyright w1200-1400">
+                <div class="copyright w1200-1400">
+                <div class="innerPanel w1200 cnzz">
+                © 北汽福田汽车股份有限公司版权所有    <a style="color: #6d6d6d;" href="http://www.beian.miit.gov.cn/" >京ICP备12004550号</a>&nbsp;&nbsp;京公网安备 110401000095号 &nbsp;
+                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1278622396'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1278622396%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
+                <script>
+                    var _hmt = _hmt || [];
+                    (function() {
+                        var hm = document.createElement("script");
+                        hm.src = "https://hm.baidu.com/hm.js?a6b6ffc56a9ca88fbe0081ca9e2e1972";
+                        var s = document.getElementsByTagName("script")[0]; 
+                        s.parentNode.insertBefore(hm, s);
+                    })();
+                </script>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div class="alertbox">
+        <div class="boxwrap">
+            <div class="content">
+                <div class="alertheader">
+                    <h4 class="modaltitle">提示</h4>
+                </div>
+                <div class="modalbody">
+                    <p>亲，活动还未开启呦！敬请期待！</p>
+                </div>
+                <div class="modalfooter">
+                    <button type="button" class="btn btn-default ">朕知道了</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./libs/swiper-3.4.2.jquery.min.js"></script>
+    <script src="./libs/swiper.animate.min.js"></script>
+    <script src="./libs/wow.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./js/index.js"></script>
+    <script>
+        new foton.pk();
+    </script>
+</body>
+</html>

tunland/p7/indexm.html

@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/topBox.css" />
+    <link rel="stylesheet" href="./css/indexm.css" />
+    <link rel="stylesheet" href="./css/contentBox.css" />
+    <link rel="stylesheet" href="./libs/animate.min.css" />
+    <link rel="stylesheet" href="./libs/swiper.animate.min.js" />
+    <link rel="stylesheet" type="text/css" href="./libs/animate.min.css">
+    <link rel="stylesheet" type="text/css" href="./libs/swiper-3.4.2.min.css">
+    <script src="./libs/jquery-1.11.3.min.js"></script>
+
+    <link href="/tunland/static/images/favicon.ico" rel="shortcut icon">
+    <script src="https://hm.baidu.com/hm.js?a6b6ffc56a9ca88fbe0081ca9e2e1972"></script>
+    <link rel="stylesheet" href="/tunland/static/mStatic/css/common.css">
+    <script src="/tunland/static/mStatic/lib/jquery-1.11.2.min.js"></script>
+    <script src="/tunland/static/mStatic/js/common.js"></script>
+    <link rel="stylesheet" href="/tunland/static/mStatic/css/common.css">
+</head>
+
+<body>
+    		<!--header-->
+		<div class="hearder">
+			<div class="showfixedtop">
+				<div class="foton_logo">
+					<a href="/tunland/index"><img src="/tunland/static/mStatic/images/index/foton_logo.jpg" alt=""></a>
+				</div>
+				<div class="login_up">
+					<a href="/tunland/support/mobile/testDrive" class="yy_order">预约试驾</a>
+				</div>
+				<a href="/tunland/bottom/login" class="yy_login">会员中心</a>
+				<div class="button_nav">
+					<div class="btn_span">
+						<div class="lineTop arrowDirBase"></div>
+						<div class="lineCenter arrowDirBase"></div>
+						<div class="lineBottom arrowDirBase"></div>
+					</div>
+					<div class="nav_part">
+						<div class="touxbox">
+							<img src="/tunland/static/mStatic/images/index/toux.jpg">
+						</div>
+						<div class="registerbox">
+							<a href="/tunland/bottom/login" class="loginbtn">登 录</a>
+							<span class="shuline"></span>
+							<a href="/tunland/bottom/mobile/signUp" class="registerbtn">注 册</a>
+						</div>
+						<ul>
+							<li>
+								<span class="sec_title sec_index"><a href="/tunland/index">首页</a></span>
+							</li>
+							<li>
+								<span class="sec_title"><i class="all_icon icon"></i>产品展厅</span>
+								<div class="thi_title piccarbox">
+									<ul class="piccarbox-list">
+										<li>
+											<div class="type-box">
+												拓陆者
+											</div>
+											<ul class="type-list">
+												<li>
+													<div class="type-box">
+														&nbsp;&nbsp;&nbsp;&nbsp;拓陆者驭途
+													</div>
+													<ul class="type-list">
+														<li>
+															<a href="/yutu9/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驭途9
+															</a>
+														</li>
+														<li>
+															<a href="/yutu9-ssb/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驭途9 盛世版
+															</a>
+														</li>
+														<li>
+															<a href="/yutu8/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驭途8
+															</a>
+														</li>
+														<li>
+															<a href="/yutu8-ssb/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驭途8 盛世版
+															</a>
+														</li>
+													</ul>
+												</li>
+												<li>
+													<div class="type-box">
+														&nbsp;&nbsp;&nbsp;&nbsp;拓陆者胜途
+													</div>
+													<ul class="type-list">
+														<li>
+															<a href="/shengtu7/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胜途7
+															</a>
+														</li>
+														<li>
+															<a href="/shengtu5/m/">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胜途5
+															</a>
+														</li>
+													</ul>
+												</li>
+												<li>
+													<div class="type-box">
+														&nbsp;&nbsp;&nbsp;&nbsp;其他
+													</div>
+													<ul class="type-list">
+														<li>
+															<a href="/tunland/car/mobile/modelDetail/36:43">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拓陆者E7
+															</a>
+														</li>
+														<li>
+															<a href="/MarchCyWebsite/index.html">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拓陆者E5
+															</a>
+														</li>
+														<li>
+															<a href="/tunland/car/mobile/modelDetail/36:29">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拓陆者E3
+															</a>
+														</li>
+														<li>
+															<a href="/tunland/car/mobile/modelDetail/36:28">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拓陆者S
+															</a>
+														</li>
+
+													</ul>
+												</li>
+
+											</ul>
+										</li>
+										<li>
+											<div class="type-box">
+												福田征服者
+											</div>
+											<ul class="type-list">
+												<li>
+													<div class="type-box">
+														&nbsp;&nbsp;&nbsp;&nbsp;其他
+													</div>
+													<ul class="type-list">
+														<li>
+															<a href="/tunland/car/mobile/modelDetail/36:48">
+																&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;福田征服者
+															</a>
+														</li>
+													</ul>
+												</li>
+											</ul>
+										</li>
+									</ul>
+								</div>
+							</li>
+							<li>
+								<span class="sec_title"><i class="all_icon icon"></i>最新活动</span>
+								<div class="thi_title">
+									<a class="target_title" href="/tunland/support/mobile/special">优惠活动</a>
+								</div>
+							</li>
+
+							<li>
+								<span class="sec_title"><i class="buy_icon icon"></i>购车支持</span>
+								<div class="thi_title">
+									<!--<a class="target_title" href="http://fpv.foton.com.cn/tunland/1111/index.html" target="_blank">1111大促</a>-->
+									<a class="target_title" href="/tunland/support/mobile/sale">在线订车</a>
+									<a class="target_title" href="/tunland/support/mobile/testDrive">预约试驾</a>
+									<a class="target_title" href="http://www.fotonmall.com/" target="_blank">福田车e购</a>
+									<a class="target_title" href="/tunland/support/mobile/dealer">经销商查询</a>
+									<!-- <a class="target_title" href="/tunland/support/mobile/buycarflow">购车流程</a> -->
+									<!-- <a class="target_title" href="https://futian.tmall.com/shop/view_shop.htm?spm=a1z10.1-b.w5002-7470620951.7.87TB6k&user_number_id=2257394727&rn=daba8095af1890e6bf5c292cd691683e&scene=taobao_shop" target="_blank">汽车精品</a> -->
+								</div>
+							</li>
+							<li>
+								<span class="sec_title"><i class="curstm_icon icon"></i>客户服务</span>
+								<div class="thi_title">
+									<!-- <a class="target_title" href="/tunland/customer/mobile/policy">服务政策</a> -->
+									<a class="target_title" href="/tunland/customer/mobile/repair">维修与保养</a>
+									<a class="target_title" href="/tunland/customer/mobile/service">服务商查询</a>
+									<!-- <a class="target_title" href="/tunland/customer/mobile/aicbd">爱车宝典</a> -->
+									<!--<a class="target_title" href="/tunland/">纯正配件</a>-->
+									<!-- <a class="target_title" href="/tunland/customer/mobile/financialfw">金融服务</a> -->
+									<!--<a class="target_title" href="/tunland/customer/mobile/complaint">投诉建议</a>-->
+									<!-- <a class="target_title" href="/tunland/baoke/getphoneparam">车主有礼</a> -->
+								</div>
+							</li>
+							<li>
+								<span class="sec_title"><i class="news_icon icon"></i>关于品牌</span>
+								<div class="thi_title">
+									<a class="target_title" href="/tunland/about/profileMobile">品牌介绍</a>
+									<a class="target_title" href="/tunland/about/newsMobile">品牌新闻</a>
+									<!-- 
+                            <a class="target_title" href="/tunland/about/mobile/honor">品牌荣誉</a>
+                            <a class="target_title" href="/tunland/about/mobile/history">品牌历程</a> -->
+									<a class="target_title" href="/tunland/about/videoMobile">热门视频</a>
+									<a class="target_title" href="/tunland/about/joinMobile">招商加盟</a>
+									<a class="target_title" href="/tunland/about/contactsMobile">联系我们</a>
+								</div>
+							</li>
+							<li class="last_li">
+								<span class="sec_title"><i class="comin_icon icon"></i>福田世界</span>
+								<div class="thi_title">
+									<a class="target_title" target="_blank"
+										href="http://www.foton.com.cn/webback/about/brandMoble">走进福田</a>
+									<a class="target_title" target="_blank"
+										href="http://www.foton.com.cn/webback/news">新闻中心</a>
+								</div>
+							</li>
+						</ul>
+					</div>
+					<div class="bg_shadow_nav"></div>
+				</div>
+			</div>
+		</div>
+    <main id="container">
+        <div class="topBox">
+            <div class="topImg">
+                <img src="./images_mb/Mars7_02.jpg" style="width:100%">
+            </div>
+            <div class="titleBox">
+                <a class="tab active"  >产品亮点</a>
+                <a class="tab "  >全景展示</a>
+                <a class="tab " >精彩图集</a>
+                <a class="tab" >参数配置</a>
+                <a class="tab radio" >预约试驾</a>
+            </div>
+        </div>
+        <div>
+        <div class="back-img cpld" id="cpld">
+            <div class="contentBox tab-1-car-1-1">
+                <div class="tab-1-car-1"></div>
+                <div class="contentTitle">
+                    产品亮点
+                </div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生越级，引领不凡
+                    </div>
+                    <ul>
+                        <li class="item">基于FIA（Full-size Intelligent Architecture）全尺寸智能架构，兼容混合动力、纯电、燃料电池等动力总成</li>
+                        <li class="item">国内首个全尺寸皮卡平台，双叉臂前悬架+多连杆后悬架，开创舒适驾乘新境界</li>
+                        <li class="item">全新升级底盘架构，通信网络架构可拓展，充分满足性能安全、信息安全与功能安全</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="contentBox tab-1-car-1-2">
+                <div class="tab-1-car-1"></div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生强劲 激擎无限
+                    </div>
+                    <ul>
+                        <li class="item">强劲动力：行业首创48V柴油混合动力，中低速扭矩提升至220N·m，峰值扭矩可达450N·m </li>
+                        <li class="item">高效节油：48V混动系统具备启停及能量回收功能，搭载2000bar博世高压共轨系统，燃烧更充分，整车节油率最高达15%，综合油耗低至百公里6.8L</li>
+                        <li class="item">百年基因：传承百年康明斯澎湃技术，匹配经典采埃孚8AT变速箱，换挡效率提升50%，传动效率最高可达96%，双百基因铸就黄金动力</li>
+                        <li class="item">性能强大：博格华纳智能适时四驱系统+前中后三把差速锁，可满足泥地、沙地、雪地、运动、标准、经济，2H七种驾驶模式，实现全地形掌控</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="contentBox tab-1-car-1-3">
+                <div class="tab-1-car-1"></div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生硬悍 刚毅威猛
+                    </div>
+                    <ul>
+                        <li class="item">全尺寸硬派设计理念，近2.1米车宽，5.8米车长，3.5米超长轴距，威猛之躯傲视群雄，舒适驾乘越级之享</li>
+                        <li class="item">机甲硬派+幻影时尚两款前脸设计，配以星际锋芒跃动腰线，引领潮流新风尚</li>
+                        <li class="item">全LED矩阵式透镜大灯+L型日间行车灯，造型简洁；贯穿式后尾灯，具有开闭锁迎宾灯语，彰显时尚与未来感</li>
+                        <li class="item">后尾门蹬车踏步，人性化设计更显实用之美</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="contentBox tab-1-car-1-4">
+                <div class="tab-1-car-1"></div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生舒享 品质驾乘
+                    </div>
+                    <ul>
+                        <li class="item">宇宙科技静音座舱，国际领先的NVH调校，振动感受减小30%以上，带来舒适静谧的驾乘体验</li>
+                        <li class="item">沉稳黑、激情橙、儒雅蓝三款套色内饰，彰显多面人生；大面积皮质包覆，搭配多彩氛围灯，豪华感跃然而生</li>
+                        <li class="item">超1.1㎡全景天窗，后排靠背黄金倾斜角度，开阔视界与舒享驾乘伴你一路同行</li>
+                        <li class="item">10向电动调节座椅，具备三档记忆与通风加热功能，减轻旅途疲惫</li>
+                        <li class="item">双温区自动恒温空调+后排出风口，支持手机无线充电+数字钥匙开锁车，乐享驾乘，更享惬意人生</li>
+                        <li class="item">驾舱与货箱预留220V电源接口，告别户外用电焦虑，纵享露营乐趣</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="contentBox tab-1-car-1-5">
+                <div class="tab-1-car-1"></div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生睿智 科技智能
+                    </div>
+                    <ul>
+                        <li class="item">14.6英寸超大中控高清显示屏，12.3英寸全彩数字液晶仪表，尽享科技豪华之美</li>
+                        <li class="item">拥有投屏交互、智能情景模拟、智能人机互动等个性化功能，交互响应迅速，识别准确度高，结合专属虚拟卡通形象，让交互感受更加直观亲切</li>
+                        <li class="item">腾讯TAI4.0智能生态座舱，集成内容优势，提供全场景智能车载服务，并支持实时通讯、K歌娱乐等，让用户尽享智能生活、智能社交、智能出行生态</li>
+                        <li class="item">支撑整车OTA远程升级，为用户提供及时优质的智能服务</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="contentBox tab-1-car-1-6">
+                <div class="tab-1-car-1"></div>
+                <div class="contentMain">
+                    <div class="contentMainHeader">
+                        天生可靠 五星防护
+                    </div>
+                    <ul>
+                        <li class="item">高强度笼型车身+双安全气囊+侧气囊+侧气帘+全员预紧式安全带，全方位守护人员安全</li>
+                        <li class="item">博世9.3版本ESP，在车辆紧急状态下保持车身稳定，守护行车安全</li>
+                        <li class="item">
+                            L2+级智能驾驶辅助系统，12项辅助功能，（支持AEB自动刹车辅助、ACC自适应巡航、TSR交通标志识别、TJA交通拥堵辅助、FCW前碰撞预警、LDW车道保持系统、LCC车道居中辅助、LCA变道辅助、BSD盲区监测、RTCA倒车横穿预警、DOW开门预警、DMS疲劳驾驶监测，打造皮卡圈最强的驾辅系统）
+                        </li>
+                        <li class="item">“透明底盘”功能快速捕捉道路状况，避免坑洼、崎岖路面带来的底盘伤害</li>
+                        <li class="item">DVR车载视频终端、MOD移动物体监测与全景环视为安全驾驶提供强有力的支持</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="section qjzs" id="qjzs">
+            <div class="contentTitle2">全景展示</div>
+            <div class="content wow fadeInUp">
+                <div class="nav">
+                    <div class="n wg">外观</div>
+                    <div class="n ns">内饰</div>
+                    <div class="line"></div>
+                </div>
+                <div class="vr"><img src="./images_mb/pc/vr.png"/>全景观车</div></a>
+                <div class="swiper-container">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images_mb/pc/qjzs_1.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/pc/qjzs_2.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section jctj" id="jctj">
+            <div class="contentTitle2">精彩图集</div>
+            <div class="content wow fadeInUp">
+                <div class="swiper1">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/1.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/2.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/3.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/4.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper2">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/1.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/2.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/3.jpg" alt="">
+                        </div>
+                        <div class="swiper-slide">
+                            <img src="./images_mb/jctj/4.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section cspz" id="cspz" name="cspz" style="margin-top:60px;">
+            <div class="contentTitle2">参数配置</div>
+            <div class="content wow fadeInUp">
+                <img src="./images/parameter.jpg" style="width:100%">
+            </div>
+        </div>
+        <div class="section yysj">
+            <div class="contentTitle2" style="margin-left:0;width:100%;">预约试驾</div>
+            <div class="content wow fadeInUp">
+                <div class="row first">
+                    <input type="text" id="name" placeholder="请输入姓名">
+                    <input type="text" id="realPhone" placeholder="请输入手机号">
+                </div>
+                <div class="row">
+                    <select name="" id="province"><option value=-1>请选择省份</option></select>
+                    <select name="" id="city"><option value=-1>请选择市</option></select>
+                </div>
+                <div class="row">
+                    <select name="" id="brand"><option value=-1>请选择品牌</option></select>
+                    <select name="" id="carSeries"><option value=-1>请选择车型</option></select>
+                </div>
+            </div>
+            <div class="btn submit">预约试驾</div>
+        </div>
+    </div>
+
+
+    <!-- 弹窗 -->
+    <div class="alertbox">
+        <div class="boxwrap">
+            <div class="content">
+                <div class="alertheader">
+                    <h4 class="modaltitle">提示</h4>
+                </div>
+                <div class="modalbody">
+                    <p>亲，活动还未开启呦！敬请期待！</p>
+                </div>
+                <div class="modalfooter">
+                    <button type="button" class="btn btn-default ">朕知道了</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </main>
+    <div class="footer">
+        <div class="content_part">
+            <p class="vip_phone">
+                <span>24小时贵宾热线：</span>
+                <a href="tel:4008199199">4008-199-199</a>
+            </p>
+            <p class="vip_phone">
+                <span>海外客户服务热线：</span>
+                <a href="tel:4008199199">
+                    <i></i>+86-10-80762999</a>
+            </p>
+            <p class="foton_share clearfix">
+                <span>福田官方公众平台：</span>
+                <span class="weixin_share"></span>
+                <a class="weibo_share" href="https://m.weibo.cn/u/2731341697"></a>
+                <a class="app_icon"></a>
+            </p>
+            <div class="foton_web clearfix">
+                <span>福田汽车家族网站：</span>
+                <div class="otherWeb">
+                    <div class="websitechoose">
+                        <span class="websitesanjiao"></span>
+                        <select class="websitename">
+                            <option selected="" value="">福田汽车家族网站</option>
+                            <option value="https://www.aumantruck.com/">欧曼官方网站</option>
+                            <option value="https://auv.foton.com.cn/">欧辉客车官方网站</option>
+                            <option value="https://aumark.foton.com.cn//">欧马可官方网站</option>
+                            <option value="https://ollin.foton.com.cn/">奥铃官方网站</option>
+                            <option value="https://van.foton.com.cn">商务汽车官方网站</option>
+                            <option value="https://forland.foton.com.cn/">时代汽车官方网站</option>
+                            <option value="https://rowor.foton.com.cn">瑞沃品牌官方网站</option>
+                            <option value="https://www.fotonloxa.com/">雷萨重机官方网站</option>
+                            <option value="https://bfcec.com.cn/">福田康明斯官方网站</option>
+                            <option value="https://pbms.foton.com.cn">供应商门户网站</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="copyAndOtherWeb clearfix">
+                <div class="foton_copy">
+                    <p>© 北汽福田汽车股份有限公司版权所有&nbsp;<a href="https://www.beian.miit.gov.cn/">京ICP备12004550号</a> 京公网安备
+                        110401000095号&nbsp;<a style="color: #fff;"
+                            href="https://m.foton.com.cn/webback/static/images/code44.jpg"
+                            data-cl-id="645266948">营业执照</a></p>
+                    <p class="ipc_num" style="display: none;">京ICP备12004550号 京公网安备 110401000095号
+                        <script type="text/javascript">
+                            var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "https://");
+                            document.write(unescape("%3Cspan id='cnzz_stat_icon_1278622396'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol +
+                                "v1.cnzz.com/z_stat.php%3Fid%3D1278622396%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
+                        </script>
+                        <span id="cnzz_stat_icon_1278622396"><a
+                                href="https://www.cnzz.com/stat/website.php?web_id=1278622396" target="_blank"
+                                title="站长统计"><img border="0" hspace="0" vspace="0"
+                                    src="https://icon.cnzz.com/img/pic.gif"></a></span>
+                        <script src="https://v1.cnzz.com/z_stat.php?id=1278622396&amp;show=pic"
+                            type="text/javascript"></script>
+                        <script src="https://c.cnzz.com/core.php?web_id=1278622396&amp;show=pic&amp;t=z"
+                            charset="utf-8" type="text/javascript"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="mark_container">
+            <div class="markBg"></div>
+            <div class="mark_content">
+                <div class="mark_close"></div>
+                <p class="p_top">扫描下方的二维码 <br> 即可关注福田汽车集团官方微信号
+                </p>
+                <div class="mark_box clearfix">
+                    <div class="mark_left z_sli">
+                        <ul>
+                            <li><img src="/tunland/static/mStatic/images/index/QRcode_1.jpg">
+                            </li>
+                            <li><img src="/tunland/static/mStatic/images/index/code4.jpg">
+                            </li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <p>官方微信</p>
+                        <p class="qiehuan"><span class="show_z">福田皮卡</span><span>福田皮卡</span></p>
+                    </div>
+                </div>
+                <p class="bot">点击二维码，保存图片后用微信扫一扫即可关注</p>
+            </div>
+        </div>
+        <div class="mark_app">
+            <div class="markBg"></div>
+            <div class="mark_content">
+                <div class="mark_close"></div>
+                <p class="p_top">扫描下方的二维码 <br>
+                </p>
+                <div class="mark_box clearfix">
+                    <div class="mark_left">
+                        <img src="/tunland/static/mStatic/images/index/app.jpg">
+                        <p>APP</p>
+                    </div>
+                </div>
+                <p class="bot">识别二维码，即可下载福田E家APP</p>
+            </div>
+        </div>
+        <script>
+            var _hmt = _hmt || [];
+            (function() {
+                var hm = document.createElement("script");
+                hm.src = "https://hm.baidu.com/hm.js?a6b6ffc56a9ca88fbe0081ca9e2e1972";
+                var s = document.getElementsByTagName("script")[0];
+                s.parentNode.insertBefore(hm, s);
+            })();
+        </script>
+        <script src="/tunland/static/mStatic/lib/jquery.touchSwipe.min.js"></script>
+    </div>
+    <script src="./libs/swiper-3.4.2.jquery.min.js"></script>
+    <script src="./libs/swiper.animate.min.js"></script>
+    <script src="./libs/wow.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./js/indexm.js"></script>
+    <script>
+      $(function() {
+				new foton.Common();
+                new foton.pk();
+		})
+        
+    </script>
+</body>
+
+</html>

tunland/p7/js/index.js

@@ -0,0 +1,367 @@
+window.foton = window.foton || {};
+(function(){
+    function pk(){
+        this.baseUrl = window.location.origin;
+        this.init();
+    }
+
+    p = pk.prototype;
+
+    p.init = function(){
+        this.bindEvent();
+        this.listenTopBar();
+        this.qjzs();
+        this.jctj();
+        this.yysj();
+
+        // 模块动画
+		var wow = new WOW({
+			boxClass: 'wow',
+			animateClass: 'animated',
+			offset: 100,
+			mobile: false,
+			live: true
+		});
+		wow.init();
+    }
+
+    p.bindEvent = function(){
+        const _this = this;
+        // 预约试驾
+        $(".submit").click(e=>{
+            var flag = true;
+            var msg = "";
+            if(!$("#name").val()) {
+                msg = "姓名不能为空！";
+                flag = false;
+                alertMsg(msg);
+                return false;
+            }
+            p.checkPhoneNum($("#realPhone")).then( result => {
+                if(!result){
+
+                }else{
+                    $(".yysj select").each(function() {
+                        var select = $(this).find("option:selected");
+                        if(select.val() == -1) {
+                            flag = false;
+                            msg = "请选择" + select.html();
+                            return false;
+                        }
+                    });
+                    if(!flag) {
+                        alertMsg(msg);
+                        return false;
+                    }
+        
+        
+        
+                    if (flag) {
+                        var params = {
+                            BrandId: $("#brand").val(),
+                            SeriesId: $("#carSeries").val(),
+                            ProvinceId: $("#province").val(),
+                            CityId: $("#city").val(),
+                            DealerId: $("#Dealer").val(),
+                            Name: $("#name").val(),
+                            Phone: $("#realPhone").val(),
+                            Remark: $("#Remark").val()
+                    
+                        };
+                        _this.getData('post', _this.baseUrl+"/tunland/clue/PostLeads", params).then(resp => {
+                            if(resp.status == 0){
+                                alertMsg("提交成功");
+                            }
+                        })
+                        p.LzInfo();
+                    } else {
+                        alertMsg(msg);
+                    }
+                }
+            })
+        })
+
+        //关闭弹窗按钮
+        $(".modalfooter button").on("click", function() {
+            $(".alertbox").hide()
+        });
+    }
+
+    // 导航栏吸附
+    p.listenTopBar = function(){
+        const _this = this;
+        // 监听页面滚动，联动导航栏
+        _this.listenScroll = true;
+
+        $(document).scroll(e=>{
+            let bannerH = $("#banner").height() - 71;
+            let top = $(document).scrollTop();
+            if(top >= bannerH){
+                $("#navContainer").addClass("fixed");
+            }else{
+                $("#navContainer").removeClass("fixed");
+            }
+        })
+
+        // 锚点
+        let ary = ["cpld", "qjzs", "jctj", "cspz"];
+        $("#navContainer .nav .n").click(e=>{
+            let index = $(e.currentTarget).index();
+            let section = $(`.${ary[index]}`);
+            let top = section.offset().top - 80 - 75;
+            
+            window.scrollTo({
+                top: top,
+                behavior: "smooth"
+            })
+
+            _this.listenScroll = false;
+            setTimeout(e=>{
+                _this.listenScroll = true;
+            },1500)
+
+            $("#navContainer .nav .n").removeClass("active");
+            $(e.currentTarget).addClass("active");
+            $("#navContainer .nav .line").css("left", 106*index)
+        })
+
+
+        // 锚点控制导航
+        let cpld = $(".cpld").offset().top;
+        let qjzs = $(".qjzs").offset().top;
+        let jctj = $(".jctj").offset().top;
+        let cspz = $(".cspz").offset().top;
+        window.onscroll = function(){
+            console.log(1111, _this.listenScroll);
+            if(_this.listenScroll === false){ return}
+
+            let top = window.scrollY + 1000;
+
+            let index = 0;
+            if(top <= qjzs){
+                index = 0;
+            }else if(top <= jctj){
+                index = 1;
+            }else if(top <= cspz){
+                index = 2;
+            }else{
+                index = 3;
+            }
+            $("#navContainer .nav .n").removeClass("active");
+            $("#navContainer .nav .n").eq(index).addClass("active");
+            $("#navContainer .nav .line").css("left", 106*index);
+
+        }
+    }
+
+    // 全景展示滚动
+    p.qjzs = function(){
+      new Swiper(".qjzs .swiper-container", {
+        prevButton:'.qjzs .wg',
+        nextButton:'.qjzs .ns',
+        onTouchStart: function(swiper){
+            // alert(swiper.activeIndex);
+            $("#container .qjzs .nav .line").toggleClass("right");
+        }
+      });
+    
+    }
+
+    // 精彩图集
+    p.jctj = function(){
+
+    
+        var galleryTop = new Swiper('.swiper1', {
+            spaceBetween: 10,
+            onSlideChangeStart: function(swiper){
+                let index = swiper.activeIndex;
+                let len = $(".swiper1 img").length;
+                
+                if(index == 0){
+                    galleryThumbs.slideTo(0);
+                }else if(index == len-1){
+                    galleryThumbs.slideTo(3);
+                }
+            }
+        });
+        var galleryThumbs = new Swiper('.swiper2', {
+            spaceBetween: 24,
+            slidesPerView: 'auto',
+            touchRatio: 0.2,
+            freeMode: true,
+            watchSlidesProgress: false,
+            onClick: function(swiper){
+                let index = swiper.clickedIndex;
+                galleryTop.slideTo(index);
+            }
+        });
+    
+    }
+
+
+    // 预约试驾
+    p.yysj = function(){
+        const _this = this;
+        setProvince();
+        setBrand();
+
+
+
+        function setProvince(){
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getProvince").then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#province").empty();
+                resp.data.unshift({ID:-1, FNAME:"省份"});
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option data-fcode="' + val.FCODE + '" value="' + val.ID + '">' + val.FNAME + '</option>');
+                    $("#province").append($option);
+                });
+            })
+
+            $("#province").bind("change", function() {
+                var provinceid = $("#province option:selected").attr("value");
+                setCity(provinceid);
+            });
+            
+        }
+        function setCity(provinceid){
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getCityOfPronvince", {pId: provinceid}).then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#city").empty();
+                resp.data.unshift({dmpCityId:-1, cityName:"市"});
+
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option value="' + val.dmpCityId + '">' + val.cityName + '</option>');
+                    $("#city").append($option);
+                });
+            })
+
+            $("#city").unbind("change");
+            $("#city").bind("change", function() {
+                _this.getData('get', _this.baseUrl+"/tunland/clue/getDealer", {cityId:$("#city").val()})
+            });
+        }
+        function setBrand(){
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getBrand").then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#brand").empty();
+                
+                resp.data.unshift({ID:-1, NAME:"品牌"});
+
+                $.each(resp.data, function(i, val) {
+                    if (val.ID == '504f7428-439a-4f87-9540-1ad1f334962e' || val.ID == -1) {
+                        var $option = $('<option value="' + val.ID + '">' + val.NAME + '</option>');
+                        $("#brand").append($option);
+                    }
+                });
+            })
+
+            $("#brand").bind("change", function() {
+                setCarSeries($("#brand").val());
+            });
+        }
+        function setCarSeries(brandId){
+            $("#carSeries").empty();
+
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getSeries", {brandId}).then( resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+                
+                resp.data.unshift({ID:-1, NAME:"选择车型"});
+
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option value="' + val.ID + '">' + val.NAME + '</option>');
+                    $("#carSeries").append($option);
+                });
+                // if(!isNaN(isbind)) {
+                //     $("#carSeries").val(isbind);
+                // }
+            })
+        }
+    }
+
+    p.checkPhoneNum = function(vInput, enable) {
+        //手机号
+        var reg = /^1(3|4|5|6|8|7)\d{9}$/;
+        var flag = false;
+    
+        var phoneVal = vInput.val();
+        if(phoneVal == "" || phoneVal == "手机号码") {
+            alertMsg("手机号不能为空");
+        } else if(!reg.test(phoneVal)) {
+            alertMsg("请输入正确的手机号");
+        } else {
+            //验证手机号码是否已经注册过
+            if(enable) {
+                var urlJson = {
+                    a: "Verifymtel",
+                    tel: phoneVal
+                }
+                return new Promise(resolve => {
+                    this.getData('get', _this.baseUrl+ "/tunland/clue/getProvince", urlJson).then(resp => {
+                        if(resp.statcode == 0) {
+                            resolve(true);
+                        }else{
+                            resolve(false);
+                        }
+                    })
+                })
+            } else {
+                return Promise.resolve(true);
+            }
+        }
+        return Promise.resolve(flag);
+    }
+
+    p.LzInfo = function () {
+        const _this = this;
+        $.ajax({
+            type: "POST",
+            async: false,
+            url: _this.baseUrl+"/tunland/dmp/dmpLzInfo",
+            data: {
+                brandId: $("#brand").val(),
+                seriesId: $("#carSeries").val(),
+                provinceId: $("#province").val(),
+                cityId: $("#city").val(),
+                name: $("#name").val(),
+                tel: $("#realPhone").val()
+            },
+            dataType: "json"
+        });
+    }
+
+    p.getData = function(method="GET", url, data={}){
+        return new Promise(resolve=>{
+            $.ajax({
+                url:url,
+                method: method,
+                data: method.toUpperCase()=="GET" ? data : JSON.stringify(data),
+                dataType:'json',
+                contentType:"application/json;charset=utf-8",
+                success:e=>{
+					resolve(e)
+				}
+            })
+        })
+    }
+
+    function alertMsg(content) {
+        $('.alertbox').show();
+        $('.alertbox').css("z-index", "999");
+        $(".modalbody").html(content);
+    
+    };
+
+    window.foton.pk = pk;
+})()

tunland/p7/js/indexm.js

@@ -0,0 +1,363 @@
+window.foton = window.foton || {};
+(function(){
+    function pk(){
+        this.baseUrl = window.location.origin
+        this.init();
+    }
+
+    p = pk.prototype;
+
+    p.init = function(){
+        this.bindEvent();
+        this.listenTopBar();
+        this.yysjLink();
+        this.qjzs();
+        this.qjgc();
+        this.jctj();
+        this.yysj();
+
+        // 模块动画
+		var wow = new WOW({
+			boxClass: 'wow',
+			animateClass: 'animated',
+			offset: 100,
+			mobile: false,
+			live: true
+		});
+		wow.init();
+    }
+
+    p.bindEvent = function(){
+        const _this= this
+        // 预约试驾
+        $(".submit").click(e=>{
+            var flag = true;
+            var msg = "";
+            if(!$("#name").val()) {
+                msg = "姓名不能为空！";
+                flag = false;
+                alertMsg(msg);
+                return false;
+            }
+            p.checkPhoneNum($("#realPhone")).then( result => {
+                if(!result){
+
+                }else{
+                    $(".yysj select").each(function() {
+                        var select = $(this).find("option:selected");
+                        if(select.val() == -1) {
+                            flag = false;
+                            msg = select.html();
+                            return false;
+                        }
+                    });
+                    flag=true
+                    if(!flag) {
+                        alertMsg(msg);
+                        return false;
+                    }
+        
+        
+        
+                    if (flag) {
+                        var params = {
+                            BrandId: $("#brand").val(),
+                            SeriesId: $("#carSeries").val(),
+                            ProvinceId: $("#province").val(),
+                            CityId: $("#city").val(),
+                            DealerId: $("#Dealer").val(),
+                            Name: $("#name").val(),
+                            Phone: $("#realPhone").val(),
+                            Remark: $("#Remark").val()
+                    
+                        };
+                        _this.getData('post', _this.baseUrl+"/tunland/clue/PostLeads", params).then(resp => {
+                            if(resp.status == 0){
+                                alertMsg("提交成功");
+                            }
+                        })
+                        p.LzInfo();
+                    } else {
+                        alertMsg(msg);
+                    }
+                }
+            })
+        })
+
+        //关闭弹窗按钮
+        $(".modalfooter button").on("click", function() {
+            $(".alertbox").hide()
+        });
+    }
+
+
+    // 导航栏吸附
+    p.listenTopBar = function(){
+        $(document).scroll(e=>{
+            let bannerH = $(".topImg").height() - 75;
+            let top = $(document).scrollTop();
+            if(top >= bannerH){
+                $(".titleBox").addClass("fixed");
+            }else{
+                $(".titleBox").removeClass("fixed");
+            }
+        })
+        // 锚点
+        let ary = ["cpld", "qjzs", "jctj", "cspz"];
+        
+        $(".titleBox .tab").click(e=>{
+            console.log('index');
+            let index = $(e.currentTarget).index();
+            
+            let section = $(`.${ary[index]}`);
+            let top = section.offset().top-56;
+            
+            window.scrollTo({
+                top: top,
+                behavior: "smooth"
+            })
+
+            $(".titleBox .tab").removeClass("active");
+            $(e.currentTarget).addClass("active");
+        })
+
+        let topList = []
+        ary.forEach((item) => {
+            let section = $(`.${item}`);
+            topList.push(section.offset().top-56)
+        })
+        $(window).scroll(function () {
+            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            for(let i = 1 ;i<4;i++){
+                if(scrollTop<topList[0]){
+                    $(".titleBox .tab").removeClass("active");
+                    $(".titleBox .tab")[0].className+=' active';
+                }
+              else if(scrollTop>topList[i-1]&&scrollTop<topList[i]){
+                 
+                $(".titleBox .tab").removeClass("active");
+                $(".titleBox .tab")[i-1].className+=' active'
+               }else if(scrollTop>topList[3]){
+                $(".titleBox .tab").removeClass("active");
+                $(".titleBox .tab")[3].className+=' active'
+               }
+            }
+        })
+    }
+    //预约跳转
+    p.yysjLink = function(){
+        $('.tab.radio').click(()=>{
+            window.location.href="https://pickup.foton.com.cn/activity/testdrive/m/"
+        })
+    }
+
+    // 全景展示滚动
+    p.qjzs = function(){
+      new Swiper(".qjzs .swiper-container", {
+        prevButton:'.qjzs .wg',
+        nextButton:'.qjzs .ns',
+        onSlideChangeStart: function(swiper){
+            // alert(swiper.activeIndex);
+            $("#container .qjzs .nav .line").toggleClass("right");
+        }
+      });
+    
+    }
+    //全景观车
+    p.qjgc=function(){
+        $('.vr').click(()=>{
+            console.log('sss')
+            window.location.href = "http://foton.cloud-top.com.cn/p4_7/"
+        })
+    }
+
+    // 精彩图集
+    p.jctj = function(){
+
+        var galleryTop = new Swiper('.swiper1', {
+            // nextButton: '.swiper-button-next',
+            // prevButton: '.swiper-button-prev',
+            spaceBetween: 10,
+        });
+        var galleryThumbs = new Swiper('.swiper2', {
+            spaceBetween: 10,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            touchRatio: 0.2,
+            slideToClickedSlide: true
+        });
+        galleryTop.params.control = galleryThumbs;
+        galleryThumbs.params.control = galleryTop;
+       
+ 
+    }       
+
+
+
+    // 预约试驾
+    p.yysj = function(){
+        const _this = this;
+        setProvince();
+        setBrand();
+
+
+
+        function setProvince(){
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getProvince").then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#province").empty();
+
+                resp.data.unshift({ID:-1, FNAME:"省份"});
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option data-fcode="' + val.FCODE + '" value="' + val.ID + '">' + val.FNAME + '</option>');
+                    $("#province").append($option);
+                });
+            })
+
+            $("#province").bind("change", function() {
+                var provinceid = $("#province option:selected").attr("value");
+                setCity(provinceid);
+            });
+            
+        }
+        function setCity(provinceid){
+            _this.getData('get', _this.baseUrl+ "/tunland/clue/getCityOfPronvince", {pId: provinceid}).then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#city").empty();
+
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option value="' + val.dmpCityId + '">' + val.cityName + '</option>');
+                    $("#city").append($option);
+                });
+            })
+
+            $("#city").unbind("change");
+            $("#city").bind("change", function() {
+                setShop($("#city").val());
+            });
+        }
+        function setBrand(){
+            _this.getData( 'get', _this.baseUrl+ "/tunland/clue/getBrand").then(resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+
+                $("#brand").empty();
+                
+                resp.data.unshift({ID:-1, NAME:"品牌"});
+
+                $.each(resp.data, function(i, val) {
+                    if (val.ID == '504f7428-439a-4f87-9540-1ad1f334962e' || val.ID == -1) {
+                        var $option = $('<option value="' + val.ID + '">' + val.NAME + '</option>');
+                        $("#brand").append($option);
+                    }
+                });
+            })
+
+            $("#brand").bind("change", function() {
+                setCarSeries($("#brand").val());
+            });
+        }
+        function setCarSeries(brandId){
+            $("#carSeries").empty();
+
+            _this.getData( 'get', _this.baseUrl+ "/tunland/clue/getSeries", {brandId}).then( resp => {
+                if(resp.status == 1 ){
+                    return;
+                }
+                
+                resp.data.unshift({ID:-1, NAME:"选择车型"});
+
+                $.each(resp.data, function(i, val) {
+                    var $option = $('<option value="' + val.ID + '">' + val.NAME + '</option>');
+                    $("#carSeries").append($option);
+                    
+                });
+                // if(!isNaN(isbind)) {
+                //     $("#carSeries").val(isbind);
+                // }
+            })
+        }
+    }
+
+    p.checkPhoneNum = function(vInput, enable) {
+        //手机号
+        var reg = /^1(3|4|5|6|8|7)\d{9}$/;
+        var flag = false;
+    
+        var phoneVal = vInput.val();
+        if(phoneVal == "" || phoneVal == "手机号码") {
+            alertMsg("手机号不能为空");
+        } else if(!reg.test(phoneVal)) {
+            alertMsg("请输入正确的手机号");
+        } else {
+            //验证手机号码是否已经注册过
+            if(enable) {
+                var urlJson = {
+                    a: "Verifymtel",
+                    tel: phoneVal
+                }
+                return new Promise(resolve => {
+                    this.getData(_this.baseUrl+ "/tunland/clue/getProvince", urlJson).then(resp => {
+                        if(resp.statcode == 0) {
+                            resolve(true);
+                        }else{
+                            resolve(false);
+                        }
+                    })
+                })
+            } else {
+                return Promise.resolve(true);
+            }
+        }
+        return Promise.resolve(flag);
+    }
+
+    p.LzInfo = function () {
+        const _this= this
+        $.ajax({
+            type: "POST",
+            async: false,
+            url: _this.baseUrl+"/tunland/dmp/dmpLzInfo",
+            data: {
+                brandId: $("#brand").val(),
+                seriesId: $("#carSeries").val(),
+                provinceId: $("#province").val(),
+                cityId: $("#city").val(),
+                name: $("#name").val(),
+                tel: $("#realPhone").val()
+            },
+            dataType: "json"
+        });
+    }
+
+    p.getData = function(method="GET", url, data={}){
+        return new Promise(resolve=>{
+            $.ajax({
+                url:url,
+                method: method,
+                data: method.toUpperCase()=="GET" ? data : JSON.stringify(data),
+                dataType:'json',
+                contentType:"application/json;charset=utf-8",
+                success:e=>{
+					resolve(e)
+				}
+            })
+        })
+    }
+
+    function alertMsg(content) {
+        $('.alertbox').show();
+        $('.alertbox').css("z-index", "999");
+        $(".modalbody").html(content);
+    
+    };
+
+    window.foton.pk = pk;
+})()

tunland/p7/libs/swiper.animate.min.js

@@ -0,0 +1,2 @@
+//本插件由www.swiper.com.cn提供
+function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate();var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+"  "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}