|
/*返利券、海草街 移动端Web版 公用样式 v1.1.3 2018/12/21 17:03*/
|
|
|
/*文字颜色、背景颜色*/
|
.ziF_red{ color: #E5005C; } /*返利券红色字体*/
|
.ziH_red{ color: #F14242; } /*海草街橙色字体*/
|
.beiF_red{ background-color: #E5005C; } /*返利券红色背景*/
|
.beiH_red{ background-color: #F14242; } /*返利券橙色背景*/
|
/*表单组件*/
|
input{ -moz-outline-style: none; outline-style: none; -moz-outline-width: 0; outline-width: 0; border-style: none; background-color: transparent; }
|
input::-webkit-input-placeholder{ font-size: 0.24rem; color: #A5A5A6; }
|
/*顶部搜索栏input*/
|
.top_input{ height: 0.6rem; margin-left: 0.2rem; margin-right: 0.2rem; border-radius: 0.3rem; }
|
.top_input input{ width: 100%; height: 100%; border-radius: 0.3rem; }
|
/*价格输入input*/
|
.num_input{ width: 1.4rem; height: 0.55rem; border: 0.04rem solid #CCC; border-radius: 0.1rem; background-color: white; }
|
.num_input input{ width: 100%; height: 100%; padding: 0.1rem; }
|
|
|
|
/* ------------------------------------------------------------------ 顶部搜索栏 */
|
/*外层*/
|
.topF{ width: 7.5rem; height: 1rem; background-color: #E5005C; opacity: 0.97; }
|
.topH{ width: 7.5rem; height: 1rem; background-color: white; border-bottom: 1px solid #F3F3F3; opacity: 0.97; }
|
/*左上角标志*/
|
.top_logo{ width: auto; height: 0.44rem; margin-left: 0.2rem; display: block; }
|
.topF_home{ width: 0.44rem; height: 0.42rem; margin-left: 0.3rem; display: block; }
|
.topH_home{ color: #F14242; font-size: 0.6rem; margin-left: 0.3rem; }
|
/*右上角帮助*/
|
.topF_help{ width: 0.44rem; height: 0.5rem; margin-right: 0.3rem; display: block; }
|
/*输入区域*/
|
.topF_search{ height: 0.6rem; margin-left: 0.3rem; margin-right: 0.3rem; border-radius: 0.3rem; background-color: white; }
|
.topH_search{ height: 0.6rem; margin-left: 0.3rem; margin-right: 0.3rem; border-radius: 0.3rem; background-color: #F3F3F3; }
|
/*放大镜*/
|
.top_glass{ width: 0.3rem; height: 0.3rem; display: block; margin-left: 0.2rem; }
|
|
|
|
/* ------------------------------------------------------------------ 商品列表*/
|
/*单个商品最外层*/
|
.sp1{ width: 100%; height: auto; padding-top: 0.15rem; padding-bottom: 0.15rem; background-color: white; }
|
.sp2{ width: 3.6rem; height: auto; margin-left: 0.1rem; margin-bottom: 0.1rem; background-color: white; }
|
/*商品图片区域*/
|
.sp1_img{ width: 2.8rem; height: 2.8rem; margin-left: 0.2rem; border-radius: 0.1rem; background-color: #DFDFDF; position: relative; }
|
.sp1_imgsrc{ width: 2.8rem; height: 2.8rem; position: absolute; left: 0; top: 0; border-radius: 0.1rem; display: block; }
|
.sp2_img{ width: 3.6rem; height: 3.6rem; background-color: #DFDFDF; position: relative; }
|
.sp2_imgsrc{ width: 3.6rem; height: 3.6rem; position: absolute; left: 0; top: 0; display: block; }
|
/*文字内容区域*/
|
.sp1_content{ width: -webkit-calc(100% - 3.4rem); width: calc(100% - 3.4rem); height: 2.8rem; padding-top: 0.1rem; padding-bottom: 0.1rem; margin-left: 0.2rem; }
|
.sp2_content{ width: 100%; padding: 0.15rem; }
|
|
/*商品标题外层*/
|
.sp1_title{ width: 100%; height: 0.7rem; position: relative; }
|
.sp2_title{ width: 100%; height: 0.67rem; position: relative; margin-top: 0.05rem; }
|
/*商品标题文字*/
|
.sp1_titleFont{ width: 100%; height: auto; font-size: 0.28rem; line-height: 0.42rem; text-indent: 0.72rem; }
|
.sp2_titleFont{ width: 100%; height: auto; font-size: 0.26rem; line-height: 0.39rem; text-indent: 0.72rem; }
|
/*商品来源*/
|
.sp_type{ width: 0.62rem; height: 0.3rem; position: absolute; left: 0rem; top: 0rem; }
|
.sp_type img{ width: 0.62rem; height: 0.3rem; display: block; }
|
|
/*返利图标*/
|
.spF_fan{ width: 0.4rem; height: 0.36rem; margin-right: 0.12rem; }
|
.spF_fan img{ width: 0.4rem; height: 0.36rem; display: block; }
|
.spH_fan{ width: 0.5rem; height: 0.26rem; margin-right: 0.12rem; }
|
.spH_fan img{ width: 0.5rem; height: 0.26rem; display: block; }
|
/*返利文字*/
|
.sp1_fanFont{ font-size: 0.26rem; color: #333333; }
|
.sp2_fanFont{ font-size: 0.24rem; color: #333333; }
|
/*销量文字*/
|
.sp1_xiaoFont{ font-size: 0.26rem; color: #AAAAAA; }
|
.sp2_xiaoFont{ font-size: 0.24rem; color: #AAAAAA; }
|
|
/*原价文字*/
|
.sp1_yuanFont{ font-size: 0.24rem; color: #AAAAAA; }
|
.sp2_yuanFont{ font-size: 0.22rem; color: #AAAAAA; }
|
|
/*优惠券*/
|
.sp1_quan{ min-width: 1.2rem; height: 0.44rem; line-height: 0.44rem; font-size: 0.24rem; border-radius: 0.05rem; text-align: center; color: white; overflow: hidden; }
|
.sp2_quan{ min-width: 1.09rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.23rem; border-radius: 0.05rem; text-align: center; color: white; overflow: hidden; }
|
.spF_quanBg{ background-image: url(../img/flq/sp_quan.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; }
|
.spH_quanBg{ background-image: url(../img/hcj/sp_quan.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; }
|
|
/*券后价标志*/
|
.sp_qPrice{ font-size: 0.28rem; margin-right: 0.1rem; }
|
|
|
|
/* ------------------------------------------------------------------ 页面底部*/
|
/*回到顶部火箭*/
|
.backTop{ width: 0.88rem; height: 0.88rem; position: fixed; right: 0.4rem; bottom: 1.65rem; z-index: 80; border-radius: 50%; animation: animt_back 0.5s; }
|
.backTop img{ width: 0.88rem; height: 0.88rem; display: block; }
|
@keyframes animt_back{ from{ opacity: 0; } to{ opacity: 1; } }
|
|
|
|
/* =============================================================================================== 首页页面*/
|
/*顶部轮播图*/
|
.home_lunbo{ width: 7.5rem; height: 3.3rem; }
|
/*猜你喜欢*/
|
.home_cai{ width: 100%; height: 1.2rem; background-color: white; }
|
.homeF_caiimg{ width: 0.36rem; height: 0.2rem; margin-left: 0.2rem; margin-right: 0.2rem; }
|
.homeH_caiimg{ width: 0.5rem; height: 0.2rem; margin-left: 0.2rem; margin-right: 0.2rem; }
|
