You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
632 lines
32 KiB
632 lines
32 KiB
<!--
|
|
* @Description: In User Settings Edit
|
|
* @Author: your name
|
|
* @Date: 2019-04-23 17:33:02
|
|
* @LastEditTime: 2019-12-06 10:45:44
|
|
* @LastEditors: Please set LastEditors
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>凤凰商城 - 汽车零配件网上商城(刹车、滤芯、电瓶、引擎)</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<!-- @todo: fill with your company info or remove -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Themelize.me">
|
|
|
|
<!-- Bootstrap v4.1.3 CSS via CDN -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
|
|
|
|
<!-- Plugins required on all pages NOTE: Additional non-required plugins are loaded ondemand as of AppStrap 2.5 -->
|
|
|
|
<!-- Theme style -->
|
|
<link href="assets/css/theme-style.min.css" rel="stylesheet">
|
|
|
|
<!-- Shop UI CSS - required if using shopping cart or any shop pages -->
|
|
<link href="assets/css/theme-shop.min.css" rel="stylesheet">
|
|
|
|
<!--Your custom colour override-->
|
|
<link href="#" id="colour-scheme" rel="stylesheet">
|
|
|
|
<!-- Your custom override -->
|
|
<link href="assets/css/custom-style.css" rel="stylesheet">
|
|
|
|
|
|
|
|
<!-- Optional: ICON SETS -->
|
|
<!-- Iconset: Font Awesome 5.0.13 via CDN -->
|
|
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
|
|
<!-- Iconset: flag icons - http://lipis.github.io/flag-icon-css/ -->
|
|
<link href="assets/plugins/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
|
|
<!-- Iconset: ionicons - http://ionicons.com/ -->
|
|
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
|
<!-- Iconset: Linearicons - https://linearicons.com/free -->
|
|
<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet">
|
|
<!-- Iconset: Lineawesome - https://icons8.com/articles/line-awesome -->
|
|
<link href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css" rel="stylesheet">
|
|
|
|
|
|
<!-- Le fav and touch icons - @todo: fill with your icons or remove, try https://realfavicongenerator.net -->
|
|
<link rel="manifest" href="assets/favicons/manifest.json">
|
|
<link rel="shortcut icon" href="assets/favicons/favicon.ico">
|
|
<meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
|
|
<!-- Google fonts -->
|
|
<link href='assets/fonts/OpenSans.css' rel='stylesheet' type='text/css'>
|
|
<link href='assets/fonts/Rambla.css' rel='stylesheet' type='text/css'>
|
|
<link href='assets/fonts/Calligraffitti.css' rel='stylesheet' type='text/css'>
|
|
<link href='assets/fonts/RobotoSlab.css' rel='stylesheet' type='text/css'>
|
|
<link href='assets/fonts/Roboto.css' rel='stylesheet' type='text/css'>
|
|
|
|
</head>
|
|
|
|
<!-- ======== @Region: body ======== -->
|
|
<body class="page page-shop header-compact-sticky page-shop navbar-layout-navbar-below">
|
|
|
|
<!-- @plugin: page loading indicator, delete to remove loader -->
|
|
<div class="page-loader" data-toggle="page-loader"></div>
|
|
|
|
<a id="#top" href="#content" class="sr-only">Skip to content</a>
|
|
|
|
<!-- ======== @Region: #header ======== -->
|
|
<div id="header">
|
|
<div data-toggle="sticky">
|
|
|
|
<!--Header search region - hidden by default -->
|
|
<div class="header-search collapse" id="search">
|
|
<form class="search-form container">
|
|
<input type="text" name="search" class="form-control search" value="" placeholder="Search">
|
|
<button type="button" class="btn btn-link"><span class="sr-only">Search </span><i class="fa fa-search fa-flip-horizontal search-icon"></i></button>
|
|
<button type="button" class="btn btn-link close-btn" data-toggle="search-form-close"><span class="sr-only">Close </span><i class="fa fa-times search-icon"></i></button>
|
|
</form>
|
|
</div>
|
|
|
|
<!--Header & Branding region-->
|
|
<div class="header">
|
|
<!-- all direct children of the .header-inner element will be vertically aligned with each other you can override all the behaviours using the flexbox utilities (flexbox.html) All elements with .header-brand & .header-block-flex wrappers will automatically be aligned inline & vertically using flexbox, this can be overridden using the flexbox utilities (flexbox.htm) Use .header-block to stack elements within on small screen & "float" on larger screens use .order-first or/and .order-last classes to make an element show first or last within .header-inner or .headr-block elements -->
|
|
<div class="header-inner container justify-content-start">
|
|
<!--branding/logo -->
|
|
<div class="header-brand">
|
|
<img src="assets/img/logo/logo.png" height="50" width="50" class="pull-left mr-1">
|
|
<a class="header-brand-text" href="#" title="Home">
|
|
<h1 class="h2">
|
|
<span class="header-brand-text-alt">凤凰汽车零部件 </span>网上商城
|
|
</h1>
|
|
</a>
|
|
</div>
|
|
<!-- other header content -->
|
|
<div class="header-block order-12">
|
|
<div class="flex-column text-right d-none d-lg-flex mr-2">
|
|
<h6 class="my-0 mt-1">
|
|
<i class="fa fa-truck text-primary"></i> 全球限时免邮
|
|
</h6>
|
|
|
|
</div>
|
|
|
|
<!--Search trigger -->
|
|
<a href="#search" class="btn btn-icon btn-link header-btn float-right order-11" data-toggle="search-form" data-target=".header-search"><i class="fa fa-search fa-flip-horizontal search-icon"></i></a>
|
|
|
|
<!-- mobile collapse menu button - data-toggle="collapse" = default BS menu - data-toggle="off-canvas" = Off-cavnas Menu - data-toggle="overlay" = Overlay Menu -->
|
|
<a href="#top" class="btn btn-link btn-icon header-btn float-right d-lg-none" data-toggle="off-canvas" data-target=".navbar-main" data-settings='{"cloneTarget":true, "targetClassExtras": "navbar-offcanvas"}'> <i class="fa fa-bars"></i> </a>
|
|
<div class="header-divider d-none d-lg-block"></div>
|
|
|
|
<!--Shopping cart-->
|
|
<div class="dropdown dropdowns-no-carets dropdown-effect-fadeup float-right">
|
|
<a href="#" class="btn btn-icon btn-dark btn-link float-right dropdown-toggle cart-link" data-toggle="dropdown">
|
|
<span class="cart-link-icon"> <i class="fa fa-shopping-cart"></i> <span class="sr-only">Cart</span> <span class="cart-link-count bg-primary text-white">2</span> </span>
|
|
</a>
|
|
|
|
<!--Shopping cart dropdown -->
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow cart-dropdown-menu" role="menu">
|
|
<h5 class="dropdown-header mb-0">
|
|
购物车列表
|
|
</h5>
|
|
<hr class="mt-0 mb-3" />
|
|
<!--Shopping cart items-->
|
|
<div class="cart-items">
|
|
<!--Shopping cart item 1 -->
|
|
<div class="cart-items-item">
|
|
<a href="#" class="cart-img mr-2 float-left">
|
|
<img class="img-fluid" src="assets/img/shop/air01.jpeg" alt="Product 1">
|
|
</a>
|
|
<div class="float-left">
|
|
<h5 class="mb-0">
|
|
空气滤芯
|
|
</h5>
|
|
<p class="mb-0">¥90 / x2</p>
|
|
<a href="#" class="close cart-remove text-primary"> <i class="fa fa-times"></i> </a>
|
|
</div>
|
|
</div>
|
|
<!--Shopping cart item 2 -->
|
|
<div class="cart-items-item">
|
|
<a href="#" class="cart-img mr-2 float-left">
|
|
<img class="img-fluid" src="assets/img/shop/air02.jpeg" alt="Product 2">
|
|
</a>
|
|
<div class="float-left">
|
|
<h5 class="mb-0">
|
|
汽油滤芯
|
|
</h5>
|
|
<p class="mb-0">¥69 / x1</p>
|
|
<a href="#" class="close cart-remove text-primary"> <i class="fa fa-times"></i> </a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!--End of Shopping cart items-->
|
|
<hr class="mt-3 mb-0" />
|
|
<div class="dropdown-footer text-center">
|
|
<h5 class="font-weight-bold">
|
|
合计: <span class="text-primary">¥249</span>
|
|
</h5>
|
|
<a href="#" tabindex="-1" class="btn btn-outline-primary btn-sm btn-rounded mx-2">清理购物车</a> <a href="#" tabindex="-1" class="btn btn-primary btn-sm btn-rounded mx-2">去结算</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end of shopping cart -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-expand-md">
|
|
<!--everything within this div is collapsed on mobile-->
|
|
<div class="navbar-main collapse bg-grey-dark navbar-dark">
|
|
<div class="container clearfix">
|
|
<!--main navigation-->
|
|
<ul class="nav navbar-nav float-lg-left navbar-nav-flush dropdown-effect-fadeup ml-1">
|
|
<!-- Shop Homepage -->
|
|
<li class="nav-item"> <a href="index" class="nav-link">主页</a> </li>
|
|
<li class="nav-item"> <a href="#" class="nav-link">产品列表</a> </li>
|
|
<li class="nav-item"> <a href="#" class="nav-link">招商加盟</a> </li>
|
|
<li class="nav-item"> <a href="shop_list" class="nav-link">线下门店</a> </li>
|
|
<li class="nav-item"> <a href="#" class="nav-link">客服中心</a> </li>
|
|
|
|
</ul>
|
|
<!-- All Categories menu -->
|
|
<ul class="nav navbar-nav float-lg-right navbar-nav-flush-right dropdown-effect-fadeup">
|
|
<li class="nav-item dropdown dropdowns-no-carets dropdown-persist">
|
|
<a href="#" class="nav-link dropdown-toggle" id="account-drop" data-toggle="dropdown" data-hover="dropdown"><i class="fa fa-user mr-2"></i>我的账户</a>
|
|
<!-- Dropdown Menu -->
|
|
<div class="dropdown-menu dropdown-menu-right"> <a href="#" class="dropdown-item">我的收藏</a> <a href="#" class="dropdown-item">订单记录</a>
|
|
</li>
|
|
<li class="nav-item dropdown dropdowns-no-carets dropdown-persist"> <a href="#" class="btn btn-primary btn-sm btn-rounded text-uppercase font-weight-bold px-3 ml-3">促销商品</a> </li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!--/.navbar-collapse -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ======== @Region: #highlighted ======== -->
|
|
<div id="highlighted">
|
|
<!-- Showshow - Slider Revolution see: plugins/slider-revolution/examples&sources for help invoke using data-toggle="slider-rev" options can be passed to the slider via HTML5 data- ie. data-startwidth="960" -->
|
|
<div class="slider-wrapper rev_slider_wrapper bg-black" data-page-class="slider-appstrap-theme">
|
|
<div class="rev_slider" data-toggle="slider-rev" data-settings='{"startwidth":1100, "startheight":500, "delay":10000}'>
|
|
<ul>
|
|
<!-- SLIDE 1 -->
|
|
<li class="slide" data-transition="fadethroughdark" data-slotamount="7" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="assets/img/shop/mens-1-thumb.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" >
|
|
<img src="assets/img/slide-dummy.png" style='background-color:#151513' data-lazyload="assets/img/transparent.png" alt="Background image" data-bgposition="center top" data-bgfit="cover" data-bgparallax="10" class="rev-slidebg" data-no-retina />
|
|
<!-- SLIDE 1 Content-->
|
|
<div class="slide-content container pos-zindex-80">
|
|
<!--elements within .slide-content are pushed below navbar on "behind"-->
|
|
<!-- Layer 1 -->
|
|
<div class="tp-caption text-grey" data-x="['left','left','left','left']" data-hoffset="['0','0','0','40']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['140','140','140','140']" data-fontsize="['52','52','52','52']" data-lineheight="['52','52','52','52']" data-width="420" data-height="none" data-whitespace="normal" data-type="text" data-basealign="slide" data-responsive_offset="on" data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1200,"to":"o:1;","delay":1300,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]' data-textAlign="left"> <span class="font-weight-bold text-uppercase text-white">Phoenix-BC86刹车钳促销中!</span>
|
|
</div>
|
|
<!-- Layer 3 -->
|
|
<div class="tp-caption text-grey" data-x="['left','left','left','left']" data-hoffset="['0','0','0','40']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['80','80','80','80']" data-fontsize="['20','20','20','30']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-basealign="slide" data-responsive_offset="on" data-frames='[{"delay":0,"speed":1200,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","delay":1400},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]' data-textAlign="['center','center','center','center']"> 最高可享8折优惠!
|
|
</div>
|
|
<!-- Layer 3 -->
|
|
<div class="tp-caption rs-parallaxlevel-8" data-frames='[{"from":"o:0;sX:3;sY:3;","speed":1500,"to":"o:0.20;sX:3;sY:3;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1200,"to":"x:[100%];","ease":"Power3.easeInOut"}]' data-x="left" data-y="bottom" data-hoffset="0" data-voffset="0" data-width="none" data-height="none" data-type="image" data-basealign="slide"> <i class="fa fa-bullseye icon-20x icon-bg op-1 text-white"></i>
|
|
</div>
|
|
<!-- Layer 4 -->
|
|
<div class="tp-caption tp-resizeme bg-primary-bright" data-frames='[{"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"x:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]' data-x="['left','left','left','left']" data-hoffset="['0','0','0','40']" data-y="bottom" data-voffset="120" data-width="380" data-height="4" data-basealign="slide"></div>
|
|
</div>
|
|
<div class="tp-caption tp-resizeme" data-x="['right','right','right','right']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']" data-voffset="['0','0','0','0']" data-width="full-proportional"
|
|
data-height="full-proportional"
|
|
data-whitespace="nowrap"
|
|
data-type="image" data-responsive_offset="on" data-frames='[{"delay":500,"speed":3800,"frame":"0","from":"opacity:0;x:150%;","to":"o:1;x:0;","ease":"Circ.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
|
|
data-textAlign="['inherit','inherit','inherit','inherit']"
|
|
data-paddingtop="[0,0,0,0]"
|
|
data-paddingright="[0,0,0,0]"
|
|
data-paddingbottom="[0,0,0,0]"
|
|
data-paddingleft="[0,0,0,0]"
|
|
style="z-index: 5;">
|
|
<img src="assets/img/slide-dummy.png" alt="" data-lazyload="assets/img/shop/slider-car-1.png" data-no-retina />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tp-bannertimer tp-bottom"></div>
|
|
</div>
|
|
<!--end of tp-banner-->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ======== @Region: #content ======== -->
|
|
<form id="choice" name='form' method="POST" action="/">
|
|
<div id="content" class="p-0">
|
|
|
|
<!-- Most Popular Products -->
|
|
<div id="features" class="container py-4 py-lg-6">
|
|
<hr class="hr-lg mt-0 mb-3 w-10 mx-auto hr-primary" />
|
|
<h2 class="text-center text-uppercase font-weight-bold my-0">
|
|
最受 欢迎 产品
|
|
</h2>
|
|
<h5 class="text-center font-weight-light mt-2 mb-0 text-muted">
|
|
Great products, great value!
|
|
</h5>
|
|
<hr class="mb-5 w-50 mx-auto" />
|
|
<!-- Products cards -->
|
|
<div class="card-deck-wrapper">
|
|
<div class="card-deck">
|
|
<!-- Product 1 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud01.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_a}}
|
|
</h5>
|
|
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="a" name="vote" class="btn btn-primary btn-vote text-light" value="a"> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
<!-- Product 2 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud02.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_b}}
|
|
</h5>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="b" name="vote" class="btn btn-primary btn-vote text-light" value="b"> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
<!-- Product 3 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud03.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_c}}
|
|
</h5>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="c" name="vote" class="btn btn-primary btn-vote text-light" value="c"> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<br/>
|
|
<div class="card-deck">
|
|
<!-- Product 4 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud04.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_d}}
|
|
</h5>
|
|
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="d" name="vote" class="btn btn-primary btn-vote text-light" value="d"> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
<!-- Product 5 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud05.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_e}}
|
|
</h5>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="e" name="vote" class="btn btn-primary btn-vote text-light" value="e"> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
<!-- Product 6 -->
|
|
<div class="card product-card">
|
|
<!-- Image & price content -->
|
|
<div class="pos-relative">
|
|
<img class="card-img-top img-fluid" src="assets/img/shop/devcloud06.jpg" alt="Card image cap">
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{{option_f}}
|
|
</h5>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a id="f" name="vote" class="btn btn-primary btn-vote text-light" value="f" btn-vote> ❤ LIKE</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Call to action -->
|
|
|
|
</div>
|
|
</form>
|
|
|
|
|
|
<!-- ======== @Region: #footer ======== -->
|
|
<footer id="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-4">
|
|
<h3 class="text-white text-uppercase text-slab font-weight-bold">
|
|
凤凰<span class="text-primary">商城</span>
|
|
</h3>
|
|
<p class="text-sm"> 顾客至上 服务第一 </p>
|
|
<address>
|
|
<ul class="list-unstyled text-sm">
|
|
|
|
<li>
|
|
<abbr title="Email"><i class="fa fa-envelope fa-fw text-white"></i></abbr>
|
|
Info@PartsUnlimited.com
|
|
</li>
|
|
|
|
</ul>
|
|
</address>
|
|
<!--social media icons-->
|
|
<div class="mt-3 mb-4 mb-lg-0">
|
|
<!--@todo: replace with company social media details-->
|
|
<a href="#" class="btn btn-icon btn-dark btn-rounded btn-flat"> <i class="fab fa-twitter"></i> <span class="sr-only">Fa twitter</span> </a>
|
|
<a href="#" class="btn btn-icon btn-dark btn-rounded btn-flat"> <i class="fab fa-facebook-f"></i> <span class="sr-only">Fa facebook f</span> </a>
|
|
<a href="#" class="btn btn-icon btn-dark btn-rounded btn-flat"> <i class="fab fa-linkedin-in"></i> <span class="sr-only">Fa linkedin in</span> </a>
|
|
<a href="#" class="btn btn-icon btn-dark btn-rounded btn-flat"> <i class="fab fa-google-plus-g"></i> <span class="sr-only">Fa google plus g</span> </a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7 offset-lg-1">
|
|
<div class="row">
|
|
<div class="col-6 col-md-3">
|
|
<h4 class="mt-0 text-slab">
|
|
制动配件
|
|
</h4>
|
|
<ul class="list-unstyled footer-links">
|
|
<li><a href="#">刹车片</a></li>
|
|
<li><a href="#">刹车钳</a></li>
|
|
<li><a href="#">制动液</a></li>
|
|
<li><a href="#">刹车软管</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<h4 class="mt-0 text-slab">
|
|
滤清器
|
|
</h4>
|
|
<ul class="list-unstyled footer-links">
|
|
<li><a href="#">空气滤清器</a></li>
|
|
<li><a href="#">燃油滤清器</a></li>
|
|
<li><a href="#">机油滤清器</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<h4 class="mt-0 text-slab">
|
|
电瓶
|
|
</h4>
|
|
<ul class="list-unstyled footer-links">
|
|
<li><a href="#">汽车电瓶</a></li>
|
|
<li><a href="#">电瓶充电器</a></li>
|
|
<li><a href="#">电瓶铜搭火线</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<h4 class="mt-0 text-slab">
|
|
发动机配件
|
|
</h4>
|
|
<ul class="list-unstyled footer-links">
|
|
<li><a href="#">发动机垫圈</a></li>
|
|
<li><a href="#">发动机曲轴</a></li>
|
|
<li><a href="#">三元催化器</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4 hr-white op-1" />
|
|
<!--@todo: replace with company copyright details-->
|
|
<div class="subfooter text-sm text-center">
|
|
<p>Copyright 2018 © 无限极汽车零部件有限公司</p>
|
|
<ul class="list-inline footer-links">
|
|
<li class="list-inline-item"><a href="#">服务条款</a></li>
|
|
<li class="list-inline-item"><a href="#">隐私</a></li>
|
|
<li class="list-inline-item"><a href="#">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="#top" class="btn btn-icon btn-dark pos-fixed pos-b pos-r mr-3 mb-3 scroll-state-hidden" title="Back to top" data-scroll="scroll-state"><i class="fa fa-chevron-up"></i></a>
|
|
</footer>
|
|
|
|
<!-- Style switcher - demo only - @todo: remove in production -->
|
|
<div class="colour-switcher">
|
|
<a href="#" class="colour-switcher-toggle" data-toggle="class" data-target=".colour-switcher"> <i class="fa fa-paint-brush"></i> </a>
|
|
<h5 class="text-uppercase my-0">
|
|
Theme Colours
|
|
</h5>
|
|
<hr />
|
|
<div class="theme-colours"> <a href="#green" class="green active" data-toggle="tooltip" data-placement="right" data-original-title="Green (Default)">Green</a> <a href="#red" class="red" data-toggle="tooltip" data-placement="right" data-original-title="Red">Red</a> <a href="#blue" class="blue" data-toggle="tooltip" data-placement="right" data-original-title="Blue">Blue</a> <a href="#purple" class="purple" data-toggle="tooltip" data-placement="right" data-original-title="Purple">Purple</a> <a href="#pink" class="pink" data-toggle="tooltip" data-placement="right" data-original-title="Pink">Pink</a> <a href="#orange" class="orange" data-toggle="tooltip" data-placement="right" data-original-title="Orange">Orange</a> <a href="#lime" class="lime" data-toggle="tooltip" data-placement="right" data-original-title="Lime">Lime</a> <a href="#blue-dark" class="blue-dark" data-toggle="tooltip" data-placement="right" data-original-title="Blue-dark">Blue-dark</a> <a href="#red-dark" class="red-dark" data-toggle="tooltip" data-placement="right" data-original-title="Red-dark">Red-dark</a> <a href="#brown" class="brown" data-toggle="tooltip" data-placement="right" data-original-title="Brown">Brown</a> <a href="#cyan-dark" class="cyan-dark" data-toggle="tooltip" data-placement="right" data-original-title="Cyan-dark">Cyan-dark</a> <a href="#yellow" class="yellow" data-toggle="tooltip" data-placement="right" data-original-title="Yellow">Yellow</a> <a href="#slate" class="slate" data-toggle="tooltip" data-placement="right" data-original-title="Slate">Slate</a> <a href="#olive" class="olive" data-toggle="tooltip" data-placement="right" data-original-title="Olive">Olive</a> <a href="#teal" class="teal" data-toggle="tooltip" data-placement="right" data-original-title="Teal">Teal</a> <a href="#green-bright" class="green-bright" data-toggle="tooltip" data-placement="right" data-original-title="Green-bright">Green-bright</a> </div>
|
|
<hr />
|
|
<p class="text-xs text-muted">Cookies are NOT enabled so colour selection is not persistent.</p>
|
|
<p class="text-xs my-0"><a href="index.html">Back to main homepage</a></p>
|
|
<p class="text-xs my-0"><a href="intro.html">Back to intro page</a></p>
|
|
</div>
|
|
<!--Hidden elements - excluded from jPanel Menu on mobile-->
|
|
<div class="hidden-elements js-off-canvas-exclude">
|
|
<!--@modal - signup modal-->
|
|
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form action="signup.html">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light">
|
|
<h4 class="modal-title">
|
|
Sign Up
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<h6 class="op-8">
|
|
Price Plan
|
|
</h6>
|
|
<select class="form-control">
|
|
<option>Basic</option>
|
|
<option>Pro</option>
|
|
<option>Pro +</option>
|
|
</select>
|
|
</div>
|
|
<hr />
|
|
|
|
<h6 class="op-8">
|
|
Account Information
|
|
</h6>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="signup-first-name">First Name</label>
|
|
<input type="text" class="form-control" id="signup-first-name" placeholder="First name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="signup-last-name">Last Name</label>
|
|
<input type="text" class="form-control" id="signup-last-name" placeholder="Last name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="signup-username">Userame</label>
|
|
<input type="text" class="form-control" id="signup-username" placeholder="Username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="signup-email">Email address</label>
|
|
<input type="email" class="form-control" id="signup-email" placeholder="Email address">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="signup-password">Password</label>
|
|
<input type="password" class="form-control" id="signup-password" placeholder="Password">
|
|
</div>
|
|
<div class="form-check text-xs">
|
|
<label class="form-check-label op-8">
|
|
<input type="checkbox" value="term" class="form-check-input mt-1">
|
|
I agree with the Terms and Conditions.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light py-3">
|
|
<div class="d-flex align-items-center">
|
|
<button type="button" class="btn btn-primary">Sign Up</button>
|
|
<button type="button" class="btn btn-link ml-1" data-dismiss="modal" aria-hidden="true">Cancel</button>
|
|
</div>
|
|
<p class="text-xs text-right text-lh-tight op-8 my-0 ml-auto">Already signed up? <a href="login.html">Login here</a></p>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</form>
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
|
|
<!--@modal - login modal-->
|
|
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-light">
|
|
<h4 class="modal-title">
|
|
Login
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label class="sr-only" for="login-email">Email</label>
|
|
<input type="email" id="login-email" class="form-control email" placeholder="Email">
|
|
</div>
|
|
<div class="form-group mb-0">
|
|
<label class="sr-only" for="login-password">Password</label>
|
|
<input type="password" id="login-password" class="form-control password mb-1" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light py-3">
|
|
<div class="d-flex align-items-center">
|
|
<button type="button" class="btn btn-primary">Login</button>
|
|
<button type="button" class="btn btn-link ml-1" data-dismiss="modal" aria-hidden="true">Cancel</button>
|
|
</div>
|
|
<p class="text-xs text-right text-lh-tight op-8 my-0 ml-auto">
|
|
Not a member? <a href="#" class="signup">Sign up now!</a>
|
|
<br />
|
|
<a href="#">Forgotten password?</a>
|
|
</p>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade modal-duration" data-modal-duration="1000" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="vote-modal">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
感谢:
|
|
</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
|
|
</div>
|
|
<div class="modal-body"> 感谢您选择我们的产品! </div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
</div>
|
|
|
|
|
|
<!--jQuery 3.3.1 via CDN -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<!-- Popper 1.14.3 via CDN, needed for Bootstrap Tooltips & Popovers -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
|
|
|
|
<!-- Bootstrap v4.1.3 JS via CDN -->
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
|
|
|
|
|
|
<!-- JS plugins required on all pages NOTE: Additional non-required plugins are loaded ondemand as of AppStrap 2.5 To disable this and load plugin assets manually simple add data-plugins-manual=true to the body tag -->
|
|
|
|
<!--Custom scripts & AppStrap API integration -->
|
|
<script src="assets/js/custom-script.js"></script>
|
|
<!--AppStrap scripts mainly used to trigger libraries/plugins -->
|
|
<script src="assets/js/script.js"></script>
|
|
</body>
|
|
</html> |