rotation.less 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. .overview {
  2. background: #f2f5f7;
  3. padding: 16px 20px 20px 20px;
  4. // height: 100%;
  5. height: calc(100% - 48px);
  6. width: 100%;
  7. .view-title {
  8. display: flex;
  9. justify-content: space-between;
  10. align-items: center;
  11. nav {
  12. display: flex;
  13. align-items: center;
  14. span:nth-of-type(1) {
  15. width: 3px;
  16. height: 16px;
  17. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  18. border-radius: 2px;
  19. margin-right: 4px;
  20. display: inline-block;
  21. }
  22. span:nth-of-type(2) {
  23. height: 24px;
  24. font-size: 16px;
  25. font-family: MicrosoftYaHeiSemibold;
  26. font-weight: bold;
  27. color: #1f2429;
  28. line-height: 21px;
  29. }
  30. }
  31. .view-button {
  32. font-family: PingFangSC-Regular, PingFang SC;
  33. font-weight: 400;
  34. line-height: 22px;
  35. width: 106px;
  36. height: 32px;
  37. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  38. font-size: 14px;
  39. color: #ffffff;
  40. display: flex;
  41. align-items: center;
  42. justify-content: center;
  43. cursor: pointer;
  44. img {
  45. display: inline-block;
  46. height: 16px;
  47. width: 16px;
  48. margin-right: 6px;
  49. }
  50. }
  51. }
  52. .view-box {
  53. height: calc(100% - 45px);
  54. display: flex;
  55. justify-content: space-between;
  56. .view-left {
  57. width: 58.5%;
  58. margin-right: 10px;
  59. display: flex;
  60. flex-direction: column;
  61. .lb-left {
  62. width: 100%;
  63. // TODO: lb-left
  64. // max-height: 300px;
  65. height: 66%;
  66. // overflow: hidden;
  67. flex: 1;
  68. margin-top: 12px;
  69. margin-bottom: 10px;
  70. position: relative;
  71. border: 1px solid #ccc;
  72. img {
  73. width: 100%;
  74. // height: 100%;
  75. }
  76. .lb-icon {
  77. z-index: 99;
  78. position: absolute;
  79. top: 0;
  80. right: 2px;
  81. width: 32px;
  82. height: 32px;
  83. background: rgba(0, 0, 0, 0.6);
  84. border-radius: 0px 4px 0px 4px;
  85. }
  86. .lb-img {
  87. z-index: 101;
  88. width: 16px;
  89. height: 16px;
  90. position: absolute;
  91. top: 8px;
  92. right: 10px;
  93. }
  94. }
  95. .lb-bottom {
  96. height: 34%;
  97. background: #ffffff;
  98. padding: 12px 16px;
  99. nav {
  100. width: 161px;
  101. height: 32px;
  102. display: flex;
  103. align-items: center;
  104. background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  105. margin-bottom: 12px;
  106. span:nth-of-type(1) {
  107. width: 2px;
  108. height: 16px;
  109. background: #025baa;
  110. margin-right: 6px;
  111. display: inline-block;
  112. }
  113. span:nth-of-type(2) {
  114. width: 107px;
  115. height: 22px;
  116. font-size: 14px;
  117. font-family: MicrosoftYaHeiSemibold;
  118. font-weight: bold;
  119. color: #025baa;
  120. line-height: 19px;
  121. }
  122. }
  123. .place-p1 {
  124. height: 24px;
  125. font-size: 16px;
  126. font-family: MicrosoftYaHeiSemibold;
  127. color: rgba(31, 36, 41, 1);
  128. line-height: 21px;
  129. margin-bottom: 8px;
  130. img {
  131. width: 16px;
  132. height: 16px;
  133. margin-right: 3px;
  134. }
  135. }
  136. .place-p2 {
  137. margin: 16px 0;
  138. height: 22px;
  139. font-size: 14px;
  140. font-family: MicrosoftYaHei;
  141. color: rgba(31, 36, 41, 1);
  142. line-height: 19px;
  143. display: flex;
  144. align-items: center;
  145. margin-bottom: 12px;
  146. margin-top: 0px;
  147. img {
  148. width: 16px;
  149. height: 16px;
  150. margin-right: 3px;
  151. }
  152. }
  153. .place-bottom {
  154. display: flex;
  155. .place-box {
  156. width: 50%;
  157. display: flex;
  158. .place-left {
  159. display: flex;
  160. align-items: center;
  161. flex-direction: column;
  162. span {
  163. display: inline-block;
  164. width: 56px;
  165. margin-right: 8px;
  166. font-size: 12px;
  167. font-family: MicrosoftYaHei;
  168. color: rgba(100, 108, 115, 1);
  169. line-height: 22px;
  170. }
  171. }
  172. .place-right {
  173. display: flex;
  174. flex-direction: column;
  175. justify-content: flex-start;
  176. span {
  177. display: inline-block;
  178. font-size: 12px;
  179. font-family: MicrosoftYaHei;
  180. color: rgba(31, 36, 41, 1);
  181. line-height: 22px;
  182. }
  183. }
  184. }
  185. }
  186. }
  187. }
  188. .view-right {
  189. flex: 1;
  190. .view-right-box {
  191. height: 100%;
  192. display: flex;
  193. flex-direction: column;
  194. .lb-right {
  195. flex: 1;
  196. // TODO: lb-right
  197. height: 47%;
  198. margin-top: 12px;
  199. margin-bottom: 10px;
  200. position: relative;
  201. border: 1px solid #ccc;
  202. .lb-icon {
  203. z-index: 99;
  204. position: absolute;
  205. top: 0;
  206. right: 2px;
  207. width: 32px;
  208. height: 32px;
  209. background: rgba(0, 0, 0, 0.6);
  210. border-radius: 0px 4px 0px 4px;
  211. }
  212. .lb-img {
  213. z-index: 101;
  214. width: 16px;
  215. height: 16px;
  216. position: absolute;
  217. top: 8px;
  218. right: 10px;
  219. }
  220. }
  221. .lb-right-bottom {
  222. height: 53%;
  223. background: #ffffff;
  224. padding: 12px 16px;
  225. overflow: hidden;
  226. nav {
  227. width: 161px;
  228. height: 32px;
  229. display: flex;
  230. align-items: center;
  231. background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  232. margin-bottom: 12px;
  233. span:nth-of-type(1) {
  234. width: 2px;
  235. height: 16px;
  236. background: #025baa;
  237. margin-right: 6px;
  238. display: inline-block;
  239. }
  240. span:nth-of-type(2) {
  241. width: 107px;
  242. height: 22px;
  243. font-size: 14px;
  244. font-family: MicrosoftYaHeiSemibold;
  245. font-weight: bold;
  246. color: #025baa;
  247. line-height: 19px;
  248. }
  249. }
  250. .view-right-bottom {
  251. overflow: auto;
  252. }
  253. }
  254. }
  255. }
  256. }
  257. }
  258. // 自适应1366*768 和1920*1080 的 暂时不用
  259. @media only screen and (min-width: 768px) and (max-width: 1366px) {
  260. // .view-left {
  261. // flex: 1;
  262. // margin-right: 16px;
  263. // .view-left-box {
  264. // display: flex;
  265. // flex-direction: column;
  266. // .view-left-top {
  267. // height: 336px;
  268. // margin-bottom: 16px;
  269. // display: flex;
  270. // justify-content: space-between;
  271. // .view-top-imgL {
  272. // margin-right: 16px;
  273. // width: 504px;
  274. // height: 336px;
  275. // }
  276. // .view-top-imgR {
  277. // width: 336px;
  278. // height: 336px;
  279. // }
  280. // }
  281. // .view-left-bottom {
  282. // background: #ffffff;
  283. // padding: 16px;
  284. // nav {
  285. // width: 161px;
  286. // height: 32px;
  287. // display: flex;
  288. // align-items: center;
  289. // background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  290. // margin-bottom: 16px;
  291. // span:nth-of-type(1) {
  292. // width: 2px;
  293. // height: 16px;
  294. // background: #025baa;
  295. // margin-right: 6px;
  296. // display: inline-block;
  297. // }
  298. // span:nth-of-type(2) {
  299. // width: 107px;
  300. // height: 22px;
  301. // font-size: 14px;
  302. // font-family: MicrosoftYaHeiSemibold;
  303. // color: #025baa;
  304. // line-height: 19px;
  305. // }
  306. // }
  307. // .place-p {
  308. // margin: 16px 0;
  309. // height: 22px;
  310. // font-size: 14px;
  311. // font-family: MicrosoftYaHei;
  312. // color: rgba(31, 36, 41, 1);
  313. // line-height: 19px;
  314. // display: flex;
  315. // align-items: center;
  316. // img {
  317. // margin-right: 3px;
  318. // }
  319. // }
  320. // .place-bottom {
  321. // display: flex;
  322. // .place-bottom-row {
  323. // display: flex;
  324. // justify-content: space-around;
  325. // div {
  326. // span {
  327. // display: block;
  328. // }
  329. // }
  330. // div:nth-of-type(1) {
  331. // margin-right: 16px;
  332. // span {
  333. // width: 56px;
  334. // font-size: 14px;
  335. // font-family: MicrosoftYaHei;
  336. // color: rgba(100, 108, 115, 1);
  337. // line-height: 32px;
  338. // }
  339. // }
  340. // div:nth-of-type(2) {
  341. // margin-right: 16px;
  342. // span {
  343. // font-size: 14px;
  344. // font-family: MicrosoftYaHei;
  345. // color: rgba(31, 36, 41, 1);
  346. // line-height: 32px;
  347. // }
  348. // }
  349. // }
  350. // }
  351. // }
  352. // }
  353. // }
  354. // .view-right {
  355. // padding: 16px;
  356. // max-width: 424px;
  357. // nav {
  358. // width: 161px;
  359. // height: 32px;
  360. // display: flex;
  361. // align-items: center;
  362. // background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  363. // margin-bottom: 16px;
  364. // span:nth-of-type(1) {
  365. // width: 2px;
  366. // height: 16px;
  367. // background: #025baa;
  368. // margin-right: 6px;
  369. // display: inline-block;
  370. // }
  371. // span:nth-of-type(2) {
  372. // width: 107px;
  373. // height: 22px;
  374. // font-size: 14px;
  375. // font-family: MicrosoftYaHeiSemibold;
  376. // color: #025baa;
  377. // line-height: 19px;
  378. // }
  379. // }
  380. // .view-right-bottom {
  381. // display: flex;
  382. // font-size: 14px;
  383. // font-family: MicrosoftYaHei;
  384. // line-height: 40px;
  385. // .view-right-bottom-l {
  386. // min-width: 42px;
  387. // margin-right: 16px;
  388. // color: #646c73;
  389. // }
  390. // .view-right-bottom-r {
  391. // color: #1f2429;
  392. // }
  393. // }
  394. // }
  395. }
  396. @media only screen and (min-width: 1367px) {
  397. // .view-left {
  398. // flex: 1;
  399. // margin-right: 20px;
  400. // .view-left-box {
  401. // display: flex;
  402. // flex-direction: column;
  403. // background: #fff2f5f7;
  404. // .view-left-top {
  405. // height: 498px;
  406. // margin-bottom: 20px;
  407. // display: flex;
  408. // justify-content: space-between;
  409. // .view-top-imgL {
  410. // margin-right: 20px;
  411. // max-width: 748px;
  412. // max-height: 498px;
  413. // }
  414. // .view-top-imgR {
  415. // max-width: 498px;
  416. // max-height: 498px;
  417. // }
  418. // }
  419. // .view-left-bottom {
  420. // background: #ffffff;
  421. // padding: 20px;
  422. // nav {
  423. // width: 181px;
  424. // height: 40px;
  425. // display: flex;
  426. // align-items: center;
  427. // background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  428. // margin-bottom: 24px;
  429. // span:nth-of-type(1) {
  430. // width: 2px;
  431. // height: 24px;
  432. // background: #025baa;
  433. // margin-right: 12px;
  434. // display: inline-block;
  435. // }
  436. // span:nth-of-type(2) {
  437. // width: 135px;
  438. // height: 22px;
  439. // font-size: 18px;
  440. // font-family: MicrosoftYaHeiSemibold;
  441. // color: #025baa;
  442. // line-height: 24px;
  443. // }
  444. // }
  445. // .place-p {
  446. // margin: 20px 0;
  447. // height: 24px;
  448. // font-size: 16px;
  449. // font-family: MicrosoftYaHei;
  450. // color: rgba(31, 36, 41, 1);
  451. // line-height: 21px;
  452. // display: flex;
  453. // align-items: center;
  454. // img {
  455. // margin-right: 3px;
  456. // }
  457. // }
  458. // .place-bottom {
  459. // display: flex;
  460. // .place-bottom-row {
  461. // display: flex;
  462. // justify-content: space-around;
  463. // div {
  464. // span {
  465. // display: block;
  466. // }
  467. // }
  468. // div:nth-of-type(1) {
  469. // margin-right: 16px;
  470. // span {
  471. // width: 76px;
  472. // font-size: 16px;
  473. // font-family: MicrosoftYaHei;
  474. // color: rgba(100, 108, 115, 1);
  475. // line-height: 40px;
  476. // }
  477. // }
  478. // div:nth-of-type(2) {
  479. // margin-right: 20px;
  480. // span {
  481. // font-size: 16px;
  482. // font-family: MicrosoftYaHei;
  483. // color: rgba(31, 36, 41, 1);
  484. // line-height: 40px;
  485. // }
  486. // }
  487. // }
  488. // }
  489. // }
  490. // }
  491. // }
  492. // .view-right {
  493. // padding: 20px;
  494. // min-width: 555px;
  495. // nav {
  496. // width: 181px;
  497. // height: 40px;
  498. // display: flex;
  499. // align-items: center;
  500. // background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  501. // margin-bottom: 24px;
  502. // span:nth-of-type(1) {
  503. // width: 2px;
  504. // height: 24px;
  505. // background: #025baa;
  506. // margin-right: 12px;
  507. // display: inline-block;
  508. // }
  509. // span:nth-of-type(2) {
  510. // width: 135px;
  511. // height: 22px;
  512. // font-size: 18px;
  513. // font-family: MicrosoftYaHeiSemibold;
  514. // color: #025baa;
  515. // line-height: 24px;
  516. // }
  517. // }
  518. // .view-right-bottom {
  519. // display: flex;
  520. // font-size: 16px;
  521. // font-family: MicrosoftYaHei;
  522. // line-height: 40px;
  523. // padding-left: 4px;
  524. // .view-right-bottom-l {
  525. // min-width: 42px;
  526. // margin-right: 30px;
  527. // color: #646c73;
  528. // }
  529. // .view-right-bottom-r {
  530. // color: #1f2429;
  531. // }
  532. // }
  533. // }
  534. }