home.scss 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. .container{
  2. margin-top: 100px;
  3. background-color: #E5E5E5;
  4. min-height: 760px;
  5. width: 100%;
  6. .banner{
  7. width:480px;
  8. }
  9. .person_info{
  10. width: 95%;
  11. height: 110px;
  12. background-color: #FFF;
  13. border-radius: 10px;
  14. margin: 0 auto;
  15. position: relative;
  16. top:-20px;
  17. .avatar{
  18. width: 80px;
  19. height:80px;
  20. border-radius: 50%;
  21. position: relative;
  22. top: -50px;
  23. margin: 0 auto;
  24. overflow: hidden;
  25. img{
  26. width: 100%;
  27. height: 100%;
  28. }
  29. }
  30. .info{
  31. display: flex;
  32. margin-top: -60px;
  33. padding-left: 20px;
  34. justify-content: space-between;
  35. flex-wrap: wrap;
  36. flex-basis: 100%;
  37. .name{
  38. display: flex;
  39. width: 80px;
  40. height:40px;
  41. font-size: 18px;
  42. font-weight: bold;
  43. }
  44. .setup{
  45. width: 90px;
  46. height: 30px;
  47. margin-right: 20px;
  48. display: flex;
  49. .vi{
  50. padding-left: 20px;
  51. display: flex;
  52. }
  53. }
  54. .tel{
  55. display: flex;
  56. flex-wrap: wrap;
  57. flex-basis: 100%;
  58. .telnmu{
  59. padding-left: 5px;
  60. }
  61. }
  62. }
  63. }
  64. .section1{
  65. width: 100%;
  66. min-height: 122px;
  67. background-color: #FFF;
  68. border-radius: 10px;
  69. margin: 35px auto;
  70. position: relative;
  71. display: flex;
  72. .column {
  73. flex: 1; /* 每列平均分配空间 */
  74. display: flex;
  75. flex-direction: column; /* 列内部元素垂直排列 */
  76. padding: 20px 2px;
  77. text-align: center; /* 文本居中 */
  78. }
  79. .cell {
  80. flex: 1; /* 在列内部,每行平均分配空间 */
  81. font-size: 14px;
  82. color: #666666;
  83. padding: 0px 1px; /* 内边距 */
  84. }
  85. }
  86. .section2{
  87. width: 100%;
  88. min-height: 132px;
  89. background-color: #FFF;
  90. border-radius: 10px;
  91. margin: -28px auto;
  92. position: relative;
  93. display: flex;
  94. flex-direction: column; /* 子元素垂直排列 */
  95. align-items: center; /* 子元素在交叉轴上居中对齐 */
  96. .row {
  97. width: 95%; /* 行宽度占满容器 */
  98. padding: 10px 20px; /* 行内边距 */
  99. text-align: left; /* 文本居中 */
  100. border-bottom: 1px dotted #ccc; /* 每行的底部边框 */
  101. margin-top: 10px;
  102. margin-left: 5px;
  103. margin-right: 5px;
  104. display: flex;
  105. flex-wrap: nowrap;
  106. }
  107. .divider {
  108. width: 80%; /* 分割线宽度 */
  109. height: 2px; /* 分割线高度 */
  110. background-color: #000; /* 分割线颜色 */
  111. margin: 20px 0; /* 分割线的上下外边距 */
  112. }
  113. }
  114. }
  115. .overlay {
  116. position: fixed;
  117. top: 0;
  118. left: 0;
  119. width: 100%;
  120. height: 100%;
  121. z-index: 50; /* adjust this value to make sure the overlay is below the menu but above other elements */
  122. }
  123. .home-page{
  124. width:100vw;
  125. height:100vh;
  126. background:#dcdcdc;
  127. background-size: cover;
  128. background-repeat: no-repeat;
  129. background-position: center center;
  130. overflow: hidden;
  131. z-index: 50;
  132. .section-top{
  133. z-index: 50;
  134. position: absolute;
  135. top: 17vh; /* 垂直居中 */
  136. left: 45vw; /* 水平居中 */
  137. width: 100%; /* 元素宽度为视口宽度的 50% */
  138. height: 8vh; /* 元素高度为视口高度的 50% */
  139. transform: translate(-50%, -50%);
  140. .top-user-info{
  141. display: flex;
  142. width:50%;
  143. height:60px;
  144. position: relative;
  145. margin-left:12px;
  146. .user-info{
  147. width:100%;
  148. height:100%;
  149. background-color:#593320;
  150. border-radius: 15px;
  151. margin-left:20px;
  152. display: flex;
  153. flex-direction: row;
  154. z-index: 60;
  155. .header-icon{
  156. height:60px;
  157. width:40%;
  158. margin-left:5px;
  159. display:flex;
  160. justify-content: center;
  161. align-items: center;
  162. .header{
  163. height:50px;
  164. width:50px;
  165. border-radius: 15px;
  166. }
  167. }
  168. .header-name{
  169. margin-left:5px;
  170. width:100%;
  171. display: flex;
  172. flex-direction: column;
  173. .name{
  174. font-size:14px;
  175. color:#FFFFFF;
  176. margin-left:10px;
  177. margin-top:5px;
  178. }
  179. .option{
  180. color:#593320;
  181. background-color:#E9C392;
  182. font-size:8px;
  183. margin-left:10px;
  184. margin-top:8px;
  185. padding:2px 3px;
  186. border-radius: 10px;
  187. width:80px;
  188. text-align: center;
  189. }
  190. }
  191. }
  192. .sub-menus{
  193. position: absolute;
  194. width:89%;
  195. margin-left:20px;
  196. background-color:#a07c5a;
  197. min-height:350px;
  198. border-radius: 10px;
  199. top:40px;
  200. padding-bottom:30px;
  201. .mt10{
  202. margin-top:30px;
  203. }
  204. .menu{
  205. height:30px;
  206. width:100%;
  207. display: flex;
  208. flex-direction: row;
  209. justify-content: flex-start;
  210. align-items: center;
  211. z-index:99;
  212. .icon{
  213. display: flex;
  214. width:20px;
  215. height:100%;
  216. margin-left:10px;
  217. justify-content: center;
  218. align-items: center;
  219. .img{
  220. height:16px;
  221. }
  222. }
  223. .name{
  224. height:100%;
  225. display: flex;
  226. justify-content: flex-start;
  227. align-items: center;
  228. margin-left:10px;
  229. color:#FFFFFF;
  230. font-size:13px;
  231. // font-weight: 800;
  232. }
  233. }
  234. .line{
  235. border-bottom: 1px solid #D6B6A2;
  236. width:100%;
  237. margin-top:5px;
  238. margin-bottom: 5px;
  239. }
  240. .menu-content{
  241. overflow: hidden;
  242. .menu-items{
  243. margin-left:10px;
  244. .menu-item{
  245. width:40%;
  246. overflow: hidden;
  247. float:left;
  248. margin-top:5px;
  249. margin-right: 5px;
  250. display:flex;
  251. flex-direction:column;
  252. justify-content: center;
  253. align-items: center;
  254. .item{
  255. display:flex;
  256. justify-content: center;
  257. align-items: center;
  258. background:#FFEFE2;
  259. width:60px;
  260. height:60px;
  261. .img{
  262. width:100%;
  263. height:100%;
  264. }
  265. }
  266. .name{
  267. width:100%;
  268. text-align:center;
  269. font-size:14px;
  270. color:#FFEFE2;
  271. height:30px;
  272. line-height: 30px;
  273. overflow: hidden;
  274. }
  275. }
  276. }
  277. }
  278. }
  279. }
  280. .menu-top{
  281. width:100%;
  282. position: absolute;
  283. top:-1vh;
  284. display: flex;
  285. flex-direction: row;
  286. justify-content:flex-end;
  287. align-items: flex-start;
  288. .menu{
  289. height:30px;
  290. width:30px;
  291. margin-right: 10px;
  292. .icon{
  293. width:100%;
  294. height:100%;
  295. }
  296. }
  297. }
  298. }
  299. .section2{
  300. display: flex;
  301. position: absolute;
  302. top: 37vh; /* 垂直居中 */
  303. left: 50vw; /* 水平居中 */
  304. width: 100%;
  305. transform: translate(-50%, -45%);
  306. flex-direction: row;
  307. .icon{
  308. width:50%;
  309. overflow: hidden;
  310. display: flex;
  311. flex-direction: column;
  312. .icon-lay1{
  313. display: flex;
  314. flex-direction: row;
  315. width:100%;
  316. height:6vh;
  317. margin-left:12px;
  318. // border:1px solid red;
  319. .lay-icon{
  320. width:27%;
  321. // border:1px solid red;
  322. display: flex;
  323. justify-content: center;
  324. align-items: flex-end;
  325. .icon{
  326. width:62px;
  327. height:62px;
  328. }
  329. .black{
  330. background:#000;
  331. opacity: 0.4;
  332. }
  333. }
  334. }
  335. .lay-margin{
  336. margin-top:5vh;
  337. }
  338. .lay-margin0{
  339. margin-top:4.5vh;
  340. }
  341. }
  342. .windows{
  343. display: flex;
  344. width:40%;
  345. z-index: 170;
  346. position: relative;
  347. }
  348. }
  349. .section3{
  350. position: absolute;
  351. top: 57vh; /* 垂直居中 */
  352. left: 73vw; /* 水平居中 */
  353. width: 50%;
  354. transform: translate(-50%, -50%);
  355. display: flex;
  356. flex-direction: row;
  357. height:100px;
  358. justify-content: flex-end;
  359. align-items: flex-end;
  360. position: relative;
  361. z-index:59;
  362. .tel{
  363. height:60px;
  364. width:80px;
  365. display: flex;
  366. margin-bottom:18px;
  367. margin-right: -20px;
  368. z-index:50;
  369. .img{
  370. height:100%;
  371. width:100%;
  372. }
  373. }
  374. .comp{
  375. width:110px;
  376. height:80px;
  377. margin-bottom:5px;
  378. .img{
  379. width:100%;
  380. height:100%;
  381. }
  382. }
  383. }
  384. .section4{
  385. position: absolute;
  386. top: 74vh; /* 垂直居中 */
  387. left: 28vw; /* 水平居中 */
  388. width: 30%;
  389. transform: translate(-50%, -50%);
  390. z-index: 49;
  391. height:300px;
  392. .user{
  393. }
  394. }
  395. }
  396. .tooltip {
  397. position: absolute;
  398. display: inline-block;
  399. padding: 10px;
  400. background-color: #FFFFFF;
  401. opacity: 0.7;
  402. color: #000;
  403. width: 100px;
  404. heigh:50px;
  405. border-radius: 60%;
  406. text-align: center;
  407. animation: bounce 1s infinite;
  408. font-size: 14px;
  409. font-weight: bold;
  410. font-family: "Comic Sans MS", cursive, sans-serif;
  411. }
  412. .tooltip::after {
  413. content: "";
  414. position: absolute;
  415. bottom: -13px; /* 箭头位置 */
  416. left: 40%;
  417. transform: translateX(-50%);
  418. opacity: 0.7;
  419. border-width: 7px;
  420. border-style: solid;
  421. border-color: #FFF transparent transparent transparent;
  422. }
  423. @keyframes bounce {
  424. 0%, 100% { transform: translateY(0); }
  425. 50% { transform: translateY(-10px); }
  426. }
  427. .tip1{
  428. top: 7vh;
  429. left: 20px;
  430. }
  431. .tip2{
  432. top: 40vh;
  433. left: 60%;
  434. }