791 lines
18 KiB
Vue
791 lines
18 KiB
Vue
<template>
|
||
<view class="content">
|
||
<scroll-view class="data_body" scroll-y style="height:100%">
|
||
<view class="view_item">
|
||
<view class="progress_circle">
|
||
<view v-for="(item,index) in CircleData" :key="index" :class="['progress_block','block_'+index]">
|
||
<view class="name">{{item.series[0].name}}</view>
|
||
<!-- <view class="value">{{item.series[0].value}}</view> -->
|
||
<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
|
||
<qiun-data-charts type="arcbar" :chartData="item" :canvas2d="canvas2d"
|
||
:canvasId="'four_a_'+index" :resshow="delayload"
|
||
:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
|
||
</view>
|
||
<view class="planet">
|
||
<view class="planet_shadow"></view>
|
||
<view class="crater1"></view>
|
||
<view class="crater2"></view>
|
||
<view class="crater3"></view>
|
||
<view class="crater4"></view>
|
||
</view>
|
||
<view class="star" :class="['star'+index]"></view>
|
||
<view class="star pink" :class="['star'+index]"></view>
|
||
<view class="star blue" :class="['star'+index]"></view>
|
||
<view class="star yellow" :class="['star'+index]"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="split_line"></view>
|
||
<view class="friend_operate">
|
||
<view class="title">工单状态分布
|
||
</view>
|
||
<view v-if="delayload" class="charts-box" style="">
|
||
<qiun-data-charts type="ring" canvasId="four_b" :canvas2d="canvas2d" :resshow="delayload"
|
||
:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''},extra:{ring:{customRadius:'55'}}}"
|
||
:chartData="ProductRateData" style="height: 350px;" />
|
||
</view>
|
||
</view>
|
||
<view class="split_line"></view>
|
||
<!--概览-->
|
||
<view class="friend_operate">
|
||
<text-block :content="CardData"></text-block>
|
||
</view>
|
||
<view class="friend_operate">
|
||
<view class="title">本周报工产量</view>
|
||
<view v-if="delayload" class="charts-box" style="height: 300px;">
|
||
<qiun-data-charts type="line" canvasId="four_c" :canvas2d="canvas2d" :resshow="delayload"
|
||
:chartData="TrendData" />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import CircleData from "./json/user-server/1.json"
|
||
import {
|
||
listPwo,
|
||
listPo,
|
||
listReport,
|
||
reportRate
|
||
} from '@/api/mes/pwoDraw.js'
|
||
import {
|
||
getWeekReport,
|
||
getPwoStatus,
|
||
getProduceReport,
|
||
} from '@/api/mes/jobIn.js'
|
||
export default {
|
||
mounted() {
|
||
uni.showLoading();
|
||
//获取饼图数据
|
||
this.getStatus();
|
||
this.getReport();
|
||
this.getNum();
|
||
this.getRate();
|
||
setTimeout(() => {
|
||
this.delayload = true;
|
||
uni.hideLoading();
|
||
}, 1000)
|
||
},
|
||
data() {
|
||
return {
|
||
value: new Date(),
|
||
CircleData: CircleData,
|
||
ProductRateData: {},
|
||
TrendData: [],
|
||
CardData: [],
|
||
isRank: true,
|
||
canvas2d: this.$config.ISCANVAS2D,
|
||
delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
|
||
//饼图数据
|
||
status1: 0,
|
||
status2: 0,
|
||
status3: 0,
|
||
status4: 0,
|
||
status5: 0,
|
||
status6: 0,
|
||
status7: 0,
|
||
status8: 0,
|
||
status9: 0,
|
||
status10: 0,
|
||
status11: 0,
|
||
status12: 0,
|
||
status13: 0,
|
||
//卡片数据
|
||
dayAddedPo: 0,
|
||
dayAddedPwo: 0,
|
||
dayAddedReport: 0,
|
||
dayAvgQltyRate: 0,
|
||
//折线图数据
|
||
data: [
|
||
0, 0, 0, 0, 0, 0, 0,
|
||
],
|
||
finishValue: 0,
|
||
defectValue: 0,
|
||
}
|
||
},
|
||
methods: {
|
||
reset() {
|
||
this.status1 = 0;
|
||
this.status2 = 0;
|
||
this.status3 = 0;
|
||
this.status4 = 0;
|
||
this.status5 = 0;
|
||
this.status6 = 0;
|
||
this.status7 = 0;
|
||
this.status8 = 0;
|
||
this.status9 = 0;
|
||
this.status10 = 0;
|
||
this.status11 = 0;
|
||
this.status12 = 0;
|
||
this.status13 = 0;
|
||
this.dayAddedPo = 0;
|
||
this.dayAddedPwo = 0;
|
||
this.dayAddedReport = 0;
|
||
this.data = [0, 0, 0, 0, 0, 0, 0];
|
||
},
|
||
getTime() {
|
||
var year = this.value.getFullYear() // 年
|
||
var month = this.value.getMonth() + 1 < 10 ? "0" + (this.value.getMonth() + 1) : this.value.getMonth() + 1;
|
||
var day = this.value.getDate() < 10 ? "0" + this.value.getDate() : this.value.getDate();
|
||
var currentTime = year + '-' + month + '-' + day;
|
||
return currentTime;
|
||
},
|
||
async getStatus() {
|
||
this.reset();
|
||
await getPwoStatus().then((resp) => {
|
||
let data = resp.data;
|
||
this.status1 = data.status1 ? data.status1 : 0;
|
||
this.status2 = data.status2 ? data.status2 : 0;
|
||
this.status3 = data.status3 ? data.status3 : 0;
|
||
this.status4 = data.status4 ? data.status4 : 0;
|
||
this.status5 = data.status5 ? data.status5 : 0;
|
||
this.status6 = data.status6 ? data.status6 : 0;
|
||
this.status7 = data.status7 ? data.status7 : 0;
|
||
this.status8 = data.status8 ? data.status8 : 0;
|
||
this.status9 = data.status9 ? data.status9 : 0;
|
||
this.status10 = data.status10 ? data.status10 : 0;
|
||
this.status11 = data.status11 ? data.status11 : 0;
|
||
this.status12 = data.status12 ? data.status12 : 0;
|
||
this.status13 = data.status13 ? data.status13 : 0;
|
||
});
|
||
this.getBarData();
|
||
},
|
||
getBarData() {
|
||
this.ProductRateData = {
|
||
"series": [{
|
||
"name": "计划中",
|
||
"data": this.status1,
|
||
"color": "#2fc25b"
|
||
},
|
||
{
|
||
"name": "已生成作业",
|
||
"data": this.status2,
|
||
"color": "#facc14"
|
||
},
|
||
{
|
||
"name": "已投料",
|
||
"data": this.status3,
|
||
"color": "#f04864"
|
||
},
|
||
{
|
||
"name": "已领料",
|
||
"data": this.status4,
|
||
"color": "#8543e0"
|
||
},
|
||
{
|
||
"name": "已开工",
|
||
"data": this.status5,
|
||
"color": "#51c2d5"
|
||
},
|
||
{
|
||
"name": "暂停",
|
||
"data": this.status6,
|
||
"color": "#C8AB7E"
|
||
}, {
|
||
"name": "已完成",
|
||
"data": this.status7,
|
||
"color": "#81A1C6"
|
||
}, {
|
||
"name": "已领料",
|
||
"data": this.status8,
|
||
"color": "#C185BB"
|
||
}, {
|
||
"name": "结案",
|
||
"data": this.status9,
|
||
"color": "#4BA2FB"
|
||
}, {
|
||
"name": "取消",
|
||
"data": this.status1,
|
||
"color": "#98AFA7"
|
||
}, {
|
||
"name": "待入库",
|
||
"data": this.status10,
|
||
"color": "#9DD86E"
|
||
}, {
|
||
"name": "待转出",
|
||
"data": this.status11,
|
||
"color": "#DE68C4"
|
||
}, {
|
||
"name": "已转出",
|
||
"data": this.status12,
|
||
"color": "#BF2A39"
|
||
}, {
|
||
"name": "其他",
|
||
"data": this.status13,
|
||
"color": "#266186"
|
||
},
|
||
]
|
||
}
|
||
console.log(this.ProductRateData)
|
||
},
|
||
async getReport() {
|
||
await getWeekReport().then(async res => {
|
||
var now = new Date();
|
||
var today = now.getDay();
|
||
//获取当前时间所在的周一的日期
|
||
const startOfWeek = new Date(
|
||
now.getFullYear(),
|
||
now.getMonth(),
|
||
now.getDate() - (today === 0 ? 6 : today - 1)
|
||
);
|
||
// 当前周的结束日
|
||
const endOfWeek = new Date(
|
||
startOfWeek.getTime() + 7 * 24 * 60 * 60 * 1000
|
||
);
|
||
//将所有属于当前周的数据都存入新的数组里
|
||
const dataThisWeek = res.data
|
||
.filter((item) => {
|
||
const date = new Date(item.createTime);
|
||
return date >= startOfWeek && date < endOfWeek;
|
||
})
|
||
.map((item) => {
|
||
// 获取星期几，值为 0（周日）到 6（周六）
|
||
const dayOfWeek = new Date(item.createTime).getDay();
|
||
// 将数字转换为中文星期表示
|
||
const dayOfWeekStr = [0, 1, 2, 3, 4, 5, 6][dayOfWeek];
|
||
// 将星期几加入原始数据中
|
||
return {
|
||
...item,
|
||
dayOfWeek: dayOfWeekStr
|
||
};
|
||
});
|
||
for (var i = 0; i < dataThisWeek.length; i++) {
|
||
switch (dataThisWeek[i].dayOfWeek) {
|
||
case 0:
|
||
this.data[6] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 1:
|
||
this.data[0] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 2:
|
||
this.data[1] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 3:
|
||
this.data[2] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 4:
|
||
this.data[3] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 5:
|
||
this.data[4] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
case 6:
|
||
this.data[5] += dataThisWeek[i].reportNumber;
|
||
break;
|
||
default:
|
||
this.reset();
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
this.getLineData();
|
||
},
|
||
getLineData() {
|
||
// 获取坐标轴刻度最大值
|
||
const maxVal = Number(Math.max(...this.data));
|
||
this.TrendData = {
|
||
"categories": [
|
||
"周一",
|
||
"周二",
|
||
"周三",
|
||
"周四",
|
||
"周五",
|
||
"周六",
|
||
"周日"
|
||
],
|
||
"series": [{
|
||
"name": "报工产量",
|
||
"data": this.data,
|
||
"type": "line",
|
||
"style": "curve",
|
||
"addPoint": true,
|
||
"color": "#DF297D",
|
||
"unit": ""
|
||
}],
|
||
"yAxis": {
|
||
"calibration": true,
|
||
"position": "left",
|
||
"min": 0,
|
||
"max": maxVal,
|
||
"title": "产量",
|
||
"titleFontSize": 12,
|
||
"unit": "",
|
||
"tofix": 0
|
||
},
|
||
"targetAdd": "9%"
|
||
}
|
||
},
|
||
async getNum() {
|
||
this.reset();
|
||
getProduceReport().then((resp) => {
|
||
let data = resp.data;
|
||
this.dayAddedPo = data.todayAddedPo;
|
||
this.dayAddedPwo = data.todayAddedPwo;
|
||
this.dayAddedReport = data.todayAddedReport;
|
||
});
|
||
const currentDate = new Date();
|
||
let endTime = this.getTime(currentDate);
|
||
//获取过去30天
|
||
const oldDate = new Date();
|
||
oldDate.setDate(currentDate.getDate() - 30);
|
||
let startTime = this.getTime(oldDate);
|
||
|
||
await reportRate({
|
||
mesPwoReportType: '2',
|
||
queryStartTime: startTime,
|
||
queryEndTime: endTime,
|
||
}).then((result) => {
|
||
console.log(result);
|
||
this.dayAvgQltyRate = result.data;
|
||
});
|
||
// //列出订单数量
|
||
// listPo().then(res => {
|
||
// for (var i = 0; i < res.rows.length; i++) {
|
||
// if (this.getTime() == (res.rows[i].createTime === undefined ? '' : res.rows[i]
|
||
// .createTime.slice(0, 10))) {
|
||
// this.dayAddedPo++;
|
||
|
||
// }
|
||
// }
|
||
// });
|
||
// //列出报工数量
|
||
// listReport().then(res => {
|
||
// for (var i = 0; i < res.rows.length; i++) {
|
||
// if (this.getTime() == (res.rows[i].createTime === undefined ? '' : res.rows[i]
|
||
// .createTime.slice(0, 10))) {
|
||
// this.dayAddedReport++;
|
||
// }
|
||
// }
|
||
// });
|
||
this.getCardData();
|
||
},
|
||
getCardData() {
|
||
//卡片赋值
|
||
this.CardData = [{
|
||
"kind": 4,
|
||
"background": ["#0081ff", "#1cbbb4"],
|
||
"content": [{
|
||
"text": "当日新增生产订单",
|
||
"value": "",
|
||
"colortext": "#fff",
|
||
"colorvalue": "",
|
||
"size": "24rpx"
|
||
},
|
||
{
|
||
"text": "",
|
||
"value": this.dayAddedPo,
|
||
"colortext": "",
|
||
"colorvalue": "#fff",
|
||
"size": "44rpx"
|
||
},
|
||
]
|
||
},
|
||
{
|
||
"kind": 4,
|
||
"background": ["#0081ff", "#1cbbb4"],
|
||
"content": [{
|
||
"text": "当日新增生产工单",
|
||
"value": "",
|
||
"colortext": "#fff",
|
||
"colorvalue": "",
|
||
"size": "24rpx"
|
||
},
|
||
{
|
||
"text": "",
|
||
"value": this.dayAddedPwo,
|
||
"colortext": "",
|
||
"colorvalue": "#fff",
|
||
"size": "44rpx"
|
||
},
|
||
]
|
||
},
|
||
{
|
||
"kind": 4,
|
||
"background": ["#0081ff", "#1cbbb4"],
|
||
"content": [{
|
||
"text": "当日报工次数",
|
||
"value": "",
|
||
"colortext": "#fff",
|
||
"colorvalue": "",
|
||
"size": "24rpx"
|
||
},
|
||
{
|
||
"text": "",
|
||
"value": this.dayAddedReport,
|
||
"colortext": "",
|
||
"colorvalue": "#fff",
|
||
"size": "44rpx"
|
||
},
|
||
]
|
||
}, {
|
||
"kind": 4,
|
||
"background": ["#0081ff", "#1cbbb4"],
|
||
"content": [{
|
||
"text": "当日平均质量合格率",
|
||
"value": "",
|
||
"colortext": "#fff",
|
||
"colorvalue": "",
|
||
"size": "24rpx"
|
||
},
|
||
{
|
||
"text": "",
|
||
"value": this.dayAvgQltyRate,
|
||
"colortext": "",
|
||
"colorvalue": "#fff",
|
||
"size": "44rpx"
|
||
},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
async getRate() {
|
||
this.finishValue = 0;
|
||
this.defectValue = 0;
|
||
//当前日期
|
||
// const currentDate = this.getTime();
|
||
let endTime = this.getTime();
|
||
const oldDate = this.value;
|
||
oldDate.setDate(this.value.getDate() - 30);
|
||
const year = oldDate.getFullYear();
|
||
const month = String(oldDate.getMonth() + 1).padStart(2, '0');
|
||
const day = String(oldDate.getDate()).padStart(2, '0');
|
||
let startTime = `${year}-${month}-${day}`;
|
||
|
||
await reportRate({
|
||
mesPwoReportType: '3',
|
||
queryStartTime: startTime,
|
||
queryEndTime: endTime,
|
||
}).then((result) => {
|
||
this.finishValue = result.data;
|
||
});
|
||
|
||
await reportRate({
|
||
mesPwoReportType: '2',
|
||
queryStartTime: startTime,
|
||
queryEndTime: endTime,
|
||
}).then((result) => {
|
||
this.defectValue = result.data;
|
||
});
|
||
|
||
this.getCircleData();
|
||
},
|
||
getCircleData() {
|
||
const data1 = this.finishValue.toFixed(0) * 0.01;
|
||
const data2 = this.defectValue.toFixed(0) * 0.01;
|
||
this.CircleData = [{
|
||
"series": [{
|
||
"color": "#fff",
|
||
"data": data1,
|
||
"precent": this.finishValue.toFixed(0) + "%",
|
||
"index": 0,
|
||
"legendShape": "circle",
|
||
"name": "工单完成率",
|
||
"pointShape": "circle",
|
||
"show": true,
|
||
"type": "arcbar",
|
||
// "value": "12786",
|
||
"backgroundColor": "#00AEF9"
|
||
}]
|
||
},
|
||
{
|
||
"series": [{
|
||
"color": "#fff",
|
||
"data": data2,
|
||
"precent": this.defectValue.toFixed(0) + "%",
|
||
"index": 0,
|
||
"legendShape": "circle",
|
||
"name": "工单良品率",
|
||
"pointShape": "circle",
|
||
"show": true,
|
||
"type": "arcbar",
|
||
// "value": "1096",
|
||
"backgroundColor": "#F55676"
|
||
}]
|
||
}
|
||
|
||
]
|
||
console.log(this.CircleData)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.data_body {
|
||
height: 100%;
|
||
text-align: center;
|
||
color: #333333;
|
||
background-repeat: repeat;
|
||
background-color: #ffffff;
|
||
|
||
.friend_operate {
|
||
padding: 30rpx 20rpx;
|
||
|
||
.title {
|
||
text-align: left;
|
||
margin-bottom: 30rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
.view_item {
|
||
padding: 30rpx 20rpx;
|
||
padding-top: 30px;
|
||
|
||
.title {
|
||
text-align: left;
|
||
margin-bottom: 30rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
.progress_circle {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
// height: 450rpx;
|
||
|
||
.progress_block {
|
||
width: 45%;
|
||
border-radius: 20rpx;
|
||
height: 180rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.name {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 10rpx;
|
||
max-width: 144rpx;
|
||
}
|
||
|
||
.value {
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
position: absolute;
|
||
top: 64rpx;
|
||
left: 10rpx;
|
||
max-width: 144rpx;
|
||
}
|
||
|
||
.circle {
|
||
position: absolute;
|
||
right: 8rpx;
|
||
top: 16rpx;
|
||
}
|
||
|
||
.arcbar {
|
||
position: absolute;
|
||
right: -4rpx;
|
||
top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.block_0 {
|
||
background-color: #0FC3FF;
|
||
}
|
||
|
||
.block_1 {
|
||
background-color: #FF6B8B;
|
||
}
|
||
|
||
.block_2 {
|
||
background-color: #FFCB1D;
|
||
}
|
||
|
||
.block_3 {
|
||
background-color: #3BDCAA;
|
||
}
|
||
}
|
||
}
|
||
|
||
.planet {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: #333;
|
||
position: absolute;
|
||
left: -13px;
|
||
bottom: -26px;
|
||
overflow: hidden;
|
||
opacity: 0.5;
|
||
z-index: 0;
|
||
}
|
||
|
||
.planet_shadow {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
height: 100%;
|
||
width: 100%;
|
||
top: -40%;
|
||
right: -10%;
|
||
border: 35px solid rgba(0, 0, 0, .15);
|
||
}
|
||
|
||
.crater1,
|
||
.crater2,
|
||
.crater3,
|
||
.crater4 {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, .3);
|
||
box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
|
||
}
|
||
|
||
.crater1 {
|
||
width: 20px;
|
||
height: 20px;
|
||
left: 25%;
|
||
top: 20%;
|
||
}
|
||
|
||
.crater2 {
|
||
width: 10px;
|
||
height: 10px;
|
||
left: 50%;
|
||
top: 60%;
|
||
}
|
||
|
||
.crater3 {
|
||
width: 15px;
|
||
height: 15px;
|
||
left: 30%;
|
||
top: 65%;
|
||
}
|
||
|
||
.crater4 {
|
||
width: 15px;
|
||
height: 15px;
|
||
left: 60%;
|
||
top: 35%;
|
||
}
|
||
|
||
.star {
|
||
display: block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: #FFF;
|
||
top: 10px;
|
||
left: 50px;
|
||
position: relative;
|
||
transform-origin: 100% 0;
|
||
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
|
||
opacity: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.star0 {
|
||
animation: star-ani 4s infinite ease-out;
|
||
}
|
||
|
||
.star1 {
|
||
animation: star-ani 5s infinite ease-out;
|
||
}
|
||
|
||
.star2 {
|
||
animation: star-ani 6s infinite ease-out;
|
||
}
|
||
|
||
.star3 {
|
||
animation: star-ani 7s infinite ease-out;
|
||
}
|
||
|
||
.star:after {
|
||
content: '';
|
||
display: block;
|
||
top: 20px;
|
||
left: 60px;
|
||
border: 0px solid #fff;
|
||
border-width: 0px 90px 2px 90px;
|
||
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
|
||
transform: rotate(-45deg) translate3d(1px, 3px, 0);
|
||
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
|
||
transform-origin: 0% 100%;
|
||
animation: shooting-ani 100s infinite ease-out;
|
||
}
|
||
|
||
.pink {
|
||
top: 10px;
|
||
left: 60px;
|
||
background: #ff5a99;
|
||
animation-delay: 5s;
|
||
-webkit-animation-delay: 5s;
|
||
-moz-animation-delay: 5s;
|
||
}
|
||
|
||
.pink:after {
|
||
border-color: transparent transparent transparent #ff5a99;
|
||
animation-delay: 5s;
|
||
-webkit-animation-delay: 5s;
|
||
-moz-animation-delay: 5s;
|
||
}
|
||
|
||
.blue {
|
||
top: 15px;
|
||
left: 70px;
|
||
background: cyan;
|
||
animation-delay: 7s;
|
||
-webkit-animation-delay: 7s;
|
||
-moz-animation-delay: 7s;
|
||
}
|
||
|
||
.blue:after {
|
||
border-color: 'transpareanimation-delay: 12s';
|
||
-webkit-animation-delay: 7s;
|
||
-moz-animation-delay: 7s;
|
||
animation-delay: 7s;
|
||
}
|
||
|
||
.yellow {
|
||
top: 0px;
|
||
left: 80px;
|
||
background: #ffcd5c;
|
||
animation-delay: 5.8s;
|
||
}
|
||
|
||
.yellow:after {
|
||
border-color: transparent transparent transparent #ffcd5c;
|
||
animation-delay: 5.8s;
|
||
}
|
||
|
||
@keyframes star-ani {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||
-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||
-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||
-webkit-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||
-moz-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||
}
|
||
|
||
100% {
|
||
opacity: 0;
|
||
transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||
-webkit-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||
-moz-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||
}
|
||
}
|
||
</style> |