代码
<template>
<view class="container">
<!-- 轨迹 -->
<view class="line">
<!-- 滑动点 -->
<view class="slideCircle"></view>
<!-- 中心圆点 -->
<!-- <view class="cen"></view> -->
</view>
<view class="logo">
<image
src="../../static/image/logo.png"
style="width: 100%; height: 100%"
mode="scaleToFill"
/>
</view>
<view class="logo-text">标题</view>
</view>
</template>
<script setup lang="ts">
import getData from './index'
getData()
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
position: relative;
}
.line {
width: 80px;
height: 80px;
border: 1px solid $uni-border-color;
border-radius: 50%;
position: absolute;
top: 30%;
animation: myRotate 1.6s linear infinite;
}
.slideCircle {
width: 10px;
height: 10px;
border-radius: 50%;
background: darkcyan;
position: absolute;
top: 6px;
left: 6px;
}
.logo {
width: 60px;
height: 60px;
border-radius: 50%;
margin: auto;
position: absolute;
overflow: hidden;
top: calc(30% + 10px);
}
.logo-text {
position: absolute;
top: calc(30% + 100px);
}
.cen {
width: 20px;
height: 20px;
border-radius: 50%;
background: chocolate;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes myRotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
效果
使用场景
微信小程序入口文件