You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1811 lines
32 KiB
1811 lines
32 KiB
/** |
|
* 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>
|
|
|