從零開始學 Web 之移動Web（九）微金所案例

時間 2019-11-11

標籤開始 web 移動案例欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！css

微金所案例

一、案例要求

利用響應式佈局，實現微金所頁面結構。html

二、不一樣屏幕尺寸佈局

總體樣式

中大屏幕下樣式

小屏幕下樣式

超小屏幕（移動端）下樣式

三、代碼結構

四、頁面結構

頁面結構主要分8大塊：前端

頭部塊
導航條
輪播圖
信息塊
預定塊
產品塊
新聞塊
合做塊

五、源碼

相關源代碼已放置github：https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zipjava

index.html 文件

<!DOCTYPE html>
<html lang="zh-CN">

<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 href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 在線字體圖標文件 -->
    <link href="./lib/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/wjs-index.css">
</head>

<body>
    <!-- 頭部塊開始 -->
    <header class="wjs-header hidden-sm hidden-xs">
        <div class="container">
            <div class="row">
                <!-- 在xs sm下是不顯示的，因此不必寫 -->
                <div class="col-md-2">
                    <a href="javascript:;" class="code">
                        <span class="fa fa-mobile fa-lg"></span>
                        <span>手機微金所</span>
                        <span class="fa fa-angle-down fa-lg"></span>
                        <img src="./images/code.jpg" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <span class="fa fa-phone"></span>
                    <a href="javascript:;">4006-89-4006（服務時間：9:00~21:00） 聯繫在線客服</a>
                </div>
                <div class="col-md-2">
                    <a href="javascript:;">常見問題</a>&nbsp;&nbsp;
                    <a href="javascript:;">財富登陸</a>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">免費註冊</button>
                    <button type="button" class="btn btn-link">登陸</button>
                </div>
            </div>
        </div>
    </header>
    <!-- 頭部塊結束 -->

    <!-- 導航條開始 -->
    <nav class="navbar navbar-default wjs-nav">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <span class="wjs_icon wjs_icon_logo"></span>
                    <span class="wjs_icon wjs_icon_text"></span>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav hidden-sm">
                    <li class="active">
                        <a href="#">我要投資
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">我要借貸</a>
                    </li>
                    <li>
                        <a href="#">平臺介紹</a>
                    </li>
                    <li>
                        <a href="#">新手專區</a>
                    </li>
                    <li>
                        <a href="#">最新動態</a>
                    </li>
                    <li>
                        <a href="#">微平臺</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">我的中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 導航條結束 -->

    <!-- 輪播圖開始 -->
    <div class="wjs-banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- 小白點 -->
            <ol class="carousel-indicators">
                <!-- data-target="#carousel-example-generic"：自定義屬性，給哪一個id的輪播圖加小白點 -->
                <!-- data-slide-to="0"：第幾個小白點 -->
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- 輪播圖主體部分 -->
            <div class="carousel-inner" role="listbox">
                <!-- HTML5 增長了一項新功能是 自定義數據屬性 ，也就是  data-* 自定義屬性。
                    jQuery中可使用data()方法獲取自定義屬性的值 -->
                <div class="item active" data-large-image="./images/slide_01_2000x410.jpg" data-small-image="./images/slide_01_640x340.jpg">
                    <!-- 這裏面的輪播圖片使用jq動態添加，不然加大小圖的話，加載的時候，不論是大屏幕仍是小屏幕
                        大小圖都會加載，浪費流量 -->

                    <!-- 每張輪播圖的圖片說明，這裏不須要 -->
                    <!-- <div class="carousel-caption">
                        ...
                    </div> -->
                    <a href="">
                        <img src="" alt="">
                    </a>
                </div>
                <div class="item" data-large-image="./images/slide_02_2000x410.jpg" data-small-image="./images/slide_02_640x340.jpg"></div>
                <div class="item" data-large-image="./images/slide_03_2000x410.jpg" data-small-image="./images/slide_03_640x340.jpg"></div>
                <div class="item" data-large-image="./images/slide_04_2000x410.jpg" data-small-image="./images/slide_04_640x340.jpg"></div>
            </div>

            <!-- 左右箭頭，點擊可切換上下一張 -->
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 輪播圖結束 -->

    <!-- 信息塊開始 -->
    <div class="wjs-info hidden-xs">
        <!-- 信息塊的製做可使用bootstrap組件的媒體對象來作 -->
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <!-- 信息塊結束 -->

    <!-- 預定塊開始 -->
    <div class="wjs-reverse hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <span class="wjs_icon wjs_icon_E906"></span>
                    <span>如今的 272 人在排隊，累計預定交易成功 7571 次</span>
                    <a href="javascript:;">什麼叫預定投標</a>
                    <a href="javascript:;">當即預定</a>
                </div>
                <div class="col-sm-3">
                    <span class="wjs_icon wjs_icon_E905"></span>
                    <a href="javascript:;">微金所企業宣傳片</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 預定塊結束 -->

    <!-- 產品塊開始 -->
    <div class="wjs-product">
        <div class="container">
            <!-- 手動滑動效果 -->
            <div class="tabs-parent">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#p1" aria-controls="p1" role="tab" data-toggle="tab">特別推薦</a>
                    </li>
                    <li role="presentation">
                        <a href="#p2" aria-controls="p2" role="tab" data-toggle="tab">微投資</a>
                    </li>
                    <li role="presentation">
                        <a href="#p3" aria-controls="p3" role="tab" data-toggle="tab">友金所</a>
                    </li>
                    <li role="presentation">
                        <a href="#p4" aria-controls="p4" role="tab" data-toggle="tab">團貸網</a>
                    </li>
                    <li role="presentation">
                        <a href="#p5" aria-controls="p5" role="tab" data-toggle="tab">懶投資</a>
                    </li>
                    <li role="presentation">
                        <a href="#p6" aria-controls="p6" role="tab" data-toggle="tab">掌遊寶</a>
                    </li>
                    <li role="presentation">
                        <a href="#p7" aria-controls="p7" role="tab" data-toggle="tab">英雄聯盟</a>
                    </li>
                </ul>
            </div>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="p1">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox active">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <div class="wjs-pRight-tip">
                                            <span data-toggle="tooltip" data-placement="top" title="微金寶">寶</span>
                                            <span data-toggle="tooltip" data-placement="top" title="北京市">北</span>
                                        </div>
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="p2">2</div>
                <div role="tabpanel" class="tab-pane" id="p3">3</div>
                <div role="tabpanel" class="tab-pane" id="p4">4</div>
                <div role="tabpanel" class="tab-pane" id="p5">5</div>
                <div role="tabpanel" class="tab-pane" id="p6">6</div>
                <div role="tabpanel" class="tab-pane" id="p7">7</div>
            </div>
        </div>
    </div>
    <!-- 產品塊結束 -->

    <!-- 新聞塊開始 -->
    <div class="wjs-news">
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-md-offset-2">
                    <h3 class="wjs_nTitle">所有新聞</h3>
                </div>
                <div class="col-md-1">
                    <div class="wjs_newsLine hidden-xs hidden-sm"></div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new01"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new02"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new03"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new04"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-7">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <ul class="wjs_newslist">
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微公告】關於海航通寶22期項目募集期延長通知
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】世紀佳緣與百合網的投資人首善財富董事長吳正新一行蒞臨微金所調研指導
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】封面人物第六期 ▏萬雅泉—— 手寫心情的雙魚座美女
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微公告】2016年7月11日微金所平臺系統升級維護公告
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】微金所與前海航交所攜手，正式推出安全優質的理財產品—海航金寶！
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】微金所七月電腦節，激情狂歡理財好禮送不停！
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微還款】一週還款公告2016年7月11日-7月17日
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">2</div>
                        <div role="tabpanel" class="tab-pane" id="messages">3</div>
                        <div role="tabpanel" class="tab-pane" id="settings">4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新聞塊結束 -->

    <!-- 合做塊開始 -->
    <footer class="wjs-partner">
        <div class="container">
            <h3>合做夥伴</h3>
            <ul>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner01"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner02"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner03"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner04"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner05"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner06"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner07"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner08"></a></li>
            </ul>
        </div>
    </footer>
    <!-- 合做塊結束 -->

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/iscroll.js"></script>
    <script src="./js/wjs-index.js"></script>
