Gaoxs
4 years ago
9 changed files with 5683 additions and 128 deletions
@ -0,0 +1,184 @@
|
||||
/* |
||||
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) |
||||
} |
||||
} |
@ -0,0 +1,65 @@
|
||||
<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() { |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
File diff suppressed because one or more lines are too long
@ -1,8 +1,12 @@
|
||||
|
||||
<<<<<<< HEAD |
||||
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
||||
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; |
||||
// export const VUE_APP_API_URL = 'http://192.168.31.223:8008/api';
|
||||
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
|
||||
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
|
||||
======= |
||||
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; |
||||
>>>>>>> cd4be74b4e66d2c142be343c65dc2de48ad97bd8 |
||||
export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static'; |
||||
|
||||
|
Loading…
Reference in new issue