712 lines
14 KiB
SCSS
712 lines
14 KiB
SCSS
@charset "UTF-8";
|
|
|
|
/* ================================ */
|
|
|
|
/* 触屏版常用层与动作等样式 */
|
|
|
|
/* ================================ */
|
|
|
|
/* Author: qianyistore */
|
|
|
|
/* Support Site: www.qianyistore.com */
|
|
|
|
/* Retrofit Date: Aug-08-2016 */
|
|
|
|
/* ================================ */
|
|
|
|
.sstouch-search-layout {
|
|
margin-top: 93.75rpx;
|
|
.dl {
|
|
padding: 37.5rpx 23.4375rpx 23.4375rpx;
|
|
text-align: left;
|
|
}
|
|
.dt {
|
|
font-size: 32.8125rpx;
|
|
line-height: 46.875rpx;
|
|
color: #111;
|
|
margin-bottom: 18.75rpx;
|
|
}
|
|
view {
|
|
font-size: 0;
|
|
display: block;
|
|
display: inline-block;
|
|
background-color: #FFF;
|
|
border: solid 2.34375rpx #EEE;
|
|
margin: 0 18.75rpx 18.75rpx 0;
|
|
.a {
|
|
display: block;
|
|
padding: 9.375rpx 23.4375rpx;
|
|
font-size: 28.125rpx;
|
|
line-height: 46.875rpx;
|
|
color: #555;
|
|
}
|
|
}
|
|
.hot-keyword view {
|
|
border-radius: 35.15625rpx;
|
|
}
|
|
.a.clear-history {
|
|
display: inline-block;
|
|
width: 79%;
|
|
height: 90.9375rpx;
|
|
text-align: center;
|
|
margin: 70.3125rpx 10% 0 10%;
|
|
background-color: #EEE;
|
|
border-radius: 9.375rpx;
|
|
font-size: 32.8125rpx;
|
|
line-height: 90.9375rpx;
|
|
color: #555;
|
|
}
|
|
}
|
|
|
|
/*页内全屏遮罩层*/
|
|
|
|
.sstouch-full-mask {
|
|
position: fixed;
|
|
z-index: 19;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.sstouch-full-mask-bg {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 11;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.sstouch-full-mask-block {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 12;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: $body-bg;
|
|
box-shadow: -11.71875rpx 0 9.375rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.sstouch-full-mask {
|
|
&.left {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
animation: optionBlockLeft 0.3s ease-in-out;
|
|
-webkit-animation: optionBlockLeft 0.3s ease-in-out;
|
|
}
|
|
&.right {
|
|
left: 110%;
|
|
right: -110%;
|
|
animation: optionBlockRight 0.5s ease-in-out;
|
|
-webkit-animation: optionBlockRight 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes optionBlockLeft {
|
|
from {
|
|
display: none;
|
|
left: 100%;
|
|
right: -100%;
|
|
}
|
|
|
|
to {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@-webkit-keyframes optionBlockLeft {
|
|
from {
|
|
display: none;
|
|
left: 100%;
|
|
right: -100%;
|
|
}
|
|
|
|
to {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes optionBlockRight {
|
|
from {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
to {
|
|
display: none;
|
|
left: 110%;
|
|
right: -110%;
|
|
}
|
|
}
|
|
|
|
|
|
@-webkit-keyframes optionBlockRight {
|
|
from {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
to {
|
|
display: none;
|
|
left: 110%;
|
|
right: -110%;
|
|
}
|
|
}
|
|
|
|
|
|
/*页内下部滑入遮罩*/
|
|
|
|
.sstouch-bottom-mask {
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: block;
|
|
}
|
|
|
|
.sstouch-bottom-mask-bg {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 21;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
.sstouch-bottom-mask-block {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 22;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
min-height: 562.5rpx;
|
|
background: #FFF;
|
|
}
|
|
|
|
.sstouch-bottom-mask {
|
|
&.up {
|
|
display: block;
|
|
bottom: 0;
|
|
animation: optionBlockUp 0.5s ease-in-out;
|
|
-webkit-animation: optionBlockUp 0.5s ease-in-out;
|
|
}
|
|
&.down {
|
|
animation: optionBlockDown 0.5s ease-in-out;
|
|
-webkit-animation: optionBlockDown 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes optionBlockUp {
|
|
from {
|
|
display: none;
|
|
bottom: -100%;
|
|
}
|
|
|
|
to {
|
|
display: block;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@-webkit-keyframes optionBlockUp {
|
|
from {
|
|
display: none;
|
|
bottom: -100%;
|
|
}
|
|
|
|
to {
|
|
display: block;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes optionBlockDown {
|
|
from {
|
|
display: block;
|
|
bottom: 0;
|
|
}
|
|
|
|
to {
|
|
display: none;
|
|
bottom: -100%;
|
|
}
|
|
}
|
|
|
|
|
|
@-webkit-keyframes optionBlockDown {
|
|
from {
|
|
display: block;
|
|
bottom: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
display: none;
|
|
bottom: -100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.sstouch-bottom-mask-tip {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -56.25rpx;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 28.125rpx;
|
|
font-weight: 600;
|
|
line-height: 42.1875rpx;
|
|
color: #FFF;
|
|
text-shadow: 0 0 23.4375rpx rgba(0, 0, 0, 0.5);
|
|
.i {
|
|
background-image: url(https://test.lancerdt.com/wap/images/back_down.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 75%;
|
|
width: 37.5rpx;
|
|
height: 42.1875rpx;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: 4.6875rpx;
|
|
}
|
|
}
|
|
|
|
.sstouch-bottom-mask-top {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
padding: 23.4375rpx;
|
|
border-bottom: solid 2.34375rpx #EEE;
|
|
}
|
|
|
|
.sstouch-bottom-mask-close {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -28.125rpx;
|
|
right: 0;
|
|
background: #FFF;
|
|
width: 42.1875rpx;
|
|
height: 42.1875rpx;
|
|
padding: 7.03125rpx;
|
|
border-radius: 100%;
|
|
.i {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(https://test.lancerdt.com/wap/images/close_window.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 100%;
|
|
opacity: 23.4375rpx;
|
|
}
|
|
}
|
|
|
|
.sstouch-bottom-mask-rolling {
|
|
min-height: 89.0625rpx;
|
|
max-height: 562.5rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/*页内大图显示*/
|
|
|
|
.sstouch-bigimg-layout {
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 11;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
.close {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 23.4375rpx;
|
|
right: 23.4375rpx;
|
|
width: 56.25rpx;
|
|
height: 56.25rpx;
|
|
background-color: #FFF;
|
|
background-image: url(https://test.lancerdt.com/wap/images/close_window.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 90%;
|
|
border-radius: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
.pic-box {
|
|
margin: 25% auto 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 750rpx;
|
|
z-index: 1;
|
|
view {
|
|
font-size: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
text-align: center;
|
|
z-index: auto;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background-color: transparent !important;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sstouch-bigimg-turn {
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
view {
|
|
font-size: 0;
|
|
margin: 0 auto;
|
|
white-space: nowrap;
|
|
display: block;
|
|
width: 100%;
|
|
view {
|
|
display: inline-block;
|
|
min-width: 19%;
|
|
max-width: 99%;
|
|
margin: 0 1% 0 0 !important;
|
|
height: 11.71875rpx;
|
|
padding: 0 !important;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
&.cur {
|
|
background-color: $main-skin-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*选择型按钮*/
|
|
|
|
.sstouch-sel-box {
|
|
display: block;
|
|
background: #FFF;
|
|
padding: 0 37.5rpx;
|
|
.tit {
|
|
display: block;
|
|
padding: 23.4375rpx 0;
|
|
font-size: 32.8125rpx;
|
|
line-height: 42.1875rpx;
|
|
}
|
|
.sel-con {
|
|
padding: 0 0 23.4375rpx 0;
|
|
.a {
|
|
display: inline-block;
|
|
height: 42.1875rpx;
|
|
padding: 11.71875rpx 23.4375rpx;
|
|
margin: 14.0625rpx 14.0625rpx 0 0;
|
|
font-size: 25.781250000000004rpx;
|
|
color: $main-text-color;
|
|
line-height: 42.1875rpx;
|
|
background: #FFF;
|
|
border: solid 2.34375rpx #BBB;
|
|
border-radius: 7.03125rpx;
|
|
&.sel {
|
|
padding: 13.125000000000002rpx 24.84375rpx;
|
|
color: #FFF;
|
|
background: $main-skin-color;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sstouch-sel-list {
|
|
background-color: #FFF;
|
|
margin-top: 23.4375rpx;
|
|
label {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
height: 42.1875rpx;
|
|
padding: 23.4375rpx 0;
|
|
margin: 0 23.4375rpx;
|
|
font-size: 28.125rpx;
|
|
line-height: 42.1875rpx;
|
|
border-bottom: solid 2.34375rpx #EEE;
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
.i {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 35.15625rpx;
|
|
height: 35.15625rpx;
|
|
margin-right: 9.375rpx;
|
|
background-color: $body-bg;
|
|
border: 2.34375rpx solid #CCC;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
}
|
|
&.checked .i {
|
|
border-color: $main-skin-color;
|
|
background-color: $main-skin-color;
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4.6875rpx;
|
|
top: 8.203125rpx;
|
|
width: 18.75rpx;
|
|
height: 9.375rpx;
|
|
border-left: 3.046875rpx solid #fff;
|
|
border-bottom: 3.046875rpx solid #fff;
|
|
-webkit-transform: rotate(-45deg);
|
|
-ms-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
.a.del-invoice {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 23.4375rpx;
|
|
right: 23.4375rpx;
|
|
display: block;
|
|
width: 37.5rpx;
|
|
height: 42.1875rpx;
|
|
background-image: url(https://test.lancerdt.com/wap/images/del_b.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 80%;
|
|
}
|
|
}
|
|
|
|
.sstouch-inp-con .input-box {
|
|
&.btn-style label {
|
|
display: inline-block !important;
|
|
height: 42.1875rpx !important;
|
|
padding: 11.71875rpx 23.4375rpx !important;
|
|
margin: 14.0625rpx 14.0625rpx 0 0 !important;
|
|
font-size: 25.781250000000004rpx !important;
|
|
color: $main-text-color !important;
|
|
line-height: 42.1875rpx !important;
|
|
background: #FFF !important;
|
|
border: solid 2.34375rpx #BBB !important;
|
|
border-radius: 7.03125rpx !important;
|
|
width: auto;
|
|
&.checked {
|
|
padding: 13.125000000000002rpx 24.84375rpx !important;
|
|
color: #FFF !important;
|
|
background: $main-skin-color !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
label input[type="radio"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*店铺优惠券*/
|
|
|
|
.store-voucher {
|
|
font-size: 32.8125rpx;
|
|
.i.icon-store {
|
|
display: inline-block;
|
|
width: 37.5rpx;
|
|
height: 42.1875rpx;
|
|
margin-right: 9.375rpx;
|
|
vertical-align: middle;
|
|
background: url(https://test.lancerdt.com/wap/images/store_b.png) no-repeat 50% 50%;
|
|
background-size: 90%;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.sstouch-voucher-list {
|
|
margin-left: 23.4375rpx;
|
|
view {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: #FFF;
|
|
border-top: solid #EEE 2.34375rpx;
|
|
padding: 23.4375rpx 23.4375rpx 23.4375rpx 0;
|
|
}
|
|
.dl {
|
|
margin: 0 140.625rpx 0 0;
|
|
}
|
|
.dt {
|
|
font-size: 25.781250000000004rpx;
|
|
color: $main-skin-color;
|
|
line-height: 56.25rpx;
|
|
.em {
|
|
font-size: 56.25rpx;
|
|
margin: 0 4.6875rpx;
|
|
}
|
|
}
|
|
.dd {
|
|
&.need {
|
|
font-size: 25.781250000000004rpx;
|
|
line-height: 28.125rpx;
|
|
color: #333;
|
|
}
|
|
&.time {
|
|
font-size: 21.09375rpx;
|
|
line-height: 28.125rpx;
|
|
color: $main-text-color;
|
|
}
|
|
}
|
|
.a {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 46.875rpx;
|
|
right: 46.875rpx;
|
|
}
|
|
}
|
|
|
|
/*020店铺地址*/
|
|
|
|
.sstouch-o2o-tip {
|
|
padding: 0 23.4375rpx;
|
|
font-size: 32.8125rpx;
|
|
line-height: 84.375rpx;
|
|
display: block;
|
|
.a {
|
|
font-weight: 600;
|
|
color: #000;
|
|
display: block;
|
|
position: relative;
|
|
.i {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 46.875rpx;
|
|
height: 46.875rpx;
|
|
margin: 14.0625rpx 9.375rpx 0 0;
|
|
background-image: url(https://test.lancerdt.com/wap/images/mc_03.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 80%;
|
|
opacity: 1;
|
|
}
|
|
view {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 23.4375rpx;
|
|
right: 23.4375rpx;
|
|
width: 37.5rpx;
|
|
height: 42.1875rpx;
|
|
font-size: 46.875rpx;
|
|
/* background-image: url(https://test.lancerdt.com/wap/images/arrow_right_b.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 78%;*/
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sstouch-o2o-list {
|
|
background: #FFF;
|
|
view {
|
|
position: relative;
|
|
padding: 23.4375rpx 0 23.4375rpx 23.4375rpx;
|
|
border-bottom: solid 2.34375rpx #EEE;
|
|
}
|
|
.dl {
|
|
margin-right: 140.625rpx;
|
|
.a {
|
|
display: block;
|
|
}
|
|
}
|
|
.dt {
|
|
display: block;
|
|
font-size: 32.8125rpx;
|
|
line-height: 46.875rpx;
|
|
font-weight: 600;
|
|
color: #000;
|
|
view {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
line-height: 46.875rpx;
|
|
font-size: 28.125rpx;
|
|
color: #AC92ED;
|
|
.i {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 46.875rpx;
|
|
height: 46.875rpx;
|
|
margin-right: 9.375rpx;
|
|
background-image: url(https://test.lancerdt.com/wap/images/location_b.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 70%;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
.dd {
|
|
display: block;
|
|
font-size: 28.125rpx;
|
|
line-height: 46.875rpx;
|
|
color: #555;
|
|
}
|
|
.tel {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 23.4375rpx;
|
|
top: 23.4375rpx;
|
|
border-left: solid 2.34375rpx #EEE;
|
|
padding-left: 23.4375rpx;
|
|
.a {
|
|
display: block;
|
|
width: 93.75rpx;
|
|
height: 93.75rpx;
|
|
background-image: url(https://test.lancerdt.com/wap/images/tel_b.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: 50%;
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sstouch-map-layout {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.sstouch-map {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|