php/www/webapp/o2o/css/secondary.css

#secondaryScroll {
    /*底部导航栏*/
}
#secondaryScroll .secondary-content {
    /*.secondary-type{
        margin-top: 1rem;
        width: 100%;
        height: 100%;
        div {
          float: left;
          padding-top: 5%;
          padding-bottom: 5%;
          text-align: center;
          background: #ffffff;

          &:nth-child(1),&:nth-child(3),&:nth-child(5),&:nth-child(7){
            border-bottom: 1px solid;
            border-right:1px solid;
          }
          img {
            width: 50px;
            height: 50px;
          }
          .mine-text {
            display: block;
            width: 100%;
            border: 0;
            padding: 0;
          }
        }
      }*/
}
#secondaryScroll .secondary-content .secondary-head {
    position: relative;
    text-align: center;
}
#secondaryScroll .secondary-content .secondary-head img {
    width: 100%;
}
#secondaryScroll .secondary-content .secondary-head img:nth-child(2) {
    width: 5rem;
    position: absolute;
    left: 50%;
    margin-left: -2.5rem;
    bottom: -2.3rem;
}
#secondaryScroll .secondary-content .secondary-list .products-list {
    margin: 0;
    list-style: none;
    padding-left: 0;
}
#secondaryScroll .secondary-content .secondary-list .products-list li {
    padding-top: 0.4rem;
    text-align: center;
    width: 50%;
    float: left;
}
#secondaryScroll .secondary-content .secondary-list .products-list li img {
    width: 50px;
    height: 50px;
}
#secondaryScroll .secondary-content .secondary-list .products-list li div {
    border-bottom: 3px solid #a8a8a8;
    width: 5rem;
    margin: 0 auto;
    padding-bottom: 0.3rem;
}
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) {
    border-bottom: 1px solid #b7b7b7;
    border-right: 1px solid #b7b7b7;
}
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
#secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
    border-bottom: 1px solid #b7b7b7;
}
#secondaryScroll .prevent-scroll {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #2a2400;
}
#secondaryScroll .prevent-scroll .width-percent-33 .title-container-square {
    padding: 20%;
    position: relative;
    text-align: center;
}
#secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .logo {
    background-size: 65% 65%;
    background-position: center center;
    padding: 10%;
    margin-top: 5px;
    display: inline-block;
    border-radius: 50%;
}
#secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .name {
    display: block;
    margin-top: -5px;
    font-size: 12px;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .logo {
    border-radius: inherit;
    background: url("http://odulvej8l.bkt.clouddn.com/tab_home.png") no-repeat;
    background-size: 100%;
    background-position: center center;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a:active .name {
    color: #fff;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a .logo {
    border-radius: inherit;
    background: url("http://odulvej8l.bkt.clouddn.com/tab_home_pre.png") no-repeat;
    background-size: 90%;
    background-position: center center;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(1) a .name {
    color: #b89400;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(2) a .logo {
    border-radius: 50%;
    display: inline-block;
    padding: 25%;
    background-size: 100%;
    margin-top: -15px;
    background: url("http://odulvej8l.bkt.clouddn.com/tab_butler.png") 0 0 no-repeat #2a2400;
    background-size: 65% 65%;
    background-position: center;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a .logo {
    border-radius: inherit;
    background: url("http://odulvej8l.bkt.clouddn.com/tab_me_pre.png");
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center center;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a .name {
    color: #b89400;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .logo {
    border-radius: inherit;
    background: url("http://odulvej8l.bkt.clouddn.com/tab_me.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}
#secondaryScroll .prevent-scroll .width-percent-33:nth-child(3) a:active .name {
    color: #fff;
}
@media (min-width: 768px) {
    #secondaryScroll .prevent-scroll .width-percent-33 .title-container-square a .name {
        display: block;
        margin-top: 5px;
        font-size: 1.6rem;
    }
}
/*媒体查询*/
@media (min-width: 414px) {
    #secondaryScroll .secondary-content .secondary-head {
        position: relative;
        text-align: center;
    }
    #secondaryScroll .secondary-content .secondary-head img {
        width: 100%;
    }
    #secondaryScroll .secondary-content .secondary-head img:nth-child(2) {
        width: 7rem;
        position: absolute;
        left: 50%;
        margin-left: -3.5rem;
        bottom: -3.4rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list {
        /*margin: 0;
              list-style: none;
              padding-left: 0;*/
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li {
        /*padding-top:0.4rem;
                text-align: center;
                width: 50%;
                float: left;*/
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li img {
        width: 2.7rem;
        height: 2.7rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li div {
        border-bottom: 3px solid #a8a8a8;
        width: 6rem;
        margin: 0 auto;
        padding-bottom: 0.3rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) {
        border-bottom: 1px solid #b7b7b7;
        border-right: 1px solid #b7b7b7;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
        border-bottom: 1px solid #b7b7b7;
    }
}
@media (min-width: 768px) {
    #secondaryScroll .secondary-content .secondary-head {
        position: relative;
        text-align: center;
    }
    #secondaryScroll .secondary-content .secondary-head img {
        width: 100%;
    }
    #secondaryScroll .secondary-content .secondary-head img:nth-child(2) {
        width: 8rem;
        position: absolute;
        left: 50%;
        margin-left: -4rem;
        bottom: -3.9rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list {
        /*margin: 0;
              list-style: none;
              padding-left: 0;*/
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li {
        /*padding-top:0.4rem;
                text-align: center;
                width: 50%;
                float: left;*/
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li img {
        width: 5rem;
        height: 5rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li div {
        border-bottom: 3px solid #a8a8a8;
        width: 6rem;
        margin: 0 auto;
        padding-bottom: 0.3rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(1),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(3),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(5),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(7) {
        border-bottom: 1px solid #b7b7b7;
        border-right: 1px solid #b7b7b7;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
        border-bottom: 1px solid #b7b7b7;
    }
}
@media (max-height: 480px) {
    #secondaryScroll .secondary-content .secondary-list .products-list {
        height: 420px ;
    }
}
@media (min-height: 568px) {
    #secondaryScroll .secondary-content .secondary-list .products-list li img {
        width: 1.5rem;
        height: 1.5rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
        border-bottom: 1px solid #b7b7b7;
    }
}
@media (min-height: 667px) {
    #secondaryScroll .secondary-content .secondary-list .products-list li img {
        width: 2.3rem;
        height: 2.3rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
        border-bottom: 1px solid #b7b7b7;
    }
}
@media (min-height: 700px) {
    #secondaryScroll .secondary-content .secondary-list .products-list li img {
        width: 2.8rem;
        height: 2.8rem;
    }
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(2),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(4),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(6),
    #secondaryScroll .secondary-content .secondary-list .products-list li:nth-child(8) {
        border-bottom: 1px solid #b7b7b7;
    }
}