|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- 标题 -->
|
|
|
<view class="tips">
|
|
|
<view class="title">选择您的孩子</view>
|
|
|
- <button class="detail" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-show="!show">点击获取您的孩子信息</button>
|
|
|
+ <button class="detail" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-show="!show">点击获取您的孩子信息</button>
|
|
|
</view>
|
|
|
|
|
|
<!-- 孩子选择界面 -->
|
|
|
@@ -17,7 +17,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+ <!-- 动画 -->
|
|
|
+ <view class="ocean"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -52,27 +53,6 @@
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- // //获取用户信息事件
|
|
|
- // async getUserInfo() {
|
|
|
- // console.log(uni.getStorageSync('parentinfo'));
|
|
|
- // if (!uni.getStorageSync('parentinfo')) {
|
|
|
- // await uni.getUserProfile({
|
|
|
- // desc: '获取您的基本信息',
|
|
|
- // success: infoRes => {
|
|
|
- // if (infoRes.errMsg === 'getUserProfile:ok') {
|
|
|
- // this.updateParentInfo(infoRes.userInfo)
|
|
|
- // this.show = true
|
|
|
- // } else {
|
|
|
- // uni.$showMsg('获取不到您的基本信息!')
|
|
|
- // }
|
|
|
- // },
|
|
|
- // fail: err => {
|
|
|
- // console.log('getUserInfo-error', JSON.stringify(err))
|
|
|
- // }
|
|
|
- // });
|
|
|
- // }
|
|
|
- // },
|
|
|
-
|
|
|
//判断用户基本信息是否存在
|
|
|
hasParentInfo(){
|
|
|
if(uni.getStorageSync('parentdetail'))
|
|
|
@@ -112,22 +92,34 @@
|
|
|
|
|
|
.tips {
|
|
|
width: 100%;
|
|
|
- padding-top: 180rpx;
|
|
|
- padding-left: 80rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- margin-bottom: 80rpx;
|
|
|
+ z-index: 99;
|
|
|
|
|
|
.title {
|
|
|
+ padding-top: 180rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
line-height: 70rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
font-weight: bold;
|
|
|
- font-size: 50rpx;
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #4169E1;
|
|
|
+ background-image: linear-gradient(to right, #506AE7, #87CEFA);
|
|
|
+ background-clip: text;//裁剪成文字的前景色
|
|
|
+ color: transparent;//文字颜色变成透明
|
|
|
+ text-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
.detail{
|
|
|
- line-height: 70rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
font-weight: bold;
|
|
|
- font-size: 50rpx;
|
|
|
- margin-top: 100rpx;
|
|
|
+ font-size: 45rpx;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ position: relative;
|
|
|
+ margin: 180rpx auto;//relative相对定位居中
|
|
|
+ border: none;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(to right, #506AE7, #87CEFA);
|
|
|
+ box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
}
|
|
|
.children-item{
|
|
|
@@ -137,26 +129,29 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;//元素换行
|
|
|
+
|
|
|
|
|
|
.item{
|
|
|
- margin: 10px;
|
|
|
- padding: 10px;
|
|
|
+ margin: 10rpx 20rpx 20rpx 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #FFFFFF;
|
|
|
- border-radius: 10px;
|
|
|
- width: 140px;
|
|
|
- height: 160px;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ width: 280rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ z-index: 99;
|
|
|
|
|
|
.item-text{
|
|
|
margin: -7rpx 0 20rpx 20rpx;
|
|
|
width: 100%;
|
|
|
line-height: 40rpx;
|
|
|
font-weight: bold;
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 35rpx;
|
|
|
color: #696969;
|
|
|
+
|
|
|
}
|
|
|
.avatar-box{
|
|
|
.item-avatar{
|
|
|
@@ -168,4 +163,54 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .ocean {
|
|
|
+ display: flex;
|
|
|
+ margin-top: -600rpx;
|
|
|
+ width: 1800rpx;
|
|
|
+ height: 1800rpx;
|
|
|
+ background-color: #4169E1;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 870rpx;
|
|
|
+ width: 1600rpx;
|
|
|
+ height: 1600rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ border-radius: 43%;
|
|
|
+ background-color: #fafafa;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 6s linear infinite;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-radius: 46%;
|
|
|
+ background-color: #fafafa;
|
|
|
+ opacity: 0.7;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 10s linear -5s infinite;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ border-radius: 40%;
|
|
|
+ background-color: #fafafa;
|
|
|
+ opacity: 0.5;
|
|
|
+ transform: translate(-50%, -70%) rotate(0);
|
|
|
+ animation: rotate 10s linear -5s infinite;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate {
|
|
|
+ 50% {
|
|
|
+ transform: translate(-50%, -73%) rotate(180deg);
|
|
|
+ } 100% {
|
|
|
+ transform: translate(-50%, -70%) rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
KELECHUAN