.TopicPage { width: 100%; min-height: 100vh; background-color: rgba(35, 211, 33, 1); font-family: PingFangSC-Regular, PingFang SC; .bg { width: 100vw; height: 250px; } } .TimeCom { position: absolute; top: 9.2vh; left: 2.4vw; width: 95.2vw; height: 7.39vh; background: #FFFFFF; box-shadow: 0px 4px 8px 0px #33B519; border-radius: 6px; padding: 0 38px 0px 22px; box-sizing: border-box; display: flex; align-items: center; .watch { width: 38px; height: 38px; } .second { width: 102px; height: 52px; background: url('../../assets/TopicPage/second.png') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; font-size: 28px; font-weight: 600; color: #FFFFFF; margin-left: 20px; } .logo { width: 240px; height: 70px; position: absolute; right: 22px; } } .BgPanel { width: 100%; height: 21.7%; .dog { width: 114px; height: 150px; position: absolute; top: 3%; left: 3.3vw; } .trumpet { width: 106px; height: 82px; position: absolute; top: 1.8%; right: 3.6%; } .tip { width: 70.3vw; min-height: 6.16vh; background: rgba(198, 199, 211, 0.09); border-radius: 8px; position: absolute; right: 4.26%; top: 7.23%; padding: 6px; box-sizing: border-box; font-size: 24px; font-weight: 400; color: #6A719E; } } .Course { width: 714px; height: 80vh; background-color: #fff; margin: 0 auto; position: absolute; top: 17.59vh; left: 2.4vw; } .show-panel { position: relative; width: 470px; height: 810px; .round { border-radius: 50%; position: absolute; z-index: 2; } .game-item { position: absolute; } // 闪烁动画 .ficker { animation: fickerAni 2s infinite; } @keyframes fickerAni { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(0.8); } } .show-image { // width: 140px; // height: 222px; position: absolute; } } .opra-panel { width: 23vw; height: 49.56vh; border: 2px solid #23D321; border-top-right-radius: 20rpx; border-bottom-right-radius: 20rpx; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: absolute; top: 20.5%; right: 6vw; .answer-item { width: 70%; height: 192px; border-bottom: 2px solid #23D321; display: flex; justify-content: center; align-items: center; position: relative; .answer-round { width: 36px; height: 36px; border-radius: 50%; position: absolute; top: 5px; right: 5px; } image { width: 100%; height: 62.5%; } } .answer-item:last-child { border: none; } }