lunbo.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  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: #048EF3 !important;
  88. z-index: 99;
  89. }
  90. .lunboSearchBtn i{
  91. color: #048EF3 !important;
  92. }
  93. .infoLeft{
  94. width: 50%;
  95. position: absolute;
  96. top: 50px;
  97. right: 27px;
  98. }
  99. .labelM label{
  100. width: 124px !important;
  101. }
  102. .formItem{
  103. width: 50%;
  104. float: left;
  105. margin-right: 0 !important;
  106. }
  107. .formItem:nth-child(n+3){
  108. margin-top: 10px;
  109. }
  110. .infoRight{
  111. position: absolute;
  112. top: 36px;
  113. right: 10px;
  114. width: 190px;
  115. }
  116. .infoRight .infoItem{
  117. background: url("../image/infoRightBg.png") no-repeat;
  118. background-size: 100% 100%;
  119. padding: 6px 14px 10px;
  120. margin-top: 10px;
  121. }
  122. .infoRight .infoItem .infoItemTitle{
  123. font-size: 16px;
  124. color: #3AD2F7;
  125. text-align: right;
  126. }
  127. .infoRight .infoItem .infoCon{
  128. font-size: 14px;
  129. line-height: 24px;
  130. color: #333;
  131. }
  132. .infoRight .searchBtn{
  133. width: 100%;
  134. margin-top: 10px;
  135. }
  136. .wrapper {
  137. display: flex;
  138. align-items: center;
  139. justify-content: center;
  140. position: relative;
  141. height: 100%;
  142. min-height: 180px;
  143. max-height: 800px;
  144. }
  145. .wrapper h3 {
  146. position: absolute;
  147. left: 4rem;
  148. top: 4rem;
  149. z-index: 1000;
  150. padding: 0 1rem;
  151. background-color: #fff;
  152. font-size: 1.4rem;
  153. font-weight: 400;
  154. color: #222;
  155. border-radius: 1.4rem;
  156. }
  157. .wrapper .container {
  158. position: relative;
  159. margin: 0 auto;
  160. }
  161. .horizontal .container {
  162. width: 80px;
  163. height: 70%;
  164. min-height: 149px;
  165. }
  166. .vertical .container {
  167. width: 37rem;
  168. height: 14rem;
  169. }
  170. .container .cards-list {
  171. position: absolute;
  172. left: 0;
  173. top: 10px;
  174. overflow: hidden;
  175. background: rgba(237,252,255,0.6);
  176. border: 2px solid #20CBF6;
  177. border-radius: 5px;
  178. transition: 330ms;
  179. text-align: center;
  180. cursor: pointer;
  181. }
  182. .demo4 .cards-list {
  183. transition: 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
  184. }
  185. .horizontal .cards-list {
  186. width: 100%;
  187. }
  188. .horizontal .img {
  189. /*height: 40px;*/
  190. text-align: center;
  191. }
  192. .el-form-item__label{
  193. font-size: 12px;
  194. }
  195. .vertical .cards-list {
  196. display: flex;
  197. height: 100%;
  198. }
  199. .vertical .img,
  200. .vertical .main-con {
  201. height: 100%;
  202. }
  203. .vertical .img {
  204. /*width: 40px;*/
  205. }
  206. .vertical .main-con {
  207. width: 19rem;
  208. }
  209. .iconImg {
  210. width: 30px;
  211. margin-top: 20px;
  212. line-height: 0;
  213. vertical-align: top;
  214. }
  215. .shadowImg {
  216. width: 50px;
  217. margin-top: 10px;
  218. vertical-align: top;
  219. }
  220. .main-con {
  221. padding: 0 6px 10px 0;
  222. box-sizing: border-box;
  223. }
  224. .main-con .name {
  225. padding-top: 4px;
  226. font-size: 14px;
  227. color: #333;
  228. }
  229. .main-con img {
  230. width: 100%;
  231. }
  232. .main-con .content {
  233. padding-top: 1rem;
  234. height: 4.5rem;
  235. font-size: 0.9rem;
  236. color: #777;
  237. text-align: justify;
  238. line-height: 1.4rem;
  239. }
  240. .main-con .label {
  241. font-size: 0.9rem;
  242. color: #555;
  243. padding: 1rem 0;
  244. }
  245. .btn-direct {
  246. position: absolute;
  247. top: 50%;
  248. z-index: 100000;
  249. width: 4rem;
  250. height: 4rem;
  251. transform: translateY(-50%);
  252. cursor: pointer;
  253. transition: .2s;
  254. }
  255. .btn-direct.btn-left {
  256. left: 6rem;
  257. }
  258. .btn-direct.btn-right {
  259. right: 6rem;
  260. }
  261. .btn-direct>span {
  262. position: absolute;
  263. left: calc(50% - .6rem);
  264. top: calc(50% - .6rem);
  265. width: 1.2rem;
  266. height: 1.2rem;
  267. border-top: 0.2rem solid #fff;
  268. border-left: 0.2rem solid #fff;
  269. }
  270. .horizontal .shift-left {
  271. transform: translateX(25%) rotate(-45deg);
  272. }
  273. .horizontal .shift-right {
  274. transform: translateX(-25%) rotate(135deg);
  275. }
  276. .vertical .shift-left {
  277. transform: translateY(25%) rotate(45deg);
  278. }
  279. .vertical .shift-right {
  280. transform: translateY(-25%) rotate(-135deg);
  281. }
  282. .demo7 .container {
  283. width: 18rem;
  284. height: 24rem;
  285. overflow: hidden;
  286. }
  287. .navigation {
  288. position: absolute;
  289. bottom: 5rem;
  290. left: 50%;
  291. transform: translate(-50%);
  292. }
  293. .navigation .dot {
  294. display: inline-block;
  295. width: .5rem;
  296. height: .5rem;
  297. margin: .5rem;
  298. border: .125rem solid #fff;
  299. background-color: #fff;
  300. border-radius: 100%;
  301. cursor: pointer;
  302. }
  303. .navigation .dot.active {
  304. background-color: transparent;
  305. }
  306. .demo1-tip {
  307. position: absolute;
  308. left: 12rem;
  309. top: 8rem;
  310. color: #fff;
  311. line-height: 1;
  312. }
  313. .demo1-tip .active-index{
  314. color: lightgoldenrodyellow;
  315. font-size: 1.5rem;
  316. font-weight: 600;
  317. vertical-align: middle;
  318. }
  319. @media (min-width: 1400px) {
  320. .container .cards-list{
  321. top:37%;
  322. }
  323. .lineImg{
  324. bottom: 180px;
  325. }
  326. }