This commit is contained in:
parent
56799d9cfe
commit
84abb2fde3
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -8,7 +8,7 @@
|
||||||
var _global = {}
|
var _global = {}
|
||||||
var CONFIGITEM = {
|
var CONFIGITEM = {
|
||||||
// version: 'qingdao', //青岛
|
// version: 'qingdao', //青岛
|
||||||
version: 'xihaian', // 西海岸
|
version: 'dev', // 西海岸
|
||||||
// version: 'dev', // 开发
|
// version: 'dev', // 开发
|
||||||
// version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
|
// version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
|
||||||
// version: 'qingdao', // 测试
|
// version: 'qingdao', // 测试
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
|
||||||
navListManagement.navList = [
|
navListManagement.navList = [
|
||||||
{ name: '共享门户', key: 'home' },
|
{ name: '共享门户', key: 'home' },
|
||||||
{ name: '能力集市', key: 'DetailsPageconetent', innerKey: 'algorithmCompare' },
|
{ name: '能力集市', key: 'DetailsPageconetent', innerKey: 'algorithmCompare' },
|
||||||
// { name: '能力云图', key: 'capabilityCloud' },
|
{ name: '能力云图', key: 'capabilityCloud' },
|
||||||
{ name: '能力统计', key: 'abilityStatistics' },
|
{ name: '能力统计', key: 'abilityStatistics' },
|
||||||
// { name: '开发指南', key: 'developmentGuide' },
|
// { name: '开发指南', key: 'developmentGuide' },
|
||||||
{ name: '新手指南', key: 'instructionManual' },
|
{ name: '新手指南', key: 'instructionManual' },
|
||||||
|
|
@ -453,7 +453,7 @@ else if (newLocation === 'xihaian') {
|
||||||
{ name: '共享门户', key: 'home' },
|
{ name: '共享门户', key: 'home' },
|
||||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||||
{ name: '能力云图', key: 'capabilityCloud' },
|
{ name: '能力云图', key: 'capabilityCloud' },
|
||||||
{ name: '能力统计', key: 'abilityStatistics' },
|
// { name: '能力统计', key: 'abilityStatistics' },
|
||||||
// { name: '开发指南', key: 'developmentGuide' },
|
// { name: '开发指南', key: 'developmentGuide' },
|
||||||
{ name: '需求中心', key: 'demandCenter' },
|
{ name: '需求中心', key: 'demandCenter' },
|
||||||
// { name: '个人中心', key: 'personalCenter' },
|
// { name: '个人中心', key: 'personalCenter' },
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
|
@ -425,6 +425,16 @@ export const constantRoutes = [
|
||||||
icon: 'error-warning-line',
|
icon: 'error-warning-line',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// 资金报表
|
||||||
|
{
|
||||||
|
path: '/assertReport',
|
||||||
|
name: 'assertReport',
|
||||||
|
component: () => import('@/views/assertReport'),
|
||||||
|
meta: {
|
||||||
|
title: '能力云图',
|
||||||
|
icon: 'error-warning-line',
|
||||||
|
},
|
||||||
|
},
|
||||||
// 赋能案例详情
|
// 赋能案例详情
|
||||||
{
|
{
|
||||||
path: '/AssignCaseDetailPage',
|
path: '/AssignCaseDetailPage',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,475 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="reservoir-survey">
|
||||||
|
|
||||||
|
<!-- 最上面 组件资源 -->
|
||||||
|
<div class="platform-overview-top">
|
||||||
|
<div class="top"><span class="title">组件资源</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
ffffffff
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 中间 应用资源-->
|
||||||
|
<div class="platform-overview-mid">
|
||||||
|
<div class="top"><span class="title">应用资源</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
111
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最下方 基础设施 -->
|
||||||
|
<div class="platform-overview-bottom">
|
||||||
|
<div class="top"><span class="title">基础设施</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
22
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||||
|
//例如：import 《组件名称》 from '《组件路径》';
|
||||||
|
const echarts = require("echarts/lib/echarts");
|
||||||
|
|
||||||
|
import ResourceOverviewAnimation from "@/views/assertReport/components/ResourceOverviewAnimation.vue";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {
|
||||||
|
|
||||||
|
ResourceOverviewAnimation
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.updateTime();
|
||||||
|
if (this.dateTimer) {
|
||||||
|
clearInterval(this.dateTimer);
|
||||||
|
} else {
|
||||||
|
this.dateTimer = setInterval(() => {
|
||||||
|
this.updateTime();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
clearInterval(this.dateTimer);
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
//查数量
|
||||||
|
this.queryReservoirNum();
|
||||||
|
//查分布
|
||||||
|
this.reservoirDangerEcharts();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
selectedPeriod:0,
|
||||||
|
chartTitle: "", //左下角图表标题
|
||||||
|
timeDimensioninput: 1,
|
||||||
|
time:'',
|
||||||
|
dateTimer:'',
|
||||||
|
numTotal:{
|
||||||
|
companyNum:[],
|
||||||
|
noExamNum:0,
|
||||||
|
examNum:0.
|
||||||
|
},
|
||||||
|
echartsText: "水库险情",
|
||||||
|
xWarningData:[],//预警水库柱状图横坐标数组
|
||||||
|
warningDataList:[],//预警水库柱状图有险情个数，有告警个数
|
||||||
|
allDataList:[],//预警水库柱状图无险情个数，无告警个数
|
||||||
|
xDangerData:[],//柱状图横坐标数组
|
||||||
|
dangerDataList:[],//柱状图有险情个数
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//刷新时间
|
||||||
|
refreshNum(){
|
||||||
|
|
||||||
|
},
|
||||||
|
zeroPadding(num, digit) {
|
||||||
|
let zero = "";
|
||||||
|
for (let i = 0; i < digit; i++) {
|
||||||
|
zero += "0";
|
||||||
|
}
|
||||||
|
return (zero + num).slice(-digit);
|
||||||
|
},
|
||||||
|
updateTime() {
|
||||||
|
const currentDate = new Date();
|
||||||
|
this.time =
|
||||||
|
this.zeroPadding(currentDate.getHours(), 2) +
|
||||||
|
":" +
|
||||||
|
this.zeroPadding(currentDate.getMinutes(), 2) +
|
||||||
|
":" +
|
||||||
|
this.zeroPadding(currentDate.getSeconds(), 2);
|
||||||
|
this.date =
|
||||||
|
this.zeroPadding(currentDate.getFullYear(), 4) +
|
||||||
|
"-" +
|
||||||
|
this.zeroPadding(currentDate.getMonth() + 1, 2) +
|
||||||
|
"-" +
|
||||||
|
this.zeroPadding(currentDate.getDate(), 2);
|
||||||
|
},
|
||||||
|
//查询全市水库总数
|
||||||
|
async queryReservoirNum() {
|
||||||
|
this.numTotal.companyNum=NumbersConvertedToArrays(432);
|
||||||
|
this.numTotal.noExamNum=32;
|
||||||
|
this.numTotal.examNum=400;
|
||||||
|
// const res = await queryReservoirNum();
|
||||||
|
// if (res && res.data) {
|
||||||
|
// this.reservoirNum = NumbersConvertedToArrays(res.data.reservoirNum);
|
||||||
|
// this.stationNum = res.data.stabNum; //包含测站个数
|
||||||
|
// this.diseasedDamNum = res.data.riskNum; //病险库个数
|
||||||
|
// this.overheadLibraryNum = res.data.topNum; //头顶库个数
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
async reservoirDangerEcharts(){
|
||||||
|
|
||||||
|
//处理返回数据格式生成echarts图
|
||||||
|
let res=[
|
||||||
|
{
|
||||||
|
"districtId": "370202",
|
||||||
|
"districtName": "市南区",
|
||||||
|
"reservoirNum": 0,
|
||||||
|
"districtWarnNum": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370203",
|
||||||
|
"districtName": "市北区",
|
||||||
|
"reservoirNum": 0,
|
||||||
|
"districtWarnNum": 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370211",
|
||||||
|
"districtName": "西海岸新区",
|
||||||
|
"reservoirNum": 200,
|
||||||
|
"districtWarnNum": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370212",
|
||||||
|
"districtName": "崂山区",
|
||||||
|
"reservoirNum": 19,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370213",
|
||||||
|
"districtName": "李沧区",
|
||||||
|
"reservoirNum": 0,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370214",
|
||||||
|
"districtName": "城阳区",
|
||||||
|
"reservoirNum": 14,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370215",
|
||||||
|
"districtName": "即墨区",
|
||||||
|
"reservoirNum": 0,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370281",
|
||||||
|
"districtName": "胶州市",
|
||||||
|
"reservoirNum": 48,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370283",
|
||||||
|
"districtName": "平度市",
|
||||||
|
"reservoirNum": 141,
|
||||||
|
"districtWarnNum": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"districtId": "370285",
|
||||||
|
"districtName": "莱西市",
|
||||||
|
"reservoirNum": 56,
|
||||||
|
"districtWarnNum": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
res.forEach(item => {
|
||||||
|
this.xDangerData.push(item.districtName);
|
||||||
|
this.dangerDataList.push(item.reservoirNum);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.reservoirEcharts(this.xDangerData, this.dangerDataList);
|
||||||
|
|
||||||
|
},
|
||||||
|
reservoirEcharts (xData,dangerList) {
|
||||||
|
const dataList = {
|
||||||
|
xAxisData:xData,
|
||||||
|
dataList2: dangerList, //险情数据
|
||||||
|
};
|
||||||
|
const alarmEcharts = echarts.init(
|
||||||
|
document.querySelector(".real-time-danger-chart")
|
||||||
|
);
|
||||||
|
const reservoirDangerBar = (chartData) => {
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
var arr1 = [...params].reverse();
|
||||||
|
let templateList = [];
|
||||||
|
arr1.map((item) => {
|
||||||
|
let str = `
|
||||||
|
<div>
|
||||||
|
${item.marker}
|
||||||
|
<span>${item.seriesName}</span>
|
||||||
|
<span>${item.value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
templateList.push(str);
|
||||||
|
});
|
||||||
|
return templateList.join("");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
show: dataList.xAxisData.length > 4,
|
||||||
|
// xAxisIndex: [0],
|
||||||
|
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
||||||
|
startValue: 0, // 初始显示值
|
||||||
|
endValue: 4, // 结束显示值
|
||||||
|
height: 5, //组件高度
|
||||||
|
left: "5%", //左边的距离
|
||||||
|
right: "4%", //右边的距离
|
||||||
|
bottom: 5, //底边的距离
|
||||||
|
borderColor: "transparent",
|
||||||
|
fillerColor: "#269cdb",
|
||||||
|
borderRadius: 5,
|
||||||
|
// backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
||||||
|
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||||
|
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||||
|
realtime: true, //是否实时更新
|
||||||
|
filterMode: "filter",
|
||||||
|
},
|
||||||
|
//下面这个属性是里面拖到
|
||||||
|
{
|
||||||
|
type: "inside",
|
||||||
|
show: dataList.xAxisData.length > 4,
|
||||||
|
// xAxisIndex: [0],
|
||||||
|
start: 0, //默认为1
|
||||||
|
end: 4, //默认为100
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
show:false,
|
||||||
|
itemGap: 30,
|
||||||
|
itemWidth: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#fff",
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icon: "rect",
|
||||||
|
right: 10,
|
||||||
|
top: 25,
|
||||||
|
formatter: function (name) {
|
||||||
|
//return name + " " + `{a|${chartData.districtNumMap[name]}}`;
|
||||||
|
return name;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: chartData.xAxisData,
|
||||||
|
axisLabel: {
|
||||||
|
color: "#daeef9",
|
||||||
|
fontSize: 18,
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0f5a92",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#daeef9",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
|
||||||
|
minInterval: 1,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#0f5a92",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "企业个数",
|
||||||
|
type: "bar",
|
||||||
|
stack: "1",
|
||||||
|
barWidth: 24,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{ offset: 0, color: "#125c94" },
|
||||||
|
{ offset: 1, color: "#00fbff" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: chartData.dataList2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
};
|
||||||
|
alarmEcharts.setOption(reservoirDangerBar(dataList));
|
||||||
|
},
|
||||||
|
sortBy(field) {
|
||||||
|
//根据传过来的字段进行排序
|
||||||
|
return (x, y) => {
|
||||||
|
return x[field] - y[field];
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
|
||||||
|
@keyframes topup50 {
|
||||||
|
from {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.reservoir-survey {
|
||||||
|
|
||||||
|
|
||||||
|
width: 520px;
|
||||||
|
height: 100%;
|
||||||
|
color: #f0fafa;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
||||||
|
.platform-overview-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 4.00rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.platform-overview-mid {
|
||||||
|
margin-top:20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 3.00rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-overview-bottom {
|
||||||
|
margin-top:20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.80rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,351 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="right-survey">
|
||||||
|
<!--最上面 部门排行榜-->
|
||||||
|
<div class="platform-overview-top">
|
||||||
|
<div class="top"><span class="title">部门排行榜</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">市级部门共享贡献资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">市级部门审评节省资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">区市部门共享贡献资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">区市部门申请节省资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="platform-overview-bottom">
|
||||||
|
<div class="top"><span class="title">资源汇聚总量</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in servicesSnum"
|
||||||
|
:key="index"
|
||||||
|
class="component-services-content-right-left-content-son"
|
||||||
|
>
|
||||||
|
<p>{{ item.type }}</p>
|
||||||
|
<p class="num">{{ item.amount }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {},
|
||||||
|
created() {},
|
||||||
|
destroyed() {},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
top5AreaList: [
|
||||||
|
{
|
||||||
|
title: 'TOP1',
|
||||||
|
img: require('../image/one.png'),
|
||||||
|
areaName: '台东商圈',
|
||||||
|
areaId: '1',
|
||||||
|
num: '12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'TOP2',
|
||||||
|
img: require('../image/two.png'),
|
||||||
|
areaName: '李村商圈',
|
||||||
|
areaId: '2',
|
||||||
|
num: '8',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'TOP3',
|
||||||
|
img: require('../image/three.png'),
|
||||||
|
areaName: '五四广场',
|
||||||
|
areaId: '3',
|
||||||
|
num: '7',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '4',
|
||||||
|
img: require('../image/four.png'),
|
||||||
|
areaName: '第一海水浴场',
|
||||||
|
areaId: '4',
|
||||||
|
num: '5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '5',
|
||||||
|
img: require('../image/five.png'),
|
||||||
|
areaName: '石老人海水浴场',
|
||||||
|
areaId: '5',
|
||||||
|
num: '4',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
servicesSnum: [
|
||||||
|
{ type: '组件服务', amount: 124 },
|
||||||
|
{ type: '应用资源', amount: 34244 },
|
||||||
|
{ type: '基础设施', amount: 125555 },
|
||||||
|
{ type: '数据资源', amount: 5555 },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
.top5-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
/*height: 4px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.top5-content::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #00deff;
|
||||||
|
}
|
||||||
|
.map-search-result::-webkit-scrollbar-track,
|
||||||
|
.top5-content::-webkit-scrollbar-track {
|
||||||
|
background-color: #424748;
|
||||||
|
}
|
||||||
|
@keyframes topup50 {
|
||||||
|
from {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-survey {
|
||||||
|
width: 620px;
|
||||||
|
height: 100%;
|
||||||
|
color: #f0fafa;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.platform-overview-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 20px;
|
||||||
|
// margin-top:10px;
|
||||||
|
width: 100%;
|
||||||
|
display: table;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.bottom-item {
|
||||||
|
border:1px solid;
|
||||||
|
.inner-title {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 4px;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 27px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#0873c1 0,
|
||||||
|
rgba(8, 115, 193, 0) 100%
|
||||||
|
);
|
||||||
|
color: #1ffefd;
|
||||||
|
width: auto;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
text-align: center;
|
||||||
|
display: table-cell;
|
||||||
|
width: 50%;
|
||||||
|
height: 3rem;
|
||||||
|
.left-list {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
margin-left: 4px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
.left-list1 {
|
||||||
|
font-size: 14x;
|
||||||
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.left-list2 {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
width: 40%;
|
||||||
|
&:hover {
|
||||||
|
color: rgb(0 255 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active-item {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
width: 40%;
|
||||||
|
color: rgb(0 255 255);
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.platform-overview-bottom {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 2rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem;
|
||||||
|
.component-services-content-right-left-content-son {
|
||||||
|
background: url('~@/assets/capabilityCloud/Component_services_snum.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 1.1rem 0.59rem;
|
||||||
|
background-position: center;
|
||||||
|
text-align: center;
|
||||||
|
& > p:first-child {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
}
|
||||||
|
& > p:last-child {
|
||||||
|
color: #1ef6f5;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
line-height: 0.28rem;
|
||||||
|
padding-bottom: 0.24rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,548 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.xiaoshangqing
|
||||||
|
* @Date: 2022-7-26 10:00:48
|
||||||
|
* @LastEditors: xiaoshangqing
|
||||||
|
* @LastEditTime: 2022-07-27 16:56:55
|
||||||
|
* @Description: 水库专题首页缩略图 -->
|
||||||
|
<template>
|
||||||
|
<div class="river-course-view">
|
||||||
|
<div ref="qdCityMap" class="city-map-content-echarts"></div>
|
||||||
|
<div class="topic-animation1 display-animation1"></div>
|
||||||
|
<div class="topic-animation2 display-animation2"></div>
|
||||||
|
<div class="topic-animation3 display-animation3"></div>
|
||||||
|
<div class="topic-animation4 display-animation4"></div>
|
||||||
|
<div class="topic-animation5 display-animation5"></div>
|
||||||
|
<div class="topic-animation6 display-animation6"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||||
|
//例如：import 《组件名称》 from '《组件路径》';
|
||||||
|
import axios from 'axios'
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
|
||||||
|
districtData: [
|
||||||
|
{
|
||||||
|
name: "市南区",
|
||||||
|
value: [120.395966, 36.070892],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "市北区",
|
||||||
|
value: [120.355026, 36.083819],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "李沧区",
|
||||||
|
value: [120.421236, 36.160023],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "崂山区",
|
||||||
|
value: [120.467393, 36.102569],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "城阳区",
|
||||||
|
value: [120.389135, 36.306833],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "即墨区",
|
||||||
|
value: [120.447352, 36.390847],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "莱西市",
|
||||||
|
value: [120.526226, 36.86509],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "胶州市",
|
||||||
|
value: [120.006202, 36.285878],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "平度市",
|
||||||
|
value: [119.959012, 36.788828],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "西海岸",
|
||||||
|
value: [119.995518, 35.875138],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
],//青岛市区划坐标数据
|
||||||
|
reservoirTypeArr:[
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
type: "warning",
|
||||||
|
name: "超汛限",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
type: "normal",
|
||||||
|
name: "正常",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 1、菜单切换功能
|
||||||
|
tabs: [
|
||||||
|
{ name: "降雨量图" },
|
||||||
|
{ name: "人口热力图" },
|
||||||
|
{ name: "水库等级图" },
|
||||||
|
{ name: "水库告警分布" },
|
||||||
|
],
|
||||||
|
selectedTabIndex: 3,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//监听属性 类似于data概念
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化
|
||||||
|
watch: {},
|
||||||
|
//生命周期 - 创建完成（可以访问当前this实例）
|
||||||
|
created() {},
|
||||||
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
||||||
|
mounted() {
|
||||||
|
this.findAllInfo();
|
||||||
|
// this.initMap();
|
||||||
|
},
|
||||||
|
//方法集合
|
||||||
|
methods: {
|
||||||
|
findAllInfo(){
|
||||||
|
let data=this.districtData
|
||||||
|
// let result=[]
|
||||||
|
// for(let i=0;i<data.length;i++){
|
||||||
|
// let value=[]
|
||||||
|
// let d=res.data.data[i]
|
||||||
|
// value.push(d["longitude"])
|
||||||
|
// value.push(d["latitude"])
|
||||||
|
// d["value"]=value
|
||||||
|
// }
|
||||||
|
this.initMap(data)
|
||||||
|
|
||||||
|
},
|
||||||
|
initMap(data) {
|
||||||
|
this.loadedDataUrl = "./static/qingdao.json";
|
||||||
|
let _this=this
|
||||||
|
axios.get(_this.loadedDataUrl, {}) .then(geoJson =>{
|
||||||
|
|
||||||
|
_this.myChart = echarts.init(_this.$refs.qdCityMap);
|
||||||
|
echarts.registerMap("qingdao", geoJson.data);
|
||||||
|
const imgBack = new Image();
|
||||||
|
imgBack.src = "./static/assets/map-back.png";
|
||||||
|
const img = new Image();
|
||||||
|
img.src = "./static/assets/echarts-map-bak.png";
|
||||||
|
const typeImg = new Image();
|
||||||
|
typeImg.src = "./static/assets/reservoir-type-bak.png";
|
||||||
|
|
||||||
|
_this.option = {
|
||||||
|
visualMap: {
|
||||||
|
show: false,
|
||||||
|
max: 100,
|
||||||
|
seriesIndex: 1,
|
||||||
|
inRange: {
|
||||||
|
color: ["#000000", "yellow", "pink"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: [
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
aspectScale: 0.8,
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 100,
|
||||||
|
z: 6,
|
||||||
|
label: {
|
||||||
|
show: true, //是否显示市
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff", //文字颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#25e8ff",
|
||||||
|
borderWidth: 2,
|
||||||
|
/* areaColor: "#004d8e", //rgba设置透明度0
|
||||||
|
shadowColor: "#10daff",
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 10,
|
||||||
|
opacity: 0.53, */
|
||||||
|
areaColor: {
|
||||||
|
image: img,
|
||||||
|
repeat: "repeat",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: false,
|
||||||
|
focus: "none",
|
||||||
|
itemStyle: {
|
||||||
|
color: null,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
//color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 105,
|
||||||
|
z: 4,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
borderColor: "transparent",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 110,
|
||||||
|
z: 3,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
borderColor: "transparent",
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 115,
|
||||||
|
z: 2,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
//borderColor: "#0f3866",
|
||||||
|
borderColor: "transparent",
|
||||||
|
borderWidth: 1,
|
||||||
|
shadowColor: "#808080", // 外部阴影
|
||||||
|
shadowBlur: "10",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// tooltip: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// type: "effectScatter",
|
||||||
|
// coordinateSystem: "geo",
|
||||||
|
// rippleEffect: {
|
||||||
|
// scale: 3,
|
||||||
|
// brushType: "stroke",
|
||||||
|
// },
|
||||||
|
// showEffectOn: "render",
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// shadowColor: "#ffffff",
|
||||||
|
// shadowBlur: 10,
|
||||||
|
// shadowOffsetX: 0,
|
||||||
|
// shadowOffsetY: 0,
|
||||||
|
// color: "#df1818",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// color: "#fff",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// symbol: "circle",
|
||||||
|
// symbolSize: [10, 5],
|
||||||
|
// data:data, //地标闪烁小圆点
|
||||||
|
// zlevel: 1,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: "scatter",
|
||||||
|
// coordinateSystem: "geo",
|
||||||
|
// symbol: function (value, params) {
|
||||||
|
// return 'image://static/assets/warning-reservoir.png';
|
||||||
|
// },
|
||||||
|
// symbolSize: [25, 35],
|
||||||
|
// symbolOffset: [0, -20],
|
||||||
|
// z: 9999,
|
||||||
|
// data:data, //企业图片
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (params) {
|
||||||
|
var name = params.data.num;
|
||||||
|
var text = `{fline|${name}}`;
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
color: '#fff',
|
||||||
|
rich: {
|
||||||
|
fline: {
|
||||||
|
padding: [0, 25],
|
||||||
|
color: '#dcc52f',
|
||||||
|
textShadowColor: '#030615',
|
||||||
|
textShadowBlur: '0',
|
||||||
|
textShadowOffsetX: 1,
|
||||||
|
textShadowOffsetY: 1,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
tline: {
|
||||||
|
padding: [0, 27],
|
||||||
|
color: '#afd31d',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#e3e00a',
|
||||||
|
},
|
||||||
|
symbol: "image://static/assets/reservoir-type-bak.png",
|
||||||
|
symbolSize: [84, 28],
|
||||||
|
symbolOffset: [0, -20],
|
||||||
|
z: 999,
|
||||||
|
data: data, //企业名称
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
_this.myChart.setOption(_this.option);
|
||||||
|
_this.myChart.on("click", (params) => {
|
||||||
|
// console.log("点的是什么", params);
|
||||||
|
// //进入对应区的三维地图
|
||||||
|
// //跟右下角菜单切换触发调用方法一样，但是要传递区划参数，区划name
|
||||||
|
// const index = _this.districtData.findIndex((item) => {
|
||||||
|
// return item.name === params.name ;
|
||||||
|
// });
|
||||||
|
// //console.log('rrrrrrrr5555',index);
|
||||||
|
// let districtObject = {
|
||||||
|
// name:params.name,
|
||||||
|
// longitude:_this.districtData[index].value[0],
|
||||||
|
// latitude:_this.districtData[index].value[1],
|
||||||
|
// };
|
||||||
|
// _this.$emit('jumpIntoMap',districtObject);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
destroyed() {}, //生命周期 - 销毁完成
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
//@import url(); 引入公共css类
|
||||||
|
|
||||||
|
.river-course-view {
|
||||||
|
position: relative;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("~@/assets/common/homePage/big-bak.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.city-map-content-echarts {
|
||||||
|
width: 11rem;
|
||||||
|
height: 9rem;
|
||||||
|
top: 80px;
|
||||||
|
left: 400px;
|
||||||
|
bottom: 60px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.map-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 486px;
|
||||||
|
bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items:flex-end;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index:99999;
|
||||||
|
.map-tab {
|
||||||
|
// 1、菜单切换功能
|
||||||
|
display: flex;
|
||||||
|
pointer-events: auto;
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 1.4rem;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #2ab1e9;
|
||||||
|
border-left: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0px 20px;
|
||||||
|
background-color: #0d284f;
|
||||||
|
color: #35cffc;
|
||||||
|
&.active {
|
||||||
|
color: #fefefe;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
border-left: 1px solid #2ab1e9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.reservoirType-list{
|
||||||
|
position: absolute;
|
||||||
|
right: 486px;
|
||||||
|
width: 122px;
|
||||||
|
height: 100px;
|
||||||
|
top: 164px;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(13,40,79,0.5);
|
||||||
|
border:1px solid #0d284f;
|
||||||
|
padding-top:22px;
|
||||||
|
.type-legend{
|
||||||
|
margin-bottom:20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:row;
|
||||||
|
.legend-color{
|
||||||
|
width:12px;
|
||||||
|
height:12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
.color-normal{
|
||||||
|
background-color:#00ebac ;
|
||||||
|
}
|
||||||
|
.color-warning{
|
||||||
|
background-color:#ff3537 ;
|
||||||
|
}
|
||||||
|
.legend-text{
|
||||||
|
margin-left: 10px;
|
||||||
|
span{
|
||||||
|
color:#ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topic-animation1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation1.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation1 {
|
||||||
|
animation: topup1 5s linear 1s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation2.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation2 {
|
||||||
|
animation: topup1 5s linear 2s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation3.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation3 {
|
||||||
|
animation: topup1 5s linear 3s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation4 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation4.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation4 {
|
||||||
|
animation: topup1 5s linear infinite;
|
||||||
|
}
|
||||||
|
.topic-animation5 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation5.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation5 {
|
||||||
|
animation: topup1 5s linear 4s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation6 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation6.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation6 {
|
||||||
|
animation: topup1 5s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes topup1 {
|
||||||
|
from {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,675 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.fanchunxiang
|
||||||
|
* @Date: 2021-10-26 15:16:59
|
||||||
|
* @LastEditors: hisense.fanchunxiang
|
||||||
|
* @LastEditTime: 2021-10-29 17:38:29
|
||||||
|
* @Description: file mountainData
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="team-distribution-ball">
|
||||||
|
<div class="bg-ball" />
|
||||||
|
<div class="rotating-ring" />
|
||||||
|
<div class="sum-ball">
|
||||||
|
<div class="top">
|
||||||
|
</div>
|
||||||
|
<div class="bottom">企业</div>
|
||||||
|
</div>
|
||||||
|
<div class="num-wrap">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in resourceTypeData"
|
||||||
|
:key="index"
|
||||||
|
@click="handleClick(item, index)"
|
||||||
|
>
|
||||||
|
<p>{{item.typeNum}}个</p>
|
||||||
|
<p class="num-wrap-bottom">{{item.typeName}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
// 选择查询的时间段
|
||||||
|
selectedPeriod: {
|
||||||
|
type: Number,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nums: 0,
|
||||||
|
stationList: [],
|
||||||
|
// startTime: moment().subtract(12, "h").format("YYYY-MM-DD HH:mm:ss"),
|
||||||
|
// endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
|
||||||
|
resourceType: ["石油化工", "有机化工", "精细化工", "化肥农药"],
|
||||||
|
detailTimer: null,
|
||||||
|
arr: [],
|
||||||
|
animationLock: true,
|
||||||
|
resourceTypeData: [
|
||||||
|
{
|
||||||
|
typeName: "石油化工",
|
||||||
|
typeNum: "17",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "有机化工",
|
||||||
|
typeNum: "329",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "精细化工",
|
||||||
|
typeNum: "432",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "化肥农药",
|
||||||
|
typeNum: "20",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
resourceData:{}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.arr.push(document.querySelectorAll(".num-wrap div"));
|
||||||
|
console.log("===============>", this.arr);
|
||||||
|
this.setTimer();
|
||||||
|
this.setRotateTimer();
|
||||||
|
this.getResourceTypeData();
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
// 每次离开当前界面时，清除定时器
|
||||||
|
clearInterval(this.detailTimer);
|
||||||
|
this.detailTimer = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(item, index) {
|
||||||
|
if (this.animationLock) {
|
||||||
|
// console.log(item);
|
||||||
|
if(item.typeName == "应急专家"){
|
||||||
|
bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
}
|
||||||
|
else if(item.typeName == "物资储备库"){
|
||||||
|
bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
|
||||||
|
}
|
||||||
|
else if(item.typeName == "应急预案") {
|
||||||
|
bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
bus.$emit('refreshChartData', 'resource', this.resourceData.planData);
|
||||||
|
}
|
||||||
|
if (index > 0 && this.resourceTypeData.length - index >= 1) {
|
||||||
|
let i = 1;
|
||||||
|
clearInterval(this.rotateTimer);
|
||||||
|
this.animationFun2();
|
||||||
|
if (this.resourceTypeData.length - index === 1) {
|
||||||
|
this.setRotateTimer();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.rotateTimer2 = setInterval(() => {
|
||||||
|
this.animationFun2();
|
||||||
|
i++;
|
||||||
|
// console.log(i, this.mountainData.length - index)
|
||||||
|
if (i === (this.resourceTypeData.length - index)) {
|
||||||
|
clearInterval(this.rotateTimer2);
|
||||||
|
this.setRotateTimer();
|
||||||
|
}
|
||||||
|
}, 1050);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//进入页面获取资源类别各自的总数,得到所有的统计数据，应急物资选中之后下面的图表显示什么？？？
|
||||||
|
getResourceTypeData(){
|
||||||
|
// Promise.all([
|
||||||
|
// this.getExpertStatisticsData(),
|
||||||
|
// this.getResourceStatisticsData(),
|
||||||
|
// this.getStorageStatisticsData(),
|
||||||
|
// this.getPlanStatisticsData(),
|
||||||
|
// ]).then((result)=>{
|
||||||
|
// //给球赋值、给图表赋值//调用父页面显示某一个图表数据
|
||||||
|
// //console.log('this.resourceData',this.resourceData);
|
||||||
|
// this.resourceTypeData.forEach(item => {
|
||||||
|
// if(item.typeName == "应急专家")
|
||||||
|
// {item.typeNum = this.resourceData.expertData.expertNum
|
||||||
|
// }
|
||||||
|
// else if(item.typeName=="物资储备库"){
|
||||||
|
// item.typeNum = this.resourceData.storageData.storageNum
|
||||||
|
// }
|
||||||
|
// else if(item.typeName=="应急预案"){
|
||||||
|
// item.typeNum = this.resourceData.planData.city.length + this.resourceData.planData.country.length + this.resourceData.planData.province.length;
|
||||||
|
// }
|
||||||
|
// else {
|
||||||
|
// item.typeNum = 540;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// });
|
||||||
|
// bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 每五分钟获取一次资源数据
|
||||||
|
setTimer() {
|
||||||
|
this.clearTimer();
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.getResourceTypeData();
|
||||||
|
}, 5 * 60 * 1000);
|
||||||
|
},
|
||||||
|
animationFun() {
|
||||||
|
// console.log(this.arr[0][0].classList)
|
||||||
|
if (this.animationLock) {
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
this.arr[0][0].classList.add("animation1");
|
||||||
|
this.arr[0][1].classList.add("animation2");
|
||||||
|
this.arr[0][2].classList.add("animation3");
|
||||||
|
this.arr[0][3].classList.add("animation4");
|
||||||
|
setTimeout(() => {
|
||||||
|
for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
|
||||||
|
// 改变展示点击的山体
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
}
|
||||||
|
this.arr[0][0].classList.remove("animation1");
|
||||||
|
this.arr[0][1].classList.remove("animation2");
|
||||||
|
this.arr[0][2].classList.remove("animation3");
|
||||||
|
this.arr[0][3].classList.remove("animation4");
|
||||||
|
//更新图表数据 bus.$emit('refreshChartData', val);
|
||||||
|
// if(this.resourceTypeData[0].typeName == '应急专家'){
|
||||||
|
// bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
// }else if(this.resourceTypeData[0].typeName == '物资储备库'){
|
||||||
|
// bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
|
||||||
|
//
|
||||||
|
// }else if(this.resourceTypeData[0].typeName == '应急预案'){
|
||||||
|
// bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
|
||||||
|
// }else{
|
||||||
|
// }
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animationFun2() {
|
||||||
|
// console.log(this.arr[0][0].classList)
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
this.arr[0][0].classList.add("animation2-1");
|
||||||
|
this.arr[0][1].classList.add("animation2-2");
|
||||||
|
this.arr[0][2].classList.add("animation2-3");
|
||||||
|
this.arr[0][3].classList.add("animation2-4");
|
||||||
|
setTimeout(() => {
|
||||||
|
for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
|
||||||
|
// 改变展示点击的山体
|
||||||
|
let selectedData={};
|
||||||
|
bus.$emit('refreshChartData',selectedData);
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
}
|
||||||
|
this.arr[0][0].classList.remove("animation2-1");
|
||||||
|
this.arr[0][1].classList.remove("animation2-2");
|
||||||
|
this.arr[0][2].classList.remove("animation2-3");
|
||||||
|
this.arr[0][3].classList.remove("animation2-4");
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
//每8秒旋转一次
|
||||||
|
setRotateTimer() {
|
||||||
|
this.clearTimer();
|
||||||
|
// this.animationFun();
|
||||||
|
this.rotateTimer = setInterval(() => {
|
||||||
|
this.animationFun();
|
||||||
|
},8*1000);
|
||||||
|
},
|
||||||
|
clearTimer() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
clearInterval(this.rotateTimer);
|
||||||
|
this.timer = null;
|
||||||
|
this.rotateTimer = null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.team-distribution-ball {
|
||||||
|
width: 466px;
|
||||||
|
height: 230px;
|
||||||
|
position: relative;
|
||||||
|
left: -10px;
|
||||||
|
.bg-ball {
|
||||||
|
width: 466px;
|
||||||
|
height: 230px;
|
||||||
|
position: absolute;
|
||||||
|
left: 60%;
|
||||||
|
margin-left: -210px;
|
||||||
|
margin-top: 30px;
|
||||||
|
background: url("~@/assets/common/homePage/bg_ball.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 70%;
|
||||||
|
}
|
||||||
|
.rotating-ring {
|
||||||
|
width: 230px;
|
||||||
|
height: 230px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: url("~@/assets/common/homePage/rotating-ring2.png");
|
||||||
|
background-size: 100%;
|
||||||
|
transform: rotateX(30deg);
|
||||||
|
animation: spin1 3s linear infinite;
|
||||||
|
top: -5%;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.sum-ball {
|
||||||
|
width: 150px;
|
||||||
|
height: 75px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -70px;
|
||||||
|
top: 50px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background-image: url("~@/assets/common/homePage/ball-bak.png");
|
||||||
|
margin-left: 55px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
span {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spin1 {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(65deg) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotateX(65deg) rotateZ(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(65deg) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num-wrap {
|
||||||
|
z-index: 1002;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
& > div:nth-child(1) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-active.png");
|
||||||
|
background-size: 99%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 125px;
|
||||||
|
height: 190px;
|
||||||
|
right: 96px;
|
||||||
|
bottom: -23px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 60px 0px 12px 0px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 5px 0px 12px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(2) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
left: 55px;
|
||||||
|
bottom: 45%;
|
||||||
|
margin-bottom: -80px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 15px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(3) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
color: #53ceff;
|
||||||
|
height: 96px;
|
||||||
|
left: 95px;
|
||||||
|
top: 15px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(4) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
color: #53ceff;
|
||||||
|
height: 96px;
|
||||||
|
right: 70px;
|
||||||
|
top: 20px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(5) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
right: 120px;
|
||||||
|
bottom: 43%;
|
||||||
|
margin-bottom: -80px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*依次设置图像盒子中每个图像旋转后位置*/
|
||||||
|
.animation1 {
|
||||||
|
animation: run1 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test1 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run1-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2 {
|
||||||
|
animation: run2 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test2 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run2-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation3 {
|
||||||
|
animation: run3 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test3 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run3-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation4 {
|
||||||
|
animation: run4 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test4 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run4-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation5 {
|
||||||
|
animation: run5 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test5 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run5-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-1 {
|
||||||
|
animation: run1 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test1 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run1-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-2 {
|
||||||
|
animation: run2 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test2 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run2-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-3 {
|
||||||
|
animation: run3 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test3 2s linear both;
|
||||||
|
}
|
||||||
|
p :nth-child(2) {
|
||||||
|
animation: run3-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-4 {
|
||||||
|
animation: run4 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test4 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run4-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-5 {
|
||||||
|
animation: run5 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test5 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run5-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*采用@keyframes 规则创建run动画。*/
|
||||||
|
@keyframes run1 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-37px) translateY(-4px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-93px) translateY(-21px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-120px) translateY(-34px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-150px) translateY(-52px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test1 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 37px 0px 0px 0px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 10px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run2 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-15px) translateY(-8px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-30px) translateY(-36px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-15px) translateY(-64px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(5px) translateY(-102px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test2 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 17px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run2-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run3 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-20px) translateY(-15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(60.5px) translateY(-30px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(240.75px) translateY(-15px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(200px) translateY(5px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test3 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 17px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run3-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run4 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(5px) translateY(18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px) translateY(36px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-5px) translateY(54px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-10px) translateY(78px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test4 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 37px 0px 0px 0px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run4-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
margin: 22px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 317 B |
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
Binary file not shown.
|
After Width: | Height: | Size: 325 B |
Binary file not shown.
|
After Width: | Height: | Size: 747 B |
Binary file not shown.
|
After Width: | Height: | Size: 836 B |
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
|
|
@ -0,0 +1,295 @@
|
||||||
|
<!-- -->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="capability-cloud">
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<span class="title" @click="goHome">城市云脑通用能力服务平台</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--左侧-->
|
||||||
|
<div class="reservoir-left">
|
||||||
|
<!-- 左侧内容 -->
|
||||||
|
<reservoir-left />
|
||||||
|
</div>
|
||||||
|
<!--右侧-->
|
||||||
|
<div class="reservoir-right">
|
||||||
|
<reservoir-right />
|
||||||
|
</div>
|
||||||
|
<div class="reservoir-map">
|
||||||
|
<!-- 中间地图 -->
|
||||||
|
<reservoir-thumbnail
|
||||||
|
@changeThumbnailMap="changeThumbnailMap"
|
||||||
|
@jumpIntoMap="jumpIntoMap"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
|
||||||
|
|
||||||
|
import ReservoirLeft from "./components/ReservoirLeft";
|
||||||
|
import ReservoirRight from "./components/ReservoirRight";
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {
|
||||||
|
ReservoirThumbnail,
|
||||||
|
ReservoirLeft,
|
||||||
|
ReservoirRight
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
model: "common",
|
||||||
|
dialogTitle: "周边视频",
|
||||||
|
videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
|
||||||
|
riverCourseHistoryDialogVisible: false, //河道历史弹窗
|
||||||
|
riverDetailInfo: {}, //河道具体信息用于历史弹窗显示数据
|
||||||
|
dialogType: "add",
|
||||||
|
dialogData: {},
|
||||||
|
dangerReportDialogVisible: false,
|
||||||
|
positionInfo: null,
|
||||||
|
reservoirDialogVisible: false, //新增修改积水点弹窗显示标志位
|
||||||
|
districtOptions: [], //区划数组
|
||||||
|
isThumbnail:true, //是否为地图缩略图
|
||||||
|
tabindex:0, //3d地图选中的tab。
|
||||||
|
listType:"",//水库列表的类型，普通列表 “”，预警列表 warnig
|
||||||
|
basicInfo: {}, //水库详情信息
|
||||||
|
type: '',
|
||||||
|
callSource:"indexPage",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//监听属性 类似于data概念
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化
|
||||||
|
watch: {},
|
||||||
|
//方法集合
|
||||||
|
methods: {
|
||||||
|
changeModel(model, waterPointInfo) {
|
||||||
|
this.model = model;
|
||||||
|
if(model == 'common') {
|
||||||
|
this.basicInfo = {};
|
||||||
|
}
|
||||||
|
this.listType ="";
|
||||||
|
// if (this.model == "common") {
|
||||||
|
// this.$refs.riverCourseMap.isMapMenu = true;
|
||||||
|
// this.$refs.riverCourseMap.choseTab(1);
|
||||||
|
// }
|
||||||
|
//点击水库险情时
|
||||||
|
if(this.model == "dangerlist") {
|
||||||
|
this.isThumbnail=false;
|
||||||
|
//水库险情上图。
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapDangerList');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//点击水库险情时
|
||||||
|
// if(this.model == "dangerlist") {
|
||||||
|
// this.isThumbnail=false;
|
||||||
|
// //水库险情上图。
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// bus.$emit('reservoirMapDangerList');
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
//从缩略图下沉跳转至三维地图
|
||||||
|
jumpIntoMap(data) {
|
||||||
|
this.isThumbnail = false;
|
||||||
|
//地图到具体的区划
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapLonLat',data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//点击所有水库上图。
|
||||||
|
listOnMap(data){
|
||||||
|
this.isThumbnail = false;
|
||||||
|
console.log("所有水库列表",data);
|
||||||
|
//地图到具体的区划
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapList',data);
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 获取区市单位数据
|
||||||
|
async getDistrict() {
|
||||||
|
const res = await selectByType("districtType");
|
||||||
|
this.districtOptions = res.data;
|
||||||
|
},
|
||||||
|
//视频弹窗显示。
|
||||||
|
openVideoAnalysisAndData(item, isShow) {
|
||||||
|
console.log("为啥不显示", item);
|
||||||
|
this.positionInfo = item;
|
||||||
|
this.videoAnalysisDialogVisible = isShow;
|
||||||
|
},
|
||||||
|
//新增险情
|
||||||
|
addNewDanger(type, data){
|
||||||
|
console.log("type",type);
|
||||||
|
if (type == "add") {
|
||||||
|
this.dialogData = {};
|
||||||
|
this.dialogType = "add";
|
||||||
|
} else {
|
||||||
|
this.dialogData = data;
|
||||||
|
this.dialogType = "edit";
|
||||||
|
}
|
||||||
|
this.reservoirDialogVisible = true;
|
||||||
|
},
|
||||||
|
//3d 跳转缩略图
|
||||||
|
changeMap(isshow){
|
||||||
|
this.isThumbnail=isshow;
|
||||||
|
},
|
||||||
|
// 缩略图跳转3d
|
||||||
|
changeThumbnailMap(isshow,index){
|
||||||
|
console.log('isshow',isshow);
|
||||||
|
console.log('index',index);
|
||||||
|
this.isThumbnail=isshow;
|
||||||
|
this.tabindex=index;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成（可以访问当前this实例）
|
||||||
|
created() {},
|
||||||
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
destroyed() {}, //生命周期 - 销毁完成
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
@font-face {
|
||||||
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DIN-Bold';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'ZhiheiJ-W5.ttf';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
|
||||||
|
}
|
||||||
|
.capability-cloud {
|
||||||
|
font-family: SourceHanSansCN-Regular;
|
||||||
|
.title {
|
||||||
|
font-family: ZhiheiJ-W5;
|
||||||
|
background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
|
||||||
|
font-weight: 600;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-family: DIN-Bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
// 此处去掉scoped为修改date-picker背景色，所以业务样式都应放在reservoir层级中，避免影响
|
||||||
|
//@import url(); 引入公共css类
|
||||||
|
.module-header-container {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.capability-cloud {
|
||||||
|
height: 10.8rem;
|
||||||
|
background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
& > .header {
|
||||||
|
height: 1.04rem;
|
||||||
|
text-align: center;
|
||||||
|
background: url('~@/assets/capabilityCloud/header.png') no-repeat;
|
||||||
|
font-size: 0.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//position: relative;
|
||||||
|
.reservoir-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.1rem;
|
||||||
|
z-index: 1300;
|
||||||
|
top: 0.8rem;
|
||||||
|
height: calc(100% - 0.8rem);
|
||||||
|
}
|
||||||
|
.reservoir-right {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
right: 0.1rem;
|
||||||
|
top: 0.8rem;
|
||||||
|
height: calc(100% - 0.8rem);
|
||||||
|
}
|
||||||
|
.reservoir-map {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 日期时间组件
|
||||||
|
.phone-date-picker {
|
||||||
|
color: #fff;
|
||||||
|
//border: 1px solid #e4e7ed;
|
||||||
|
border: 1px solid #008fbb;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
//background: #000;
|
||||||
|
background: #123d68;
|
||||||
|
//background:rgba(0, 0, 0, 0);
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 5px 0;
|
||||||
|
.el-date-table td.disabled div {
|
||||||
|
background: #305156 !important;
|
||||||
|
}
|
||||||
|
.el-picker-panel__footer {
|
||||||
|
//background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
background: #123d68;
|
||||||
|
color: #fff;
|
||||||
|
.el-picker-panel__link-btn:first-of-type {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-date-table td.in-range div {
|
||||||
|
background: #009ab3;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
//background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
background: #123d68;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-date-picker__header > button,
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-picker-panel__content > .el-date-table > tbody > tr > th {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-button.is-plain:hover,
|
||||||
|
.el-button.is-plain:focus {
|
||||||
|
background: #009ab3;
|
||||||
|
}
|
||||||
|
.el-button--default {
|
||||||
|
border-radius: 0;
|
||||||
|
background: #009ab3;
|
||||||
|
//border: 1px solid #dcdfe6;
|
||||||
|
border: 1px solid #008fbb;
|
||||||
|
border-color: #009ab3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
The MIT License (MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2020 Daniel Eden
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
# Animate.css
|
|
||||||
|
|
||||||
[](https://github.com/daneden/animate.css) [](https://github.com/daneden/animate.css) [](https://github.com/daneden/animate.css) [](https://github.com/daneden/animate.css)
|
|
||||||
|
|
||||||
> If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17).
|
|
||||||
|
|
||||||
## _Just-add-water CSS animation_
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
Install with npm:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm install animate.css --save
|
|
||||||
```
|
|
||||||
|
|
||||||
Install with yarn:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
yarn add animate.css
|
|
||||||
```
|
|
||||||
|
|
||||||
## Getting started
|
|
||||||
|
|
||||||
You can find the Animate.css documentation on the [website](https://animate.style/).
|
|
||||||
|
|
||||||
## Accessibility
|
|
||||||
|
|
||||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
|
||||||
|
|
||||||
## Core team
|
|
||||||
|
|
||||||
|  |  |  |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
|
|
||||||
| Animate.css creator | Maintainer | Core contributor |
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Animate.css is licensed under the MIT license. <https://opensource.org/licenses/MIT>
|
|
||||||
|
|
||||||
## Code of Conduct
|
|
||||||
|
|
||||||
This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,78 +0,0 @@
|
||||||
{
|
|
||||||
"name": "animate.css",
|
|
||||||
"version": "4.1.1",
|
|
||||||
"main": "animate.css",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/animate-css/animate.css.git"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name": "Animate.css"
|
|
||||||
},
|
|
||||||
"homepage": "https://animate.style/",
|
|
||||||
"license": "MIT",
|
|
||||||
"animateConfig": {
|
|
||||||
"prefix": "animate__"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "npm-run-all raw prod compat",
|
|
||||||
"compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat",
|
|
||||||
"dev": "npx postcss source/animate.css -o animate.css --no-map --env development -w",
|
|
||||||
"raw": "npx postcss source/animate.css -o animate.css --no-map --env development",
|
|
||||||
"prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production",
|
|
||||||
"format": "prettier --write \"**/*.{js,json,md,css}\"",
|
|
||||||
"precommit": "lint-staged",
|
|
||||||
"docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production",
|
|
||||||
"docs:pages": "node ./docsSource/index.js",
|
|
||||||
"docs": "npm-run-all docs:library docs:pages",
|
|
||||||
"version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
|
|
||||||
"postversion": "git push && git push --tags"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"> 3%",
|
|
||||||
"last 2 versions"
|
|
||||||
],
|
|
||||||
"style": "./animate.css",
|
|
||||||
"jspm": {
|
|
||||||
"main": "animate.css!",
|
|
||||||
"format": "global",
|
|
||||||
"directories": {
|
|
||||||
"lib": "./"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"autoprefixer": "^9.7.6",
|
|
||||||
"cssnano": "^4.1.10",
|
|
||||||
"eslint": "^7.8.1",
|
|
||||||
"husky": "^4.2.5",
|
|
||||||
"lint-staged": "^10.3.0",
|
|
||||||
"markdown-it": "^11.0.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"postcss": "^7.0.27",
|
|
||||||
"postcss-cli": "^7.1.2",
|
|
||||||
"postcss-header": "^2.0.0",
|
|
||||||
"postcss-import": "^12.0.1",
|
|
||||||
"postcss-prefixer": "^2.1.2",
|
|
||||||
"postcss-preset-env": "^6.7.0",
|
|
||||||
"prettier": "^2.1.1"
|
|
||||||
},
|
|
||||||
"lint-staged": {
|
|
||||||
"*.{js,json,md,css}": [
|
|
||||||
"prettier --write"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"husky": {
|
|
||||||
"hooks": {
|
|
||||||
"pre-commit": "npm-run-all start precommit"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"animate.compat.css",
|
|
||||||
"animate.min.css",
|
|
||||||
"animate.css",
|
|
||||||
"source/**/*.css"
|
|
||||||
],
|
|
||||||
"__npminstall_done": true,
|
|
||||||
"_from": "animate.css@4.1.1",
|
|
||||||
"_resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz"
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
.animated {
|
|
||||||
animation-duration: var(--animate-duration);
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.infinite {
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-1 {
|
|
||||||
animation-iteration-count: var(--animate-repeat);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-2 {
|
|
||||||
animation-iteration-count: calc(var(--animate-repeat) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-3 {
|
|
||||||
animation-iteration-count: calc(var(--animate-repeat) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-1s {
|
|
||||||
animation-delay: var(--animate-delay);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-2s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-3s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-4s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-5s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.faster {
|
|
||||||
animation-duration: calc(var(--animate-duration) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.fast {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.slow {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.slower {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print, (prefers-reduced-motion: reduce) {
|
|
||||||
.animated {
|
|
||||||
animation-duration: 1ms !important;
|
|
||||||
transition-duration: 1ms !important;
|
|
||||||
animation-iteration-count: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated[class*='Out'] {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
:root {
|
|
||||||
--animate-duration: 1s;
|
|
||||||
--animate-delay: 1s;
|
|
||||||
--animate-repeat: 1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,131 +0,0 @@
|
||||||
@import '_vars.css';
|
|
||||||
@import '_base.css';
|
|
||||||
|
|
||||||
/* Attention seekers */
|
|
||||||
@import 'attention_seekers/bounce.css';
|
|
||||||
@import 'attention_seekers/flash.css';
|
|
||||||
@import 'attention_seekers/pulse.css';
|
|
||||||
@import 'attention_seekers/rubberBand.css';
|
|
||||||
@import 'attention_seekers/shakeX.css';
|
|
||||||
@import 'attention_seekers/shakeY.css';
|
|
||||||
@import 'attention_seekers/headShake.css';
|
|
||||||
@import 'attention_seekers/swing.css';
|
|
||||||
@import 'attention_seekers/tada.css';
|
|
||||||
@import 'attention_seekers/wobble.css';
|
|
||||||
@import 'attention_seekers/jello.css';
|
|
||||||
@import 'attention_seekers/heartBeat.css';
|
|
||||||
|
|
||||||
/* Back entrances */
|
|
||||||
@import 'back_entrances/backInDown.css';
|
|
||||||
@import 'back_entrances/backInLeft.css';
|
|
||||||
@import 'back_entrances/backInRight.css';
|
|
||||||
@import 'back_entrances/backInUp.css';
|
|
||||||
|
|
||||||
/* Back exits */
|
|
||||||
@import 'back_exits/backOutDown.css';
|
|
||||||
@import 'back_exits/backOutLeft.css';
|
|
||||||
@import 'back_exits/backOutRight.css';
|
|
||||||
@import 'back_exits/backOutUp.css';
|
|
||||||
|
|
||||||
/* Bouncing entrances */
|
|
||||||
@import 'bouncing_entrances/bounceIn.css';
|
|
||||||
@import 'bouncing_entrances/bounceInDown.css';
|
|
||||||
@import 'bouncing_entrances/bounceInLeft.css';
|
|
||||||
@import 'bouncing_entrances/bounceInRight.css';
|
|
||||||
@import 'bouncing_entrances/bounceInUp.css';
|
|
||||||
|
|
||||||
/* Bouncing exits */
|
|
||||||
@import 'bouncing_exits/bounceOut.css';
|
|
||||||
@import 'bouncing_exits/bounceOutDown.css';
|
|
||||||
@import 'bouncing_exits/bounceOutLeft.css';
|
|
||||||
@import 'bouncing_exits/bounceOutRight.css';
|
|
||||||
@import 'bouncing_exits/bounceOutUp.css';
|
|
||||||
|
|
||||||
/* Fading entrances */
|
|
||||||
@import 'fading_entrances/fadeIn.css';
|
|
||||||
@import 'fading_entrances/fadeInDown.css';
|
|
||||||
@import 'fading_entrances/fadeInDownBig.css';
|
|
||||||
@import 'fading_entrances/fadeInLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInLeftBig.css';
|
|
||||||
@import 'fading_entrances/fadeInRight.css';
|
|
||||||
@import 'fading_entrances/fadeInRightBig.css';
|
|
||||||
@import 'fading_entrances/fadeInUp.css';
|
|
||||||
@import 'fading_entrances/fadeInUpBig.css';
|
|
||||||
@import 'fading_entrances/fadeInTopLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInTopRight.css';
|
|
||||||
@import 'fading_entrances/fadeInBottomLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInBottomRight.css';
|
|
||||||
|
|
||||||
/* Fading exits */
|
|
||||||
@import 'fading_exits/fadeOut.css';
|
|
||||||
@import 'fading_exits/fadeOutDown.css';
|
|
||||||
@import 'fading_exits/fadeOutDownBig.css';
|
|
||||||
@import 'fading_exits/fadeOutLeft.css';
|
|
||||||
@import 'fading_exits/fadeOutLeftBig.css';
|
|
||||||
@import 'fading_exits/fadeOutRight.css';
|
|
||||||
@import 'fading_exits/fadeOutRightBig.css';
|
|
||||||
@import 'fading_exits/fadeOutUp.css';
|
|
||||||
@import 'fading_exits/fadeOutUpBig.css';
|
|
||||||
@import 'fading_exits/fadeOutTopLeft.css';
|
|
||||||
@import 'fading_exits/fadeOutTopRight.css';
|
|
||||||
@import 'fading_exits/fadeOutBottomRight.css';
|
|
||||||
@import 'fading_exits/fadeOutBottomLeft.css';
|
|
||||||
|
|
||||||
/* Flippers */
|
|
||||||
@import 'flippers/flip.css';
|
|
||||||
@import 'flippers/flipInX.css';
|
|
||||||
@import 'flippers/flipInY.css';
|
|
||||||
@import 'flippers/flipOutX.css';
|
|
||||||
@import 'flippers/flipOutY.css';
|
|
||||||
|
|
||||||
/* Lightspeed */
|
|
||||||
@import 'lightspeed/lightSpeedInRight.css';
|
|
||||||
@import 'lightspeed/lightSpeedInLeft.css';
|
|
||||||
@import 'lightspeed/lightSpeedOutRight.css';
|
|
||||||
@import 'lightspeed/lightSpeedOutLeft.css';
|
|
||||||
|
|
||||||
/* Rotating entrances */
|
|
||||||
@import 'rotating_entrances/rotateIn.css';
|
|
||||||
@import 'rotating_entrances/rotateInDownLeft.css';
|
|
||||||
@import 'rotating_entrances/rotateInDownRight.css';
|
|
||||||
@import 'rotating_entrances/rotateInUpLeft.css';
|
|
||||||
@import 'rotating_entrances/rotateInUpRight.css';
|
|
||||||
|
|
||||||
/* Rotating exits */
|
|
||||||
@import 'rotating_exits/rotateOut.css';
|
|
||||||
@import 'rotating_exits/rotateOutDownLeft.css';
|
|
||||||
@import 'rotating_exits/rotateOutDownRight.css';
|
|
||||||
@import 'rotating_exits/rotateOutUpLeft.css';
|
|
||||||
@import 'rotating_exits/rotateOutUpRight.css';
|
|
||||||
|
|
||||||
/* Specials */
|
|
||||||
@import 'specials/hinge.css';
|
|
||||||
@import 'specials/jackInTheBox.css';
|
|
||||||
@import 'specials/rollIn.css';
|
|
||||||
@import 'specials/rollOut.css';
|
|
||||||
|
|
||||||
/* Zooming entrances */
|
|
||||||
@import 'zooming_entrances/zoomIn.css';
|
|
||||||
@import 'zooming_entrances/zoomInDown.css';
|
|
||||||
@import 'zooming_entrances/zoomInLeft.css';
|
|
||||||
@import 'zooming_entrances/zoomInRight.css';
|
|
||||||
@import 'zooming_entrances/zoomInUp.css';
|
|
||||||
|
|
||||||
/* Zooming exits */
|
|
||||||
@import 'zooming_exits/zoomOut.css';
|
|
||||||
@import 'zooming_exits/zoomOutDown.css';
|
|
||||||
@import 'zooming_exits/zoomOutLeft.css';
|
|
||||||
@import 'zooming_exits/zoomOutRight.css';
|
|
||||||
@import 'zooming_exits/zoomOutUp.css';
|
|
||||||
|
|
||||||
/* Sliding entrances */
|
|
||||||
@import 'sliding_entrances/slideInDown.css';
|
|
||||||
@import 'sliding_entrances/slideInLeft.css';
|
|
||||||
@import 'sliding_entrances/slideInRight.css';
|
|
||||||
@import 'sliding_entrances/slideInUp.css';
|
|
||||||
|
|
||||||
/* Sliding exits */
|
|
||||||
@import 'sliding_exits/slideOutDown.css';
|
|
||||||
@import 'sliding_exits/slideOutLeft.css';
|
|
||||||
@import 'sliding_exits/slideOutRight.css';
|
|
||||||
@import 'sliding_exits/slideOutUp.css';
|
|
||||||
34
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/bounce.css
generated
vendored
34
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/bounce.css
generated
vendored
|
|
@ -1,34 +0,0 @@
|
||||||
@keyframes bounce {
|
|
||||||
from,
|
|
||||||
20%,
|
|
||||||
53%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
43% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -30px, 0) scaleY(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -15px, 0) scaleY(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
transform: translate3d(0, 0, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -4px, 0) scaleY(1.02);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounce {
|
|
||||||
animation-name: bounce;
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
16
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/flash.css
generated
vendored
16
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/flash.css
generated
vendored
|
|
@ -1,16 +0,0 @@
|
||||||
@keyframes flash {
|
|
||||||
from,
|
|
||||||
50%,
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
25%,
|
|
||||||
75% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
animation-name: flash;
|
|
||||||
}
|
|
||||||
30
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/headShake.css
generated
vendored
30
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/headShake.css
generated
vendored
|
|
@ -1,30 +0,0 @@
|
||||||
@keyframes headShake {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
6.5% {
|
|
||||||
transform: translateX(-6px) rotateY(-9deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
18.5% {
|
|
||||||
transform: translateX(5px) rotateY(7deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
31.5% {
|
|
||||||
transform: translateX(-3px) rotateY(-5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
43.5% {
|
|
||||||
transform: translateX(2px) rotateY(3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.headShake {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
animation-name: headShake;
|
|
||||||
}
|
|
||||||
27
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/heartBeat.css
generated
vendored
27
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/heartBeat.css
generated
vendored
|
|
@ -1,27 +0,0 @@
|
||||||
@keyframes heartBeat {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
14% {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
28% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
42% {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heartBeat {
|
|
||||||
animation-name: heartBeat;
|
|
||||||
animation-duration: calc(var(--animate-duration) * 1.3);
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
40
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/jello.css
generated
vendored
40
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/jello.css
generated
vendored
|
|
@ -1,40 +0,0 @@
|
||||||
@keyframes jello {
|
|
||||||
from,
|
|
||||||
11.1%,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
22.2% {
|
|
||||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
33.3% {
|
|
||||||
transform: skewX(6.25deg) skewY(6.25deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
44.4% {
|
|
||||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
55.5% {
|
|
||||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
66.6% {
|
|
||||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
77.7% {
|
|
||||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
88.8% {
|
|
||||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.jello {
|
|
||||||
animation-name: jello;
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/pulse.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/pulse.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale3d(1.05, 1.05, 1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulse {
|
|
||||||
animation-name: pulse;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
33
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/rubberBand.css
generated
vendored
33
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/rubberBand.css
generated
vendored
|
|
@ -1,33 +0,0 @@
|
||||||
@keyframes rubberBand {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: scale3d(1.25, 0.75, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: scale3d(0.75, 1.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale3d(1.15, 0.85, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
65% {
|
|
||||||
transform: scale3d(0.95, 1.05, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: scale3d(1.05, 0.95, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rubberBand {
|
|
||||||
animation-name: rubberBand;
|
|
||||||
}
|
|
||||||
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shake.css
generated
vendored
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shake.css
generated
vendored
|
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shake {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-10px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(10px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shake {
|
|
||||||
animation-name: shake;
|
|
||||||
}
|
|
||||||
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeX.css
generated
vendored
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeX.css
generated
vendored
|
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shakeX {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-10px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(10px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shakeX {
|
|
||||||
animation-name: shakeX;
|
|
||||||
}
|
|
||||||
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeY.css
generated
vendored
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeY.css
generated
vendored
|
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shakeY {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -10px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(0, 10px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shakeY {
|
|
||||||
animation-name: shakeY;
|
|
||||||
}
|
|
||||||
26
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/swing.css
generated
vendored
26
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/swing.css
generated
vendored
|
|
@ -1,26 +0,0 @@
|
||||||
@keyframes swing {
|
|
||||||
20% {
|
|
||||||
transform: rotate3d(0, 0, 1, 15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: rotate3d(0, 0, 1, -10deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: rotate3d(0, 0, 1, 5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: rotate3d(0, 0, 1, -5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate3d(0, 0, 1, 0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swing {
|
|
||||||
transform-origin: top center;
|
|
||||||
animation-name: swing;
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
@keyframes tada {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
20% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tada {
|
|
||||||
animation-name: tada;
|
|
||||||
}
|
|
||||||
35
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/wobble.css
generated
vendored
35
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/wobble.css
generated
vendored
|
|
@ -1,35 +0,0 @@
|
||||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
||||||
|
|
||||||
@keyframes wobble {
|
|
||||||
from {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
15% {
|
|
||||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
45% {
|
|
||||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wobble {
|
|
||||||
animation-name: wobble;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInDown.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInDown.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInDown {
|
|
||||||
0% {
|
|
||||||
transform: translateY(-1200px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInDown {
|
|
||||||
animation-name: backInDown;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInLeft.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInLeft.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInLeft {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInLeft {
|
|
||||||
animation-name: backInLeft;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInRight.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInRight.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInRight {
|
|
||||||
0% {
|
|
||||||
transform: translateX(2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInRight {
|
|
||||||
animation-name: backInRight;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInUp.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInUp.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(1200px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInUp {
|
|
||||||
animation-name: backInUp;
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutDown {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(700px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutDown {
|
|
||||||
animation-name: backOutDown;
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutLeft {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutLeft {
|
|
||||||
animation-name: backOutLeft;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutRight.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutRight.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutRight {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutRight {
|
|
||||||
animation-name: backOutRight;
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutUp {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(-700px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutUp {
|
|
||||||
animation-name: backOutUp;
|
|
||||||
}
|
|
||||||
42
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceIn.css
generated
vendored
42
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceIn.css
generated
vendored
|
|
@ -1,42 +0,0 @@
|
||||||
@keyframes bounceIn {
|
|
||||||
from,
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d(0.3, 0.3, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1.03, 1.03, 1.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: scale3d(0.97, 0.97, 0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceIn {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.75);
|
|
||||||
animation-name: bounceIn;
|
|
||||||
}
|
|
||||||
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInDown.css
generated
vendored
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInDown.css
generated
vendored
|
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInDown {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -3000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 25px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(0, -10px, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, 5px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInDown {
|
|
||||||
animation-name: bounceInDown;
|
|
||||||
}
|
|
||||||
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInLeft.css
generated
vendored
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInLeft.css
generated
vendored
|
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInLeft {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-3000px, 0, 0) scaleX(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(25px, 0, 0) scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(-10px, 0, 0) scaleX(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(5px, 0, 0) scaleX(0.995);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInLeft {
|
|
||||||
animation-name: bounceInLeft;
|
|
||||||
}
|
|
||||||
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInRight.css
generated
vendored
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInRight.css
generated
vendored
|
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInRight {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInRight {
|
|
||||||
animation-name: bounceInRight;
|
|
||||||
}
|
|
||||||
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInUp.css
generated
vendored
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInUp.css
generated
vendored
|
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInUp {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 3000px, 0) scaleY(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, -20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(0, 10px, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -5px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInUp {
|
|
||||||
animation-name: bounceInUp;
|
|
||||||
}
|
|
||||||
21
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOut.css
generated
vendored
21
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOut.css
generated
vendored
|
|
@ -1,21 +0,0 @@
|
||||||
@keyframes bounceOut {
|
|
||||||
20% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
50%,
|
|
||||||
55% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d(0.3, 0.3, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOut {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.75);
|
|
||||||
animation-name: bounceOut;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutDown.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutDown.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes bounceOutDown {
|
|
||||||
20% {
|
|
||||||
transform: translate3d(0, 10px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
45% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, -20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 2000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutDown {
|
|
||||||
animation-name: bounceOutDown;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutLeft.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutLeft.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes bounceOutLeft {
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(20px, 0, 0) scaleX(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-2000px, 0, 0) scaleX(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutLeft {
|
|
||||||
animation-name: bounceOutLeft;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutRight.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutRight.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes bounceOutRight {
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(-20px, 0, 0) scaleX(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(2000px, 0, 0) scaleX(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutRight {
|
|
||||||
animation-name: bounceOutRight;
|
|
||||||
}
|
|
||||||
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutUp.css
generated
vendored
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutUp.css
generated
vendored
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes bounceOutUp {
|
|
||||||
20% {
|
|
||||||
transform: translate3d(0, -10px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
45% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -2000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutUp {
|
|
||||||
animation-name: bounceOutUp;
|
|
||||||
}
|
|
||||||
13
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeIn.css
generated
vendored
13
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeIn.css
generated
vendored
|
|
@ -1,13 +0,0 @@
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeIn {
|
|
||||||
animation-name: fadeIn;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInBottomLeft.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInBottomLeft.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInBottomLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInBottomLeft {
|
|
||||||
animation-name: fadeInBottomLeft;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInBottomRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInBottomRight {
|
|
||||||
animation-name: fadeInBottomRight;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDown.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDown.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInDown {
|
|
||||||
animation-name: fadeInDown;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDownBig.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDownBig.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInDownBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -2000px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInDownBig {
|
|
||||||
animation-name: fadeInDownBig;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeft.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeft.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInLeft {
|
|
||||||
animation-name: fadeInLeft;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeftBig.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeftBig.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInLeftBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-2000px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInLeftBig {
|
|
||||||
animation-name: fadeInLeftBig;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRight.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRight.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInRight {
|
|
||||||
animation-name: fadeInRight;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRightBig.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRightBig.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInRightBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(2000px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInRightBig {
|
|
||||||
animation-name: fadeInRightBig;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopLeft.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopLeft.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInTopLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, -100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInTopLeft {
|
|
||||||
animation-name: fadeInTopLeft;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopRight.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopRight.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInTopRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, -100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInTopRight {
|
|
||||||
animation-name: fadeInTopRight;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInUp.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInUp.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInUp {
|
|
||||||
animation-name: fadeInUp;
|
|
||||||
}
|
|
||||||
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInUpBig.css
generated
vendored
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInUpBig.css
generated
vendored
|
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInUpBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 2000px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInUpBig {
|
|
||||||
animation-name: fadeInUpBig;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
@keyframes fadeOut {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOut {
|
|
||||||
animation-name: fadeOut;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutBottomLeft.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutBottomLeft.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutBottomLeft {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutBottomLeft {
|
|
||||||
animation-name: fadeOutBottomLeft;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutBottomRight.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutBottomRight.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutBottomRight {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutBottomRight {
|
|
||||||
animation-name: fadeOutBottomRight;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutDown.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutDown.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutDown {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutDown {
|
|
||||||
animation-name: fadeOutDown;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutDownBig.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutDownBig.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutDownBig {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 2000px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutDownBig {
|
|
||||||
animation-name: fadeOutDownBig;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutLeft.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutLeft.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutLeft {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutLeft {
|
|
||||||
animation-name: fadeOutLeft;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutLeftBig.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutLeftBig.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutLeftBig {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-2000px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutLeftBig {
|
|
||||||
animation-name: fadeOutLeftBig;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutRight.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutRight.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutRight {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutRight {
|
|
||||||
animation-name: fadeOutRight;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutRightBig.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutRightBig.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutRightBig {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(2000px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutRightBig {
|
|
||||||
animation-name: fadeOutRightBig;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutTopLeft.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutTopLeft.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutTopLeft {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, -100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutTopLeft {
|
|
||||||
animation-name: fadeOutTopLeft;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutTopRight.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutTopRight.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutTopRight {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, -100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutTopRight {
|
|
||||||
animation-name: fadeOutTopRight;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutUp {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -100%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutUp {
|
|
||||||
animation-name: fadeOutUp;
|
|
||||||
}
|
|
||||||
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutUpBig.css
generated
vendored
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_exits/fadeOutUpBig.css
generated
vendored
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeOutUpBig {
|
|
||||||
from {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -2000px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeOutUpBig {
|
|
||||||
animation-name: fadeOutUpBig;
|
|
||||||
}
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
@keyframes flip {
|
|
||||||
from {
|
|
||||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
|
||||||
rotate3d(0, 1, 0, -190deg);
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
|
|
||||||
rotate3d(0, 1, 0, -170deg);
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
|
|
||||||
rotate3d(0, 1, 0, 0deg);
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.flip {
|
|
||||||
backface-visibility: visible;
|
|
||||||
animation-name: flip;
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue