/*返利券 移动端Web版 公用样式 v1.8.2 2019/02/26 11:55*/
|
|
|
/* ------------------------------------------------------------------ 主题通用 */
|
/*文字颜色、背景颜色*/
|
.app-font-red{ color: #E5005C; } /*返利券红色字体*/
|
.app-font-orange{ color: #F14242; } /*海草街橙色字体*/
|
.app-bg-red{ background-color: #E5005C; } /*返利券红色背景*/
|
.app-bg-orange{ background-color: #F14242; } /*返利券橙色背景*/
|
|
|
|
/* ------------------------------------------------------------------ 顶部搜索栏 */
|
/*外壳*/
|
.app-top{ width: 7.5rem; height: 1rem; padding-left: 0.3rem; padding-right: 0.3rem; background-color: #E5005C; opacity: 0.97; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; }
|
/*左上角标志*/
|
.app-top-logo{ width: auto; height: 0.44rem; margin-right: 0.3rem; display: block; }
|
.app-top-home{ width: 0.44rem; height: 0.42rem; margin-right: 0.3rem; display: block; }
|
/*输入区域*/
|
.app-top-search{ height: 0.6rem; border-radius: 0.3rem; background-color: white; -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; }
|
.app-top-glass{ width: 0.3rem; height: 0.3rem; display: block; margin-left: 0.2rem; } /*放大镜*/
|
/*右上角帮助*/
|
.app-top-help{ width: 0.44rem; height: 0.5rem; margin-left: 0.3rem; display: block; }
|
|
|
|
/* ------------------------------------------------------------------ 商品列表*/
|
/*1. 商品列表：1列纵队*/
|
.app-sp-1col{ width: 100%; height: 3.1rem; padding: 0.15rem 0.2rem; background-color: white; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; }
|
/*商品图片*/
|
.app-sp-1col .app-sp-img{ width: 2.8rem; height: 2.8rem; position: relative; border-radius: 0.1rem; background-color: #DFDFDF; }
|
.app-sp-1col .app-sp-img img{ width: 2.8rem; height: 2.8rem; position: absolute; left: 0; top: 0; border-radius: 0.1rem; }
|
/*文字内容外壳*/
|
.app-sp-1col .app-sp-content{ margin-left: 0.2rem; padding-top: 0.1rem; padding-bottom: 0.1rem; -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
|
/*商品标题*/
|
.app-sp-1col .app-sp-title{ width: 100%; height: 0.7rem; position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
|
.app-sp-1col .app-sp-titleText{ width: 100%; min-height: 0.84rem; font-size: 0.28rem; line-height: 1.5; text-indent: 0.72rem; }
|
.app-sp-1col .app-sp-type{ width: 0.62rem; height: 0.3rem; position: absolute; left: 0rem; top: 0rem; display: block; }
|
/*商品返利*/
|
.app-sp-1col .app-sp-fanIcon{ width: 0.4rem; height: 0.36rem; margin-right: 0.1rem; }
|
.app-sp-1col .app-sp-fanText{ font-size: 0.26rem; color: #333333; }
|
/*商品销量*/
|
.app-sp-1col .app-sp-sales{ font-size: 0.26rem; color: #AAAAAA; }
|
/*商品原价*/
|
.app-sp-1col .app-sp-oriPrice{ font-size: 0.26rem; color: #AAAAAA; }
|
/*商品现价*/
|
.app-sp-1col .app-sp-yen{ font-size: 0.24rem; color: #E5005C; }
|
.app-sp-1col .app-sp-prePrice{ font-size: 0.4rem; font-weight: bold; color: #E5005C; }
|
/*优惠券*/
|
.app-sp-1col .app-sp-coupons{ min-width: 1.2rem; height: 0.44rem; line-height: 0.44rem; font-size: 0.24rem; color: white; text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; overflow: hidden; border-radius: 0.05rem; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
|
|
|
/*2. 商品列表：2列纵队*/
|
.app-sp-2col{ width: 3.6rem; height: auto; margin-left: 0.1rem; margin-bottom: 0.1rem; background-color: white; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
|
/*商品图片*/
|
.app-sp-2col .app-sp-img{ width: 3.6rem; height: 3.6rem; position: relative; background-color: #DFDFDF; }
|
.app-sp-2col .app-sp-img img{ width: 3.6rem; height: 3.6rem; position: absolute; left: 0; top: 0; display: block; }
|
/*文字内容外壳*/
|
.app-sp-2col .app-sp-content{ margin-top: 0.1rem; padding: 0.1rem; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
|
/*商品标题*/
|
.app-sp-2col .app-sp-title{ width: 100%; height: 0.65rem; position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
|
.app-sp-2col .app-sp-titleText{ width: 100%; min-height: 0.78rem; font-size: 0.26rem; line-height: 1.5; text-indent: 0.72rem; }
|
.app-sp-2col .app-sp-type{ width: 0.62rem; height: 0.3rem; position: absolute; left: 0rem; top: 0rem; display: block; }
|
/*商品返利*/
|
.app-sp-2col .app-sp-fanIcon{ width: 0.4rem; height: 0.36rem; margin-right: 0.1rem; }
|
.app-sp-2col .app-sp-fanText{ font-size: 0.24rem; color: #333333; }
|
/*商品销量*/
|
.app-sp-2col .app-sp-sales{ font-size: 0.24rem; color: #AAAAAA; }
|
/*商品原价*/
|
.app-sp-2col .app-sp-oriPrice{ font-size: 0.22rem; color: #AAAAAA; }
|
/*商品现价*/
|
.app-sp-2col .app-sp-yen{ font-size: 0.21rem; color: #E5005C; }
|
.app-sp-2col .app-sp-prePrice{ font-size: 0.34rem; font-weight: bold; color: #E5005C; }
|
/*优惠券*/
|
.app-sp-2col .app-sp-coupons{ min-width: 1.1rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.23rem; color: white; text-align: center; padding-left: 0.1rem; padding-right: 0.1rem; overflow: hidden; border-radius: 0.05rem; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
|
|
/*优惠券*/
|
.app-sp-coupons{ border: 1px solid #E5005C; border-radius: 0.06rem; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
|
.app-sp-couponsQuan{ width: 0.35rem; height: 0.35rem; line-height: 0.4rem; font-size: 0.26rem; color: white; text-align: center; background-color: #E5005C; }
|
.app-sp-couponsPrice{ width: auto; height: 0.35rem; line-height: 0.4rem; padding: 0 0.14rem; font-size: 0.26rem; color: #E5005C; text-align: center; }
|
|
|
|
|
/* ------------------------------------------------------------------ 页面底部*/
|
/*回到顶部火箭*/
|
.app-rocket{ width: 0.83rem; height: 0.83rem; position: fixed; right: 0.4rem; bottom: 1.65rem; z-index: 80; border-radius: 50%; }
|
.app-rocket img{ width: 100%; height: 100%; display: block; }
|
