You need to sign in or sign up before continuing.
Commit 4d6dd087 authored by liujiangnan's avatar liujiangnan

feat: 全功能PPT

parent caae00fd
.error-message[data-v-123e5f17]{display:flex;justify-content:center;align-items:center;height:100%;font-size:16px;color:#666}.page-buttons[data-v-123e5f17]{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;gap:10px}.arrow-button[data-v-123e5f17]{width:40px;height:40px;border-radius:50%;border:none;background-color:#409eff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.arrow-button[data-v-123e5f17]:hover{background-color:#66b1ff}.arrow-button[data-v-123e5f17]:disabled{background-color:#c0c4cc;cursor:not-allowed}.arrow[data-v-123e5f17]{border:solid white;border-width:0 2px 2px 0;display:inline-block;padding:4px}.left[data-v-123e5f17]{transform:rotate(135deg);margin-left:4px}.right[data-v-123e5f17]{transform:rotate(-45deg);margin-right:4px}
.thumbnail-container{position:fixed;bottom:-150px;left:0;right:0;height:140px;background-color:#505050e6;transition:bottom .3s ease;z-index:999}.thumbnail-container.show{bottom:0}.thumbnail-list{display:flex;overflow-x:auto;padding:10px;gap:10px;height:100%}.thumbnail-item{flex:0 0 auto;width:160px;height:120px;position:relative;cursor:pointer;transition:all .2s ease;padding:2px;border-radius:4px;background-color:transparent}.thumbnail-item img{width:100%;height:100%;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:all .2s ease}.thumbnail-item.active{background-color:#ffffff4d;transform:scale(1.05);box-shadow:0 0 10px #ffffff80}.thumbnail-item.active img{border-color:#fff}.thumbnail-item:hover:not(.active){transform:scale(1.05);background-color:#ffffff1a}.thumbnail-item .page-number{position:absolute;bottom:5px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px}.thumbnail-list::-webkit-scrollbar{height:8px}.thumbnail-list::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}.thumbnail-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.thumbnail-list::-webkit-scrollbar-thumb:hover{background:#ffffff80}.error-message[data-v-5e90ea40]{display:flex;justify-content:center;align-items:center;height:100%;font-size:16px;color:#666}.page-buttons-container[data-v-5e90ea40]{position:fixed;bottom:20px;right:20px;display:flex;gap:15px;z-index:1000}.page-button[data-v-5e90ea40]{width:50px;height:50px;background-color:#50505099;border-radius:25px;border:1px solid rgba(255,255,255,.3);color:#ffffffe6;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #00000026}.page-button[data-v-5e90ea40]:hover{background-color:#3c3c3ccc;transform:scale(1.1)}.page-button[data-v-5e90ea40]:active{transform:scale(.95)}.arrow[data-v-5e90ea40]{border:solid white;border-width:0 2px 2px 0;display:inline-block;padding:4px}.left[data-v-5e90ea40]{transform:rotate(135deg);margin-left:4px}.right[data-v-5e90ea40]{transform:rotate(-45deg);margin-right:4px}.menu-icon[data-v-5e90ea40]{width:18px;height:14px;position:relative;border-top:2px solid white;border-bottom:2px solid white}.menu-icon[data-v-5e90ea40]:before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:#fff;transform:translateY(-50%)}.thumbnail-container[data-v-5e90ea40]{position:fixed;bottom:-150px;left:0;right:0;height:140px;background-color:#505050e6;transition:bottom .3s ease;z-index:999}.thumbnail-container.show[data-v-5e90ea40]{bottom:0}.thumbnail-list[data-v-5e90ea40]{display:flex;overflow-x:auto;padding:10px;gap:10px;height:100%}.thumbnail-item[data-v-5e90ea40]{flex:0 0 auto;width:100px;height:120px;position:relative;cursor:pointer;transition:all .2s ease;padding:2px;border-radius:4px}.thumbnail-item img[data-v-5e90ea40]{width:100%;height:100%;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:all .2s ease}.thumbnail-item.active[data-v-5e90ea40]{background-color:#ffffff4d;transform:scale(1.05);box-shadow:0 0 10px #ffffff80}.thumbnail-item.active img[data-v-5e90ea40]{border-color:#fff}.thumbnail-item .page-number[data-v-5e90ea40]{position:absolute;bottom:5px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px}.thumbnail-item[data-v-5e90ea40]:hover:not(.active){transform:scale(1.05);background-color:#ffffff1a}.thumbnail-list[data-v-5e90ea40]::-webkit-scrollbar{height:8px}.thumbnail-list[data-v-5e90ea40]::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}.thumbnail-list[data-v-5e90ea40]::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.thumbnail-list[data-v-5e90ea40]::-webkit-scrollbar-thumb:hover{background:#ffffff80}
......@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="module" crossorigin src="assets/index-B3XZ3Y4E.js"></script>
<link rel="stylesheet" crossorigin href="assets/index-B3npc05E.css">
<script type="module" crossorigin src="assets/index-D6v_bxeY.js"></script>
<link rel="stylesheet" crossorigin href="assets/index-D5frsKoS.css">
</head>
<body>
<div id="app"></div>
......
This diff is collapsed.
/* 缩略图容器样式 */
.thumbnail-container {
position: fixed;
bottom: -150px;
left: 0;
right: 0;
height: 140px;
background-color: rgba(80, 80, 80, 0.9);
transition: bottom 0.3s ease;
z-index: 999;
}
.thumbnail-container.show {
bottom: 0;
}
.thumbnail-list {
display: flex;
overflow-x: auto;
padding: 10px;
gap: 10px;
height: 100%;
}
.thumbnail-item {
flex: 0 0 auto;
width: 160px;
height: 120px;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
padding: 2px;
border-radius: 4px;
background-color: transparent;
}
.thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
border: 2px solid transparent;
transition: all 0.2s ease;
}
.thumbnail-item.active {
background-color: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.thumbnail-item.active img {
border-color: #fff;
}
.thumbnail-item:hover:not(.active) {
transform: scale(1.05);
background-color: rgba(255, 255, 255, 0.1);
}
.thumbnail-item .page-number {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
}
/* 滚动条样式 */
.thumbnail-list::-webkit-scrollbar {
height: 8px;
}
.thumbnail-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.thumbnail-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.thumbnail-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment