3343 lines
110 KiB
Plaintext
3343 lines
110 KiB
Plaintext
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*每个页面公共css */
|
|
|
|
/* 阿里巴巴矢量图标库 start */
|
|
@font-face {
|
|
font-family: "iconfont"; /* Project id 3180711 */
|
|
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
|
|
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
|
|
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
|
|
}
|
|
.icon {
|
|
font-family: "iconfont" !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.icon-del:before {
|
|
content: "\e718";
|
|
}
|
|
.icon-cut:before {
|
|
content: "\e609";
|
|
}
|
|
.icon-add:before {
|
|
content: "\e60a";
|
|
}
|
|
.icon-add-picture05:before {
|
|
content: "\e639";
|
|
}
|
|
.icon-add-picture04:before {
|
|
content: "\e636";
|
|
}
|
|
.icon-add-picture03:before {
|
|
content: "\e642";
|
|
}
|
|
.icon-add-picture02:before {
|
|
content: "\e8bc";
|
|
}
|
|
.icon-add-picture01:before {
|
|
content: "\e62c";
|
|
}
|
|
.icon-sandian:before {
|
|
content: "\e769";
|
|
}
|
|
.icon-nothing-collection:before {
|
|
content: "\e610";
|
|
}
|
|
.icon-nothing-more:before {
|
|
content: "\e624";
|
|
}
|
|
.icon-nothing-data:before {
|
|
content: "\e60c";
|
|
}
|
|
.icon-address-check:before {
|
|
content: "\e6c2";
|
|
}
|
|
.icon-address-unchecked:before {
|
|
content: "\e623";
|
|
}
|
|
.icon-navigate-now:before {
|
|
content: "\e640";
|
|
}
|
|
.icon-send-goods:before {
|
|
content: "\e601";
|
|
}
|
|
.icon-payment:before {
|
|
content: "\e602";
|
|
}
|
|
.icon-finish:before {
|
|
content: "\e63f";
|
|
}
|
|
.icon-take:before {
|
|
content: "\e649";
|
|
}
|
|
.icon-refund:before {
|
|
content: "\e613";
|
|
}
|
|
.icon-customer-black:before {
|
|
content: "\ec2e";
|
|
}
|
|
.icon-customer:before {
|
|
content: "\e628";
|
|
}
|
|
.icon-check:before {
|
|
content: "\e61e";
|
|
}
|
|
.icon-del-white:before {
|
|
content: "\e61f";
|
|
}
|
|
.icon-screen:before {
|
|
content: "\e60b";
|
|
}
|
|
.icon-search:before {
|
|
content: "\e653";
|
|
}
|
|
.icon-caidan-mo:before {
|
|
content: "\e73e";
|
|
}
|
|
.icon-renwu-mo:before {
|
|
content: "\e73f";
|
|
}
|
|
.icon-shop-cart:before {
|
|
content: "\e73d";
|
|
}
|
|
.icon-caidan-active:before {
|
|
content: "\e608";
|
|
}
|
|
.icon-renwu-acitve:before {
|
|
content: "\e67c";
|
|
}
|
|
.icon-home-mo:before {
|
|
content: "\e673";
|
|
}
|
|
.icon-home-active:before {
|
|
content: "\e674";
|
|
}
|
|
.icon-return:before {
|
|
content: "\e600";
|
|
}
|
|
.icon-next:before {
|
|
content: "\e60e";
|
|
}
|
|
|
|
/* 阿里巴巴矢量图标库 end */
|
|
|
|
/* 项目基础样式 start */
|
|
|
|
/* flex布局 */
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.bottoc{margin-top: 6rpx;color: #414141;}
|
|
.opc{opacity: 0.7;}
|
|
.width100{width: 100%;}
|
|
.width55{width: 55%;}
|
|
.width50{width: 50%;}
|
|
.width49{width: 49%;}
|
|
.width48_5{width: 48.5%;}
|
|
.width48{width: 48%;}
|
|
.width47{width: 47%;}
|
|
.width46{width: 46%;}
|
|
.width45{width: 45%;}
|
|
.width33{width: 33%;}
|
|
.width30{width: 30%;}
|
|
.width29{width: 29%;}
|
|
.width28{width: 28%;}
|
|
.width27{width: 27%;}
|
|
.width26{width: 26%;}
|
|
.width25{width: 25%;}
|
|
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
|
.posir{position: relative;}
|
|
.posia{position: absolute;}
|
|
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
|
|
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
|
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
|
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
|
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
|
.posi-sticky{position: -webkit-sticky;position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
|
|
.dis{display: flex;}
|
|
.disac{display: flex;align-items: center;}
|
|
.disja{display: flex;justify-content: space-around;}
|
|
.disjb{display: flex;justify-content: space-between;}
|
|
.disje{display: flex;justify-content: flex-end;}
|
|
.disjbac{display: flex;justify-content: space-between;align-items: center;}
|
|
.disjcac{display: flex;justify-content: center;align-items: center;}
|
|
.fc{flex-direction: column;}
|
|
.fw{flex-wrap: wrap;}
|
|
.fe{justify-content: flex-end;}
|
|
.flexs{flex-shrink: 0;}
|
|
.wh42{width: 42rpx;height: 42rpx;}
|
|
.wh44{width: 44rpx;height: 44rpx;}
|
|
button:after{content: none!important;}
|
|
.borbot{border-bottom: 2rpx solid #EEEEEE;}
|
|
.borbot:last-child{border-bottom: none;}
|
|
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
|
.tbot{border-top: 2rpx solid #EEEEEE;}
|
|
.borbot-df{border: 2rpx solid #DFDFDF;}
|
|
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
|
.bleft {border-left: 2rpx solid #EEEEEE;}
|
|
.bbt-d9{border-bottom: 2rpx solid #d9d9d9;}
|
|
|
|
/* 行高 */
|
|
.line-h30{line-height: 30rpx;}
|
|
.line-h32{line-height: 32rpx;}
|
|
.line-h34{line-height: 34rpx;}
|
|
.line-h36{line-height: 36rpx;}
|
|
.line-h38{line-height: 38rpx;}
|
|
.line-h40{line-height: 40rpx;}
|
|
.line-h42{line-height: 42rpx;}
|
|
.line-h44{line-height: 44rpx;}
|
|
.line-h46{line-height: 46rpx;}
|
|
.line-h48{line-height: 48rpx;}
|
|
.line-h50{line-height: 50rpx;}
|
|
.line-h52{line-height: 52rpx;}
|
|
.line-h54{line-height: 54rpx;}
|
|
.line-h56{line-height: 56rpx;}
|
|
.line-h58{line-height: 58rpx;}
|
|
.line-h60{line-height: 60rpx;}
|
|
.line-h62{line-height: 62rpx;}
|
|
.line-h64{line-height: 64rpx;}
|
|
.line-h66{line-height: 66rpx;}
|
|
.line-h68{line-height: 60rpx;}
|
|
.line-h70{line-height: 70rpx;}
|
|
.line-h72{line-height: 72rpx;}
|
|
.line-h74{line-height: 74rpx;}
|
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
.clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
|
|
/* 字体大小 */
|
|
.fon20{font-size: 20rpx;}
|
|
.fon22{font-size: 22rpx;}
|
|
.fon24{font-size: 24rpx;}
|
|
.fon25{font-size: 25rpx;}
|
|
.fon26{font-size: 26rpx;}
|
|
.fon27{font-size: 27rpx;}
|
|
.fon28{font-size: 28rpx;}
|
|
.fon30{font-size: 30rpx;}
|
|
.fon32{font-size: 32rpx;}
|
|
.fon34{font-size: 34rpx;}
|
|
.fon36{font-size: 36rpx;}
|
|
.fon38{font-size: 38rpx;}
|
|
.fon40{font-size: 40rpx;}
|
|
.fon42{font-size: 42rpx;}
|
|
.fon44{font-size: 44rpx;}
|
|
.fon46{font-size: 46rpx;}
|
|
.fon48{font-size: 48rpx;}
|
|
.fon50{font-size: 50rpx;}
|
|
.fon52{font-size: 52rpx;}
|
|
.fon54{font-size: 54rpx;}
|
|
.fon56{font-size: 56rpx;}
|
|
.fon58{font-size: 58rpx;}
|
|
.fon60{font-size: 60rpx;}
|
|
.fon62{font-size: 62rpx;}
|
|
.fon64{font-size: 64rpx;}
|
|
.fon66{font-size: 66rpx;}
|
|
.fon68{font-size: 68rpx;}
|
|
.fon70{font-size: 70rpx;}
|
|
.fon72{font-size: 72rpx;}
|
|
|
|
/* 字体颜色 */
|
|
.colf{color: #FFFFFF;}
|
|
.colf6{color: #f6f6f6;}
|
|
.colb{color: #000000;}
|
|
.colc{color: #CCCCCC;}
|
|
.col3{color: #333333;}
|
|
.col34{color: #343434;}
|
|
.col6{color: #666666;}
|
|
.colf8{color: #F85050;}
|
|
.col9{color: #999999;}
|
|
.pcol{color: #3875F6;}
|
|
.col2c{color: #2C2C2C;}
|
|
.col80{color: #808080;}
|
|
.col7D{color: #7D7D7D;}
|
|
.colB3{color: #B3B3B3;}
|
|
.col5b{color: #5B5B5B;}
|
|
.colpeili{color: #868695;}
|
|
|
|
/* 字体位置 */
|
|
.tright{text-align: right;}
|
|
.tcenter{text-align: center;}
|
|
|
|
/* 文字空两格 */
|
|
.tindent{text-indent: 2em;}
|
|
|
|
/* 元素缩小 */
|
|
.scal13{-webkit-transform: scale(1.3);transform: scale(1.3);}
|
|
.scal12{-webkit-transform: scale(1.2);transform: scale(1.2);}
|
|
.scal11{-webkit-transform: scale(1.1);transform: scale(1.1);}
|
|
.scal10{-webkit-transform: scale(1);transform: scale(1);}
|
|
.scal09{-webkit-transform: scale(.9);transform: scale(.9);}
|
|
.scal08{-webkit-transform: scale(.8);transform: scale(.8);}
|
|
.scal07{-webkit-transform: scale(.7);transform: scale(.7);}
|
|
.scal06{-webkit-transform: scale(.6);transform: scale(.6);}
|
|
.scal05{-webkit-transform: scale(.5);transform: scale(.5);}
|
|
|
|
/* 行间距 */
|
|
.linh40{line-height: 40rpx;}
|
|
.linh50{line-height: 50rpx;}
|
|
.linh60{line-height: 60rpx;}
|
|
.linh70{line-height: 70rpx;}
|
|
|
|
/* 粗体 */
|
|
.bold{font-weight: bold;}
|
|
.bold400{font-weight: 400;}
|
|
.bold500{font-weight: 500;}
|
|
|
|
/* 背景颜色 */
|
|
.pbackc{background-color: #3875F6;}
|
|
.bacf{background-color: #FFFFFF;}
|
|
.bac0{background-color: #000000;}
|
|
.bcdb{background-color: #DBDBDB;}
|
|
.bcf8{background: #F85050;}
|
|
.bacf5{background: #F5F5F5;}
|
|
.bacf6{background-color: #f6f6f6;}
|
|
|
|
/* 圆角 */
|
|
.radius10{border-radius: 10rpx;}
|
|
.radius15{border-radius: 15rpx;}
|
|
.radius20{border-radius: 20rpx;}
|
|
.radius30{border-radius: 30rpx;}
|
|
.radius35{border-radius: 35rpx;}
|
|
.radius40{border-radius: 40rpx;}
|
|
.radius45{border-radius: 45rpx;}
|
|
|
|
/* 上下左右---外边距 */
|
|
.mar10{margin: 10rpx;}
|
|
.mar20{margin: 20rpx;}
|
|
.mar25{margin: 25rpx;}
|
|
.mar30{margin: 30rpx;}
|
|
.mar32{margin: 32rpx;}
|
|
.mar36{margin: 36rpx;}
|
|
.mar40{margin: 40rpx;}
|
|
.mar50{margin: 50rpx;}
|
|
|
|
/* 上下---外边距 */
|
|
.mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;}
|
|
.mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;}
|
|
.mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;}
|
|
.mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;}
|
|
.mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;}
|
|
.mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;}
|
|
.mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;}
|
|
.mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;}
|
|
|
|
/* 左右---外边距 */
|
|
.mar-zy10{margin-left: 10rpx;margin-right: 10rpx;}
|
|
.mar-zy20{margin-left: 20rpx;margin-right: 20rpx;}
|
|
.mar-zy25{margin-left: 25rpx;margin-right: 25rpx;}
|
|
.mar-zy30{margin-left: 30rpx;margin-right: 30rpx;}
|
|
.mar-zy32{margin-left: 32rpx;margin-right: 32rpx;}
|
|
.mar-zy36{margin-left: 36rpx;margin-right: 36rpx;}
|
|
.mar-zy40{margin-left: 40rpx;margin-right: 40rpx;}
|
|
.mar-zy50{margin-left: 50rpx;margin-right: 50rpx;}
|
|
.mar-zy85{margin-left: 85rpx;margin-right: 85rpx;}
|
|
|
|
/* 上---外边距 */
|
|
.mar-s10{margin-top: 10rpx;}
|
|
.mar-s20{margin-top: 20rpx;}
|
|
.mar-s25{margin-top: 25rpx;}
|
|
.mar-s30{margin-top: 30rpx;}
|
|
.mar-s32{margin-top: 32rpx;}
|
|
.mar-s36{margin-top: 36rpx;}
|
|
.mar-s40{margin-top: 40rpx;}
|
|
.mar-s50{margin-top: 50rpx;}
|
|
.mar-s60{margin-top: 60rpx;}
|
|
.mar-s70{margin-top: 70rpx;}
|
|
.mar-s80{margin-top: 80rpx;}
|
|
.mar-s90{margin-top: 90rpx;}
|
|
.mar-s100{margin-top: 100rpx;}
|
|
.mar-s120{margin-top: 120rpx;}
|
|
.mar-s140{margin-top: 140rpx;}
|
|
.mar-s160{margin-top: 160rpx;}
|
|
.mar-s180{margin-top: 180rpx;}
|
|
|
|
/* 下---外边距 */
|
|
.mar-x10{margin-bottom: 10rpx;}
|
|
.mar-x20{margin-bottom: 20rpx;}
|
|
.mar-x25{margin-bottom: 25rpx;}
|
|
.mar-x30{margin-bottom: 30rpx;}
|
|
.mar-x32{margin-bottom: 32rpx;}
|
|
.mar-x36{margin-bottom: 36rpx;}
|
|
.mar-x40{margin-bottom: 40rpx;}
|
|
.mar-x50{margin-bottom: 50rpx;}
|
|
.mar-x60{margin-bottom: 60rpx;}
|
|
.mar-x70{margin-bottom: 70rpx;}
|
|
.mar-x80{margin-bottom: 80rpx;}
|
|
.mar-x90{margin-bottom: 90rpx;}
|
|
.mar-x100{margin-bottom: 100rpx;}
|
|
.mar-x120{margin-bottom: 120rpx;}
|
|
.mar-x140{margin-bottom: 140rpx;}
|
|
.mar-x160{margin-bottom: 160rpx;}
|
|
.mar-x180{margin-bottom: 180rpx;}
|
|
|
|
/* 左---外边距 */
|
|
.mar-z10{margin-left: 10rpx;}
|
|
.mar-z20{margin-left: 20rpx;}
|
|
.mar-z25{margin-left: 25rpx;}
|
|
.mar-z30{margin-left: 30rpx;}
|
|
.mar-z32{margin-left: 32rpx;}
|
|
.mar-z36{margin-left: 36rpx;}
|
|
.mar-z40{margin-left: 40rpx;}
|
|
.mar-z50{margin-left: 50rpx;}
|
|
|
|
/* 右---外边距 */
|
|
.mar-y10{margin-right: 10rpx;}
|
|
.mar-y20{margin-right: 20rpx;}
|
|
.mar-y25{margin-right: 25rpx;}
|
|
.mar-y30{margin-right: 30rpx;}
|
|
.mar-y32{margin-right: 32rpx;}
|
|
.mar-y36{margin-right: 36rpx;}
|
|
.mar-y40{margin-right: 40rpx;}
|
|
.mar-y50{margin-right: 50rpx;}
|
|
|
|
/* 上下左右---内边距 */
|
|
.pad10{padding: 10rpx;}
|
|
.pad20{padding: 20rpx;}
|
|
.pad25{padding: 25rpx;}
|
|
.pad30{padding: 30rpx;}
|
|
.pad32{padding: 32rpx;}
|
|
.pad36{padding: 36rpx;}
|
|
.pad40{padding: 40rpx;}
|
|
.pad50{padding: 50rpx;}
|
|
|
|
/* 上下---内边距 */
|
|
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
|
|
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
|
|
.pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;}
|
|
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
|
|
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
|
|
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
|
|
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
|
|
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
|
|
|
|
/* 左右---内边距 */
|
|
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
|
|
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
|
|
.pad-zy25{padding-left: 25rpx;padding-right: 25rpx;}
|
|
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
|
|
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
|
|
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
|
|
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
|
|
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
|
|
|
|
/* 上---内边距 */
|
|
.pad-s10{padding-top: 10rpx;}
|
|
.pad-s20{padding-top: 20rpx;}
|
|
.pad-s25{padding-top: 25rpx;}
|
|
.pad-s28{padding-top: 28rpx;}
|
|
.pad-s30{padding-top: 30rpx;}
|
|
.pad-s32{padding-top: 32rpx;}
|
|
.pad-s36{padding-top: 36rpx;}
|
|
.pad-s40{padding-top: 40rpx;}
|
|
.pad-s50{padding-top: 50rpx;}
|
|
.pad-s60{padding-top: 60rpx;}
|
|
.pad-s70{padding-top: 70rpx;}
|
|
.pad-s80{padding-top: 80rpx;}
|
|
.pad-s90{padding-top: 90rpx;}
|
|
.pad-s100{padding-top: 100rpx;}
|
|
.pad-s110{padding-top: 110rpx;}
|
|
.pad-s120{padding-top: 120rpx;}
|
|
.pad-s140{padding-top: 140rpx;}
|
|
.pad-s160{padding-top: 160rpx;}
|
|
.pad-s180{padding-top: 180rpx;}
|
|
|
|
/* 下---内边距 */
|
|
.pad-x10{padding-bottom: 10rpx;}
|
|
.pad-x20{padding-bottom: 20rpx;}
|
|
.pad-x25{padding-bottom: 25rpx;}
|
|
.pad-x30{padding-bottom: 30rpx;}
|
|
.pad-x32{padding-bottom: 32rpx;}
|
|
.pad-x36{padding-bottom: 36rpx;}
|
|
.pad-x40{padding-bottom: 40rpx;}
|
|
.pad-x50{padding-bottom: 50rpx;}
|
|
.pad-x120{padding-bottom: 120rpx;}
|
|
.pad-x140{padding-bottom: 140rpx;}
|
|
.pad-x160{padding-bottom: 160rpx;}
|
|
.pad-x180{padding-bottom: 180rpx;}
|
|
.pad-x260{padding-bottom: 260rpx;}
|
|
|
|
/* 左---内边距 */
|
|
.pad-z10{padding-left: 10rpx;}
|
|
.pad-z20{padding-left: 20rpx;}
|
|
.pad-z25{padding-left: 25rpx;}
|
|
.pad-z30{padding-left: 30rpx;}
|
|
.pad-z32{padding-left: 32rpx;}
|
|
.pad-z36{padding-left: 36rpx;}
|
|
.pad-z40{padding-left: 40rpx;}
|
|
.pad-z50{padding-left: 50rpx;}
|
|
|
|
/* 右---内边距 */
|
|
.pad-y10{padding-right: 10rpx;}
|
|
.pad-y20{padding-right: 20rpx;}
|
|
.pad-y25{padding-right: 25rpx;}
|
|
.pad-y30{padding-right: 30rpx;}
|
|
.pad-y32{padding-right: 32rpx;}
|
|
.pad-y36{padding-right: 36rpx;}
|
|
.pad-y40{padding-right: 40rpx;}
|
|
.pad-y50{padding-right: 50rpx;}
|
|
.pad-sx27-zy20{padding: 27rpx 20rpx;}
|
|
scroll-view ::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 圆圈中间一个原点 start */
|
|
.mo-item {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 100%;
|
|
border: 2rpx solid #000000;
|
|
box-sizing: border-box;
|
|
}
|
|
.active-item{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2rpx solid #FF0000;
|
|
}
|
|
.active-item::before{
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 100%;
|
|
background-color: #FF0000;
|
|
}
|
|
|
|
/* 边距 */
|
|
.pad-b140{padding-bottom: 140rpx;}
|
|
.pad-b150{padding-bottom: 150rpx;}
|
|
|
|
/* 项目基础样式 end */
|
|
|
|
/* 项目页面样式 start */
|
|
page {background-color: #eaeaea;}
|
|
|
|
/* 登录页 staat */
|
|
.login-header {
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-top: 0;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 40%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.infoImg {
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
border-radius: 100%;
|
|
box-shadow: 0px 0px 20px rgba(0,0,0,.3);
|
|
}
|
|
.logo-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
margin-top: 30rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
.login-footer {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 120rpx;
|
|
}
|
|
.login-btn {
|
|
width: 70%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin: 0 auto;
|
|
box-shadow: 0rpx 0rpx 10rpx rgba(0,115,188, .5);
|
|
}
|
|
.login-txt {
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #333333;
|
|
margin-top: 30rpx;
|
|
}
|
|
.agreement-box{
|
|
margin-top: 20rpx;
|
|
}
|
|
.agreement{
|
|
color: #0073bc;
|
|
}
|
|
|
|
/* 首页 start */
|
|
|
|
/* 搜索 */
|
|
.search-bg {
|
|
padding: 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.search {
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 84rpx;
|
|
background-color: #eaeaea;
|
|
border-radius: 10rpx;
|
|
}
|
|
.search .search-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
.search .search-input {
|
|
width: calc(100% - 226rpx);
|
|
height: 100%;
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.search-line {
|
|
width: 2rpx;
|
|
height: 46rpx;
|
|
background-color: #a8a8a8;
|
|
}
|
|
.search-btn {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 110rpx;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
/* 历史搜索 */
|
|
.search-history{
|
|
padding: 0 30rpx 28rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.search-history .title{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #666666;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.search-history .title>image{
|
|
width: 27rpx;
|
|
height: 31rpx;
|
|
}
|
|
.search-history .item{
|
|
background-color: #eaeaea;
|
|
max-width: 25%;
|
|
line-height: 50rpx;
|
|
padding: 0 28rpx;
|
|
margin-right: 12rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
/* 关键词 */
|
|
.search-keyword{
|
|
padding: 25rpx 30rpx 0;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #666666;
|
|
}
|
|
.search-keyword>text:first-child{
|
|
margin-right: 24rpx;
|
|
}
|
|
.search-keyword>text:last-child{
|
|
margin: 0 6rpx;
|
|
}
|
|
|
|
/* 推荐列表 */
|
|
.flag-list {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 34rpx 30rpx;
|
|
}
|
|
.flag-item {
|
|
box-sizing: border-box;
|
|
width: calc(50% - 16rpx);
|
|
padding: 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.flag-item .flag-img {
|
|
height: 174rpx;
|
|
overflow: hidden;
|
|
}
|
|
.flag-item .flag-img image {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
.flag-item .flag-txt {
|
|
font-size: 28rpx;
|
|
line-height: 1.2;
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
|
|
/* 产品展示 */
|
|
.index-product-list {
|
|
background-color: #FFFFFF;
|
|
padding: 0 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.product-list-title {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
line-height: 2.5;
|
|
padding: 40rpx 0 56rpx;
|
|
}
|
|
.product-list-title .line {
|
|
width: 75rpx;
|
|
height: 5rpx;
|
|
background-color: #000000;
|
|
border-radius: 3rpx;
|
|
}
|
|
.product-list-title image {
|
|
width: 19rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
/* 疑难解答&行业资讯 */
|
|
.index-news {
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx;
|
|
}
|
|
.more-txt {
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
padding: 40rpx 0 20rpx;
|
|
text-align: center;
|
|
color: #666666;
|
|
}
|
|
.more-txt.more-txt-other{
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
/* 资讯列表页 start */
|
|
.nav-list-bg{
|
|
background-color: #FFFFFF;
|
|
padding: 5rpx 30rpx 0;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 99;
|
|
overflow-x: auto;
|
|
}
|
|
.news-list-bg{
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
|
|
/* 分类列表 */
|
|
.company-top{
|
|
width: 100%;
|
|
height: 121rpx;
|
|
background-color: #eaeaea;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
.company{
|
|
width: 100%;
|
|
height: 76rpx;
|
|
padding: 20rpx 0 25rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 99;
|
|
}
|
|
.company input{
|
|
height: 76rpx;
|
|
margin: 0 30rpx;
|
|
padding: 0 25rpx;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
background-color: #FFFFFF;
|
|
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAYAAAD7PHgWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFGNzM1NjUxRjVCMzExRUNCNjZFOUJBRkE3MzZFMUIxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFGNzM1NjUyRjVCMzExRUNCNjZFOUJBRkE3MzZFMUIxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUY3MzU2NEZGNUIzMTFFQ0I2NkU5QkFGQTczNkUxQjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUY3MzU2NTBGNUIzMTFFQ0I2NkU5QkFGQTczNkUxQjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7QkWUpAAACSUlEQVR42uyXTUhUURiGr+NfukjxL1GojRa4UBARsRSj0E2EtQstoWQwCFyoGwV1lFYqKOQuo0IXLszQlYQxka7FhbUIEVqViFr+4E9a7xfvyOF6LzOOeucs7gvPPTNzj9dnzplzvnujvF7vsGEYNYaeGfbg8MPQNz9jcGgG4yAJ7GsiFgt+gdkYfjCr6xB6DM3jCrqCrmCQBLaZCyBOM7c9sCOCj0APJXXKDmgRwXqQoeHsXgSPRfAJaAKpmpW6FdAngt9Ag7uKXcEI74NO5BYoAtlgDXwBU2A90oL3QCfItzgncv3AF6kpbgfvbOQkyZT/EAnBh6aReQMqwWWQBxrBd567DSbtpjgXPGMtPjyBQBSYBmMW55IoFEgtGDH1+Qpe8hol4A64CybMgkOgLMxRegpS+KNXU88vIBmwkAtkm6O3DBJBm5WgfIurICEMwWn+E3Oq2P4BXUGusQVecRaLQRrL3JHgWzAK4sMQ/G3z+RW2UkZXQ7jODAUlOWZByS45q/xlGx1if7XfvhOreImtLMCsEPpXsD0Ai04ITiorvTdI33RQx9efzJXlvASHlMXzALTa9LsE/MoW1+3URr1LsUCeg498vJBNuhR0sB7nKTuC38laPMGV+YLvbxK7FIJq8N7JWjxIKb/N+Tnwmq/lkWOcksdG8AYfUvZOcB/p4f61GaSvnxSA66w88jcLyk3CklK3RfI+2/+CvXxoCifL3Fg3Qug7T6zSxRXfyfdyB1QOPssoZJ5iCjPO8GfiUwQl1+TwT4ABAGG4b4Ynm3YPAAAAAElFTkSuQmCC);
|
|
background-repeat: no-repeat;
|
|
background-position: calc(100% - 30rpx) center;
|
|
background-size: 40rpx 36rpx;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
}
|
|
.pull-all-bg{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0,0,0,.4);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
}
|
|
.company-list{
|
|
margin: 0 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.company-item{
|
|
padding: 0 40rpx;
|
|
font-size: 30rpx;
|
|
line-height: 84rpx;
|
|
color: #333;
|
|
}
|
|
.company-item.cur{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.cate-nav-bg{
|
|
box-sizing: border-box;
|
|
width: 160rpx;
|
|
padding: 121rpx 0 130rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
.cate-nav-bg.to-top{
|
|
padding-top: 20rpx;
|
|
}
|
|
.cate-nav{
|
|
box-sizing: border-box;
|
|
width: 160rpx;
|
|
height: 100%;
|
|
padding-top: 35rpx;
|
|
border-radius: 0 10rpx 0 0;
|
|
background: #FFFFFF;
|
|
overflow-y: auto;
|
|
}
|
|
.cate-nav-item{
|
|
line-height: 86rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
.cate-nav-item.active{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.shop-list-bg {
|
|
width: calc(100vw - 210rpx);
|
|
height: 100%;
|
|
margin-left: 180rpx;
|
|
margin-top: 121rpx;
|
|
}
|
|
.shop-list-bg.to-top{
|
|
margin-top: 20rpx;
|
|
}
|
|
.cate-nav::-webkit-scrollbar{
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.shop-list-bg .tips,
|
|
.cate-nothing-tips{
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 2;
|
|
text-align: center;
|
|
margin-top: 8rpx;
|
|
}
|
|
.shop-item{
|
|
width: calc(33.33% - 20rpx);
|
|
margin: 30rpx 30rpx 0 0;
|
|
}
|
|
.shop-list-bg .shop-item:nth-of-type(3n){
|
|
margin-right: 0;
|
|
}
|
|
.shop-list-bg .shop-item:nth-of-type(-n+3){
|
|
margin-top: 0;
|
|
}
|
|
.shop-item .img{
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 160rpx;
|
|
background-color: #FFFFFF;
|
|
border: 2rpx solid #d6d6d6;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.shop-item .img image{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.shop-item .txt{
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
color: #333333;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
/* 商品列表 */
|
|
.shop-nav{
|
|
width: 100%;
|
|
height: 76rpx;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 99;
|
|
}
|
|
.shop-nav .shop-sort,
|
|
.shop-nav .shop-cate{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50%;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
position: relative;
|
|
}
|
|
.shop-nav image{
|
|
width: 13rpx;
|
|
height: 25rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
.shop-cate-list,
|
|
.shop-sort-list{
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
border-top: 2rpx solid #eaeaea;
|
|
position: absolute;
|
|
top: 76rpx;
|
|
left: 0;
|
|
}
|
|
.shop-cate-list .shop-cate-item,
|
|
.shop-sort-list .shop-sort-item{
|
|
width: 100%;
|
|
padding: 0 75rpx;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 84rpx;
|
|
}
|
|
.shop-cate-list .shop-cate-item.cur,
|
|
.shop-sort-list .shop-sort-item.cur{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.shop-bg{
|
|
box-sizing: border-box;
|
|
padding: 76rpx 30rpx 0;
|
|
}
|
|
.shop-ul {
|
|
justify-content: space-between;
|
|
}
|
|
.shop-ul .shop-li{
|
|
width: calc(50% - 13rpx);
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
background-color: #FFFFFF;
|
|
margin-top: 30rpx;
|
|
}
|
|
.shop-ul .shop-li .img{
|
|
width: 100%;
|
|
height: 215rpx;
|
|
overflow: hidden;
|
|
}
|
|
.shop-ul .shop-li .img image{
|
|
width: 100%;
|
|
min-height: 215rpx;
|
|
}
|
|
.shop-ul .shop-li .txt{
|
|
padding: 22rpx 22rpx 0;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
/* 商品详情 */
|
|
.shop-summary{
|
|
padding: 0 30rpx 80rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.shop-title{
|
|
font-size: 36rpx;
|
|
line-height: 1.5;
|
|
color: #000;
|
|
text-align: justify;
|
|
padding-top: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
.shop-txt{
|
|
align-items: flex-end;
|
|
}
|
|
.shop-txt .left{
|
|
width: 50%;
|
|
}
|
|
.shop-customized{
|
|
display: inline-block;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
padding: 0 24rpx;
|
|
margin: 16rpx 0 12rpx -6rpx;
|
|
-webkit-transform: scale(.9);
|
|
transform: scale(.9);
|
|
}
|
|
.shop-pric{
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
line-height: 1.2;
|
|
color: #000000;
|
|
}
|
|
.shop-pric-vip{
|
|
font-size: 30rpx;
|
|
color: #0073bc;
|
|
line-height: 1.5;
|
|
margin-top: 10rpx;
|
|
}
|
|
.shop-txt .right{
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
width: 50%;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.collection-btn{
|
|
width: 60rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.collection-btn.active{
|
|
width: 74rpx;
|
|
}
|
|
.collection-btn image{
|
|
width: 45rpx;
|
|
height: 41rpx;
|
|
margin: 0 auto;
|
|
-webkit-filter: invert(100%) grayscale(100%);
|
|
-moz-filter: invert(100%) grayscale(100%);
|
|
-ms-filter: invert(100%) grayscale(100%);
|
|
-o-filter: invert(100%) grayscale(100%);
|
|
filter: invert(100%) grayscale(100%);
|
|
}
|
|
.collection-btn.active image{
|
|
-webkit-filter: invert(0) grayscale(0);
|
|
-moz-filter: invert(0) grayscale(0);
|
|
-ms-filter: invert(0) grayscale(0);
|
|
-o-filter: invert(0) grayscale(0);
|
|
filter: invert(0) grayscale(0);
|
|
}
|
|
.share-btn{
|
|
width: 60rpx;
|
|
position: relative;
|
|
}
|
|
.share-btn image{
|
|
width: 50rpx;
|
|
height: 41rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.collection-btn text,
|
|
.share-btn text{
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
color: #666666;
|
|
margin-top: 10rpx;
|
|
}
|
|
.share-btn>button{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
.specs-btn{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 86rpx;
|
|
padding: 0 20rpx;
|
|
margin-top: 40rpx;
|
|
border: 2rpx solid #999999;
|
|
}
|
|
.specs-btn text{
|
|
width: calc(100% - 92rpx);
|
|
font-size: 30rpx;
|
|
color: #999999;
|
|
}
|
|
.specs-btn image:first-child{
|
|
width: 33rpx;
|
|
height: 37rpx;
|
|
}
|
|
.specs-btn image:last-child{
|
|
width: 13rpx;
|
|
height: 26rpx;
|
|
}
|
|
.shop-detail{
|
|
padding: 0 30rpx;
|
|
}
|
|
.shop-detail-tab{
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 30rpx;
|
|
}
|
|
.shop-detail-tab .tab-btn{
|
|
width: 220rpx;
|
|
line-height: 66rpx;
|
|
margin: 0 25rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
.shop-detail-tab .tab-btn.cur{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.shop-detail-tab .tab-btn:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.shop-detail-tab .tab-btn:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.shop-detail-txt{
|
|
color: #8c8c9b;
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
}
|
|
.shop-detail-txt image{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.kit-shop-btns,
|
|
.shop-btns{
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx 30rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
}
|
|
.kit-shop-btns .btn,
|
|
.shop-btns .btn{
|
|
width: calc(50% - 10rpx);
|
|
border-radius: 10rpx;
|
|
font-size: 36rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: #000000;
|
|
background-color: #c9c9c9;
|
|
}
|
|
.shop-btns .btn-grey{
|
|
color: #000000 !important;
|
|
background-color: #c9c9c9 !important;
|
|
}
|
|
.kit-shop-btns .btn:first-child{
|
|
width: 100%;
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.shop-btns .btn:last-child{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.specs-detail-bg{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx;
|
|
border-radius: 30rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
.specs-detail{
|
|
width: 100%;
|
|
color: #000000;
|
|
position: relative;
|
|
}
|
|
.specs-detail .close-specs{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: -8rpx;
|
|
right: -14rpx;
|
|
}
|
|
.specs-detail .close-specs image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.specs-detail .price{
|
|
font-size: 36rpx;
|
|
line-height: 1.8;
|
|
text-align: center;
|
|
}
|
|
.specs-detail .price text{
|
|
font-size: 32rpx;
|
|
}
|
|
.specs-ul{
|
|
margin-top: 20rpx;
|
|
}
|
|
.specs-ul text{
|
|
font-size: 30rpx;
|
|
line-height: 1.8;
|
|
}
|
|
.specs-ul .specs-li{
|
|
align-items: center;
|
|
height: 106rpx;
|
|
padding: 0 40rpx;
|
|
border: 2rpx solid #d2d2d2;
|
|
margin-top: 14rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #666666;
|
|
}
|
|
.specs-ul .specs-li.checked{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
padding: 0 25rpx;
|
|
}
|
|
.specs-detail .specs-detail-btn{
|
|
width: 100%;
|
|
background-color: #0073bc;
|
|
border-radius: 10rpx;
|
|
margin: 50rpx 0 10rpx;
|
|
color: #FFFFFF;
|
|
font-size: 36rpx;
|
|
line-height: 98rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 套件列表 */
|
|
.kit-list .kit-item{
|
|
background-color: #FFFFFF;
|
|
margin-top: 30rpx;
|
|
padding: 25rpx 30rpx;
|
|
}
|
|
.kit-list .kit-item:first-child{
|
|
margin-top: 20rpx;
|
|
}
|
|
.kit-item .kit-title{
|
|
font-size: 30rpx;
|
|
line-height: 1.8;
|
|
color: #000000;
|
|
margin-top: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
.kit-item .kit-compose{
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #999999;
|
|
}
|
|
.kit-item .kit-img{
|
|
height: 450rpx;
|
|
border-radius: 10rpx;
|
|
margin: 22rpx 0;
|
|
overflow: hidden;
|
|
}
|
|
.kit-item .kit-img image{
|
|
width: 100%;
|
|
min-height: 450rpx;
|
|
}
|
|
.kit-item .compose-list-bg{
|
|
overflow-x: auto;
|
|
}
|
|
.kit-item .compose-list-bg::-webkit-scrollbar{
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.kit-item .compose-list{
|
|
width: auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.compose-list .compose-item{
|
|
width: 270rpx;
|
|
margin-right: 22rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.compose-list .compose-item:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.compose-list .compose-item image{
|
|
width: 100%;
|
|
min-height: 176rpx;
|
|
}
|
|
.compose-list .compose-item .compose-title{
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
margin-top: 16rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 套件简介 */
|
|
.kit-summary{
|
|
padding-bottom: 50rpx;
|
|
}
|
|
.shop-txt .kit-compose{
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #999999;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.kit-contain{
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
.kit-contain .contain-h2{
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
line-height: 1.5;
|
|
font-weight: bold;
|
|
margin: 30rpx 0 8rpx;
|
|
}
|
|
.kit-contain .contain-list{
|
|
justify-content: space-between;
|
|
}
|
|
.contain-list .contain-item{
|
|
width: calc(50% - 13rpx);
|
|
background-color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
margin-top: 30rpx;
|
|
overflow: hidden;
|
|
}
|
|
.contain-list .contain-item .contain-img{
|
|
height: 214rpx;
|
|
overflow: hidden;
|
|
}
|
|
.contain-list .contain-item .contain-img image{
|
|
width: 100%;
|
|
min-height: 214rpx;
|
|
}
|
|
.contain-list .contain-item .contain-title{
|
|
padding: 16rpx 22rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
line-height: 1.8;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* 新闻详情 */
|
|
.news-video-img{
|
|
height: 500rpx;
|
|
position: relative;
|
|
}
|
|
.news-video-img>image{
|
|
width: 100%;
|
|
min-height: 500rpx;
|
|
}
|
|
.news-video-btn{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.news-video-btn image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.news-video-content{
|
|
height: 100vh;
|
|
background-color: rgba(0,0,0,.4);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
}
|
|
video#my-video{
|
|
min-height: 400rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
z-index: 999;
|
|
}
|
|
.news-detail{
|
|
padding: 35rpx 30rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #8c8c9b;
|
|
}
|
|
.news-detail image{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.news-summary{
|
|
padding-bottom: 60rpx;
|
|
}
|
|
.news-txt{
|
|
margin-top: 40rpx;
|
|
}
|
|
.news-txt .news-author,
|
|
.news-txt .news-time{
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1.8;
|
|
}
|
|
.news-txt .news-author{
|
|
text-indent: 4rpx;
|
|
}
|
|
.news-txt .right{
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
/* 我的 */
|
|
.my-herder{
|
|
margin-bottom: 20rpx;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.my-portrait{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.my-portrait-img{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.my-portrait-img image{
|
|
width: 100%;
|
|
min-height: 220rpx;
|
|
}
|
|
.my-vip{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
box-shadow: 0 0 48rpx rgba(0,0,0,.52);
|
|
background-color: #FFFFFF;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 5rpx;
|
|
}
|
|
.my-vip image{
|
|
width: 36rpx;
|
|
height: 33rpx;
|
|
}
|
|
.my-nick-name{
|
|
font-size: 36rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
margin: 20rpx 0;
|
|
text-align: center;
|
|
}
|
|
.my-order{
|
|
flex-wrap: nowrap;
|
|
align-items: flex-end;
|
|
margin: 60rpx 0 10rpx;
|
|
}
|
|
.my-order .item{
|
|
width: 25%;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 1.8;
|
|
color: #000000;
|
|
}
|
|
.my-order .item>text{
|
|
color: #666666;
|
|
}
|
|
.my-content{
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx;
|
|
}
|
|
.my-content .item{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
height: 96rpx;
|
|
}
|
|
.my-content .item .left{
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
.my-content .item .img{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.my-content .item .title{
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.my-content .item .left .tips{
|
|
font-size: 24rpx;
|
|
color: #8c8c9b;
|
|
}
|
|
.my-content .item .more{
|
|
margin-left: 20rpx;
|
|
}
|
|
.my-content .item .more image{
|
|
width: 14rpx;
|
|
height: 26rpx;
|
|
}
|
|
.my-content .item .btn{
|
|
box-sizing: border-box;
|
|
width: 90rpx;
|
|
height: 40rpx;
|
|
background-color: #dedede;
|
|
border-radius: 20rpx;
|
|
padding: 2rpx;
|
|
}
|
|
.my-content .item .btn>view{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 100%;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.my-content .item .btn.show{
|
|
justify-content: flex-end;
|
|
background-color: #0073bc;
|
|
}
|
|
.my-content .item .btn.show>view{
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
/* 申请会员 */
|
|
.vip-box-bg{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 30rpx 80rpx 0;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
z-index: 999;
|
|
}
|
|
.vip-box{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
border-radius: 28rpx;
|
|
padding: 40rpx 60rpx;
|
|
position: relative;
|
|
}
|
|
.vip-box .vip-close{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: #d9d9d9;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: -30rpx;
|
|
right: -30rpx;
|
|
}
|
|
.vip-box .vip-close>text{
|
|
font-size: 30rpx;
|
|
-webkit-transform: scaleX(1.3);
|
|
transform: scaleX(1.3);
|
|
color: #FFFFFF;
|
|
}
|
|
.vip-box .title{
|
|
font-size: 32rpx;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
.vip-box .vip-item{
|
|
margin-top: 20rpx;
|
|
}
|
|
.vip-box .vip-item .tips{
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 1.5;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.vip-box .vip-item .tips>text{
|
|
color: #d50000;
|
|
margin-left: 4rpx;
|
|
}
|
|
.vip-box .input{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 86rpx;
|
|
border-bottom: 2rpx solid #c9c9c9;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.vip-box .btn{
|
|
width: 100%;
|
|
background-color: #0073bc;
|
|
border-radius: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
margin-top: 70rpx;
|
|
}
|
|
.vip-box .vip-btns .btn:first-child{
|
|
background-color: #c9c9c9;
|
|
color: #000000;
|
|
}
|
|
|
|
/* 个人中心 */
|
|
.ucenter{
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.ucenter .item{
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
}
|
|
.ucenter .item .title{
|
|
width: 170rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.ucenter .item .more{
|
|
margin-left: 20rpx;
|
|
}
|
|
.ucenter .item .more image{
|
|
width: 14rpx;
|
|
height: 26rpx;
|
|
}
|
|
.ucenter .item .msg{
|
|
width: calc(100% - 204rpx);
|
|
height: 60rpx;
|
|
font-size: 24rpx;
|
|
color: #8c8c9b;
|
|
text-align: right;
|
|
}
|
|
.ucenter .item:nth-of-type(1){
|
|
justify-content: space-between;
|
|
height: 146rpx;
|
|
padding: 5rpx 0;
|
|
}
|
|
.ucenter .item .img{
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 100%;
|
|
margin-right: 34rpx;
|
|
overflow: hidden;
|
|
}
|
|
.ucenter .item .img image{
|
|
width: 136rpx;
|
|
min-height: 136rpx;
|
|
}
|
|
.ucenter .get-phone-btn{
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
/* 修改弹窗 */
|
|
.edit-box-bg{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 30rpx 45rpx 0;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
z-index: 999;
|
|
}
|
|
.edit-box{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
border-radius: 28rpx;
|
|
padding: 58rpx;
|
|
position: relative
|
|
}
|
|
.edit-box .edit-close{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: #d9d9d9;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: -30rpx;
|
|
right: -30rpx;
|
|
}
|
|
.edit-box .edit-close>text{
|
|
font-size: 30rpx;
|
|
-webkit-transform: scaleX(1.3);
|
|
transform: scaleX(1.3);
|
|
color: #FFFFFF;
|
|
}
|
|
.edit-box .title{
|
|
font-size: 32rpx;
|
|
line-height: 1.5;
|
|
margin-bottom: 24rpx;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
.edit-box .subtitle{
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
margin-bottom: 20rpx;
|
|
color: #666666;
|
|
}
|
|
.edit-box .subtitle>text{
|
|
color: #d50000;
|
|
margin-left: 4rpx;
|
|
}
|
|
.edit-box .input,
|
|
.edit-box .textarea{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 86rpx;
|
|
border-bottom: 2rpx solid #c9c9c9;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.edit-box .textarea{
|
|
height: 150rpx;
|
|
padding: 10rpx 0;
|
|
line-height: 1.8;
|
|
}
|
|
.edit-box .btn{
|
|
width: 100%;
|
|
background-color: #0073bc;
|
|
border-radius: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
margin-top: 70rpx;
|
|
}
|
|
|
|
/* 免责声明 */
|
|
.disclaimers{
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.disclaimers-title{
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
margin-bottom: 30rpx;
|
|
text-align: center;
|
|
}
|
|
.disclaimers-txt{
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #8c8c9b;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* 关于我们 */
|
|
.about-bg{
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.about-map{
|
|
border-radius: 30rpx;
|
|
border: 2rpx solid #8c8c9b;
|
|
overflow: hidden;
|
|
}
|
|
.navigation-btn{
|
|
background-color: #0073bc;
|
|
border-radius: 30rpx;
|
|
line-height: 98rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
}
|
|
.about-title{
|
|
font-size: 48rpx;
|
|
line-height: 1.5;
|
|
margin: 70rpx 0;
|
|
color: #000000;
|
|
}
|
|
.about-txt{
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
color: #8c8c9b;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* 订单管理 */
|
|
.order-nav{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15rpx 30rpx;
|
|
background-color: #FFFFFF;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 99;
|
|
}
|
|
.order-nav .item{
|
|
padding: 0 40rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 30rpx;
|
|
color: #8c8c9b;
|
|
line-height: 64rpx;
|
|
}
|
|
.order-nav .item.cur{
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.order-list{
|
|
padding: 15rpx 30rpx 20rpx;
|
|
}
|
|
.order-item{
|
|
padding: 28rpx 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
.order-code{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0rpx 30rpx 20rpx;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
}
|
|
.order-code .status{
|
|
color: #0073bc;
|
|
}
|
|
.order-code .status.cur{
|
|
color: #999999;
|
|
}
|
|
.order-item .item-bg{
|
|
padding: 0 15rpx;
|
|
/* margin-top: 18rpx; */
|
|
}
|
|
.order-item .item{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
}
|
|
.order-item .item .img{
|
|
width: 230rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.order-item .item .img image{
|
|
width: 100%;
|
|
min-height: 150rpx;
|
|
}
|
|
.order-item .item .txt{
|
|
width: calc(100% - 255rpx);
|
|
}
|
|
.order-item .item .title{
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
}
|
|
.order-item .item .specs{
|
|
min-height: 60rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
margin: 3rpx 0;
|
|
color: #8c8c9b;
|
|
}
|
|
.order-item .item .price{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
color: #8c8c9b;
|
|
}
|
|
.order-item .item .price>text{
|
|
font-size: 30rpx;
|
|
color: #f81c1c;
|
|
}
|
|
.order-item .item .price>view{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.order-item .item .price>view text{
|
|
margin-right: 4rpx;
|
|
}
|
|
.order-item .total-price{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
.order-item .total-price>text{
|
|
font-size: 30rpx;
|
|
color: #f81c1c;
|
|
font-weight: bold;
|
|
}
|
|
.order-item .total-price .btn{
|
|
box-sizing: border-box;
|
|
width: 150rpx;
|
|
border: 2rpx solid #d3d3d3;
|
|
border-radius: 20rpx;
|
|
font-size: 30rpx;
|
|
color: #8c8c9b;
|
|
line-height: 64rpx;
|
|
text-align: center;
|
|
}
|
|
.order-item .total-price .btn.cur{
|
|
border: 2rpx solid #0073bc;
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 订单详情 */
|
|
.order-info-bg{
|
|
padding: 0 30rpx;
|
|
margin-top: 20rpx
|
|
}
|
|
.order-info{
|
|
padding: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
}
|
|
.order-info>view{
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 70rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.order-info>view text:first-child{
|
|
width: 140rpx;
|
|
}
|
|
.order-info>view text:last-child{
|
|
width: calc(100% - 140rpx);
|
|
text-align: right;
|
|
}
|
|
.order-information{
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
padding: 0 20rpx;
|
|
}
|
|
.order-item .total-price-detail{
|
|
border-top: 2rpx solid #eaeaea;
|
|
margin-top: 0;
|
|
}
|
|
.order-item .total-price-detail>text{
|
|
width: 100%;
|
|
text-align: right;
|
|
margin-top: 30rpx;
|
|
}
|
|
.order-item-detail{
|
|
margin-top: 10rpx;
|
|
}
|
|
.order-item-detail .item:nth-last-of-type(1){
|
|
border-bottom: 0;
|
|
}
|
|
.order-btns{
|
|
padding: 20rpx 50rpx;
|
|
}
|
|
.order-btns .btn{
|
|
width: 100%;
|
|
}
|
|
.contact-info-bg{
|
|
padding: 0 30rpx;
|
|
margin-top: 20rpx
|
|
}
|
|
.contact-info{
|
|
padding: 25rpx 35rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
}
|
|
.contact-info .title{
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
color: #000000;
|
|
}
|
|
.contact-info .name{
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.contact-info .name>text:first-child{
|
|
margin-right: 18rpx;
|
|
}
|
|
.contact-info .item{
|
|
font-size: 24rpx;
|
|
line-height: 2;
|
|
color: #8c8c9b;
|
|
}
|
|
|
|
/* 商家二维码 */
|
|
.customer-all-bg{
|
|
box-sizing: border-box;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
background-color: rgba(0,0,0,.86);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
}
|
|
.customer-txt{
|
|
padding: 86rpx 34rpx 60rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
margin-top: 136rpx;
|
|
}
|
|
.customer-txt>image{
|
|
display: block;
|
|
width: 338rpx;
|
|
height: 338rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.customer-txt>text{
|
|
display: block;
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
text-align: center;
|
|
margin: 42rpx 0 70rpx;
|
|
}
|
|
.customer-txt>.btn{
|
|
border-radius: 30rpx;
|
|
background-color: #0073bc;
|
|
font-size: 36rpx;
|
|
line-height: 98rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 提交订单 */
|
|
.settlement-content{
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
.settlement-title{
|
|
font-size: 38rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
margin: 40rpx 0 15rpx;
|
|
}
|
|
.settlement-tips{
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
color: #000000;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.settlement-item {
|
|
margin-top: 30rpx;
|
|
}
|
|
.settlement-item .name{
|
|
font-size: 24rpx;
|
|
line-height: 2;
|
|
color: #999;
|
|
}
|
|
.settlement-item .txt{
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
padding-bottom: 10rpx;
|
|
border-bottom: 2rpx solid #000000;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.settlement-item .txt>text{
|
|
width: 136rpx;
|
|
}
|
|
.settlement-item .txt>input{
|
|
width: calc(100% - 136rpx);
|
|
}
|
|
.settlement-btn{
|
|
box-sizing: border-box;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 130rpx;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
.settlement-btn .btn{
|
|
width: calc(100% - 130rpx);
|
|
background-color: #0073bc;
|
|
border-radius: 30rpx;
|
|
line-height: 98rpx;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 提交成功 */
|
|
.finish-content{
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
.finish-img{
|
|
box-sizing: border-box;
|
|
width: 314rpx;
|
|
height: 314rpx;
|
|
padding: 30rpx;
|
|
background-color: #FFFFFF;
|
|
margin: 50rpx auto;
|
|
}
|
|
.finish-img>image{
|
|
width: 254rpx;
|
|
height: 254rpx;
|
|
}
|
|
.finish-code{
|
|
font-size: 48rpx;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
.finish-title{
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
color: #0c0c0c;
|
|
text-align: center;
|
|
margin: 40rpx 0 34rpx;
|
|
}
|
|
.finish-tips{
|
|
font-size: 30rpx;
|
|
line-height: 1.8;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
.finish-content .cope-btn{
|
|
width: calc(100% - 48rpx);
|
|
line-height: 98rpx;
|
|
background-color: #0073bc;
|
|
border-radius: 30rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin: 60rpx auto 0;
|
|
}
|
|
.finish-content .shoping-btn{
|
|
width: calc(100% - 48rpx);
|
|
line-height: 94rpx;
|
|
border: 2rpx solid #000000;
|
|
border-radius: 30rpx;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
margin: 50rpx auto 0;
|
|
}
|
|
|
|
/* 项目页面样式 end */
|
|
|
|
/* 动画样式 start */
|
|
@charset "UTF-8";
|
|
|
|
/*!
|
|
Animate.css - http://daneden.me/animate
|
|
Licensed under the MIT license
|
|
|
|
Copyright (c) 2013 Daniel Eden
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
|
|
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
|
|
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
|
|
@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
|
|
@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
|
|
.bounce{-webkit-animation-name:bounce;animation-name:bounce}
|
|
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
|
|
@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
|
|
.flash{-webkit-animation-name:flash;animation-name:flash}
|
|
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
|
|
@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
|
|
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
|
|
@-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}
|
|
@keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}
|
|
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}
|
|
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}
|
|
@keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}
|
|
.shake{-webkit-animation-name:shake;animation-name:shake}
|
|
@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
|
|
@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
|
|
.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
|
|
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}
|
|
@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}
|
|
.tada{-webkit-animation-name:tada;animation-name:tada}
|
|
@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}
|
|
@keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}
|
|
.wobble{-webkit-animation-name:wobble;animation-name:wobble}
|
|
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
|
|
@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
|
|
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
|
|
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
|
|
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
|
|
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
|
|
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}
|
|
@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}
|
|
@keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}
|
|
.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}
|
|
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
|
|
@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
|
|
@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}
|
|
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}
|
|
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
|
|
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
|
|
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
|
|
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
|
|
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
|
|
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
|
|
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
|
|
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
|
|
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
|
|
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
|
|
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
|
|
@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
|
|
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
|
|
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
|
|
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}
|
|
@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}
|
|
.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}
|
|
@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}
|
|
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}
|
|
@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}
|
|
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}
|
|
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}
|
|
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}
|
|
@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}
|
|
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
|
|
@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}
|
|
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}
|
|
@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}
|
|
.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
|
|
@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}
|
|
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
|
|
@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
|
|
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}
|
|
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}
|
|
@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}
|
|
.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}
|
|
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}
|
|
@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}
|
|
.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}
|
|
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}
|
|
@keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}
|
|
.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}
|
|
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}
|
|
@keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}
|
|
.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}
|
|
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}
|
|
@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}
|
|
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
|
|
@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}
|
|
@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}
|
|
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
|
|
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
@keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}
|
|
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}
|
|
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}
|
|
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
|
|
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}
|
|
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
|
|
@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}
|
|
@keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}
|
|
.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}
|
|
@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
|
|
@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
|
|
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}
|
|
@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
|
|
@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
|
|
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}
|
|
@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
|
|
@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}
|
|
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}
|
|
@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
|
|
@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}
|
|
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}
|
|
@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}
|
|
@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}
|
|
@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
|
|
.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}
|
|
@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}
|
|
.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}
|
|
@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}
|
|
.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}
|
|
@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}
|
|
.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
|
|
@-webkit-keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
@keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
|
|
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}
|
|
@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
@keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}
|
|
.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}
|
|
@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}
|
|
@keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}
|
|
.hinge{-webkit-animation-name:hinge;animation-name:hinge}
|
|
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}
|
|
@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}
|
|
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
|
|
@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}
|
|
@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}
|
|
.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}
|
|
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}
|
|
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}
|
|
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
|
|
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
|
|
@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
|
|
@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}
|
|
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
|
|
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}
|
|
@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}
|
|
@keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}
|
|
.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}
|
|
@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}
|
|
@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}
|
|
.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}
|
|
@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}
|
|
@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}
|
|
.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}
|
|
@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}
|
|
@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}
|
|
.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}
|
|
@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}
|
|
@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}
|
|
.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
|
|
|
|
/* 动画样式 end */
|
|
.loading-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding-top: 20px;
|
|
font-size: 30px;
|
|
color: rgba(253, 82, 75, 1);
|
|
vertical-align: top;
|
|
transition: .3s color, .3s border;
|
|
}
|
|
|
|
/* .loading-box:hover {
|
|
color: #d60b52;
|
|
font-size: 0;
|
|
padding: 0;
|
|
border-width: 3px;
|
|
line-height: 200px;
|
|
}
|
|
.loading-box:hover [class*="loader-"] {
|
|
font-size: 70px;
|
|
line-height: 200px;
|
|
} */
|
|
[class*="loader-"] {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
}
|
|
.loader-01 {
|
|
border: .2em dotted currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader-01 linear infinite;
|
|
animation: 1s loader-01 linear infinite;
|
|
}
|
|
@-webkit-keyframes loader-01 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-01 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-02 {
|
|
border: .2em solid transparent;
|
|
border-left-color: currentcolor;
|
|
border-right-color: currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader-02 linear infinite;
|
|
animation: 1s loader-02 linear infinite;
|
|
}
|
|
@-webkit-keyframes loader-02 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-02 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-03 {
|
|
border: .2em solid currentcolor;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader-03 linear infinite;
|
|
animation: 1s loader-03 linear infinite;
|
|
position: relative;
|
|
}
|
|
@-webkit-keyframes loader-03 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-03 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-04 {
|
|
border: 1px solid currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader-04 linear infinite;
|
|
animation: 1s loader-04 linear infinite;
|
|
position: relative;
|
|
}
|
|
.loader-04:before {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: -.2em;
|
|
left: 50%;
|
|
border: .2em solid currentcolor;
|
|
border-radius: 50%;
|
|
}
|
|
@-webkit-keyframes loader-04 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-04 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-05 {
|
|
border: .2em solid transparent;
|
|
border-top-color: currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader-05 linear infinite;
|
|
animation: 1s loader-05 linear infinite;
|
|
position: relative;
|
|
}
|
|
.loader-05:before {
|
|
content: '';
|
|
display: block;
|
|
width: inherit;
|
|
height: inherit;
|
|
position: absolute;
|
|
top: -.2em;
|
|
left: -.2em;
|
|
border: .2em solid currentcolor;
|
|
border-radius: 50%;
|
|
opacity: .5;
|
|
}
|
|
@-webkit-keyframes loader-05 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-05 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-06 {
|
|
border: .2em solid currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: loader-06 1s ease-out infinite;
|
|
animation: loader-06 1s ease-out infinite;
|
|
}
|
|
@-webkit-keyframes loader-06 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes loader-06 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.loader-07 {
|
|
border: 0 solid transparent;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
.loader-07:before,
|
|
.loader-07:after {
|
|
content: '';
|
|
border: .2em solid currentcolor;
|
|
border-radius: 50%;
|
|
width: inherit;
|
|
height: inherit;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: loader-07 1s linear infinite;
|
|
animation: loader-07 1s linear infinite;
|
|
opacity: 0;
|
|
}
|
|
.loader-07:before {
|
|
-webkit-animation-delay: 1s;
|
|
animation-delay: 1s;
|
|
}
|
|
.loader-07:after {
|
|
-webkit-animation-delay: .5s;
|
|
animation-delay: .5s;
|
|
}
|
|
@-webkit-keyframes loader-07 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes loader-07 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.loader-08 {
|
|
position: relative;
|
|
}
|
|
.loader-08:before,
|
|
.loader-08:after {
|
|
content: '';
|
|
width: inherit;
|
|
height: inherit;
|
|
border-radius: 50%;
|
|
background-color: currentcolor;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: loader-08 2.0s infinite ease-in-out;
|
|
animation: loader-08 2.0s infinite ease-in-out;
|
|
}
|
|
.loader-08:after {
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s;
|
|
}
|
|
@-webkit-keyframes loader-08 {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes loader-08 {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.loader-09 {
|
|
background-color: currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: loader-09 1.0s infinite ease-in-out;
|
|
animation: loader-09 1.0s infinite ease-in-out;
|
|
}
|
|
@-webkit-keyframes loader-09 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes loader-09 {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.loader-10 {
|
|
position: relative;
|
|
-webkit-animation: loader-10-1 2.0s infinite linear;
|
|
animation: loader-10-1 2.0s infinite linear;
|
|
}
|
|
.loader-10:before,
|
|
.loader-10:after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border: .5em solid currentcolor;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
-webkit-animation: loader-10-2 2s infinite ease-in-out;
|
|
animation: loader-10-2 2s infinite ease-in-out;
|
|
}
|
|
.loader-10:before {
|
|
top: 0;
|
|
left: 50%;
|
|
}
|
|
.loader-10:after {
|
|
bottom: 0;
|
|
right: 50%;
|
|
-webkit-animation-delay: -1s;
|
|
animation-delay: -1s;
|
|
}
|
|
@-webkit-keyframes loader-10-1 {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-10-1 {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes loader-10-2 {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes loader-10-2 {
|
|
0%,
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.loader-11 {
|
|
background-color: currentcolor;
|
|
-webkit-animation: loader-11 1.2s infinite ease-in-out;
|
|
animation: loader-11 1.2s infinite ease-in-out;
|
|
}
|
|
@-webkit-keyframes loader-11 {
|
|
0% {
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|
|
@keyframes loader-11 {
|
|
0% {
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|
|
.loader-12 {
|
|
position: relative;
|
|
}
|
|
.loader-12:before,
|
|
.loader-12:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
background-color: currentcolor;
|
|
left: 50%;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 50%;
|
|
box-shadow: -.5em 0 0 currentcolor;
|
|
-webkit-animation: loader-12 1s linear infinite;
|
|
animation: loader-12 1s linear infinite;
|
|
}
|
|
.loader-12:after {
|
|
top: 50%;
|
|
bottom: 0;
|
|
-webkit-animation-delay: .25s;
|
|
animation-delay: .25s;
|
|
}
|
|
@-webkit-keyframes loader-12 {
|
|
0%,
|
|
100% {
|
|
box-shadow: -.5em 0 0 transparent;
|
|
background-color: currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: -.5em 0 0 currentcolor;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
@keyframes loader-12 {
|
|
0%,
|
|
100% {
|
|
box-shadow: -.5em 0 0 transparent;
|
|
background-color: currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: -.5em 0 0 currentcolor;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.loader-13:before,
|
|
.loader-13:after,
|
|
.loader-13 {
|
|
border-radius: 50%;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation: loader-13 1.8s infinite ease-in-out;
|
|
animation: loader-13 1.8s infinite ease-in-out;
|
|
}
|
|
.loader-13 {
|
|
color: currentcolor;
|
|
position: relative;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
top: -1em;
|
|
}
|
|
.loader-13:before {
|
|
right: 100%;
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s;
|
|
}
|
|
.loader-13:after {
|
|
left: 100%;
|
|
}
|
|
.loader-13:before,
|
|
.loader-13:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
@-webkit-keyframes loader-13 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 1em 0 -1em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 1em 0 -.2em;
|
|
}
|
|
}
|
|
@keyframes loader-13 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 1em 0 -1em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 1em 0 -.2em;
|
|
}
|
|
}
|
|
.loader-14 {
|
|
border-radius: 50%;
|
|
box-shadow: 0 1em 0 -.2em currentcolor;
|
|
position: relative;
|
|
-webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
|
|
animation: loader-14 0.8s ease-in-out alternate infinite;
|
|
-webkit-animation-delay: 0.32s;
|
|
animation-delay: 0.32s;
|
|
top: -1em;
|
|
}
|
|
.loader-14:after,
|
|
.loader-14:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: inherit;
|
|
height: inherit;
|
|
border-radius: inherit;
|
|
box-shadow: inherit;
|
|
-webkit-animation: inherit;
|
|
animation: inherit;
|
|
}
|
|
.loader-14:before {
|
|
left: -1em;
|
|
-webkit-animation-delay: 0.48s;
|
|
animation-delay: 0.48s;
|
|
}
|
|
.loader-14:after {
|
|
right: -1em;
|
|
-webkit-animation-delay: 0.16s;
|
|
animation-delay: 0.16s;
|
|
}
|
|
@-webkit-keyframes loader-14 {
|
|
0% {
|
|
box-shadow: 0 2em 0 -.2em currentcolor;
|
|
}
|
|
100% {
|
|
box-shadow: 0 1em 0 -.2em currentcolor;
|
|
}
|
|
}
|
|
@keyframes loader-14 {
|
|
0% {
|
|
box-shadow: 0 2em 0 -.2em currentcolor;
|
|
}
|
|
100% {
|
|
box-shadow: 0 1em 0 -.2em currentcolor;
|
|
}
|
|
}
|
|
.loader-15 {
|
|
background: currentcolor;
|
|
position: relative;
|
|
-webkit-animation: loader-15 1s ease-in-out infinite;
|
|
animation: loader-15 1s ease-in-out infinite;
|
|
-webkit-animation-delay: 0.4s;
|
|
animation-delay: 0.4s;
|
|
width: .25em;
|
|
height: .5em;
|
|
}
|
|
.loader-15:after,
|
|
.loader-15:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: inherit;
|
|
height: inherit;
|
|
background: inherit;
|
|
-webkit-animation: inherit;
|
|
animation: inherit;
|
|
}
|
|
.loader-15:before {
|
|
right: .5em;
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s;
|
|
}
|
|
.loader-15:after {
|
|
left: .5em;
|
|
-webkit-animation-delay: 0.6s;
|
|
animation-delay: 0.6s;
|
|
}
|
|
@-webkit-keyframes loader-15 {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
|
|
}
|
|
}
|
|
@keyframes loader-15 {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
|
|
}
|
|
}
|
|
.loader-16 {
|
|
-webkit-transform: rotateZ(45deg);
|
|
transform: rotateZ(45deg);
|
|
-webkit-perspective: 1000px;
|
|
perspective: 1000px;
|
|
border-radius: 50%;
|
|
}
|
|
.loader-16:before,
|
|
.loader-16:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: inherit;
|
|
height: inherit;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s spin linear infinite;
|
|
animation: 1s spin linear infinite;
|
|
}
|
|
.loader-16:before {
|
|
-webkit-transform: rotateX(70deg);
|
|
transform: rotateX(70deg);
|
|
}
|
|
.loader-16:after {
|
|
-webkit-transform: rotateY(70deg);
|
|
transform: rotateY(70deg);
|
|
-webkit-animation-delay: .4s;
|
|
animation-delay: .4s;
|
|
}
|
|
@-webkit-keyframes rotate {
|
|
0% {
|
|
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
|
transform: translate(-50%, -50%) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
|
|
transform: translate(-50%, -50%) rotateZ(360deg);
|
|
}
|
|
}
|
|
@keyframes rotate {
|
|
0% {
|
|
-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
|
transform: translate(-50%, -50%) rotateZ(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
|
|
transform: translate(-50%, -50%) rotateZ(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes rotateccw {
|
|
0% {
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
|
|
transform: translate(-50%, -50%) rotate(-360deg);
|
|
}
|
|
}
|
|
@keyframes rotateccw {
|
|
0% {
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
|
|
transform: translate(-50%, -50%) rotate(-360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes spin {
|
|
0%,
|
|
100% {
|
|
box-shadow: .2em 0px 0 0px currentcolor;
|
|
}
|
|
12% {
|
|
box-shadow: .2em .2em 0 0 currentcolor;
|
|
}
|
|
25% {
|
|
box-shadow: 0 .2em 0 0px currentcolor;
|
|
}
|
|
37% {
|
|
box-shadow: -.2em .2em 0 0 currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: -.2em 0 0 0 currentcolor;
|
|
}
|
|
62% {
|
|
box-shadow: -.2em -.2em 0 0 currentcolor;
|
|
}
|
|
75% {
|
|
box-shadow: 0px -.2em 0 0 currentcolor;
|
|
}
|
|
87% {
|
|
box-shadow: .2em -.2em 0 0 currentcolor;
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0%,
|
|
100% {
|
|
box-shadow: .2em 0px 0 0px currentcolor;
|
|
}
|
|
12% {
|
|
box-shadow: .2em .2em 0 0 currentcolor;
|
|
}
|
|
25% {
|
|
box-shadow: 0 .2em 0 0px currentcolor;
|
|
}
|
|
37% {
|
|
box-shadow: -.2em .2em 0 0 currentcolor;
|
|
}
|
|
50% {
|
|
box-shadow: -.2em 0 0 0 currentcolor;
|
|
}
|
|
62% {
|
|
box-shadow: -.2em -.2em 0 0 currentcolor;
|
|
}
|
|
75% {
|
|
box-shadow: 0px -.2em 0 0 currentcolor;
|
|
}
|
|
87% {
|
|
box-shadow: .2em -.2em 0 0 currentcolor;
|
|
}
|
|
}
|
|
.loader-17 {
|
|
position: relative;
|
|
background-color: currentcolor;
|
|
border-radius: 50%;
|
|
}
|
|
.loader-17:after,
|
|
.loader-17:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: .25em;
|
|
height: .25em;
|
|
border-radius: 50%;
|
|
opacity: .8;
|
|
}
|
|
.loader-17:after {
|
|
left: -.5em;
|
|
top: -.25em;
|
|
background-color: currentcolor;
|
|
-webkit-transform-origin: .75em 1em;
|
|
transform-origin: .75em 1em;
|
|
-webkit-animation: loader-17 1s linear infinite;
|
|
animation: loader-17 1s linear infinite;
|
|
opacity: .6;
|
|
}
|
|
.loader-17:before {
|
|
left: -1.25em;
|
|
top: -.75em;
|
|
background-color: currentcolor;
|
|
-webkit-transform-origin: 1.5em 1em;
|
|
transform-origin: 1.5em 1em;
|
|
-webkit-animation: loader-17 2s linear infinite;
|
|
animation: loader-17 2s linear infinite;
|
|
}
|
|
@-webkit-keyframes loader-17 {
|
|
0% {
|
|
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
|
|
transform: rotateZ(0deg) translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
|
|
transform: rotateZ(360deg) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes loader-17 {
|
|
0% {
|
|
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
|
|
transform: rotateZ(0deg) translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotateZ(360deg) translate3d(0, 0, 0);
|
|
transform: rotateZ(360deg) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
.loader-18 {
|
|
position: relative;
|
|
}
|
|
.loader-18:before,
|
|
.loader-18:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border: .1em solid transparent;
|
|
border-bottom-color: currentcolor;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: 1s loader-18 linear infinite;
|
|
animation: 1s loader-18 linear infinite;
|
|
}
|
|
.loader-18:before {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.loader-18:after {
|
|
width: .8em;
|
|
height: .8em;
|
|
top: .1em;
|
|
left: .1em;
|
|
-webkit-animation-direction: reverse;
|
|
animation-direction: reverse;
|
|
}
|
|
@-webkit-keyframes loader-18 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-18 {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.loader-19 {
|
|
border-top: .2em solid currentcolor;
|
|
border-right: .2em solid transparent;
|
|
-webkit-animation: loader-19 1s linear infinite;
|
|
animation: loader-19 1s linear infinite;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
}
|
|
@-webkit-keyframes loader-19 {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader-19 {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|