stu-bg.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. .body {
  2. display: flex;
  3. flex-direction: row;
  4. height: 100vh;
  5. width: 100vw;
  6. box-sizing: padding-box;
  7. }
  8. .left {
  9. width: 35%;
  10. height: 100%;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. background-image: url('../../Content/Image/Stu/yuanhu.png');
  15. background-size: 100% 100%;
  16. img {
  17. margin-top: -5%;
  18. width: 80%;
  19. }
  20. }
  21. .right {
  22. width: 65%;
  23. height: 100%;
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. position: relative;
  28. img {
  29. animation: spin 8s linear infinite;
  30. height: 60%;
  31. }
  32. }
  33. .text-box {
  34. position: absolute;
  35. width: auto;
  36. display: flex;
  37. flex-direction: column;
  38. justify-content: center;
  39. align-items: center;
  40. margin-top: -2%;
  41. .name {
  42. font-size: 36px;
  43. font-weight: 600;
  44. color: #fff;
  45. background: #11998e;
  46. padding: 15px 100px;
  47. letter-spacing: 10px;
  48. padding-right: 90px;
  49. border-radius: 50px;
  50. }
  51. .wait-text {
  52. font-size: 90px;
  53. font-weight: 600;
  54. color: #3c3c3c;
  55. letter-spacing: 20px;
  56. margin-top: 50px;
  57. padding-right: 20px;
  58. }
  59. }
  60. /*@media(min-device-width:1025px) {
  61. .right img {
  62. height: auto;
  63. }
  64. }*/
  65. @keyframes spin {
  66. 0% {
  67. transform: rotate(0deg);
  68. }
  69. 35% {
  70. transform: rotate(180deg);
  71. }
  72. 50% {
  73. transform: rotate(180deg);
  74. }
  75. 85% {
  76. transform: rotate(360deg);
  77. }
  78. 100% {
  79. transform: rotate(360deg);
  80. }
  81. }