upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
1121
subpackages/media/edits/edits.js
Normal file
1121
subpackages/media/edits/edits.js
Normal file
File diff suppressed because it is too large
Load diff
8
subpackages/media/edits/edits.json
Normal file
8
subpackages/media/edits/edits.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"navigationBarTitleText": "文字动态",
|
||||
"navigationBarBackgroundColor": "#667eea",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f8f9fa",
|
||||
"disableScroll": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
132
subpackages/media/edits/edits.wxml
Normal file
132
subpackages/media/edits/edits.wxml
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!-- 导航栏 -->
|
||||
<view class="custom-nav" style="height: {{totalNavBarHeight}}px; padding-top: {{statusBarHeight}}px;">
|
||||
<view class="nav-content">
|
||||
<image class="back-btn-img" src="/images/back_arrow.svg" bindtap="onNavBack"></image>
|
||||
<view class="nav-title">文字动态</view>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 外部容器框 -->
|
||||
<view class="outer-container">
|
||||
<!-- 标题区域 -->
|
||||
<view class="title-area">
|
||||
<text class="page-title">我的动态</text>
|
||||
<button
|
||||
class="publish-btn {{!canPublish ? 'disabled' : ''}}"
|
||||
bindtap="publishDynamic"
|
||||
>发布</button>
|
||||
</view>
|
||||
|
||||
<!-- 文字编辑区域 -->
|
||||
<view class="text-area">
|
||||
<textarea
|
||||
class="content-textarea"
|
||||
id="contentInput"
|
||||
bindinput="onTextInput"
|
||||
placeholder="What's happening..."
|
||||
placeholder-class="placeholder-gray"
|
||||
maxlength="120"
|
||||
value="{{inputText}}"
|
||||
/>
|
||||
<view class="text-count">{{textLength}}/120</view>
|
||||
</view>
|
||||
|
||||
<!-- 已选图片显示 -->
|
||||
<view wx:if="{{selectedImage}}" class="image-wrapper">
|
||||
<image
|
||||
src="{{selectedImage}}"
|
||||
mode="widthFix"
|
||||
class="selected-image"
|
||||
bindtap="previewImage"
|
||||
/>
|
||||
<view class="delete-icon" bindtap="removeImage">×</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-actions">
|
||||
<!-- 功能区 -->
|
||||
<view class="features-area">
|
||||
<view class="visibility-area" bindtap="showVisibilityModal">
|
||||
<image src="/images/User.svg" class="visibility-icon"></image>
|
||||
<text class="feature-text">{{visibility === '' ? '谁可以看' :
|
||||
(visibility === 'public' ? '公开' : '私密')}}</text>
|
||||
</view>
|
||||
<view wx:if="{{!selectedImage}}" class="upload-btn" bindtap="showImageAction">
|
||||
<image src="/images/Image.svg" class="upload-icon"></image>
|
||||
<text class="feature-text">上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 当前位置 -->
|
||||
<view class="location-area" bindtap="chooseLocation">
|
||||
<image src="/images/loca.svg" class="location-icon"></image>
|
||||
<text class="location-text">{{currentLocation || '未选择位置'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 返回弹窗遮罩 -->
|
||||
<view class="quit-mask" wx:if="{{showQuitModal}}">
|
||||
<view class="quit-modal">
|
||||
<view class="quit-modal-content">退出后此次编辑将不会保留，是否退出？</view>
|
||||
<view class="quit-modal-btns">
|
||||
<button class="modal-btn" bindtap="quitEdit">退出</button>
|
||||
<button class="modal-btn" bindtap="cancelQuit">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片选择弹窗-->
|
||||
<view class="camera-action-sheet {{showImageAction ? 'show' : ''}}">
|
||||
<view class="action-sheet-mask" bindtap="hideImageAction"></view>
|
||||
<view class="action-sheet-content">
|
||||
<view class="action-sheet-item primary" bindtap="takePhoto">
|
||||
<text class="action-text">拍摄</text>
|
||||
</view>
|
||||
<view class="action-sheet-divider-thin"></view>
|
||||
<view class="action-sheet-item primary" bindtap="chooseImageFromAlbum">
|
||||
<text class="action-text">从相册选择</text>
|
||||
</view>
|
||||
<view class="action-sheet-divider"></view>
|
||||
<view class="action-sheet-item cancel" bindtap="hideImageAction">
|
||||
<text class="action-text">取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 审核失败弹窗 -->
|
||||
<view class="audit-modal" wx:if="{{showAuditModal}}">
|
||||
<view class="modal-mask" bindtap="hideAuditModal"></view>
|
||||
<view class="modal-content">
|
||||
<view class="modal-title">发布失败</view>
|
||||
<rich-text class="modal-content-text" nodes="{{auditReason}}"></rich-text>
|
||||
<view class="modal-btn" bindtap="hideAuditModal">我知道了</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 定位失败弹窗 -->
|
||||
<view class="audit-modal" wx:if="{{showLocationErrorModal}}">
|
||||
<view class="modal-mask" bindtap="hideLocationErrorModal"></view>
|
||||
<view class="modal-content">
|
||||
<view class="modal-title">定位失败</view>
|
||||
<view class="modal-content-text">未找到你的定位，需要开启定位权限，请重试。</view>
|
||||
<view class="modal-btns">
|
||||
<view class="modal-btn cancel-btn" bindtap="hideLocationErrorModal">取消</view>
|
||||
<view class="modal-btn confirm-btn" bindtap="retryLocation">重试</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading 动态背景 -->
|
||||
<view class="loading-background" wx:if="{{isLoading}}">
|
||||
<view class="loading-animated-bg">
|
||||
<view class="loading-wave"></view>
|
||||
<view class="loading-wave"></view>
|
||||
<view class="loading-wave"></view>
|
||||
</view>
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
685
subpackages/media/edits/edits.wxss
Normal file
685
subpackages/media/edits/edits.wxss
Normal file
|
|
@ -0,0 +1,685 @@
|
|||
/* 图片选择弹窗样式 */
|
||||
.camera-action-sheet {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
transform: none !important;
|
||||
-webkit-transform: none !important;
|
||||
}
|
||||
|
||||
.camera-action-sheet.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-sheet-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.action-sheet-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: #222;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.action-sheet-item {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action-sheet-item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-sheet-item.primary {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-sheet-item.cancel {
|
||||
background: #222;
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-divider {
|
||||
height: 8px;
|
||||
background-color: #111;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.action-sheet-divider-thin {
|
||||
height: 2px;
|
||||
background-color: #111;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 页面背景样式 */
|
||||
page {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 确保在不同尺寸设备上的适配 */
|
||||
@media (min-width: 768px) {
|
||||
.custom-nav {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.outer-container {
|
||||
margin: 30rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部导航栏样式 */
|
||||
.custom-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
border-bottom: 1px solid #333;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 返回弹窗样式 */
|
||||
.quit-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.quit-modal {
|
||||
background: #333;
|
||||
padding: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.quit-modal-content {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.quit-modal-btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
width: 30%;
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 外部容器样式 */
|
||||
.outer-container {
|
||||
margin: 20rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #111;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #555;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 标题区域样式 */
|
||||
.title-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 20rpx;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* 发布按钮样式 */
|
||||
.publish-btn {
|
||||
background: #3399F2;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
height: 56rpx;
|
||||
padding: 0 60rpx;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
/* 文字区域样式 */
|
||||
.text-area {
|
||||
margin: 20rpx 0;
|
||||
padding: 20rpx;
|
||||
background-color: #111;
|
||||
border-radius: 12rpx;
|
||||
border: 1px solid #555;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.placeholder-gray {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.text-count {
|
||||
text-align: right;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 图片区域样式 */
|
||||
.image-area {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx dashed #555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 50%;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.selected-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 500rpx;
|
||||
border-radius: 8rpx;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
background-color: #ff4500;
|
||||
color: white;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 位置区域样式 */
|
||||
.location-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 10rpx;
|
||||
background-color: #111;
|
||||
border-radius: 8rpx;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.location-address {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.choose-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 谁可以看区域样式 */
|
||||
.visibility-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background-color: #111;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 40rpx 0 20rpx 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 功能区样式 */
|
||||
.features-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 可见性图标样式 */
|
||||
.visibility-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 上传图标样式 */
|
||||
.upload-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 地址图标样式 */
|
||||
.location-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 位置文本样式 */
|
||||
.location-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.features-area .visibility-area {
|
||||
margin: 0 20rpx 0 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.features-area .upload-btn {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* 导航内容容器 */
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 返回按钮图片样式 */
|
||||
.back-btn-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 导航占位元素 */
|
||||
.nav-placeholder {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* 导航标题样式 */
|
||||
.nav-title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 审核失败弹窗样式 */
|
||||
.audit-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(5rpx);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
width: 700rpx;
|
||||
background: #111;
|
||||
border-radius: 24rpx;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
|
||||
transform: scale(1);
|
||||
animation: modalShow 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes modalShow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20rpx);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部装饰条 */
|
||||
.modal-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: linear-gradient(90deg, #ff4757, #ff6b81);
|
||||
border-radius: 3rpx 3rpx 0 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* 标题图标 */
|
||||
.modal-title::before {
|
||||
content: '⚠️';
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.modal-content-text {
|
||||
font-size: 32rpx;
|
||||
color: #ddd;
|
||||
line-height: 2.2;
|
||||
margin-bottom: 50rpx;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: linear-gradient(135deg, #007aff, #0056cc);
|
||||
color: #fff;
|
||||
border-radius: 45rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 定位失败弹窗按钮容器 */
|
||||
.modal-btns {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.modal-btns .modal-btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-btns .cancel-btn {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-btns .cancel-btn:active {
|
||||
background: #555;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-btns .confirm-btn {
|
||||
background: linear-gradient(135deg, #007aff, #0056cc);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Loading 动态背景样式 */
|
||||
.loading-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 动态背景层 */
|
||||
.loading-animated-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.loading-wave {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(51, 153, 242, 0.2) 0%, transparent 70%);
|
||||
animation: waveAnimation 4s ease-in-out infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loading-wave:nth-child(1) {
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
animation-delay: 0s;
|
||||
background: radial-gradient(circle, rgba(51, 153, 242, 0.25) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.loading-wave:nth-child(2) {
|
||||
top: -30%;
|
||||
left: -30%;
|
||||
animation-delay: 1.3s;
|
||||
background: radial-gradient(circle, rgba(0, 122, 255, 0.2) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.loading-wave:nth-child(3) {
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
animation-delay: 2.6s;
|
||||
background: radial-gradient(circle, rgba(51, 153, 242, 0.15) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
@keyframes waveAnimation {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translate(10%, 10%) scale(1.1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading 内容区域 */
|
||||
.loading-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
/* Loading 旋转动画 */
|
||||
.loading-spinner {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: #3399F2;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading 文字样式 */
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue