search

amenzai / myDiary

Record what you do every day
4 stars 0 forks source link

mobile-snippets #76

Open amenzai opened 6 years ago

amenzai commented 6 years ago 
.flex {
  display: flex;
  .flex-item {
    flex: 1;
  }
}

.gjc-block {
  padding: 15px;
  background-color: #fff;
  margin-top: 10px;
  h2 {
    font-size: 0.3rem;
    border-left: 4px solid @c;
    line-height: 1;
    padding-left: 8px;
    margin-bottom: 20px;
    a {
      color: #999;
      font-size: 12px;
    }
  }
}

.gjc-row {
  margin: -5px;
  .mix-clearfix();
  .gjc-col {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 5px;
  }
}

.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table th {
  vertical-align: bottom;
  text-align: center;
  border: solid 0.5px #ddd;
  padding: 8px;
}

.table td {
  padding: 8px;
  text-align: center;
  vertical-align: top;
  border: solid 0.5px #ddd;
}

// 撸起来
.search-bar {
  background-color: #fff;
  padding: 10px 15px;
  height: 0.7rem;
  align-items: center;
  .input-box {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      width: 0.34rem;
      height: 0.34rem;
      background: url(../images/icon-search.png) no-repeat center;
      background-size: 0.34rem 0.34rem;
      top: 0.2rem;
      left: 0.2rem;
    }
    input {
      height: 0.7rem;
      padding-left: 0.72rem;
      width: 4rem;
      border: 1px solid #ddd;
      box-sizing: border-box;
      background-color: @f6;
      border-radius: 6px;
    }
  }
  .search-text {
    line-height: 0.7rem;
    padding-left: 0.2rem;
  }
  .publish-btn {
    padding: 0 0.3rem;
    line-height: 30px;
    border-radius: 15px;
    background-color: @c;
    color: #fff;
  }
}

.icon-bar {
  padding: 15px 0;
  background-color: #fff;
  overflow-x: auto;
  color: #333;
  ul {
    width: 200%;
  }
  li {
    float: left;
    width: 12.5%;
    a {
      display: block;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    img {
      margin-bottom: 6px;
      width: 40px;
      height: 40px;
    }
  }
}
@tabbar-text-color: #877252;
@text-color: #877252;
@text-gray: #999;
@text-primary: #333;
.m-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #fff;
  color: @tabbar-text-color;
  .tabbar-icon {
    vertical-align: middle;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
  }
  .m-tabbar-item {
    font-size: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    .icon-home {
      background-image: url(../images/icon-home.png);
    }
    .icon-task {
      background-image: url(../images/icon-task.png);
    }
    .icon-cost {
      background-image: url(../images/icon-cost.png);
    }
    .icon-user {
      background-image: url(../images/icon-user.png);
    }
    &.active {
      color: @c;
      .icon-home {
        background-image: url(../images/icon-home-active.png);
      }
    }
  }
}

// reset swiper
.swiper-pagination-bullet {
  background: #fff;
}
<div class="search-bar flex bd-1px-t">
    <div class="input-box">
      <input type="text" placeholder="查询关键词价格">
    </div>
    <p class="search-text">搜索</p>
    <div class="flex-item tr">
      <button class="publish-btn">发布任务</button>
    </div>
  </div>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../images/banner1.jpg"></div>
      <div class="swiper-slide"><img src="../images/banner2.jpg"></div>
      <div class="swiper-slide"><img src="../images/banner3.jpg"></div>
      <div class="swiper-slide"><img src="../images/banner4.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

<div class="icon-bar">
    <ul class="clearfix">
      <li>
        <a href="">
          <img src="../images/icon1.png" alt="">
          <p>SEO任务</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon2.png" alt="">
          <p>成功案例</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon3.png" alt="">
          <p>渠道合作</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon4.png" alt="">
          <p>专家榜</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon5.png" alt="">
          <p>新闻资讯</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon6.png" alt="">
          <p>SEO问答</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon7.png" alt="">
          <p>优化百科</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../images/icon8.png" alt="">
          <p>关于我们</p>
        </a>
      </li>
    </ul>
  </div>
<section class="m-tabbar bd-1px-t">
    <a href="javascript:;" class="m-tabbar-item active">
      <i class="tabbar-icon icon-home"></i>
      <span>云客网</span>
    </a>
    <a href="javascript:;" class="m-tabbar-item">
      <i class="tabbar-icon icon-task"></i>
      <span>任务管理</span>
    </a>
    <a href="javascript:;" class="m-tabbar-item">
      <i class="tabbar-icon icon-cost"></i>
      <span>扣费明细</span>
    </a>
    <a href="javascript:;" class="m-tabbar-item">
      <i class="tabbar-icon icon-user"></i>
      <span>个人中心</span>
    </a>
  </section>
// 轮播图逻辑
    var mySwiper = new Swiper(".swiper-container", {
      /*横向滑动*/
      direction: "horizontal",
      /*形成环路（即：可以从最后一张图跳转到第一张图*/
      loop: true,
      /*分页器*/
      pagination: {
        el: '.swiper-pagination',
      },
      /*每隔3秒自动播放*/
      autoplay: true
    })

// 标签栏 tab切换
    $('.tab-nav').on('click', 'li', function(event) {
      var choose = $(this).data('id');
      $(this).addClass('active').siblings().removeClass('active');
      $(choose).show().siblings().hide()
    });

// 回到顶部
 // $('.gotop').click(function() {
 //   $('html, body').animate({scrollTop: 0}, 300)
 // });
// 原生实现
 var leader = 0,
   target = 0,
   timerOut = null,
   timer = null;
 // leader 起始位置  target  目标位置
 window.onscroll = function() {
   if (timerOut) {
     clearTimeout(timerOut)
   }
   timerOut = setTimeout(function() {
     leader = document.documentElement.scrollTop; // 把 卷去的头部 给  起始位置
   }, 100);
 }
 $('.gotop').click(function() {
   timer = setInterval(function() {
     leader = leader + (target - leader) / 10;
     window.scrollTo(0, leader); // 去往页面中的某个位置
     if (leader == target) {
       clearInterval(timer);
     }
   }, 20);
 });
amenzai commented 6 years ago

add fastclick

<script type="text/javascript" src="lib/js/fastclick.js"></script>
$(function() {
  FastClick.attach(document.body);
});
amenzai commented 5 years ago

calc and native scroll:

height: calc(~"100% - 44px - 55px");
overflow-y: auto;
/* auto | scroll */
-webkit-overflow-scrolling: touch;
amenzai commented 5 years ago

正方形网格类：

   .grid--square {
      width: 200px;
    }
    .grid--square .grid__content {
      position: relative;
      padding-bottom: 100%
    }
    .grid__inner {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center
    }

    .grid--square .grid__inner {
      position: absolute;
      top: 50%;
      transform: translate3d(0, -50%, 0)
    }