pfileList.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /* 样式文件 */
  2. body {
  3. font-family: Arial, sans-serif;
  4. }
  5. #breadcrumb-container {
  6. margin-bottom: 10px;
  7. background-color: transparent; /* 背景色透明 */
  8. color: #007bff; /* 文字颜色为蓝色 */
  9. }
  10. .breadcrumb-item {
  11. display: inline-block;
  12. padding: 5px;
  13. border-radius: 4px;
  14. cursor: pointer;
  15. margin-right: 5px;
  16. /*上下在容器的的中间*/
  17. vertical-align: middle;
  18. }
  19. .organization-list {
  20. list-style-type: none;
  21. padding-left: 20px;
  22. }
  23. .organization-item {
  24. padding: 3px;
  25. cursor: pointer;
  26. display: flex;
  27. justify-content: space-between;
  28. border-bottom: 1px solid #e2e2e2;
  29. line-height: 2.5; /* 增加行间距 */
  30. padding-right: 12px;
  31. }
  32. .selected {
  33. background-color: lightblue;
  34. }
  35. .organization-tree {
  36. margin-top: 10px;
  37. padding-left: 10px;
  38. }
  39. .organization-tree-item {
  40. padding: 10px;
  41. cursor: pointer;
  42. }
  43. ul {
  44. padding-inline-start: 0; /* 取消 ul 的默认 padding-inline-start */
  45. }
  46. .search-container {
  47. display: flex;
  48. align-items: center; /* 垂直居中对齐 */
  49. width: 100%; /* 使容器占满整行 */
  50. }
  51. #search-box {
  52. border: 1px solid #ccc; /* 设置边框 */
  53. padding: 5px; /* 添加内边距以增加美观 */
  54. border-radius: 4px; /* 可选,设置圆角 */
  55. flex: 1; /* 使输入框占据剩余空间 */
  56. margin-right: 10px; /* 输入框和按钮之间的间距 */
  57. }
  58. #search-button {
  59. /* 可选,您可以根据需要设置按钮样式 */
  60. padding: 5px 10px; /* 添加内边距 */
  61. border: 1px solid #ccc; /* 设置边框 */
  62. border-radius: 4px; /* 可选,设置圆角 */
  63. background-color: #f0f0f0; /* 设置按钮背景颜色 */
  64. cursor: pointer; /* 鼠标悬停时变为指针 */
  65. /*背景色蓝色*/
  66. background-color: #007bff;
  67. color: #fff; /* 文字颜色 */
  68. font-weight: bold; /* 加粗 */
  69. }
  70. /*下级组织标签*/
  71. #sub-organization-label {
  72. font-size: 15px;
  73. color: #000000;
  74. font-weight: bold;
  75. margin-top: 20px;
  76. /*背景色浅色*/
  77. background-color: #f0f0f0;
  78. }
  79. /* CSS 文件 */
  80. .organization-item {
  81. cursor: pointer; /* 增加鼠标指针效果 */
  82. }
  83. .info-div {
  84. display: flex;
  85. align-items: center; /* 使员工信息在一行内 */
  86. }
  87. .number-span {
  88. margin-right: 20px; /* 添加右侧边距 */
  89. font-size: 16px; /* 设置字体大小 */
  90. line-height: 1.5; /* 设置行高 */
  91. flex-shrink: 0; /* 防止员工编码缩小 */
  92. align-self: center; /* 使员工编码上下居中 */
  93. font-weight: bold;
  94. padding: 5px 10px; /* 添加内边距,使内容与边框有距离 */
  95. min-width: 100px; /* 设置最小宽度,以确保每一行宽度一致 */
  96. display: inline-block; /* 使用 inline-block 使宽度生效 */
  97. text-align: center; /* 文本居中 */
  98. /* border: 1px solid #aeeeee; 添加边框,使其呈椭圆形状 */
  99. /* color: #ffffff;白色 */
  100. /* border-radius: 50%; 设置圆角以形成椭圆 */
  101. /* background-color: #005ce573; 设置背景色为浅蓝色 */
  102. }
  103. .details-div {
  104. display: flex;
  105. flex-direction: column; /* 垂直排列姓名和职位 */
  106. }
  107. .name-span {
  108. line-height: 1.5; /* 设置姓名行高 */
  109. text-align: left; /* 左对齐 */
  110. font-weight: bold;
  111. }
  112. .pos-span {
  113. margin-top: 2px; /* 职位信息与姓名之间添加一定的间距 */
  114. line-height: 1.5; /* 设置职位行高 */
  115. text-align: left; /* 左对齐 */
  116. /* 颜色深灰色 */
  117. color: #666666;
  118. }
  119. /* org-name字体加粗 */
  120. .org-name {
  121. font-weight: bold;
  122. }
  123. /*id为:htmlContent1的div的样式*/
  124. #htmlContent1 {
  125. /*向下10px;*/
  126. margin-top: 20px;
  127. }