|
|
@@ -2,31 +2,53 @@
|
|
|
<div>
|
|
|
<!-- 学习名称组织名称表单区域 -->
|
|
|
<div v-if="isOrgFormVisible" class="table">
|
|
|
- <a @click="close_table" style="position: absolute;margin-left: 560px;font-size: 35px;color: gray;margin-top: 10px;">X</a>
|
|
|
- <el-button link type="text" size="small" style="font-size: 15px;margin-top: 20px; margin-right: 80px;">CN组织</el-button>
|
|
|
- <el-button link type="text" size="small" style="font-size: 15px;margin-top: 20px; margin-right: 80px;">HK组织</el-button>
|
|
|
- <el-button link type="text" size="small" style="font-size: 15px;margin-top: 20px;">COM组织</el-button>
|
|
|
- <input placeholder="搜索组织" class="table_find" />
|
|
|
+ <!-- 头部区域 -->
|
|
|
+ <div class="table_top">
|
|
|
+ <div class="organzition_top">CN组织</div>
|
|
|
+ <div class="organzition_top">HK组织</div>
|
|
|
+ <div class="organzition_top">COM组织</div>
|
|
|
+ </div>
|
|
|
+ <div class="input-container">
|
|
|
+ <input type="text" placeholder="搜索组织" class="table_find" />
|
|
|
+ <i class="el-icon-search"></i>
|
|
|
+ </div>
|
|
|
+ <a @click="close_table" class="table_close">X</a>
|
|
|
<div class="checkbox-container">
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">学校名称学校名称学校名称</el-checkbox>
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
</div>
|
|
|
<div class="checkbox-company">
|
|
|
<div class="checkbox-right">
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
- <el-checkbox class="checkbox-left">组织名称组织名称组织名称</el-checkbox>
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
+ <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
|
|
|
+ <input type="checkbox" class="checkbox_input">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <el-button type="primary" style="margin-top: 580px; position: absolute; float: right; margin-left: 80px; height: 40px">下一步</el-button> -->
|
|
|
@@ -520,6 +542,10 @@ body{
|
|
|
height: 60px;
|
|
|
color: black;
|
|
|
}
|
|
|
+/* 表单中操作栏的文字间距 */
|
|
|
+.el-button+.el-button, .el-checkbox{
|
|
|
+ margin-left: 25px;
|
|
|
+}
|
|
|
.add-button {
|
|
|
display: flex; /* 使用 Flexbox 使内容水平排列 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
@@ -558,58 +584,146 @@ body{
|
|
|
border: 1px solid rgb(225, 225, 225);
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
}
|
|
|
-/* 搜索框 */
|
|
|
-.table_find {
|
|
|
- width: 100px;
|
|
|
+/* 头部区域 */
|
|
|
+.table_top{
|
|
|
+ width: 630px;
|
|
|
height: 40px;
|
|
|
float: left;
|
|
|
+ margin-left: 250px;
|
|
|
margin-top: 20px;
|
|
|
- margin-left: 740px;
|
|
|
+ /* border: 1px solid red; */
|
|
|
+}
|
|
|
+/* 头部区域文字 */
|
|
|
+.organzition_top {
|
|
|
+ font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ padding-right: 95px;
|
|
|
+ color: #0076fe;
|
|
|
+}
|
|
|
+/* X号推出弹窗按钮 */
|
|
|
+.table_close{
|
|
|
+ color: #999;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 30px;
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ transform: translate(-15px, 15px); /* 向左移动 20px，向下移动 20px */
|
|
|
+}
|
|
|
+/* 输入框样式 */
|
|
|
+.input-container {
|
|
|
+ position: absolute;
|
|
|
+ width: 145px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 22px;
|
|
|
+ margin-left: 722px;
|
|
|
+ /* border: 1px solid red; */
|
|
|
+}
|
|
|
+.table_find {
|
|
|
+ width: 100px; /* 设置容器的宽度 */
|
|
|
+ flex-grow: 1; /* 让输入框自适应宽度 */
|
|
|
+ height: 40px;
|
|
|
+ padding-right: 30px; /* 为右侧图标留出空间 */
|
|
|
+ padding-left: 10px; /* 可选，输入框内的左侧间距 */
|
|
|
border-radius: 20px;
|
|
|
border: 1px solid rgb(189, 189, 189);
|
|
|
- outline: none;
|
|
|
font-size: 15px;
|
|
|
- padding-right: 30px; /* 为右侧图标留出空间 */
|
|
|
- background-image: url('find-icon.jpg'); /* 替换为你的图标路径 */
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: right 1px center; /* 图标位置 */
|
|
|
- background-size: 30px; /* 图标大小 */
|
|
|
- padding-left: 15px;
|
|
|
+ outline: none;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+.table_find::placeholder {
|
|
|
+ color: black; /* 设置提示文字颜色为黑色 */
|
|
|
+}
|
|
|
+.input-container i[data-v-227179ae] {
|
|
|
+ font-size: 18px;
|
|
|
+ color: black;
|
|
|
+ height: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.el-icon-search {
|
|
|
+ font-size: 18px; /* 图标大小 */
|
|
|
+ position: absolute;
|
|
|
+ float: right;
|
|
|
+ margin-left: -25px;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
/* 学校名称 */
|
|
|
.checkbox-container {
|
|
|
- margin-top: 60px; /* 可选：设置顶部间距 */
|
|
|
+ margin-top: 60px;
|
|
|
float: left;
|
|
|
margin-left: 80px;
|
|
|
/* border: 1px solid red; */
|
|
|
height: 400px;
|
|
|
width: 350px;
|
|
|
-
|
|
|
-}
|
|
|
-.el-checkbox:last-of-type {
|
|
|
- margin-right: 28px; /* 自定义你的间距 */
|
|
|
}
|
|
|
.checkbox-left {
|
|
|
flex-direction: row-reverse; /* 选择框在右侧 */
|
|
|
display: flex; /* 使用 Flexbox */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
position: relative; /* 为下划线定位 */
|
|
|
- padding-bottom: 5px; /* 设置文本与下划线之间的间距 */
|
|
|
- padding-top: 9px;
|
|
|
+ padding-bottom: 15px; /* 设置文本与下划线之间的间距 */
|
|
|
+ padding-top: 14px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.checkbox-left a{
|
|
|
+ float: left;
|
|
|
+ margin-left: 75px;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
+/* 下划线 */
|
|
|
.checkbox-left::after {
|
|
|
- content: ''; /* 创建伪元素 */
|
|
|
- display: block; /* 使其成为块级元素 */
|
|
|
- width: 80%; /* 下划线宽度，调整为所需的宽度 */
|
|
|
- height: 1px; /* 下划线高度 */
|
|
|
- background-color: black; /* 下划线颜色 */
|
|
|
- position: absolute; /* 绝对定位 */
|
|
|
- bottom: 0; /* 距离底部 */
|
|
|
- left: 25%; /* 调整下划线的水平位置，设置为10% */
|
|
|
-}
|
|
|
-.el-checkbox span{
|
|
|
- margin-left: 40px;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 95%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: black;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 16%;
|
|
|
+}
|
|
|
+/* 去除原生复选框样式 */
|
|
|
+input[type="checkbox"] {
|
|
|
+ -webkit-appearance: none; /* 去除Safari等浏览器默认样式 */
|
|
|
+ -moz-appearance: none; /* 去除Firefox的默认样式 */
|
|
|
+ appearance: none; /* 去除默认样式 */
|
|
|
+ width: 20px; /* 设置复选框的宽度 */
|
|
|
+ height: 20px; /* 设置复选框的高度 */
|
|
|
+ border: 1.5px solid #000000; /* 默认边框颜色 */
|
|
|
+ position: relative; /* 设置定位，方便后面绝对定位勾号 */
|
|
|
+ cursor: pointer; /* 鼠标悬停时显示为可点击状态 */
|
|
|
+ float: right;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
+/* 选中状态 */
|
|
|
+input[type="checkbox"]:checked {
|
|
|
+ background-color: #007bff; /* 选中时背景颜色为蓝色 */
|
|
|
+ border-color: #007bff; /* 边框颜色为蓝色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 选中时的白色勾号 */
|
|
|
+input[type="checkbox"]:checked::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 5px;
|
|
|
+ width: 6px;
|
|
|
+ height: 12px;
|
|
|
+ border: solid white;
|
|
|
+ border-width: 0 2px 2px 0;
|
|
|
+ transform: rotate(45deg);
|
|
|
+}
|
|
|
+
|
|
|
+/* 悬停时复选框的边框颜色变化 */
|
|
|
+input[type="checkbox"]:hover {
|
|
|
+ border-color: #007bff; /* 悬停时的边框颜色 */
|
|
|
+}
|
|
|
+
|
|
|
/* 组织名称 */
|
|
|
.checkbox-company {
|
|
|
margin-top: 60px; /* 可选：设置顶部间距 */
|
|
|
@@ -619,23 +733,6 @@ body{
|
|
|
height: 400px;
|
|
|
width: 350px;
|
|
|
}
|
|
|
-/* 使用 ::v-deep 选择el-checkbox__inner */
|
|
|
-::v-deep.el-checkbox__inner {
|
|
|
- display: inline-block !important;
|
|
|
- position: relative !important;
|
|
|
- border: 1px solid #DCDFE6 !important;
|
|
|
- border-radius: 2px !important;
|
|
|
- box-sizing: border-box !important;
|
|
|
- width: 20px !important;
|
|
|
- height: 20px !important;
|
|
|
- background-color: #FFF !important;
|
|
|
- z-index: 1 !important;
|
|
|
- transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46) !important;
|
|
|
-}
|
|
|
-.el-checkbox__input{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
-}
|
|
|
/* 批量创建按钮 */
|
|
|
.Add_use{
|
|
|
float: right;
|
huangwenhao
