<template>
<div class="detailResume_container">
<
el-form :inline="true" :mod
el="filterForm" class="demo
-form
-inline">
<!
-- 业绩区分选择器
-->
<
el-form
-item lab
el="工号">
<
el-input v
-mod
el="usernumber" placeholder="请输入工号"></
el-input>
</
el-form
-item>
<!
-- 审批状态选择器
-->
<
el-form
-item lab
el="姓名">
<
el-input v
-mod
el="username" placeholder="请输入姓名"></
el-input>
</
el-form
-item>
<
el-form
-item>
<
el-button type="primary" @click="handleQuery">查询</
el-button>
<
el-button type="primary" @click="resetFilter">重置</
el-button>
</
el-form
-item>
</
el-form>
<div class="tables_custom">
<
el-descriptions
title="基本信息"
class="
descriptions_custom"
:column="3"
border>
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
工号
</div>
</template>
{{ basicInfo.usernumber }}
</
el-descriptions-item>
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
姓名
</div>
</template>
{{ basicInfo.usernumber }}
</
el-descriptions-item>
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
Team别
</div>
</template>
{{ basicInfo.team }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
Group别
</div>
</template>
{{ basicInfo.group }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
Part别
</div>
</template>
{{ basicInfo.part }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
班次
</div>
</template>
{{ basicInfo.shift }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
Grade
</div>
</template>
{{ basicInfo.grade }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
当前等级
</div>
</template>
{{ basicInfo.certify }}
</
el-descriptions-item >
<
el-descriptions-item class="custom
-width
-item">
<template #lab
el>
<div class="c
ell
-item">
目标等级
</div>
</template>
{{ basicInfo.targetcertify }}
</
el-descriptions-item>
</
el-descriptions>
</div>
</div>
</template>
<script setup>
import { Odometer, EditPen, MagicStick } from "@
element
-plus/icons
-vue";
import { watch, ref, onMounted, computed } from "
vue";
import {
ElMessage,
ElMessageBox } from "
element
-plus";
import {
getMyEqpPowerScore,
getCurrentUser,
getMyCurrentCertify,
getMyHistoryEqpPowerScore,
getCertifiedCourses,
getZigeYangchengYeji,
getRuleDefineSB,
} from "@/api/myspace";
import { useRouter } from "
vue-router";
const basicInfo=ref({
usernumber:"",
username:"",
team:"",
group:"",
part:"",
shift:"",
grade:"",
certify:"",
targetcertify:""
})
const filterForm=ref({
usernumber:"",
username:""
})
</script>
<style scoped>
.detailResume_container {
display: flex;
flex
-direction: column;
height: 100%;
width: 100%;
}
.demo
-form
-inline .
el-input {
--el-input
-width: 220px;
}
.tables_custom{
width: 100%;
border-radius: 4px;
box
-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
transition: box
-shadow 0.3s ease
-in
-out;
background: #fff; /* 确保背景不透明 */
padding: 1%;
}
.
descriptions_custom{
width: 100%;
}
/*
自定义标签宽度 */
.tables_custom :deep(.custom
-width
-item .
el-descriptions__lab
el) {
width: 100px !important; /* 设置
标签宽度 */
min
-width: 100px !important; /* 最小宽度保证不压缩 */
background
-color: #0f63e09d; /* 可选背景色 */
font
-weight: bold;
text
-align: right; /* 文本右对齐 */
}
/*
自定义内容区域宽度 */
:deep(.custom
-width
-item .
el-descriptions__content) {
width: 250px;
padding
-left: 20px;
}
.c
ell
-item {
display: flex;
align
-items: center;
}
</style>现在自定
样式就没生效，改什么都没用
文章展示了如何仅修改HTML/CSS中的标签样式，提供了代码实例，并展示了不同情况下图例的调整。读者可通过点赞表示赞赏。
扫一扫
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
