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