style(weakNetwork): 调整弱网页面样式和图标
更新弱网页面的图标大小、颜色和布局,添加预约码图标 修改按钮背景色和文字样式,优化视觉呈现
Showing
1 changed file
with
8 additions
and
4 deletions
| ... | @@ -2,13 +2,14 @@ | ... | @@ -2,13 +2,14 @@ |
| 2 | <view class="weak-network-page"> | 2 | <view class="weak-network-page"> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view class="icon-wrapper"> | 4 | <view class="icon-wrapper"> |
| 5 | - <IconFont name="mask-close" size="120" color="#ccc" /> | 5 | + <IconFont name="mask-close" size="60" color="#A67939" /> |
| 6 | </view> | 6 | </view> |
| 7 | <view class="title">网络连接不畅</view> | 7 | <view class="title">网络连接不畅</view> |
| 8 | <view class="desc">当前网络信号较弱,已自动为您切换至离线模式</view> | 8 | <view class="desc">当前网络信号较弱,已自动为您切换至离线模式</view> |
| 9 | 9 | ||
| 10 | <view class="offline-entry" @tap="toOfflineCode"> | 10 | <view class="offline-entry" @tap="toOfflineCode"> |
| 11 | <view class="circle-btn"> | 11 | <view class="circle-btn"> |
| 12 | + <image :src="icon_invite" style="width: 60rpx; height: 60rpx; margin-bottom: 16rpx;" /> | ||
| 12 | <text>预约码</text> | 13 | <text>预约码</text> |
| 13 | </view> | 14 | </view> |
| 14 | </view> | 15 | </view> |
| ... | @@ -25,6 +26,8 @@ import Taro from '@tarojs/taro' | ... | @@ -25,6 +26,8 @@ import Taro from '@tarojs/taro' |
| 25 | import { IconFont } from '@nutui/icons-vue-taro' | 26 | import { IconFont } from '@nutui/icons-vue-taro' |
| 26 | import { useGo } from '@/hooks/useGo' | 27 | import { useGo } from '@/hooks/useGo' |
| 27 | 28 | ||
| 29 | +import icon_invite from '@/assets/images/二维码@2x2.png' | ||
| 30 | + | ||
| 28 | const go = useGo(); | 31 | const go = useGo(); |
| 29 | 32 | ||
| 30 | const toOfflineCode = () => { | 33 | const toOfflineCode = () => { |
| ... | @@ -78,15 +81,16 @@ const retry = () => { | ... | @@ -78,15 +81,16 @@ const retry = () => { |
| 78 | width: 240rpx; | 81 | width: 240rpx; |
| 79 | height: 240rpx; | 82 | height: 240rpx; |
| 80 | border-radius: 50%; | 83 | border-radius: 50%; |
| 81 | - background: linear-gradient(135deg, #A67939 0%, #C69C5C 100%); | 84 | + background: #FFFFFF; |
| 82 | display: flex; | 85 | display: flex; |
| 86 | + flex-direction: column; | ||
| 83 | align-items: center; | 87 | align-items: center; |
| 84 | justify-content: center; | 88 | justify-content: center; |
| 85 | box-shadow: 0 10rpx 30rpx rgba(166, 121, 57, 0.4); | 89 | box-shadow: 0 10rpx 30rpx rgba(166, 121, 57, 0.4); |
| 86 | 90 | ||
| 87 | text { | 91 | text { |
| 88 | - color: #fff; | 92 | + color: #A67939; |
| 89 | - font-size: 40rpx; | 93 | + font-size: 32rpx; |
| 90 | font-weight: bold; | 94 | font-weight: bold; |
| 91 | letter-spacing: 2rpx; | 95 | letter-spacing: 2rpx; |
| 92 | } | 96 | } | ... | ... |
-
Please register or login to post a comment