mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 07:12:00 +08:00
1812 lines
32 KiB
Vue
1812 lines
32 KiB
Vue
/**
|
||
* BaseCloud APP更新检测组件
|
||
v1.0.4
|
||
*/
|
||
<template>
|
||
<view class="base-cloud" style="display: inline-block;">
|
||
<view class="father" style="display: flex;align-items: center;" v-if="showVersion" @click.stop.prevent="checkVersion">
|
||
<text class="version-text">版本{{version}}</text>
|
||
<view class="abs top right" v-if="updateData.updated" style="top: -3px;right: -7px;">
|
||
<view class="w7 h7 rds redBg"></view>
|
||
</view>
|
||
</view>
|
||
<view class="fixed z20 wp6 flex ct plr50 pb50 " v-if="show">
|
||
<view class="w100p showIn" :animation="inData" style="max-width: 300px;">
|
||
<view class="rds12" :style="{'background-color':color}">
|
||
<view class="father">
|
||
<view class="h120 father hidden">
|
||
<view class="abs top left50p">
|
||
<image src="./static/cloudRight.png" mode="widthFix" class="w500 h120 animated goAway infinite"></image>
|
||
</view>
|
||
<view class="abs top right50p">
|
||
<image src="./static/cloudLeft.png" mode="widthFix" class="w500 h120 animated goAwayLeft infinite"></image>
|
||
</view>
|
||
<image class="abs top30 left30 w10 h10 animated infinite fadeOut slow" src="./static/star.png" mode="widthFix"></image>
|
||
<image class="abs top60 left80 w10 h10 animated infinite fadeOut slowest delay-1s" src="./static/star.png" mode="widthFix"></image>
|
||
<image class="abs top20 right20 w10 h10 animated infinite fadeOut slower delay-2s" src="./static/star.png" mode="widthFix"></image>
|
||
<image class="abs top20 right50 w30 h30 animated fadeOutRight infinite slowest" src="./static/smallCloud.png"
|
||
mode="widthFix"></image>
|
||
<image class="abs top30 left50 w30 h30 animated fadeOutRight infinite slow8 " src="./static/smallCloud.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="abs bottom animated bounceUp infinite">
|
||
<view class="animated goUp delay-06s">
|
||
<image src="./static/airship.png" mode="widthFix" class="w80 h75 center-block father z3"></image>
|
||
<view class="father" style="top: -5px;">
|
||
<image src="./static/shipAir.png" mode="widthFix" class="w40 h85 center-block animated infinite splashOut"></image>
|
||
<view class="abs">
|
||
<image src="./static/shipAir.png" mode="widthFix" class="w40 h85 center-block animated infinite splashOut delay-03s"></image>
|
||
</view>
|
||
<view class="abs">
|
||
<image src="./static/shipAir.png" mode="widthFix" class="w40 h85 center-block animated infinite splashOut delay-06s"></image>
|
||
</view>
|
||
<view class="abs bottom" style="bottom: -80upx;">
|
||
<image src="./static/shipGas.png" mode="widthFix" class="w40 h85 center-block animated infinite splash"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class=" whiteBg hidden plr20 father z3 rdsBr12 rdsBl12" :class="{'pb100':progress <= 0 || progress >= 100 || completed}">
|
||
<view class="ptb10 fz16 bold">
|
||
<block v-if="progress == 0">
|
||
{{title}} {{ updateData.version ? 'v' + updateData.version : ''}}
|
||
</block>
|
||
<block v-else-if="progress <=100 && !completed">
|
||
<view>
|
||
<view class="fz30 normal avanti pt15 text-center">
|
||
{{ progress }}
|
||
<text class="fz12 ml2">
|
||
%
|
||
</text>
|
||
</view>
|
||
|
||
<view class="text-center pb40 op8 gray fz14 normal">
|
||
版本更新中，不要离开...
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="text-center pt15" v-else-if="completed">
|
||
版本升级成功
|
||
<view class="pb40 op8 gray fz14 normal pt5">
|
||
更新已完成，请重启应用体验新版
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="scroll-view h60 autoY pb20" v-if="progress == 0">
|
||
<view class="column">
|
||
<text v-if="updateData.description.length === 0">
|
||
{{ defaultContent }}
|
||
</text>
|
||
<text v-for="(item, index) in updateData.description" :key="index">
|
||
{{ index + 1 }}.{{ item }}
|
||
</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="pd50 pt25" v-else-if="progress < 100">
|
||
<view class="grayBg bd rds23">
|
||
<view class="grayBg rds23">
|
||
<view class="ptb3 rds23" :style="{width:progress+'%','background-color':color}"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="father">
|
||
<view class="abs top left50p roundBox rds text-center" :style="{'background-color':color}">
|
||
<view class="pt30" v-if="!completed">
|
||
<button hover-class="op9" @tap.stop="download" class="btn bd2 whiteBg line rds23 inline plr50 ptb10 fz16">
|
||
立即升级
|
||
</button>
|
||
</view>
|
||
<view class="pt30" v-else>
|
||
<button hover-class="op8" @tap.stop="restart" class="btn bd2 whiteBg line rds23 inline plr50 ptb10 fz16">
|
||
立即重启
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="op9 father" v-if="progress == 0">
|
||
<view class="abs">
|
||
<view class="flex ct ">
|
||
<view class="h30 bl3 whiteBd"></view>
|
||
</view>
|
||
<view class="close-btn" @click="hide">
|
||
<text class="mix-icon icon-close"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<mix-loading v-if="isLoading"></mix-loading>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "version-update",
|
||
props: {
|
||
title: {
|
||
default: "发现新版本"
|
||
},
|
||
defaultContent: {
|
||
default: "快来升级，体验最新的功能吧！"
|
||
},
|
||
showVersion: {
|
||
default: true
|
||
},
|
||
autoShow: {
|
||
default: false
|
||
},
|
||
isCache: {
|
||
default: true
|
||
},
|
||
updateUrl: {
|
||
default: "api/base-app-version"
|
||
},
|
||
color: {
|
||
default: "#ff536f"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
version: "1.0.0",
|
||
updateData: {
|
||
description: []
|
||
},
|
||
progress: 0,
|
||
completed: false,
|
||
inData: null
|
||
};
|
||
},
|
||
created() {
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
|
||
this.version = widgetInfo.version;
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
async checkVersion(e) {
|
||
console.log(e);
|
||
const res = await this.$request('version', 'check', {
|
||
version: this.version
|
||
}, {
|
||
showLoading: true
|
||
})
|
||
if (res.status === 0) {
|
||
this.$util.msg(res.msg);
|
||
} else {
|
||
res.data.description = res.data.description.split(';');
|
||
this.updateData = res.data;
|
||
this.show = true;
|
||
}
|
||
},
|
||
|
||
download(e) {
|
||
if(this.isDownloading){
|
||
return;
|
||
}
|
||
this.isDownloading = true;
|
||
const task = uni.downloadFile({
|
||
url: this.updateData.downloadLink,
|
||
success: (downloadResult) => {
|
||
this.isDownloading =false;
|
||
uni.hideLoading();
|
||
if (downloadResult.statusCode === 200) {
|
||
plus.runtime.install(downloadResult.tempFilePath, {
|
||
force: false
|
||
}, (e) => {
|
||
this.downloadSuccess(e);
|
||
}, (err) => {
|
||
this.downloadError(err);
|
||
});
|
||
}
|
||
},
|
||
fail: err => {
|
||
this.isDownloading =false;
|
||
this.downloadError(err);
|
||
}
|
||
});
|
||
|
||
task.onProgressUpdate((e) => {
|
||
console.log(e.progress);
|
||
this.progress = e.progress;
|
||
});
|
||
},
|
||
downloadError(e) {
|
||
this.show = false;
|
||
this.progress = 0;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '更新失败，请稍后再试',
|
||
showCancel: false,
|
||
confirmColor: '#414cd9'
|
||
});
|
||
},
|
||
downloadSuccess(e) {
|
||
this.completed = true;
|
||
},
|
||
restart(e) {
|
||
this.show = false;
|
||
this.completed = false;
|
||
this.progress = 0;
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.restart();
|
||
// #endif
|
||
},
|
||
hide(e) {
|
||
var animation = uni.createAnimation({
|
||
duration: 300,
|
||
timingFunction: 'ease',
|
||
});
|
||
animation.scale(0).opacity(0).step();
|
||
this.inData = animation.export();
|
||
setTimeout((e) => {
|
||
this.show = false;
|
||
this.inData = null;
|
||
}, 420);
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.version-text{
|
||
margin-right: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
position: relative;
|
||
z-index: -2rpx;
|
||
}
|
||
.close-btn{
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #fff;
|
||
|
||
.mix-icon{
|
||
margin-top: -20rpx;
|
||
padding: 20rpx;
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
.scroll-view{
|
||
height: auto !important;
|
||
min-height: 120rpx;
|
||
max-height: 17vh;
|
||
|
||
text{
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.5;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.roundBox {
|
||
width: 5000upx;
|
||
height: 5000upx;
|
||
margin-left: -2500upx;
|
||
}
|
||
|
||
.animated {
|
||
-webkit-animation-duration: 1s;
|
||
animation-duration: 1s;
|
||
-webkit-animation-fill-mode: both;
|
||
animation-fill-mode: both;
|
||
animation-timing-function: linear;
|
||
}
|
||
|
||
.animated.infinite {
|
||
-webkit-animation-iteration-count: infinite;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
@keyframes goUp {
|
||
from {
|
||
-webkit-transform: translate3d(0, 70%, 0);
|
||
transform: translate3d(0, 70%, 0);
|
||
}
|
||
|
||
to {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
.goUp {
|
||
-webkit-animation-name: goUp;
|
||
animation-name: goUp;
|
||
-webkit-animation-duration: 600ms;
|
||
animation-duration: 600ms;
|
||
animation-timing-function: ease-in;
|
||
}
|
||
|
||
@keyframes splash {
|
||
|
||
0,
|
||
100% {
|
||
transform: scaleX(0.9);
|
||
}
|
||
|
||
5%,
|
||
95% {
|
||
transform: scaleX(1.02);
|
||
}
|
||
|
||
10%,
|
||
80% {
|
||
transform: scaleX(1.05);
|
||
}
|
||
|
||
25%,
|
||
75% {
|
||
transform: scaleX(1.08);
|
||
}
|
||
|
||
50% {
|
||
transform: scaleX(1.1);
|
||
}
|
||
}
|
||
|
||
.splash {
|
||
-webkit-animation-name: splash;
|
||
animation-name: splash;
|
||
-webkit-animation-duration: 0.6s;
|
||
animation-duration: 0.6s;
|
||
animation-timing-function: linear;
|
||
}
|
||
|
||
@-webkit-keyframes splashOut {
|
||
from {
|
||
opacity: 1;
|
||
transform: scaleX(0);
|
||
}
|
||
|
||
to {
|
||
opacity: 0;
|
||
transform: scaleX(2);
|
||
}
|
||
}
|
||
|
||
.splashOut {
|
||
-webkit-animation-name: splashOut;
|
||
animation-name: splashOut;
|
||
-webkit-animation-duration: 1s;
|
||
animation-duration: 1s;
|
||
}
|
||
|
||
@keyframes bounceUp {
|
||
0% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
50% {
|
||
transform: translate3d(0, -30rpx, 0);
|
||
}
|
||
}
|
||
|
||
.bounceUp {
|
||
-webkit-animation-name: bounceUp;
|
||
animation-name: bounceUp;
|
||
-webkit-animation-duration: 1.6s;
|
||
animation-duration: 1.6s;
|
||
animation-timing-function: linear;
|
||
}
|
||
|
||
@keyframes fadeOut {
|
||
|
||
0,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.fadeOut {
|
||
-webkit-animation-name: fadeOut;
|
||
animation-name: fadeOut;
|
||
}
|
||
|
||
@keyframes fadeOutRight {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(-200%, 0, 0);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: translate3d(200%, 0, 0);
|
||
}
|
||
}
|
||
|
||
.fadeOutRight {
|
||
-webkit-animation-name: fadeOutRight;
|
||
animation-name: fadeOutRight;
|
||
}
|
||
|
||
.animated.delay-03s {
|
||
-webkit-animation-delay: 0.3s;
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
.animated.delay-06s {
|
||
-webkit-animation-delay: 0.6s;
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
.animated.delay-1s {
|
||
-webkit-animation-delay: 1s;
|
||
animation-delay: 1s;
|
||
}
|
||
|
||
.animated.delay-2s {
|
||
-webkit-animation-delay: 2s;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
.animated.delay-3s {
|
||
-webkit-animation-delay: 3s;
|
||
animation-delay: 3s;
|
||
}
|
||
|
||
.animated.fast {
|
||
-webkit-animation-duration: 800ms;
|
||
animation-duration: 800ms;
|
||
}
|
||
|
||
.animated.faster {
|
||
-webkit-animation-duration: 500ms;
|
||
animation-duration: 500ms;
|
||
}
|
||
|
||
.animated.fastest {
|
||
-webkit-animation-duration: 200ms;
|
||
animation-duration: 200ms;
|
||
}
|
||
|
||
.animated.slow {
|
||
-webkit-animation-duration: 2s;
|
||
animation-duration: 2s;
|
||
}
|
||
|
||
.animated.slower {
|
||
-webkit-animation-duration: 3s;
|
||
animation-duration: 3s;
|
||
}
|
||
|
||
.animated.slowest {
|
||
-webkit-animation-duration: 10s;
|
||
animation-duration: 10s;
|
||
}
|
||
|
||
.animated.slow4 {
|
||
-webkit-animation-duration: 5s;
|
||
animation-duration: 5s;
|
||
}
|
||
|
||
.animated.slow5 {
|
||
-webkit-animation-duration: 5s;
|
||
animation-duration: 5s;
|
||
}
|
||
|
||
.animated.slow8 {
|
||
-webkit-animation-duration: 8s;
|
||
animation-duration: 8s;
|
||
}
|
||
|
||
.goAway {
|
||
transform: translate3d(-50%, 10%, 0);
|
||
-webkit-animation-name: goAway;
|
||
animation-name: goAway;
|
||
-webkit-animation-duration: 2s;
|
||
animation-duration: 2s;
|
||
}
|
||
|
||
@keyframes goAway {
|
||
from {
|
||
transform: translate3d(-50%, 10%, 0);
|
||
}
|
||
|
||
to {
|
||
transform: translate3d(-1.3%, -17.6%, 0);
|
||
}
|
||
}
|
||
|
||
.goAwayLeft {
|
||
transform: translate3d(50%, 10%, 0);
|
||
-webkit-animation-name: goAwayLeft;
|
||
animation-name: goAwayLeft;
|
||
-webkit-animation-duration: 2s;
|
||
animation-duration: 2s;
|
||
}
|
||
|
||
@keyframes goAwayLeft {
|
||
from {
|
||
transform: translate3d(50%, 10%, 0);
|
||
}
|
||
|
||
to {
|
||
transform: translate3d(2%, -17%, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes showIn {
|
||
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale3d(0.5, 0.5, 0.5);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale3d(1, 1, 1);
|
||
}
|
||
}
|
||
|
||
.showIn {
|
||
animation-duration: 0.4s;
|
||
animation-name: showIn;
|
||
}
|
||
|
||
div,a,img,span,page,view,navigator,image,text,input,textarea,button,form{
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
a{
|
||
text-decoration: none;
|
||
color: $main;
|
||
}
|
||
|
||
form{
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
image{will-change: transform}
|
||
|
||
input,textarea,form{
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 10px;
|
||
display: block;
|
||
font-size: inherit;
|
||
}
|
||
|
||
button{
|
||
color: inherit;
|
||
line-height: inherit;
|
||
margin: 0;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
-webkit-border-radius: 0;
|
||
-moz-border-radius: 0;
|
||
border-radius: 0;
|
||
&:after{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
switch .uni-switch-input{
|
||
margin-right: 0;
|
||
}
|
||
.wx-switch-input,.uni-switch-input{width:42px !important;height:22px !important;}
|
||
.wx-switch-input::before,.uni-switch-input::before{width:40px !important;height: 20px !important;}
|
||
.wx-switch-input::after,.uni-switch-input::after{width: 20px !important;height: 20px !important;}
|
||
|
||
|
||
/**背景颜色**/
|
||
.bg{
|
||
background-color: $main;
|
||
color: $mainInverse;
|
||
}
|
||
.gradualBg{
|
||
background-image: $mainGradual;
|
||
color: $mainGradualInverse ;
|
||
}
|
||
.grayBg{
|
||
background-color: #f7f7f7;
|
||
color: #30302f;
|
||
}
|
||
.whiteBg{
|
||
background-color: #fff;
|
||
color: #000;
|
||
}
|
||
.blackBg{
|
||
background-color: #000;
|
||
color: #fff;
|
||
}
|
||
.orangeBg{
|
||
background-color: $orange;
|
||
color: #fff;
|
||
}
|
||
.redBg{
|
||
background-color: $red;
|
||
color: #fff;
|
||
}
|
||
.yellowBg{
|
||
background-color: $yellow;
|
||
color: #000;
|
||
}
|
||
.greenBg{
|
||
background-color: $green;
|
||
color: #fff;
|
||
}
|
||
.brownBg{
|
||
background-color: $brown;
|
||
color: #fff;
|
||
}
|
||
.blueBg{
|
||
background-color: $blue;
|
||
color: #fff;
|
||
}
|
||
.purpleBg{
|
||
background-color: $purple;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 文字颜色 */
|
||
.main{
|
||
color: $main;
|
||
}
|
||
.green{
|
||
color: $green;
|
||
}
|
||
.red{
|
||
color: $red;
|
||
}
|
||
.yellow{
|
||
color: $yellow;
|
||
}
|
||
.black{
|
||
color: $black;
|
||
}
|
||
.white{
|
||
color: $white;
|
||
}
|
||
.gray{
|
||
color: $gray;
|
||
}
|
||
.grey{
|
||
color: $grey;
|
||
}
|
||
.orange{
|
||
color: $orange;
|
||
}
|
||
.brown{
|
||
color: $brown;
|
||
}
|
||
.blue{
|
||
color: $blue;
|
||
}
|
||
.purple{
|
||
color: $purple;
|
||
}
|
||
|
||
.hoverMain{
|
||
&:hover{
|
||
color: $main;
|
||
}
|
||
}
|
||
|
||
.hoverGreen{
|
||
&:hover{
|
||
color: $green;
|
||
}
|
||
}
|
||
|
||
.hoverRed{
|
||
&:hover{
|
||
color: $red;
|
||
}
|
||
}
|
||
|
||
.hoverBlue{
|
||
&:hover{
|
||
color: $blue;
|
||
}
|
||
}
|
||
|
||
.hoverGray{
|
||
&:hover{
|
||
color: $gray;
|
||
}
|
||
}
|
||
|
||
.hoverWhite{
|
||
&:hover{
|
||
color: $white;
|
||
}
|
||
}
|
||
|
||
.hoverBlack{
|
||
&:hover{
|
||
color: $black;
|
||
}
|
||
}
|
||
|
||
.hoverOrange{
|
||
&:hover{
|
||
color: $orange;
|
||
}
|
||
}
|
||
|
||
.hoverYellow{
|
||
&:hover{
|
||
color: $yellow;
|
||
}
|
||
}
|
||
|
||
.hoverBrown{
|
||
&:hover{
|
||
color: $brown;
|
||
}
|
||
}
|
||
|
||
.hoverPurple{
|
||
&:hover{
|
||
color: $purple;
|
||
}
|
||
}
|
||
|
||
/* 宽度 高度 */
|
||
$w:0;
|
||
@while $w <= 500 {
|
||
@if $w <= 100 {
|
||
.w#{$w}p{
|
||
width: $w*1%;
|
||
}
|
||
.h#{$w}p{
|
||
height: $w*1%;
|
||
}
|
||
@if $w == 100 {
|
||
.100p{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.ww{
|
||
width: 100vw;
|
||
}
|
||
.hh{
|
||
height: 100vh;
|
||
}
|
||
}
|
||
}
|
||
.w#{$w}{
|
||
width: $w*2upx;
|
||
}
|
||
.h#{$w}{
|
||
height: $w*2upx;
|
||
}
|
||
@if $w < 10 {
|
||
$w : $w + 1 ;
|
||
} @else{
|
||
$w : $w + 5 ;
|
||
}
|
||
}
|
||
|
||
|
||
/* 字号 */
|
||
@for $fz from 12 through 100 {
|
||
.fz#{$fz}{
|
||
font-size: $fz*2upx !important;
|
||
}
|
||
}
|
||
|
||
/* 边距 - 覆盖顺序是小的尺寸覆盖大的尺寸 少的方向覆盖多的方向 */
|
||
$s : 0 ;
|
||
@while $s <= 500 {
|
||
.pd#{$s}{
|
||
padding: $s*2upx!important;
|
||
}
|
||
.m#{$s}{
|
||
margin: $s*2upx!important;
|
||
}
|
||
@if $s == 15 {
|
||
.pd{
|
||
padding: 30upx!important;
|
||
}
|
||
.m{
|
||
margin: 30upx!important;
|
||
}
|
||
}
|
||
@if $s < 10 {
|
||
$s : $s + 1 ;
|
||
} @else if($s < 100){
|
||
$s : $s + 5 ;
|
||
} @else if($s < 300){
|
||
$s : $s + 10 ;
|
||
} @else{
|
||
$s : $s + 50 ;
|
||
}
|
||
}
|
||
|
||
$s : 0 ;
|
||
@while $s <= 500 {
|
||
.ptb#{$s}{
|
||
padding-top: $s*2upx!important;
|
||
padding-bottom: $s*2upx!important;
|
||
}
|
||
.plr#{$s}{
|
||
padding-left: $s*2upx!important;
|
||
padding-right: $s*2upx!important;
|
||
}
|
||
.mtb#{$s}{
|
||
margin-top: $s*2upx!important;
|
||
margin-bottom: $s*2upx!important;
|
||
}
|
||
.mlr#{$s}{
|
||
margin-left: $s*2upx!important;
|
||
margin-right: $s*2upx!important;
|
||
}
|
||
@if $s == 15 {
|
||
.ptb{
|
||
padding-top: 30upx!important;
|
||
padding-bottom: 30upx!important;
|
||
}
|
||
.plr{
|
||
padding-left: 30upx!important;
|
||
padding-right: 30upx!important;
|
||
}
|
||
|
||
.mlr{
|
||
margin-left: 30upx!important;
|
||
margin-right: 30upx!important;
|
||
}
|
||
.mtb{
|
||
margin-top: 30upx!important;
|
||
margin-bottom: 30upx!important;
|
||
}
|
||
}
|
||
@if $s < 10 {
|
||
$s : $s + 1 ;
|
||
} @else if($s < 100){
|
||
$s : $s + 5 ;
|
||
} @else if($s < 300){
|
||
$s : $s + 10 ;
|
||
} @else{
|
||
$s : $s + 50 ;
|
||
}
|
||
}
|
||
|
||
$s : 0 ;
|
||
@while $s <= 500 {
|
||
.pl#{$s}{
|
||
padding-left: $s*2upx!important;
|
||
}
|
||
.pr#{$s}{
|
||
padding-right: $s*2upx!important;
|
||
}
|
||
.pt#{$s}{
|
||
padding-top: $s*2upx!important;
|
||
}
|
||
.pb#{$s}{
|
||
padding-bottom: $s*2upx!important;
|
||
}
|
||
.ml#{$s}{
|
||
margin-left: $s*2upx!important;
|
||
}
|
||
.mr#{$s}{
|
||
margin-right: $s*2upx!important;
|
||
}
|
||
.mt#{$s}{
|
||
margin-top: $s*2upx!important;
|
||
}
|
||
.mb#{$s}{
|
||
margin-bottom: $s*2upx!important;
|
||
}
|
||
@if $s == 15 {
|
||
.pt{
|
||
padding-top: 30upx!important;
|
||
}
|
||
.pb{
|
||
padding-bottom: 30upx!important;
|
||
}
|
||
.pl{
|
||
padding-left: 30upx!important;
|
||
}
|
||
.pr{
|
||
padding-right: 30upx!important;
|
||
}
|
||
.mt{
|
||
margin-top: 30upx!important;
|
||
}
|
||
.mr{
|
||
margin-right: 30upx!important;
|
||
}
|
||
.ml{
|
||
margin-left: 30upx!important;
|
||
}
|
||
.mb{
|
||
margin-bottom: 30upx!important;
|
||
}
|
||
}
|
||
@if $s < 10 {
|
||
$s : $s + 1 ;
|
||
} @else if($s < 100){
|
||
$s : $s + 5 ;
|
||
} @else if($s < 300){
|
||
$s : $s + 10 ;
|
||
} @else{
|
||
$s : $s + 50 ;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* 文字溢出隐藏 */
|
||
.clip{
|
||
width: 100%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
@for $i from 2 through 10{
|
||
&.c#{$i}{
|
||
-webkit-line-clamp: $i;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cut{
|
||
display: block;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 价格 */
|
||
.price{
|
||
font-size: inherit ;
|
||
&:before{
|
||
content: "￥";
|
||
font-size: 70%;
|
||
color: inherit;
|
||
font-weight: normal;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
|
||
}
|
||
.point{
|
||
display: inline-block;
|
||
font-size: 70%;
|
||
font-weight: inherit;
|
||
letter-spacing: 1px;
|
||
color: inherit;
|
||
}
|
||
&.noPrefix{
|
||
&:before{
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 布局 */
|
||
.grid,.gridNoPd,.gridSmPd,.gridNoMb{
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-flex-wrap: wrap;
|
||
-ms-flex-wrap: wrap;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
padding: 20upx 20upx 0 20upx;
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
width: 50%;
|
||
padding: 0 10upx;
|
||
margin-bottom: 20upx;
|
||
}
|
||
@for $i from 1 through 50{
|
||
&.g#{$i}{
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
width: 100%/$i;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gridNoMb{
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.gridNoPd{
|
||
padding: 0;
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
padding: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.gridSmPd{
|
||
padding: 0;
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
padding-right: 0;
|
||
&:first-child{
|
||
padding-left: 0;
|
||
padding-right: 10upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* flex布局 */
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
&.t{
|
||
align-items: flex-start;
|
||
}
|
||
&.b{
|
||
align-items: flex-end;
|
||
}
|
||
&.cv{ //垂直方向铺满
|
||
align-items: stretch;
|
||
}
|
||
&.bk{ //水平方向铺满
|
||
flex-direction: column;
|
||
}
|
||
&.lt{
|
||
justify-content: flex-start;
|
||
}
|
||
&.ct{
|
||
justify-content: center;
|
||
}
|
||
&.rt{
|
||
justify-content: flex-end;
|
||
}
|
||
&.ar{
|
||
justify-content: space-around;
|
||
}
|
||
&.av{
|
||
>.item,view,button,navigator,image,text{
|
||
flex:1;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 定位布局 */
|
||
.father{
|
||
position: relative;
|
||
}
|
||
.abs,.fixed{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
&image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
&.top{
|
||
bottom: auto;
|
||
}
|
||
&.bottom{
|
||
top: auto;
|
||
}
|
||
&.left{
|
||
right: auto;
|
||
}
|
||
&.right{
|
||
left: auto;
|
||
}
|
||
}
|
||
@for $i from 0 through 20 {
|
||
.z#{$i}{
|
||
z-index: $i !important;
|
||
}
|
||
}
|
||
|
||
@for $i from 1 through 200 {
|
||
.top-#{$i}{
|
||
bottom: auto;
|
||
top: $i * -2upx;
|
||
}
|
||
.left-#{$i}{
|
||
right: auto;
|
||
left: $i * -2upx;
|
||
}
|
||
.bottom-#{$i}{
|
||
top: auto;
|
||
bottom: $i * -2upx;
|
||
}
|
||
.right-#{$i}{
|
||
left: auto;
|
||
right: $i * -2upx;
|
||
}
|
||
.top#{$i}{
|
||
bottom: auto;
|
||
top: $i * 2upx;
|
||
}
|
||
.left#{$i}{
|
||
right: auto;
|
||
left: $i * 2upx;
|
||
}
|
||
.bottom#{$i}{
|
||
top: auto;
|
||
bottom: $i * 2upx;
|
||
}
|
||
.right#{$i}{
|
||
left: auto;
|
||
right: $i * 2upx;
|
||
}
|
||
.top-#{$i}p{
|
||
bottom: auto;
|
||
top: $i * -1%;
|
||
}
|
||
.left-#{$i}p{
|
||
right: auto;
|
||
left: $i * -1%;
|
||
}
|
||
.bottom-#{$i}p{
|
||
top: auto;
|
||
bottom: $i * -1%;
|
||
}
|
||
.right-#{$i}p{
|
||
left: auto;
|
||
right: $i * -1%;
|
||
}
|
||
.top#{$i}p{
|
||
bottom: auto;
|
||
top: $i * 1%;
|
||
}
|
||
.left#{$i}p{
|
||
right: auto;
|
||
left: $i * 1%;
|
||
}
|
||
.bottom#{$i}p{
|
||
top: auto;
|
||
bottom: $i * 1%;
|
||
}
|
||
.right#{$i}p{
|
||
left: auto;
|
||
right: $i * 1%;
|
||
}
|
||
}
|
||
|
||
.fixed{
|
||
position: fixed;
|
||
}
|
||
|
||
/* fix-auto布局 */
|
||
.fixAuto,.fixAutoNoPd,.fixAutoSmPd{
|
||
display: table;
|
||
width: 100%;
|
||
padding: 20upx 10upx;
|
||
>.item,>view,>image,>navigator,>text,>button{
|
||
vertical-align: top;
|
||
padding: 0 10upx;
|
||
display: table-cell ;
|
||
}
|
||
&.middle{
|
||
>.item,>view,>image,>navigator,>text{
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
&.bottom{
|
||
>.item,>view,>image,>navigator,>text{
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
}
|
||
.fixAutoSmPd{
|
||
padding: 0;
|
||
>.item,>view,>image,>navigator,>text{
|
||
padding-right: 0;
|
||
&:first-child{
|
||
padding-left: 0;
|
||
padding-right: 10upx;
|
||
}
|
||
}
|
||
}
|
||
.fixAutoNoPd{
|
||
padding: 0;
|
||
>.item,>view,>image,>navigator,>text{
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* 浮动组件 */
|
||
.clear{
|
||
&:after{
|
||
content: "";
|
||
clear: both;
|
||
height: 0;
|
||
display: block;
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
.fl{
|
||
float: left;
|
||
}
|
||
.fr{
|
||
float: right;
|
||
}
|
||
|
||
/* 按钮样式类 */
|
||
.btn,.roundBtn{
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
text-align: center;
|
||
padding: 8upx 24upx;
|
||
background-color: $main;
|
||
color: $mainInverse ;
|
||
font-size: 28upx;
|
||
border: 1px solid $main;
|
||
-webkit-border-radius: 8upx;
|
||
-moz-border-radius: 8upx;
|
||
border-radius: 8upx;
|
||
transition: 0.4s;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
&.gradualBg{
|
||
border-color: transparent;
|
||
background-image: $mainGradual;
|
||
color: $mainGradualInverse;
|
||
|
||
}
|
||
&.blackBg{
|
||
background-color: $black;
|
||
border-color: $black;
|
||
color: #fff;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba($black , 0.4);
|
||
}
|
||
}
|
||
&.greenBg{
|
||
background-color: $green;
|
||
border-color: $green;
|
||
color: #fff;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba($green , 0.4);
|
||
}
|
||
}
|
||
&.grayBg{
|
||
border-color: rgba(#30302f,0.2);
|
||
background-color: #f7f7f7;
|
||
color: #30302f;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba( #30302f , 0.2);
|
||
}
|
||
}
|
||
&.whiteBg{
|
||
border-color: rgba(#fff,0.2);
|
||
background-color: #fff;
|
||
color: #000;
|
||
}
|
||
|
||
&.orangeBg{
|
||
border-color: $orange;
|
||
background-color: $orange;
|
||
color: #fff;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba( $orange , 0.4);
|
||
}
|
||
}
|
||
&.redBg{
|
||
border-color: $red;
|
||
background-color: $red;
|
||
color: #fff;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba( $red , 0.4);
|
||
}
|
||
}
|
||
&.yellowBg{
|
||
border-color: $yellow;
|
||
background-color: $yellow;
|
||
color: #000;
|
||
&.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba( $yellow , 0.4);
|
||
}
|
||
}
|
||
|
||
&.line{
|
||
background-color: transparent;
|
||
background-image: none;
|
||
color: $main;
|
||
&.blackBg{
|
||
color: $black;
|
||
}
|
||
&.greenBg{
|
||
color: $green;
|
||
}
|
||
&.yellowBg{
|
||
color: $yellow;
|
||
}
|
||
&.grayBg{
|
||
color: #30302f;
|
||
}
|
||
&.whiteBg{
|
||
border-color: rgba(#fff,0.7);
|
||
color: #fff;
|
||
}
|
||
&.orangeBg{
|
||
color: $orange;
|
||
}
|
||
&.redBg{
|
||
color: $red;
|
||
}
|
||
}
|
||
&+.btn,&+.roundBtn{
|
||
margin-left: 20upx;
|
||
}
|
||
&.block{
|
||
margin: 0;
|
||
padding: 20upx 24upx;
|
||
display: block;
|
||
width: 100%;
|
||
&+.btn{
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
&:hover{
|
||
-webkit-transform: scale(0.99);
|
||
-moz-transform: scale(0.99);
|
||
-ms-transform: scale(0.99);
|
||
-o-transform: scale(0.99);
|
||
transform: scale(0.99);
|
||
opacity: 0.8;
|
||
}
|
||
&.disabled{
|
||
-webkit-transform: scale(1);
|
||
-moz-transform: scale(1);
|
||
-ms-transform: scale(1);
|
||
-o-transform: scale(1);
|
||
transform: scale(1);
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
[class^="tag"] , [class*=" tag"]{
|
||
display: inline-block;
|
||
font-size: 24upx;
|
||
padding: 4upx 14upx;
|
||
border-radius: 4upx;
|
||
margin-right: 6upx;
|
||
margin-left: 6upx;
|
||
}
|
||
.tag{
|
||
background-color: rgba($main,0.2);
|
||
color: $main;
|
||
}
|
||
.tagBlue{
|
||
background-color: rgba($blue,0.2);
|
||
color: $blue;
|
||
}
|
||
.tagGray{
|
||
background-color: rgba($gray,0.2);
|
||
color: $gray;
|
||
}
|
||
|
||
.tagGradual{
|
||
background-image: linear-gradient(to top right,rgba($main,0.2),rgba($main,0.1));
|
||
color: $main;
|
||
}
|
||
|
||
.tagBlack{
|
||
background-color: rgba($black,0.2);
|
||
color: $black;
|
||
}
|
||
.tagGreen{
|
||
background-color: rgba($green,0.2);
|
||
color: $green;
|
||
}
|
||
|
||
.tagWhite{
|
||
background-color: rgba($white,0.2);
|
||
color: $white;
|
||
}
|
||
|
||
.tagOrange{
|
||
background-color: rgba($orange,0.2);
|
||
color: $orange;
|
||
}
|
||
.tagRed{
|
||
background-color: rgba($red,0.2);
|
||
color: $red;
|
||
}
|
||
.tagYellow{
|
||
background-color: rgba($yellow,0.2);
|
||
color: $yellow;
|
||
}
|
||
|
||
/* 边线(实线、虚线) */
|
||
.bdn{
|
||
border: none;
|
||
}
|
||
.bd{
|
||
border: 1px solid $borderColor;
|
||
&.dashed{
|
||
border-style: dashed;
|
||
}
|
||
}
|
||
.bt{
|
||
border-top:1px solid $borderColor;
|
||
&.dashed{
|
||
border-top-style: dashed;
|
||
}
|
||
}
|
||
.bb{
|
||
border-bottom:1px solid $borderColor;
|
||
&.dashed{
|
||
border-bottom-style: dashed;
|
||
}
|
||
}
|
||
.bl{
|
||
border-left:1px solid $borderColor;
|
||
&.dashed{
|
||
border-left-style: dashed;
|
||
}
|
||
}
|
||
.br{
|
||
border-right: 1px solid $borderColor;
|
||
&.dashed{
|
||
border-right-style: dashed;
|
||
}
|
||
}
|
||
|
||
$b:2;
|
||
@while $b <= 10 {
|
||
.bd#{$b}{
|
||
border: #{$b}px solid $borderColor;
|
||
&.dashed{
|
||
border-style: dashed;
|
||
}
|
||
}
|
||
.bt#{$b}{
|
||
border-top:#{$b}px solid $borderColor;
|
||
&.dashed{
|
||
border-top-style: dashed;
|
||
}
|
||
}
|
||
.bb#{$b}{
|
||
border-bottom:#{$b}px solid $borderColor;
|
||
&.dashed{
|
||
border-bottom-style: dashed;
|
||
}
|
||
}
|
||
.bl#{$b}{
|
||
border-left:#{$b}px solid $borderColor;
|
||
&.dashed{
|
||
border-left-style: dashed;
|
||
}
|
||
}
|
||
.br#{$b}{
|
||
border-right: #{$b}px solid $borderColor;
|
||
&.dashed{
|
||
border-right-style: dashed;
|
||
}
|
||
}
|
||
$b : $b + 1 ;
|
||
}
|
||
|
||
/* 边线颜色 */
|
||
.mainBd{
|
||
border-color: $main;
|
||
}
|
||
.greenBd{
|
||
border-color: $green;
|
||
}
|
||
.redBd{
|
||
border-color: $red;
|
||
}
|
||
.yellowBd{
|
||
border-color:$yellow ;
|
||
}
|
||
.blackBd{
|
||
border-color: $black;
|
||
}
|
||
.whiteBd{
|
||
border-color:$white ;
|
||
}
|
||
.grayBd{
|
||
border-color:$gray;
|
||
}
|
||
.greyBd{
|
||
border-color:$grey;
|
||
}
|
||
.orangeBd{
|
||
border-color:$orange;
|
||
}
|
||
|
||
/* 圆角 */
|
||
.radius,.rds{
|
||
-webkit-border-radius: 100%!important;
|
||
-moz-border-radius: 100%!important;
|
||
border-radius: 100%!important;
|
||
}
|
||
|
||
$r:0;
|
||
@while $r <= 50{
|
||
.rds#{$r},&.radius#{$r}{
|
||
-webkit-border-radius:$r*2upx!important;
|
||
-moz-border-radius:$r*2upx!important;
|
||
border-radius:$r*2upx!important;
|
||
}
|
||
$r : $r + 1;
|
||
}
|
||
|
||
.rdsTl,.radiusTopLeft{
|
||
border-top-left-radius:100%!important;
|
||
}
|
||
.rdsTr,.radiusTopRight{
|
||
border-top-right-radius: 100%!important;
|
||
}
|
||
.rdsBl,.radiusBottomLeft{
|
||
border-bottom-left-radius: 100%!important;
|
||
}
|
||
.rdsBr,.radiusBottomRight{
|
||
border-bottom-right-radius: 100%!important;
|
||
}
|
||
|
||
$r:0;
|
||
@while $r <= 50{
|
||
.rdsTl#{$r},.radiusTopLeft#{$r}{
|
||
border-top-left-radius: $r*2upx!important;
|
||
}
|
||
.rdsTr#{$r},.radiusTopRight#{$r}{
|
||
border-top-right-radius: $r*2upx!important;
|
||
}
|
||
.rdsBl#{$r},.radiusBottomLeft#{$r}{
|
||
border-bottom-left-radius: $r*2upx!important;
|
||
}
|
||
.rdsBr#{$r},.radiusBottomRight#{$r}{
|
||
border-bottom-right-radius: $r*2upx!important;
|
||
}
|
||
$r : $r + 1;
|
||
}
|
||
|
||
/* 正方形&长方形 */
|
||
[class^="square"] , [class*=" square"]{
|
||
width: 100%;
|
||
position: relative;
|
||
height: auto;
|
||
>.item,>image,>view,>navigator,>text,>button{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
$p : 200 ;
|
||
@while $p > 0 {
|
||
.square#{$p}{
|
||
padding-top: $p*1%;
|
||
}
|
||
@if $p == 100 {
|
||
.square{
|
||
padding-top: 100%;
|
||
}
|
||
}
|
||
$p : $p - 5 ;
|
||
}
|
||
|
||
|
||
|
||
/* 阴影 */
|
||
.shadow{
|
||
box-shadow: 0px 2px 9px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.wrapper-top,.wt{
|
||
background-image: linear-gradient(rgba(0,0,0,0.3) , rgba(0,0,0,0.02));
|
||
}
|
||
.wrapper-bottom,.wb{
|
||
background-image: linear-gradient( rgba(0,0,0,0.02) , rgba(0,0,0,0.3) );
|
||
}
|
||
|
||
[class^="wp"],[class*=" wp"] {
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 透明度 */
|
||
@for $op from 0 through 10 {
|
||
.op#{$op}{
|
||
opacity: $op * 0.1!important;
|
||
}
|
||
.wp#{$op}{
|
||
background-color: rgba(#000,$op*0.1);
|
||
}
|
||
@if $op == 5 {
|
||
.wp{
|
||
background-color: rgba(#000,0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分割线 */
|
||
[class*=" split"],[class^="split"] {
|
||
position: relative;
|
||
&:before{
|
||
content:"";
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
border-left: 1px solid $borderColor;
|
||
}
|
||
}
|
||
|
||
$s:10;
|
||
@while $s <= 100 {
|
||
.split#{$s}{
|
||
&:before{
|
||
height: #{$s*2}upx;
|
||
margin-top: -#{$s}upx;
|
||
}
|
||
}
|
||
@if $s == 10 {
|
||
.split{
|
||
&:before{
|
||
height: 20upx;
|
||
margin-top: -10upx;
|
||
}
|
||
}
|
||
}
|
||
$s:$s+2;
|
||
}
|
||
|
||
.hover,[class^="hover"],[class*=" hover"]{
|
||
transition: all 0.4s;
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8 !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.statusBar{
|
||
height: var(--status-bar-height);
|
||
}
|
||
|
||
.winBottom{
|
||
height: var(--windown-bottom);
|
||
}
|
||
|
||
.safeBottom{
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.disabled{
|
||
opacity:0.8;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
|
||
|
||
.grid,.gridNoMb,.gridNoPd{
|
||
>.btn,>.roundBtn{
|
||
&+.btn,&+.roundBtn{
|
||
margin-left: 0 ;
|
||
}
|
||
}
|
||
}
|
||
|
||
.roundBtn{
|
||
-webkit-border-radius: 100upx;
|
||
-moz-border-radius: 100upx;
|
||
border-radius: 100upx;
|
||
}
|
||
|
||
|
||
|
||
/* 位置 */
|
||
.text-center,.tc{
|
||
text-align: center!important;
|
||
}
|
||
.text-left,.tl{
|
||
text-align: left!important;
|
||
}
|
||
.text-right,.tr{
|
||
text-align: right!important;
|
||
}
|
||
.text-justify,.tj{
|
||
text-align: justify!important;
|
||
}
|
||
.text-bold,.bold{
|
||
font-weight: bold!important;
|
||
}
|
||
.text-normal,.normal{
|
||
font-weight: normal!important;
|
||
}
|
||
.break{
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
}
|
||
.noBreak{
|
||
white-space: nowrap;
|
||
word-break: keep-all;
|
||
}
|
||
.inline{
|
||
display: inline-block;
|
||
}
|
||
.block{
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
.none{
|
||
display: none;
|
||
}
|
||
.center-block{
|
||
margin: 0 auto;
|
||
display: block;
|
||
}
|
||
.hidden{
|
||
overflow: hidden;
|
||
}
|
||
.hiddenX{
|
||
overflow-x: hidden;
|
||
}
|
||
.hiddenY{
|
||
overflow-y: hidden;
|
||
}
|
||
.auto{
|
||
overflow: auto;
|
||
}
|
||
.autoX{
|
||
overflow-x: auto;
|
||
}
|
||
.autoY{
|
||
overflow-y: auto;
|
||
}
|
||
.showInMb{
|
||
display: block;
|
||
}
|
||
.showInPc{
|
||
display: none;
|
||
}
|
||
table{
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
border: 1px solid #e6e6e6;
|
||
thead{
|
||
tr{
|
||
background-color: #f2f2f2;
|
||
th{
|
||
color: #8799a3;
|
||
width: 1%;
|
||
}
|
||
}
|
||
}
|
||
tr{
|
||
background-color: #fff;
|
||
transition: all 0.4s;
|
||
td,th{
|
||
border: 1px solid #e6e6e6;
|
||
overflow: hidden;
|
||
-o-text-overflow: ellipsis;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
word-wrap: break-word;
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
&.autoWidth{
|
||
width: auto;
|
||
}
|
||
}
|
||
&:hover{
|
||
background-color: #f2f2f2;
|
||
}
|
||
}
|
||
}
|
||
</style>
|