home_bak.scss 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. .overlay {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100%;
  7. z-index: 50; /* adjust this value to make sure the overlay is below the menu but above other elements */
  8. }
  9. .home-page{
  10. width:100vw;
  11. height:100vh;
  12. background:#dcdcdc;
  13. background-size: cover;
  14. background-repeat: no-repeat;
  15. background-position: center center;
  16. overflow: hidden;
  17. z-index: 50;
  18. .section-top{
  19. z-index: 50;
  20. position: absolute;
  21. top: 17vh; /* 垂直居中 */
  22. left: 45vw; /* 水平居中 */
  23. width: 100%; /* 元素宽度为视口宽度的 50% */
  24. height: 8vh; /* 元素高度为视口高度的 50% */
  25. transform: translate(-50%, -50%);
  26. .top-user-info{
  27. display: flex;
  28. width:50%;
  29. height:60px;
  30. position: relative;
  31. margin-left:12px;
  32. .user-info{
  33. width:100%;
  34. height:100%;
  35. background-color:#593320;
  36. border-radius: 15px;
  37. margin-left:20px;
  38. display: flex;
  39. flex-direction: row;
  40. z-index: 60;
  41. .header-icon{
  42. height:60px;
  43. width:40%;
  44. margin-left:5px;
  45. display:flex;
  46. justify-content: center;
  47. align-items: center;
  48. .header{
  49. height:50px;
  50. width:50px;
  51. border-radius: 15px;
  52. }
  53. }
  54. .header-name{
  55. margin-left:5px;
  56. width:100%;
  57. display: flex;
  58. flex-direction: column;
  59. .name{
  60. font-size:14px;
  61. color:#FFFFFF;
  62. margin-left:10px;
  63. margin-top:5px;
  64. }
  65. .option{
  66. color:#593320;
  67. background-color:#E9C392;
  68. font-size:8px;
  69. margin-left:10px;
  70. margin-top:8px;
  71. padding:2px 3px;
  72. border-radius: 10px;
  73. width:80px;
  74. text-align: center;
  75. }
  76. }
  77. }
  78. .sub-menus{
  79. position: absolute;
  80. width:89%;
  81. margin-left:20px;
  82. background-color:#a07c5a;
  83. min-height:350px;
  84. border-radius: 10px;
  85. top:40px;
  86. padding-bottom:30px;
  87. .mt10{
  88. margin-top:30px;
  89. }
  90. .menu{
  91. height:30px;
  92. width:100%;
  93. display: flex;
  94. flex-direction: row;
  95. justify-content: flex-start;
  96. align-items: center;
  97. z-index:99;
  98. .icon{
  99. display: flex;
  100. width:20px;
  101. height:100%;
  102. margin-left:10px;
  103. justify-content: center;
  104. align-items: center;
  105. .img{
  106. height:16px;
  107. }
  108. }
  109. .name{
  110. height:100%;
  111. display: flex;
  112. justify-content: flex-start;
  113. align-items: center;
  114. margin-left:10px;
  115. color:#FFFFFF;
  116. font-size:13px;
  117. // font-weight: 800;
  118. }
  119. }
  120. .line{
  121. border-bottom: 1px solid #D6B6A2;
  122. width:100%;
  123. margin-top:5px;
  124. margin-bottom: 5px;
  125. }
  126. .menu-content{
  127. overflow: hidden;
  128. .menu-items{
  129. margin-left:10px;
  130. .menu-item{
  131. width:40%;
  132. overflow: hidden;
  133. float:left;
  134. margin-top:5px;
  135. margin-right: 5px;
  136. display:flex;
  137. flex-direction:column;
  138. justify-content: center;
  139. align-items: center;
  140. .item{
  141. display:flex;
  142. justify-content: center;
  143. align-items: center;
  144. background:#FFEFE2;
  145. width:60px;
  146. height:60px;
  147. .img{
  148. width:100%;
  149. height:100%;
  150. }
  151. }
  152. .name{
  153. width:100%;
  154. text-align:center;
  155. font-size:12px;
  156. color:#FFEFE2;
  157. height:30px;
  158. line-height: 30px;
  159. overflow: hidden;
  160. }
  161. }
  162. }
  163. }
  164. }
  165. }
  166. .menu-top{
  167. width:100%;
  168. position: absolute;
  169. top:-1vh;
  170. display: flex;
  171. flex-direction: row;
  172. justify-content:flex-end;
  173. align-items: flex-start;
  174. .menu{
  175. height:30px;
  176. width:30px;
  177. margin-right: 10px;
  178. .icon{
  179. width:100%;
  180. height:100%;
  181. }
  182. }
  183. }
  184. }
  185. .section2{
  186. display: flex;
  187. position: absolute;
  188. top: 37vh; /* 垂直居中 */
  189. left: 50vw; /* 水平居中 */
  190. width: 100%;
  191. transform: translate(-50%, -45%);
  192. flex-direction: row;
  193. .icon{
  194. width:50%;
  195. overflow: hidden;
  196. display: flex;
  197. flex-direction: column;
  198. .icon-lay1{
  199. display: flex;
  200. flex-direction: row;
  201. width:100%;
  202. height:6vh;
  203. margin-left:12px;
  204. // border:1px solid red;
  205. .lay-icon{
  206. width:27%;
  207. // border:1px solid red;
  208. display: flex;
  209. justify-content: center;
  210. align-items: flex-end;
  211. .icon{
  212. width:62px;
  213. height:62px;
  214. }
  215. .black{
  216. background:#000;
  217. opacity: 0.4;
  218. }
  219. }
  220. }
  221. .lay-margin{
  222. margin-top:5vh;
  223. }
  224. .lay-margin0{
  225. margin-top:4.5vh;
  226. }
  227. }
  228. .windows{
  229. display: flex;
  230. width:40%;
  231. z-index: 170;
  232. position: relative;
  233. }
  234. }
  235. .section3{
  236. position: absolute;
  237. top: 57vh; /* 垂直居中 */
  238. left: 73vw; /* 水平居中 */
  239. width: 50%;
  240. transform: translate(-50%, -50%);
  241. display: flex;
  242. flex-direction: row;
  243. height:100px;
  244. justify-content: flex-end;
  245. align-items: flex-end;
  246. position: relative;
  247. z-index:59;
  248. .tel{
  249. height:60px;
  250. width:80px;
  251. display: flex;
  252. margin-bottom:18px;
  253. margin-right: -20px;
  254. z-index:50;
  255. .img{
  256. height:100%;
  257. width:100%;
  258. }
  259. }
  260. .comp{
  261. width:110px;
  262. height:80px;
  263. margin-bottom:5px;
  264. .img{
  265. width:100%;
  266. height:100%;
  267. }
  268. }
  269. }
  270. .section4{
  271. position: absolute;
  272. top: 74vh; /* 垂直居中 */
  273. left: 28vw; /* 水平居中 */
  274. width: 30%;
  275. transform: translate(-50%, -50%);
  276. z-index: 49;
  277. height:300px;
  278. .user{
  279. }
  280. }
  281. }
  282. .tooltip {
  283. position: absolute;
  284. display: inline-block;
  285. padding: 10px;
  286. background-color: #FFFFFF;
  287. opacity: 0.7;
  288. color: #000;
  289. width: 100px;
  290. heigh:50px;
  291. border-radius: 60%;
  292. text-align: center;
  293. animation: bounce 1s infinite;
  294. font-size: 14px;
  295. font-weight: bold;
  296. font-family: "Comic Sans MS", cursive, sans-serif;
  297. }
  298. .tooltip::after {
  299. content: "";
  300. position: absolute;
  301. bottom: -13px; /* 箭头位置 */
  302. left: 40%;
  303. transform: translateX(-50%);
  304. opacity: 0.7;
  305. border-width: 7px;
  306. border-style: solid;
  307. border-color: #FFF transparent transparent transparent;
  308. }
  309. @keyframes bounce {
  310. 0%, 100% { transform: translateY(0); }
  311. 50% { transform: translateY(-10px); }
  312. }
  313. .tip1{
  314. top: 7vh;
  315. left: 20px;
  316. }
  317. .tip2{
  318. top: 40vh;
  319. left: 60%;
  320. }