前端入門教程從0開始經過一個商城實例手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

本教程案例在線演示

有路網PC端
有路網移動端

免費配套視頻教程

免費配套視頻教程

教程配套源碼資源

教程配套源碼資源

本章目標

LESS

1.什麼是less

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增長了變量、Mixin、嵌套等特性。Less的語法更簡潔，能夠被翻譯爲CSS。

在vs code安裝less的編譯插件

安裝插件Easy LESS，以下圖所示

有了這個後，能夠在編輯器新建less文件，後綴名是.less,保存後會自動編譯成css

2. 變量

less能夠聲明變量，在其它地方直接引用。

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

將其編譯成 CSS 代碼以下：

p{
    background-color: #ffffff;
    color: #1A237E;
    padding: 15px;
}

ul{
    background-color: #ffffff;
}

li{
    color: #1A237E;
}

如今咱們要切換兩者的值，也就是黑色的背景和白色的文本，咱們只須要修改兩個變量的值就能夠了，而不是手動的去修改每一個值。

---

3. Mixins

Less 容許咱們將經常使用的樣式，打包封裝到 class 或 id 選擇器中。 其它地方能夠方便的引用。

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

將其轉換成 CSS 代碼以下

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

若是隻用於樣式打包，而不出如今css代碼中，那麼請在它的後面加上括號：

#circle(){
    background-color: #4CAF50;
    border-radius: 100%;
}

#small-circle{
    width: 50px;
    height: 50px;
    #circle
}

#big-circle{
    width: 100px;
    height: 100px;
    #circle
}

此時編譯成 CSS :

#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

Mixin 另外一個比較酷的功能就是它支持傳入參數，下面這個例子就爲 circle 傳入一個指定寬高的參數，默認是 25px。 這將建立一個 25×25的小圓和一個 100×100 的大圓。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

轉換成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

---

4. 嵌套

嵌套可用於以與頁面的HTML結構相匹配的方式構造樣式表，同時減小了衝突的機會。下面是一個無序列表的例子。

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

編譯成 CSS 代碼：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

就像在其它高級語言中同樣， Less 的變量根據範圍接受它們的值。若是在指定範圍內沒有關於變量值的聲明， less 會一直往上查找，直至找到離它最近的聲明。

回到 CSS 中來，咱們的 li 標籤將有白色的文本，若是咱們在 ul 標籤中聲明 @text-color 規則。

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

編譯生成的 CSS 代碼以下：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

---

5. 運算

你能夠對數值和顏色進行基本的數學運算。好比說咱們想要兩個緊鄰的 div 標籤，第二個標籤是第一個標籤的兩倍寬而且擁有不一樣的背景色。

@div-width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @div-width;
    background-color: @color;
}

#right{
    width: @div-width * 2;
    background-color: @color;
}

編譯成 CSS 以下：

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #03a9f4;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

vw單位

vw是css的一個屬性，和px，rem等相似，屬於長度單位。

在瀏覽器中， 1 vw = viewport 的寬度 /100

根據這個特性，vw 能夠幫助咱們實現移動端自適應佈局，其優勢在於所見即所得，甚至優於rem，由於徹底不用使用額外的計算。

推薦和sass、less這種css預處理語言一塊兒使用，由於其能夠定義變量及函數，會在使用vw上提供巨大幫助。

@vv:7.5vw;

.circle{
  width: 100/@vv;
  height: 100/@vv;
  border: 1px solid red;
  border-radius: 50%;
  font-size: 16/@vv;
  text-align: center;
  line-height: 100/@vv;
}

header.clear{
  width: 100%;
  height: 80/@vv;
  font-size: 42/@vv;
  background: #ededed;
  line-height: 80/@vv;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vw佈局練習</title>
    <link href="less/style.css" rel="stylesheet" type="text/css">

</head>

<body>
    <header class="clear">
        這是header
    </header>
    <div class="circle">
        circle
    </div>
</body>
</html>

下面三張圖分別是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表現

原理
以設計稿爲750爲例，假設viewport表明窗口寬度

750 => viewport
7.5 => viewport/100
//獲得
1vw => 7.5
// 元素list 寬爲300px
300 => 300/7.5 vw
//獲得
@vv = 7.5vw
300 => 300/@vv

阿里圖標庫iconfont使用

話很少說 進入官網 https://www.iconfont.cn/
搜索你想要的 ，好比【個人】

出來之後加入購物車

點擊購物車

點擊添加至項目 這時你若是沒登陸的話 ，會讓你登錄隨便選擇一個登錄方式好比 github

登錄成功以後你能夠選擇新建也能夠選擇老的項目

肯定好以後會是這樣一個頁面，而後下載至本地

下載後解壓會是一些這樣的文件

而後像我這樣把字體文件和css文件拿到你的項目裏

看下效果

移動端首頁製做

頂部搜索框

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="less/style.css">
</head>
<body>
  <div class="com-header-area">
    <div class="search-box">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="書名、做者、出版社、ISBN、文具">
    </div>
  </div>
</body>
</html>

less

@vv:3.75vw;

/*默認樣式重置(css reset)*/
*{
  margin: 0;
  font-size: 12/@vv; /* 中文字體大小的最小值 */
  /* font-family: xx; 也能夠設置字體 */
}
ol,ul {
  list-style: none; /* 去除列表樣式 */
  padding: 0;
  margin: 0;
}

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

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area{
  background-color: #f0f0f0;
  padding: 6/@vv 10/@vv;
  .search-box{
    background-color: #fff;
    display: flex;
    align-items: center;
    input{
      border: 0;
      padding: 6/@vv 0;
      width: 100%;
    }
    span{
      font-size: 12/@vv;
    }
  }
}

熱門搜索

html

<div class="com-content">
    <ul class="hot-search">
      <li class="hot">熱門搜索：</li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
    </ul>
  </div>

css

.com-content{
  background-color:#e1e5ee;
  .hot-search{
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 2/@vv;
    li{
      margin: 0 4/@vv;
      &.hot{
        color: orange;
      }
      a{
        color: #ccc;
      }
    }
  }
}

輪播圖

html

<div class="slide">
        <img src="img/slide.jpg">
      </div>

css

.slide {
    img {
      width : 375/@vv;
      height: 187.5/@vv;
    }
  }

保證條款

html

<div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保證正品</span>
        <span class="guarantee-span"><span class="check">√</span>保證低價</span>
        <span class="guarantee-span"><span class="check">√</span>24小時發貨</span>
        <span class="guarantee-span"><span class="check">√</span>無理由退貨</span>
      </div>

css

.guarantee-g {
    display        : flex;
    justify-content: center;
    background     : #fff;

    .guarantee-span {
      margin   : 6/@vv;
      .check {
        color: red;
      }
    }
  }

五大模塊

html

<div class="tab">
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
      </div>

css

.tab {
    display        : flex;
    justify-content: space-around;
    background     : #fff;
    a {
      display       : flex;
      flex-direction: column;
      align-items   : center;
      padding       : 6/@vv;
      img {
        width : 26/@vv;
        height: 26/@vv;
      }
    }
  }

中欄廣告

html

<div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
      </div>

推薦圖書

html

<div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推薦圖書</span>
            <span class="left-arrow">您喜歡的都在這裏</span>
            <a class="span-more">更多</a>
          </div>
        </div>
      </div>

css

.book-items {
    background: #fff;
    color     : #757070;

    .item {
      line-height: 42/@vv;
      display    : flex;
      font-weight: bold;
      .book_recommend {
        font-size  : 14/@vv;
        margin-left: 14/@vv;
      }

      .left-arrow {
        margin-left: 20/@vv;
      }

      a {
        margin-left : auto;
        margin-right: 20/@vv;
      }
    }
  }

推薦圖書列表

html

<div class="list-recommend">
          <ul>
            <li>
              <a href="#">
                <div class="book-img">
                  <img alt="阿彌陀佛麼麼噠" src="img/book.jpg">
                </div>
                <div class="bookName">阿彌陀佛麼麼噠</div>
                <div class="price">
                  <span>有路價 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥14.30</span>
                </div>
              </a>
            </li>
            <li><a href="#">
                <div class="book-img"><img alt="乖.摸摸頭" src="img/book.jpg"></div>
                <div class="bookName">乖.摸摸頭</div>
                <div class="price">
                  <span>有路價 ￥14.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥13.30</span>
                </div>
              </a></li>
            <li><a href="#">
                <div class="book-img"><img alt="好嗎好的" src="img/book.jpg"></div>
                <div class="bookName">好嗎好的</div>
                <div class="price">
                  <span>有路價 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥14.30</span>
                </div>
              </a></li>
          </ul>
        </div>

css

.list-recommend ul {
      display: flex;
      li {
        display        : flex;
        flex-direction: column;
        align-items: center;
        flex           : 1;
        img {
          max-width    : 80/@vv;
          margin-bottom: 10/@vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }

換一換

html

<div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>換一換</span></a>
       </div>

css

.book-refresh {
      display        : flex;
      justify-content: center;
      line-height    : 40/@vv;
    }

特點教材

html

<div class="book-items">
          <div class="item">
            <span class=book_recommend>特點教材</span>
            <span class="left-arrow">大學裏受歡迎的書</span>
          </div>
        </div>

特點教材列表

html

<div class="bookInfo">
          <ul>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
          </ul>
        </div>

css

.bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
          width: 80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }

底部導航

html

<div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>首頁</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我要賣書</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>購物車</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>個人有路</a>
      </div>
    </div>

css

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-fangdajing{
        font-size: 26/@vv;
      }
    }
  }
}

