1. 程式人生 > >webApp 使用mui 仿支付寶主頁面案例

webApp 使用mui 仿支付寶主頁面案例

效果:

 

 

 

 

原始碼:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
              <title></title>
              <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
              <!--引入mui的樣式檔案-->
              <link href="css/mui.min.css" rel="stylesheet" />
              <!--引入mui的js檔案-->
              <script src="js/mui.min.js"></script>
             <!--引入支付寶圖示的樣式檔案-->
              <link rel="stylesheet" href="css/iconfont.css">
             <!--自定義的樣式檔案-->
              <link rel="stylesheet" href="css/home.css">
              <script type="text/javascript">
                  mui.init()
              </script>
          </head>

          <body style="background-color:#f5f5f5">

            <!--mui的標題欄-->
              <header class="mui-bar mui-bar-nav icon_serch ">
                 <!--搜尋圖示-->
                  <div class="mui-input-row mui-search">
                      <input type="search" class="mui-input-speech mui-input-clear" placeholder="手機充值">
                  </div>
               <!--新增圖示-->
                  <a href="#popover" class="icon_add" id="add">
                      <span class="icon iconfont icon-tianjia"></span>
                  </a>
                  <!--社交圖示-->
                  <a href="#" class="icon_contact">
                      <span class="icon iconfont icon-shejiao"></span>
                  </a>
             </header>

               <!--點選新增圖示,出來的mui彈出框(這裡的id和新增圖示的超連結的連線地址一樣,就是使用錨點的方式)-->
              <div id="popover" class="mui-popover add_popover">
                  <ul class="mui-table-view">
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-tianjialeimu"></span>&nbsp;&nbsp;發起群聊</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-tianjia"></span>&nbsp;&nbsp;新增朋友</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#" id="saoyisao1"><span class="icon iconfont icon-saoyisao"></span>&nbsp;&nbsp;掃一掃</a>
                      </li>
                      <li class="mui-table-view-cell">
                          <a href="#"><span class="icon iconfont icon-fukuanma"></span>&nbsp;&nbsp;收錢</a>
                      </li>
                  </ul>
              </div>

             <!--這裡使用的是mui的柵格UI元件 mui-col-sm-3 mui-col-xs-3(柵格元件一行分為12列,現在設定的是在小螢幕和超小螢幕上每列佔3格,就是一列可以放4個,下面從轉賬到天貓寶使用的都是柵格元件)-->
              <div class="mui-content ">
                  <div class="mui-row grid_background" style="list-style: none;">
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-saoyisao myicon"></span>  //這裡使用的是支付寶的圖示樣式
                                  <span class="wenzi">掃一掃</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-fukuanma myicon"></span>
                                  <span class="wenzi">付款</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-saoyisao myicon"></span>
                                  <span class="wenzi">收錢</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-lijin myicon"></span>
                                  <span class="wenzi">卡包</span>
                              </a>
                          </li>
                      </div>
                  </div>
                  <div class="mui-row grid_background_white" style="list-style: none;">
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-zhuanzhang myicon_transfer"></span>
                                  <span class="wenzi_black">轉賬</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-xinyongqiahuankuan myicon_repayment"></span>
                                  <span class="wenzi_black">信用卡還款</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-shoujichongzhi myicon_phone"></span>
                                  <span class="wenzi_black">手機充值</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-icon myicon_balance"></span>
                                  <span class="wenzi_black">餘額寶</span>
                              </a>
                          </li>
                      </div>
                  </div>
                  <div class="mui-row grid_background_white" style="list-style: none;">
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-taobao myicon_naughtyticket"></span>
                                  <span class="wenzi_black">淘票票</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-kuaidi myicon_logistics"></span>
                                  <span class="wenzi_black">物流</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-shuidianmei myicon_life"></span>
                                  <span class="wenzi_black">生活繳費</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-logo myicon_credit"></span>
                                  <span class="wenzi_black">芝麻信用</span>
                              </a>
                          </li>
                      </div>
                  </div>
                  <div class="mui-row grid_background_white" style="list-style: none;">
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-jipiao myicon_planeticket"></span>
                                  <span class="wenzi_black">機票</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-zhaocaibao myicon_Invitingmoney"></span>
                                  <span class="wenzi_black">招財寶</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-dache myicon_taxi "></span>
                                  <span class="wenzi_black">打車</span>
                              </a>
                          </li>
                      </div>
                      <div class="mui-col-sm-3 mui-col-xs-3">
                          <li class="mui-table-view-cell">
                              <a class="link_style">
                                  <span class="icon iconfont icon-tianmaobao myicon_tmall"></span>
                                  <span class="wenzi_black    ">天貓寶</span>
                              </a>
                          </li>
                      </div>
                  </div>
             <!--這裡使用的是mui的圖文列表(圖片在左的圖文列表-->
                  <ul class="mui-table-view list_style">
                      <li class="mui-table-view-cell mui-media">
                          <a href="javascript:;">
                              <img class="mui-media-object mui-pull-left" src="images/ant.png">
                              <div class="mui-media-body">
                                  幸福
                                  <p class='mui-ellipsis mui-navigate-right'>又有好友收取了你的綠色能量</p>
                                  <span class="mui-badge mui-badge-danger dot_style">1</span>
                              </div>
                          </a>
                      </li>
                  </ul>
                <!--這裡使用的mui的輪播元件,需要注意的是,這個元件在第一張圖片的前面要加上最後一張圖片,在最後一張圖片的後面,要加上第一張圖片,如果需要元件自動滾動,用js找到元件,再呼叫元件的slider方式,設定輪播的時間間隔就可以了-->
                  <div class="mui-slider loop_pic">
                      <div class="mui-slider-group mui-slider-loop">
                          <!--支援迴圈,需要重複圖片節點-->
                          <div class="mui-slider-item mui-slider-item-duplicate">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <div class="mui-slider-item">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <div class="mui-slider-item">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <div class="mui-slider-item">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <div class="mui-slider-item">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <!--支援迴圈,需要重複圖片節點-->
                          <div class="mui-slider-item mui-slider-item-duplicate">
                              <a href="#"><img src="images/banner.png" /></a>
                          </div>
                          <!--圖片上的小圓點-->
                      </div>
                      <div class="mui-slider-indicator">
                          <div class="mui-indicator mui-active"></div>
                          <div class="mui-indicator"></div>
                          <div class="mui-indicator"></div>
                          <div class="mui-indicator"></div>
                      </div>
                  </div>
               <!--柵格元件-->
                  <div class="mui-row pay_style ">
                      <div class="mui-col-sm-12 mui-col-xs-12">|惠支付
                      </div>
                  </div>
               <!--柵格元件加上圖片在右側的圖文列表元件-->
                  <div class="mui-row " style="list-style: none;">
                      <div class="mui-col-sm-6 mui-col-xs-6 right_border">
                          <li class="mui-table-view-cell table_cell_style">
                              <a class="link_style">
                                  <ul class="mui-table-view">
                                      <li class="mui-table-view-cell mui-media">
                                          <a href="javascript:;">
                                              <img class="mui-media-object mui-pull-right" src="images/moneychanting.png">
                                              <div class="mui-media-body">
                                                  花唄簡訊包月
                                                  <p class='mui-ellipsis mui-navigate-right'>安全有保障</p>
                                              </div>
                                          </a>
                                      </li>
                                  </ul>
                              </a>
                          </li>
                      </div>
                      <div class="mui-row">
                          <div class="mui-col-sm-6 mui-col-xs-6 ">
                              <li class="mui-table-view-cell table_cell_style">
                                  <a class="link_style">
                                      <ul class="mui-table-view ">
                                          <li class="mui-table-view-cell mui-media">
                                              <a href="javascript:;">
                                                  <img class="mui-media-object mui-pull-right" src="images/rewardgold.png">
                                                  <div class="mui-media-body">
                                                      我的獎勵金
                                                      <p class='mui-ellipsis mui-navigate-right'>立即檢視</p>
                                                  </div>
                                              </a>
                                          </li>
                                      </ul>
                                  </a>
                              </li>
                          </div>
                      </div>
                  </div>
                          <div class="mui-row pay_style ">
                      <div class="mui-col-sm-6 mui-col-xs-12">|生活服務
                      </div>
                  </div>
                  <div class="mui-row " style="list-style: none;">
                      <div class="mui-col-sm-6 mui-col-xs-6 right_border">
                          <li class="mui-table-view-cell table_cell_style">
                              <a class="link_style">
                                  <ul class="mui-table-view">
                                      <li class="mui-table-view-cell mui-media">
                                          <a href="javascript:;">
                                              <img class="mui-media-object mui-pull-right" src="images/rownumber.png">
                                              <div class="mui-media-body">
                                                  排號難排隊久
                                                  <p class='mui-ellipsis mui-navigate-right'>一招幫你破解</p>
                                              </div>
                                          </a>
                                      </li>
                                  </ul>
                              </a>
                          </li>
                      </div>
                      <div class="mui-row">
                          <div class="mui-col-sm-6 mui-col-xs-6 ">
                              <li class="mui-table-view-cell table_cell_style">
                                  <a class="link_style">
                                      <ul class="mui-table-view ">
                                          <li class="mui-table-view-cell mui-media">
                                              <a href="javascript:;">
                                                  <img class="mui-media-object mui-pull-right" src="images/cash.png">
                                                  <div class="mui-media-body">
                                                      瓜分五億現金
                                                      <p class='mui-ellipsis mui-navigate-right'>快人一步集齊五福</p>
                                                  </div>
                                              </a>
                                          </li>
                                      </ul>
                                  </a>
                              </li>
                          </div>
                      </div>
                  </div>
                  <script>
           <!--輪播元件的輪播設定-->
                      var gallery = mui('.mui-slider');
                      gallery.slider({
                          interval: 2000 //自動輪播週期,若為0則不自動播放,預設為0;
                      });
                  </script>
          </body>

</html>

      Css檔案:

      .icon_serch .mui-search .mui-placeholder {
          text-align: left;
      }

      .icon_serch .mui-search .mui-placeholder span {
          color: #ffffff;
      }

      .icon_serch .mui-search .mui-placeholder span:last-child {
          font-size: 12px;
      }
      
      .mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{
         font-size:20px;
         marginn-top:1px;
      }
      
      .icon_serch {
          height: 50px;
          background-color: #1b82d2;
          box-shadow: 0 1px 6px #1b82d2;
      }

      .icon_serch input {
          background-color: #1772b9;
      }

      .icon_serch .mui-search {
          width: 75%;
          margin-top: 2px;
      }

      .icon_add {
          color: white;
          float: right;
          margin-top: -45px;
          line-height: 50px;
          margin-right: 10px;
      }

      .icon_add span {
          font-size: 20px;
      }

      .icon_contact {
          color: white;
          float: right;
          line-height: 50px;
          margin-top: -45px;
          margin-right: 10px;
      }

      .icon_contact span {
          font-size: 20px;
      }

      .add_popover {
          width: 150px;
      }

      #popover ul li a span{
         display: inline-block;
      }


      .wenzi {
          display: block;
          font-size: 13px!important;
          text-align: center;
      }

      .grid_background {
          background-color: #1B82D2;
          height: 70px;
      }

      .myicon {
          margin-top: 3px;
          display: block;
          font-size: 30px;
          color: white;
      }

      .wenzi {
          display: block;
          text-align: center;
          font-size: 13px!important;
          margin-top: 5px;
          color: white;
      }

      .link_style {
          text-align: center;
      }

      .grid_background_white {
          background: #FFFFFF;
      }

      .mui-table-view-cell a span:first-child{
          margin-top: 3px;
          display: block;
          font-size: 25px;
      }
      .myicon_transfer{
          
          color: #1d8fe1!important;
      }
      .wenzi_black{
          display: block;
          text-align: center;
          font-size: 13px!important;
          margin-top: 5px;
      }
      .myicon_repayment{

          color:#f39826!important;
      }
      .myicon_balance{
          
          color:#f15a4a!important;
      }
      .myicon_naughtyticket{
          
          color: #f15a4a!important;
      }
      .myicon_logistics{

          color: #f39826!important;
      }
      .myicon_life{

          color:#1d8fe1!important;
      }
      .myicon_credit{

          color: #3ab29a!important;
      }
      .myicon_planeticket{

          color: #1d8fe1!important;
      }
      .myicon_Invitingmoney{

          color: #1d8fe1!important;
      }
      .myicon_taxi{
          
          color: #1d8fe1!important;
      }
      .myicon_tmall{
          color: #f15a4a!important;
      }
      .myicon_phone{
          color:#f39826!important;
      }
      .list_style{
          margin-top: 20px;
      }
      .dot_style{
          position: absolute;
          right: 40px;
          top: 20px;
      }
      .loop_pic{
          margin-top: 20px;
      }
      .pay_style{
          margin-top: 20px;
          background-color:white;
          border-bottom: 1px solid  #eee;
      }
      .pay_style div{
          padding-left: 15px;
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .discountpay_style{
          margin-top: 20px;
      }
      .table_cell_style{
          padding: 5px 0px!important;
      }
      .right_border{
          border-right: 1px solid #eee;
      }