.grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6px; } .gridItem { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 196px; border-radius: 12px; overflow: hidden; background-color: white; } .mark{ position: absolute; left: 0; top: 0; z-index: 1; width: 44px; height: 44px; background-size: cover; } // 当前背景 .gridItemCurrentUsedMark { .mark(); background-image: url(https://cdn.wehome.cn/cmn/png/43/META-H8UKXHWU-X0WXBKY1C0G0QA1DIH762-VWDBZUFM-P81.png); } // 已启用 .gridItemActivedMark { .mark(); background-image: url(https://cdn.wehome.cn/cmn/png/184/META-H8UKWHWU-Q0WXNNJLF5IO3DRNO8GK3-VWDBZUFM-691.png); } .gridItemActived { .gridItem(); background-color: var(--color-primary); border: 2px solid var(--color-primary); } .gridItemCreateBtn{ .gridItem(); background-image: url(https://cdn.wehome.cn/cmn/png/117/META-H8UKXHWU-X0WXBKY1C0G0QA1DIH762-HABOZOFM-A41.png); background-size: cover; } .icon{ display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 100%; background-color: var(--color-primary); } .container{ overflow: hidden; width: 100%; height: calc(100vh - 120px); } .deleted{ display: none; } .selected{ position: absolute; top: 0; right: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .videoContainer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .playBtn{ width: 20px; height: 20px; } .durationStatus{ display: flex; align-items: center; justify-content: center; gap: 2px; position: absolute; right: 0; left: 0; bottom: 0; width: 100%; z-index: 2; border-radius: 30px; font-size: 10px; line-height: 36px; height:36px; color: white; background-color: var(--color-gray-4); backdrop-filter: blur(2px); } .aiTips{ position: absolute; z-index: 1; right: 6px; bottom: 6px; font-family: PingFangSC-Medium; font-weight: 500; font-size: 8px; color: rgba(#fff, .5); line-height: 8px; text-shadow: 1px 1px 0 rgba(#000, .3); }