[fix]账单活动

master
lujian 6 years ago
parent 2eb65aa920
commit 560bf07c69

@ -22,4 +22,6 @@ public interface AppActService {
JSONObject getLatestWindowNotice();
void published(JSONObject manager,String act_id,boolean is_valid);
void sendAnnualBillMessage();
}

@ -6,25 +6,60 @@ import au.com.royalpay.payment.manage.activities.app_index.beans.AppActQueryBean
import au.com.royalpay.payment.manage.activities.app_index.core.AppActService;
import au.com.royalpay.payment.manage.mappers.act.ActAppMapper;
import au.com.royalpay.payment.manage.mappers.log.AppMessageLogMapper;
import au.com.royalpay.payment.manage.mappers.system.ClientDeviceTokenMapper;
import au.com.royalpay.payment.manage.pushMessage.APNSMessageHelper;
import au.com.royalpay.payment.manage.pushMessage.bean.AppManagerMessageBuilder;
import au.com.royalpay.payment.manage.riskbusiness.core.impl.RiskBusinessServiceImpl;
import au.com.royalpay.payment.tools.device.message.AppMessage;
import au.com.royalpay.payment.tools.device.message.AppMsgSender;
import au.com.royalpay.payment.tools.env.PlatformEnvironment;
import au.com.royalpay.payment.tools.exceptions.ServerErrorException;
import au.com.royalpay.payment.tools.locale.LocaleSupport;
import com.alibaba.fastjson.JSONObject;
import com.github.miemiedev.mybatis.paginator.domain.Order;
import com.github.miemiedev.mybatis.paginator.domain.PageBounds;
import com.github.miemiedev.mybatis.paginator.domain.PageList;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import org.springframework.util.Assert;
import java.util.Date;
import java.util.List;
import java.util.*;
import java.util.concurrent.LinkedBlockingQueue;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.concurrent.TimeUnit;
import javax.annotation.Resource;
@Service
public class AppActServiceImp implements AppActService {
private Logger logger = LoggerFactory.getLogger(RiskBusinessServiceImpl.class);
@Resource
private ActAppMapper actAppMapper;
@Resource
private ClientDeviceTokenMapper clientDeviceTokenMapper;
@Resource
private AppMessageLogMapper appMessageLogMapper;
private Map<String, AppMsgSender> senderMap = new HashMap<>();
@Resource
private APNSMessageHelper apnsMessageHelper;
@Resource
public void setAppMsgSenders(AppMsgSender[] senders) {
Arrays.stream(senders).forEach(appMsgSender -> senderMap.put(appMsgSender.devType(), appMsgSender));
}
private ThreadPoolExecutor sendingAppleMsgPool = new ThreadPoolExecutor(10, 30, 5, TimeUnit.SECONDS, new LinkedBlockingQueue<Runnable>());
@Override
public List<JSONObject> listAppActs(){
// List<JSONObject> list = actAppMapper.listActs();
@ -82,4 +117,67 @@ public class AppActServiceImp implements AppActService {
params.put("update_time",new Date());
actAppMapper.updateAct(params);
}
@Override
public void sendAnnualBillMessage() {
logger.debug("sendAnnualMessage Begin");
JSONObject params = new JSONObject();
params.put("client_id", 9);
List<JSONObject> tokens = clientDeviceTokenMapper.listAllTokens(params);
for (JSONObject devToken : tokens) {
Runnable task = () -> {
String token = devToken.getString("token");
// token = "c271fec4_be51_4ba5_b368_48d113626911";
// devToken.put("client_type", "android");
// devToken.put("token", token);
JSONObject log = saveAppMessageLog(devToken.getString("dev_id"),
devToken.getIntValue("client_id"),
"annual_bill" + devToken.getString("client_type"),
token,
"年度账单"
);
try {
JSONObject type = new JSONObject();
type.put("send_type", "annual_bill");
type.put("id", devToken.getString("dev_token_id"));
AppMsgSender sender = senderMap.get((devToken.getString("client_type")));
if (StringUtils.isBlank(token) || sender == null) {
return;
}
JSONObject managerMsg = new JSONObject();
managerMsg.put("title", LocaleSupport.localeMessage("app.message.title.annual_bill"));
managerMsg.put("body", LocaleSupport.localeMessage("app.message.body.annual_bill"));
managerMsg.put("type", type);
JSONObject messageData = new JSONObject();
messageData.put("url", PlatformEnvironment.getEnv().concatUrl("/annual_bill.html"));
System.out.println(PlatformEnvironment.getEnv().concatUrl("/annual_bill.html"));
managerMsg.put("data", messageData);
managerMsg.put("msgType", "annual_bill");
AppMessage appMessage = new AppManagerMessageBuilder(managerMsg).buildMessage();
sender.sendMessage(appMessage, devToken);
log.put("status", 2);
appMessageLogMapper.update(log);
} catch (Exception e) {
logger.error("出错了:" + e.getMessage());
appMessageLogMapper.updateStatus(log.getString("send_id"), 1, e.getMessage());
throw new ServerErrorException("Send App" + devToken.getString("client_type") + "Filed" + ",token" + token, e);
}
};
sendingAppleMsgPool.execute(task);
}
}
private JSONObject saveAppMessageLog(String dev_id, int client_id, String messageType, String dev_token, String remark) {
JSONObject log = new JSONObject();
log.put("dev_id", dev_id);
log.put("client_id", client_id);
log.put("msg_type", messageType);
log.put("dev_token", dev_token);
log.put("remark", remark);
log.put("send_time", new Date());
appMessageLogMapper.save(log);
return log;
}
}

@ -12,12 +12,7 @@ import com.alibaba.fastjson.JSONObject;
import com.github.miemiedev.mybatis.paginator.domain.PageList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/manager/app/act")
@ -50,4 +45,10 @@ public class AppActController {
public void publishedAppAct(@ModelAttribute(CommonConsts.MANAGER_STATUS) JSONObject manager, @PathVariable String act_id,@RequestBody boolean is_valid){
appActService.published(manager,act_id,is_valid);
}
@GetMapping(value = "/annual/bill")
public String sendAnnualBillMessage() {
appActService.sendAnnualBillMessage();
return "success";
}
}

@ -24,6 +24,8 @@ public interface ClientDeviceTokenMapper {
List<JSONObject> listTokensByClient_id(@Param("client_id") int client_id);
List<JSONObject> listAllTokens(JSONObject devToken);
@AutoSql(type = SqlType.SELECT)
List<JSONObject> listAllTokensByClient_id(@Param("client_id") int client_id);
}

@ -40,6 +40,8 @@ public class RiskBusinessController {
@Autowired
private RiskProcessLogService riskProcessLogService;
@GetMapping(value = "events")
public JSONObject getRiskEvents(RiskEventQuery riskEventQuery, @ModelAttribute(CommonConsts.MANAGER_STATUS) JSONObject manager) {
JSONObject params = riskEventQuery.toJSON();

@ -27,6 +27,24 @@
GROUP BY
token
</select>
<select id="listAllTokens" resultType="com.alibaba.fastjson.JSONObject">
select
scdt.*,
scd.client_type
from
sys_clients_devices_token scdt
left join sys_clients_devices scd on scdt.dev_id = scd.dev_id
<where>
scd.client_type is not null
and token is not null
<if test="client_id != null">
and scdt.client_id = #{client_id}
</if>
</where>
group by token
</select>
<select id="findByDevId" resultType="com.alibaba.fastjson.JSONObject">
SELECT * FROM sys_clients_devices_token where dev_id=#{dev_id} limit 1
</select>

@ -95,6 +95,8 @@ app.message.body.cashback=You got a cashback of
app.message.title.clean=Settlement Notification
app.message.body.clean=Today's clearing has been completed,settlement count is
app.message.title.daily_notice=Daily Transaction Report
app.message.title.annual_bill=Royal Pay thanks for your company in 2018
app.message.body.annual_bill=Come and check your annual bill
app.label.pay=Pay

@ -91,6 +91,8 @@ app.message.body.cashback=您获得了一笔ROYALPAY返现金额
app.message.title.clean=清算通知
app.message.body.clean=您今日的清算已完成,共
app.message.title.daily_notice=每日交易汇总提醒
app.message.title.annual_bill=2018年RoyalPay感谢有你
app.message.body.annual_bill=快来查收你的年度账单
app.label.pay=支付
app.label.remark=备注

@ -0,0 +1,980 @@
<!DOCTYPE html>
<html>
<head>
<title>2018澳洲市场跨境支付大数据</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="static/css/annualBill/swiper.css">
<link rel="stylesheet" type="text/css" href="static/css/annualBill/annual_bill.css">
</head>
<body>
<div id="bottom" class="bottom">
<div id="bottom-text" class="bottom-text">滑动查看2019账单</div>
<div class="bottom-img">
<img id="bottom-img" src="static/images/annualBill/upgray@2x.png" onclick="slideNextPage()">
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 第一屏 -->
<div class="swiper-slide slide1">
<div class="logo">
<img src="static/images/annualBill/royalpaylogo@2x.png">
</div>
<div class="slide1-body">
<img src="static/images/annualBill/title@2x.png" height="100%;">
</div>
<div class="huojian">
<img src="static/images/annualBill/huojian@2x.png">
</div>
<!-- <div class="bottom">
<div class="bottom-text">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/upgray@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第二屏 -->
<div class="swiper-slide slide2">
<div class="slide2-title">
<div>成交订单</div>
<div>数据分析</div>
</div>
<div class="slide2-wish-text">
2018跨境支付订单量迅猛增长
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="height: 65px;"></div>
<div style="width: 35%; display: inline-block; vertical-align: top; padding: 30px 10px 0 30px;">
<img src="static/images/annualBill/zhangdan@2x.png">
</div>
<ul class="slide2-data" style="display: inline-block; vertical-align: top;">
<li>2018年成交订单数</li>
<li id="ordersAmount">0</li>
<li>较去年增长</li>
<li>
<span id="orderGrowRate">0</span>
<span>%</span>
</li>
<li>每日成交订单数</li>
<li id="dailyOrders">0</li>
</ul>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第三屏 -->
<div class="swiper-slide slide3">
<div class="slide2-title">
<label>跨境支付</label><br>
<label>商户规模</label>
</div>
<div class="slide2-wish-text">
您的2018业绩非凡愿你2019百尺竿头更进一步向更远大的目标前行。
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div class="fangkuai-div">
<img src="static/images/annualBill/fangkuai.png">
</div>
<ul class="slide2-data" style="margin-left: 30%; margin-right: 10%;">
<li>选择RoyalPay完成跨境支付的商家数量</li>
<li id="merchantNum">16,000</li>
</ul>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第四屏 -->
<div class="swiper-slide slide4">
<div class="slide2-title">
<label>跨境支付</label><br>
<label>用户规模</label>
</div>
<div class="slide2-wish-text">
使用RoyalPay跨境支付服务的用户持续增长
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="height: 2.5rem;"></div>
<ul class="slide2-data" style="margin-left: 50px; margin-right: 30px;">
<li>2018年通过RoyalPay完成无卡支付的用户</li>
<li id="payedUsersNum">819,677</li>
<li>较去年增长</li>
<li>
<span id="payedUsersGrowNum">142</span>
<span>%</span>
</li>
<li>平均每天达</li>
<li style="position: relative;">
<span id="dailyPayedUsersNum">2,245</span>
<span></span>
<div style="position: absolute; width: 9rem; left: 40%; bottom: -2rem">
<img src="static/images/annualBill/shanghuzengz@2x.png">
</div>
</li>
</ul>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第五屏 -->
<div class="swiper-slide slide5">
<div class="slide2-title">
<label>跨境支付</label><br>
<label>交易数据</label>
</div>
<div class="slide2-wish-text">
如果每笔交易都打印一张收营小票,将它们展开来可以铺满
<span style="color: #07DFC8">0.55</span>个悉尼歌剧院。
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<ul class="slide2-data" style="padding-left: 45%; padding-right: 30px; padding-top: 3rem; padding-bottom: 4rem; background-image: url('static/images/annualBill/money@2x.png'); background-repeat: no-repeat; background-size: 45%; position: relative;">
<li>2018年每月流水超</li>
<li>
<span>$</span>
<span id="transactionAmount">37,425,582</span>
</li>
<li>平均每一分钟就有超过</li>
<li>
<span style="color: #07DFC8">13</span>
<span>笔新交易</span>
</li>
<li style="margin-top: 20px!important">支付系统管理后台,每月商户登录超</li>
<li>
<span style="color: #07DFC8">1</span>
<span>万次</span>
</li>
<li style="position: absolute; right: 0; width: 70%;">
<img src="static/images/annualBill/sydney@2x.png">
</li>
</ul>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第六屏 -->
<div class="swiper-slide slide6">
<div class="slide2-title">
<label>商户行业</label><br>
<label>分布占比</label>
</div>
<div class="slide2-wish-text">
新兴场景不断涌现预计2019年将会达到猛增期
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="height: 3.5rem;"></div>
<div class="industry">
<ul style="list-style: none;">
<li style="margin-bottom: 20px;">
<label class="left"></label>
<label class="industry-title">传统场景: </label>
</li>
<li>
<label class="industry-name text-right left">数码电器</label>
<label style="width: 2%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">鞋包服饰</label>
<label style="width: 8%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">母婴化妆</label>
<label style="width: 10%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">教育办公</label>
<label style="width: 12%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">酒店航空</label>
<label style="width: 14%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">医疗食品</label>
<label style="width: 32%;" class="blue-to-green"></label>
</li>
<li>
<label class="industry-name text-right left">零售百货</label>
<label style="width: 45%;" class="blue-to-green"></label>
</li>
</ul>
<ul class="ul-right">
<li style="margin-bottom: 20px;">
<label style="width: 50%; display: inline-block;" class="text-right">
<label class="industry-title">新兴场景: </label>
</label>
<label style="" class="industry-name"></label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class=""></label>
</label>
<label style="" class="industry-name"></label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">软件服务</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 60%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">跨境贸易</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 90%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">新兴服务</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 50%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">跨境物流</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">国际租车</label>
</li>
<li>
<label style="width: 50%; display: inline-block;" class="text-right">
<label style="width: 30%" class="yellow-to-orange"></label>
</label>
<label style="" class="industry-name">网络教育</label>
</li>
</ul>
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第七屏 -->
<div class="swiper-slide slide7">
<div class="slide2-title">
<label>商户区域占比</label><br>
<label>Top8</label>
</div>
<div class="slide2-wish-text" style="margin-top: 2rem">
维多利亚州商户数量占全澳42%,位居第一
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="height: 1.25rem;"></div>
<div style="width: 100%; height: 300px; position: relative;">
<div style="width: 55px; height: 55px;" class="common-circle" id="circle7"></div>
<div style="bottom: -5px;" class="top-key-value">
<label class="top-key">TOP1: </label>
<label class="top-value">VIC</label>
</div>
<div style="width: 90px; height: 90px;" class="common-circle" id="circle6"></div>
<div style="bottom: 12px;" class="top-key-value">
<label class="top-key">TOP2: </label>
<label class="top-value">NSW</label>
</div>
<div style="width: 125px; height: 125px;" class="common-circle" id="circle5"></div>
<div style="bottom: 30px;" class="top-key-value">
<label class="top-key">TOP3: </label>
<label class="top-value">QLD</label>
</div>
<div style="width: 160px; height: 160px;" class="common-circle" id="circle4"></div>
<div style="bottom: 47px;" class="top-key-value">
<label class="top-key">TOP4: </label>
<label class="top-value">WA</label>
</div>
<div style="width: 195px; height: 195px;" class="common-circle" id="circle3"></div>
<div style="bottom: 65px;" class="top-key-value">
<label class="top-key">TOP5: </label>
<label class="top-value">SA</label>
</div>
<div style="width: 230px; height: 230px;" class="common-circle" id="circle2"></div>
<div style="bottom: 82px;" class="top-key-value">
<label class="top-key">TOP6: </label>
<label class="top-value">TAS</label>
</div>
<div style="width: 265px; height: 265px;" class="common-circle" id="circle1"></div>
<div style="bottom: 100px;" class="top-key-value">
<label class="top-key">TOP7: </label>
<label class="top-value">ACT</label>
</div>
<div style="width: 300px; height: 300px;" class="common-circle" id="circle0"></div>
<div style="bottom: 118px;" class="top-key-value">
<label class="top-key">TOP8: </label>
<label class="top-value">NT</label>
</div>
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第八屏 -->
<div class="swiper-slide">
<div class="slide2-title">
<label>线上支付订单</label><br>
<label>迅猛增长</label>
</div>
<div class="slide2-wish-text" style="margin-top: 40px;">
线上数据截止到2018年12月
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="width: 100%; height: 8.4rem; text-align: right;">
<img src="static/images/annualBill/xianshangzhifu @2x.png">
</div>
<ul class="slide2-data" style="margin-left: 45px;">
<li>2018年接入电商网站</li>
<li>
<span id="onlineMerchant">696</span>
<span></span>
</li>
<li>
月均线上支付次数
<span style="display: inline-block; width: 30px;"></span>
<span class="circle-dot"></span>
<span style="display:inline-block;">较去年增长</span>
</li>
<li>
<span id="monthPayCount">96,738</span>
<span style="display: inline-block; margin-left: 100px;"><span id="monthPayCountGrow">327</span>%</span>
</li>
</ul>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第九屏 -->
<div class="swiper-slide slide9">
<div class="slide2-title">
<label>线下用户更倾向</label><br>
<label>于主动扫码支付</label>
</div>
<div class="slide2-wish-text" style="margin-top: 20px;">
线上线下各支付渠道占比
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div class="gateway">
<div class="gateway-online">
<span class="green-dot"></span>
<span class="gray-text" style="vertical-align: middle">线上支付渠道</span>
</div>
<div class="gateway-offline">
<span class="orange-dot"></span>
<span class="gray-text" style="vertical-align: middle">线上支付渠道</span>
</div>
</div>
<div class="gateway-bar">
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem;">1%</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP QrCode Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 5rem; "></div>
<div class="gateway-item-rate" style="bottom: 5rem;">12%</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP JSAPI Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem;">1%</div>
<div class="gateway-name">
<img src="static/images/annualBill/H5 Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem">1%</div>
<div class="gateway-name">
<img src="static/images/annualBill/APP Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-online-item" style="height: 1rem; "></div>
<div class="gateway-item-rate" style="bottom: 1rem">1%</div>
<div class="gateway-name">
<img src="static/images/annualBill/3rd Party Gateway.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 9rem; "></div>
<div class="gateway-item-rate" style="bottom: 9rem;">72%</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP Merchant QrCode.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 3rem; "></div>
<div class="gateway-item-rate" style="bottom: 3rem">8%</div>
<div class="gateway-name">
<img src="static/images/annualBill/RP POS.png">
</div>
</div>
<div class="gateway-bar-item">
<div class="gateway-bar-item-data gateway-offline-item" style="height: 2rem; "></div>
<div class="gateway-item-rate" style="bottom: 2rem">4%</div>
<div class="gateway-name">
<img src="static/images/annualBill/Retail API.png">
</div>
</div>
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十屏 -->
<div class="swiper-slide slide2">
<div class="slide2-title">
<label>维多利亚:</label><br>
<label>线下交易量之最</label>
</div>
<div class="slide2-wish-text">
扫码支付交易笔数在澳洲区域分布
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="padding: 20px;position: relative">
<img src="static/images/annualBill/mapplusdata.png">
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十一屏 -->
<div class="swiper-slide slide2">
<div class="slide2-title">
<label>目前女性</label><br>
<label>更爱扫码支付</label>
</div>
<div class="slide2-wish-text">
2018年澳洲境内的线下扫码支付更受女性欢迎
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="padding: 50px;position: relative">
<img src="static/images/annualBill/womanandman.png">
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十二屏 -->
<div class="swiper-slide slide2">
<div class="slide2-title">
<label>三餐时段为</label><br>
<label>交易高峰期</label>
</div>
<div class="slide2-wish-text">
平均一天24小时内的交易次数统计
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div id="main" style="width: 100%;height:300px; margin-top: 1.5rem;"></div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十三屏 -->
<div class="swiper-slide slide2">
<div class="slide2-title">
<label>半边天慈善活动</label><br>
<label>排行榜</label>
</div>
<div class="slide2-wish-text">
半边天活动参与商户活动期间交易笔数TOP10
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="padding: 30px; margin-top: 30px;">
<img src="static/images/annualBill/paihang.png">
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十四屏 -->
<div class="swiper-slide">
<div class="slide2-title">
<label>2019年RoyalPay服务支撑将更加完善</label>
</div>
<div class="slide2-wish-text" style="margin-top: 40px;">
体验优化、效率提升、助力商户业绩提升;扫码移动支付 + 多渠道融合->智能无卡支付体验
</div>
<div class="slide2-hr">
<div class="left"></div>
</div>
<div style="padding: 35px 25px; ">
<img src="static/images/annualBill/radar.png">
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
<!-- 第十五屏 -->
<div class="swiper-slide" style="background-image: url('static/images/annualBill/thanks@2x.png'); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%;">
<div class="slide2-title" style="text-align: center; margin: 110px 0 0 0" >
<label>THANK YOU</label>
</div>
<div class="slide2-wish-text" style="text-align: center; margin-top: 40px;">
RoyalPay作为一家无缝对接中国消费者与澳洲商家的Fintech企业,致力于提供更安全便捷的支付体验, 助力全球跨境支付业务蓬勃发展。感谢您的加入,让我们离智慧生活的新时代又近了一步!
</div>
<!-- <div class="bottom">
<div class="bottom-text2">滑动查看2019账单</div>
<div class="bottom-img">
<img src="static/images/annualBill/up@2x.png" onclick="slideNextPage()">
</div>
</div> -->
</div>
</div>
<!-- 如果需要分页器 -->
<!-- <div class="swiper-pagination"></div> -->
</div>
<script src="static/lib/annualBill/jquery-2.1.4.min.js"></script>
<script src="static/lib/annualBill/swiper.min.js"></script>
<script src="static/lib/annualBill/circle-progress.js"></script>
<script type="text/javascript" src="static/lib/annualBill/echarts.min.js"></script>
<script type="text/javascript" src="static/lib/annualBill/countUp.min.js"></script>
<script>
var numAnimTime = 1;
var orderAnimObject = {
ordersAmount: 6686645,
orderGrowRate: 169,
dailyOrders: 18320
};
var merchantNum = 16000;
var payedUsersAnimObject = {
payedUsersNum: 819667,
payedUsersGrowNum: 142,
dailyPayedUsersNum: 2245
};
var transactionAmount = 37425582;
var payCountAnimObject = {
onlineMerchant: 696,
monthPayCount: 96738,
monthPayCountGrow: 327
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: [
{
name: '线上支付',
icon: 'circle'
},
{
name: '线下支付',
icon: 'circle',
}
],
orient: 'vertical',
textStyle: {
color: '#686868',
fontFamily: 'SourceHanSansCN-Medium',
fontSize: 16
},
tooltip: {
show: true
},
left: 30,
},
grid: {
show: true,
containLabel: true,
borderColor: '#686868',
left: 30,
right: 30,
top: 80,
height: 200
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14, 15,16, 17,
18, 19, 20, 21, 22, 23
],
axisLine: {
lineStyle: {
color: '#686868',
fontFamily: 'SourceHanSansCN-Medium',
fontSize: 10
}
},
axisLabel: {
show: true,
color: '#686868',
fontFamily: 'SourceHanSansCN-Medium',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#686868',
type: 'solid',
opacity: 0.3
}
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
show: true,
axisLine: {
lineStyle: {
color: '#686868',
opacity: 0.3
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
lineStyle: {
color: '#686868',
type: 'solid',
opacity: 0.3
}
}
},
series: [
{
name:'线上支付',
type:'line',
data:[
27175, 19166, 11334, 5457, 2499, 1759,
2038, 2973, 6059, 13721, 35511, 59188,
69934, 70927, 62430, 64442, 68738, 66393,
55559, 44836, 35574, 33705, 33181, 31530
],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#22F6EC' // 0% 处的颜色
}, {
offset: 1, color: '#0C67DA' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
lineStyle: {
width: 5
},
symbol: 'none',
smooth: false
},
{
name:'线下支付',
type:'line',
stack: '总量',
data:[
36803, 18644, 8055, 3238, 1641, 1497,
2631, 6956, 22498, 80769, 231984, 383538,
468096, 493736, 487702, 508820, 537412, 524330,
424038, 295583, 192277, 119204, 80346, 62734
],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#E5E117' // 0% 处的颜色
}, {
offset: 1, color: '#DC322A' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
lineStyle: {
width: 5
},
symbol: 'none',
smooth: false
}
],
toolbox: {
show: false
}
};
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
initialSlide: 5,
on: {
slideChangeTransitionEnd: function(event) {
var bottomText = document.getElementById('bottom-text');
if(this.activeIndex > 0) {
bottomText.style.color = "#FFFFFF"
document.getElementById('bottom-img').src = 'static/images/annualBill/up@2x.png'
} else {
bottomText.style.color = '#1C2029';
document.getElementById('bottom-img').src = 'static/images/annualBill/upgray@2x.png'
}
if (this.activeIndex == 11) {
myChart.clear()
myChart.setOption(option, true);
}
if (this.activeIndex == 6) {
var maxSize = 300;
var value = [ 0.7, 0.65, 0.6, 0.55, 0.5, 0.47, 0.45, 0.4];
for(var i = 0; i < 8; i++) {
$('#circle' + i).circleProgress({
value: value[i],
size: maxSize - i * 35,
thickness: 6,
startAngle: Math.PI / 2,
fill: {
gradient: ["#0D69DA", "#0FEBD4"]
}
});
}
}
if (this.activeIndex == 14) {
document.getElementById('bottom').style.display = 'none'
} else {
document.getElementById('bottom').style.display = 'block'
}
if (this.activeIndex == 1) {
for(var key in orderAnimObject) {
var numAnim = new CountUp(key, 0, orderAnimObject[key], 0, numAnimTime);
if (!numAnim.error) {
numAnim.start();
} else {
console.error(numAnim.error)
}
}
}
if (this.activeIndex == 2) {
var merchantNumAnim = new CountUp('merchantNum', 0, merchantNum, 0, numAnimTime);
merchantNumAnim.start()
}
if (this.activeIndex == 3) {
for(var key in payedUsersAnimObject) {
var numAnim = new CountUp(key, 0, payedUsersAnimObject[key], 0, numAnimTime);
numAnim.start();
}
}
if (this.activeIndex == 4) {
var transactionsNumAnim = new CountUp('transactionAmount', 0, transactionAmount, 0, numAnimTime);
transactionsNumAnim.start()
}
if (this.activeIndex == 7) {
for(var key in payCountAnimObject) {
var payCountAnim = new CountUp(key, 0, payCountAnimObject[key], 0, numAnimTime)
payCountAnim.start();
}
}
}
},
});
function slideNextPage() {
mySwiper.slideNext();
}
// 数字千分位格式化
function toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result;
}
function numberAdd() {
}
</script>
<script>
</script>
<script>
</script>
</body>
</html>

