.Left { position: absolute; left: 0; top: 0; width: 384px; height: 100%; padding: 20px; transition: all 0.5s ease-in-out; :global { .infoContainer { display: flex; flex-direction: column; width: 100%; height: 100%; background: url('../../../assets/img/infoContainerBg.png') no-repeat 100% 100%; border-radius: 20px; padding: 20px; .topInfo { display: flex; width: 100%; height: 20%; gap: 16px; .finding, .found { width: 50%; height: 100%; display: flex; flex-direction: column; border-radius: 10px; background: url('../../../assets/img/foundBg.png') no-repeat center; .title { width: 100%; height: 65%; color: #fff; font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: center; & > img { height: 70px; object-fit: none; } } .num { height: 0; width: 100%; color: #fff; font-weight: 600; font-size: 24px; display: flex; align-items: center; justify-content: center; } } } .mainInfoBox { padding: 20px; border-radius: 10px; background: url('../../../assets/img/mainInfoBoxBg.png') no-repeat 100% 100%; height: 80%; width: 100%; .tab { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; margin-bottom: 20px; font-size: 20px; font-weight: 500; & > div { padding-bottom: 5px; } .active { font-weight: 600; padding-bottom: 1px; border-bottom: 4px solid; } } .mainInfoListBox { position: relative; display: flex; width: 100%; height: calc(100% - 50px); .slide { position: absolute; left: -20px; width: 20px; height: 100%; background: url(../../../assets/img/slide.png) no-repeat 100% 100%; } .mainInfoList { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; gap: 10px; &::-webkit-scrollbar { display: none; /* 隐藏滚动条 */ } .mainInfo { width: 100%; height: fit-content; padding: 16px; border-radius: 10px; background: #ecd5d1; display: flex; flex-direction: column; gap: 10px; .labelList { display: flex; gap: 10px; height: 35px; .label { width: 95px; height: 100%; font-size: 13px; display: flex; align-items: center; justify-content: center; background: url('../../../assets/img/label.png'); background-size: cover; } } .name { font-weight: 600; font-size: 20px; width: 100%; height: 30px; } .content { word-break: break-word; } .media { width: 100%; height: fit-content; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; video { width: 32%; height: 70px; object-fit: cover; cursor: pointer; } } } .ant-pagination { margin: 0 auto; } } } } } } }