123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- /* 样式文件 */
- body {
- font-family: Arial, sans-serif;
- }
- #breadcrumb-container {
- margin-bottom: 10px;
- background-color: transparent; /* 背景色透明 */
- color: #007bff; /* 文字颜色为蓝色 */
- }
- .breadcrumb-item {
- display: inline-block;
- padding: 5px;
- border-radius: 4px;
- cursor: pointer;
- margin-right: 5px;
- /*上下在容器的的中间*/
- vertical-align: middle;
- }
- .organization-list {
- list-style-type: none;
- padding-left: 20px;
- }
- .organization-item {
- padding: 3px;
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid #e2e2e2;
- line-height: 2.5; /* 增加行间距 */
- padding-right: 12px;
- }
- .selected {
- background-color: lightblue;
- }
-
-
- .organization-tree {
- margin-top: 10px;
- padding-left: 10px;
- }
- .organization-tree-item {
- padding: 10px;
- cursor: pointer;
- }
- ul {
- padding-inline-start: 0; /* 取消 ul 的默认 padding-inline-start */
- }
- .search-container {
- display: flex;
- align-items: center; /* 垂直居中对齐 */
- width: 100%; /* 使容器占满整行 */
- }
- #search-box {
- border: 1px solid #ccc; /* 设置边框 */
- padding: 5px; /* 添加内边距以增加美观 */
- border-radius: 4px; /* 可选,设置圆角 */
- flex: 1; /* 使输入框占据剩余空间 */
- margin-right: 10px; /* 输入框和按钮之间的间距 */
- }
- #search-button {
- /* 可选,您可以根据需要设置按钮样式 */
- padding: 5px 10px; /* 添加内边距 */
- border: 1px solid #ccc; /* 设置边框 */
- border-radius: 4px; /* 可选,设置圆角 */
- background-color: #f0f0f0; /* 设置按钮背景颜色 */
- cursor: pointer; /* 鼠标悬停时变为指针 */
- /*背景色蓝色*/
- background-color: #007bff;
- color: #fff; /* 文字颜色 */
- font-weight: bold; /* 加粗 */
- }
- /*下级组织标签*/
- #sub-organization-label {
- font-size: 15px;
- color: #000000;
- font-weight: bold;
- margin-top: 20px;
- /*背景色浅色*/
- background-color: #f0f0f0;
- }
-
- /* CSS 文件 */
- .organization-item {
- cursor: pointer; /* 增加鼠标指针效果 */
- }
- .info-div {
- display: flex;
- align-items: center; /* 使员工信息在一行内 */
- }
- .number-span {
- margin-right: 20px; /* 添加右侧边距 */
- font-size: 16px; /* 设置字体大小 */
- line-height: 1.5; /* 设置行高 */
- flex-shrink: 0; /* 防止员工编码缩小 */
- align-self: center; /* 使员工编码上下居中 */
- font-weight: bold;
- padding: 5px 10px; /* 添加内边距,使内容与边框有距离 */
- min-width: 100px; /* 设置最小宽度,以确保每一行宽度一致 */
- display: inline-block; /* 使用 inline-block 使宽度生效 */
- text-align: center; /* 文本居中 */
- /* border: 1px solid #aeeeee; 添加边框,使其呈椭圆形状 */
- /* color: #ffffff;白色 */
- /* border-radius: 50%; 设置圆角以形成椭圆 */
- /* background-color: #005ce573; 设置背景色为浅蓝色 */
- }
- .details-div {
- display: flex;
- flex-direction: column; /* 垂直排列姓名和职位 */
- }
- .name-span {
- line-height: 1.5; /* 设置姓名行高 */
- text-align: left; /* 左对齐 */
- font-weight: bold;
- }
- .pos-span {
- margin-top: 2px; /* 职位信息与姓名之间添加一定的间距 */
- line-height: 1.5; /* 设置职位行高 */
- text-align: left; /* 左对齐 */
- /* 颜色深灰色 */
- color: #666666;
- }
-
- /* org-name字体加粗 */
- .org-name {
- font-weight: bold;
- }
- /*id为:htmlContent1的div的样式*/
- #htmlContent1 {
- /*向下10px;*/
- margin-top: 20px;
- }
|