* {
    box-sizing: border-box;
    scrollbar-color: #e73f12;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style:none;  /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
}

/* 以下是chrome浏览器自定义滚动条样式方式 */
*::-webkit-scrollbar {/*滚动条整体样式*/
    display: none;
}
*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
    background: #e73f12;
}
*::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
    border-radius: 3px;
    background: #fff;
}

body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #f2f2f2;
}

.page-container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.page-top {
    width: 100%;
    cursor: pointer;
}

.page-top img {
    width: 100%;
}

.page-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-content .tabs-wrap {
    padding: 12px 12px 6px;
    text-align: center;
}

.page-content .tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
}

.page-content .tabs .tab-item {
    width: 78px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #676767;
    color: #fff;
    cursor: pointer;
}

.page-content .tabs .tab-item.actived {
    background: #ed4d14;
}

.page-content .swiper {
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.swiper-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: auto;
}

.swiper-wrapper .swiper-slide img {
    width: 100%;
}

.page-bottom {
    width: 100%;
    cursor: pointer;
}

.page-bottom img {
    width: 100%;
}