index.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. @import "~@less/variables.less";
  2. .details-wrapper {
  3. .maskZIndex;
  4. position: fixed;
  5. width: 100%;
  6. height: 100%;
  7. left: 0;
  8. top: 0;
  9. img {
  10. max-width: 100%;
  11. }
  12. }
  13. .details-content-wrapper {
  14. position: fixed;
  15. padding: 50px 0;
  16. width: 80%;
  17. height: 80%;
  18. left: 10%;
  19. top: 10%;
  20. background: #fff;
  21. overflow: hidden;
  22. z-index: 10;
  23. word-break: break-all;
  24. }
  25. .details-content-name {
  26. position: absolute;
  27. top: 0;
  28. width: 100%;
  29. padding: 0 40px;
  30. height: 50px;
  31. line-height: 50px;
  32. font-size: 24px;
  33. }
  34. .details-content-title-box {
  35. position: relative;
  36. height: 40px;
  37. line-height: 40px;
  38. font-size: 20px;
  39. }
  40. .details-content-title-name {
  41. position: absolute;
  42. background: #fff;
  43. padding-right: 5px;
  44. font-size: 20px;
  45. z-index: 10;
  46. }
  47. .details-content-title-line {
  48. position: absolute;
  49. width: 100%;
  50. height: 20px;
  51. top: 0;
  52. border-bottom: 1px dashed #ccc;
  53. }
  54. .details-close {
  55. position: absolute;
  56. right: 0;
  57. cursor: pointer;
  58. }
  59. .details-content {
  60. position: relative;
  61. height: 100%;
  62. padding: 0 180px 0 40px;
  63. overflow-y: auto;
  64. }
  65. .content-menu-box {
  66. position: absolute;
  67. top: 50px;
  68. right: 20px;
  69. width: 160px;
  70. height: 80%;
  71. overflow: hidden;
  72. }
  73. .content-menu-wrapper {
  74. width: 200px;
  75. height: 100%;
  76. overflow-y: auto;
  77. }
  78. .content-menu {
  79. background: #eee;
  80. border: 1px solid #eee;
  81. width: 160px;
  82. padding: 15px 18px;
  83. }
  84. .details-content-menu-line {
  85. height: 15px;
  86. width: 0;
  87. border: 1px solid #ccc;
  88. background-color: #ccc;
  89. margin-left: 4px
  90. }
  91. .details-content-menu-name {
  92. color: #33475f;
  93. font-size: 13px;
  94. cursor: pointer;
  95. }
  96. .details-content-menu-circle {
  97. display: inline-block;
  98. width: 8px;
  99. height: 8px;
  100. border-radius: 5px;
  101. border: 1px solid #ccc;
  102. margin-top: 5px;
  103. background-color: #eee;
  104. margin-right: 10px;
  105. }
  106. .details-mask {
  107. position: fixed;
  108. width: 100%;
  109. height: 100%;
  110. left: 0;
  111. top: 0;
  112. background: #000;
  113. opacity: .6;
  114. filter:alpha(opacity=60);
  115. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
  116. }