</body>

</html>

common.css 文件

/*公共css樣式*/

body {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: none;
    color: #333;
}

/*左邊距*/

.m_l10 {
    margin-left: 10px;
}

/*右邊距*/

.m_r10 {
    margin-right: 10px;
}

/*自定義字體*/

@font-face {
    font-family: 'wjs';
    src: url('../fonts/MiFie-Web-Font.eot');
    /* IE9*/
    src: url('../lib/fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../lib/fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../lib/fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../lib/fonts/MiFie-Web-Font.svg') format('svg');
    /* iOS 4.1- */
}

/*自定義字體使用樣式*/

.wjs_icon {
    font-family: wjs;
}

/*手機圖標對應的編碼*/

.wjs_icon_phone::before {
    content: "\e908";
}

/*電話圖標對應的編碼*/

.wjs_icon_tel::before {
    content: "\e909";
    font-size: 14px;
}

/*wjs logo*/

.wjs_icon_logo::before {
    content: "\e920";
}

/*wjs 文本*/

.wjs_icon_text::before {
    content: "\e93e";
}

.wjs_icon_new01::before {
    content: "\e90e";
}

.wjs_icon_new02::before {
    content: "\e90f";
}

.wjs_icon_new03::before {
    content: "\e910";
}

.wjs_icon_new04::before {
    content: "\e911";
}

