feat: 添加瞬间页面模拟器功能
- 在 PC 端点击瞬间链接时,弹出模拟 iPhone 16 的窗口展示内容- 添加相应的 HTML、CSS 和 JavaScript 代码实现该功能 -优化了用户体验,特别是在大屏幕上查看瞬间内容时
This commit is contained in:
@@ -8058,6 +8058,72 @@ hr {
|
||||
.panel-main__content--fixed {
|
||||
width: 480px;
|
||||
transition: width 1s;
|
||||
/* 模拟iPhone 16容器样式 */
|
||||
.iphone-simulator {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(40%, -50%);
|
||||
width: 414px; /* iPhone 16 Pro Max宽度 */
|
||||
height: 896px; /* iPhone 16 Pro Max高度 */
|
||||
padding: 40px 20px 20px 20px;
|
||||
background: url('https://cdn.jsdelivr.net/gh/listener-He/images@default/iphone-frame.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 内部浏览器视图容器 */
|
||||
.browser-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* MacBook风格的关闭按钮 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* 遮罩层 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.iphone-simulator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.iphone-simulator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 10px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: width 1s;
|
||||
/* Safari */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user