81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
||
<view style="background-color: white; height: 100vh">
|
||
<u-navbar :is-back="false" title="核验" :custom-back="goPageFn"></u-navbar>
|
||
<view class="icon-box">
|
||
<view class="center-box">
|
||
<u-icon name="checkbox-mark" color="white" class="icon" size="100"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view style="text-align: center; margin-top: 100rpx; font-size: 40rpx"
|
||
>核验成功！</view
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
name: "666",
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
console.log(e, "e--");
|
||
},
|
||
created() {},
|
||
methods: {
|
||
goPageFn() {
|
||
/* uni.redirectTo({
|
||
url: "/pages/my/BackSchool/BackSchool",
|
||
}); */
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
submitFn() {},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 基础信息
|
||
|
||
.icon-box {
|
||
// border-radius: 50%;
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 300rpx;
|
||
.center-box {
|
||
// border: 1px solid blue;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: #16bf32;
|
||
.icon {
|
||
background-color: #16bf32;
|
||
}
|
||
box-shadow: 0 0 0 20px #b9d8b7; /* 初始阴影样式 */
|
||
animation: shadowBreathe 2s ease-in-out infinite; /* 应用动画 */
|
||
}
|
||
}
|
||
@keyframes shadowBreathe {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 0 #c5e7c3; /* 阴影在起始和结束时较淡 */
|
||
}
|
||
// 25%,
|
||
// 75% {
|
||
// box-shadow: 0 0 0 20px #e1fddf; /* 阴影在中间点时更明显 */
|
||
// }
|
||
50% {
|
||
box-shadow: 0 0 0 25px #e1fddf; /* 阴影在中间点时更明显 */
|
||
}
|
||
}
|
||
</style>
|