.wjs_icon_partner01::before {
    content: "\e946";
}

.wjs_icon_partner02::before {
    content: "\e92f";
}

.wjs_icon_partner03::before {
    content: "\e92e";
}

.wjs_icon_partner04::before {
    content: "\e92a";
}

.wjs_icon_partner05::before {
    content: "\e929";
}

.wjs_icon_partner06::before {
    content: "\e931";
}

.wjs_icon_partner07::before {
    content: "\e92c";
}

.wjs_icon_partner08::before {
    content: "\e92b";
}

.wjs_icon_partner09::before {
    content: "\e92d";
}

.wjs_iconn_E903::before {
    content: "\e903";
}

.wjs_icon_E906::before {
    content: "\e906";
}

.wjs_icon_E905::before {
    content: "\e905";
}

.wjs_icon_E907::before {
    content: "\e907";
}

.wjs_icon_E901::before {
    content: "\e901";
}

.wjs_icon_E900::before {
    content: "\e900";
}

.wjs_icon_E904::before {
    content: "\e904";
}

.wjs_icon_E902::before {
    content: "\e902";
}

.wjs_icon_E906::before {
    content: "\e906";
}

wjs-index.less 文件

@baseColor: #e92322;

/* 頭部塊 */
.wjs-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    .row {
        height: 100%;
        text-align: center;
        > div:nth-of-type(-n+3) {
            border-right: 1px solid #ccc;
        }
        .code {
            display: block;
            position: relative;
            > img {
                display: none;
                position: absolute;
                border: 1px solid #ccc;
                border-top: none;
                left: 50%;
                transform: translateX(-50%);
                top: 49px;
            }
            &:hover {
                > img {
                    display: block;
                }
            }
        }
        > div:nth-last-of-type(1) {
            > .btn-danger {
                background-color: @baseColor;
                border-color: @baseColor;
            }
            > .btn {
                padding: 3px 15px;
            }
            > .btn-link {
                text-decoration: none;
                color: #aaa;
            }
            
        }
    }
}

/*導航條*/ 
.wjs-nav {
    &.navbar {
        margin-bottom: 0;
    }
    .navbar-brand {
        height: 80px;
        line-height: 50px;
        font-size: 40px;

        > span:nth-of-type(1) {
            color: @baseColor;
        }

        > span:nth-of-type(2) {
            color: #333;
        }
    }
    .navbar-toggle {
        margin-top: 23px;;
    }
    .navbar-nav {
        > li {
            height: 80px;
            > a {
                height: 80px;
                line-height: 50px;
                font-size: 16px;
                
                &:hover, &:active {
                    color: #777;
                    border-bottom: 3px solid @baseColor;
                }
            }
        }
        .active {
            a,a:hover,a:active {
                background-color: transparent;
                border-bottom: 3px solid @baseColor;
            }
        }
    }
}

