23 changed files with 319 additions and 421 deletions
@ -1,184 +0,0 @@ |
|||
/* |
|||
Animation 微动画 |
|||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28 |
|||
*/ |
|||
|
|||
/* css 滤镜 控制黑白底色gif的 */ |
|||
.gif-black{ |
|||
mix-blend-mode: screen; |
|||
} |
|||
.gif-white{ |
|||
mix-blend-mode: multiply; |
|||
} |
|||
|
|||
|
|||
/* Animation css */ |
|||
[class*=animation-] { |
|||
animation-duration: .5s; |
|||
animation-timing-function: ease-out; |
|||
animation-fill-mode: both |
|||
} |
|||
|
|||
.animation-fade { |
|||
animation-name: fade; |
|||
animation-duration: .8s; |
|||
animation-timing-function: linear |
|||
} |
|||
|
|||
.animation-scale-up { |
|||
animation-name: scale-up |
|||
} |
|||
|
|||
.animation-scale-down { |
|||
animation-name: scale-down |
|||
} |
|||
|
|||
.animation-slide-top { |
|||
animation-name: slide-top |
|||
} |
|||
|
|||
.animation-slide-bottom { |
|||
animation-name: slide-bottom |
|||
} |
|||
|
|||
.animation-slide-left { |
|||
animation-name: slide-left |
|||
} |
|||
|
|||
.animation-slide-right { |
|||
animation-name: slide-right |
|||
} |
|||
|
|||
.animation-shake { |
|||
animation-name: shake |
|||
} |
|||
|
|||
.animation-reverse { |
|||
animation-direction: reverse |
|||
} |
|||
|
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0 |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1 |
|||
} |
|||
} |
|||
|
|||
@keyframes scale-up { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(.2) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1) |
|||
} |
|||
} |
|||
|
|||
@keyframes scale-down { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(1.8) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-top { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-bottom { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes shake { |
|||
|
|||
0%, |
|||
100% { |
|||
transform: translateX(0) |
|||
} |
|||
|
|||
10% { |
|||
transform: translateX(-9px) |
|||
} |
|||
|
|||
20% { |
|||
transform: translateX(8px) |
|||
} |
|||
|
|||
30% { |
|||
transform: translateX(-7px) |
|||
} |
|||
|
|||
40% { |
|||
transform: translateX(6px) |
|||
} |
|||
|
|||
50% { |
|||
transform: translateX(-5px) |
|||
} |
|||
|
|||
60% { |
|||
transform: translateX(4px) |
|||
} |
|||
|
|||
70% { |
|||
transform: translateX(-3px) |
|||
} |
|||
|
|||
80% { |
|||
transform: translateX(2px) |
|||
} |
|||
|
|||
90% { |
|||
transform: translateX(-1px) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-left { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(-100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-right { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0) |
|||
} |
|||
} |
|||
@ -1,69 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]"> |
|||
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"> |
|||
<view class="action" @tap="BackPage" v-if="isBack"> |
|||
<text class="cuIcon-back"></text> |
|||
<slot name="backText"></slot> |
|||
</view> |
|||
<view class="content" :style="[{top:StatusBar + 'px'}]"> |
|||
<slot name="content"></slot> |
|||
</view> |
|||
<slot name="right"></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
StatusBar: this.StatusBar, |
|||
CustomBar: this.CustomBar |
|||
}; |
|||
}, |
|||
name: 'cu-custom', |
|||
computed: { |
|||
style() { |
|||
var StatusBar= this.StatusBar; |
|||
var CustomBar= this.CustomBar; |
|||
var bgImage = this.bgImage; |
|||
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`; |
|||
if (this.bgImage) { |
|||
style = `${style}background-image:url(${bgImage});`; |
|||
} |
|||
return style |
|||
} |
|||
}, |
|||
props: { |
|||
bgColor: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
isBack: { |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
bgImage: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
methods: { |
|||
BackPage() { |
|||
if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) { |
|||
let url = '/' + __wxConfig.pages[0] |
|||
return uni.redirectTo({url}) |
|||
} |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,72 +0,0 @@ |
|||
<style lang="scss" scoped> |
|||
.cu-navbar{ |
|||
height:calc(var(--status-bar-height) + 100rpx); |
|||
flex-shrink: 0; |
|||
&>.cu-bar{ |
|||
position:fixed; |
|||
z-index: 200; |
|||
top:0; |
|||
left:0; |
|||
width:100%; |
|||
box-sizing: content-box; |
|||
padding-top:var(--status-bar-height); |
|||
height:100rpx; |
|||
background-color:var(--bg); |
|||
color:var(--c); |
|||
&>.left{ |
|||
transform: rotate(180deg); |
|||
padding:10rpx; |
|||
text.plant-youbian{ |
|||
font-size:45rpx; |
|||
} |
|||
} |
|||
&>.content{ |
|||
top:var(--status-bar-height); |
|||
} |
|||
&>.action /deep/{ |
|||
&>button{ |
|||
background:rgba(255, 255, 255, 0.1); |
|||
width:96rpx; |
|||
height:48rpx; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
font-size:30rpx; |
|||
padding:0; |
|||
color:#fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="cu-navbar"> |
|||
<view class="cu-bar"> |
|||
<view class="left"> |
|||
<text v-if="isBack" class="plant-youbian" @click="$u.route({type:'back'})"/> |
|||
</view> |
|||
<view class="content"> |
|||
{{text}} |
|||
</view> |
|||
<view class="action"> |
|||
<slot name="right"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props:{ |
|||
isBack:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
text:{ |
|||
type:String, |
|||
default:"", |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
@ -0,0 +1,29 @@ |
|||
<style lang="scss"> |
|||
.content{ |
|||
width:750rpx; |
|||
height:1050rpx; |
|||
background:red; |
|||
map{ |
|||
width:750rpx; |
|||
height:1050rpx; |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="content"> |
|||
<map enable-satellite style="width:750rpx;height:1050rpx;"/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue