tijiao
This commit is contained in:
parent
578b0f7b8d
commit
27534f574c
|
|
@ -23,6 +23,13 @@ export function participant(query) {
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function agreement(query) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/audit',
|
||||||
|
method: 'post',
|
||||||
|
data: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
//创建数据集
|
//创建数据集
|
||||||
export function add(data) {
|
export function add(data) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
//查询数据集
|
||||||
|
export function list(query) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/list/all',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function creation(query) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/list/creation',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function participant(query) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/list/participant',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//创建数据集
|
||||||
|
export function add(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取标注任务文件详情
|
||||||
|
export function getAnnotationDetails(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/create',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMyNoAnnotatedTask(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/getMyNoAuditedTask',
|
||||||
|
method: 'get',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMyAuditFiles(annotationStatus,taskId) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/getMyAuditFiles/'+annotationStatus+'/'+taskId,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function manualAnnotate(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ai/annotationTask/manualAnnotate',
|
||||||
|
method: 'post',
|
||||||
|
data:data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<div class="label-studio-annotator">
|
||||||
|
<div id="label-studio" class="annotation-container"></div>
|
||||||
|
<div class="button-container">
|
||||||
|
<button class="agree-button" @click="agreement(1)">同意</button>
|
||||||
|
<button class="disagree-button" @click="showDisagreement = true">不同意</button>
|
||||||
|
</div>
|
||||||
|
<!-- 弹出层 -->
|
||||||
|
<div v-if="showDisagreement" class="layui-layer">
|
||||||
|
<div class="layui-layer-content">
|
||||||
|
<h2><span STYLE="color: red">*</span>填写说明</h2>
|
||||||
|
<textarea v-model="disagreementReason" placeholder="填写不同意的原因"></textarea>
|
||||||
|
<div class="layui-layer-buttons">
|
||||||
|
<button class="layui-btn layui-btn-primary" @click="sendDisagreement">提交</button>
|
||||||
|
<button class="layui-btn layui-btn-danger" @click="closeDisagreementModal">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LabelStudio from 'label-studio';
|
||||||
|
import 'label-studio/build/static/css/main.css';
|
||||||
|
import {agreement, manualAnnotate } from '../../../../api/dataCenter/annotationTask';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'LabelStudioAnnotator',
|
||||||
|
props: {
|
||||||
|
fileUrl: { type: String, required: true },
|
||||||
|
taskId: { type: Number, required: true },
|
||||||
|
config: { type: String, required: true },
|
||||||
|
id: { type: Number, required: true },
|
||||||
|
itemIndex: { type: Number, required: true },
|
||||||
|
annotations: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [] // 默认值为空数组
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
index: {
|
||||||
|
get() {
|
||||||
|
return this.itemIndex;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
this.$parent.updateItemIndex(value); // 更新父组件的索引
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
labelStudio: null,
|
||||||
|
annotationsList: [] ,
|
||||||
|
showDisagreement: false, // 控制不同意说明弹出层的显示
|
||||||
|
disagreementReason: '' // 存储不同意的原因
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
fileUrl: 'resetLabelStudio' // 当文件地址变化时，重置LabelStudio
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initLabelStudio(); // 组件挂载完成后初始化LabelStudio
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭不同意说明弹出层
|
||||||
|
closeDisagreementModal() {
|
||||||
|
this.showDisagreement = false;
|
||||||
|
this.disagreementReason = ''; // 清空原因
|
||||||
|
},
|
||||||
|
// 发送不同意原因到后台
|
||||||
|
sendDisagreement() {
|
||||||
|
if(this.disagreementReason === ""){
|
||||||
|
this.$modal.msgSuccess('说明原因不能为空');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
agreement({
|
||||||
|
taskId: Number(this.taskId),
|
||||||
|
fileId: Number(this.id),
|
||||||
|
auditFailedReason: this.disagreementReason
|
||||||
|
}).then(response => {
|
||||||
|
this.$modal.msgSuccess('已提交不同意原因');
|
||||||
|
this.closeDisagreementModal(); // 关闭弹出层
|
||||||
|
}).catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 处理返回的标注数据
|
||||||
|
getAnnotations() {
|
||||||
|
return [{
|
||||||
|
result: this.annotations.map(annotation => ({
|
||||||
|
type: "rectanglelabels",
|
||||||
|
from_name: "label",
|
||||||
|
to_name: "image",
|
||||||
|
value: {
|
||||||
|
rectanglelabels: [annotation.label],
|
||||||
|
x: annotation.x,
|
||||||
|
y: annotation.y,
|
||||||
|
width: annotation.width,
|
||||||
|
height: annotation.height
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}];
|
||||||
|
},
|
||||||
|
//不同意
|
||||||
|
disagreement(){
|
||||||
|
|
||||||
|
},
|
||||||
|
//同意的接口调用后台
|
||||||
|
agreement(){
|
||||||
|
agreement({
|
||||||
|
taskId : Number(this.taskId),
|
||||||
|
fileId : Number(this.id)
|
||||||
|
}).then(response => {
|
||||||
|
this.$modal.msgSuccess('已同意标注')
|
||||||
|
}).catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 初始化 LabelStudio
|
||||||
|
initLabelStudio() {
|
||||||
|
this.cleanupLabelStudio(); // 清理之前的实例
|
||||||
|
|
||||||
|
const task = {
|
||||||
|
id: this.id,
|
||||||
|
data: { image: this.fileUrl },
|
||||||
|
};
|
||||||
|
if (this.annotations.length) {
|
||||||
|
task.annotations = this.getAnnotations();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const labelStudioElement = document.getElementById('label-studio');
|
||||||
|
if (!labelStudioElement) {
|
||||||
|
console.error('Label Studio element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.labelStudio = new LabelStudio('label-studio', {
|
||||||
|
config: this.config,
|
||||||
|
interfaces: [],
|
||||||
|
user: { pk: 1, firstName: '标注者', lastName: '用户' },
|
||||||
|
task,
|
||||||
|
onLabelStudioLoad: (LS) => {
|
||||||
|
if (!LS.annotationStore.selectedAnnotation) {
|
||||||
|
const annotation = LS.annotationStore.addAnnotation({ userGenerate: true });
|
||||||
|
LS.annotationStore.selectAnnotation(annotation.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 重置 LabelStudio
|
||||||
|
resetLabelStudio() {
|
||||||
|
this.cleanupLabelStudio();
|
||||||
|
this.initLabelStudio(); // 重新初始化
|
||||||
|
},
|
||||||
|
// 清理 LabelStudio 实例
|
||||||
|
cleanupLabelStudio() {
|
||||||
|
if (this.labelStudio && this.labelStudio.destroy) {
|
||||||
|
this.labelStudio.destroy();
|
||||||
|
}
|
||||||
|
const labelStudioElement = document.getElementById('label-studio');
|
||||||
|
if (labelStudioElement) {
|
||||||
|
labelStudioElement.innerHTML = ''; // 清空容器
|
||||||
|
}
|
||||||
|
this.labelStudio = null; // 置空实例
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.label-studio-annotator {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotation-container {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 500px; /* 设置最小高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
position: absolute;
|
||||||
|
float: right;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 28%;
|
||||||
|
top: 53%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree-button, .disagree-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree-button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disagree-button {
|
||||||
|
background-color: #F44336;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹出层样式 */
|
||||||
|
.layui-layer {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-layer-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 400px; /* 宽度 */
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-layer-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-btn {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-btn-primary {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-btn-danger {
|
||||||
|
background-color: #F44336;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,9 +1,466 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="div-main">
|
||||||
|
<!-- 顶部区域 -->
|
||||||
|
<div class="top-part">
|
||||||
|
<div class="top-content">
|
||||||
|
|
||||||
|
<!-- 右侧选择框和设置按钮 -->
|
||||||
|
<div class="top-content-right">
|
||||||
|
<el-select
|
||||||
|
v-model="taskId"
|
||||||
|
placeholder="请选择审核任务"
|
||||||
|
clearable
|
||||||
|
class="select-task"
|
||||||
|
@change="selectTask"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in taskList"
|
||||||
|
:key="dict.taskId"
|
||||||
|
:label="dict.taskName"
|
||||||
|
:value="dict.taskId"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<!-- <span class="settings-icon">
|
||||||
|
<i class="el-icon-setting"></i>
|
||||||
|
</span>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 底部区域 -->
|
||||||
|
<div class="bottom-part">
|
||||||
|
<div class="bottom-content">
|
||||||
|
<div class="bottom-content-left">
|
||||||
|
<div class="bottom-content-left-top">
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:class="{'is-selected': annotationType===0}"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
@click="toggleSelected(0)"
|
||||||
|
>全部
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:class="{'is-selected': annotationType===1}"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
@click="toggleSelected(1)"
|
||||||
|
>已审核
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:class="{'is-selected': annotationType===2}"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
@click="toggleSelected(2)"
|
||||||
|
>未审核
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:class="{'is-selected': annotationType===3}"
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
@click="toggleSelected(3)"
|
||||||
|
>审核驳回
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-content-left-bottom">
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, index) in images" :key="item.fileId" class="list-item">
|
||||||
|
<div @click="setItem(item, index)">
|
||||||
|
<input type="checkbox" :checked="item.fileAnnotationStatus==='1'" disabled>
|
||||||
|
<span :class="{'highlighted': itemIndex === index}" style="font-size: 14px; margin-left: 5px;"
|
||||||
|
>{{ item.fileName }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-content-center">
|
||||||
|
<div>
|
||||||
|
<custom-label-studio :annotations="annotationResult" :taskId="taskId" :item-index="itemIndex"
|
||||||
|
:config="labelConfig" :id="task.id" :file-url="task.data.image"
|
||||||
|
@update-itemIndex="updateItemIndex"
|
||||||
|
></custom-label-studio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import customLabelStudio from './examLabelStudio.vue'
|
||||||
|
import { getMyNoAnnotatedTask, getMyAuditFiles } from '../../../../api/dataCenter/examine'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
dicts: ['ai_annotate_type'],
|
||||||
|
components: { customLabelStudio },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
itemIndex: 0,
|
||||||
|
annotationResult: [],
|
||||||
|
item: {},
|
||||||
|
taskList: [],
|
||||||
|
task: {
|
||||||
|
id: 0,
|
||||||
|
data: {
|
||||||
|
image: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelConfig: `
|
||||||
|
<View>
|
||||||
|
<Image name="image" value="$image"/>
|
||||||
|
<RectangleLabels name="label" toName="image">
|
||||||
|
</RectangleLabels>
|
||||||
|
</View>
|
||||||
|
`,
|
||||||
|
taskId: undefined, // 当前选中的任务 ID
|
||||||
|
leftIcons: [
|
||||||
|
'el-icon-circle-plus-outline',
|
||||||
|
'el-icon-remove-outline',
|
||||||
|
'el-icon-search',
|
||||||
|
'el-icon-search',
|
||||||
|
'el-icon-search',
|
||||||
|
'el-icon-search'
|
||||||
|
], // 顶部左侧按钮的图标
|
||||||
|
count: 600,
|
||||||
|
annotationType: 0,
|
||||||
|
images: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadTaskList(); // 初始化时加载任务列表
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 更新项的索引并切换任务数据
|
||||||
|
updateItemIndex(val) {
|
||||||
|
const item = this.images[val];
|
||||||
|
this.images[val - 1].fileAnnotationStatus = '1';
|
||||||
|
this.itemIndex = val;
|
||||||
|
this.updateTaskData(item);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载未标注的任务列表
|
||||||
|
loadTaskList() {
|
||||||
|
getMyNoAnnotatedTask().then(res => {
|
||||||
|
this.taskList = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据任务ID选择审核并加载对应的文件
|
||||||
|
selectTask(id) {
|
||||||
|
this.resetImages();
|
||||||
|
this.taskId = id;
|
||||||
|
this.fetchImages();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换标注类型并加载任务文件
|
||||||
|
toggleSelected(type) {
|
||||||
|
if (this.annotationType === type) return;
|
||||||
|
this.annotationType = type;
|
||||||
|
this.resetImages();
|
||||||
|
this.fetchImages();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置标注项，更新任务数据和标注结果
|
||||||
|
setItem(item, index) {
|
||||||
|
this.annotationResult = JSON.parse(item.annotationResult);
|
||||||
|
this.itemIndex = index;
|
||||||
|
this.updateTaskData(item);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置图像数据
|
||||||
|
resetImages() {
|
||||||
|
this.images = [];
|
||||||
|
//this.annotationType = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取当前任务ID审核注类型的图像数据
|
||||||
|
fetchImages() {
|
||||||
|
if (!this.taskId) return;
|
||||||
|
getMyAuditFiles(this.annotationType, this.taskId).then(response => {
|
||||||
|
//alert(JSON.stringify(response))
|
||||||
|
this.itemIndex = 0;
|
||||||
|
this.images = response.data;
|
||||||
|
this.updateTaskData(
|
||||||
|
this.images[this.itemIndex]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新任务的数据
|
||||||
|
updateTaskData(item) {
|
||||||
|
if (item !== undefined){
|
||||||
|
this.task.data.image = `http://192.168.0.14:9090/bonus/${item.fileUrl}`;
|
||||||
|
this.task.id = item.fileId;
|
||||||
|
this.annotationResult = JSON.parse(item.annotationResult);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
/* 默认按钮样式 */
|
||||||
|
.el-button {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中时的样式 */
|
||||||
|
.el-button.is-selected {
|
||||||
|
background-color: #007bff !important; /* 设置选中背景色 */
|
||||||
|
border-color: #007bff !important; /* 设置选中边框色 */
|
||||||
|
color: white !important; /* 设置字体颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-main {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
/* 顶部样式 */
|
||||||
|
.top-part {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.top-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
|
||||||
|
.top-content-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px; /* 按钮之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-content-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.select-task {
|
||||||
|
flex-shrink: 0; /* 防止选择框缩小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部样式 */
|
||||||
|
.bottom-part {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
|
||||||
|
.bottom-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
|
||||||
|
.bottom-content-left,
|
||||||
|
.bottom-content-center,
|
||||||
|
.bottom-content-right {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-left {
|
||||||
|
width: 20%;
|
||||||
|
|
||||||
|
.bottom-content-left-bottom,
|
||||||
|
.bottom-content-left-top {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-left-top {
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-left-bottom {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none; /* 移除默认的点样式 */
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
padding-left: 2px;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer; /* 手势效果 */
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
appearance: none; /* 隐藏默认复选框样式 */
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border: 1px solid #4d4e51;
|
||||||
|
border-radius: 4px; /* 圆角方框 */
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked::after {
|
||||||
|
content: '✔'; /* 显示勾符号 */
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked {
|
||||||
|
background-color: rgb(64, 158, 255); /* 改变选中颜色 */
|
||||||
|
border-color: rgb(64, 158, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 针对自定义滚动条样式 */
|
||||||
|
ul::-webkit-scrollbar {
|
||||||
|
cursor: default; /* 对滚动条自定义光标 */
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #888;
|
||||||
|
cursor: pointer; /* 手势效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
ul::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-center {
|
||||||
|
width: 80%;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-right {
|
||||||
|
width: 20%;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.bottom-content-right-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.bottom-content-right-top {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-right-middle {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content-right-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #dfe4ed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlighted {
|
||||||
|
color: rgb(64, 158, 255); /* 选中项文本颜色 */
|
||||||
|
font-size: 16px; /* 选中项字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue