rotation.less 20 KB

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