/*輪播圖*/
/*
w<768px-移動端：圖片會隨着屏幕的縮小自動適應--縮小
    img的寬度爲100%,經過img標籤來實現

w>=768px：
    圖片作爲背景，當屏幕寬度變寬的時候，會顯示更多的圖片的兩邊區域
    1.background-image添加圖片
    2.添加background-position:center center
    3.background-size:cover
*/
.wjs-banner {
    .bigImg {
        width: 100%;
        height: 410px;
        /*去除圖片基線*/ 
        display: block;
        background-position:center center;
        background-size: cover;
    }

    .smallImg {
        // width: 100%;
        // display: block;
        img {
            width: 100%;
            /*去除圖片基線*/ 
            display: block;
        }
    }
}

/*信息塊*/
.wjs-info {
    padding: 20px;
    .wjs_icon {
        font-size: 26px;
    }
    .row {
        > div {
            margin: 10px 0;
            > a:hover {
                color: @baseColor;
            }
        }
    }
} 

/*預定塊*/
.wjs-reverse {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    .wjs_icon {
        font-size: 18px;
    }

    a:hover {
        color: @baseColor;
    }

    .col-sm-9 {
        > a:last-of-type {
            color: @baseColor;
            border-bottom: 1px dashed @baseColor;
        }
    }
}

/*產品塊*/ 
.wjs-product{
    clear: both;
    background-color: #eee;
    

    li {
        height: 100px;
        line-height: 100px;
        padding: 0 10px;
        > a {
            margin: 0;
            border: none;
            line-height: 50px;
        }

        a:hover {
            border: none;
            border-bottom: 3px solid @baseColor;
        }

        &.active {
            > a,a:hover,a:focus{
                background-color: transparent;
                border: none;
                border-bottom: 3px solid @baseColor;
            }
            
            
        }
    }
}

/*產品塊*/ 
.wjs-product {
    .tabs-parent {
        width: 100%;
        overflow: hidden;
    }
    .wjs-pBox {
        height: 100%;
        background-color: #fff;
        margin-top: 20px;
        position: relative;
        box-shadow: 1px 1px 5px #ccc;

        > .wjs-pLeft {
            height: 100%;
            margin-right: 100px;
            padding: 10px 0;
            font-size: 12px;
            position: relative;

            > p {
                font-size: 16px;
                text-align: center;
            }
            .row {
                margin-left: 0;
                margin-right: 0;
                > div:nth-of-type(even) {
                    text-align: right;
                }
            }
        }

        > .wjs-pRight {
            width: 100px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border-left: 1px dashed #ccc;
            text-align: center;
            padding-top: 40px;

            > .wjs-pRight-tip {
                width: 100%;
                span {
                    font-size: 12px;
                    border-radius: 3px;
                    cursor: pointer;
                }
                span:first-of-type {
                    border: 1px solid @baseColor;
                    color: @baseColor;
                }
                span:last-of-type {
                    border: 1px solid blue;
                    color: blue;
                }
            }

            > b {
                font-size: 40px;
                color: @baseColor;
            }
            > sub {
                bottom: 0;
                color: @baseColor;
            }
            &::before, &::after {
                content: "";
                width: 10%;
                height: 10px;
                border-radius: 5px;
                background-color: #eee;
                position: absolute;
                left: -5px;
            }
            &::before {
                top: -5px;
            }
            &::after {
                bottom: -5px;
            }
        }

        &.active {
            background-color: @baseColor;
            .wjs-pLeft {
                color: #fff;
                &::before {
                    content: "\e915";
                    font-family: "wjs";
                    position: absolute;
                    left: 0;
                    top: -4px;
                    font-size: 26px;
                }
            }
            .wjs-pRight {
                b,sub,p {
                    color: #fff;
                }
            }   
        }
    }
}

