|
/*===================================== index页面 ==========================================*/
|
/*顶部栏*/
|
.topwai{ width: 100%; min-width: 1090px; height: 1rem; border-bottom: 1px solid #F6F6F6; background-color: #F9F9F9; }
|
.topnei{ width: 1090px; height: 1rem; }
|
/*选项单框*/
|
.topdan{ height: 1rem; padding: 0 0.5rem; font-size: 0.3rem; }
|
.topshu{ width: 1px; height: 0.6rem; background-color: #D1C8D1; }
|
/*-------------------------------------------------------------------*/
|
/*标题栏*/
|
.titlewai{ width: 100%; min-width: 1090px; height: 2.5rem; padding: 0.5rem 0; background-color: white; }
|
/*logo*/
|
.titlelogo{ width: 4rem; height: 1.3rem; }
|
.titlelogo>img{ width: 100%; height: 100%; }
|
/*淘宝字*/
|
.titlebaozi{ height: 1.3rem; margin-left: 0.7rem; font-size: 0.8rem; color: #FD1A00; }
|
/*移动版*/
|
.titlephone{ width: 3.6rem; height: 1rem; border: 2px solid #F17D2F; border-radius: 0.2rem; background-color: #FCE431; position: relative; }
|
/*手机图标*/
|
.titlephoneimg{ width: 0.5rem; height: 0.7rem; margin-right: 0.3rem; }
|
.titlephoneimg>img{ width: 100%; height: 100%; display: block; }
|
.titlephonecon{ font-size: 0.5rem; color: #E20060; }
|
/*二维码悬浮*/
|
.titleerwm{ width: 5rem; height: 5.5rem; position: absolute; left: -0.7rem; top: 1rem; z-index: 10; background-image: url(../img/index_erwm.png); background-size: 100% 100%; }
|
.titleerwmimg{ width: 3.6rem; height: 3.6em; position: absolute; left: 0.7rem; bottom: 0.8rem; }
|
/*-------------------------------------------------------------------*/
|
/*导航栏*/
|
.daowai{ width: 100%; min-width: 1090px; height: 1.5rem; background-color: #E5005C; }
|
/*导航选项单框*/
|
.daodan{ height: 1.5rem; padding: 0 1rem; font-size: 0.6rem; color: white; }
|
.daoxuan{ background-color: #C70050; }
|
/*-------------------------------------------------------------------*/
|
/*搜索区域*/
|
.searchwai{ width: 100%; min-width: 1090px; padding: 0.5rem 0; background-color: white; }
|
.searchnei{ width: 1090px; height: 4.5rem; border: 2px solid #E3E3E3; }
|
.searchnei2{ width: 80%; max-width: 37rem; height: 100%; }
|
/*淘宝，天猫图标*/
|
.searchlogo{ height: 0.75rem; }
|
.search40{ font-size: 0.8rem; line-height: 0.8rem; margin-left: 0.3rem; color: #FF3400; font-weight: bold; }
|
/*搜索框外红边框*/
|
.searchred{ height: 1.3rem; border: 2px solid #E5005C; position: relative; }
|
/*放大镜图标*/
|
.searchdaimg{ width: 0.8rem; height: 0.8rem; margin: 0 0.3rem; }
|
.searchdaimg>img{ width: 100%; height: 100%; display: block; }
|
/*输入组件*/
|
.searchinput{ outline: none; font-size: 0.5rem; border: none; }
|
/*关键字联想框*/
|
.searchlianwai{ width: 100%; position: absolute; left: -2px; top: 1.3rem; border: 1px solid lightgray; background-color: white; z-index: 15; }
|
.searchliandan{ width: 96%; line-height: 1.1rem; padding: 0 2%; font-size: 0.5rem; background-color: white; transition: background-color 0.3s; }
|
.searchliandan:hover{ color: white; background-color: rgba(0,0,0,0.6); }
|
/*搜索按钮*/
|
.searchbtn{ width: 5rem; height: 1.3rem; font-size: 0.5rem; border: 2px solid #E5005C; border-left: none; background-color: #E5005C; color: white; }
|
/*-------------------------------------------------------------------*/
|
/*步骤教程区域*/
|
.buwai{ width: 100%; min-width: 1090px; background-color: white; }
|
.bunei{ width: 1090px; padding: 1rem 0; margin-bottom: 0.5rem; border: 2px solid #E3E3E3; }
|
/*3步拿*/
|
.bu3bu{ width: 8rem; height: 1.8rem; font-size: 0.9rem; color: #FF3000; font-weight: bold; border: 1px solid #FF642C; border-radius: 0.3rem; border-left: none; }
|
.bu3buyuan{ width: 1.8rem; height: 1.8rem; margin-left: -0.8rem; margin-right: 0.5rem; border: 1px solid #FF642C; border-radius: 50%; background-color: white; font-size: 1.5rem; }
|
/*3步详细单框*/
|
.bu3xiangdan{ width: 8rem; height: 2rem; background-image: url(../img/index_xxdanbg.png); background-size: 100% 100%; }
|
.bu3xiangimg{ width: 1.2rem; height: 1.2rem; margin: 0 0.5rem; }
|
.bu3xiangimg>img{ width: 100%; height: 100%; }
|
.bu3xiangcon{ width: 4.5rem; font-size: 0.5rem; }
|
/*-------------------------------------------------------------------*/
|
/*底部区域*/
|
.bomwai{ width: 100%; min-width: 1090px; height: 1.5rem; border-top: 1px solid #D4D4D4; }
|
.bomnei{ width: 1090px; height: 100%; }
|
.bomwai a{ display: block; text-decoration: none; font-size: 0.5rem; }
|
|
|
|
/*===================================== search页面 ==========================================*/
|
/*导航栏外框*/
|
.seadaowai{ width: 1090px; height: 1.2rem; margin: 0 auto; border-bottom: 2px solid #E7015B; }
|
.seadaodan{ height: 1.2rem; padding: 0 1rem; font-size: 0.6rem; }
|
.seadaodanxuan{ background-color: #E7015B; color: white; }
|
/*-------------------------------------------------------------------*/
|
/*搜索悬浮框*/
|
.seafuwai{ width: 100%; min-width: 1090px; height: 3rem; position: fixed; left: 0; top: 0; background-color: white; border-bottom: 2px solid #E5005C; z-index: 50; animation: ewmimg 1s; }
|
.seafunei{ width: 1090px; height: 3rem; margin: 0 auto; }
|
/*回到顶部火箭*/
|
.seatotop{ width: 2rem; height: 2rem; border-radius: 50%; position: fixed; right: 3rem; bottom: 2rem; z-index: 50; animation: ewmimg 1s; }
|
.seatotop>img{ width: 100%; height: 100%; display: block; }
|
/*-------------------------------------------------------------------*/
|
/*排序筛选区域*/
|
.seapaiwai{ width: 1090px; height: 1.2rem; margin: 0 auto; margin-top: 0.6rem; border: 1px solid #E9E8E6; background-color: #F9F9F9; overflow: hidden; }
|
.seapaidan{ height: 1.2rem; padding: 0 1rem; font-size: 0.5rem; }
|
.seapaidanxuan{ background-color: white; color: #E7015B; border: 1px solid #E9E8E6; border-top: none; border-bottom: none; margin-left: -1px; }
|
.seapaiimg{ width: auto; height: 0.5rem; margin-left: 0.2rem; display: block; }
|
/*价格区间输入*/
|
.jiageinput{ width: 2.1rem; height: 0.6rem; margin-left: 0.3rem; font-size: 0.5rem; outline: none; padding: 0 0.2rem; }
|
.jiageok{ padding: 0.1rem 0.6rem; color: white; background-color: #E7015B; font-size: 0.5rem; margin-left: 0.8rem; border-radius: 0.2rem; }
|
/*-------------------------------------------------------------------*/
|
/*商品列表区域*/
|
.seaspwai{ width: 1090px; padding: 0.4rem 0; margin: 0 auto; }
|
/*商品单框*/
|
.seaspdan{ width: 6.5rem; margin: 0.3rem; border: 2px solid #ECE8E5; }
|
.seaspdan:hover{ border: 2px solid #E91C6D; }
|
/*无商品时的显示*/
|
.seanospwai{ width: 90%; padding: 1rem 5%; border: 1px solid #ECE8E5; background-color: #F7E8ED; }
|
|
/*商品图片*/
|
.spimgwai{ width: 6.5rem; height: 6.5rem; position: relative; background-color: gainsboro; }
|
.spimgwai>img{ width: 100%; height: 100%; display: block; }
|
/*商品二维码*/
|
.spewmwai{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.2); }
|
.spewmimgwai{ width: 4rem; height: 4rem; background-color: white; margin-bottom: 0.4rem; overflow: hidden; }
|
.spewmimgwai>img{ width: 90%; height: 90%; display: block; animation: ewmimg 1s; }
|
@keyframes ewmimg{ from{opacity: 0;} to{opacity: 1;} }
|
.spewmcon{ width: 90%; height: 1.3rem; background-color: rgba(0,0,0,0.5); color: white; font-size: 0.42rem; }
|
|
/*商品标题*/
|
.sptitlewai{ width: 93%; height: 1.4rem; margin: 0.3rem 0; overflow: hidden; font-size: 0.45rem; line-height: 0.7rem; position: relative; }
|
.spfrom1{ padding: 0.02rem 0.2rem; margin-right: 0.2rem; border-radius: 0.2rem; background-color: #FA5627; color: white; }
|
.spfrom2{ padding: 0.02rem 0.2rem; margin-right: 0.2rem; border-radius: 0.2rem; background-color: #E71768; color: white; }
|
/*文末3点*/
|
.spthree{ width: 0.63rem; height: 0.7rem; background-color: white; position: absolute; right: 0; bottom: 0; }
|
|
/*商品价格*/
|
.spjiagewai{ width: 93%; color:#EA2873; }
|
|
/*商品券*/
|
.spquanwai{ width: 93%; margin: 0.2rem 0; }
|
.spquan1{ width: 2.3rem; height: 0.8rem; background-image: url(../img/search_kale.png); background-size: 100% 100%; color: white; font-size: 0.3rem; }
|
.spquan1>div{ width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
|
.spquan2{ height: 0.8rem; background-image: url(../img/search_kari.png); background-size: 100% 100%; color: #E70D5C; font-size: 0.3rem; }
|
.spquan2>div{ width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
|
