134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<!-- 工作考核 -->
|
||
|
|
<template>
|
||
|
|
<div class="side-bg">
|
||
|
|
<TitleC title="工作考核"></TitleC>
|
||
|
|
<TitleD width="100">
|
||
|
|
<div
|
||
|
|
class="module_top_title"
|
||
|
|
v-for="(item, index) in label"
|
||
|
|
:key="index"
|
||
|
|
@click="clickMenuOption(item.id)"
|
||
|
|
:class="
|
||
|
|
item.check == true
|
||
|
|
? 'module_menu_selected'
|
||
|
|
: 'module_menu_notSelected'
|
||
|
|
"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</div>
|
||
|
|
</TitleD>
|
||
|
|
<div class="portrait_con conBox">
|
||
|
|
<div
|
||
|
|
class="portrait_con_options"
|
||
|
|
v-for="(item, index) in portraitList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<span>{{ index + 1 }}</span>
|
||
|
|
<span>{{ item.label }}</span>
|
||
|
|
</div>
|
||
|
|
<div>{{ item.value }}/50</div>
|
||
|
|
</div>
|
||
|
|
<div><el-slider disabled v-model="item.value" max="50" /></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||
|
|
export default defineComponent({
|
||
|
|
name: "WorkSituation",
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script setup lang='ts'>
|
||
|
|
const label = ref([
|
||
|
|
{ title: "各干部", check: true, id: 0 },
|
||
|
|
{ title: "村(社区)", check: false, id: 1 },
|
||
|
|
]);
|
||
|
|
const clickMenuOption = (id: any) => {
|
||
|
|
label.value.forEach((item) => {
|
||
|
|
item.check = false;
|
||
|
|
});
|
||
|
|
label.value[id].check = true;
|
||
|
|
};
|
||
|
|
const portraitList = ref([
|
||
|
|
{ label: "某某人-职位", value: 48 },
|
||
|
|
{ label: "某某人-职位", value: 40 },
|
||
|
|
{ label: "某某人-职位", value: 38 },
|
||
|
|
{ label: "某某人-职位", value: 18 },
|
||
|
|
{ label: "某某人-职位", value: 48 },
|
||
|
|
]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.portrait_con {
|
||
|
|
width: 100%;
|
||
|
|
height: 214px;
|
||
|
|
padding: 10px 21px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.portrait_con::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.portrait_con_options {
|
||
|
|
margin-top: 2px;
|
||
|
|
> div:nth-child(1) {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
> div:nth-child(1) {
|
||
|
|
> span:nth-child(1) {
|
||
|
|
display: inline-block;
|
||
|
|
width: 24px;
|
||
|
|
height: 16px;
|
||
|
|
border: 1px solid #ff7734;
|
||
|
|
line-height: 14px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgba(255, 119, 52, 0.3);
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ff7734;
|
||
|
|
}
|
||
|
|
> span:nth-child(2) {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ffffff;
|
||
|
|
margin-left: 9px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> div:nth-child(2) {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Furore, Furore;
|
||
|
|
font-weight: normal;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> div:nth-child(2) {
|
||
|
|
margin-top: -5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .el-slider__bar {
|
||
|
|
background: linear-gradient(270deg, #00c7e6 0%, #0088ff 100%);
|
||
|
|
height: 6px;
|
||
|
|
margin: 2px 0px;
|
||
|
|
border-radius: 0%;
|
||
|
|
}
|
||
|
|
::v-deep .el-slider__button {
|
||
|
|
margin-top: 4px;
|
||
|
|
border-radius: 3px;
|
||
|
|
width: 2px;
|
||
|
|
height: 10px;
|
||
|
|
border: 0px;
|
||
|
|
background-color: rgba(255, 255, 255, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-slider__runway {
|
||
|
|
border-radius: 0%;
|
||
|
|
height: 10px;
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
</style>
|