| @ -0,0 +1,187 @@ | |||||
| <template> | |||||
| <view class="starting"> | |||||
| <view class="bg"> | |||||
| <image src="@/static/starting/banner.png" mode="widthFix"></image> | |||||
| </view> | |||||
| <view class="user-info"> | |||||
| <view class="top"> | |||||
| <view class="current-balance">Current balance</view> | |||||
| <view class="money"> | |||||
| <view class="number">0.00</view> | |||||
| <view class="unit">USD</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="todoy-info"> | |||||
| <view class="todoy-info-main"> | |||||
| <view class="today-info-l"> | |||||
| <view class="today-income">Today Income</view> | |||||
| <div class="money"> | |||||
| <text class="number">0.00</text> | |||||
| <text class="unit">USD</text> | |||||
| </div> | |||||
| </view> | |||||
| <div class="booking-info-r"> | |||||
| <view class="booking-income">Booking completed!</view> | |||||
| <div class="booking-data"> | |||||
| <text class="number">0/40</text> | |||||
| </div> | |||||
| </div> | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn"> | |||||
| <view class="submit">Auto-match</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="steps"> | |||||
| <view class="steps-title">The steps</view> | |||||
| <view class="steps-content"> | |||||
| <view>1. Click the "Auto-match" button and follow the instructions to complete the task.</view> | |||||
| <view>2. After completing the task, you can settle the commission to the balance.</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'Starting', | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .starting { | |||||
| height: 100vh; | |||||
| .bg { | |||||
| border-bottom-left-radius: 60% 60rpx; | |||||
| border-bottom-right-radius: 60% 60rpx; | |||||
| overflow: hidden; | |||||
| image { | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| .user-info { | |||||
| position: relative; | |||||
| z-index: 999; | |||||
| width: 90%; | |||||
| margin: -120rpx auto 0rpx auto; | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| box-shadow: aqua 0.5px 0.5px 5px 0px; | |||||
| .top { | |||||
| box-sizing: border-box; | |||||
| padding: 0rpx 15rpx; | |||||
| .current-balance { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 60rpx; | |||||
| color: #8e8e98; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .money { | |||||
| display: flex; | |||||
| color: rgb(0, 208, 234); | |||||
| font-size: 50rpx; | |||||
| font-weight: bold; | |||||
| .number {} | |||||
| .unit { | |||||
| margin-left: 20rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .todoy-info { | |||||
| box-sizing: border-box; | |||||
| padding: 0rpx 20rpx; | |||||
| height: 140rpx; | |||||
| .todoy-info-main { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| height: 100%; | |||||
| background-color: rgba(0, 208, 234, 0.1); | |||||
| border-radius: 20rpx; | |||||
| margin: 20rpx 0rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 0rpx 30rpx; | |||||
| .today-info-l , | |||||
| .booking-info-r{ | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| width: 50%; | |||||
| font-size: 28rpx; | |||||
| .today-income, | |||||
| .booking-income{ | |||||
| color: #8e8e98; | |||||
| } | |||||
| .money, | |||||
| .booking-data { | |||||
| font-weight: bold; | |||||
| margin-top: 10rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn{ | |||||
| padding: 20rpx; | |||||
| .submit{ | |||||
| background: rgb(0, 208, 234); | |||||
| color: white; | |||||
| height: 80rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| border-radius: 20rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .steps{ | |||||
| width: 90%; | |||||
| margin: 0rpx auto; | |||||
| padding-top: 80rpx; | |||||
| .steps-title{ | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .steps-content{ | |||||
| color: #8e8e98; | |||||
| font-size: 30rpx; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||