123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- .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;
- }
- }
|