init project
This commit is contained in:
tao
791
pages/index.vue
Normal file
791
pages/index.vue
Normal file
@@ -0,0 +1,791 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user