小鱼开发
1001 lines
15 KiB
SCSS
1001 lines
15 KiB
SCSS
@charset "UTF-8";
|
|
@use '../common/mobile';
|
|
$themeColor: #f84803;
|
|
$msgColor:#f84803;
|
|
.text-color-theme{
|
|
color: $themeColor;
|
|
}
|
|
.bg-msg-theme{
|
|
background-color: $msgColor;
|
|
}
|
|
.bg-theme{
|
|
background-color: $themeColor;
|
|
}
|
|
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
|
html {
|
|
font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
body,
|
|
div,
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
dd,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
table,
|
|
caption,
|
|
tbody,
|
|
tfoot,
|
|
thead,
|
|
tr,
|
|
th,
|
|
td {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
// h3,
|
|
// p {
|
|
// font-size: 1rem;
|
|
// }
|
|
|
|
h4 {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
/* HTML5 display definitions
|
|
*====================
|
|
*/
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
main,
|
|
menu,
|
|
nav,
|
|
section,
|
|
summary {
|
|
display: block;
|
|
}
|
|
|
|
audio,
|
|
canvas,
|
|
progress,
|
|
video {
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
[hidden],
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
/* Links
|
|
*====================
|
|
*/
|
|
a {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
a:active,
|
|
a:hover {
|
|
outline-width: 0;
|
|
}
|
|
|
|
/* Text-level semantics
|
|
*====================
|
|
*/
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
text-decoration: underline;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
dfn {
|
|
font-style: italic;
|
|
}
|
|
|
|
mark {
|
|
background-color: #ff0;
|
|
color: #000;
|
|
}
|
|
|
|
small {
|
|
font-size: 75%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
/* Embedded content
|
|
*====================
|
|
*/
|
|
img {
|
|
border: 0;
|
|
width: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Grouping content
|
|
*====================
|
|
*/
|
|
figure {
|
|
margin: 1em 40px;
|
|
}
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* Forms
|
|
*====================
|
|
*/
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
overflow: visible;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
button:-moz-focusring,
|
|
input:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
input {
|
|
line-height: normal;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="search"],
|
|
input[type="password"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
textarea {
|
|
display: block;
|
|
width: 100%;
|
|
/*background:transparent;*/
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
select,
|
|
button,
|
|
textarea,
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="search"],
|
|
input[type="password"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-ms-appearance: none;
|
|
appearance: none;
|
|
border-style: none;
|
|
}
|
|
|
|
select,
|
|
textarea:focus,
|
|
select:focus,
|
|
button:focus,
|
|
input[type="text"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="date"]:focus,
|
|
input[type="time"]:focus,
|
|
input[type="button"],
|
|
input[type="submit"] {
|
|
outline: none;
|
|
// background-color: transparent;
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0 2px;
|
|
padding: 0.35em 0.625em 0.75em;
|
|
border: 1px solid #c0c0c0;
|
|
}
|
|
|
|
legend {
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
textarea {
|
|
height: 4rem;
|
|
resize: none;
|
|
overflow: auto;
|
|
}
|
|
|
|
optgroup {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="date"]:before,
|
|
input[type="time"]:before {
|
|
color: #aaa;
|
|
content: attr(placeholder);
|
|
}
|
|
|
|
input[type="date"].clearph:before,
|
|
input[type="time"].clearph:before {
|
|
color: #000;
|
|
content: '' !important;
|
|
}
|
|
|
|
input::-webkit-input-placeholder,
|
|
textarea::-webkit-input-placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
input:-moz-placeholder,
|
|
textarea:-moz-placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
input::-moz-placeholder,
|
|
textarea::-moz-placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
input:-ms-input-placeholder,
|
|
textarea:-ms-input-placeholder {
|
|
color: #bbb;
|
|
}
|
|
|
|
/*
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="search"],
|
|
input[type="password"],
|
|
textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);box-shadow:inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
|
|
input[type="text"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="password"]:focus,
|
|
textarea:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 0 8px rgba(70,180,70,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 0 8px rgba(70,180,70,.6);}
|
|
*/
|
|
|
|
/*layout flex*/
|
|
.fn-flex {
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
flex-flow: row;
|
|
-webkit-box-align: stretch;
|
|
-webkit-align-items: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.fn-flex-center {
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.fn-flex-baseline {
|
|
-webkit-box-align: baseline;
|
|
-webkit-align-items: baseline;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.flex-justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.fn-flex-column {
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.fn-flex-item {
|
|
// display: block !important;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="2"] {
|
|
-webkit-box-flex: 2;
|
|
-webkit-flex: 2;
|
|
-ms-flex: 2;
|
|
flex: 2;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="3"] {
|
|
-webkit-box-flex: 3;
|
|
-webkit-flex: 3;
|
|
-ms-flex: 3;
|
|
flex: 3;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="4"] {
|
|
-webkit-box-flex: 4;
|
|
-webkit-flex: 4;
|
|
-ms-flex: 4;
|
|
flex: 4;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="5"] {
|
|
-webkit-box-flex: 5;
|
|
-webkit-flex: 5;
|
|
-ms-flex: 5;
|
|
flex: 5;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="6"] {
|
|
-webkit-box-flex: 6;
|
|
-webkit-flex: 6;
|
|
-ms-flex: 6;
|
|
flex: 6;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="7"] {
|
|
-webkit-box-flex: 7;
|
|
-webkit-flex: 7;
|
|
-ms-flex: 7;
|
|
flex: 7;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="8"] {
|
|
-webkit-box-flex: 8;
|
|
-webkit-flex: 8;
|
|
-ms-flex: 8;
|
|
flex: 8;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="9"] {
|
|
-webkit-box-flex: 9;
|
|
-webkit-flex: 9;
|
|
-ms-flex: 9;
|
|
flex: 9;
|
|
}
|
|
|
|
.fn-flex-item[hdtrole~="gutter"] {
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.fn-flex-item:last-child[hdtrole~="gutter"] {
|
|
margin-right: 0;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.list-item>.fn-flex>.list-photo+.fn-flex-item,
|
|
.list-item.fn-flex>.list-photo+.fn-flex-item {
|
|
max-width: 60%;
|
|
}
|
|
|
|
/*next to .list-photo*/
|
|
/*
|
|
.list-item>.fn-flex>.form-radio~.fn-flex-item,
|
|
.list-item.fn-flex>.form-radio~.fn-flex-item{max-width:48%;}*/
|
|
/*paralle to .form-radio*/
|
|
.list-item .fn-flex-item[flexsize="2"] {
|
|
max-width: 20%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="3"] {
|
|
max-width: 30%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="4"] {
|
|
max-width: 40%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="5"] {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="6"] {
|
|
max-width: 60%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="7"] {
|
|
max-width: 70%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="8"] {
|
|
max-width: 80%;
|
|
}
|
|
|
|
.list-item .fn-flex-item[flexsize="9"] {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.fn-flex-item[flexsize="8"].fn-divide {
|
|
padding-right: .8rem;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.fn-flex-wrap {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
/*多行*/
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
/*layout float*/
|
|
.fn-clear:after,
|
|
.detail-desc:after,
|
|
.widget-para-equal:after,
|
|
.goods-detail-desc:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.fn-clear {
|
|
// *height: 1%;
|
|
clear: both;
|
|
}
|
|
|
|
.fn-fl {
|
|
float: left;
|
|
}
|
|
|
|
.fn-fr {
|
|
float: right;
|
|
}
|
|
|
|
.fn-hide {
|
|
display: none !important;
|
|
}
|
|
|
|
/*layout blank*/
|
|
.fn-pn {
|
|
padding: .8rem;
|
|
}
|
|
|
|
.fn-ps {
|
|
padding: .4rem;
|
|
}
|
|
|
|
.fn-phs {
|
|
padding-right: .4rem;
|
|
padding-left: .4rem;
|
|
}
|
|
|
|
.fn-mv {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.fn-mbs {
|
|
margin-bottom: .4rem;
|
|
}
|
|
|
|
.fn-maxh {
|
|
max-height: 12rem;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/*text render*/
|
|
.text-nowrap {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text-wrap {
|
|
word-spacing: normal;
|
|
white-space: pre-line;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.text-nospace {
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #5199e0 !important;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #e65c5c !important;
|
|
}
|
|
|
|
.text-slight {
|
|
color: #bbb !important;
|
|
}
|
|
|
|
.text-white {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.text-gray {
|
|
color: rgba($color:#000000, $alpha:.5) !important;
|
|
;
|
|
}
|
|
|
|
.text-dark {
|
|
color: #333;
|
|
}
|
|
|
|
.text-warn {
|
|
color: #e59900 !important;
|
|
}
|
|
|
|
.text-success {
|
|
color: #47b347 !important;
|
|
}
|
|
|
|
.alert-normal,
|
|
.alert-fail,
|
|
.alert-success {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.alert-fail {
|
|
color: #e65c5c
|
|
}
|
|
|
|
.alert-success {
|
|
color: #47b347
|
|
}
|
|
|
|
/*line-clamp*/
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pos-rel {
|
|
position: relative;
|
|
}
|
|
|
|
.pos-abs {
|
|
position: absolute;
|
|
}
|
|
|
|
.abs-center{
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
img,
|
|
video {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
|
|
.van-nav-bar1 {
|
|
|
|
// background-color: ;
|
|
.van-nav-bar__title {
|
|
color: #fff;
|
|
}
|
|
|
|
.van-icon {
|
|
color: #fff !important;
|
|
}
|
|
|
|
}
|
|
|
|
.van-hairline--bottom::after {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.van-tabs1 {
|
|
.van-tab {
|
|
font-size: 32px;
|
|
color: rgba($color:#fff, $alpha:1);
|
|
transition: all .1s ease;
|
|
}
|
|
|
|
.van-tab--active {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: rgba($color:#fff, $alpha:1);
|
|
}
|
|
|
|
&.van-tabs--line .van-tabs__wrap {
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
|
|
.ani-flipInX {
|
|
animation-iteration-count: 1;
|
|
animation-duration: .5s;
|
|
animation-name: flipInX;
|
|
backface-visibility: visible !important;
|
|
}
|
|
|
|
@keyframes flipInX {
|
|
0% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
transform: perspective(400px) rotateX(90deg)
|
|
}
|
|
|
|
40% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
-webkit-transform: perspective(400px) rotateX(-20deg);
|
|
transform: perspective(400px) rotateX(-20deg)
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
transform: perspective(400px) rotateX(10deg)
|
|
}
|
|
|
|
80% {
|
|
opacity: 1;
|
|
-webkit-transform: perspective(400px) rotateX(-5deg);
|
|
transform: perspective(400px) rotateX(-5deg)
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px)
|
|
}
|
|
}
|
|
|
|
|
|
.ani-bounceIn {
|
|
animation-iteration-count: 1;
|
|
animation-duration: .75s;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
|
|
0%,
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80%,
|
|
to {
|
|
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
|
|
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
|
|
}
|
|
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3)
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
transform: scale3d(1.1, 1.1, 1.1)
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
|
transform: scale3d(.9, .9, .9)
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
transform: scale3d(1.03, 1.03, 1.03)
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
|
transform: scale3d(.97, .97, .97)
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1)
|
|
}
|
|
}
|
|
|
|
.ani-jackInTheBox {
|
|
animation-iteration-count: 1;
|
|
animation-duration: .5s;
|
|
animation-name: jackInTheBox;
|
|
}
|
|
|
|
@keyframes jackInTheBox {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(.1) rotate(30deg);
|
|
transform: scale(.1) rotate(30deg);
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-10deg);
|
|
transform: rotate(-10deg)
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: rotate(3deg);
|
|
transform: rotate(3deg)
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1)
|
|
}
|
|
}
|
|
|
|
.icon-custom{
|
|
display: inline-block;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
&.icon-file{
|
|
width: 80px;
|
|
height: 80px;
|
|
background-image: url(/src/assets/icon-file.png);
|
|
}
|
|
&.icon-favfile{
|
|
width: 80px;
|
|
height: 80px;
|
|
background-image: url(/src/assets/icon-favfile.png);
|
|
}
|
|
&.icon-gift{
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(/src/assets/icon-gift.png);
|
|
}
|
|
&.icon-loc{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-image: url(/src/assets/icon-loc.png);
|
|
}
|
|
&.icon-map{
|
|
width: 34px;
|
|
height: 34px;
|
|
background-image: url(/src/assets/icon-map.png);
|
|
}
|
|
&.icon-money{
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(/src/assets/icon-money.png);
|
|
}
|
|
&.icon-home{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-image: url(/src/assets/icon-home.png);
|
|
&::before{
|
|
content: none;
|
|
}
|
|
}
|
|
&.icon-my{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-image: url(/src/assets/icon-my.png);
|
|
}
|
|
&.icon-redpack{
|
|
width: 34px;
|
|
height: 34px;
|
|
background-image: url(/src/assets/icon-redpack.png);
|
|
}
|
|
}
|
|
.coupon-bg{
|
|
width: 100%;
|
|
padding-top: 27%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
&.red{
|
|
background-image: url(/src/assets/coupon-red.png);
|
|
}
|
|
&.gray{
|
|
background-image: url(/src/assets/coupon-gray.png);
|
|
}
|
|
} |