139 lines
2.6 KiB
SCSS
139 lines
2.6 KiB
SCSS
.index {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
// overflow: hidden; // 防止溢出
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: black;
|
|
// justify-content: center;
|
|
// background-image: url('../../images/iphone.jpg');
|
|
// background-size: cover; // 拉伸铺满容器
|
|
// background-position: center; // 居中
|
|
// background-repeat: no-repeat; // 不重复
|
|
|
|
.messageArr {
|
|
padding: 40px;
|
|
font-size: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.message_item_first {
|
|
color: red;
|
|
}
|
|
|
|
.message_item {}
|
|
}
|
|
|
|
|
|
.index_backImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: yellowgreen;
|
|
|
|
.index_backImg_bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.index_video {
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 400px;
|
|
height: 200px;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
background-color: aqua;
|
|
|
|
.video_js {
|
|
width: 400px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.gifImg{
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// PC 浏览器下旋转
|
|
@media (min-width: 1600px) {
|
|
.index {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 750px; // 根据标准宽度调整
|
|
// height: 1334px; // 保持竖屏比例
|
|
|
|
|
|
|
|
width: 100vw; // 使容器宽度始终填满视口
|
|
height: 100vh; // 使容器高度始终填满视口
|
|
// transform: rotate(-90deg) translate(-100vh, 0);
|
|
|
|
|
|
transform-origin: top left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
|
|
// background-image: url('../../images/iphone.jpg');
|
|
// background-size: cover; // 拉伸铺满容器
|
|
// background-position: center; // 居中
|
|
// background-repeat: no-repeat; // 不重复
|
|
// color: white;
|
|
// background-color: black;
|
|
|
|
.messageArr {
|
|
// padding: 40px;
|
|
font-size: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.message_item_first {
|
|
color: red;
|
|
}
|
|
|
|
.message_item {}
|
|
}
|
|
|
|
|
|
.index_backImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
// width: 100vw;
|
|
// height: 100vh;
|
|
background-color: yellow;
|
|
|
|
.index_backImg_bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
// object-fit: cover; // 确保图片铺满并保持宽高比
|
|
}
|
|
}
|
|
|
|
.index_video {
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 400px;
|
|
height: 200px;
|
|
|
|
.video_js {
|
|
width: 400px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
} |