/*新聞塊*/
.wjs-news {
    padding: 20px;
    .wjs_nTitle{
        line-height:50px;
        font-size: 25px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        position: relative;
        &::before{
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 4px;
          border: 1px solid #ccc;
          position: absolute;
          bottom: -4px;
          right: -8px;
        }
    }
    /*設置li元素間的虛線*/ 
    .wjs_newsLine {
        width: 1px;
        height: 100%;
        position: absolute;
        border-left: 1px dashed @baseColor;
        left:45px;
        top:0;
    }
    .nav-tabs {
        border-bottom: none;
        > li {
            margin-bottom:60px;
            > a {
                background-color: #ccc;
                width: 60px;
                height: 60px;
                border: none;
                border-radius: 50%;

            }
            > a:hover {
                border: none;
                background-color: @baseColor;
            }
            &.active {
                > a {
                    border: none;
                    background-color: @baseColor;
                }
                
            }
            .wjs_icon{
                font-size: 30px;
                color: #fff;
              }
        }
        > li:last-of-type {
            margin-bottom: 0;
        }
        /*媒體查詢設置li元素的樣式*/
        @media screen and (min-width: 768px) and (max-width: 992px) {
            li {
                margin: 20px 30px;
            }
        } 
        @media screen and (max-width: 768px) {
            li {
                margin: 20px 0;
                width: 25%;
            }
        } 
    }

    .tab-content {
        .wjs_newslist {
            list-style: none;
            > li {
            line-height:60px;
            }
        }
    }
} 

/*合做塊*/ 
.wjs-partner {
    background-color: #eee;
    padding: 20px;
    text-align: center;
    h3 {
        width: 100%;
    }
    ul {
        list-style: none;
        display: inline-block;
        > li {
            float: left;
            margin: 0 15px;
        }
        .wjs_icon {
            font-size: 80px;
        }
    }
}

wjs-index.js 文件

$(function () {
    // 獲取全部的item元素
    var items = $(".carousel-inner .item");

    // 當屏幕大小改變的時候，動態建立圖片
    // triggle函數表示頁面在第一次加載的時候，自動觸發一次。
    $(window).on("resize", function () {
        // 判斷屏幕的大小，以決定加載大圖仍是小圖
        var screenWidth = $(window).width();
        // 添加大屏幕的圖片
        if (screenWidth >= 768) {
            // 爲每一個item添加大圖片
            items.each(function (index, value) {
                // 獲取每一個item的圖片，使用data()獲取自定義屬性
                var imgSrc = $(this).data("largeImage");
                // 使用插入小圖片的方法不能夠，由於路徑符號會被解析成空格
                $(this).html($('<a href="javascript:;" class="bigImg"></a>').css("backgroundImage", "url('" + imgSrc + "')"));
            });

            // 添加小屏幕的圖片
        } else {
            // 爲每一個item添加小圖片
            items.each(function (index, value) {
                // 獲取每一個item的圖片，使用data()獲取自定義屬性
                var imgSrc = $(this).data("smallImage");
                $(this).html('<a href="javascript:;" class="smallImg"><img src="' + imgSrc + '"></a>');
            });
        }
    }).trigger("resize");

    // 實現滑動輪播效果
    // 實現滑動輪播能夠能夠直接調用插件的點擊按鈕上下切換的功能

    // 獲取滑動區域的元素
    var carouselInner = $(".carousel-inner");
    var carousel = $(".carousel");
    var startX, endX;
    // 給元素添加touchstart和touchend事件
    carouselInner[0].addEventListener("touchstart", function (e) {
        startX = e.targetTouches[0].clientX;
    });

    carouselInner[0].addEventListener("touchend", function (e) {
        endX = e.changedTouches[0].clientX;
        // endX - startX > 10px 證實往右滑動
        if (endX - startX > 10) {
            carousel.carousel("prev");
        } else if (startX - endX > 10) {
            carousel.carousel("next");
        }
    });

    // 產品塊的寶，北標籤的鼠標懸停效果
    $('[data-toggle="tooltip"]').tooltip();

    // 設置產品塊的標籤欄在移動端時能夠滑動
    var ulProduct = $(".tabs-parent .nav-tabs");
    var liProducts = ulProduct.children("li");
    var totleWidth = 0;
    liProducts.each(function (index, element) {
        /*獲取寬度的方法的說明：
         * width():它只能獲得當前元素的內容的寬度
         * innerWidth():它能獲取當前元素的內容的寬度+padding
         * outerWidth():獲取當前元素的內容的寬度+padding+border
         * outerWidth(true):獲取元素的內容的寬度+padding+border+margin*/
        totleWidth += $(element).innerWidth();

    });
    ulProduct.width(totleWidth);
    // 使用iScroll插件實現滑動效果
    /*使用插件實現導航條的滑動操做*/
    var myScroll = new IScroll('.tabs-parent', {
        /*設置水平滑動，不容許垂直滑動*/
        scrollX: true,
        scrollY: false
    });
});