Commit 1dfd230f authored by leiqingsong's avatar leiqingsong

Merge branch 'master' of http://114.67.93.201/xulili/ybf

parents e50970da fbeb2c85
...@@ -11,29 +11,31 @@ ...@@ -11,29 +11,31 @@
"build:prod": "vue-cli-service build --mode prod" "build:prod": "vue-cli-service build --mode prod"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.1", "axios": "^0.19.2",
"core-js": "^3.4.4", "core-js": "^3.4.4",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"jssdk": "^0.0.1", "jssdk": "^0.0.1",
"vant": "^2.5.9", "vant": "^2.5.9",
"vconsole": "^3.3.4",
"vee-validate": "^3.2.5",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.3", "vue-router": "^3.1.6",
"vuex": "^3.1.2", "vuex": "^3.1.3",
"wangeditor": "^3.1.1" "wangeditor": "^3.1.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-babel": "^4.2.3",
"@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-eslint": "^4.2.3",
"@vue/cli-service": "^4.1.0", "@vue/cli-service": "^4.2.3",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.1.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-pxtorem": "^4.0.1", "postcss-pxtorem": "^4.0.1",
"quill-image-extend-module": "^1.1.2", "quill-image-extend-module": "^1.1.2",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
} }
} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>专柜首页</title>
<link rel="stylesheet" href="../css/swiper.css" />
<link rel="stylesheet" href="../css/iconfont.css">
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
padding: 0;
margin: 0;
}
/* .swiper-container {
height: 400px;
} */
.list {
height: auto;
width: 100%;
background-color: #fff;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid rgba(238, 238, 238, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
border-radius: 4px;
z-index: 100;
}
.left {
width: 30%;
}
.left img {
width: 160px;
}
.right {
width: 76%;
padding: 20px;
background-color: #fff;
height: auto;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 28px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.txt {
margin-top: 20px;
font-size: 24px;
color: rgba(45, 71, 106, 0.8);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba2.png" alt="">
</div>
<div class="swiper-slide">
<img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba3.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="list">
<div class="left flex">
<img src="../img/counter.png" alt="" />
</div>
<div class="right">
<div class="title">欧亚一号专柜</div>
<div class="txt">
<i class="iconfont icon-dianhua" style="font-size: 16px;"></i>
<span>18888888888</span>
</div>
<div class="txt">
<i class="iconfont icon-dizhi" style="font-size: 16px;"></i>
<span>欧亚商场一楼181号</span>
</div>
</div>
</div>
<script>
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg)
var context = ""
if (r != null)
context = r[2]
reg = null
r = null
return context == null || context == "" || context == "undefined" ? "" : context;
}
// alert(GetQueryString("storeCode"))
const storecode = GetQueryString("storeCode")
$(function () {
showQRInfo()
});
const showQRInfo = () => {
// let pageUri = `${nowUrl}&detailid=${voucherId}&actionid=${activeId}&unionid=${unionId}`;
// let storecode = "181"
let pageUri = `pages/user/register/register?storeCode=${storecode}`
let pageUrl = `http://139.155.48.151:8085/workWx/auth/oauth2/wxMiniQrCode?pageUri=${pageUri}`;
$.ajax({
type: "POST",
url: pageUrl,
data: {},
success: function (res) {
$('#image').attr('src', res.data)
},
error: function (data) {
}
});
}
// 轮播图
/* swiper轮播组件 */
var swiper = new Swiper('.swiper-container', {
autoplay: true,
pagination: {
el: '.swiper-pagination',
},
});
/*鼠标移入停止轮播,鼠标离开 继续轮播*/
$('.swiper-container').mouseenter(function () {
swiper.stopAutoplay();
}).mouseleave(function () {
swiper.startAutoplay();
})
// $(function () {
// $.ajax({
// type: 'GET',
// url: 'a.json',
// success: function (data) {
// var str = "";
// for (i = 0; i < data.list.length; i++) {
// var _data = data.list[i];
// str += '<div class="swiper-slide"><a href="'+_data.URL+'">' +
// '<img src="'+_data.Pic+'" alt=""></a></div>';
// };
// $("#slider").append(str);
// if(data.data.list.length > 1){
// var mySwiper = new Swiper('.swiper-container', {
// loop: true,
// autoplay: 2000,
// pagination: '.swiper-pagination',
// })
// }
// }
// })
// })
</script>
</body>
</html>
\ No newline at end of file
@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/.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.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-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{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-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{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-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)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-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);-ms-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)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}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)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-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);-ms-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);-ms-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);-ms-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);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.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(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.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)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{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)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-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(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-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)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-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)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-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)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-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)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) 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) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) 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(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) 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) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) 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(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-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-transition-timing-function:ease-in;transition-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)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-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);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-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-transition-timing-function:ease-in;transition-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)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-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);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-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}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-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}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-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);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-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{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-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{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-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{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-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{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-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{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-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{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-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{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-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{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-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{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-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}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-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);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-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);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{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{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-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{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-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(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-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(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe681;</span>
<div class="name">地址</div>
<div class="code-name">&amp;#xe681;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">电话</div>
<div class="code-name">&amp;#xe630;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-dizhi"></span>
<div class="name">
地址
</div>
<div class="code-name">.icon-dizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianhua"></span>
<div class="name">
电话
</div>
<div class="code-name">.icon-dianhua
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dizhi"></use>
</svg>
<div class="name">地址</div>
<div class="code-name">#icon-dizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#icon-dianhua</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1585738608197'); /* IE9 */
src: url('iconfont.eot?t=1585738608197#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACCQAAAPDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqECINRATYCJAMMCwgABCAFhG0HORsaB8gOJQXpwADgAaNgPHy/3//WPufc+0UkqXafbopKCa+SoBIhFEKkVIbpXsIbalMvoWJCZ4JUXEg2j0DiMHI1masDycxffe5X+ePe8V/nYTYfUC5jLpuT2hhg3HkX0NiLsoBLGFMBzxHpQP/rCbSbNonsqLiyEbgp0C0Q7w06FXDLaZWW1NAq1DVjS4pPoNKaPshf4GP4+/hvK9xIqgwbHb8s0oLcX8TfuUjfcJ/7vAg05jNDmkTGCqAQD2ut15DYvwLRbkid2mNrRUhzuYaHCbmmuKY/PJIgakjuBAtcIPGLcLmpbC7Lv2vey3Wu0YovgH+qbhDuWZQ+rwivSZMR+bvlT2+e7Ttz48myZ7fOzT1/+3mCIDSKYpPdrpAkarnILAI+C4TQeEeYdErKl6hzUuRcewOnB/nP+OP/PO3LxkgUPezvx7Gh5+1NF7M2ngw+GX02akfmOFFMO57xvOypKKI7Jh25EbThSccGYWL2jIs9Dw3dfHuiHTslJV8Sxm04ELJJqn5l19kWOvF05H7q2K0xVRPb585tkQ0vnECaiGSiCUkOI083yFhW1kBqlvXy0n068yChUJIwTx5cOTxZWcO2lE4/c6Z0GlPLyfMPBVfJ80ioUEIiN2cf4viBfA09V3PFZnNZIYv/IIcDbDRafcBZqzqhNXdZb1RkcHY7uNemLXM9pB7cc8ohBLy8HC1LMxyY/+jb3CNqUlmQqTi06OPqpwXUcXx9cYJXUWhv+/NVi9a0vV87x10b6Oe3cDpR+HFBReouY9mImcrEDWjJ2JSX79NyY4q51ysvrPyeXDajX/w1tQpfPwKA1lsAHgNoNjJlDA80l+RhZNE/vJ2Bb9GvZ/lm/m/tKODnsQ1cyO5H6isgkVaJ3rz/s1pxbQ5QZAF0uehSrWmB7KGJvQnt5KIJzn5fx9uHgNQcWmUeC0mLKchazSCFWIFKhx2otdqFdstKJncYwENEacOShQyEXqch6fYdsl4vkUJ8gcqwfqj1BgLtLiNwzg5zYfAo4GkVpLWouh01aFgr4xigR5RaT+uazSo+KwgpFM3bDC6UxIhiqIS20vwcA2wtungIGZThWQtazGxGm80syvGskdZATA8hl47jTN2LMA1rAR4O8WgqEE0LpdYOZaDBsmL88pBH6fv1aDrNzFT4lqIGM4XGszHUjiJhiB5IidTaq+heLrFpoRMPghgoBo9lgSpmzDQz+Vkorr6VEU0DwuhHeDnpcK4U01eKrS+3fN8KaId+OVLkKKrnhg69wdWPVVn1zSoAAAA=') format('woff2'),
url('iconfont.woff?t=1585738608197') format('woff'),
url('iconfont.ttf?t=1585738608197') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1585738608197#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-dizhi:before {
content: "\e681";
}
.icon-dianhua:before {
content: "\e630";
}
!function(s){var e,d='<svg><symbol id="icon-dizhi" viewBox="0 0 1024 1024"><path d="M512 249.8c35.8 0 69.5 13.9 94.8 39.3 25.3 25.3 39.3 59 39.3 94.8s-13.9 69.5-39.3 94.8C581.5 504 547.8 518 512 518s-69.5-13.9-94.8-39.3c-25.3-25.3-39.3-59-39.3-94.8s13.9-69.5 39.3-94.8c25.3-25.4 59-39.3 94.8-39.3m0-64c-109.4 0-198.1 88.7-198.1 198.1s88.7 198 198.1 198 198.1-88.7 198.1-198.1-88.7-198-198.1-198z" fill="" ></path><path d="M512 64c43.2 0 85.1 8.4 124.5 25.1 38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5 0 26.1-9.1 75-52.7 159.7-30.3 59-72.9 126.8-126.6 201.6-51.9 72.3-104.3 137.2-140.6 180.6-36.1-43.2-88.2-107.6-139.9-179.7-53.9-75-96.6-143-127-202-43.7-85-52.9-134-52.9-160.2 0-43.2 8.4-85.1 25.1-124.5 16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 72.4 468.8 64 512 64m0-64C300 0 128.2 171.9 128.2 383.8S512 1024 512 1024s383.8-428.2 383.8-640.2S724 0 512 0z" fill="" ></path></symbol><symbol id="icon-dianhua" viewBox="0 0 1031 1024"><path d="M775.908525 1015.269821c-9.545802 0-19.685698-0.483332-30.429759-1.55069-55.71405-5.538176-117.298567-26.099913-183.041751-61.101185-80.16258-42.684233-167.34354-107.370128-259.106081-192.275401-406.320868-375.911247-288.659802-603.590697-283.453917-613.09622 0.231596-0.432985 0.483332-0.8559 0.735067-1.278816C58.382444 84.584381 148.181451-14.840982 245.220363 1.86417c28.999903 4.994428 55.643565 18.698896 81.451465 41.898819 21.417637 19.252714 39.1398 42.321734 54.072736 62.430347 20.602015 27.741227 34.930786 53.075865 43.801938 77.44384 12.465931 34.215858 14.157592 66.931374 5.024636 97.210092-8.337472 27.660672-22.968326 54.978983-46.037347 85.992769-1.268746 1.7118-2.698602 3.322906-7.964904 9.213511-2.003813 2.235409-5.185747 5.81005-8.317333 9.374622 70.153586 140.357518 214.740257 230.871453 267.816121 260.525868 19.695768-21.256526 44.043603-38.525566 70.475807-49.722751 38.888065-16.473556 78.551474-18.557924 114.680521-6.051716 67.575816 23.401311 131.858936 72.167468 171.975468 130.449218 20.007919 29.080459 26.301301 62.057779 18.688827 98.015645-5.558315 26.281162-18.708965 53.881418-39.089453 82.025421-30.993647 42.805066-69.267477 73.879268-75.258777 78.63203-7.783655 6.716297-46.097763 35.967936-120.631543 35.967936zM71.009486 175.52123c-2.587839 5.538176-23.330825 53.810932-4.581582 138.222804 18.849937 84.895203 82.136185 223.853073 276.55637 403.733029C536.075297 896.118482 667.581803 945.126305 743.907938 954.7728c76.144885 9.626357 111.065602-16.906541 114.438854-19.64542 0.664581-0.644442 0.795483-0.704859 1.631245-1.349302 0.34236-0.271874 37.115849-29.161014 65.159158-68.220258 32.504058-45.262002 38.888065-82.881321 18.97077-111.820808-32.806141-47.668591-87.593805-89.194842-142.975565-108.37707-50.07518-17.339526-106.816311 15.134325-134.789134 54.495652-8.236778 11.589892-23.622838 15.55724-36.441198 9.414899-2.38645-1.147913-59.087303-28.587058-127.17666-80.83723-40.066186-30.741911-75.842803-63.809857-106.353118-98.267381-38.555774-43.550202-68.794215-89.517063-89.869492-136.621767-4.79304-10.723923-3.061101-21.69958 5.145469-32.624891 1.54062-2.04409 3.59478-4.581582 6.303451-7.763516 4.44061-5.226024 9.777398-11.207254 14.066967-16.010363 1.88298-2.104507 4.178806-4.672207 5.064914-5.709356 18.678757-25.173527 30.308927-46.621372 36.58217-67.444915 10.008994-33.208917-3.010754-73.436214-39.804382-122.987784-28.989834-39.049175-58.352236-74.674751-98.549324-81.592437-61.201879-10.532604-131.466229 63.266109-164.302577 116.110377z m787.166126 759.777329c-0.010069 0-0.010069 0 0 0-0.010069 0-0.010069 0 0 0z m-521.394095-603.439655l-0.080556 0.110763c0.030208-0.040278 0.050347-0.080555 0.080556-0.110763z" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!s.__iconfont__svg__cssinject__){s.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(i=e,o=s.document,c=!1,(d=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(d,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())});function n(){c||(c=!0,i())}var i,o,c,d}(function(){var e,t,n,i,o,c;(e=document.createElement("div")).innerHTML=d,d=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(i=document.body).firstChild?(o=n,(c=i.firstChild).parentNode.insertBefore(o,c)):i.appendChild(n))})}(window);
\ No newline at end of file
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "5809159",
"name": "地址",
"font_class": "dizhi",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "13604087",
"name": "电话",
"font_class": "dianhua",
"unicode": "e630",
"unicode_decimal": 58928
}
]
}
<?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="dizhi" unicode="&#59009;" d="M512 646.2c35.8 0 69.5-13.9 94.8-39.3 25.3-25.3 39.3-59 39.3-94.8s-13.9-69.5-39.3-94.8C581.5 392 547.8 378 512 378s-69.5 13.9-94.8 39.3c-25.3 25.3-39.3 59-39.3 94.8s13.9 69.5 39.3 94.8c25.3 25.4 59 39.3 94.8 39.3m0 64c-109.4 0-198.1-88.7-198.1-198.1s88.7-198 198.1-198 198.1 88.7 198.1 198.1-88.7 198-198.1 198zM512 832c43.2 0 85.1-8.4 124.5-25.1 38.1-16.1 72.3-39.2 101.7-68.6 29.4-29.4 52.5-63.6 68.6-101.7 16.7-39.4 25.1-81.3 25.1-124.5 0-26.1-9.1-75-52.7-159.7-30.3-59-72.9-126.8-126.6-201.6-51.9-72.3-104.3-137.2-140.6-180.6-36.1 43.2-88.2 107.6-139.9 179.7-53.9 75-96.6 143-127 202-43.7 85-52.9 134-52.9 160.2 0 43.2 8.4 85.1 25.1 124.5 16.1 38.1 39.2 72.3 68.6 101.7 29.4 29.4 63.6 52.5 101.7 68.6C426.9 823.6 468.8 832 512 832m0 64C300 896 128.2 724.1 128.2 512.2S512-128 512-128s383.8 428.2 383.8 640.2S724 896 512 896z" horiz-adv-x="1024" />
<glyph glyph-name="dianhua" unicode="&#58928;" d="M775.908525-119.269821c-9.545802 0-19.685698 0.483332-30.429759 1.55069-55.71405 5.538176-117.298567 26.099913-183.041751 61.101185-80.16258 42.684233-167.34354 107.370128-259.106081 192.275401-406.320868 375.911247-288.659802 603.590697-283.453917 613.09622 0.231596 0.432985 0.483332 0.8559 0.735067 1.278816C58.382444 811.415619 148.181451 910.840982 245.220363 894.13583c28.999903-4.994428 55.643565-18.698896 81.451465-41.898819 21.417637-19.252714 39.1398-42.321734 54.072736-62.430347 20.602015-27.741227 34.930786-53.075865 43.801938-77.44384 12.465931-34.215858 14.157592-66.931374 5.024636-97.210092-8.337472-27.660672-22.968326-54.978983-46.037347-85.992769-1.268746-1.7118-2.698602-3.322906-7.964904-9.213511-2.003813-2.235409-5.185747-5.81005-8.317333-9.374622 70.153586-140.357518 214.740257-230.871453 267.816121-260.525868 19.695768 21.256526 44.043603 38.525566 70.475807 49.722751 38.888065 16.473556 78.551474 18.557924 114.680521 6.051716 67.575816-23.401311 131.858936-72.167468 171.975468-130.449218 20.007919-29.080459 26.301301-62.057779 18.688827-98.015645-5.558315-26.281162-18.708965-53.881418-39.089453-82.025421-30.993647-42.805066-69.267477-73.879268-75.258777-78.63203-7.783655-6.716297-46.097763-35.967936-120.631543-35.967936zM71.009486 720.47877c-2.587839-5.538176-23.330825-53.810932-4.581582-138.222804 18.849937-84.895203 82.136185-223.853073 276.55637-403.733029C536.075297-0.118482 667.581803-49.126305 743.907938-58.7728c76.144885-9.626357 111.065602 16.906541 114.438854 19.64542 0.664581 0.644442 0.795483 0.704859 1.631245 1.349302 0.34236 0.271874 37.115849 29.161014 65.159158 68.220258 32.504058 45.262002 38.888065 82.881321 18.97077 111.820808-32.806141 47.668591-87.593805 89.194842-142.975565 108.37707-50.07518 17.339526-106.816311-15.134325-134.789134-54.495652-8.236778-11.589892-23.622838-15.55724-36.441198-9.414899-2.38645 1.147913-59.087303 28.587058-127.17666 80.83723-40.066186 30.741911-75.842803 63.809857-106.353118 98.267381-38.555774 43.550202-68.794215 89.517063-89.869492 136.621767-4.79304 10.723923-3.061101 21.69958 5.145469 32.624891 1.54062 2.04409 3.59478 4.581582 6.303451 7.763516 4.44061 5.226024 9.777398 11.207254 14.066967 16.010363 1.88298 2.104507 4.178806 4.672207 5.064914 5.709356 18.678757 25.173527 30.308927 46.621372 36.58217 67.444915 10.008994 33.208917-3.010754 73.436214-39.804382 122.987784-28.989834 39.049175-58.352236 74.674751-98.549324 81.592437-61.201879 10.532604-131.466229-63.266109-164.302577-116.110377z m787.166126-759.777329c-0.010069 0-0.010069 0 0 0-0.010069 0-0.010069 0 0 0z m-521.394095 603.439655l-0.080556-0.110763c0.030208 0.040278 0.050347 0.080555 0.080556 0.110763z" horiz-adv-x="1031" />
</font>
</defs></svg>
/**
* Swiper 5.3.6
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://swiperjs.com
*
* Copyright 2014-2020 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: February 29, 2020
*/
@font-face {
font-family: 'swiper-icons';
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: 'prev';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
--swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
--swiper-navigation-color: #000000;
}
.swiper-button-lock {
display: none;
}
:root {
/*
--swiper-pagination-color: var(--swiper-theme-color);
*/
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
--swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
display: none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
:root {
/*
--swiper-preloader-color: var(--swiper-theme-color);
*/
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
...@@ -15,6 +15,6 @@ ...@@ -15,6 +15,6 @@
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
</body> </body>
</html> </html>
//本插件由www.swiper.com.cn提供
//版本1.03
function swiperAnimateCache(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate(a);var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+" "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -3,15 +3,24 @@ import qs from 'qs' ...@@ -3,15 +3,24 @@ import qs from 'qs'
export function getUserInfoByUserId(params) { export function getUserInfoByUserId(params) {
return requestCF({ return requestCF({
url: '/admin/auth/addressbook/clerk/getByUserIdOrUserName', url: '/admin/auth/addressbook/clerk/getStallCodeByClerkId',
method: 'get',
params
})
}
// 门店维护
export function editStore(data) {
return requestCF({
url: '/admin/auth/stall/settingOrUpdateStall',
method: 'post',
data: qs.stringify(data)
})
}
// 获取门店详情
export function getStoreDetail(params) {
return requestCF({
url: '/admin/auth/stall/getByOyStallCode',
method: 'get', method: 'get',
params params
}) })
} }
\ No newline at end of file
// export function ApiLoginSubmit(inData) {
// return requestCF({
// url: '/admin/common/login',
// method: 'post',
// data: qs.stringify(inData)
// })
// }
...@@ -67,3 +67,8 @@ input:focus{ outline: none;} ...@@ -67,3 +67,8 @@ input:focus{ outline: none;}
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} }
.flex {
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
...@@ -7,7 +7,10 @@ import './lib/rem'; ...@@ -7,7 +7,10 @@ import './lib/rem';
import Vant from 'vant'; import Vant from 'vant';
import { Toast } from 'vant'; import { Toast } from 'vant';
import 'vant/lib/index.css'; import 'vant/lib/index.css';
import vConsole from 'vconsole'
Vue.prototype.$vConsole= new vConsole()
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(Vant); Vue.use(Vant);
......
...@@ -67,6 +67,11 @@ const routes = [ ...@@ -67,6 +67,11 @@ const routes = [
name: 'counterMaintain', name: 'counterMaintain',
component: () => import('@/views/counter/counterMaintain') component: () => import('@/views/counter/counterMaintain')
}, },
{
path: '/counterHome',
name: 'counterHome',
component: () => import('@/views/counter/counterHomePage')
},
{ {
path: '/counterEdit', path: '/counterEdit',
name: 'counterEdit', name: 'counterEdit',
......
import Vue from 'vue'
import { wxRequest } from './aWxRequest'
import qs from 'qs'
import router from '../router'
const zlog = console.log.bind(console)
// Z-BasicInfo
let INFO = {
// corpId: 'wwd1cdbca7b8b2b6c4',
// agentId: '1000015',
corpId: 'ww4df265003b43fa0d',
agentId: '1000033',
}
async function getXToken() {
let postData = {
corpId: INFO.corpId,
agentId: INFO.agentId,
}
console.log('%c--->getXToken: PD =', 'background: orange;', postData)
await wxRequest('/workWx/common/getToken', postData,'get').then(res => {
if (res.result === 'success') {
sessionStorage.setItem('XToken', res.data)
console.log('%c--->getXToken: RD =', 'background: limegreen;', res)
} else {
console.log('%c--->getXToken: N/A. ', 'background: red;')
// this.$message({
// message: res.errorMsg,
// type: 'error'
// })
}
}).catch(err => {
console.log('!==>getXToken: err:', err)
})
}
function isIosOrAndroid() {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
let isStr = ''
if (isAndroid) {
isStr = 'android'
}
if (isiOS) {
isStr = 'ios'
}
return isStr
}
Vue.prototype.getAgentAuth = function () {
zlog('%c--->IN: getAgentAuth: location.href =', 'color: orange;', location.href)
// alert(`--->zCommon.js: IN.`)
let postData = {
// businessId: sessionStorage.getItem('businessId'),
// pageUrl: encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)
pageUrl: encodeURIComponent(location.href.split('#')[0])
}
// alert(`--->zCommon.js: postData =${JSON.stringify(postData)}`)
let header = {
token: sessionStorage.getItem('XToken'),
corpId: INFO.corpId,
agentId: INFO.agentId,
}
// alert(`--->zCommon.js: header =${JSON.stringify(header)}`)
console.log('%c--->getAgentAuth: getJsSdkSignature: PD =', 'background: orange;', header)
wxRequest('/workWx/auth/base/getJsSdkSignature', qs.stringify(postData), header)
.then(res => {
// alert(`--->zCommon.js: getJsSdkSignature: then.`)
// alert(`--->zCommon.js: getJsSdkSignature: then: res =${JSON.stringify(res)}`)
if (res.result === 'success') {
console.log('%c--->getAgentAuth: getJsSdkSignature: RD =', 'background: limegreen;', res.data)
// alert(`--->zCommon.js: getJsSdkSignature: then: res.result === "success".`)
let config = res.data
wx.config({
beta: true,
debug: false, //调试的时候可以开启
appId: config.jsApiSignature.appId, // 必填,公众号的唯一标识
timestamp: config.jsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: config.jsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: config.jsApiSignature.signature, // 必填,签名
// 根据自己的需求,填写 jsapilist 内容
jsApiList: ['agentConfig']
})
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.config: end.`)
wx.ready(function () {
zlog('%c--->getAgentAuth: getJsSdkSignature: Ready.', 'color: red;')
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.ready: IN.`)
// JS-SDK配置信息验证失败时会进入此方法
wx.error(function (res) {
// alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res));
})
// 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口
wx.checkJsApi(
{
jsApiList: ['agentConfig', 'sendChatMessage'],
success: function (res) {
if (res.errMsg != "checkJsApi:ok") {
// alert("JS-SDK接口检测失败:" + JSON.stringify(res));
return false;
} else {
wxRequest('/workWx/auth/base/getAgentJsSdkSignature', qs.stringify(postData), header)
.then(res => {
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: res.`)
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: res =${JSON.stringify(res)}`)
// alert('getAgentJsSdkSignature:ok')
if (res.result === 'success') {
let agentConfig = res.data
wx.agentConfig({
corpid: agentConfig.agentJsApiSignature.appId, // 必填,企业微信的 corpid,必须与当前登录的企业一致
agentid: agentConfig.agentId, // 必填,企业微信的应用id
timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名
jsApiList: ['sendChatMessage'], //必填
success: function (res) {
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res.`)
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res =${JSON.stringify(res)}`)
// alert('agentConfig:ok')
// router.push(to)
// 回调
//1、发起申请申请时后,审批状态发生变化时
//2、发起申请申请时后,在“审批中”状态,有任意审批人进行审批操作时
// alert('wx.agentConfig 回调'+res.errMsg);
},
fail: function (res) {
// alert('回调失败:'+res.errMsg)
if (res.errMsg.indexOf('is not a function') > -1) {
alert('<i class="weui-icon-warn">版本过低请升级</i>')
}
}
})
}
})
.catch(err => {
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: err.`)
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: err =${JSON.stringify(err)}`)
})
}
}
}
)
})
} else {
// this.$message({
// type: 'error',
// message: res.errorMsg
// })
}
})
.catch(err => {
// alert(`--->zCommon.js: getJsSdkSignature: catch.`)
// alert(`--->zCommon.js: getJsSdkSignature: catch: err =${JSON.stringify(err)}`)
console.log(err, 'err')
})
}
function configWx(to) {
let postData = {
// businessId: sessionStorage.getItem('businessId'),
// pageUrl: encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)
pageUrl: encodeURIComponent(location.href.split('#')[0])
}
let header = {
token: sessionStorage.getItem('XToken'),
corpId: INFO.corpId,
agentId: INFO.agentId,
}
wxRequest('/workWx/auth/base/getJsSdkSignature', qs.stringify(postData), header).then(res => {
if (res.result == 'success') {
let config = res.data
wx.config({
beta: true,
debug: false, //调试的时候可以开启
appId: config.jsApiSignature.appId, // 必填,公众号的唯一标识
timestamp: config.jsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: config.jsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: config.jsApiSignature.signature, // 必填,签名
// 根据自己的需求,填写 jsapilist 内容
jsApiList: ['agentConfig', 'getCurExternalContact']
})
wx.ready(function () {
// JS-SDK配置信息验证失败时会进入此方法
wx.error(function (res) {
// alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res))
})
// 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['agentConfig', 'getCurExternalContact'],
success: function (res) {
// alert(`--->wx.checkJsApi: success. res =${JSON.stringify(res)}`);
// router.push(to)
if (res.errMsg != "checkJsApi:ok") {
// alert("JS-SDK接口检测失败:" + JSON.stringify(res));
return false;
}
}
})
// alert(`--->configWx/getJsSdkSignature: next: getAgentJsSdkSignature.`)
// alert(`--->configWx/getJsSdkSignature: next: getAgentJsSdkSignature: data =${qs.stringify(postData)}. header =${JSON.stringify(header)}`)
wxRequest('/workWx/auth/base/getAgentJsSdkSignature', qs.stringify(postData), header)
.then(res => {
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: IN.`)
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: res =${JSON.stringify(res)}`)
if (res.result == 'success') {
let agentConfig = res.data
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: res.result == 'success'.`)
wx.agentConfig({
corpid: agentConfig.agentJsApiSignature.appId, // 必填,企业微信的corpid,必须与当前登录的企业一致
agentid: agentConfig.agentId, // 必填,企业微信的应用id
timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名
jsApiList: ['getCurExternalContact'], //必填
success: function (res) {
// alert('agentConfig:ok')
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: agentConfig: res =${res}`)
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: agentConfig: to =${JSON.stringify(to)}`)
sessionStorage.setItem('zConfigWx', 'Pass')
router.push(to)
// getUnionid(to)
// 回调
//1、发起申请申请时后,审批状态发生变化时
//2、发起申请申请时后,在“审批中”状态,有任意审批人进行审批操作时
// alert('wx.agentConfig 回调'+res.errMsg);
},
fail: function (res) {
// alert(`--->A: err =${res}`)
// alert(`--->A: err =${JSON.stringify(res)}`)
if (res.errMsg.indexOf('is not a function') > -1) {
// alert('<i class="weui-icon-warn">版本过低请升级</i>')
}
}
})
}
})
.catch(err => {
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: catch: err.`)
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: catch: err =${JSON.stringify(err)}`)
})
})
} else {
// this.$message({
// type: 'error',
// message: res.errorMsg
// })
}
}).catch(err => {
console.log(err, 'err')
})
}
function getUnionid(to) {
wx.invoke('getCurExternalContact', {}, function (res) {
if (res.err_msg == "getCurExternalContact:ok") {
let header = {
token: sessionStorage.getItem('XToken'),
corpId: INFO.corpId,
agentId: INFO.agentId,
}
let postData = {
userId: res.userId
}
wxRequest('/workWx/auth/contact/getExternalContact', postData, header, 'get').then(res => {
if (res.result == 'success') {
sessionStorage.setItem('unionid', res.data.externalContact.unionId)
console.log('%c--->UnionId: RES: ', 'background: limegreen;', res.data.externalContact.unionId)
router.push(to)
}
})
} else {
console.log('%c--->UnionId: N/A', 'background: red;')
console.log(res, 'res')
}
});
}
function getUserInfo(inData) {
wx.invoke('getUserInfo', {}, function (res) {
if (res.err_msg == "getUserInfo:ok") {
let header = {
token: sessionStorage.getItem('XToken'),
corpId: INFO.corpId,
agentId: INFO.agentId,
}
let postData = {
code: inData.code
}
wxRequest('/workWx/auth/oauth2/getUserInfo', postData, header, 'post').then(res => {
if (res.result == 'success') {
sessionStorage.setItem('userInfo', res.data)
console.log('%c--->getUserInfo: RES: ', 'background: limegreen;', res.data)
// router.push(to)
}
})
} else {
console.log('%c--->UnionId: N/A', 'background: red;')
console.log(res, 'res')
}
});
}
export { getXToken, configWx, getUnionid, getUserInfo }
...@@ -18,26 +18,22 @@ async function getXToken() { ...@@ -18,26 +18,22 @@ async function getXToken() {
corpId: INFO.corpId, corpId: INFO.corpId,
agentId: INFO.agentId, agentId: INFO.agentId,
} }
await wxRequest('/workWx/auth/oauth2/getAccessToken', qs.stringify(postData)).then(res => {
console.log('%c--->getXToken: PD =', 'background: orange;', postData)
await wxRequest('/workWx/auth/oauth2/getAccessToken', qs.stringify(postData),'get').then(res => {
if (res.result === 'success') { if (res.result === 'success') {
sessionStorage.setItem('XToken', res.data) sessionStorage.setItem('XToken', res.data)
console.log('%c--->getXToken: RD =', 'background: limegreen;', res)
} else { } else {
console.log('%c--->getXToken: N/A. ', 'background: red;')
// this.$message({ // this.$message({
// message: res.errorMsg, // message: res.errorMsg,
// type: 'error' // type: 'error'
// }) // })
} }
}).catch(err => { }).catch(err => {
console.log('!==>getXToken: err:', err) console.log(err,'err');
}) })
} }
function isIosOrAndroid() { function isIosOrAndroid() {
// alert('isIosOrAndroid')
let u = navigator.userAgent; let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
...@@ -52,9 +48,7 @@ function isIosOrAndroid() { ...@@ -52,9 +48,7 @@ function isIosOrAndroid() {
} }
Vue.prototype.getAgentAuth = function () { Vue.prototype.getAgentAuth = function () {
zlog('%c--->IN: getAgentAuth: location.href =', 'color: orange;', location.href) // alert(location.href)
// alert(`--->zCommon.js: IN.`)
let postData = { let postData = {
// businessId: sessionStorage.getItem('businessId'), // businessId: sessionStorage.getItem('businessId'),
// pageUrl: encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl) // pageUrl: encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)
...@@ -69,17 +63,9 @@ Vue.prototype.getAgentAuth = function () { ...@@ -69,17 +63,9 @@ Vue.prototype.getAgentAuth = function () {
} }
// alert(`--->zCommon.js: header =${JSON.stringify(header)}`) // alert(`--->zCommon.js: header =${JSON.stringify(header)}`)
console.log('%c--->getAgentAuth: getJsSdkSignature: PD =', 'background: orange;', header)
wxRequest('/workWx/auth/base/getJsSdkSignature', qs.stringify(postData), header) wxRequest('/workWx/auth/base/getJsSdkSignature', qs.stringify(postData), header)
.then(res => { .then(res => {
// alert(`--->zCommon.js: getJsSdkSignature: then.`)
// alert(`--->zCommon.js: getJsSdkSignature: then: res =${JSON.stringify(res)}`)
if (res.result === 'success') { if (res.result === 'success') {
console.log('%c--->getAgentAuth: getJsSdkSignature: RD =', 'background: limegreen;', res.data)
// alert(`--->zCommon.js: getJsSdkSignature: then: res.result === "success".`)
let config = res.data let config = res.data
wx.config({ wx.config({
beta: true, beta: true,
...@@ -89,7 +75,11 @@ Vue.prototype.getAgentAuth = function () { ...@@ -89,7 +75,11 @@ Vue.prototype.getAgentAuth = function () {
nonceStr: config.jsApiSignature.nonceStr, // 必填,生成签名的随机串 nonceStr: config.jsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: config.jsApiSignature.signature, // 必填,签名 signature: config.jsApiSignature.signature, // 必填,签名
// 根据自己的需求,填写 jsapilist 内容 // 根据自己的需求,填写 jsapilist 内容
jsApiList: ['agentConfig'] jsApiList: ['agentConfig', 'sendChatMessage','selectExternalContact','shareToExternalContact'],
success: function(res) {
},
fail: function(err) {
}
}) })
// alert(`--->zCommon.js: getJsSdkSignature: then: wx.config: end.`) // alert(`--->zCommon.js: getJsSdkSignature: then: wx.config: end.`)
...@@ -99,13 +89,13 @@ Vue.prototype.getAgentAuth = function () { ...@@ -99,13 +89,13 @@ Vue.prototype.getAgentAuth = function () {
// JS-SDK配置信息验证失败时会进入此方法 // JS-SDK配置信息验证失败时会进入此方法
wx.error(function (res) { wx.error(function (res) {
// alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res)); // alert('sdk配置失败')
}) })
// 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口 // 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口
wx.checkJsApi( wx.checkJsApi(
{ {
jsApiList: ['agentConfig', 'sendChatMessage'], jsApiList: ['config', 'agentConfig', 'sendChatMessage','selectExternalContact','shareToExternalContact'],
success: function (res) { success: function (res) {
if (res.errMsg != "checkJsApi:ok") { if (res.errMsg != "checkJsApi:ok") {
// alert("JS-SDK接口检测失败:" + JSON.stringify(res)); // alert("JS-SDK接口检测失败:" + JSON.stringify(res));
...@@ -125,8 +115,9 @@ Vue.prototype.getAgentAuth = function () { ...@@ -125,8 +115,9 @@ Vue.prototype.getAgentAuth = function () {
timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳 timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串 nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名 signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名
jsApiList: ['sendChatMessage'], //必填 jsApiList: ['sendChatMessage','selectExternalContact','shareToExternalContact'], //必填
success: function (res) { success: function (res) {
// alert('agentConfigSuccess')
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res.`) // alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res.`)
// alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res =${JSON.stringify(res)}`) // alert(`!-->zCommon.js: getJsSdkSignature: then: wx.ready: wx.checkJsApi: getAgentJsSdkSignature: wx.agentConfig: res =${JSON.stringify(res)}`)
// alert('agentConfig:ok') // alert('agentConfig:ok')
...@@ -137,6 +128,7 @@ Vue.prototype.getAgentAuth = function () { ...@@ -137,6 +128,7 @@ Vue.prototype.getAgentAuth = function () {
// alert('wx.agentConfig 回调'+res.errMsg); // alert('wx.agentConfig 回调'+res.errMsg);
}, },
fail: function (res) { fail: function (res) {
// alert('agentConfigFailed')
// alert('回调失败:'+res.errMsg) // alert('回调失败:'+res.errMsg)
if (res.errMsg.indexOf('is not a function') > -1) { if (res.errMsg.indexOf('is not a function') > -1) {
alert('<i class="weui-icon-warn">版本过低请升级</i>') alert('<i class="weui-icon-warn">版本过低请升级</i>')
...@@ -196,7 +188,6 @@ function configWx(to) { ...@@ -196,7 +188,6 @@ function configWx(to) {
wx.ready(function () { wx.ready(function () {
// JS-SDK配置信息验证失败时会进入此方法 // JS-SDK配置信息验证失败时会进入此方法
wx.error(function (res) { wx.error(function (res) {
// alert("JS-SDK配置信息验证失败 \r\n" + JSON.stringify(res))
}) })
// 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口 // 配置成功后验证API接口在当前客户端是否支持:判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({ wx.checkJsApi({
...@@ -206,7 +197,7 @@ function configWx(to) { ...@@ -206,7 +197,7 @@ function configWx(to) {
// router.push(to) // router.push(to)
if (res.errMsg != "checkJsApi:ok") { if (res.errMsg != "checkJsApi:ok") {
// alert("JS-SDK接口检测失败:" + JSON.stringify(res)); alert("JS-SDK接口检测失败:" + JSON.stringify(res));
return false; return false;
} }
} }
...@@ -230,7 +221,7 @@ function configWx(to) { ...@@ -230,7 +221,7 @@ function configWx(to) {
timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳 timestamp: agentConfig.agentJsApiSignature.timestamp, // 必填,生成签名的时间戳
nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串 nonceStr: agentConfig.agentJsApiSignature.nonceStr, // 必填,生成签名的随机串
signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名 signature: agentConfig.agentJsApiSignature.signature,// 必填,签名,agentConfig所以为应用签名
jsApiList: ['getCurExternalContact'], //必填 jsApiList: ['getCurExternalContact','selectExternalContact','shareToExternalContact'], //必填
success: function (res) { success: function (res) {
// alert('agentConfig:ok') // alert('agentConfig:ok')
// alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: agentConfig: res =${res}`) // alert(`--->configWx/getJsSdkSignature/getAgentJsSdkSignature: then: agentConfig: res =${res}`)
...@@ -245,11 +236,8 @@ function configWx(to) { ...@@ -245,11 +236,8 @@ function configWx(to) {
// alert('wx.agentConfig 回调'+res.errMsg); // alert('wx.agentConfig 回调'+res.errMsg);
}, },
fail: function (res) { fail: function (res) {
// alert(`--->A: err =${res}`)
// alert(`--->A: err =${JSON.stringify(res)}`)
if (res.errMsg.indexOf('is not a function') > -1) { if (res.errMsg.indexOf('is not a function') > -1) {
// alert('<i class="weui-icon-warn">版本过低请升级</i>') alert('<i class="weui-icon-warn">版本过低请升级</i>')
} }
} }
}) })
...@@ -285,13 +273,12 @@ function getUnionid(to) { ...@@ -285,13 +273,12 @@ function getUnionid(to) {
wxRequest('/workWx/auth/contact/getExternalContact', postData, header, 'get').then(res => { wxRequest('/workWx/auth/contact/getExternalContact', postData, header, 'get').then(res => {
if (res.result == 'success') { if (res.result == 'success') {
sessionStorage.setItem('unionid', res.data.externalContact.unionId) sessionStorage.setItem('unionid', res.data.externalContact.unionId)
console.log('%c--->UnionId: RES: ', 'background: limegreen;', res.data.externalContact.unionId)
router.push(to) router.push(to)
} }
}) })
} else { } else {
console.log('%c--->UnionId: N/A', 'background: red;') console.log()
console.log(res, 'res')
} }
}); });
} }
......
<template> <template>
<div> <div class="bg">
<div></div> <div class="bd">
<div>收款码</div> <div class="title">收款码</div>
<div class="img"><img src="../../../public/img/code.jpg" alt=""></div>
</div>
<!-- <div>收款码</div> -->
</div> </div>
</template> </template>
...@@ -11,6 +14,33 @@ export default { ...@@ -11,6 +14,33 @@ export default {
} }
</script> </script>
<style> <style scoped>
.bg {
background-color: #a7cfff;
display: flex;
justify-content: center;
height: 100%;
}
.bd {
margin-top: 25px;
width: 90%;
height: 50%;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.title {
background-color: #f1f1f1;
height: 18%;
justify-content: center;
display: flex;
align-items: center;
font-size: 22px;
}
.img {
justify-content: center;
display: flex;
align-items: center;
height: 82%;
}
</style> </style>
<template>
<div class="container">
<div class="flex-start">
<van-uploader v-model="bannerList" :max-count="4" />
<div>
<quill-editors @ChangeText="(text)=>{content=text}" :title="title" />
<!-- <van-uploader class="avatar-uploader" />D -->
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
</div>
</div>
<div class="creat">保存信息</div>
</div>
</template>
<script>
import QuillEditors from "@/components/quill"
// import { quillEditor } from "vue-quill-editor"
// import "quill/dist/quill.core.css"
// import "quill/dist/quill.snow.css"
// import "quill/dist/quill.bubble.css"
const toolbarOptions = [
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[ "image" ] // 链接、图片、视频
]
export default {
components: {
// quillEditor
QuillEditors
},
data() {
return {
bannerList: [],
content: '',
isClear: false,
detail:"",
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
// image: function(value) {
// if (value) {
// // 触发input框选择图片文件
// document.querySelector(".avatar-uploader input").click();
// } else {
// this.quill.format("image", false);
// }
// }
}
}
}
},
header: {
}, // 有的图片服务器要求请求头需要有token
serverUrl: "https://139.219.7.104:8021/file/upload",
// title:
}
},
methods: {
change(val) {
console.log(val)
},
onEditorChange({ editor, html, text }) {
console.log(this.content,'内容')
console.log(html,'html')
console.log(editor,'editor')
console.log(text,'text')
this.$emit("input", this.content);
},
}
}
</script>
<style >
</style>
<style scoped>
.container {
min-height: 100%;
height: auto;
background: #F8F8F8;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.content {
background: #fff;
height: auto;
}
.creat {
margin: 20px 0;
width: 343px;
height: 40px;
line-height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
bottom: 0;
}
</style>
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
<div class="flex-start top" > <div class="flex-start top" >
<div class="flex-start"> <div class="flex-start">
<van-cell-group class="gn"> <van-cell-group class="gn">
<van-cell title="专柜LOGO" center class="logo"> <van-cell title="专柜LOGO" >
<template slot="default"> <template slot="default">
<van-uploader v-model="addForm.logo" :max-count="1" class="input"> <van-uploader v-model="logoList" :max-count="1" class="input" :after-read="afterRead" :before-read="beforeRead" @delete="deleteLogo" >
<div class="cube" style="width:54px;height:50px;"> <div>
<van-icon name="photo" size="40" /> <van-icon name="photo" size="20" />
<div class="mb">点击替换</div>
</div> </div>
</van-uploader> </van-uploader>
</template> </template>
...@@ -18,20 +17,15 @@ ...@@ -18,20 +17,15 @@
<van-field v-model="addForm.name" placeholder="输入名称" class="input" /> <van-field v-model="addForm.name" placeholder="输入名称" class="input" />
</template> </template>
</van-cell> </van-cell>
<van-cell title="门店">
<template slot="default">
<van-field v-model="addForm.store" placeholder="输入名称" class="input" />
</template>
</van-cell>
<van-cell title="专柜地址"> <van-cell title="专柜地址">
<template slot="default"> <template slot="default">
<van-field v-model="addForm.address" placeholder="输入名称" class="input" /> <van-field v-model="addForm.location" placeholder="输入名称" class="input" />
</template> </template>
</van-cell> </van-cell>
<div class="border"> <div class="border">
<div class="des">摘要信息</div> <div class="des">摘要信息</div>
<van-field <van-field
v-model="addForm.abstract" v-model="addForm.summaryTitle"
rows="4" rows="4"
autosize autosize
type="textarea" type="textarea"
...@@ -44,24 +38,25 @@ ...@@ -44,24 +38,25 @@
</div> </div>
<div class="flex-start fwb" > <div class="flex-start fwb" >
<div class="txt">轮播图</div> <div class="txt">轮播图</div>
<van-uploader v-model="bannerList" :max-count="4" class="pic" /> <van-uploader v-model="bannerList" :max-count="4" class="pic" :before-read="beforeRead" :after-read="afterAddBanner" @delete="deleteBanner" />
<van-field v-model="addForm.title" placeholder="标题(不超过30个字)" maxlength="30"></van-field> <quill-editor v-model="addForm.summary" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" ></quill-editor>
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
</div> </div>
</div> </div>
<div class="creat">保存信息</div> <div class="creat" @click="handleSave">保存信息</div>
</div> </div>
</template> </template>
<script> <script>
import { quillEditor, Quill } from "vue-quill-editor"; import { quillEditor, Quill } from "vue-quill-editor"
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module"; import { container, ImageExtend, QuillWatch } from "quill-image-extend-module"
import "quill/dist/quill.core.css"; import { editStore, getStoreDetail } from "@/api/sidebar/voucher"
import "quill/dist/quill.snow.css"; import "quill/dist/quill.core.css"
import "quill/dist/quill.bubble.css"; import "quill/dist/quill.snow.css"
Quill.register("modules/ImageExtend", ImageExtend); import "quill/dist/quill.bubble.css"
Quill.register("modules/ImageExtend", ImageExtend)
import axios from 'axios'
import { log } from 'util'
const toolbarOptions = [ const toolbarOptions = [
[{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ size: ["small", false, "large", "huge"] }], // 字体大小
["image"] // 图片 ["image"] // 图片
...@@ -75,16 +70,17 @@ export default { ...@@ -75,16 +70,17 @@ export default {
data() { data() {
return { return {
addForm: { addForm: {
logo: [], logo: '',
abstract: '', summaryTitle: '',
store: '',
name: '', name: '',
address: '', location: '',
title: '' summary: ''
}, },
oyStallCode: '',
list: [],
bannerList: [], bannerList: [],
title: "", title: "",
content: "", logoList: [],
// 富文本框参数设置 // 富文本框参数设置
editorOption: { editorOption: {
modules: { modules: {
...@@ -92,11 +88,8 @@ export default { ...@@ -92,11 +88,8 @@ export default {
name: "file", // 图片参数名 name: "file", // 图片参数名
// size: 3, // size: 3,
action: "http://139.155.48.151:8084/admin/auth/util/saveImg", action: "http://139.155.48.151:8084/admin/auth/util/saveImg",
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: res => { response: res => {
return res.data.imgPath; return res.data.imgPath
}, },
headers: xhr => { headers: xhr => {
// xhr.setRequestHeader('Content-Type','multipart/form-data') // xhr.setRequestHeader('Content-Type','multipart/form-data')
...@@ -117,16 +110,82 @@ export default { ...@@ -117,16 +110,82 @@ export default {
} }
}; };
}, },
mounted() {
this.addForm.oyStallCode = sessionStorage.getItem('oyStallCode')
console.log(this.addForm.oyStallCode,'编辑专柜信息oyStallCode');
this.getDetail()
},
methods: { methods: {
getDetail() {
let params = {
oyStallCode: this.addForm.oyStallCode
}
getStoreDetail(params).then(res => {
if(res.data.stallInfo != null) {
console.log(res,'详情')
this.list = res.data.carousel
let obj = {}
obj.url = res.data.stallInfo.logo
this.logoList.push(obj)
res.data.carousel.forEach(item => {
let obj2 = {}
obj2.url = item
this.bannerList.push(obj2)
})
this.addForm = res.data.stallInfo
}
})
},
change(val) { change(val) {
console.log(val); console.log(val)
}, },
onEditorChange({ editor, html, text }) { onEditorChange({ editor, html, text }) {
console.log(this.content, "内容") this.$emit("input", this.addForm.summary)
this.$emit("input", this.content) },
beforeRead (file) { //上传之前校验
if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
Toast('只允许上传jpg/png格式的图片!')
return false
} }
return true
},
async afterRead (file) {
// this.addForm.logo = await this.getImgUrl(file.file)//使用上传的方法。file.file
this.addForm.logo = await this.getImgUrl(file.file)
console.log(this.addForm.logo,'this.addForm.logo');
},
async getImgUrl(file) {
let params = new FormData()
params.append('file', file)
let url = 'http://139.155.48.151:8084/admin/auth/util/saveImg'
const img = await axios.post(url, params)
let urls = img.data.data.imgPath
console.log(urls,'urls')
return urls
},
async afterAddBanner(file) {
let img = await this.getImgUrl(file.file)
this.list.push(img)
console.log(this.list,'list');
},
deleteBanner(file,index) {
this.list.splice(index.index,1)
},
deleteLogo(file) {
this.addForm.logo = ''
},
handleSave() {
const carousel = this.list.join(';')
delete this.addForm.id
editStore(Object.assign(this.addForm,{ carousel })).then( res => {
if(res.result == 'success') {
this.$router.go(-1)
}
})
} }
}; }
}
</script> </script>
<style > <style >
</style> </style>
......
<template>
<div class="container">
<div class="flex-start">
<div class="img">
<van-swipe :autoplay="3000">
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
</van-swipe>
</div>
<div class="list">
<div class="left flex">
<img src="../../../public/img/counter.png" alt="" />
</div>
<div class="right">
<h3>欧亚一号专柜</h3>
<div class="txt">
<van-icon name="phone-o" size="16" style="vertical-align: middle;" />
<span>18888888888</span>
</div>
<div class="txt">
<van-icon name="location-o" size="16" style="vertical-align: middle;" />
<span>欧亚商场一楼181号</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style scoped>
.container {
background: #f8f8f8;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
min-height: 100%;
}
.img {
width: 100%;
height: 200px;
/* background-color: pink; */
}
.img img {
width: 100%;
}
.list {
height: auto;
width: 100%;
background-color: #fff;
display: flex;
justify-content: flex-start;
border-bottom: 1px solid rgba(238, 238, 238, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
border-radius: 2px;
z-index: 100;
}
.left {
width: 30%;
}
.left img {
width: 80px;
}
.right {
width: 76%;
padding: 10px;
background-color: #fff;
height: auto;
}
h3 {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.txt {
margin-top: 10px;
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
</style>
<template> <template>
<div class="container"> <div class="container">
<div class="img"> <div class="img">
<van-swipe :autoplay="3000"> <van-swipe :autoplay="3000" >
<van-swipe-item> <van-swipe-item v-for="(item,index) in carousel" :key="index">
<img src="../../../public/img/cswiper.png" /> <img :src="item" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item>
<van-swipe-item>
<img src="../../../public/img/cswiper.png" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
</div> </div>
<div class="list"> <div class="list">
<div class="left"> <div class="left">
<img src="../../../public/img/counter.png" alt="" /> <img :src="storeInfo.logo" alt="" />
</div> </div>
<div class="right"> <div class="right">
<h3>欧亚一号专柜</h3> <h3>{{storeInfo.name}}</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p> <p>{{storeInfo.summaryTitle}}</p>
</div> </div>
</div> </div>
<van-cell-group class="gn"> <van-cell-group class="gn">
<van-cell title="专柜信息" is-link value="详细信息" @click="handleEdit" /> <van-cell title="专柜信息" is-link value="详细信息" @click="handleEdit" />
<van-cell title="访问专柜首页" is-link value="详细信息" /> <van-cell title="访问专柜首页" is-link value="详细信息" @click="handleCounterHome" />
<van-cell title="专柜收款码" is-link value="详细信息" @click="getChargeCode" /> <van-cell title="专柜收款码" is-link value="详细信息" @click="getChargeCode" />
<van-cell title="推送门店信息" is-link value="详细信息" @click="handlePushInfo" /> <van-cell title="推送门店信息" is-link value="详细信息" @click="handlePushInfo" />
</van-cell-group> </van-cell-group>
...@@ -32,26 +26,70 @@ ...@@ -32,26 +26,70 @@
</template> </template>
<script> <script>
import { quillEditor } from "vue-quill-editor"; import { getStoreDetail } from "@/api/sidebar/voucher";
import "quill/dist/quill.core.css"; import { quillEditor } from "vue-quill-editor"
import "quill/dist/quill.snow.css"; import "quill/dist/quill.core.css"
import "quill/dist/quill.bubble.css"; import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
export default { export default {
data() { data() {
return {}; return {
oyStallCode: '',
storeInfo: {
logo: './img/counter.png',
name: 'only专柜',
summaryTitle: 'ONLY是丹麦著名的国际时装公司BESTSELLER拥有的众多著名品牌之一',
},
carousel:['./img/cswiper.png','./img/cswiper.png','./img/cswiper.png','./img/cswiper.png']
}
},
mounted() {
this.oyStallCode = sessionStorage.getItem('oyStallCode')
console.log(this.oyStallCode,'专柜信息oyStallCode');
this.getAgentAuth()
this.getDetail()
}, },
methods: { methods: {
getDetail() {
let params = {
oyStallCode: this.oyStallCode
}
getStoreDetail(params).then(res => {
if(res.data.stallInfo != null) {
console.log(res,'res');
this.carousel = res.data.carousel
this.storeInfo = res.data.stallInfo
}
})
},
handleEdit() { handleEdit() {
this.$router.push("counterEdit") this.$router.push("counterEdit")
}, },
getChargeCode() { getChargeCode() {
this.$router.push("chargeCode") this.$router.push("chargeCode")
}, },
handleCounterHome() {
this.$router.push("counterHome")
},
handlePushInfo() { handlePushInfo() {
this.$router.push("pushStoreInfo") let url = `http://oysales.oywanhao.com:8087/counterPageHome?oyStallCode=${this.oyStallCode}`
wx.invoke("shareToExternalContact", {
title: '专柜首页', // 消息的标题
desc: '专柜首页详情', // 消息的描述
link: url, // 消息链接
imgUrl: '' // 消息封面
},function(res) {
if (res.err_msg == "shareToExternalContact:ok") {
this.$router.push({ path: "counterInfo" })
}else {
console.log(res.err_msg,'错误信息')
}
})
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>
...@@ -76,7 +114,7 @@ export default { ...@@ -76,7 +114,7 @@ export default {
.img { .img {
width: 100%; width: 100%;
height: 200px; height: 200px;
background-color: pink; background-color: #fff;
} }
.img img { .img img {
width: 100%; width: 100%;
......
<template> <template>
<div class="container"> <div class="container">
<div> <div>推送</div>
<!-- 搜索框 --> <!-- <div>
<van-search v-model="inputValue" placeholder="请输入搜索关键词" /> <van-search v-model="inputValue" placeholder="请输入搜索关键词" />
</div> </div>
<van-checkbox-group v-model="list" @change="onChange"> <van-checkbox-group v-model="list" @change="onChange">
...@@ -14,12 +14,16 @@ ...@@ -14,12 +14,16 @@
<van-checkbox slot="right-icon" catch:tap="noop" :name="item.id" /> <van-checkbox slot="right-icon" catch:tap="noop" :name="item.id" />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group> -->
<div>外部联系人{{ info }}</div>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
import { wxRequest } from '@/utils/aWxRequest'
// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
// let vConsole = new VConsole()
export default { export default {
data() { data() {
return { return {
...@@ -37,26 +41,45 @@ export default { ...@@ -37,26 +41,45 @@ export default {
} }
], ],
list: [], list: [],
info: '' info: '',
userId: ''
} }
}, },
mounted() { mounted() {
this.getAgentAuth() this.getAgentAuth()
this.getList()
}, },
methods: { methods: {
getList() { getList() {
wx.invoke('selectExternalContact', { let url = 'http://oysales.oywanhao.com:8087/counterPageHome'
"filterType": 0, wx.invoke("shareToExternalContact", {
}, title: '专柜首页', // 消息的标题
function(res){ desc: '专柜首页详情', // 消息的描述
if(res.err_msg == "selectExternalContact:ok"){ link: url, // 消息链接
alert(`${JSON.stringify(res)}`) imgUrl: '' // 消息封面
this.info = `${JSON.stringify(res)}` },function(res) {
if (res.err_msg == "shareToExternalContact:ok") {
this.$router.push({ path: "counterInfo" })
}else { }else {
//错误处理 console.log(res.err_msg,'错误信息')
alert('获取失败')
} }
}) })
// this.userId = sessionStorage.getItem('userId')
// let postData = {
// userId: this.userId
// }
// let header = {
// token: sessionStorage.getItem('XToken'),
// corpId: 'ww4df265003b43fa0d',
// agentId: '1000033'
// }
// wx.invoke('selectExternalContact', { "filterType": 0}, function(res){
// if(res.err_msg == "selectExternalContact:ok"){
// console.log(res,'联系人列表')
// }else {
// console.log('获取失败')
// }
// })
}, },
onChange(val) { }, onChange(val) { },
toggle(event) { toggle(event) {
......
...@@ -48,11 +48,7 @@ ...@@ -48,11 +48,7 @@
</div> </div>
<div class="main-actives"> <div class="main-actives">
<div class="actives-banners"> <div class="actives-banners">
<!--<img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->
<div class="actives-banner-title">现有开展活动</div> <div class="actives-banner-title">现有开展活动</div>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
</div> </div>
<div class="actives-main"> <div class="actives-main">
<div class="active-logos"> <div class="active-logos">
......
...@@ -69,8 +69,11 @@ ...@@ -69,8 +69,11 @@
</template> </template>
<script> <script>
import {configWx, getUserInfo} from "@/utils/aCommon"; import {configWx, getUserInfo} from "@/utils/aCommon"
import axios from "axios"; import axios from "axios"
// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
import { editStore } from "@/api/sidebar/voucher";
// let vConsole = new VConsole()
export default { export default {
name: "me", name: "me",
...@@ -129,10 +132,8 @@ ...@@ -129,10 +132,8 @@
}; };
}, },
mounted() { mounted() {
this.checkNowMenuBar(); this.checkNowMenuBar()
/* alert('测试测试') // this.zReadyUserId()
alert(this.$route.query.code) */
this.zReadyUserId()
this.zTestGetNowUrlInfo() this.zTestGetNowUrlInfo()
}, },
...@@ -159,12 +160,6 @@ ...@@ -159,12 +160,6 @@
}, },
// 获取code // 获取code
zReadyUserId() { zReadyUserId() {
/* zlog(
"%c--->this.zcache.code =",
"color: orange;",
this.$route.query.code
) */
if (this.$route.query.code === undefined){ if (this.$route.query.code === undefined){
// alert('没code') // alert('没code')
this.zTestPreAuthCode() this.zTestPreAuthCode()
...@@ -176,7 +171,6 @@ ...@@ -176,7 +171,6 @@
}, },
// 测试-获取当前Url信息 // 测试-获取当前Url信息
zTestGetNowUrlInfo() { zTestGetNowUrlInfo() {
// alert('获取url')
this.zcache.nowUrl = JSON.stringify(this.$route.query); this.zcache.nowUrl = JSON.stringify(this.$route.query);
this.zcache.code = String(this.$route.query.code); this.zcache.code = String(this.$route.query.code);
this.url = this.zcache.nowUrl this.url = this.zcache.nowUrl
...@@ -212,15 +206,14 @@ ...@@ -212,15 +206,14 @@
}, },
// 测试-获取用户信息 // 测试-获取用户信息
zTestGetUserInfoByOldToken() { zTestGetUserInfoByOldToken() {
// alert('获取用户信息')
let postData = { let postData = {
code: this.zcache.code, code: this.zcache.code,
}; };
let headerData = { let headerData = {
agentId: "1000032", agentId: "1000033",
corpId: "ww4df265003b43fa0d" corpId: "ww4df265003b43fa0d"
}; };
this.zcache.userInfoResOld = "PostData:" + JSON.stringify(postData); this.zcache.userInfoResOld = "PostData:" + JSON.stringify(postData)
axios({ axios({
url: "http://139.155.48.151:8085/workWx/auth/oauth2/getUserInfo?code=" + this.zcache.code, url: "http://139.155.48.151:8085/workWx/auth/oauth2/getUserInfo?code=" + this.zcache.code,
method: "post", method: "post",
...@@ -228,14 +221,23 @@ ...@@ -228,14 +221,23 @@
}) })
.then(res => { .then(res => {
// alert('获取用户信息接口成功') // alert('获取用户信息接口成功')
this.userInfo = JSON.stringify(res); sessionStorage.setItem("userId", String(res.data.data.userId))
this.zcache.userInfoResNew = "RESOK:" + res.data.data.userId; this.zcache.userId = String(res.data.data.userId)
sessionStorage.setItem("userId", String(res.data.data.userId)); this.getUserFromId(this.zcache.userId)
this.zcache.userId = String(res.data.data.userId);
}) })
.catch(err => { .catch(err => {
this.zcache.userInfoResNew = "RESERR."; console.log(err)
}); });
},
getUserFromId(id) {
let userName = id
getUserInfoByUserId({ userName }).then(res => {
// alert('获取成功')
sessionStorage.setItem("oyStallCode",res.data[0].oyStallCode)
this.storeCode = res.data[0].oyStallCode
})
.catch(err => {
})
}, },
handleDetail(type){ handleDetail(type){
if(type === 'message'){ if(type === 'message'){
......
...@@ -65,7 +65,6 @@ ...@@ -65,7 +65,6 @@
r = null r = null
return context == null || context == "" || context == "undefined" ? "" : context; return context == null || context == "" || context == "undefined" ? "" : context;
} }
// alert(GetQueryString("storeCode"))
const storecode = GetQueryString("storeCode") const storecode = GetQueryString("storeCode")
$(function () { $(function () {
showQRInfo() showQRInfo()
......
...@@ -9,7 +9,7 @@ export function wxRequest(inUrl, data = {}, header = {}, method = 'post') { ...@@ -9,7 +9,7 @@ export function wxRequest(inUrl, data = {}, header = {}, method = 'post') {
// corpId: 'wwd1cdbca7b8b2b6c4', // corpId: 'wwd1cdbca7b8b2b6c4',
// agentId: '1000015', // agentId: '1000015',
corpId: 'ww4df265003b43fa0d', corpId: 'ww4df265003b43fa0d',
agentId: '1000032', agentId: '100003',
// url: 'http://139.155.48.151:8085' + inUrl, // url: 'http://139.155.48.151:8085' + inUrl,
url: envConfig.appBaseUrlA + inUrl, url: envConfig.appBaseUrlA + inUrl,
} }
......
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
// alert('--->arCode: mounted: IN.') // alert('--->arCode: mounted: IN.')
this.cleanUrl() this.cleanUrl()
// this.getAcessToken(); // this.getAcessToken();
this.createCode(); this.createCode()
}, },
methods: { methods: {
cleanUrl() { cleanUrl() {
......
...@@ -29,7 +29,8 @@ import { getUserInfoByUserId } from "@/api/sidebar/voucher"; ...@@ -29,7 +29,8 @@ import { getUserInfoByUserId } from "@/api/sidebar/voucher";
logoUrl: "/mainSale/4.png" logoUrl: "/mainSale/4.png"
} }
], ],
storeCode: '' storeCode: '',
oyStallCode: ''
} }
}, },
created() { created() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment