|
.page-wrapper {
|
position: relative;
|
min-height: 100vh;
|
/* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
|
|
/* title 背景 */
|
.title {
|
text-align: center;
|
font-size: 1.5rem;
|
font-weight: bold;
|
padding: 1rem;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_title.png') center/cover no-repeat;
|
margin-bottom: 1rem;
|
}
|
.text-content {
|
margin-top: 1rem;
|
width: 80%;
|
margin-left: auto;
|
margin-right: auto;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_content.png') no-repeat center center;
|
background-size: 100% auto;
|
/* 宽度占满容器，高度自适应 */
|
position: relative;
|
z-index: 999;
|
}
|
|
/* 主内容卡片 */
|
.wifi-card {
|
margin: 1rem auto;
|
width: 90%;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_content.png') no-repeat center center;
|
background-size: 100% 100%;
|
padding: 1rem;
|
}
|
.wifi-item {
|
font-size: 15px;
|
color: #7b4b2c;
|
margin-bottom: 1rem;
|
}
|
.highlight {
|
color: #b76e00;
|
font-weight: 600;
|
}
|
|
/* 按钮样式 */
|
.wifi-buttons {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 3rem;
|
}
|
.wifi-btn {
|
width: 80%;
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/wifi_bg_button.png') no-repeat center center;
|
background-size: 100% 100%;
|
text-align: center;
|
padding: 0.6rem 0;
|
font-weight: bold;
|
margin-bottom: 0.6rem;
|
margin-top: 4rem;
|
}
|
.videos {
|
flex-direction: column;
|
text-align: center;
|
padding-top: 20rpx;
|
}
|
.videos video {
|
margin: auto;
|
}
|
.images {
|
text-align: center;
|
/* 子元素 inline/inline-block 会居中 */
|
}
|
.images img {
|
width: 100%;
|
max-height: 24rem;
|
margin: 0 auto 1rem;
|
/* 上下外边距为 0 和 1rem，左右为 auto */
|
}
|
.p-4 {
|
padding: 1rem;
|
}
|
.bg-white {
|
background-color: #ffffff;
|
}
|
.space-y-6 {
|
margin-top: 1.5rem;
|
}
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
.font-bold {
|
font-weight: 700;
|
}
|
.text-center {
|
text-align: center;
|
}
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
.text-gray-700 {
|
color: #374151;
|
}
|
.space-y-4 {
|
margin-top: 1rem;
|
}
|
.w-full {
|
width: 100%;
|
}
|
.max-h-96 {
|
max-height: 24rem;
|
/* 384px */
|
}
|
.rounded-lg {
|
border-radius: 0.5rem;
|
/* 8px */
|
}
|
.h-80 {
|
height: 80rpx
|
}
|
.h-200 {
|
height: 200rpx
|
}
|
