185 lines
3.7 KiB
Plaintext
185 lines
3.7 KiB
Plaintext
/**index.wxss**/
|
||
page {
|
||
height: 100vh;
|
||
background-color: #f6f6f6;
|
||
}
|
||
|
||
.page-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.page-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scrollarea {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding-bottom: 100rpx; /* 为底部导航栏留出空间 */
|
||
}
|
||
|
||
/* 轮播图样式 */
|
||
.swiper-container {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin: 0; /* 移除所有边距 */
|
||
padding: 0; /* 确保没有内边距 */
|
||
}
|
||
|
||
.banner {
|
||
width: 100%;
|
||
height: 400rpx; /* 确保高度固定 */
|
||
border-radius: 0; /* 移除圆角，轮播图现在是文章内的一部分 */
|
||
overflow: hidden; /* 确保内容不溢出 */
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
|
||
}
|
||
|
||
/* 轮播图加载状态 */
|
||
.banner-loading {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f0f0f0;
|
||
border-radius: 0; /* 移除圆角，与轮播图样式保持一致 */
|
||
}
|
||
|
||
.loading-indicator {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 6rpx solid #e0e0e0;
|
||
border-top: 6rpx solid #1296db;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.banner-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.3s ease;
|
||
/* 以下属性可能在WebView模式下不完全支持，但不会导致显示错误 */
|
||
will-change: transform;
|
||
transform: translateZ(0);
|
||
backface-visibility: hidden;
|
||
}
|
||
|
||
.banner-title {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
||
color: white;
|
||
padding: 30rpx;
|
||
font-size: 32rpx;
|
||
text-shadow: 0 1rpx 3rpx rgba(0,0,0,0.5);
|
||
font-weight: 600;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 120rpx; /* 为标题提供足够空间 */
|
||
}
|
||
|
||
.container {
|
||
padding: 20rpx;
|
||
padding-bottom: 50rpx; /* 为底部导航栏增加额外的空间 */
|
||
}
|
||
|
||
/* 文章部分样式 */
|
||
.article-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch; /* 在WebView模式下提供流畅滚动 */
|
||
}
|
||
|
||
.article-section {
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 30rpx;
|
||
margin: 20rpx 0 50rpx; /* 增加底部外边距 */
|
||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.article-header {
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.article-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.article-content {
|
||
font-size: 28rpx;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
margin-bottom: 20rpx; /* 添加底部间距 */
|
||
letter-spacing: 0.05em; /* 添加字间距 */
|
||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 设置更适合阅读的字体 */
|
||
}
|
||
|
||
.article-content rich-text {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 段落样式 */
|
||
.article-content rich-text p {
|
||
margin-bottom: 15rpx;
|
||
text-indent: 2em; /* 添加首行缩进2个字符 */
|
||
text-align: justify; /* 文本两端对齐 */
|
||
}
|
||
|
||
/* 文章中的图片样式 */
|
||
.article-content image,
|
||
.article-content img {
|
||
width: 100%;
|
||
margin: 15rpx 0;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
display: block;
|
||
height: auto;
|
||
}
|
||
|
||
.article-image {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
margin: 15rpx 0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
/* 移除了未使用的样式 */
|
||
|
||
/* 移除了重复的文章内容样式 */
|
||
|
||
/* 移除了未使用的段落和图片状态样式 */
|
||
|
||
/* 移除了未使用的模式特定样式 */ |