@ -0,0 +1,398 @@
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
html {
font-size: 10px;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.gray-text {
font-family: SourceHanSansCN-Medium;
font-size: 16px;
color: #686868;
letter-spacing: 0.38px;
}
.tiny-gray-text {
font-family: SourceHanSansCN-Medium;
font-size: 10px;
color: #686868;
letter-spacing: 0.24px;
}
.green-title {
font-family: SourceHanSansCN-Medium;
font-size: 27px;
color: #07DFC8;
letter-spacing: 0.65px;
text-align: center;
}
.white-content {
font-family: SourceHanSansCN-Medium;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0.38px;
text-align: center;
line-height: 22px;
}
.border {
border: 1px solid red;
}
.swiper-container{
height: 100%;
background-color: #1C2029;
}
.slide1 {
background-repeat:no-repeat;
background-image: url('../../images/annualbill/star@2x.png');
}
.logo {
padding: 21px 0 0 26px;
}
.logo img {
width: 82px;
height: 16.7px;
}
.slide1-body {
margin: 20px;
text-align: center;
height: 45%;
}
.bottom {
width: 100%;
position: fixed;
bottom: 10px;
text-align: center;
z-index: 999;
animation: move 2s infinite;
-webkit-animation: move 2s infinite;
}
.bottom-text {
opacity: 0.3;
font-family: SourceHanSansCN-Medium;
font-size: 16px;
color: #1C2029;
letter-spacing: 0.38px;
text-align: center;
line-height: 22px;
}
.bottom-text2 {
opacity: 0.3;
font-family: SourceHanSansCN-Medium;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0.38px;
text-align: center;
line-height: 22px;
}
.bottom-img {
margin-top: 5px;
}
.bottom-img img {
width: 20px;
}
.huojian {
text-align: center;
position: absolute;
bottom: 0;
z-index: 1;
}
.huojian img {
display: block;
}
.slide2-title {
font-family: SourceHanSansCN-Medium;
font-size: 1.5rem;
color: #07DFC8;
letter-spacing: 5px;
line-height: 1.95rem;
margin: 2.7rem 0 0 1.35rem;
}
.slide2-wish-text {
font-family: SourceHanSansCN-Medium;
font-size: 0.8rem;
color: #FFFFFF;
letter-spacing: 0.38px;
line-height: 1.1rem;
margin: 1.05rem 2rem 0 1.35rem;
}
.slide2-hr {
background: #686868;
border-radius: 1.5px;
height: 3px;
margin: 0.85rem 1.95rem 0px 1.35rem;
}
.slide2-hr .left {
background: #FFFFFF;
width: 15%;
height: 3px;
border-radius: 1.5px;
}
.slide2-data {
}
.slide2-data li:nth-of-type(odd) {
font-family: SourceHanSansCN-Medium;
font-size: 0.8rem;
color: #686868;
letter-spacing: 0.38px;
}
.slide2-data li:nth-of-type(even) {
font-family: SourceHanSansCN-Medium;
font-size: 1.3rem;
color: #07DFC8;
letter-spacing: 0.62px;
list-style: none;
}
.slide2-data li:nth-child(3) {
margin-top: 2rem;
}
.slide2-data li:nth-child(5) {
margin-top: 2.85rem;
}
.slide3 .fangkuai-div {
margin-top: 2rem;
}
.slide6 .industry {
width: 100%;
}
.slide6 .industry ul {
width: 48%;
display: inline-block;
}
.slide6 .industry ul li .left {
width: 50%;
display: inline-block;
vertical-align: middle
}
.slide6 .industry ul li .industry-title {
font-family: SourceHanSansCN-Medium;
font-size: 14px;
color: #07DFC8;
letter-spacing: 0.34px;
}
.slide6 .industry ul li .industry-name {
font-family: SourceHanSansCN-Medium;
font-size: 8px;
color: #686868;
letter-spacing: 0.19px;
}
.blue-to-green {
height: 12px;
display: inline-block;
transform: rotate(-360deg);
background-image: linear-gradient(-90deg, #0C66DA 0%, #0FEED4 100%);
border-radius: 6px;
vertical-align: middle;
}
.yellow-to-orange {
height: 12px;
transform: rotate(-180deg);
display: inline-block;
background-image: linear-gradient(90deg, #EFEA16 0%, #DC322B 100%);
border-radius: 6px;
vertical-align: middle;
}
.slide6 .ul-right {
list-style: none;
}
.slide7 .common-circle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: white;
}
.slide7 .top-key-value {
position: absolute;
left: 50%;
padding: 0 10px;
}
.slide7 .top-key {
font-family: SourceHanSansCN-Medium;
font-size: 10px;
color: #686868;
letter-spacing: 0.24px;
}
.slide7 .top-value {
font-family: SourceHanSansCN-Medium;
font-size: 10px;
color: #07DFC8;
letter-spacing: 0.24px;
}
.circle-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #686868;
vertical-align: middle;
margin: 0 8px;
}
.slide9 .gateway {
margin: 21px 29px;
}
.slide9 .green-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 10px;
background: #07DFC8;
vertical-align: middle
}
.slide9 .orange-dot {
background: #EEE716;
display: inline-block;
width: 10px; height: 10px;
border-radius: 10px;
vertical-align: middle
}
.slide9 .gateway .gateway-online {
margin-right: 30px;
display: inline-block;
}
.slide9 .gateway .gateway-offline {
display: inline-block;
}
.slide9 .gateway-bar {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
padding: 0 20px;
}
.slide9 .gateway-bar .gateway-bar-item {
background: #272B37;
border-radius: 6px;
width: 12px;
height: 10rem;
position: relative;
display: inline-block;
}
.slide9 .gateway-bar .gateway-bar-item .gateway-bar-item-data {
border-radius: 6px;
width: 100%;
position: absolute;
bottom: 0
}
.slide9 .gateway-online-item {
background-image: linear-gradient(0deg, #0C66DA 0%, #0FEED4 100%);
}
.slide9 .gateway-offline-item {
background-image: linear-gradient(-180deg, #EFEA16 0%, #DC322B 100%);
}
.slide9 .gateway-item-rate {
position: absolute;
left: -9px;
font-family: SourceHanSansCN-Medium;
font-size: 10px;
color: #07DFC8;
letter-spacing: 0.24px;
text-align: center;
padding: 5px;
width: 20px;
}
.slide9 .gateway-name {
width: 100%;
position: absolute;
left: 0;
top: 10rem;
padding-top: 5px;
}
@keyframes move {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
@-webkit-@keyframes move {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
@media only screen and (min-height: 400px) {
html {
font-size: 10px!important;
}
}
@media only screen and (min-height: 568px) {
html {
font-size: 16px!important;
}
}
@media only screen and (min-height: 600px) {
html {
font-size: 20px!important;
}
}

@ -0,0 +1,618 @@
/**
* Swiper 4.4.6
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2018 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: December 19, 2018
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
-webkit-perspective: 1200px;
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 {
-webkit-transform-style: preserve-3d;
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: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
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: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
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: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
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: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms opacity;
-o-transition: 300ms opacity;
transition: 300ms opacity;
-webkit-transform: translate3d(0, 0, 0);
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 {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
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;
-webkit-box-shadow: none;
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: #007aff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
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-bullet-active {
background: #ffffff;
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000000;
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #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: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: 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%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
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 {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
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;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
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 {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
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;
}
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 940 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 663 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 741 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 707 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 943 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

@ -0,0 +1,552 @@
/**
* jquery-circle-progress - jQuery Plugin to draw animated circular progress bars:
* {@link http://kottenator.github.io/jquery-circle-progress/}
*
* @author Rostyslav Bryzgunov <kottenator@gmail.com>
* @version 1.2.2
* @licence MIT
* @preserve
*/
// UMD factory - https://github.com/umdjs/umd/blob/d31bb6ee7098715e019f52bdfe27b3e4bfd2b97e/templates/jqueryPlugin.js
// Uses AMD, CommonJS or browser globals to create a jQuery plugin.
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD - register as an anonymous module
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
var $ = require('jquery');
factory($);
module.exports = $;
} else {
// Browser globals
factory(jQuery);
}
})(function($) {
/**
* Inner implementation of the circle progress bar.
* The class is not exposed _yet_ but you can create an instance through jQuery method call.
*
* @param {object} config - You can customize any class member (property or method).
* @class
* @alias CircleProgress
*/
function CircleProgress(config) {
this.init(config);
}
CircleProgress.prototype = {
//--------------------------------------- public options ---------------------------------------
/**
* This is the only required option. It should be from `0.0` to `1.0`.
* @type {number}
* @default 0.0
*/
value: 0.0,
/**
* Size of the canvas in pixels.
* It's a square so we need only one dimension.
* @type {number}
* @default 100.0
*/
size: 100.0,
/**
* Initial angle for `0.0` value in radians.
* @type {number}
* @default -Math.PI
*/
startAngle: -Math.PI,
/**
* Width of the arc in pixels.
* If it's `'auto'` - the value is calculated as `[this.size]{@link CircleProgress#size} / 14`.
* @type {number|string}
* @default 'auto'
*/
thickness: 'auto',
/**
* Fill of the arc. You may set it to:
*
* - solid color:
* - `'#3aeabb'`
* - `{ color: '#3aeabb' }`
* - `{ color: 'rgba(255, 255, 255, .3)' }`
* - linear gradient _(left to right)_:
* - `{ gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }`
* - `{ gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }`
* - `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }`
* - image:
* - `{ image: 'http://i.imgur.com/pT0i89v.png' }`
* - `{ image: imageObject }`
* - `{ color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' }` -
* color displayed until the image is loaded
*
* @default {gradient: ['#3aeabb', '#fdd250']}
*/
fill: {
gradient: ['#3aeabb', '#fdd250']
},
/**
* Color of the "empty" arc. Only a color fill supported by now.
* @type {string}
* @default 'rgba(0, 0, 0, .1)'
*/
emptyFill: 'rgba(0, 0, 0, .1)',
/**
* jQuery Animation config.
* You can pass `false` to disable the animation.
* @see http://api.jquery.com/animate/
* @type {object|boolean}
* @default {duration: 1200, easing: 'circleProgressEasing'}
*/
animation: {
duration: 1200,
easing: 'circleProgressEasing'
},
/**
* Default animation starts at `0.0` and ends at specified `value`. Let's call this _direct animation_.
* If you want to make _reversed animation_ - set `animationStartValue: 1.0`.
* Also you may specify any other value from `0.0` to `1.0`.
* @type {number}
* @default 0.0
*/
animationStartValue: 0.0,
/**
* Reverse animation and arc draw.
* By default, the arc is filled from `0.0` to `value`, _clockwise_.
* With `reverse: true` the arc is filled from `1.0` to `value`, _counter-clockwise_.
* @type {boolean}
* @default false
*/
reverse: false,
/**
* Arc line cap: `'butt'`, `'round'` or `'square'` -
* [read more]{@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap}.
* @type {string}
* @default 'butt'
*/
lineCap: 'butt',
/**
* Canvas insertion mode: append or prepend it into the parent element?
* @type {string}
* @default 'prepend'
*/
insertMode: 'prepend',
//------------------------------ protected properties and methods ------------------------------
/**
* Link to {@link CircleProgress} constructor.
* @protected
*/
constructor: CircleProgress,
/**
* Container element. Should be passed into constructor config.
* @protected
* @type {jQuery}
*/
el: null,
/**
* Canvas element. Automatically generated and prepended to [this.el]{@link CircleProgress#el}.
* @protected
* @type {HTMLCanvasElement}
*/
canvas: null,
/**
* 2D-context of [this.canvas]{@link CircleProgress#canvas}.
* @protected
* @type {CanvasRenderingContext2D}
*/
ctx: null,
/**
* Radius of the outer circle. Automatically calculated as `[this.size]{@link CircleProgress#size} / 2`.
* @protected
* @type {number}
*/
radius: 0.0,
/**
* Fill of the main arc. Automatically calculated, depending on [this.fill]{@link CircleProgress#fill} option.
* @protected
* @type {string|CanvasGradient|CanvasPattern}
*/
arcFill: null,
/**
* Last rendered frame value.
* @protected
* @type {number}
*/
lastFrameValue: 0.0,
/**
* Init/re-init the widget.
*
* Throws a jQuery event:
*
* - `circle-inited(jqEvent)`
*
* @param {object} config - You can customize any class member (property or method).
*/
init: function(config) {
$.extend(this, config);
this.radius = this.size / 2;
this.initWidget();
this.initFill();
this.draw();
this.el.trigger('circle-inited');
},
/**
* Initialize `<canvas>`.
* @protected
*/
initWidget: function() {
if (!this.canvas)
this.canvas = $('<canvas>')[this.insertMode == 'prepend' ? 'prependTo' : 'appendTo'](this.el)[0];
var canvas = this.canvas;
canvas.width = this.size;
canvas.height = this.size;
this.ctx = canvas.getContext('2d');
if (window.devicePixelRatio > 1) {
var scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = this.size + 'px';
canvas.width = canvas.height = this.size * scaleBy;
this.ctx.scale(scaleBy, scaleBy);
}
},
/**
* This method sets [this.arcFill]{@link CircleProgress#arcFill}.
* It could do this async (on image load).
* @protected
*/
initFill: function() {
var self = this,
fill = this.fill,
ctx = this.ctx,
size = this.size;
if (!fill)
throw Error("The fill is not specified!");
if (typeof fill == 'string')
fill = {color: fill};
if (fill.color)
this.arcFill = fill.color;
if (fill.gradient) {
var gr = fill.gradient;
if (gr.length == 1) {
this.arcFill = gr[0];
} else if (gr.length > 1) {
var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
gd = fill.gradientDirection || [
size / 2 * (1 - Math.cos(ga)), // x0
size / 2 * (1 + Math.sin(ga)), // y0
size / 2 * (1 + Math.cos(ga)), // x1
size / 2 * (1 - Math.sin(ga)) // y1
];
var lg = ctx.createLinearGradient.apply(ctx, gd);
for (var i = 0; i < gr.length; i++) {
var color = gr[i],
pos = i / (gr.length - 1);
if ($.isArray(color)) {
pos = color[1];
color = color[0];
}
lg.addColorStop(pos, color);
}
this.arcFill = lg;
}
}
if (fill.image) {
var img;
if (fill.image instanceof Image) {
img = fill.image;
} else {
img = new Image();
img.src = fill.image;
}
if (img.complete)
setImageFill();
else
img.onload = setImageFill;
}
function setImageFill() {
var bg = $('<canvas>')[0];
bg.width = self.size;
bg.height = self.size;
bg.getContext('2d').drawImage(img, 0, 0, size, size);
self.arcFill = self.ctx.createPattern(bg, 'no-repeat');
self.drawFrame(self.lastFrameValue);
}
},
/**
* Draw the circle.
* @protected
*/
draw: function() {
if (this.animation)
this.drawAnimated(this.value);
else
this.drawFrame(this.value);
},
/**
* Draw a single animation frame.
* @protected
* @param {number} v - Frame value.
*/
drawFrame: function(v) {
this.lastFrameValue = v;
this.ctx.clearRect(0, 0, this.size, this.size);
this.drawEmptyArc(v);
this.drawArc(v);
},
/**
* Draw the arc (part of the circle).
* @protected
* @param {number} v - Frame value.
*/
drawArc: function(v) {
if (v === 0)
return;
var ctx = this.ctx,
r = this.radius,
t = this.getThickness(),
a = this.startAngle;
ctx.save();
ctx.beginPath();
if (!this.reverse) {
ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
} else {
ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
}
ctx.lineWidth = t;
ctx.lineCap = this.lineCap;
ctx.strokeStyle = this.arcFill;
ctx.stroke();
ctx.restore();
},
/**
* Draw the _empty (background)_ arc (part of the circle).
* @protected
* @param {number} v - Frame value.
*/
drawEmptyArc: function(v) {
var ctx = this.ctx,
r = this.radius,
t = this.getThickness(),
a = this.startAngle;
if (v < 1) {
ctx.save();
ctx.beginPath();
if (v <= 0) {
ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
} else {
if (!this.reverse) {
ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
} else {
ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
}
}
ctx.lineWidth = t;
ctx.strokeStyle = this.emptyFill;
ctx.stroke();
ctx.restore();
}
},
/**
* Animate the progress bar.
*
* Throws 3 jQuery events:
*
* - `circle-animation-start(jqEvent)`
* - `circle-animation-progress(jqEvent, animationProgress, stepValue)` - multiple event
* animationProgress: from `0.0` to `1.0`; stepValue: from `0.0` to `value`
* - `circle-animation-end(jqEvent)`
*
* @protected
* @param {number} v - Final value.
*/
drawAnimated: function(v) {
var self = this,
el = this.el,
canvas = $(this.canvas);
// stop previous animation before new "start" event is triggered
canvas.stop(true, false);
el.trigger('circle-animation-start');
canvas
.css({animationProgress: 0})
.animate({animationProgress: 1}, $.extend({}, this.animation, {
step: function(animationProgress) {
var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
self.drawFrame(stepValue);
el.trigger('circle-animation-progress', [animationProgress, stepValue]);
}
}))
.promise()
.always(function() {
// trigger on both successful & failure animation end
el.trigger('circle-animation-end');
});
},
/**
* Get the circle thickness.
* @see CircleProgress#thickness
* @protected
* @returns {number}
*/
getThickness: function() {
return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
},
/**
* Get current value.
* @protected
* @return {number}
*/
getValue: function() {
return this.value;
},
/**
* Set current value (with smooth animation transition).
* @protected
* @param {number} newValue
*/
setValue: function(newValue) {
if (this.animation)
this.animationStartValue = this.lastFrameValue;
this.value = newValue;
this.draw();
}
};
//----------------------------------- Initiating jQuery plugin -----------------------------------
$.circleProgress = {
// Default options (you may override them)
defaults: CircleProgress.prototype
};
// ease-in-out-cubic
$.easing.circleProgressEasing = function(x) {
if (x < 0.5) {
x = 2 * x;
return 0.5 * x * x * x;
} else {
x = 2 - 2 * x;
return 1 - 0.5 * x * x * x;
}
};
/**
* Creates an instance of {@link CircleProgress}.
* Produces [init event]{@link CircleProgress#init} and [animation events]{@link CircleProgress#drawAnimated}.
*
* @param {object} [configOrCommand] - Config object or command name.
*
* Config example (you can specify any {@link CircleProgress} property):
*
* ```js
* { value: 0.75, size: 50, animation: false }
* ```
*
* Commands:
*
* ```js
* el.circleProgress('widget'); // get the <canvas>
* el.circleProgress('value'); // get the value
* el.circleProgress('value', newValue); // update the value
* el.circleProgress('redraw'); // redraw the circle
* el.circleProgress(); // the same as 'redraw'
* ```
*
* @param {string} [commandArgument] - Some commands (like `'value'`) may require an argument.
* @see CircleProgress
* @alias "$(...).circleProgress"
*/
$.fn.circleProgress = function(configOrCommand, commandArgument) {
var dataName = 'circle-progress',
firstInstance = this.data(dataName);
if (configOrCommand == 'widget') {
if (!firstInstance)
throw Error('Calling "widget" method on not initialized instance is forbidden');
return firstInstance.canvas;
}
if (configOrCommand == 'value') {
if (!firstInstance)
throw Error('Calling "value" method on not initialized instance is forbidden');
if (typeof commandArgument == 'undefined') {
return firstInstance.getValue();
} else {
var newValue = arguments[1];
return this.each(function() {
$(this).data(dataName).setValue(newValue);
});
}
}
return this.each(function() {
var el = $(this),
instance = el.data(dataName),
config = $.isPlainObject(configOrCommand) ? configOrCommand : {};
if (instance) {
instance.init(config);
} else {
var initialConfig = $.extend({}, el.data());
if (typeof initialConfig.fill == 'string')
initialConfig.fill = JSON.parse(initialConfig.fill);
if (typeof initialConfig.animation == 'string')
initialConfig.animation = JSON.parse(initialConfig.animation);
config = $.extend(initialConfig, config);
config.el = el;
instance = new CircleProgress(config);
el.data(dataName, instance);
}
});
};
});

@ -0,0 +1,261 @@
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
} else if (typeof exports === 'object') {
module.exports = factory(require, exports, module);
} else {
root.CountUp = factory();
}
}(this, function(require, exports, module) {
/*
countUp.js
by @inorganik
*/
// target = id of html element or var of previously selected html element where counting occurs
// startVal = the value you want to begin at
// endVal = the value you want to arrive at
// decimals = number of decimal places, default 0
// duration = duration of animation in seconds, default 2
// options = optional object of options (see below)
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function () { return '1.9.3'; };
// default options
self.options = {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ',', // character to use as a separator
decimal: '.', // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: '', // optional text before the result
suffix: '', // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9
};
// extend default options with passed options object
if (options && typeof options === 'object') {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key];
}
}
}
if (self.options.separator === '') {
self.options.useGrouping = false;
}
else {
// ensure the separator is a string (formatNumber assumes this)
self.options.separator = '' + self.options.separator;
}
// make sure requestAnimationFrame and cancelAnimationFrame are defined
// polyfill for browsers without native support
// by Opera engineer Erik Möller
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
function formatNumber(num) {
var neg = (num < 0),
x, x1, x2, x3, i, len;
num = Math.abs(num).toFixed(self.decimals);
num += '';
x = num.split('.');
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : '';
if (self.options.useGrouping) {
x3 = '';
for (i = 0, len = x1.length; i < len; ++i) {
if (i !== 0 && ((i % 3) === 0)) {
x3 = self.options.separator + x3;
}
x3 = x1[len - i - 1] + x3;
}
x1 = x3;
}
// optional numeral substitution
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g, function(w) {
return self.options.numerals[+w];
})
x2 = x2.replace(/[0-9]/g, function(w) {
return self.options.numerals[+w];
})
}
return (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
}
// Robert Penner's easeOutExpo
function easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
}
function ensureNumber(n) {
return (typeof n === 'number' && !isNaN(n));
}
self.initialize = function() {
if (self.initialized) return true;
self.error = '';
self.d = (typeof target === 'string') ? document.getElementById(target) : target;
if (!self.d) {
self.error = '[CountUp] target is null or undefined'
return false;
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
// error checks
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
self.frameVal = self.startVal;
self.initialized = true;
return true;
}
else {
self.error = '[CountUp] startVal ('+startVal+') or endVal ('+endVal+') is not a number';
return false;
}
};
// Print value to target
self.printValue = function(value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === 'INPUT') {
this.d.value = result;
}
else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
this.d.textContent = result;
}
else {
this.d.innerHTML = result;
}
};
self.count = function(timestamp) {
if (!self.startTime) { self.startTime = timestamp; }
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
// to ease or not to ease
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
}
}
// don't go past endVal since progress can exceed duration in the last frame
if (self.countDown) {
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
} else {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
}
// decimal
self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
// format and print value
self.printValue(self.frameVal);
// whether to continue
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count);
} else {
if (self.callback) self.callback();
}
};
// start your animation
self.start = function(callback) {
if (!self.initialize()) return;
self.callback = callback;
self.rAF = requestAnimationFrame(self.count);
};
// toggles pause/resume animation
self.pauseResume = function() {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF);
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count);
}
};
// reset to startVal so animation can be run again
self.reset = function() {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal);
}
};
// pass a new endVal and start animation
self.update = function (newEndVal) {
if (!self.initialize()) return;
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = '[CountUp] update() - new endVal is not a number: '+newEndVal;
return;
}
self.error = '';
if (newEndVal === self.frameVal) return;
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count);
};
// format startVal on initialization
if (self.initialize()) self.printValue(self.startVal);
};
return CountUp;
}));

@ -0,0 +1 @@
!function(a,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):a.CountUp=n()}(this,function(a,n,t){return function(a,n,t,e,i,r){var u=this;if(u.version=function(){return"1.9.3"},u.options={useEasing:!0,useGrouping:!0,separator:",",decimal:".",easingFn:function(a,n,t,e){return t*(1-Math.pow(2,-10*a/e))*1024/1023+n},formattingFn:function(a){var n,t,e,i,r,o,s=a<0;if(a=Math.abs(a).toFixed(u.decimals),n=(a+="").split("."),t=n[0],e=1<n.length?u.options.decimal+n[1]:"",u.options.useGrouping){for(i="",r=0,o=t.length;r<o;++r)0!==r&&r%3==0&&(i=u.options.separator+i),i=t[o-r-1]+i;t=i}return u.options.numerals.length&&(t=t.replace(/[0-9]/g,function(a){return u.options.numerals[+a]}),e=e.replace(/[0-9]/g,function(a){return u.options.numerals[+a]})),(s?"-":"")+u.options.prefix+t+e+u.options.suffix},prefix:"",suffix:"",numerals:[]},r&&"object"==typeof r)for(var o in u.options)r.hasOwnProperty(o)&&null!==r[o]&&(u.options[o]=r[o]);""===u.options.separator?u.options.useGrouping=!1:u.options.separator=""+u.options.separator;for(var s=0,l=["webkit","moz","ms","o"],m=0;m<l.length&&!window.requestAnimationFrame;++m)window.requestAnimationFrame=window[l[m]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[l[m]+"CancelAnimationFrame"]||window[l[m]+"CancelRequestAnimationFrame"];function d(a){return"number"==typeof a&&!isNaN(a)}window.requestAnimationFrame||(window.requestAnimationFrame=function(a,n){var t=(new Date).getTime(),e=Math.max(0,16-(t-s)),i=window.setTimeout(function(){a(t+e)},e);return s=t+e,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),u.initialize=function(){return!!u.initialized||(u.error="",u.d="string"==typeof a?document.getElementById(a):a,u.d?(u.startVal=Number(n),u.endVal=Number(t),d(u.startVal)&&d(u.endVal)?(u.decimals=Math.max(0,e||0),u.dec=Math.pow(10,u.decimals),u.duration=1e3*Number(i)||2e3,u.countDown=u.startVal>u.endVal,u.frameVal=u.startVal,u.initialized=!0):(u.error="[CountUp] startVal ("+n+") or endVal ("+t+") is not a number",!1)):!(u.error="[CountUp] target is null or undefined"))},u.printValue=function(a){var n=u.options.formattingFn(a);"INPUT"===u.d.tagName?this.d.value=n:"text"===u.d.tagName||"tspan"===u.d.tagName?this.d.textContent=n:this.d.innerHTML=n},u.count=function(a){u.startTime||(u.startTime=a);var n=(u.timestamp=a)-u.startTime;u.remaining=u.duration-n,u.options.useEasing?u.countDown?u.frameVal=u.startVal-u.options.easingFn(n,0,u.startVal-u.endVal,u.duration):u.frameVal=u.options.easingFn(n,u.startVal,u.endVal-u.startVal,u.duration):u.countDown?u.frameVal=u.startVal-(u.startVal-u.endVal)*(n/u.duration):u.frameVal=u.startVal+(u.endVal-u.startVal)*(n/u.duration),u.countDown?u.frameVal=u.frameVal<u.endVal?u.endVal:u.frameVal:u.frameVal=u.frameVal>u.endVal?u.endVal:u.frameVal,u.frameVal=Math.round(u.frameVal*u.dec)/u.dec,u.printValue(u.frameVal),n<u.duration?u.rAF=requestAnimationFrame(u.count):u.callback&&u.callback()},u.start=function(a){u.initialize()&&(u.callback=a,u.rAF=requestAnimationFrame(u.count))},u.pauseResume=function(){u.paused?(u.paused=!1,delete u.startTime,u.duration=u.remaining,u.startVal=u.frameVal,requestAnimationFrame(u.count)):(u.paused=!0,cancelAnimationFrame(u.rAF))},u.reset=function(){u.paused=!1,delete u.startTime,u.initialized=!1,u.initialize()&&(cancelAnimationFrame(u.rAF),u.printValue(u.startVal))},u.update=function(a){u.initialize()&&(d(a=Number(a))?(u.error="",a!==u.frameVal&&(cancelAnimationFrame(u.rAF),u.paused=!1,delete u.startTime,u.startVal=u.frameVal,u.endVal=a,u.countDown=u.startVal>u.endVal,u.rAF=requestAnimationFrame(u.count))):u.error="[CountUp] update() - new endVal is not a number: "+a)},u.initialize()&&u.printValue(u.startVal)}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save