image-view.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. .hc-layout-box {
  2. display: flex;
  3. position: relative;
  4. height: 100%;
  5. .hc-layout-left-box {
  6. width: 382px;
  7. position: relative;
  8. background: #f1f5f8;
  9. border-radius: 10px;
  10. box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
  11. .horizontal-drag-line {
  12. position: absolute;
  13. right: 0;
  14. top: 0;
  15. width: 2px;
  16. height: 100%;
  17. user-select: none;
  18. cursor: col-resize;
  19. background-color: #00000000;
  20. }
  21. .hc-project-box {
  22. position: relative;
  23. padding: 15px 24px;
  24. display: flex;
  25. align-items: flex-start;
  26. border-bottom: 1px solid #E9E9E9;
  27. .hc-project-icon-box {
  28. font-size: 30px;
  29. color: var(--el-color-primary);
  30. }
  31. .project-name-box {
  32. flex: auto;
  33. position: relative;
  34. overflow: hidden;
  35. .project-alias {
  36. color: var(--el-color-primary);
  37. }
  38. .project-name {
  39. margin-top: 6px;
  40. color: #838791;
  41. }
  42. }
  43. }
  44. .hc-tree-box {
  45. position: relative;
  46. padding: 15px 20px;
  47. height: calc(100% - 80px);
  48. &.date-tree {
  49. height: 100%;
  50. }
  51. }
  52. }
  53. .hc-layout-content-box {
  54. flex: 1;
  55. position: relative;
  56. margin-left: 24px;
  57. .hc-table-col-item {
  58. position: relative;
  59. display: flex;
  60. .img-box {
  61. height: 90px;
  62. width: 90px;
  63. margin-right: 16px;
  64. .hc-image {
  65. height: 90px;
  66. width: 90px;
  67. border-radius: 5px;
  68. }
  69. video {
  70. height: 90px;
  71. width: 90px;
  72. border-radius: 5px;
  73. object-fit: fill;
  74. }
  75. }
  76. .content-box {
  77. flex: 1;
  78. position: relative;
  79. height: 90px;
  80. .title {
  81. color: #1a1a1a;
  82. font-weight: bold;
  83. font-size: 14px;
  84. }
  85. .shootingUser {
  86. font-size: 12px;
  87. }
  88. .shootingTimeStr {
  89. color: #a1a1a1;
  90. font-size: 12px;
  91. }
  92. .fileSize {
  93. color: #a1a1a1;
  94. font-size: 12px;
  95. }
  96. }
  97. }
  98. }
  99. }
  100. .preview-video {
  101. width: 100%;
  102. max-height: 500px;
  103. }