完整代碼

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      charset="UTF-8"
      content="width=device-width, minimum-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      id="viewport"
      name="viewport"
    />
    <title>Title</title>
    <link href="iconfont/iconfont.css" rel="stylesheet" />
    <link href="less/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="com-header-area">
      <div class="search-box">
        <span class="iconfont icon-sousuo"></span>
        <input
          type="text"
          placeholder="書名、做者、出版社、ISBN、文具"
          value=""
        />
      </div>
    </div>

    <div class="com-content">
      <div class="hot-search">
        <ul>
          <li><span class="hot">熱門搜索：</span></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
        </ul>
      </div>

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保證正品</span>
        <span class="guarantee-span"><span class="check">√</span>保證低價</span>
        <span class="guarantee-span"><span class="check">√</span>24小時發貨</span>
        <span class="guarantee-span"><span class="check">√</span>無理由退貨</span>
      </div>

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
        <a href="#"><img src="img/classify.jpg">分類搜索</a>
      </div>

      <div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推薦圖書</span>
            <span class="left-arrow">您喜歡的都在這裏</span>
            <a class="span-more">更多</a>
          </div>

          <div class="list-recommend">
            <ul>
              <li>
                <a href="#">
                  <div class="book-img">
                    <img alt="阿彌陀佛麼麼噠" src="img/book.jpg">
                  </div>
                  <div class="bookName nape">阿彌陀佛麼麼噠</div>
                  <div class="price nape cost">
                    <span>有路價 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥14.30</span>
                  </div>
                </a>
              </li>
              <li><a href="#">
                  <div class="book-img"><img alt="乖.摸摸頭" src="img/book.jpg"></div>
                  <div class="bookName nape">乖.摸摸頭</div>
                  <div class="price nape cost">
                    <span>有路價 ￥14.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥13.30</span>
                  </div>
                </a></li>
              <li><a href="#">
                  <div class="book-img"><img alt="好嗎好的" src="img/book.jpg"></div>
                  <div class="bookName nape">好嗎好的</div>
                  <div class="price nape cost">
                    <span>有路價 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥14.30</span>
                  </div>
                </a></li>
            </ul>
          </div>

          <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>換一換</span></a>
          </div>
        </div>

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特點教材</span>
            <span class="left-arrow">大學裏受歡迎的書</span>
          </div>

          <div class="bookInfo">
            <ul>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>首頁</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我要賣書</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>購物車</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>個人有路</a>
      </div>
    </div>
  </body>
</html>

less

@vv:3.75vw;

/*默認樣式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
  margin: 0;
  font-size: 12/@vv; 
  /* font-family: xx; 也能夠設置字體 */
}
ol,ul {
  list-style: none; /* 去除列表樣式 */
  padding: 0;
  margin: 0;
}

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

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area {
  background: #f0f0f0;
  padding: 6 / @vv 10 / @vv 6 / @vv 10 / @vv;
  .search-box {
    background: #fff;
    display: flex;
    align-items: center;
    input {
      font-size: 12/@vv; 
      padding: 5 / @vv 0;
      margin: 0;
      border: 0;
      width: 100%;
      color: #999;
      margin-left: 12 / @vv;
    }
    span{
      font-size: 12/@vv; 
    }
  }
}

.com-content {
  background: #e1e5ee;
  box-shadow: 0 0 10 / @vv #000;
  .hot-search ul {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2 / @vv 2 / @vv;
    li {
      margin: 0 6 / @vv;
      .hot {
        color: #ddb496;
      }
      a {
        color: #ccc;
      }
    }
  }
  .slide {
    img {
      width: 375 / @vv;
      height: 187.5 / @vv;
    }
  }
  .guarantee-g {
    display: flex;
    justify-content: center;
    background: #fff;

    .guarantee-span {
      margin: 6 / @vv;
      .check {
        color: red;
      }
    }
  }

  .tab {
    display: flex;
    justify-content: space-around;
    background: #fff;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6 / @vv;
      img {
        width: 26 / @vv;
        height: 26 / @vv;
      }
    }
  }

  .book-items {
    background: #fff;
    color: #757070;

    .item {
      line-height: 42 / @vv;
      display: flex;
      font-weight: bold;
      .book_recommend {
        font-size: 14 / @vv;
        margin-left: 14 / @vv;
      }

      .left-arrow {
        margin-left: 20 / @vv;
      }

      a {
        margin-left: auto;
        margin-right: 20 / @vv;
      }
    }

    .list-recommend ul {
      display: flex;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        img {
          max-width: 80 / @vv;
          margin-bottom: 10 / @vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }
    .book-refresh {
      display: flex;
      justify-content: center;
      line-height: 40 / @vv;
    }

    .bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
          width: 80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }
  }
}

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-sousuo{
        font-size: 20/@vv;
      }
    }
  }
}