Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fb315868 1 parent 3b7561c6

style(AdPage): 调整分享按钮位置并优化样式 

将分享按钮从左上角移至右上角，避免与系统胶囊按钮重叠
同时调整按钮内边距，移除多余外边距，提升视觉一致性
Inline Side-by-side
Showing 1 changed file with 289 additions and 292 deletions
/* 广告页面样式 */
.ad-page {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.ad-background {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
z-index: 1;
}
.share-button-container {
position: absolute;
top: 30rpx;
left: 30rpx;
z-index: 10;
position: absolute;
top: 30rpx; /* 避开胶囊按钮 */
right: 30rpx;
z-index: 10;
}
.share-button {
padding: 1rpx 24rpx;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
border-radius: 32rpx;
font-size: 24rpx;
font-weight: 500;
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: rgba(0, 0, 0, 0.8);
}
margin: 0;
padding: 10rpx 24rpx;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
border-radius: 32rpx;
font-size: 24rpx;
font-weight: 500;
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: rgba(0, 0, 0, 0.8);
}
}
/* 网络错误弹窗样式 */
.network-error-popup {
position: fixed;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4rpx);
-webkit-backdrop-filter: blur(4rpx);
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4rpx);
-webkit-backdrop-filter: blur(4rpx);
}
.popup-content {
position: relative;
width: 600rpx;
background: white;
border-radius: 24rpx;
padding: 60rpx 40rpx 40rpx;
text-align: center;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
.popup-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
}
.popup-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.popup-message {
font-size: 28rpx;
color: #666;
line-height: 1.5;
margin-bottom: 30rpx;
}
.popup-content {
position: relative;
width: 600rpx;
background: white;
border-radius: 24rpx;
padding: 60rpx 40rpx 40rpx;
.popup-steps {
text-align: left;
margin-bottom: 40rpx;
.step-item {
font-size: 26rpx;
color: #888;
line-height: 1.6;
margin-bottom: 10rpx;
padding-left: 20rpx;
}
}
.popup-buttons {
display: flex;
gap: 20rpx;
.popup-button {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
.popup-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
}
.popup-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.popup-message {
font-size: 28rpx;
color: #666;
line-height: 1.5;
margin-bottom: 30rpx;
}
.popup-steps {
text-align: left;
margin-bottom: 40rpx;
.step-item {
font-size: 26rpx;
color: #888;
line-height: 1.6;
margin-bottom: 10rpx;
padding-left: 20rpx;
}
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 500;
transition: all 0.3s ease;
&.cancel {
background: #f5f5f5;
color: #666;
&:active {
background: #e8e8e8;
}
}
.popup-buttons {
display: flex;
gap: 20rpx;
.popup-button {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 500;
transition: all 0.3s ease;
&.cancel {
background: #f5f5f5;
color: #666;
&:active {
background: #e8e8e8;
}
}
&.confirm {
background: #ff6b35;
color: white;
&:active {
background: #e55a2b;
}
}
}
&.confirm {
background: #ff6b35;
color: white;
&:active {
background: #e55a2b;
}
}
}
}
}
}
.loading-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 20;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 20;
}
.loading-text {
font-size: 32rpx;
color: #666;
font-weight: 500;
}
font-size: 32rpx;
color: #666;
font-weight: 500;
}
// 骨架屏样式
.skeleton-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
// 骨架屏样式
.skeleton-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
.skeleton-image {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.skeleton-image {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.skeleton-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: shimmer 1.5s infinite;
}
.skeleton-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 1.5s infinite;
}
.skeleton-text {
position: relative;
z-index: 2;
text-align: center;
color: #666;
.skeleton-text {
position: relative;
z-index: 2;
text-align: center;
color: #666;
}
.loading-title {
font-size: 36rpx;
font-weight: 600;
margin-bottom: 16rpx;
opacity: 0.8;
}
.loading-subtitle {
font-size: 28rpx;
opacity: 0.6;
animation: pulse 2s infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.loading-title {
font-size: 36rpx;
font-weight: 600;
margin-bottom: 16rpx;
opacity: 0.8;
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.loading-subtitle {
font-size: 28rpx;
@keyframes pulse {
0%,
100% {
opacity: 0.6;
animation: pulse 2s infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
50% {
opacity: 0.3;
}
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
// 手动刷新样式
.manual-refresh-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f9fa;
z-index: 2;
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 0.3;
}
}
.refresh-content {
text-align: center;
padding: 60rpx 40rpx;
background: white;
border-radius: 16rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
margin: 0 40rpx;
max-width: 600rpx;
}
// 手动刷新样式
.manual-refresh-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f9fa;
z-index: 2;
}
.refresh-icon {
font-size: 80rpx;
margin-bottom: 24rpx;
}
.refresh-content {
text-align: center;
padding: 60rpx 40rpx;
background: white;
border-radius: 16rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
margin: 0 40rpx;
max-width: 600rpx;
}
.refresh-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.refresh-icon {
font-size: 80rpx;
margin-bottom: 24rpx;
}
.refresh-subtitle {
font-size: 28rpx;
color: #666;
margin-bottom: 40rpx;
line-height: 1.5;
}
.refresh-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.refresh-steps {
text-align: left;
background: #f8f9fa;
border-radius: 12rpx;
padding: 32rpx;
margin-top: 20rpx;
}
.refresh-subtitle {
font-size: 28rpx;
color: #666;
margin-bottom: 40rpx;
line-height: 1.5;
}
.step-item {
font-size: 30rpx;
color: #333;
line-height: 1.6;
margin-bottom: 16rpx;
.refresh-steps {
text-align: left;
background: #f8f9fa;
border-radius: 12rpx;
padding: 32rpx;
margin-top: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
.step-item {
font-size: 30rpx;
color: #333;
line-height: 1.6;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
// 错误提示样式
.error-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
z-index: 1;
}
// 错误提示样式
.error-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
z-index: 1;
}
.error-text {
font-size: 32rpx;
color: #999;
margin-bottom: 40rpx;
}
.error-text {
font-size: 32rpx;
color: #999;
margin-bottom: 40rpx;
}
.retry-button {
padding: 20rpx 40rpx;
background-color: #007aff;
color: white;
border-radius: 8rpx;
font-size: 28rpx;
cursor: pointer;
.retry-button {
padding: 20rpx 40rpx;
background-color: #007aff;
color: white;
border-radius: 8rpx;
font-size: 28rpx;
cursor: pointer;
&:active {
background-color: #0056cc;
}
&:active {
background-color: #0056cc;
}
}
......