index.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .header1-page {
  2. width: 100%;
  3. height: 62px;
  4. padding: 0 30px;
  5. box-sizing: border-box;
  6. display: flex;
  7. justify-content: space-between;
  8. position: fixed;
  9. top: 0;
  10. left: 0;
  11. }
  12. .header1-page.bg{
  13. background: #0000004d;
  14. }
  15. .header1-page .logo-img {
  16. width: 150px;
  17. height: 42px;
  18. margin-top: 19px;
  19. }
  20. .header1-page .menu {
  21. width: 393px;
  22. display: flex;
  23. justify-content: space-between;
  24. font-size: 18px;
  25. font-family: Gilroy, Gilroy-Bold;
  26. font-weight: 700;
  27. text-align: left;
  28. color: #ffffff;
  29. margin-top: 29px;
  30. }
  31. .header1-page .menu .item {
  32. height: 18px;
  33. position: relative;
  34. cursor: pointer;
  35. }
  36. .header1-page .menu .item:hover::after {
  37. width: 100%;
  38. }
  39. .header1-page .menu .item::after{
  40. transition: width 0.3s;
  41. transition-delay: 0.3s;/*避免短时间内,如果重复触发会导致闪烁闪烁*/
  42. content: '';
  43. position: absolute;
  44. left: 50%;
  45. transform: translateX(-50%);
  46. bottom: -17px;
  47. height: 4px;
  48. width: 0;
  49. background: #008cff;
  50. }
  51. .header1-page .menu .item:hover .expand2{
  52. width: 608px;
  53. padding: 55px 60px;
  54. }
  55. .header1-page .menu .item .expand2{
  56. overflow: hidden;
  57. transition: all 0.3s;
  58. transition-delay: 0.3s;
  59. width: 0;
  60. height: 261px;
  61. background: #ffffff;
  62. border-radius: 20px;
  63. position: absolute;
  64. left: 50%;
  65. transform: translateX(-50%);
  66. top: 35px;
  67. box-sizing: border-box;
  68. display: flex;
  69. justify-content: flex-start;
  70. align-items: center;
  71. flex-wrap: wrap;
  72. padding: 0;
  73. }
  74. .header1-page .menu .item .expand2-box{
  75. width: 50%;
  76. font-family: Gilroy, Gilroy-Medium;
  77. line-height: 36px;
  78. }
  79. .header1-page .menu .item .expand2-box-title{
  80. font-size: 18px;
  81. font-weight: 700;
  82. color: #333333;
  83. }
  84. .header1-page .menu .item .expand2-box-content{
  85. font-size: 14px;
  86. font-weight: 500;
  87. color: #999999;
  88. }
  89. .header1-page .lang-box {
  90. margin-top: 29px;
  91. }
  92. .header1-page .lang-box .lang1 {
  93. width: 31px;
  94. height: 22px;
  95. margin-right: 32px;
  96. vertical-align: middle;
  97. }
  98. .header1-page .lang-box .lang2 {
  99. width: 18px;
  100. height: 14px;
  101. vertical-align: middle;
  102. }