<template>
<view style="height: 100%;padding-top: 100rpx;">
<toMenu :pathName="pathName" :isTabbar="isTabbar"></toMenu>
<view class="titleHead">充电详情</view>
<view>
<!-- 头部 -->
<view class="content">
<view class="top-pile">
<view>IMEI</view>
<view>{{confirmObj.imei}}</view>
</view>
<view ref="animArean" class="donghua" id="renderjs-view">
<view class="charing-animate" v-if="guntStatus == 'Charging'"></view>
<view class="animatitle" v-if="guntStatus == 'Charging'" style="z-index: 1000;">
<view class="chongdianzhong">
</view>
<view style="color: #FFFFFF;">{{getPileName(guntStatus) || ''}}</view>
</view>
<view class="animatitle" v-else-if="guntStatus == 'Faulted'">
<view class="guzhang">
</view>
<view style="color: #F85A64;">{{getPileName(guntStatus) || ''}}</view>
</view>
<view class="animatitle" v-else>
<view class="daiji">
</view>
<view style="color: #1677FF;">{{getPileName(guntStatus) || ''}}</view>
</view>
</view>
<view class="shuzhi">
<view class="shu-item">
<view>{{currentData.chargeDurationStr||'- -'}}</view>
<view>充电时长</view>
</view>
<view class="shu-item">
<view>{{currentData.chargeEnergy ||'- -'}}</view>
<view>充电量</view>
</view>
<view class="shu-item">
<view>{{currentData.voltage || '- -'}}</view>
<view>充电电压</view>
</view>
<view class="shu-item">
<view>{{currentData.current || '- -'}}</view>
<view>充电电流</view>
</view>
</view>
<view class="money">
<view>实时费用(元)</view>
<view>{{currentData.chargeTotalAmount || 0}}</view>
</view>
<!-- 预约开着 频率是单次 充电状态 -->
<view class="bottom-btn">
<view @click="callPhone">
<view class="call-phone"></view>
<view>联系桩主</view>
</view>
<view class="btnss" v-if="guntStatus == 'Charging'">
<my-button @click="offCharge">停止充电</my-button>
</view>
<view class="btn" v-else>停止充电</view>
</view>
</view>
</view>
<!-- 未能查询到设置结果提示框 -->
<u-modal v-model="errorShow" :show-title="false" :show-confirm-button="false" :show-cancel-button="false"
border-radius="30" :mask-close-able="true">
<view class="sucesses">
<view class="succ-img">充电完成</view>
<view>
您已完成充电，本次充电金额{{totalAmount || 0}}元，请及时支付给桩主，完成后请及时更新订单状态（充电完成后，请在15分钟内，请尽快驶离，谢谢）
</view>
<view @click="errorShow=false">我知道了</view>
</view>
</u-modal>
<!-- <load v-if="loadingShow" :title="loadTitle"></load> -->
<animateLoading v-if="loadingShow"></animateLoading>
<!-- 蚂蚁森林能量小球 -->
<!-- <movable-view direction="all" class="showdows"
style="width: 102rpx;height: 102rpx;position: absolute;top: 550rpx;left: 50rpx;z-index: 10000;border-radius: 50%;overflow: hidden;"
v-if="currentOrder.greenEnergy">
<view class="mayiBall">
<view class="counts">{{currentData.greenEnergyPer}}</view>
<view class="ball">
<view class="bolangA" :style="{top:`${energyHeight}px`}"></view>
<view class="bolangB" :style="{top:`${energyHeight}px`}"></view>
</view>
<view class="bsg"></view>
</view>
</movable-view> -->
</view>
</template>
<script>
import load from '../../component/loading.vue';
import myButton from '../../component/my-button.vue';
import animateLoading from '../../component/animateLoading.vue';
import toMenu from '../../component/top-menu.vue';
import {
websocketUrl,
getChargeOrderById
} from '@/api/index.js'
let ani = null;
export default {
components: {
load,
myButton,
animateLoading,
toMenu
},
data() {
return {
pathName: '',
isTabbar: false,
energyHeight: -150, //-150~-200之间 控制高度 -150在最下面 -200在最上面
energyCount: 0,
aliShow: false,
item: {
id: 'lotties',
desc: 'Django自动播放,低端设备降级',
autoplay: true,
path: 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json',
placeholder: '',
optimize: 'true',
repeatCount: -1,
assetsPath: 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
},
checked: false,
reservationLoading: false,
errorShow: false,
nickName: '',
chargePointId: '',
currentPile: {},
timers: null,
timer: null,
inited: false,
errorFlag: false,
pileStatus: '',
currentOrder: {},
errFlag: false,
jsonShow: '',
oldStatus: '',
switchFlag: false,
loadingShow: false,
loadTitle: '',
confirmObj: {},
pileObj: {},
money: '',
orderNo: '',
webSocketFlag: false,
webSocketTimer: null,
guntStatus: '',
currentData: {
greenEnergy: false, // 是否显示能量
greenEnergyPer: '', // 能量百分比
energyVal: 0, // 能量值
chargeDuration: 0,
chargeEnergy: 0,
voltage: 0,
current: 0,
chargeDurationStr: '- -',
chargeTotalAmount: 0, // 实时费用
},
imei: '',
totalAmount: 0,
websocket: null,
}
},
onShow() {
// this.init()
if (this.guntStatus == 'Faulted') { //故障
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/fault.json'
} else if (this.guntStatus == 'Charging') { //充电
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/charging_new.json'
} else { //其他状态
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
}
var app = getApp();
console.log(app.globalData.timer);
if (app.globalData.timer) {
clearTimeout(app.globalData.timer)
app.globalData.timer = null;
}
console.log('onShow')
console.log(this.confirmObj)
this.chargePointId = this.confirmObj.chargePointId
console.log('onShow')
this.connectWebSocket() // 开始长连接
},
onLoad(options) {
this.confirmObj = this.$store.state.confirmObj
console.log('rrrrr')
console.log(this.confirmObj)
console.log('rrrrr')
},
onReady() {
// var lottieContext = my.createLottieContext('myLottie');
// lottieContext.play()
},
onHide() {
this.closeWebsocket()
clearTimeout(this.webSocketTimer)
this.webSocketTimer = null;
},
onUnload() {
this.closeWebsocket()
clearTimeout(this.webSocketTimer)
this.webSocketTimer = null;
},
computed: {
},
watch: {
webSocketFlag: { // 监听长连接有没有成功连接
handler(newVal, oldVal) {
if (newVal == true) {
this.heartStart()
} else {
// this.restConnect()
}
},
}
},
methods: {
// 关闭websocket连接
closeWebsocket() {
let that = this;
this.websocket.onclose = function(event) {
console.log('已经关闭长连接')
};
},
// webSocket 发送心跳
heartStart() {
console.log('准备开始发送心跳')
let that = this;
if (this.webSocketFlag) {
this.websocket.send(JSON.stringify({
heartbeat: 1,
}));
that.webSocketTimer = setTimeout(() => {
clearTimeout(that.webSocketTimer)
that.webSocketTimer = null;
that.heartStart()
}, 30000)
} else {
if (that.webSocketTimer != null) {
clearTimeout(that.webSocketTimer)
that.webSocketTimer = null;
}
}
},
/*开始充电*/
onCharge() {
console.log('开始充电')
if (this.$store.state.confirmFlag == true) {
let that = this;
that.loadingShow = true;
that.loadTitle = '开始充电中...'
let count = 0;
if (that.confirmObj.chargeType == '计量停止') {
count = Number(that.confirmObj.count) * 1000
} else {
count = Number(that.confirmObj.count) * 60
}
this.websocket.send(JSON.stringify({
connectorId: 1,
action: "RemoteStartTransaction",
messageType: 2,
payload: {
isShare: 1,
chargeMethod: that.confirmObj.chargeType == '计量停止' ? 3 : 4, // 3按电量 4 按时间
value: count
}
}));
console.log('充电指令下发成功')
}
},
/*停止充电*/
offCharge() {
let that = this;
console.log('停止充电')
that.loadingShow = true;
that.loadTitle = '停止充电中...'
this.websocket.send(JSON.stringify({
connectorId: 1,
action: "RemoteStopTransaction",
messageType: 2,
payload: {}
}));
console.log('停止充电指令下发成功')
},
/**拨打电话*/
callPhone() {
let that = this;
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
window.webkit.messageHandlers.app_callPhone.postMessage(that.confirmObj.contactPhone);
} else if (isAndroid) {
window.jsBridge.app_callPhone(that.confirmObj.contactPhone);
}
},
/*重新连接*/
restConnect() {
console.log('开始重新连接了')
let that = this;
that.webSocketFlag = false;
clearTimeout(that.webSocketTimer)
that.webSocketTimer = null;
that.closeWebsocket()
let timer = setTimeout(() => {
that.connectWebSocket()
clearTimeout(timer)
timer = null;
console.log('长连接断开了，开始重新连接')
}, 5000)
},
/*长连接*/
connectWebSocket() {
let that = this;
console.log('开始长连接')
let urls = websocketUrl + this.chargePointId + '?Authorization=' + that.$store.state.accessToken +
'&AccessType=app'
console.log(urls)
console.log('开始长连接')
// 开始长连接
this.websocket = new WebSocket(
urls
);
// 打开长连接
this.websocket.onopen = function(event) {
console.log('已经打开连接');
};
// 监听错误连接
this.websocket.onerror = function(error) {
console.error('连接失败: ', error);
};
// 处理接受的消息
this.websocket.onmessage = (event) => {
let resp = JSON.parse(event.data);
console.log('收到桩发来的信息')
console.log(resp)
if (resp.action == 'ConnectedSuccess') { // 连接成功标识
that.webSocketFlag = true;
if (that.confirmObj.prepareCharge) {
console.log('vvvvvvvv')
console.log(that.confirmObj)
console.log('vvvvvvvv')
let timer = setTimeout(() => {
clearTimeout(timer)
timer = null;
that.onCharge()
}, 1000)
}
}
if (resp.action == 'RemoteStartTransaction') { // 开始充电失败
if (resp.success == 1) { // 失败
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'RemoteStopTransaction') { // 停止充电失败
if (resp.success == 1) { // 失败
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StartTransaction') { //开始充电成功
if (resp.success == 0) { // 充电成功
this.loadingShow = false
this.chargingFlag = true;
uni.showToast({
title: '已开始充电',
icon:'none'
})
this.$store.commit('setConfirmFlag', false)
uni.setStorageSync('chargingFlag', true)
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/charging_new.json'
} else {
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StopTransaction') { //停止充电成功
if (resp.success == 0) { // 充电成功
this.loadingShow = false
this.chargingFlag = false;
uni.showToast({
title: '已停止充电',
icon:'none'
})
this.guntStatus = 'Preparing'; // 主动把枪的状态改成车枪连接
uni.setStorageSync('chargingFlag', false)
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
this.getDetail(resp.payload.chargePointOrderNo)
} else {
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StatusNotification') { // 上报桩状态
if (resp.success == 0) {
this.guntStatus = resp.payload.connectorStatusCode // 枪状态
if (this.guntStatus == 'Charging') {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/charging_new.json'
} else if (this.guntStatus == 'Faulted') {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/fault.json'
} else {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
}
}
}
if (resp.action == 'MeterValues') {
if (resp.success == 0) {
this.currentData = resp.payload
// 格式化充电时间
if (this.currentData.chargeDuration == 0) {
this.currentData.chargeDurationStr = '- -'
} else if (this.currentData.chargeDuration > 0) {
this.currentData.chargeDurationStr = Math.floor(this.currentData.chargeDuration /
60)
}
// 格式化蚂蚁能量
if (this.currentData.greenEnergyPer != '') {
let perCount = parseFloat(this.currentData.greenEnergyPer)
let baseHeight = perCount == 100 ? 168 : 165
this.energyHeight = -(perCount * 0.35 + baseHeight) //计算小球波浪的高度
}
}
}
};
return
// 监听长连接接收消息事件
uni.onSocketMessage(function(res) {
console.log('收到服务器内容：' + res.data);
});
return
// 监听长连接消息回调
uni.onSocketMessage((res) => {
console.log('3333333')
console.log('onSocketMessage 接收到了消息', JSON.parse(res.data));
let resp = JSON.parse(res.data)
if (resp.action == 'ConnectedSuccess') { // 连接成功标识
that.webSocketFlag = true;
if (that.confirmObj.prepareCharge) {
console.log('vvvvvvvv')
console.log(that.confirmObj)
console.log('vvvvvvvv')
let timer = setTimeout(() => {
clearTimeout(timer)
timer = null;
that.onCharge()
}, 1000)
}
}
if (resp.action == 'RemoteStartTransaction') { // 开始充电失败
if (resp.success == 1) { // 失败
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'RemoteStopTransaction') { // 停止充电失败
if (resp.success == 1) { // 失败
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StartTransaction') { //开始充电成功
if (resp.success == 0) { // 充电成功
this.loadingShow = false
this.chargingFlag = true;
uni.showToast({
title: '已开始充电',
icon:'none'
})
this.$store.commit('setConfirmFlag', false)
uni.setStorageSync('chargingFlag', true)
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/charging_new.json'
} else {
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StopTransaction') { //停止充电成功
if (resp.success == 0) { // 充电成功
this.loadingShow = false
this.chargingFlag = false;
uni.showToast({
title: '已停止充电',
icon:'none'
})
this.guntStatus = 'Preparing'; // 主动把枪的状态改成车枪连接
uni.setStorageSync('chargingFlag', false)
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
this.getDetail(resp.payload.chargePointOrderNo)
} else {
uni.showToast({
title: resp.message,
icon:'none'
})
this.loadingShow = false
}
}
if (resp.action == 'StatusNotification') { // 上报桩状态
if (resp.success == 0) {
this.guntStatus = resp.payload.connectorStatusCode // 枪状态
if (this.guntStatus == 'Charging') {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/charging_new.json'
} else if (this.guntStatus == 'Faulted') {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/fault.json'
} else {
this.item.path = 'https://img.cdn.wxzhida.cn/zd-ali-app/standby.json'
}
}
}
if (resp.action == 'MeterValues') {
if (resp.success == 0) {
this.currentData = resp.payload
// 格式化充电时间
if (this.currentData.chargeDuration == 0) {
this.currentData.chargeDurationStr = '- -'
} else if (this.currentData.chargeDuration > 0) {
this.currentData.chargeDurationStr = Math.floor(this.currentData.chargeDuration /
60)
}
// 格式化蚂蚁能量
if (this.currentData.greenEnergyPer != '') {
let perCount = parseFloat(this.currentData.greenEnergyPer)
let baseHeight = perCount == 100 ? 168 : 165
this.energyHeight = -(perCount * 0.35 + baseHeight) //计算小球波浪的高度
}
}
}
});
// 连接错误时的事件监听器
uni.onSocketError(function(res) {
console.log('onSocketError' + JSON.parse(res.data))
that.restConnect()
});
// 连接关闭时的事件监听器
uni.onSocketClose(function(res) {
console.log('onSocketClose' + JSON.parse(res.data))
that.webSocketFlag = false;
that.restConnect()
})
},
/*桩状态字段返回*/
getPileName(value) {
switch (value) {
case 'Available':
return '空闲';
case 'Preparing':
return '车枪连接';
case 'Charging':
return '充电中';
case 'SuspendedEVSE':
return 'EVSE暂停';
case 'SuspendedEV':
return 'EV暂停';
case 'Finishing':
return '结束充电';
case 'Reserved':
return '预约占用';
case 'Unavailable':
return '空闲(不可用)';
case 'Faulted':
return '故障';
case 'Unlock':
return '电子锁打开';
case 'ConnectorPullOut':
return '枪头已拔下';
case 'offline':
return '离线';
case 'online':
return '在线';
case 'Disconnect':
return '枪车断开连接';
case 'Timing':
return '定时中';
case 'Occupied':
return '预约中';
default:
return ''
}
},
/*查询订单*/
getDetail(orderNo) {
let that = this;
getChargeOrderById({
chargePointOrderNo: orderNo,
queryTime: that.$moment().format('YYYY-MM'),
}).then(res => {
that.totalAmount = res.data.payment.chargeAmount;
that.errorShow = true;
})
}
}
}
</script>
<style lang="scss" scoped>
.titleHead {
width: 100%;
height: 66rpx;
font-size: 48rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2D3748;
line-height: 66rpx;
margin: 0rpx 50rpx 0;
}
.content {
width: 100%;
height: 100%;
padding: 0rpx 50rpx 0;
box-sizing: border-box;
.top-pile {
width: 100%;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 400;
color: #2D3748;
display: flex;
>view {
&:nth-child(1) {
margin-right: 40rpx;
}
}
}
.donghua {
width: 500rpx;
height: 496rpx;
background-size: 100% 100%;
margin: 38rpx auto 0;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.animatitle {
width: 260rpx;
height: 110rpx;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>view {
&:nth-child(1) {}
&:nth-child(2) {
color: #05B6B6;
}
}
}
}
.shuzhi {
display: flex;
justify-content: space-between;
width: 630rpx;
padding: 0 36rpx;
margin-top: 20rpx;
.shu-item {
display: flex;
flex-direction: column;
align-items: center;
>view {
&:nth-child(1) {
font-size: 46rpx;
margin-bottom: 6rpx;
font-weight: 600;
}
&:nth-child(2) {
font-size: 24rpx;
}
}
}
}
.money {
margin-top: 46rpx;
width: 100%;
height: 176rpx;
border-radius: 60rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx #EDECED;
display: flex;
justify-content: center;
align-items: center;
>view {
&:nth-child(1) {
font-size: 24rpx;
font-weight: 400;
color: #2D3748;
}
&:nth-child(2) {
font-size: 46rpx;
font-weight: 600;
color: #2D3748;
margin-left: 30rpx;
}
}
}
.bottom-btn {
display: flex;
justify-content: space-between;
margin-top: 204rpx;
>view {
&:nth-child(1) {
display: flex;
font-size: 24rpx;
font-weight: 400;
width: 330rpx;
color: #2D3748;
align-items: center;
justify-content: center;
}
}
.call-phone {
width: 40rpx;
height: 40rpx;
background: url('../../static/callPhone.png');
background-size: 100% 100%;
margin-right: 16rpx;
}
}
.btn {
width: 330rpx;
height: 110rpx;
border-radius: 40rpx;
font-size: 28rpx;
background: #657189;
color: #FFFFFF;
text-align: center;
line-height: 110rpx;
}
.btnss {
width: 330rpx;
height: 110rpx;
}
.card {
width: 650rpx;
height: 332rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx #EDECED;
border-radius: 60rpx;
margin: 48rpx auto 0;
padding: 42rpx 46rpx 40rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2D3748;
>view {
display: flex;
justify-content: space-between;
}
}
}
.sucesses {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0 40rpx 0;
.succ-img {
width: 186rpx;
font-size: 32rpx;
font-weight: 800;
// background: url('../../static/fail.png');
background-size: 100% 100%;
}
>view {
&:nth-child(2) {
font-size: 18rpx;
font-family: PingFangSC-Medium, PingFang SC;
text-align: center;
width: 100%;
font-weight: 400;
color: #000000;
margin-top: 20rpx;
padding: 0 20rpx 20rpx;
}
&:nth-child(3) {
width: 480rpx;
height: 100rpx;
background: #1677FF;
border-radius: 55rpx;
color: #FFFFFF;
font-size: 28rpx;
text-align: center;
line-height: 100rpx;
margin: 40rpx auto 0;
}
}
}
.item {
width: 500rpx;
height: 496rpx;
/* opacity: 0.5; */
}
.daiji {
background: url('../../static/daiji.png');
background-size: 100% 100%;
width: 60rpx;
height: 60rpx;
}
.guzhang {
width: 58rpx;
height: 55rpx;
background: url('../../static/guzhang.png');
background-size: 100% 100%;
}
.chongdianzhong {
width: 58rpx;
height: 68rpx;
background: url('../../static/chongdianzhong.png');
background-size: 100% 100%;
}
.mayiBall {
// position: fixed;
// top: 580rpx;
// left: 50rpx;
width: 102rpx;
height: 102rpx;
border-radius: 50%;
box-shadow: 0rpx -1rpx 20rpx -1rpx rgba(51, 204, 0, .5);
z-index: 10;
}
.bsg {
//内阴影
width: 102rpx;
height: 102rpx;
border-radius: 50%;
overflow: hidden;
// background: url('../../static/1.png');
// background-size: 100% 100%;
box-shadow: 0rpx -1rpx 20rpx 2rpx rgba(51, 204, 0, .5) inset;
position: absolute;
top: 0;
left: 0;
}
.ball {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: -1;
background-color: rgba(149, 230, 26, 1) //最下面的颜色 最深
}
.bolangA {
width: 200px;
height: 200px;
background: rgba(172, 237, 18, 1);
position: absolute;
left: -80px;
// top: -150px; //-150~-200之间 控制高度 -150在最下面 -200在最上面
border-radius: 50px;
z-index: -1;
animation: tui_rotate 6s linear infinite;
// z-index: 2
}
.bolangB {
width: 200px;
height: 200px;
background: rgba(208, 255, 64, 1); //最上面的颜色 最浅
position: absolute;
left: -80px;
// top: -150px; //-150~-200之间 控制高度 -150在最下面 -200在最上面
border-radius: 80px;
animation: tui_rotate 10s linear infinite;
z-index: 2
}
.counts {
color: #138D00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
@keyframes tui_rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.charing-animate {
width: 400rpx;
height: 400rpx;
border-radius: 50%;
position: relative;
border-radius: 42% 58% 62% 40%;
background-color: rgba(54, 207, 201, .7);
animation: rotates 5s reverse linear infinite;
// background: radial-gradient(circle, #36CFC9 0%, #67f5ee 100%);
// color: #ffffff;
// text-align: center;
// line-height: 400rpx;
// font-size: 48rpx;
// box-shadow: 0px 2px 10px 10px rgba(57, 221, 197, 0.25);
// animation: fadenum 3s ease-in-out infinite;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 400rpx;
height: 400rpx;
background-color: rgba(54, 207, 201, 1);
border-radius: 32% 48% 52% 40%;
animation: rotates 5s infinite linear;
}
}
@keyframes tui_rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes rotates {
50% {
border-radius: 80% 70% 58% 70%;
}
100% {
transform: rotate(-720deg);
}
}
</style>
扫一扫
1420
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
