Skip to content

马贞晓 / templateVUE

Go to a project
Commit b9d26ef2 by 马贞晓
Options

基础搭建

0 parents
Inline Side-by-side
Showing 278 changed files with 6972 additions and 0 deletions
.browserslistrc 0 → 100644
> 1%
last 2 versions
.env 0 → 100644
BASE_URL="/"
VUE_APP_TITLE = '宝利信通软件官网'
VUE_APP_KEYWORDS='宝利信通（北京）软件股份有限公司'
VUE_APP_DESCRIPITION='软件开发；基础软件服务；技术开发、技术服务、技术咨询、技术转让；销售电子产品、计算机、软件及辅助设备'
.env.development 0 → 100644
BASE_URL="/"
VUE_APP_URL="http://website.item.polyhome.net/boot/"
VUE_APP_PIC_URL="http://website.item.polyhome.net"
.env.production 0 → 100644
BASE_URL="/"
VUE_APP_URL="http://website.item.polyhome.net/boot/"
VUE_APP_PIC_URL="http://website.item.polyhome.net"
\ No newline at end of file
.eslintrc.js 0 → 100644
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
# polysoft vue-cli demo
[代码规范](develop.md)
## 安装
```
yarn install //安装
yarn run serve //开发
yarn run build //打包
```
## 使用插件
#### 首页屏幕滚动插件
* vue-awesome-swiper
> [https://github.com/surmon-china/vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)
### 公共组件
api.md 0 → 100644
File mode changed
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/app'
],
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
develop.md 0 → 100644
# 编码规范
1、vuex存储
> vuex 存放位置 src/vuex
（面所需业务逻辑除非登录、用户信息等通用数据，不必使用vuex 存储）。
* 在src/vuex/index 目录下存放store modules模块文件，文件命名使用views下相同名称，以方便区分。
``` javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import demo from "./demo"; //你等store modules文件
const store = new Vuex.Store({
modules: {
demo
}
})
export default store;
```
* store modules 文件必须强制命名空间**namespaced:true**,在模块中引入service文件下views页面同名请求模块。
> mutations命名以“M”开头，actions 以 “A”开头,getters以“G”开头。
``` javascript
import $http from "@/service/pc-index"; //service请求模块
export default {
namespaced:true, //强制
state: {
demo:[]
},
getters:{
Gdemo(state){ return state.demo}
},
mutations:{
MSetdemo(state,data){
state.demo = data;
}
},
actions:{
ASetdemo({dispatch,commit,state,computed}){
return $http.demo()
.then(d=>{
commit("MSetdemo",d.data)
})
}
}
}
```
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
package.json 0 → 100644
{
"name": "vue-cli",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"classlist-polyfill": "^1.2.0",
"core-js": "^2.6.5",
"iview": "^3.4.2",
"less-loader": "^4.1.0",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"axios": "^0.18.1",
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.12.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"iview-loader": "^1.2.2",
"less": "^3.10.2",
"less-loader": "^4.1.0",
"mocker-api": "^1.7.9",
"vue-awesome-swiper": "^3.1.3",
"vue-cli-plugin-axios": "^0.0.4",
"vue-template-compiler": "^2.6.10",
"yarn": "^1.17.3"
}
}
postcss.config.js 0 → 100644
module.exports = {
plugins: {
autoprefixer: {}
}
}
public/favicon.ico 0 → 100644
No preview for this file type
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="<%= process.env.VUE_APP_KEYWORDS%>">
<meta name="description" content="<%= process.env.VUE_APP_DESCRIPITION%>">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= process.env.VUE_APP_TITLE%>
</title>
<script>
// !(function(doc, win) {
// var docEl = doc.documentElement,
// resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// recalc = function() {
// var clientWidth = docEl.clientWidth;
// if (!clientWidth) return;
// const fontSize = clientWidth <= 1200 ? (1200/19.2) : (clientWidth / 19.2);
// docEl.style.fontSize = fontSize + 'px';
// };
// if (!doc.addEventListener) return;
// win.addEventListener(resizeEvt, recalc, false);
// doc.addEventListener('DOMContentLoaded', recalc, false);
// recalc();
// })(document, window);
</script>
<!--关于百度地图的ak -->
<!-- <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=G1pCKQh8jkDEgHl0TDqsQKIuEUUrMGYt"></script> -->
</head>
<body>
<noscript>
<strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<articel id="app"></articel>
<!-- built files will be auto injected -->
</body>
<!--隐藏百度地图的logo和版本信息-->
<style>
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
</style>
</html>
src/assets/css/animate/animate.css 0 → 100644
@charset "UTF-8";
/*!
* animate.css -https://daneden.github.io/animate.css/
* Version - 3.7.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
animation-delay: 15s
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
animation-delay: 5s;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.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.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
src/assets/icon_custom/iconfont.css 0 → 100644
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1567561828631'); /* IE9 */
src: url('iconfont.eot?t=1567561828631#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAckAAsAAAAADZgAAAbWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDdAqNMIo6ATYCJAMgCxIABCAFhG0HehtGCxEVrIsg+5lg2yZO+4Mm0zR5pFGTD8+298/lAiKgD5/Ce73qVFcRsLVuTawr+RFhACyu2YDlhIpQR3IWPfqul8KtTa60hwQIkDs4lvrp/2B53/YumblRJWXwgKJabEB7kqFPZcPwDBcC5yZefBwIABHZKApSt37TthDAgsgJLBvUv293CCED2Aw8gaDmHZeyIIvAQWDmMrcALNS9J9+gNBEABhwFeVLLPvV6oebnMe49qid0dKI69OZsABb7AhRAUQAsmhc6HTFQKyuqFaIrl0UXAAq1UaCp3jJuyM10G7px914iEeuLFKRSFzwYoOBA4AEDvtM/Hg+ikCG2l86DMyrkbKCAy7CBA9wQGwjgZrLBA7gNedAJNw7ZwAPuPdE9pxBQrQIgG2AKItUMiK3qoGDha3h4QKsUjWiCL6Cw2RqracmCkJN4FJYg5FsFxOSxT57k1Y48artsX0HTXG6lqBIX0q2oalnQxSmbUyRHiluqtTxNt6BuK0XjjqbZT6Il9m5sJ2rGCk1bIZohJrd9q0MMjsh4gy3ufEqePi0nOY/D61cVLbpP72CscAzHdoR269a5NM6sjmUpHjepquASXcjCWt3ECHNvM2Sqqi7GQiHTtjvj6RzHEcWYGeRig7bF9eaJvs2n0yxMY1bdK+s/cibbJnTtwwrtAtQQ/TEwq4bLm52Z5KwkpJcc0+wVK52UpPhIpMvgG8crsR3EY+yUAvHt4PVtExQ+MIJEiRNXSTg64ttvT1uWt5sZ0yJtTXHLjnRnZdfu1ub41pSeNmflCq3HllhG9jIsb9Gzezfa2sM+kV9T9dVq9vatGwmZ4Gsa7mwTI3bPYmaIt6x27+ikcMYQnwnIxBgvO4T4oIdFvbthi3LMBHSIHgm8gdEtyRd3CDVIuIe4/PhJ48SxNtzKswUCk9+VXXYqr7LlTBQBMoTpFMJl4aHr9G3nal47jJ0+3cQnkcJ5H53O6I/DasrHKG33qNuHCH0aXf/zutlbti1Tw9uleJGos2LHplDbl95gs3i59cOmLS6f1F/xM2XWdv9l2DCxIM82bD15h5LiD30zpu16ZrEoryrbZxobKM7kY5h7ILlJ1bK+ydm1S4/e3LPyKl/Wt3P6Pkg/t96j/Or15yxfTvAd5hS57jK5eVJDToqMK7FEWGwUCNRxJvcofWz46xAZXsIj8Tsni5X5ZtxD6WP43JiNY8S6VS7XXFq7w6ay0dwF3zVgtNF5BnkLjkuPVujboEy7dIETkk/tru8crt8hmNNo2TyFD3jnrJs76tnIvtnD9rcsfgU5acF+P/44r5mfMFxyqyfKr3q6/J+QZ1HOj8kzc+e+w37rBfjF7xfV5O7f+9FXdU7xwnz3Dfvyf7+vg9B96fpy361DlUV9RgSXB7mX6TmvKTnzuzUY3wSbM7bg+swvNhxLcr2Kz2KObM0+en1WlypH/TmXUWkjinCbT7r1guHf1S6bjvivb978anLB2yL36HElY9G+z/SWh/Y83nNp7+WSJYWRHnn335tPuPWDkd9RpbjB463acmxFXjhXmHD0+t5LpQrdSZB2o0qPabt+jvkXyz+IN8Qf5Or6jk+9+u3RDPvXyL/Y1IML5zHs09hT9szHJ4f9Wf5BvsBjP7N0zpLwl1X5f2mn/L2sUrrmTd3medk8ZQqVyYPEObHMOqwrI+Ldqr84h3OJGudQEzSiaw3dH8gM+OWMfInAd0H52u/epw7qkrP5jvEbcp7re/TU8XaXHw9fg9ena5zC3mrzaqzCWmO1d+2gkdHbGU//nLu4VNrc8XPLZmbnv/zzhNSWRuzST5gKsifjMouBxDN6lRbExOX0C9qXeJD+TJs9TacnqQ4A9BytCSRWUZ32/zIfBmNQp25dk6r+Jkgv0mXPrUq9UCChs6iWFMAAhYVfXWHBAexeTGTCYcTggsJkAafhiTEARDoB+MJ6kvGmSZWKhf8PKtUHBh5kAYWAvEgWWxQ4SCgLPATUABFF0OBqCUGMAAVhvQAKYyYAAgV7gYEfZ4FCwW0ki30NHDR8BzwUQkFEhARvKSG/K7s7RhQZe3j/gZVMipnzzpTfUBcnYlCsCS+MyYahrZpo+oqEsYkz0ld3OStQkT1cwNPQOYYx8oAyVybn8VDXynVmJdlPdupEFFky9uD9x2klk5o972I/f0NdnIgZ/e44XxiT3TloVZoCyKuCCvU7lNr01Z2MbAp4a2QPLsiGjiYYjO6DBpS5YirExoMaDaWKKqruVf6WXgcgIrcWYgglLOEITzxEIF74R9LMfP/Gkt1j3VtBJHj/q8/TviRThqKLIGcXomElC0lT1q6cT1kJCin6yQQAAA==') format('woff2'),
url('iconfont.woff?t=1567561828631') format('woff'),
url('iconfont.ttf?t=1567561828631') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567561828631#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rengongzhineng:before {
content: "\e614";
}
.icon-diannao:before {
content: "\e648";
}
.icon-xiangmushujuguanli:before {
content: "\e576";
}
.icon-anli:before {
content: "\e6d0";
}
.icon-cunchu:before {
content: "\e602";
}
.icon-shujuku:before {
content: "\e68b";
}
.icon-anquan:before {
content: "\e61c";
}
src/assets/icon_custom/iconfont.eot 0 → 100644
No preview for this file type
src/assets/icon_custom/iconfont.svg 0 → 100644
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="rengongzhineng" unicode="&#58900;" d="M731.584 522.24C716.224 628.48 571.2 652.48 545.28 652.48L537.152 652.544c-44.736 0-191.808-11.392-203.648-157.696C331.328 474.944 320.768 418.304 298.432 395.968 293.056 390.592 281.92 379.392 286.976 366.912 291.84 355.008 304.896 354.816 315.392 354.752c1.728-0.064 5.184-0.064 8-0.32-1.088-8.32-2.24-12.736-3.2-16C319.296 335.232 318.336 331.904 318.336 327.104c0-5.504 2.048-12.352 11.136-16.384-5.376-8.64-4.48-17.344 2.56-24.512 2.432-2.368 3.648-3.648 3.648-22.848 0-13.248 5.312-24.512 15.232-32.512 10.688-8.512 26.624-12.352 40.896-10.112l2.688 0.384c6.464 1.024 13.056 2.112 19.008 2.112 8.576 0 13.568-1.984 17.28-6.976 3.328-4.48 6.656-8.128 9.344-11.008 9.472-10.496 16.384-17.984 16.384-47.744 0-22.4 3.136-31.36 3.776-33.024l2.624-6.72c0.512-1.472 1.92-2.368 3.456-2.368l0 0 208.192 0.384c1.216 0 2.24 0.512 2.944 1.472 0.704 0.896 0.96 2.112 0.64 3.264l-4.032 13.504c-0.32 1.152-33.344 114.752 12.736 198.016 7.296 13.248 13.76 24.32 19.328 33.984l0.448 0.64C739.584 423.36 744.64 432 731.584 522.24zM642.368 144.128l-156.864-0.256c-0.32 4.032-0.576 8.64-0.576 13.632 0 40.896-12.096 54.144-23.872 67.008-2.496 2.752-5.056 5.504-7.424 8.64-9.216 12.48-22.336 18.624-40.128 18.624-8.192 0-16.256-1.344-23.488-2.496l-2.624-0.384c-1.408-0.256-2.816-0.384-4.288-0.384-1.92 0-19.008 0.512-19.008 14.848 0 18.624-1.024 28.48-7.104 37.248 2.56 4.48 3.776 9.152 3.776 14.144 0 9.024-4.352 15.744-12.224 19.52C349.696 338.752 351.168 345.6 352.32 357.056c0.832 8.32-2.432 13.888-5.312 17.088-5.824 6.528-14.4 8.32-22.208 8.896C353.792 419.84 361.472 489.024 361.856 492.16c9.6 119.104 125.824 131.968 175.296 131.968L545.024 624c1.408-0.064 144.896-12.48 158.464-105.92 11.584-80.32 9.152-84.672-21.44-137.216-5.76-9.856-12.416-21.376-20.032-35.136C621.76 273.152 633.92 183.616 642.368 144.128zM412.288 453.056c0 0-10.176 17.28-7.168 27.968 2.944 10.688 1.024 11.072 2.688 19.712 1.6 8.576-3.456 10.688 4.096 19.2 7.616 8.576 14.656 18.112 14.464 24.64s0.384 16.128 11.712 20.032c11.328 3.968 30.976 16.704 30.848 20.16C468.736 588.288 481.536 591.808 488.256 592c6.656 0.192 20.224 2.944 23.68 6.848 3.392 3.904 15.616 5.056 20.032 0.704 4.48-4.352 14.144-9.024 18.752-3.84s13.952 4.224 17.216 1.088c3.264-3.136 3.008-16.96 12.352-12.096 9.408 4.864 15.296 0.512 22.08-1.728 6.784-2.304 8.704-15.296 16.192-11.52 7.552 3.776 11.968-6.4 15.68-9.984 3.776-3.648 3.328-13.248 13.12-12.864s12.032-7.872 12.096-11.904c0.192-4.032 5.12-8.896 9.344-12.992 4.224-4.096 10.368-15.488 10.56-21.504 0.256-6.016-4.8-12.224 0.64-17.6 5.44-5.312 7.488-15.04 3.136-20.032-4.352-4.928-9.088-10.752-4.032-15.744s0.128-10.56-4.928-16.256c-5.056-5.696-4.736-12.736-4.544-19.264 0.256-6.592 4.8-14.208-6.848-14.656-11.712-0.384-22.4-3.776-29.952-12.288C625.216 377.92 618.56 362.048 611.904 368.576S596.544 375.872 590.272 385.984c-6.4 10.048-6.72 14.592-10.816 14.464C575.36 400.192 562.24 393.472 566.144 404.16c3.968 10.752 7.104 16.384-1.472 16.064C556.032 419.904 539.264 421.312 534.208 415.68c-5.056-5.76-13.632-7.04-20.032-0.768C507.712 421.248 504.64 426.688 494.784 420.8c-9.792-5.888-11.072-11.52-21.952-0.832S451.776 433.856 446.528 433.664 428.032 427.968 427.712 438.016C427.328 448.064 412.288 453.056 412.288 453.056" horiz-adv-x="1024" />
<glyph glyph-name="diannao" unicode="&#58952;" d="M512 807.744h360.128c42.24 0 76.992-24.512 89.28-63.168 2.816-8.896 4.352-18.368 4.352-27.776 0.32-171.456 0.32-342.976 0.192-514.624a91.008 91.008 0 0 0-89.28-90.752H151.232c-44.544 0-80.704 27.712-90.752 70.208a97.92 97.92 0 0 0-2.496 23.488v508.8c0 54.336 39.168 93.696 93.824 93.824H512zM118.528 323.776h786.944v7.36 381.568c0 22.4-12.096 34.496-34.496 34.496H152.96c-22.656 0-34.432-11.84-34.432-34.304v-389.12z m0.128-61.184c0-21.76-0.512-42.88 0.256-64 0.256-12.992 11.648-24.192 24.768-26.048 3.52-0.448 7.04-0.576 10.752-0.576h714.752c2.048 0 4.032 0 6.208 0.128 17.856 1.152 29.888 13.504 30.016 31.36 0.128 18.368 0 36.736 0 55.232 0 1.088-0.32 2.304-0.32 3.904H118.656zM511.872-39.744H214.464a50.688 50.688 0 0 0-13.184 1.28 30.08 30.08 0 0 0-22.336 32.064 31.04 31.04 0 0 0 28.608 27.136c1.984 0.128 4.096 0 6.272 0 198.656 0 397.376 0.128 596.288 0a51.2 51.2 0 0 0 14.784-2.048c13.76-4.544 21.76-18.304 19.264-33.28a29.568 29.568 0 0 0-27.904-25.088c-3.072-0.128-5.952-0.128-8.896-0.128l-295.488 0.064z" horiz-adv-x="1024" />
<glyph glyph-name="xiangmushujuguanli" unicode="&#58742;" d="M952.73472-102.4H71.26528a45.568 45.568 0 0 0-45.59872 45.59872V824.80128A45.568 45.568 0 0 0 71.26528 870.4h881.46944a45.568 45.568 0 0 0 45.59872-45.59872v-881.60256a45.568 45.568 0 0 0-45.59872-45.59872z m-19.18976 908.01152H90.45504v-843.21792h843.08992V805.61152zM184.12544 376.71424v0.06656l121.6 76.00128v-0.06144a45.06624 45.06624 0 0 0 23.94112 6.71232c9.3696 0 18.24256-2.85184 25.46176-7.78752l0.25088 0.25088 201.52832-134.39488 232.18176 163.90656a45.2608 45.2608 0 0 0 26.9824 8.80128c25.07776 0 45.47072-20.39296 45.47072-45.59872a45.27104 45.27104 0 0 0-18.87232-36.92544l-258.40128-182.4c-7.4752-5.44256-16.72192-8.67328-26.5984-8.67328s-18.87744 3.10272-26.21952 8.2944l-202.41408 134.90176-95.25248-59.5968a45.568 45.568 0 0 0-25.70752-7.98208c-25.20576 0-45.59872 20.4544-45.59872 45.66528a45.35808 45.35808 0 0 0 21.64736 38.81984z" horiz-adv-x="1024" />
<glyph glyph-name="anli" unicode="&#59088;" d="M44.315 518.031L466.071 330.235c20.162-9.392 32.928-13.055 45.54-13.055 12.657 0 26.054 3.651 47.807 13.032L981.414 518.118c13.548 6.261 22.363 22.589 23.013 42.614 0.688 21.449-8.463 40.517-23.354 48.598L559.445 829.819c-16.762 9.843-30.489 14.236-44.535 14.236-13.892 0-28.924-4.371-48.794-14.206l-422.434-220.984c-15.029-9.742-24.183-29.134-23.329-49.394 0.782-18.38 9.669-33.843 23.962-41.44z m35.417 45.512l433.066 230.715L945.817 563.543 512.771 382.802 79.732 563.543zM944.115 169.25L512.771-27.759l-432.12 197.322c-2.534 0.907-10.036 4.352-22.287 10.227a868.544 868.544 0 0 0-34.46 17.366l-7.782 4.195 0.566-8.826c0.837-12.96 5.279-56.14 27.622-68.113L466.071-63.384c20.15-9.408 32.917-13.071 45.535-13.071 12.646 0 26.048 3.663 47.812 13.049l421.99 187.896c22.861 10.563 27.051 62.613 27.454 68.506l0.582 8.523-27.526-13.654c-27.324-13.575-35.568-17.675-37.803-18.615zM44.315 321.247l421.75-187.796c20.128-9.414 32.9-13.083 45.541-13.083 12.679 0 26.076 3.663 47.817 13.061l421.985 187.896c22.861 10.557 27.051 62.61 27.454 68.514l0.582 8.526-25.022-12.427c-30.988-15.418-38.123-18.929-40.262-19.848L512.771 169.07l-432.115 197.339c-2.419 0.862-9.493 4.11-22.256 10.198a846.525 846.525 0 0 0-34.49 17.396l-7.788 4.187 0.566-8.821c0.832-12.957 5.264-56.171 27.627-68.122z" horiz-adv-x="1024" />
<glyph glyph-name="cunchu" unicode="&#58882;" d="M949.65726 642.224783L776.574163 884.501123C771.474661 891.70042 763.075481 896 754.27634 896H96.740553C81.542037 896 69.243238 883.701201 69.243238 868.502685v-969.00537c0-15.198516 12.298799-27.497315 27.497315-27.497315h830.518894c15.198516 0 27.497315 12.298799 27.497315 27.497315V626.326335c0 5.699443-1.799824 11.298897-5.099502 15.898448zM313.619373 841.105361h373.7635c-0.599941-2.299775-0.899912-4.699541-0.899912-7.099307v-249.375647h-371.963676V833.906064c0 2.499756-0.299971 4.899522-0.899912 7.199297z m396.761254-914.110732H313.619373c0.599941 2.299775 0.899912 4.699541 0.899912 7.099307V148.972952h394.96143v-214.779026c0-2.499756 0.299971-4.899522 0.899912-7.199297z m189.381506 0H763.475442c0.599941 2.299775 0.899912 4.699541 0.899912 7.099307V176.370276c0 15.198516-12.298799 27.497315-27.497315 27.497315H287.021971c-15.198516 0-27.497315-12.298799-27.497315-27.497315V-65.906064c0-2.499756 0.299971-4.899522 0.899912-7.099307H124.237867V841.105361h136.386681c-0.599941-2.299775-0.899912-4.699541-0.899912-7.099307v-276.972952c0-15.198516 12.298799-27.497315 27.497315-27.497314H713.980275c15.198516 0 27.497315 12.298799 27.497315 27.497314V833.906064c0 2.199785-0.299971 4.39957-0.799922 6.499365l159.284445-222.978225v-690.432575zM575.493799 695.519578m-35.996484 0a35.996485 35.996485 0 1 1 71.992969 0 35.996485 35.996485 0 1 1-71.992969 0Z" horiz-adv-x="1024" />
<glyph glyph-name="shujuku" unicode="&#59019;" d="M64 64V768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64v-704a64 64 0 0 0-64-64H128a64 64 0 0 0-64 64z m64 192v-192h768v192H128z m0 64h768V512H128v-192z m0 256h768V768H128v-192z m96 128h128a32 32 0 0 0 0-64h-128a32 32 0 0 0 0 64z m0-256h128a32 32 0 0 0 0-64h-128a32 32 0 0 0 0 64z m0-256h128a32 32 0 1 0 0-64h-128a32 32 0 1 0 0 64z" horiz-adv-x="1024" />
<glyph glyph-name="anquan" unicode="&#58908;" d="M867.584 735.808C717.952 752.736 605.376 793.216 532.992 856.16l-19.04 16.544-20.544-14.656C379.968 777.056 267.776 736 160 736h-32v-448c0-137.344 121.088-261.92 370.208-380.864l13.088-6.24 13.344 5.728C771.072 12.48 896 140.768 896 288V732.576l-28.416 3.232zM832 288c0-116.8-107.392-223.36-319.328-316.8C299.872 74.976 192 181.536 192 288V673.024c104.672 6.784 211.584 46.688 318.496 118.944C587.232 733.472 695.168 694.464 832 675.744V288zM359.776 427.328a32 32 0 1 1-47.968-42.4L433.6 247.104c12.608-14.24 30.176-21.568 47.904-21.568a64.384 64.384 0 0 1 49.696 23.52l197.6 242.72a32 32 0 0 1-49.632 40.416l-197.6-242.688-121.792 137.824z" horiz-adv-x="1024" />
</font>
</defs></svg>
src/assets/icon_custom/iconfont.ttf 0 → 100644
No preview for this file type
src/assets/icon_custom/iconfont.woff 0 → 100644
No preview for this file type
src/assets/icon_custom/iconfont.woff2 0 → 100644
No preview for this file type
src/components/layout/App.vue 0 → 100644
<template>
<transition name="fade">
<article id="app" class="h100">
<router-view ></router-view>
</article>
</transition>
</template>
<script>
export default {
data () {
return {
}
},
}
</script>
<style>
.ivu-message {
z-index: 9999999999 !important
}
</style>
src/components/layout/Container.vue 0 → 100644
<template>
<transition name="fade">
<article class="container">
container
</article>
</transition>
</template>
\ No newline at end of file
src/components/layout/Footer.vue 0 → 100644
<template>
<footer class="footer">
footer
</footer>
</template>
<script>
export default {
name: "AppFooter"
};
</script>
<style lang="less" scoped>
</style>
src/components/layout/Header.vue 0 → 100644
<template>
<transition class="fade">
<article class="Header">
header
</article>
</transition>
</template>
<script>
import {mapState} from "vuex";
import { Icon, Drawer} from "iview";
export default {
name: "AppHeader",
props:{
headColor:{
type:String,
default(){ return "#ccc"}
},
ishead:{
type:Boolean,
default:true
}
},
data() {
return {
// showMenuFlag: false
i:0,
scrollType: true,
negative:0,
};
},
components: {
Icon,
Drawer,
},
computed:{
},
methods:{
},
mounted() {
},
destroyed () {
},
};
</script>
<style lang="less" scoped>
@import "../../less/declare.less";
.ivu-layout-header{ height:auto;}
.Header {
margin: 0 auto;
color: #fff;
display: flex;
}
</style>
\ No newline at end of file
src/components/layout/Layout.vue 0 → 100644
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
.layout-footer-center{
text-align: center;
}
</style>
<template>
<article class="layout h100">
<Layout class="h100">
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Layout :style="{padding: '0 50px'}">
<Breadcrumb :style="{margin: '16px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</Sider>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
Content
</Content>
</Layout>
</Content>
</Layout>
<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
</Layout>
</article>
</div>
</template>
<script>
export default {
}
</script>
\ No newline at end of file
src/entry/app.js 0 → 100644
import Vue from 'vue';
import '@/service/axios';
import App from '@/components/layout/App.vue';
import router from '@/router';
import store from '@/vuex';
import 'babel-polyfill'
import 'classlist-polyfill'
import { locale } from "iview";
import 'iview/dist/styles/iview.css';
import '@/less/index.less';
import lang from 'iview/dist/locale/zh-CN';
import '@/assets/css/animate/animate.css';
import "@/utils/includes";
// import { Message } from 'iview'
// Vue.prototype.$Message = Message
locale(lang);
Vue.config.productionTip = false
// router.afterEach(() => {
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// window.pageYOffset = 0;
// })
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
console.log(
`%cpolysoft 出品%c 金融前端技术团队`,
'background:#5ba4f0;color:#fff;border-radius:5px 0 0 5px;padding:0 5px;font-size:12px;border:#5ba4f0 solid 1px',
'border:#5ba4f0 solid 1px;color:#5ba4f0;border-radius:0px 5px 5px 0;padding:0 5px;font-size:12px'
)
\ No newline at end of file
src/less/declare.less 0 → 100644
@f:100rem;
\ No newline at end of file
src/less/index.css 0 → 100644
.mgT5 {
margin-top: 5px;
}
.mgL5 {
margin-left: 5px;
}
.mgR5 {
margin-right: 5px;
}
.mgB5 {
margin-bottom: 5px;
}
.mg5 {
margin: 5px;
}
.pd5 {
padding: 5px;
}
.pdv5 {
padding: 0 5px;
}
.pdT5 {
padding-top: 5px;
}
.pdL5 {
padding-left: 5px;
}
.pdR5 {
padding-right: 5px;
}
.pdB5 {
padding-bottom: 5px;
}
.mgT10 {
margin-top: 10px;
}
.mgL10 {
margin-left: 10px;
}
.mgR10 {
margin-right: 10px;
}
.mgB10 {
margin-bottom: 10px;
}
.mg10 {
margin: 10px;
}
.pd10 {
padding: 10px;
}
.pdv10 {
padding: 0 10px;
}
.pdT10 {
padding-top: 10px;
}
.pdL10 {
padding-left: 10px;
}
.pdR10 {
padding-right: 10px;
}
.pdB10 {
padding-bottom: 10px;
}
.mgT15 {
margin-top: 15px;
}
.mgL15 {
margin-left: 15px;
}
.mgR15 {
margin-right: 15px;
}
.mgB15 {
margin-bottom: 15px;
}
.mg15 {
margin: 15px;
}
.pd15 {
padding: 15px;
}
.pdv15 {
padding: 0 15px;
}
.pdT15 {
padding-top: 15px;
}
.pdL15 {
padding-left: 15px;
}
.pdR15 {
padding-right: 15px;
}
.pdB15 {
padding-bottom: 15px;
}
.mgT20 {
margin-top: 20px;
}
.mgL20 {
margin-left: 20px;
}
.mgR20 {
margin-right: 20px;
}
.mgB20 {
margin-bottom: 20px;
}
.mg20 {
margin: 20px;
}
.pd20 {
padding: 20px;
}
.pdv20 {
padding: 0 20px;
}
.pdT20 {
padding-top: 20px;
}
.pdL20 {
padding-left: 20px;
}
.pdR20 {
padding-right: 20px;
}
.pdB20 {
padding-bottom: 20px;
}
.mgT25 {
margin-top: 25px;
}
.mgL25 {
margin-left: 25px;
}
.mgR25 {
margin-right: 25px;
}
.mgB25 {
margin-bottom: 25px;
}
.mg25 {
margin: 25px;
}
.pd25 {
padding: 25px;
}
.pdv25 {
padding: 0 25px;
}
.pdT25 {
padding-top: 25px;
}
.pdL25 {
padding-left: 25px;
}
.pdR25 {
padding-right: 25px;
}
.pdB25 {
padding-bottom: 25px;
}
.mgT30 {
margin-top: 30px;
}
.mgL30 {
margin-left: 30px;
}
.mgR30 {
margin-right: 30px;
}
.mgB30 {
margin-bottom: 30px;
}
.mg30 {
margin: 30px;
}
.pd30 {
padding: 30px;
}
.pdv30 {
padding: 0 30px;
}
.pdT30 {
padding-top: 30px;
}
.pdL30 {
padding-left: 30px;
}
.pdR30 {
padding-right: 30px;
}
.pdB30 {
padding-bottom: 30px;
}
.mgT35 {
margin-top: 35px;
}
.mgL35 {
margin-left: 35px;
}
.mgR35 {
margin-right: 35px;
}
.mgB35 {
margin-bottom: 35px;
}
.mg35 {
margin: 35px;
}
.pd35 {
padding: 35px;
}
.pdv35 {
padding: 0 35px;
}
.pdT35 {
padding-top: 35px;
}
.pdL35 {
padding-left: 35px;
}
.pdR35 {
padding-right: 35px;
}
.pdB35 {
padding-bottom: 35px;
}
.mgT40 {
margin-top: 40px;
}
.mgL40 {
margin-left: 40px;
}
.mgR40 {
margin-right: 40px;
}
.mgB40 {
margin-bottom: 40px;
}
.mg40 {
margin: 40px;
}
.pd40 {
padding: 40px;
}
.pdv40 {
padding: 0 40px;
}
.pdT40 {
padding-top: 40px;
}
.pdL40 {
padding-left: 40px;
}
.pdR40 {
padding-right: 40px;
}
.pdB40 {
padding-bottom: 40px;
}
.mgT45 {
margin-top: 45px;
}
.mgL45 {
margin-left: 45px;
}
.mgR45 {
margin-right: 45px;
}
.mgB45 {
margin-bottom: 45px;
}
.mg45 {
margin: 45px;
}
.pd45 {
padding: 45px;
}
.pdv45 {
padding: 0 45px;
}
.pdT45 {
padding-top: 45px;
}
.pdL45 {
padding-left: 45px;
}
.pdR45 {
padding-right: 45px;
}
.pdB45 {
padding-bottom: 45px;
}
html,
body {
height: 100%;
min-width: 1200px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
outline: none;
}
flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
input,
textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow: hidden;
}
.tl {
text-align: left;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.ellipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline {
display: inline-block;
*display: inline;
*zoom: 1;
}
.BTN-Blue {
cursor: pointer;
height: 0.6rem;
width: 2.5rem;
border: none;
border-radius: 0.35rem;
font-size: 0.2rem;
color: #fff;
align-items: center;
background: #029ae1 linear-gradient(to right, rgba(2, 154, 225, 0), #67e9b4);
position: relative;
top: 0;
left: 0;
padding-right: 0.45rem;
transition: background-color 0.5s;
}
.BTN-Blue::before {
background: #fff;
border-radius: 50%;
color: #029ae1;
line-height: 0.45rem;
text-align: center;
transform: translateY(-50%);
font-size: 0.22rem;
position: absolute;
top: 50%;
right: 0.1rem;
display: inline-block;
content: ">";
width: 0.45rem;
height: 0.45rem;
}
.BTN-Blue:hover {
background-color: #044be1;
}
.BTN-White {
cursor: pointer;
height: 0.6rem;
width: 2.5rem;
border: none;
border-radius: 0.35rem;
border: #fff solid 1px;
font-size: 0.2rem;
color: #fff;
align-items: center;
position: relative;
top: 0;
left: 0;
padding-right: 0.45rem;
background: rgba(2, 44, 150, 0);
}
.BTN-White::before {
background: #fff;
border-radius: 50%;
color: #022c96;
line-height: 0.45rem;
text-align: center;
transform: translateY(-50%);
font-size: 0.22rem;
position: absolute;
top: 50%;
right: 0.1rem;
display: inline-block;
content: ">";
width: 0.45rem;
height: 0.45rem;
}
.BTN-White:hover {
font-weight: bold;
}
button {
outline: none;
}
button:focus {
outline: 0;
}
.h100 {
height: 100%;
}
src/less/index.less 0 → 100644
@import './pub.less';
html,body{
height: 100%;
min-width:1200px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
*{box-sizing: border-box;}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
outline: none;
}
flex{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
// table {
// border-collapse: collapse;
// border-spacing: 0;
// }
input, textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow:hidden;
}
.tl {
text-align: left;
}
.tc {
text-align: center
}
.tr {
text-align: right;
}
//文本省略号
.ellipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline{
display: inline-block;
*display: inline;
*zoom: 1;
}
// @media (min-width: 1200px){
// body{font-size: 12px}
// } /*>=1200的设备*/
// // @media (min-width: 1100px) {
// // body{font-size: 14px}
// // } /*>=1100的设备*/
// @media (min-width: 1280px) {
// body{font-size: 14px;}
// } /*>=1280的设备*/
// @media (min-width: 1366px) {
// body{font-size: 16px;}
// }
// @media (min-width: 1440px) {
// body{font-size: 18px !important;}
// }
// @media (min-width: 1680px) {
// body{font-size: 20px;}
// }
// @media (min-width: 1920px) {
// body{font-size: 22px;}
// }
.BTN-Blue{
cursor: pointer;
height: 60/@f;
width: 250/@f;
border:none;
border-radius:35/@f;
font-size:20/@f;color:#fff;
align-items: center;
background:rgba(2, 154, 225,1) linear-gradient(to right, rgba(2, 154, 225,0), rgba(103, 233, 180,1));
position: relative;top:0;left:0;padding-right:45/@f;
transition: background-color .5s;
&::before{
background:#fff;border-radius:50%;color:#029ae1;line-height:45/@f;text-align: center;
transform:translateY(-50%);font-size:22/@f;;
position: absolute;top:50%;right:10/@f;display: inline-block;content:">";width:45/@f;height:45/@f;
}
&:hover{
background-color:#044be1;
}
}
.BTN-White{
cursor: pointer;
height: 60/@f;
width: 250/@f;
border:none;
border-radius:35/@f;
border:#fff solid 1px;
font-size:20/@f;color:#fff;
align-items: center;
position: relative;top:0;left:0;padding-right:45/@f;
background: rgba(2, 44, 150,0);
&::before{
background:#fff;border-radius:50%;color:rgba(2, 44, 150,1);line-height:45/@f;text-align: center;
transform:translateY(-50%);font-size:22/@f;;
position: absolute;top:50%;right:10/@f;display: inline-block;content:">";width:45/@f;height:45/@f;
}
&:hover{
font-weight: bold;
}
}
// 去掉点击button蓝边
button{
outline:none;
&:focus{
outline: 0;
}
}
.h100{ height:100%;}
\ No newline at end of file
src/less/indexAnimated.css 0 → 100644
.hot-product-wrap .left-content {
transform: translate(0, -120px);
opacity: 0;
transition: all 1s;
}
.hot-product-wrap .right-content {
height: 500px;
transform: translate(0, -200px);
opacity: 1;
transition: all 1s;
}
.solution-info {
transform: translate(0, 200px);
opacity: 0;
transition: all 0.5s;
}
.solution-button {
transform: translate(0, 50px);
opacity: 0;
transition: all 0.5s;
}
.solution-right-div .right-img-sides:nth-child(1) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.solution-right-div .right-img-sides:nth-child(2) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.solution-right-div .right-img-center-container .right-img-center-sides:nth-child(1) {
transform: translate(100px, 100px);
opacity: 0;
transition: all 0.5s;
}
.solution-right-div .right-img-center-container .right-img-center:nth-child(2) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.solution-right-div .right-img-center-container .right-img-center-sides:nth-child(3) {
transform: translate(-100px, 100px);
opacity: 0;
transition: all 0.5s;
}
.Industry_Advantage_details {
margin-bottom: 50px;
}
.Industry_Advantage_details .Industry_Advantage_left {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.Industry_Advantage_details .Industry_Advantage_right {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.code-row-bg .bottom-img-item:nth-child(1) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.code-row-bg .bottom-img-item:nth-child(2) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.code-row-bg .bottom-img-item:nth-child(3) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.HotInformation_left {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.HotInformation_button {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.HotInformation_Journalism .HotInformation_Journalism_img {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(1) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(2) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-title {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-title-smail {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-text-info {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(1) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(2) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(3) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(4) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(5) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(6) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(7) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.customer-bottom-layout .bottom-img-item:nth-child(8) {
transform: translate(0, 100px);
opacity: 0;
transition: all 0.5s;
}
.ani-slide .hot-product-wrap .left-content,
.ani-slide-2 .hot-product-wrap .left-content {
transform: translate(0, -160px);
opacity: 1;
}
.ani-slide .hot-product-wrap .right-content,
.ani-slide-2 .hot-product-wrap .right-content {
transform: translate(0, -60px);
opacity: 1;
}
.ani-slide .solution-info,
.ani-slide-2 .solution-info {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.1s;
}
.ani-slide .solution-button,
.ani-slide-2 .solution-button {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.5s;
}
.ani-slide .solution-right-div .right-img-sides:nth-child(1),
.ani-slide-2 .solution-right-div .right-img-sides:nth-child(1) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.4s;
}
.ani-slide .solution-right-div .right-img-sides:nth-child(2),
.ani-slide-2 .solution-right-div .right-img-sides:nth-child(2) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.8s;
}
.ani-slide .solution-right-div .right-img-center-container,
.ani-slide-2 .solution-right-div .right-img-center-container {
transform: translate(0, 0);
opacity: 1;
}
.ani-slide .solution-right-div .right-img-center-container .right-img-center-sides:nth-child(1),
.ani-slide-2 .solution-right-div .right-img-center-container .right-img-center-sides:nth-child(1) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.2s;
}
.ani-slide .solution-right-div .right-img-center-container .right-img-center:nth-child(2),
.ani-slide-2 .solution-right-div .right-img-center-container .right-img-center:nth-child(2) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.1s;
}
.ani-slide .solution-right-div .right-img-center-container .right-img-center-sides:nth-child(3),
.ani-slide-2 .solution-right-div .right-img-center-container .right-img-center-sides:nth-child(3) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.6s;
}
.ani-slide .Industry_Advantage_details,
.ani-slide-2 .Industry_Advantage_details {
margin-bottom: 50px;
}
.ani-slide .Industry_Advantage_details .Industry_Advantage_left,
.ani-slide-2 .Industry_Advantage_details .Industry_Advantage_left {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .Industry_Advantage_details .Industry_Advantage_right,
.ani-slide-2 .Industry_Advantage_details .Industry_Advantage_right {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .code-row-bg .bottom-img-item:nth-child(1),
.ani-slide-2 .code-row-bg .bottom-img-item:nth-child(1) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .code-row-bg .bottom-img-item:nth-child(2),
.ani-slide-2 .code-row-bg .bottom-img-item:nth-child(2) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.4s;
}
.ani-slide .code-row-bg .bottom-img-item:nth-child(3),
.ani-slide-2 .code-row-bg .bottom-img-item:nth-child(3) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.6s;
}
.ani-slide .HotInformation_left,
.ani-slide-2 .HotInformation_left {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.1s;
}
.ani-slide .HotInformation_button,
.ani-slide-2 .HotInformation_button {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .HotInformation_Journalism .HotInformation_Journalism_img,
.ani-slide-2 .HotInformation_Journalism .HotInformation_Journalism_img {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.1s;
}
.ani-slide .HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(1),
.ani-slide-2 .HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(1) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(2),
.ani-slide-2 .HotInformation_Journalism .HotInformation_Journalism_ul ul:nth-child(2) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.3s;
}
.ani-slide .customer-title,
.ani-slide-2 .customer-title {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.2s;
}
.ani-slide .customer-title-smail,
.ani-slide-2 .customer-title-smail {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.4s;
}
.ani-slide .customer-text-info,
.ani-slide-2 .customer-text-info {
transform: translate(0, 0);
opacity: 0.6;
transition-delay: 0.6s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(1),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(1) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 0.8s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(2),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(2) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(3),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(3) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.1s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(4),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(4) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.2s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(5),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(5) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.3s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(6),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(6) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.4s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(7),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(7) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.5s;
}
.ani-slide .customer-bottom-layout .bottom-img-item:nth-child(8),
.ani-slide-2 .customer-bottom-layout .bottom-img-item:nth-child(8) {
transform: translate(0, 0);
opacity: 1;
transition-delay: 1.6s;
}
\ No newline at end of file
src/less/indexAnimated.less 0 → 100644
// .test{ width:200px; height:200px;
// margin-top: -500px; opacity: 1; transition: all 1s; border:1px solid red;}
// .ani-slide .test { margin-top: -10px; opacity: 1; transition-delay: 0.7s;}
// 热门产品
.hot-product-wrap{
.left-content{
transform: translate(0, -120px); opacity: 0; transition: all 1s;
}
.right-content{
height:500px;
transform: translate(0, 200px); opacity: 0; transition: all 1s;
}
}
// 3解决方案
.solution-info{
transform: translate(0, 200px); opacity: 0; transition: all 0.5s;
}
.solution-button{
transform: translate(0, 50px); opacity: 0; transition: all 0.5s;
}
.solution-right-div{
.right-sides-img-container {
.sides-img-left {
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.sides-img-right {
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
}
.right-img-center-container{
.img-center-left{
transform: translate(100px, 100px); opacity: 0; transition: all 0.5s;
}
.img-center{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.img-center-right{
transform: translate(-100px, 100px); opacity: 0; transition: all 0.5s;
}
}
}
// 4行业优势
.Industry_Advantage_details{
margin-bottom: 50px;
.Industry_Advantage_left{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.Industry_Advantage_right{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
}
.code-row-bg{
.bottom-img-item:nth-child(1){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(2){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(3){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
}
// 5热点资讯
.HotInformation_left{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.HotInformation_button{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.HotInformation_Journalism{
.HotInformation_Journalism_img{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.HotInformation_Journalism_ul{
ul:nth-child(1){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
ul:nth-child(2){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
}
}
// 优质客户
.customer-title{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.customer-title-smail{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.customer-text-info{
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.customer-bottom-layout{
.bottom-img-item:nth-child(1){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(2){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(3){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(4){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(5){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(6){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(7){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
.bottom-img-item:nth-child(8){
transform: translate(0, 100px); opacity: 0; transition: all 0.5s;
}
}
.ani-slide,.ani-slide-2{
// 热门产品 active
.hot-product-wrap{
.left-content{
transform: translate(0, -160px);
opacity: 1;
}
.right-content{
transform: translate(0, -60px); opacity: 1;
}
}
// 3解决方案 active
.solution-info{
transform: translate(0, 0); opacity: 1; transition-delay: 0.1s;
}
.solution-button{
transform: translate(0, 0); opacity: 1; transition-delay: 0.5s;
}
.solution-right-div{
.right-sides-img-container {
.sides-img-left {
transform: translate(0, 0); opacity: 1; transition-delay: 0.4s;
}
.sides-img-right {
transform: translate(0, 0); opacity: 1; transition-delay: 0.8s;
}
}
.right-img-center-container{
transform: translate(0, 0); opacity: 1;
.img-center-left{
transform: translate(0, 0); opacity: 1; transition-delay: 1.2s;
}
.img-center{
transform: translate(0, 0); opacity: 1; transition-delay: 0.1s;
}
.img-center-right{
transform: translate(0, 0); opacity: 1; transition-delay: 1.6s;
}
}
}
// 4行业优势 active
.Industry_Advantage_details{
margin-bottom: 50px;
.Industry_Advantage_left{
transform: translate(0, 0); opacity: 1; transition-delay: 0.2s;
}
.Industry_Advantage_right{
transform: translate(0, 0); opacity: 1; transition-delay: 0.2s;
}
}
.code-row-bg{
.bottom-img-item:nth-child(1){
transform: translate(0, 0); opacity: 1; transition-delay: 0.2s;
}
.bottom-img-item:nth-child(2){
transform: translate(0, 0); opacity: 1; transition-delay: 0.4s;
}
.bottom-img-item:nth-child(3){
transform: translate(0, 0); opacity: 1; transition-delay: 0.6s;
}
}
// 5热点资讯 active
.HotInformation_left{
transform: translate(0, 0); opacity: 1; transition-delay: 0.1s;
}
.HotInformation_button{
transform: translate(0, 0); opacity: 1; transition-delay: 0.2s;
}
.HotInformation_Journalism{
.HotInformation_Journalism_img{
transform: translate(0, 0); opacity: 1; transition-delay: 0.1s;
}
.HotInformation_Journalism_ul{
ul:nth-child(1){
transform: translate(0, 0); opacity: 1; transition-delay: 0.2s;
}
ul:nth-child(2){
transform: translate(0, 0); opacity: 1; transition-delay:0.3s;
}
}
}
// 优质客户 active
.customer-title{
transform: translate(0, 0); opacity: 1; transition-delay:0.2s;
}
.customer-title-smail{
transform: translate(0, 0); opacity: 1; transition-delay:0.4s;
}
.customer-text-info{
transform: translate(0, 0); opacity: 0.6; transition-delay:0.6s;
}
.customer-bottom-layout{
.bottom-img-item:nth-child(1){
transform: translate(0, 0); opacity: 1; transition-delay:0.8s;
}
.bottom-img-item:nth-child(2){
transform: translate(0, 0); opacity: 1; transition-delay:1s;
}
.bottom-img-item:nth-child(3){
transform: translate(0, 0); opacity: 1; transition-delay:1.1s;
}
.bottom-img-item:nth-child(4){
transform: translate(0, 0); opacity: 1; transition-delay:1.2s;
}
.bottom-img-item:nth-child(5){
transform: translate(0, 0); opacity: 1; transition-delay:1.3s;
}
.bottom-img-item:nth-child(6){
transform: translate(0, 0); opacity: 1; transition-delay:1.4s;
}
.bottom-img-item:nth-child(7){
transform: translate(0, 0); opacity: 1; transition-delay:1.5s;
}
.bottom-img-item:nth-child(8){
transform: translate(0, 0); opacity: 1; transition-delay:1.6s;
}
}
}
src/less/pub.css 0 → 100644
.mgT5 {
margin-top: 5px;
}
.mgL5 {
margin-left: 5px;
}
.mgR5 {
margin-right: 5px;
}
.mgB5 {
margin-bottom: 5px;
}
.mg5 {
margin: 5px;
}
.pd5 {
padding: 5px;
}
.pdv5 {
padding: 0 5px;
}
.pdT5 {
padding-top: 5px;
}
.pdL5 {
padding-left: 5px;
}
.pdR5 {
padding-right: 5px;
}
.pdB5 {
padding-bottom: 5px;
}
.mgT10 {
margin-top: 10px;
}
.mgL10 {
margin-left: 10px;
}
.mgR10 {
margin-right: 10px;
}
.mgB10 {
margin-bottom: 10px;
}
.mg10 {
margin: 10px;
}
.pd10 {
padding: 10px;
}
.pdv10 {
padding: 0 10px;
}
.pdT10 {
padding-top: 10px;
}
.pdL10 {
padding-left: 10px;
}
.pdR10 {
padding-right: 10px;
}
.pdB10 {
padding-bottom: 10px;
}
.mgT15 {
margin-top: 15px;
}
.mgL15 {
margin-left: 15px;
}
.mgR15 {
margin-right: 15px;
}
.mgB15 {
margin-bottom: 15px;
}
.mg15 {
margin: 15px;
}
.pd15 {
padding: 15px;
}
.pdv15 {
padding: 0 15px;
}
.pdT15 {
padding-top: 15px;
}
.pdL15 {
padding-left: 15px;
}
.pdR15 {
padding-right: 15px;
}
.pdB15 {
padding-bottom: 15px;
}
.mgT20 {
margin-top: 20px;
}
.mgL20 {
margin-left: 20px;
}
.mgR20 {
margin-right: 20px;
}
.mgB20 {
margin-bottom: 20px;
}
.mg20 {
margin: 20px;
}
.pd20 {
padding: 20px;
}
.pdv20 {
padding: 0 20px;
}
.pdT20 {
padding-top: 20px;
}
.pdL20 {
padding-left: 20px;
}
.pdR20 {
padding-right: 20px;
}
.pdB20 {
padding-bottom: 20px;
}
.mgT25 {
margin-top: 25px;
}
.mgL25 {
margin-left: 25px;
}
.mgR25 {
margin-right: 25px;
}
.mgB25 {
margin-bottom: 25px;
}
.mg25 {
margin: 25px;
}
.pd25 {
padding: 25px;
}
.pdv25 {
padding: 0 25px;
}
.pdT25 {
padding-top: 25px;
}
.pdL25 {
padding-left: 25px;
}
.pdR25 {
padding-right: 25px;
}
.pdB25 {
padding-bottom: 25px;
}
.mgT30 {
margin-top: 30px;
}
.mgL30 {
margin-left: 30px;
}
.mgR30 {
margin-right: 30px;
}
.mgB30 {
margin-bottom: 30px;
}
.mg30 {
margin: 30px;
}
.pd30 {
padding: 30px;
}
.pdv30 {
padding: 0 30px;
}
.pdT30 {
padding-top: 30px;
}
.pdL30 {
padding-left: 30px;
}
.pdR30 {
padding-right: 30px;
}
.pdB30 {
padding-bottom: 30px;
}
.mgT35 {
margin-top: 35px;
}
.mgL35 {
margin-left: 35px;
}
.mgR35 {
margin-right: 35px;
}
.mgB35 {
margin-bottom: 35px;
}
.mg35 {
margin: 35px;
}
.pd35 {
padding: 35px;
}
.pdv35 {
padding: 0 35px;
}
.pdT35 {
padding-top: 35px;
}
.pdL35 {
padding-left: 35px;
}
.pdR35 {
padding-right: 35px;
}
.pdB35 {
padding-bottom: 35px;
}
.mgT40 {
margin-top: 40px;
}
.mgL40 {
margin-left: 40px;
}
.mgR40 {
margin-right: 40px;
}
.mgB40 {
margin-bottom: 40px;
}
.mg40 {
margin: 40px;
}
.pd40 {
padding: 40px;
}
.pdv40 {
padding: 0 40px;
}
.pdT40 {
padding-top: 40px;
}
.pdL40 {
padding-left: 40px;
}
.pdR40 {
padding-right: 40px;
}
.pdB40 {
padding-bottom: 40px;
}
.mgT45 {
margin-top: 45px;
}
.mgL45 {
margin-left: 45px;
}
.mgR45 {
margin-right: 45px;
}
.mgB45 {
margin-bottom: 45px;
}
.mg45 {
margin: 45px;
}
.pd45 {
padding: 45px;
}
.pdv45 {
padding: 0 45px;
}
.pdT45 {
padding-top: 45px;
}
.pdL45 {
padding-left: 45px;
}
.pdR45 {
padding-right: 45px;
}
.pdB45 {
padding-bottom: 45px;
}
src/less/pub.less 0 → 100644
.margin(@i)when(@i<50){
.mgT@{i}{margin-top:1px*@i}
.mgL@{i}{margin-left:1px*@i}
.mgR@{i}{margin-right:1px*@i}
.mgB@{i}{margin-bottom:1px*@i}
.mg@{i}{margin:1px*@i}
.pd@{i}{padding:1px*@i}
.pdv@{i}{padding:0 1px*@i}
.pdT@{i}{padding-top:1px*@i}
.pdL@{i}{padding-left:1px*@i}
.pdR@{i}{padding-right:1px*@i}
.pdB@{i}{padding-bottom:1px*@i}
.margin(@i+5);
}
.margin(5);
@f:100rem;
src/router/index.js 0 → 100644
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
import Layout from "@/components/layout/Layout.vue";
let RT = new Router({
mode: 'history',
base: `${process.env.BASE_URL}`, //process.env.BASE_URL,
routes: [{
path: '/',
name: "pc",
exact: true,
component: Layout,
redirect: { name: "demo" },
children: [
{
path: "/demo",
exact: true,
name: "demo",
component: () =>import ( /* webpackChunkName: "demo" */ '@/views/demo/index.vue'),
},
]
},
]
});
RT.beforeEach((to, from, next) => {
next();
})
export default RT;
\ No newline at end of file
src/service/Service.js 0 → 100644
/**
* @name 此页面使用公共返回数据
*/
import Axios,{URL} from "@/service/index";
@Axios
class index{
GET(url,params){
return this.$axios.get(url,params)
.then(d=>{
return d;
})
}
POST(url,data){
return this.$axios.post(url,data)
.then(d=>{
return d;
})
}
}
export {
URL
}
export default new index;
\ No newline at end of file
src/service/axios.js 0 → 100644
"use strict";
import Vue from 'vue';
import axios from "axios";
import configs from "./config";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//axios.defaults.headers.post['Content-Type'] = 'application/json';
let config = {
// baseURL: process.env.baseURL || process.env.apiUrl || ""
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
//debugger
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
if("data" in response){
// debugger
return configs.success(response.data)
}
console.log("非标准输出！")
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
Plugin.install = function(Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
};
Vue.use(Plugin)
export default Plugin;
src/service/config.js 0 → 100644
export default {
success(da){
// debugger
// console.log(da)
if(!da){ return []}
let {data}=da;
if(data){
// if(!'data' in data||!data['data']){ return Promise.reject(data.message)}
return data;
}else if('data' in da){
if(!da['data']){
return Promise.reject(da);
}
return da;
}else{
return Promise.reject(data.message);
}
},
error(e){
if (e.response){
let errors = e.response.data;
switch (e.response.status) {
case 401:
console.info("无获取数据权限");
break;
case 404:{
console.error(errors.message)
}break;
default :{
console.error(errors["exceptionMessage"]||errors["message"])
}break;
}
}else{
if(typeof e == "string"){
console.log(e);
}else if(e.message.includes("Network Error")){
console.log("网络较弱！")
}else if(e.message.includes('timeout')){
console.log('请求超时！');
}else{
console.log(e.message);
}
}
return Promise.reject(e);
}
}
\ No newline at end of file
src/service/index.js 0 → 100644
//import axios from "axios";
import store from "@/vuex";
let Axios,success, error;
/**
* @name 统一处理url
* @param {prams} 需要请求的路径
*/
URL=(prams,query=null)=>{
// console.log(process.env);
let url = `${process.env.VUE_APP_URL}${prams.replace(/^\//ig,"")}`;
if(query){
let str = JSON.stringify(query);
str = str.replace(/[{}]/ig,"").replace(/\:/ig,"=").replace(/\,/ig,"&").replace(/["']/ig,"");
url += url.includes("?")? `&${str}`:`?${str}`;
}
return url;
}
export default Axios = (target,name,description)=>{
Object.assign(target.prototype, {
URL,
store,
$axios:axios
})
return target
}
src/service/mocker/index.js 0 → 100644
let config = {
'GET /api': {
code: 200,
data: [{ demo: "demo" }],
success: "ok"
},
'POST /demo': {
code: 200,
data: [
{
src: '../../../assets/index_img/hot_product/analysis.png',
title: '智能营销助手平台',
detail: '是一款以新型展业模式为核心的移动互联网营销可视化管理平台，通过大数据精准营销策略，对客户数据进行画像分析，形成精准匹配的产品推荐，促使展业过程更加专业、顺利的进行。为企业全方位掌握客户关系、更加优质服务客户、最终促成保单的形成提供强有力的数据支持。'
},
{
src: '@/assets/index_img/hot_product/analysis.png',
title: '智能客服应用',
detail: '加专业、顺利的进行。为企业全方位掌握客户关系、更加优质服务客户、最终促成保单的形成提供强有力的数据支持。'
},
{
src: '@/assets/index_img/hot_product/analysis.png',
title: '移动营销平台',
detail: '是一款以新型展业模式为核心的移动互联网营销可视化管理平台，通过大数据精准营销策略，对客户数据进行画像分析，形成精准匹配的产品推荐，促使展业过程更加专业、顺利的进行。为企业全方位掌握客户关系、更加优质服务客户、最终促成保单的形成提供强有力的数据支持。'
},
{
src: '@/assets/index_img/hot_product/analysis.png',
title: '产品推荐应用',
detail: '是一款以新型展业模式为核心的移动互联网营销可视化管理平台，通过大数据精准营销策略，对客户数据进行画像分析，是一款以新型展业模式为核心的移动互联网营销可视化管理平台，通过大数据精准营销策略，对客户数据进行画像分析，形成精准匹配的产品推荐，促使展业过程更加专业、顺利的进行。为企业全方位掌握客户关系、更加优质服务客户、最终促成保单的形成提供强有力的数据支持。'
},
{
src: '@/assets/index_img/hot_product/analysis.png',
title: '移动营销平台',
detail: '是一款以新型展业模式为核心的移动互联网营销可视化管理平台，通过大数据精准营销策略，对客户数据进行画像分析，形成精准匹配的产品推荐，促使展业过程更加专业、顺利的进行。为企业全方位掌握客户关系、更加优质服务客户、最终促成保单的形成提供强有力的数据支持。'
}],
success: "ok"
},
}
Object.assign(
config,
);
module.exports = config;
\ No newline at end of file
src/utils/base.js 0 → 100644
export function isIE(){
if(!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
src/utils/includes.js 0 → 100644
import Vue from "vue";
import {Affix ,
Alert ,
Anchor ,
AnchorLink ,
AutoComplete ,
Avatar ,
BackTop ,
Badge ,
Breadcrumb ,
Button ,
Card ,
Carousel ,
Cascader ,
Cell ,
Checkbox ,
Circle ,
Collapse ,
ColorPicker ,
Content ,
DatePicker ,
Divider ,
Drawer ,
Dropdown ,
Footer ,
Form ,
Header ,
Icon ,
Input ,
InputNumber ,
Scroll ,
Split ,
Layout ,
LoadingBar ,
Menu ,
Message ,
Modal ,
Notice ,
Page ,
Poptip ,
Progress ,
Radio ,
Rate ,
Sider ,
Slider ,
Spin ,
Steps ,
Switch ,
Table ,
Tabs ,
Tag ,
// Time ,
// Timeline ,
// TimePicker ,
Tooltip ,
Transfer ,
Tree ,
Upload ,
Row, Col,
Select, Option, OptionGroup,
locale }from "iview";
const components = {
Affix,
Alert,
Anchor,
AnchorLink,
AutoComplete,
Avatar,
BackTop,
Badge,
Breadcrumb,
BreadcrumbItem: Breadcrumb.Item,
Button,
ButtonGroup: Button.Group,
Card,
Carousel,
CarouselItem: Carousel.Item,
Cascader,
Cell,
CellGroup: Cell.Group,
Checkbox,
CheckboxGroup: Checkbox.Group,
Col,
Collapse,
ColorPicker,
Content: Content,
//DatePicker,
Divider,
Drawer,
Dropdown,
DropdownItem: Dropdown.Item,
DropdownMenu: Dropdown.Menu,
Footer: Footer,
Form,
FormItem: Form.Item,
Header: Header,
Icon,
Input,
InputNumber,
Scroll,
Sider: Sider,
Split,
Submenu: Menu.Sub,
Layout: Layout,
LoadingBar,
Menu,
MenuGroup: Menu.Group,
MenuItem: Menu.Item,
Message,
Modal,
Notice,
Option: Option,
OptionGroup,
Page,
Panel: Collapse.Panel,
Poptip,
Progress,
Radio,
RadioGroup: Radio.Group,
Rate,
Row,
Select,
Slider,
Spin,
Step: Steps.Step,
Steps,
Table,
Tabs: Tabs,
TabPane: Tabs.Pane,
Tag,
// Time,
// Timeline,
// TimelineItem: Timeline.Item,
// TimePicker,
Tooltip,
Transfer,
Tree,
Upload
};
const iview = {
...components,
iButton: Button,
iCircle: Circle,
iCol: Col,
iContent: Content,
iForm: Form,
iFooter: Footer,
iHeader: Header,
iInput: Input,
iMenu: Menu,
iOption: Option,
iProgress: Progress,
iSelect: Select,
iSwitch: Switch,
iTable: Table,
//iTime: Time
};
for(let item in iview){
Vue.component(item,iview[item])
}
// Vue.component("Row",components.Row)
// Vue.component("Col",components.Col)
// Vue.component("Menu",components.Menu)
// Vue.component("MenuItem",components.MenuItem)
// Vue.component("Icon",components.Icon)
// Vue.component("Button",components.Button)
// Vue.component("Breadcrumb",components.Breadcrumb)
// Vue.component("BreadcrumbItem",components.BreadcrumbItem)
src/utils/index.js 0 → 100644
/**
* store
* RevertURL 记录登陆返回数据路由
*/
const $sinoocean = '$polysoft_'
// let _Private=new Proxy({
// height:0
// },{
// get(target,key){return target[key]},
// set(target,key,val){
// target[key]=val;
// }
// })
// let _Private={};
// Object.defineProperty(_Private, "height", {
// get :()=>{
// debugger
// },
// set :(newValue)=>{
// debugger
// },
// enumerable : true,
// configurable : true
// });
class utils {
constructor() {
this.lock = false
}
//守卫
Guard() {}
storeSet(key, val, time) {
if (!val) {
return key
}
let name = key.includes($sinoocean) ? key : $sinoocean + key
let opt = {
key: name,
val,
type: this.isType(val),
createTime: Date.now(),
time
}
sessionStorage.setItem(name, JSON.stringify(opt))
}
storeGet(key) {
let name = key.includes($sinoocean) ? key : $sinoocean + key
let date = Date.now()
let data = sessionStorage.getItem(name)
if (data) {
let da = JSON.parse(data)
if (da.time && da.time >= date) {
this.storeDel(name)
}
return da.val
} else {
return null
}
}
storeDel(key) {
if (key && this.isType(key) == 'String') {
let name = $sinoocean + key
key.includes($sinoocean)
? sessionStorage.removeItem(key)
: sessionStorage.removeItem(name)
}
}
storeAll() {
let item = sessionStorage,
list = []
for (let i = 0; i < item.length; i++) {
let keys = sessionStorage.key(i)
if (keys.includes($sinoocean)) {
list.push(this.getItem(keys))
}
}
return list
}
//常用呢类型判断
isType(obj) {
if (obj) {
return /\[object(.*?)\]/gi
.exec(Object.prototype.toString.call(obj))[1]
.trim()
}
return 'undefined'
}
URL(url = location.search) {
if (!url) {
return ''
}
return new Function(
"return {'" +
(url.includes('?') ? url.substr(1) : url)
.split('&')
.join("','")
.replace(/\=/gi, "':'") +
"'}"
)()
}
reView(arg) {}
//处理application/x-www-form-urlencoded 格式参数
ParseParam(da) {
let str = ''
for (let it in da) {
str += encodeURIComponent(it) + '=' + encodeURIComponent(da[it]) + '&'
}
return str.replace(/\&$/gi, '')
}
//
Fetch(opt) {
const { url, ...params } = opt
if (!url) {
console.error('url缺失！')
return
}
let requestInfo = {
method: params['method'] ? params.method : 'POST',
mode: 'cors',
cache: 'no-cache',
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}
}
Object.assign(requestInfo.headers, params.headers)
let ParamsStr = this.ParseParam(params.data)
let _URL
if (requestInfo.method.toLocaleLowerCase() == 'post') {
_URL = url
requestInfo.body = ParamsStr
} else {
//get请求添加时间戳
ParamsStr = ParamsStr
? `${ParamsStr}&t=${new Date().getTime()}`
: `t=${new Date().getTime()}`
_URL = url.includes('?') ? url + '&' + ParamsStr : url + '?' + ParamsStr
}
return fetch(_URL, requestInfo)
.then(res => {
if (res.status >= 400) {
return Promise.reject(res)
}
return res
.json()
.then(arg => {
return arg
})
.catch(e => {
return Promise.reject({
ErrorCode: '500',
Data: requestInfo,
Message: `服务器错误`,
url: _URL
})
})
})
.catch(res => {
return Promise.reject(res)
// if (res["ErrorCode"] && res.ErrorCode == "200") {
// return res;
// } else if (res["ErrorCode"] && res.ErrorCode == "401") {
// debugger
// } else if (res["ErrorCode"] && res.ErrorCode == "500") {
// return Promise.reject(res)
// } else {
// return Promise.reject(res);
// }
})
}
//ajax
Ajax(params) {
let th = this;
let { url, ...opt } = params
return new Promise((resolve, reject) => {
var data = this.ParseParam(opt.data)
if(opt.method=='get'){
url = url.includes("?")? url+=data:url+'?'+data;
}
var xhr;
if (window.ActiveXObject){
xhr =new ActiveXObject("Msxml2.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
xhr.addEventListener('readystatechange', function() {
if (this.readyState == 4) {
switch(th.isType(this.responseText))
{
case 'String': resolve(JSON.parse(this.responseText))
}
// if (this.status == 400) {
// //reject(this)
// } else if (this.status == 401) {
// reject(this)
// } else if (this.status == 200) {
// resolve(this.responseText)
// }
// console.log(this.responseText);
}
})
xhr.addEventListener('error', e => {
reject(e)
// debugger
})
xhr.addEventListener('abort', () => {
reject(e)
// debugger
})
xhr.open(opt.method || 'post', url,true)
// xhr.withCredentials = false;
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('cache-control', 'no-cache')
// xhr.setRequestHeader('Accept', 'application/json')
//xhr.setRequestHeader("postman-token", "f26d82e7-48d2-3037-039a-fc92f1ebc3a9");
if(opt.method=='post'){
xhr.send(data||null)
}else{
xhr.send();
}
})
}
//废弃
postman(code) {
var data =
'client_id=MyWfAppName&grant_type=authorization_code&client_secret=&code=' +
code
var xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.addEventListener('readystatechange', function() {
if (this.readyState === 4) {
console.log(this.responseText)
}
})
xhr.open(
'POST',
'https://workflow-dev.sinoocean-test.com/THRWebApi/passport/oauth/token'
)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('cache-control', 'no-cache')
xhr.send(data)
}
exportExcel(response, fileName) {
var blob = new Blob([response], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
var objectUrl = URL.createObjectURL(blob)
if (objectUrl != null && objectUrl.length < 44) {
window.navigator.msSaveOrOpenBlob(blob, fileName)
} else {
var span = document.createElement('span')
span.setAttribute('id', 'downFile')
var aForExcel = document.createElement('a')
aForExcel.setAttribute('download', fileName)
aForExcel.setAttribute('href', objectUrl)
aForExcel.appendChild(span)
document.getElementById('body').appendChild(aForExcel)
document.getElementById('downFile').click()
aForExcel.remove()
}
}
}
let setT
function resize(ev) {
//触发重绘
if (setT) clearTimeout(setT)
setT = setTimeout(() => {
let _h = Math.max(document.body.offsetHeight, 760)
}, 500)
}
//window.addEventListener("resize",resize,false);
let _utils = new utils();
export default _utils
/**非标准组建 */
if(!('flat' in Array.prototype)){
Array.prototype.flat=function(){
// console.log('IE',this);
let arr = [];
let macks =(item)=>{
item.forEach(el => {
if(Array.isArray(el)){
macks(el)
}else{
arr.push(el);
}
});
}
macks(this);
return arr.filter(d=>d!=null);
}
}
\ No newline at end of file
src/utils/vueDirective.js 0 → 100644
import Vue from "vue";
let demo = (Vue,opt)=>{
Vue.directive({
inserted(el,binds,vnode,ovnode){
}
})
}
Vue.use(demo)
src/views/404.vue 0 → 100644
<template>
<transition name="fade">
<article class="404">
404
</article>
</transition>
</template>
<style scoped>
</style>
<script>
export default {
}
</script>
\ No newline at end of file
src/views/Login.vue 0 → 100644
<template>
<transition name="fade">
<article class="Login">
Login
</article>
</transition>
</template>
<style scoped>
</style>
<script>
export default {
}
</script>
\ No newline at end of file
src/views/demo/index.less 0 → 100644
File mode changed
src/views/demo/index.vue 0 → 100644
<template>
<transition name="fade">
<article>
demo
</article>
</transition>
</template>
<style scoped>
</style>
<script>
import {mapActions,mapMutations} from "vuex";
export default {
created(){
}
}
</script>
\ No newline at end of file
src/vuex/AffixBox.js 0 → 100644
export default {
namespaced:true,
state: {
current:null
},
getters:{
},
mutations:{
MSetCurrent:(state,value)=>{
state.current = value
}
},
actions:{
ASetCurrent({dispatch,commit,state,computed}){
}
}
}
src/vuex/index.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import pc from "./pc";
import AffixBox from "./AffixBox";
const store = new Vuex.Store({
modules: {
pc,AffixBox
}
})
export default store;
src/vuex/pc.js 0 → 100644
//岗位
import $http,{URL} from "@/service/Service";
export default {
namespaced:true,
state: {
demo:[],
activeClass:JSON.parse(sessionStorage.getItem('activeClass'))?JSON.parse(sessionStorage.getItem('activeClass')):0,//首页菜单选中状态
MenuFlag:{
showMenuFlag:false,
contactUs:true
}
},
getters:{
},
mutations:{
MSetdemo(state,data){
state.demo = data;
},
// 改变首页菜单选中状态
setActiveClass(state,data){
state.activeClass = data
sessionStorage.setItem('activeClass',JSON.stringify(data));
},
// 首页菜单显示隐藏
MShowMenu(state,data){
state.MenuFlag.showMenuFlag = data.menu
state.MenuFlag.contactUs = data.us
},
},
actions:{
ASetdemo({dispatch,commit,state,computed}){
return $http.GET(URL("/api"))
.then(d=>{
commit("MSetdemo",d.data)
})
}
}
}
\ No newline at end of file
vue.config.js 0 → 100644
const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const apiMocker = require('mocker-api');
module.exports = {
publicPath:"./",
pages:{
app:{
entry:'./src/entry/app.js',
template:path.join(__dirname,"public/index.html"),
filename:"index.html",
title:"首页",
//chunks:[...chunks,"app"]
}
},
css:{
extract:false,
},
//配置文件
chainWebpack:config=>{
const entry = config.entry('app')
entry
.add('babel-polyfill')
.end()
entry
.add('classlist-polyfill')
.end()
config.module
.rule('iview')
.test(/iview.src.*?js$/)
.use('babel')
.loader('babel-loader')
.end()
},
configureWebpack:{
resolve:{
alias: {
// "@src":path.join(__dirname,"/src")
}
},
plugins:[
// new webpack.DefinePlugin({
// VERSION:1
// })
]
},
devServer: {
host:"127.0.0.1",
before:(app, server)=>{
apiMocker(app,path.join(__dirname,"/src/service/mocker/index.js"),{
})
}
}
}
yarn.lock 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!