lunbo.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. body,
  2. div,
  3. dl,
  4. dt,
  5. dd,
  6. ul,
  7. ol,
  8. li,
  9. h1,
  10. h2,
  11. h3,
  12. h4,
  13. h5,
  14. h6,
  15. pre,
  16. code,
  17. form,
  18. fieldset,
  19. legend,
  20. input,
  21. button,
  22. textarea,
  23. p,
  24. blockquote,
  25. th,
  26. td {
  27. margin: 0;
  28. padding: 0;
  29. }
  30. ul,
  31. ol {
  32. list-style: none;
  33. }
  34. a {
  35. text-decoration: none;
  36. }
  37. img {
  38. border: none;
  39. }
  40. em,
  41. i {
  42. font-style: normal;
  43. }
  44. html {
  45. font: 16px / 1.4 Helvetica;
  46. }
  47. body {
  48. min-width: 1240px;
  49. max-width: 2500px;
  50. margin: 0 auto;
  51. background-image: linear-gradient(120deg, #6fc9b7, #093637);
  52. }
  53. .scrollbar {
  54. scrollbar-width: thin;
  55. scrollbar-color: rgba(100, 100, 100, .4) transparent;
  56. }
  57. .scrollbar::-webkit-scrollbar {
  58. width: .6rem;
  59. }
  60. .scrollbar::-webkit-scrollbar-thumb {
  61. border-radius: .6rem;
  62. background-color: rgba(100, 100, 100, .4)
  63. }
  64. .site {
  65. overflow: hidden;
  66. }
  67. .lunboDiv{
  68. width: 50%;
  69. height: 82%;
  70. background: url("../image/lunboBg.png") 53% 50% no-repeat;
  71. background-size: 80% 90%;
  72. /*margin-left: 50%;*/
  73. position: relative;
  74. }
  75. .lineImg{
  76. width: 35%;
  77. position: absolute;
  78. bottom: 160px;
  79. right: 9.5%;
  80. transform:rotateY(180deg);
  81. }
  82. .lunboSearchBtn{
  83. position: absolute;
  84. top: 160px;
  85. right: -20px;
  86. background: #FFF !important;
  87. /*border-color: #1dcaf6 !important;*/
  88. border: none !important;
  89. padding: 0 !important;
  90. z-index: 99;
  91. }
  92. .lunboSearchBtn img{
  93. width: 100%;
  94. height: 100%;
  95. border-radius: 50%;
  96. }
  97. .lunboSearchBtn i{
  98. color: #1dcaf6 !important;
  99. }
  100. .infoLeft{
  101. width: 50%;
  102. position: absolute;
  103. top: 50px;
  104. right: 27px;
  105. }
  106. .labelM label{
  107. width: 124px !important;
  108. }
  109. .formItem{
  110. width: 50%;
  111. float: left;
  112. margin-right: 0 !important;
  113. }
  114. .formItem:nth-child(n+3){
  115. margin-top: 5px;
  116. }
  117. .education {
  118. width: 100%;
  119. }
  120. .education .el-input--mini{
  121. width: 100%;
  122. }
  123. .education .el-form-item__content{
  124. width: 75%;
  125. }
  126. .infoRight{
  127. position: absolute;
  128. top: 36px;
  129. right: 10px;
  130. width: 190px;
  131. }
  132. .infoRight .infoItem{
  133. background: url("../image/infoRightBg.png") no-repeat;
  134. background-size: 100% 100%;
  135. padding: 6px 14px 10px;
  136. margin-top: 10px;
  137. }
  138. .infoRight .infoItem .infoItemTitle{
  139. font-size: 16px;
  140. color: #3AD2F7;
  141. text-align: right;
  142. }
  143. .infoRight .infoItem .infoCon{
  144. font-size: 14px;
  145. line-height: 24px;
  146. color: #333;
  147. }
  148. .infoRight .searchBtn{
  149. width: 100%;
  150. margin-top: 10px;
  151. }
  152. .wrapper {
  153. display: flex;
  154. align-items: center;
  155. justify-content: center;
  156. position: relative;
  157. height: 100% !important;
  158. min-height: 180px;
  159. max-height: 800px;
  160. border: none !important;
  161. }
  162. .wrapper h3 {
  163. position: absolute;
  164. left: 4rem;
  165. top: 4rem;
  166. z-index: 1000;
  167. padding: 0 1rem;
  168. background-color: #fff;
  169. font-size: 1.4rem;
  170. font-weight: 400;
  171. color: #222;
  172. border-radius: 1.4rem;
  173. }
  174. .wrapper .container {
  175. position: relative;
  176. margin: 0 auto;
  177. }
  178. .horizontal .container {
  179. width: 80px;
  180. height: 70%;
  181. min-height: 149px;
  182. }
  183. .vertical .container {
  184. width: 37rem;
  185. height: 14rem;
  186. }
  187. .container .cards-list {
  188. position: absolute;
  189. left: 0;
  190. top: 10px;
  191. overflow: hidden;
  192. background: rgba(237,252,255,0.6);
  193. border: 2px solid #20CBF6;
  194. border-radius: 5px;
  195. transition: 330ms;
  196. text-align: center;
  197. cursor: pointer;
  198. }
  199. .demo4 .cards-list {
  200. transition: 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
  201. }
  202. .horizontal .cards-list {
  203. width: 100%;
  204. }
  205. .horizontal .img {
  206. /*height: 40px;*/
  207. text-align: center;
  208. }
  209. .el-form-item__label{
  210. font-size: 12px;
  211. }
  212. .vertical .cards-list {
  213. display: flex;
  214. height: 100%;
  215. }
  216. .vertical .img,
  217. .vertical .main-con {
  218. height: 100%;
  219. }
  220. .vertical .img {
  221. /*width: 40px;*/
  222. }
  223. .vertical .main-con {
  224. width: 19rem;
  225. }
  226. .iconImg {
  227. width: 30px;
  228. margin-top: 20px;
  229. line-height: 0;
  230. vertical-align: top;
  231. }
  232. .shadowImg {
  233. width: 50px;
  234. margin-top: 10px;
  235. vertical-align: top;
  236. }
  237. .main-con {
  238. padding: 0 6px 10px 0;
  239. box-sizing: border-box;
  240. }
  241. .main-con .name {
  242. padding-top: 4px;
  243. font-size: 14px;
  244. color: #333;
  245. }
  246. .main-con img {
  247. width: 100%;
  248. }
  249. .main-con .content {
  250. padding-top: 1rem;
  251. height: 4.5rem;
  252. font-size: 0.9rem;
  253. color: #777;
  254. text-align: justify;
  255. line-height: 1.4rem;
  256. }
  257. .main-con .label {
  258. font-size: 0.9rem;
  259. color: #555;
  260. padding: 1rem 0;
  261. }
  262. .btn-direct {
  263. position: absolute;
  264. top: 50%;
  265. z-index: 100000;
  266. width: 4rem;
  267. height: 4rem;
  268. transform: translateY(-50%);
  269. cursor: pointer;
  270. transition: .2s;
  271. }
  272. .btn-direct.btn-left {
  273. left: 6rem;
  274. }
  275. .btn-direct.btn-right {
  276. right: 6rem;
  277. }
  278. .btn-direct>span {
  279. position: absolute;
  280. left: calc(50% - .6rem);
  281. top: calc(50% - .6rem);
  282. width: 1.2rem;
  283. height: 1.2rem;
  284. border-top: 0.2rem solid #fff;
  285. border-left: 0.2rem solid #fff;
  286. }
  287. .horizontal .shift-left {
  288. transform: translateX(25%) rotate(-45deg);
  289. }
  290. .horizontal .shift-right {
  291. transform: translateX(-25%) rotate(135deg);
  292. }
  293. .vertical .shift-left {
  294. transform: translateY(25%) rotate(45deg);
  295. }
  296. .vertical .shift-right {
  297. transform: translateY(-25%) rotate(-135deg);
  298. }
  299. .demo7 .container {
  300. width: 18rem;
  301. height: 24rem;
  302. overflow: hidden;
  303. }
  304. .navigation {
  305. position: absolute;
  306. bottom: 5rem;
  307. left: 50%;
  308. transform: translate(-50%);
  309. }
  310. .navigation .dot {
  311. display: inline-block;
  312. width: .5rem;
  313. height: .5rem;
  314. margin: .5rem;
  315. border: .125rem solid #fff;
  316. background-color: #fff;
  317. border-radius: 100%;
  318. cursor: pointer;
  319. }
  320. .navigation .dot.active {
  321. background-color: transparent;
  322. }
  323. .demo1-tip {
  324. position: absolute;
  325. left: 12rem;
  326. top: 8rem;
  327. color: #fff;
  328. line-height: 1;
  329. }
  330. .demo1-tip .active-index{
  331. color: lightgoldenrodyellow;
  332. font-size: 1.5rem;
  333. font-weight: 600;
  334. vertical-align: middle;
  335. }
  336. @media (min-width: 1400px) {
  337. .container .cards-list{
  338. top:37%;
  339. }
  340. .lineImg{
  341. bottom: 180px;
  342. }
  343. .infoLeft .formItemFull:nth-child(n+2){
  344. margin-top: 15px !important;
  345. }
  346. .formItem:nth-child(n+3){
  347. margin-top: 15px;
  348. }
  349. .infoLeft .el-form-item__content{
  350. min-width: 178px;
  351. }
  352. .infoLeft .age{
  353. width: 80px !important;
  354. }
  355. }
  356. .dateQj .el-form-item__content{
  357. width: 66%;
  358. }
  359. @media (max-width: 1400px) {
  360. .infoLeft .el-input--mini {
  361. width: 98px;
  362. }
  363. .infoLeft .age{
  364. width: 40px !important;
  365. }
  366. }