Commit 3d4ea105 authored by liujiangnan's avatar liujiangnan

debug

parent a4baae66
.thumbnail-container{position:absolute;bottom:0;left:0;right:0;height:140px;transform:translateY(100%);transition:transform .3s ease;z-index:999}.thumbnail-container.show{transform:translateY(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-13144342]{display:flex;justify-content:center;align-items:center;height:100%;font-size:16px;color:#666}.page-buttons-container[data-v-13144342]{position:absolute;bottom:20px;right:20px;display:flex;gap:15px;z-index:1000}.page-button[data-v-13144342]{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-13144342]:hover{background-color:#3c3c3ccc;transform:scale(1.1)}.page-button[data-v-13144342]:active{transform:scale(.95)}.arrow[data-v-13144342]{border:solid white;border-width:0 2px 2px 0;display:inline-block;padding:4px}.left[data-v-13144342]{transform:rotate(135deg);margin-left:4px}.right[data-v-13144342]{transform:rotate(-45deg);margin-right:4px}.menu-icon[data-v-13144342]{width:18px;height:14px;position:relative;border-top:2px solid white;border-bottom:2px solid white}.menu-icon[data-v-13144342]:before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:#fff;transform:translateY(-50%)}.thumbnail-container[data-v-13144342]{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-13144342]{bottom:0}.thumbnail-list[data-v-13144342]{display:flex;overflow-x:auto;padding:10px;gap:10px;height:100%}.thumbnail-item[data-v-13144342]{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-13144342]{width:100%;height:100%;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:all .2s ease}.thumbnail-item.active[data-v-13144342]{background-color:#ffffff4d;transform:scale(1.05);box-shadow:0 0 10px #ffffff80}.thumbnail-item.active img[data-v-13144342]{border-color:#fff}.thumbnail-item .page-number[data-v-13144342]{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-13144342]:hover:not(.active){transform:scale(1.05);background-color:#ffffff1a}.thumbnail-list[data-v-13144342]::-webkit-scrollbar{height:8px}.thumbnail-list[data-v-13144342]::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}.thumbnail-list[data-v-13144342]::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.thumbnail-list[data-v-13144342]::-webkit-scrollbar-thumb:hover{background:#ffffff80}
.thumbnail-container{position:absolute;bottom:0;left:0;right:0;height:140px;z-index:999;background-color:#505050e6;display:none}.thumbnail-container.show{display:block}.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-13144342]{display:flex;justify-content:center;align-items:center;height:100%;font-size:16px;color:#666}.page-buttons-container[data-v-13144342]{position:absolute;bottom:20px;right:20px;display:flex;gap:15px;z-index:1000}.page-button[data-v-13144342]{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-13144342]:hover{background-color:#3c3c3ccc;transform:scale(1.1)}.page-button[data-v-13144342]:active{transform:scale(.95)}.arrow[data-v-13144342]{border:solid white;border-width:0 2px 2px 0;display:inline-block;padding:4px}.left[data-v-13144342]{transform:rotate(135deg);margin-left:4px}.right[data-v-13144342]{transform:rotate(-45deg);margin-right:4px}.menu-icon[data-v-13144342]{width:18px;height:14px;position:relative;border-top:2px solid white;border-bottom:2px solid white}.menu-icon[data-v-13144342]:before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:#fff;transform:translateY(-50%)}.thumbnail-container[data-v-13144342]{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-13144342]{bottom:0}.thumbnail-list[data-v-13144342]{display:flex;overflow-x:auto;padding:10px;gap:10px;height:100%}.thumbnail-item[data-v-13144342]{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-13144342]{width:100%;height:100%;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:all .2s ease}.thumbnail-item.active[data-v-13144342]{background-color:#ffffff4d;transform:scale(1.05);box-shadow:0 0 10px #ffffff80}.thumbnail-item.active img[data-v-13144342]{border-color:#fff}.thumbnail-item .page-number[data-v-13144342]{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-13144342]:hover:not(.active){transform:scale(1.05);background-color:#ffffff1a}.thumbnail-list[data-v-13144342]::-webkit-scrollbar{height:8px}.thumbnail-list[data-v-13144342]::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}.thumbnail-list[data-v-13144342]::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.thumbnail-list[data-v-13144342]::-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-C5QImvWA.js"></script>
<link rel="stylesheet" crossorigin href="assets/index-B8PaOfGG.css">
<script type="module" crossorigin src="assets/index-C54atKH3.js"></script>
<link rel="stylesheet" crossorigin href="assets/index-ClRwOEZI.css">
</head>
<body>
<div id="app"></div>
......
......@@ -5,13 +5,13 @@
left: 0;
right: 0;
height: 140px;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 999;
background-color: rgba(80, 80, 80, 0.9);
display: none; /* 默认隐藏 */
}
.thumbnail-container.show {
transform: translateY(0);
display: block; /* 显示时改为 block */
}
.thumbnail-list {
......
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