clone 开源的 Shopping

mobile-web/src/assets/style/common.css

@@ -0,0 +1,7 @@
+body {margin:0px; padding:0px; color:rgb(34, 34, 34); font-family:Helvetica,"Hiragino Sans GB","Microsoft YaHei",Simsun,"Droid Sans Fallback",sans-serif; text-decoration:none; background:#fff;-webkit-tap-highlight-color:rgba(0,0,0,0); }
+body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,h7,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0px; padding:0px;}
+ul{list-style:none;}
+li{list-style:none;}
+img {border:0px currentColor;vertical-align:top;}
+ol {list-style:none; margin:0px; padding:0px;}
+a{color:rgb(0, 0, 0); text-decoration:none;}

mobile-web/src/assets/style/index.css

@@ -0,0 +1,888 @@
+
+
+.tt-header, #ttkey {max-width:640px;}
+/*倒计时begin*/
+.countdown {
+    text-align: center;
+    height: 42px;
+    line-height: 42px;
+    font-size: 12px;
+    background-size: cover;
+    background-position: 50%;
+    background-repeat: no-repeat;
+}
+
+.fontweight_300 {
+    font-weight: 300;
+}
+
+.countdown b {
+    color: red;
+}
+
+.countdown b {
+    margin: 5px;
+    font-size: 16px;
+    font-weight: 300
+}
+/*倒计时end*/
+/*魔方begin*/
+.cap-cube {
+    width: 100%;
+    position: relative;
+}
+
+.cap-cube__item {
+    float: left;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+    overflow: hidden;
+}
+
+.cap-cube__table-image--invisible {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+/*魔方end*/
+/*图片广告begin*/
+.swiper-container {
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-slide img {
+    width: 100%;
+}
+.cap-image-ad__content {
+    position: relative;
+}
+
+    .cap-image-ad__content .image-wrapper {
+        position: relative;
+    }
+
+.cap-image-ad__image {
+    width: 100%;
+}
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+}
+.cap-image-ad__slide {
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+}
+
+    .cap-image-ad__slide .image-wrapper {
+        display: inline-block;
+        height: 100%;
+        position: relative;
+    }
+
+    .cap-image-ad__slide .cap-image-ad__image {
+        height: 100%;
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+    }
+/*图片广告end*/
+/*图文导航begin*/
+
+h3 {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+.cap-image-ad__image-nav {
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    background-color: #fff;
+    font-size: 0;
+}
+
+    .cap-image-ad__image-nav .image-wrapper {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+.cap-image-ad__link--image-nav {
+    font-size: 0;
+}
+
+.cap-image-ad__link {
+    display: block;
+    position: relative;
+    height: 100%;
+}
+
+.cap-image-ad__image-nav .cap-image-ad__image {
+    background-size: cover;
+    background-position: 50%;
+}
+
+.cap-image-ad__image-nav .cap-image-ad__nav-title {
+    padding-bottom: 9px;
+    height: 33px;
+    line-height: 24px;
+}
+
+.cap-image-ad__nav-title {
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    width: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: inherit;
+}
+
+.cap-image-ad__nav-title, .cap-image-ad__title {
+    text-align: center;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.cap-image-ad__text-nav .text-nav-wrapper {
+    display: inline-block;
+    padding: 15px 0;
+}
+
+.cap-image-ad__text-nav .cap-image-ad__nav-title {
+    position: relative;
+    height: 12px;
+    line-height: 12px;
+    font-size: 12px;
+    text-align: center;
+}
+
+/*图文导航end*/
+/*商品begin*/
+body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
+    margin: 0px;
+    padding: 0px;
+}
+
+ol, ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.cap-goods-list__item--big {
+    margin: 15px;
+}
+
+.cap-goods-list__item {
+    display: block;
+    position: relative;
+    min-height: 100px;
+    color: #333;
+    background-color: #fff;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+    .cap-goods-list__item.simple {
+        background-color: inherit;
+    }
+
+.cap-goods-list__container--big .cap-goods-list__wrapper:first-child .cap-goods-list__item, .cap-goods-list__container--list .cap-goods-list__wrapper:first-child .cap-goods-list__item {
+    margin-top: 5px;
+}
+
+.cap-goods-list__item--big.cap-goods-list__item--ratio-1-1 .cap-goods-list__photo, .cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__photo {
+    min-height: 0;
+    height: 0;
+}
+
+.cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__photo {
+    padding-top: 100%;
+}
+
+.cap-goods-list__item--big.cap-goods-list__item--ratio-1-1 .cap-goods-list__img, .cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__img {
+    position: absolute;
+}
+
+.cap-goods-list__img, .cap-goods-list__photo--soldout:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 100%;
+}
+
+.cap-goods-list__img {
+    vertical-align: bottom;
+    height: auto;
+}
+
+.cap-goods-list__item--big .cap-goods-list__img {
+    position: relative;
+    display: block;
+}
+
+.cap-goods-list__item--padding .cap-goods-list__img {
+    width: 100%;
+    height: auto;
+}
+
+.cap-goods-list__photo {
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    min-height: 100px;
+    max-height: 500px;
+    z-index: 0;
+}
+
+.cap-goods-list__info {
+    position: relative;
+    overflow: hidden;
+}
+
+.cap-goods-list__item--big .cap-goods-list__info {
+    padding: 10px;
+}
+
+.cap-goods-list__item.simple .cap-goods-list__info.has-price, .cap-goods-list__item.simple .cap-goods-list__info.has-title {
+    text-align: center;
+}
+
+.cap-goods-list__info .title {
+    font-size: 14px;
+    line-height: 18px;
+    overflow: hidden;
+    word-break: break-all;
+    font-weight: initial;
+}
+
+.cap-goods-list__item--big .cap-goods-list__info .title {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+.cap-goods-list__item.simple .cap-goods-list__info .title {
+    height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.cap-goods-list__item.simple .cap-goods-list__info.has-title.has-price .title, .cap-goods-list__item.simple .cap-goods-list__info.has-title.has-subtitle .title {
+    margin-bottom: 6px;
+}
+
+.cap-goods-list__info .sale-info {
+    color: #e50f3d;
+    font-size: 16px;
+    line-height: 1;
+}
+
+.has-title.has-price.has-btn .sale-info {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+
+.cap-goods-list__info.has-title.has-price.has-btn {
+    padding-bottom: 36px;
+}
+
+.has-title.has-price.has-btn .title {
+    height: 36px;
+}
+
+.card .cap-goods-list__buy-btn-wrapper {
+    right: 10px;
+    bottom: 10px;
+}
+.title {
+    color: #333;
+    text-align: left;
+}
+    /*小图样式*/
+    .cap-goods-list__container--small {
+    overflow: hidden;
+    padding: 0 12px;
+}
+
+    .cap-goods-list__container--small .cap-goods-list__wrapper {
+        float: left;
+        width: 50%;
+    }
+
+.cap-goods-list__item.simple {
+    background-color: inherit;
+}
+
+.cap-goods-list__item--small {
+    margin: 3px;
+}
+
+    .cap-goods-list__item--small .cap-goods-list__photo {
+        min-height: 0;
+        padding-top: 100%;
+        height: 0;
+    }
+
+    .cap-goods-list__item--small .cap-goods-list__info.has-price .sale-info {
+        line-height: 1;
+    }
+
+
+/*一大两小样式*/
+.cap-goods-list__container--hybrid, .cap-goods-list__container--waterfall {
+    overflow: hidden;
+    padding: 0 12px;
+}
+
+    .cap-goods-list__container--hybrid .cap-goods-list__wrapper--hybrid-big {
+        width: 100%;
+    }
+
+.cap-goods-list__item--hybrid-big {
+    margin: 5px 3px;
+}
+
+.cap-goods-list__container--hybrid .cap-goods-list__wrapper--hybrid-small {
+    width: 50%;
+}
+
+.cap-goods-list__container--hybrid .cap-goods-list__wrapper {
+    float: left;
+    overflow: hidden;
+}
+
+
+
+/*详细列表样式*/
+.cap-goods-list__container--list.cap-goods-list__container--simple {
+    padding-left: 15px;
+    background-color: #fff;
+    position: relative;
+}
+
+    .cap-goods-list__container--list.cap-goods-list__container--simple .cap-goods-list__wrapper {
+        padding: 10px 15px 10px 0;
+        position: relative;
+    }
+
+.cap-goods-list__item.simple.cap-goods-list__item--list {
+    min-height: auto;
+}
+
+    .cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__photo {
+        margin-right: 15px;
+        width: 98px;
+        height: 98px;
+        min-height: auto;
+    }
+
+.cap-goods-list__item--list .cap-goods-list__photo {
+    float: left;
+}
+
+.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info {
+    margin-left: 113px;
+    height: 98px;
+    text-align: left;
+}
+
+.cap-goods-list__info {
+    position: relative;
+    overflow: hidden;
+}
+
+.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info .title {
+    height: auto;
+    max-height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info .sale-info {
+    bottom: 0;
+}
+
+.cap-goods-list__item--list.cap-goods-list__item--btn1 .cap-goods-list__info .sale-info {
+    line-height: 24px;
+}
+
+.cap-goods-list__item--list .cap-goods-list__info .sale-info {
+    position: absolute;
+    left: 0;
+    bottom: 10px;
+}
+
+.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__buy-btn-wrapper {
+    right: 5px;
+    bottom: 0;
+}
+
+.cap-goods-list__buy-btn-wrapper {
+    position: absolute;
+}
+
+    .cap-goods-list__buy-btn-wrapper .cap-goods-list__buy-btn-4 {
+        font-size: 14px;
+        line-height: 24px;
+        height: 26px;
+        border-color: #f44;
+        color: #f44;
+        min-width: 48px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid;
+        background-color: #fff;
+    }
+
+.cap-goods-list__container--list.cap-goods-list__container--simple .cap-goods-list__wrapper:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -ms-transform: scale(.5);
+    transform: scale(.5);
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    pointer-events: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 0 solid #e5e5e5;
+    border-bottom-width: 1px;
+}
+
+.cap-goods-list__item--list.card2:after, .cap-goods-list__item--list.card:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -ms-transform: scale(.5);
+    transform: scale(.5);
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    pointer-events: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 1px solid #e5e5e5;
+}
+
+.cap-goods-list__item--list.card2 .cap-goods-list__photo, .cap-goods-list__item--list.card .cap-goods-list__photo {
+    margin-right: 10px;
+    width: 118px;
+    height: 118px;
+    min-height: auto;
+}
+
+.cap-goods-list__item--list.card, .cap-goods-list__item--list.card2 {
+    min-height: auto;
+    margin: 15px;
+}
+
+    .cap-goods-list__item--list.card2 .cap-goods-list__info, .cap-goods-list__item--list.card .cap-goods-list__info {
+        margin-left: 128px;
+        height: 118px;
+        margin-right: 10px;
+    }
+
+        .cap-goods-list__item--list.card2 .cap-goods-list__info .title, .cap-goods-list__item--list.card .cap-goods-list__info .title {
+            padding-top: 10px;
+        }
+
+.cap-goods-list__item--list .cap-goods-list__info .title {
+    padding-top: 2px;
+    margin-bottom: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.cap-goods-list__item--list.cap-goods-list__item--btn4 .cap-goods-list__info .sale-info {
+    line-height: 26px;
+}
+
+.cap-goods-list__item--list.card2 .cap-goods-list__buy-btn-wrapper, .cap-goods-list__item--list.card .cap-goods-list__buy-btn-wrapper {
+    right: 15px;
+    bottom: 10px;
+}
+
+.cap-goods-list__item--list .cap-goods-list__info.has-title.has-price.has-btn {
+    padding-bottom: 0;
+}
+
+/*一行三个样式*/
+.cap-goods-list__container--three {
+    padding: 0 12px;
+}
+
+.cap-goods-list__item--three {
+    margin: 5px 3px;
+}
+
+    .cap-goods-list__item--three .cap-goods-list__photo {
+        min-height: 0;
+        padding-top: 100%;
+        height: 0;
+    }
+
+.cap-goods-list__container--three .cap-goods-list__wrapper {
+    float: left;
+    width: 33.33%;
+}
+
+.simple.cap-goods-list__item--three .cap-goods-list__info .sale-info {
+    font-size: 14px;
+}
+
+/*横向滑动样式*/
+.cap-goods-list__container--three.nowrap {
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 10px;
+    margin-bottom: -10px;
+}
+
+    .cap-goods-list__container--three.nowrap .cap-goods-list__wrapper {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 30%;
+        -moz-box-flex: 0;
+        -ms-flex: 0 0 30%;
+        flex: 0 0 30%;
+        width: 30%;
+        float: none;
+    }
+/*商品end*/
+/*标题begin*/
+.cap-title {
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    word-break: break-all;
+    position: relative;
+    background: #F9F9F9;
+}
+
+.cap-title__main {
+    margin: 0;
+    font-size: 18px;
+    line-height: 22px;
+}
+
+.cap-title__sub {
+    font-size: 11px;
+    color: #8c8c8c;
+    margin: 5px 0 0;
+}
+/*标题end*/
+/*商品搜索begin*/
+.search-box, .search-box__view {
+    width: 100%;
+    height: 50px;
+}
+
+.search-box__view {
+    padding: 0 15px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-transition: top .3s linear;
+    -moz-transition: top .3s linear;
+    transition: top .3s linear;
+}
+
+.search {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+}
+
+    .search .cell {
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        -moz-box-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        padding: 0 10px;
+        height: 40px;
+        background: transparent;
+    }
+
+.cell {
+    width: 100%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 10px 15px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 24px;
+    position: relative;
+    background-color: #fff;
+    color: #333;
+    font-size: 14px;
+    overflow: hidden;
+}
+
+.field .cell__value {
+    position: relative;
+}
+
+.cell__value--alone {
+    text-align: left;
+}
+
+.cell__value {
+    overflow: hidden;
+    text-align: right;
+    vertical-align: middle;
+}
+
+.cell__title, .cell__value {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.field__body {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.field__control {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    resize: none;
+    display: block;
+    line-height: normal;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+.search .icon-search {
+    position: relative;
+    display: inline-block;
+    font-size: inherit;
+    text-rendering: auto;
+    color: #666;
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+.search__filed {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border-radius: 4px;
+}
+
+.search__filed--center {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -moz-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+    .search__filed--center .cell {
+        -webkit-box-flex: 0;
+        -webkit-flex: none;
+        -moz-box-flex: 0;
+        -ms-flex: none;
+        flex: none;
+    }
+
+.search .cell__value .field__control {
+    background: transparent;
+    font-size: 12px;
+}
+
+.search .field__body {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.search .cell__value {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.search__filed--circle {
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+/*商品搜索end*/
+/*公告begin*/
+.notice-bar__left-icon {
+    height: 18px;
+    min-width: 20px;
+    padding-top: 1px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.notice-bar__wrap {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    height: 18px;
+    overflow: hidden;
+    position: relative;
+}
+
+.notice-bar__content {
+    position: absolute;
+    white-space: nowrap;
+}
+
+.notice-bar {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    color: #f60;
+    padding: 9px 15px;
+    font-size: 12px;
+    line-height: 1.5;
+    position: relative;
+    background-color: #fff7cc;
+}
+
+.notice-bar__left-icon img {
+    width: 16px;
+    height: 16px;
+    vertical-align: baseline;
+}
+/*公告end*/