Skip to content

C
confucius
Commit c8f850ee authored by zhengke's avatar zhengke
Browse files
Options

修改样式

parent 0b62701d
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 63 deletions
src/components/school/manager/employee-info.vue
View file @ c8f850ee
<style> <style>
.empInfo_Dialog .drawerTop {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
background-color: #F0F5FB;
padding: 5px 10px;
align-items: center;
}
.empInfo_Dialog .classFirst { .empInfo_Dialog .classFirst {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
...@@ -29,72 +19,132 @@ ...@@ -29,72 +19,132 @@
.empInfo_Dialog .normalName { .empInfo_Dialog .normalName {
color: #999999; color: #999999;
font-size:12px;
} }
.empInfo_Dialog .normalInner { .empInfo_Dialog .normalInner {
color: #111111; color: #111111;
font-weight: bold;
font-size:12px;
margin-top:5px;
} }
.Employee_Top{
display: flex;
margin:20px;
justify-content: space-between;
align-items: center;
}
.Employee_Top .q-avatar__content{
font-size:30px!important;
}
.Employee_Name{
margin:5px 0 0 10px;
color:#111111;
}
.Employee_Name div:first-child{
font-size:12px;
}
.Employee_Name div:last-child{
font-weight: bold;
margin-top:5px;
font-size:15px;
}
.Emloyee_CompanyInfo{
display: flex;
justify-content: space-between;
margin:0 18px 25px;
border-bottom:1px solid #d1d1d1;
padding-bottom:20px;
}
.empInfo_Dialog .employee_MenuList {
width: 96%;
margin:25px auto;
height: 40px;
border-radius: 3px!important;
border: 1px solid #2961FE;
color: #2961FE;
align-items: center;
font-size: 12px;
white-space: nowrap;
}
.empInfo_Dialog .checkedRole {
background-color: #2961FE;
color: #fff;
}
.empInfo_Dialog .employee_MenuList span {
padding:0 20px;
display: inline-block;
text-align: center;
height: 100%;
line-height: 38px;
cursor: pointer;
}
</style> </style>
<template> <template>
<q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm"> <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
<q-card style="margin-top:61px;width:800px" class="no-border-radius empInfo_Dialog"> <q-card style="margin-top:61px;width:800px" class="no-border-radius empInfo_Dialog">
<div class="drawerTop"> <div class="Employee_Top">
<div style="display:flex;align-items:center;"> <div style="display:flex;">
<q-avatar size="md" v-if="saveObj.UserIcon"> <div>
<img :src="saveObj.UserIcon" /> <q-avatar size="60px" v-if="saveObj.UserIcon">
</q-avatar> <img :src="saveObj.UserIcon" />
<q-avatar size="md" color="teal-10" text-color="white" </q-avatar>
style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="!saveObj.UserIcon"> <q-avatar size="60px" color="teal-10" text-color="white" v-if="!saveObj.UserIcon">
{{saveObj.EmployeeName.substring(0,1)}}</q-avatar> {{saveObj.EmployeeName.substring(0,1)}}</q-avatar>
<div class="className"> </div>
<div class="classFirst">{{saveObj.EmployeeName}}</div> <div class="Employee_Name">
<div>姓名</div>
<div>{{saveObj.EmployeeName}}</div>
</div> </div>
</div> </div>
<div>
<q-btn label="调岗" color="accent q-px-md" size="10px" style="font-weight:400 !important;margin-right:10px;" />
<q-btn label="调部门" color="accent q-px-md" size="10px" style="font-weight:400 !important;" />
</div>
</div> </div>
<div style="margin:20px;font-size:12px;"> <div class="Emloyee_CompanyInfo">
<div class="row wrap "> <div>
<div class="col-6"> <div class="normalName">公司</div>
<span class="normalName">公司</span> <div class="normalInner">{{saveObj.SchoolName}}</div>
<span class="normalInner">{{saveObj.SchoolName}}</span> </div>
</div> <div>
<div class="col-6"> <div class="normalName">部门</div>
<span class="normalName">部门</span> <div class="normalInner">{{saveObj.DeptName}}</div>
<span class="normalInner"> {{saveObj.DeptName}}</span> </div>
</div> <div>
<div class="col-6"> <div class="normalName">岗位</div>
<span class="normalName">岗位</span> <div class="normalInner">{{saveObj.PostName}}</div>
<span class="normalInner">{{saveObj.PostName}}</span> </div>
</div> <div>
<div class="col-6"> <div class="normalName">电话</div>
<span class="normalName">电话</span> <div class="normalInner">{{saveObj.EmployeeTel}}</div>
<span class="normalInner">{{saveObj.EmployeeTel}}</span>
</div>
</div> </div>
</div> </div>
<q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary"> <div class="employee_MenuList">
<q-tab :ripple="false" name="first" label="行政备注" /> <span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}"
<q-tab :ripple="false" name="second" label="详细资料" /> v-for="(item,index) in menuList" :key="index">{{item.name}}
<q-tab :ripple="false" name="third" label="日志记录" /> </span>
<q-tab :ripple="false" name="fourth" label="附件" /> </div>
<q-tab :ripple="false" name="fifth" label="财务单据" /> <div v-if="tabCheck==0" style="margin:0 15px;">
</q-tabs>
<div v-if="tabCheck=='first'" style="margin:0 15px;">
<employeeRemark :saveObj="saveObj"></employeeRemark> <employeeRemark :saveObj="saveObj"></employeeRemark>
</div> </div>
<div v-if="tabCheck=='second'"> <div v-if="tabCheck==1">
<employeeDetails :saveObj="saveObj"></employeeDetails> <employeeDetails :saveObj="saveObj"></employeeDetails>
</div> </div>
<div v-if="tabCheck=='third'"> <div v-if="tabCheck==2">
<employeeLog :saveObj="saveObj"></employeeLog> <employeeLog :saveObj="saveObj"></employeeLog>
</div> </div>
<div v-if="tabCheck=='fourth'"> <div v-if="tabCheck==3">
<employeeFile :saveObj="saveObj"></employeeFile> <employeeFile :saveObj="saveObj"></employeeFile>
</div> </div>
<div v-if="tabCheck=='fifth'"> <div v-if="tabCheck==4">
<employeeFinace :saveObj="saveObj"></employeeFinace> <employeeFinace :saveObj="saveObj"></employeeFinace>
</div> </div>
</q-card> </q-card>
<div class="dialog-out-close" @click="closeShenheForm"
style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
<q-icon name="iconfont icon-jujue1" size="26px" />
</div>
</q-dialog> </q-dialog>
</template> </template>
...@@ -121,8 +171,25 @@ ...@@ -121,8 +171,25 @@
data() { data() {
return { return {
persistent: true, persistent: true,
tabCheck: 'first', //默认选第一个 tabCheck: 0, //默认选第一个
loading: false, loading: false,
checkedIndex:0,
menuList:[{
name:'行政备注',
id:0
},{
name:'详细资料',
id:1
},{
name:'日志记录',
id:2
},{
name:'附件',
id:3
},{
name:'财务单据',
id:4
}]
} }
}, },
created() {}, created() {},
...@@ -133,7 +200,12 @@ ...@@ -133,7 +200,12 @@
closeShenheForm() { closeShenheForm() {
this.persistent = false; this.persistent = false;
this.$emit('close'); this.$emit('close');
} },
//点击切换
getItem(item,index){
this.checkedIndex=index;
this.tabCheck=item.id;
},
}, },
} }
......
src/components/school/manager/employee-remark.vue
View file @ c8f850ee
<style>
.EmployeeRemark .LogList {
height: 380px;
overflow: auto;
}
.EmployeeRemark .LogList_Create {
color: #2D2D2D;
font-size: 14px;
font-weight: bold;
}
.EmployeeRemark .LogList_Item {
display: flex;
font-size: 13px;
align-items: center;
margin-bottom: 5px
}
.EmployeeRemark .LogList::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
/*!*定义滚动条轨道 内阴影+圆角*!*/
.EmployeeRemark .LogList::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*!*定义滑块 内阴影+圆角*!*/
.EmployeeRemark .LogList::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-color: #0ae;
}
</style>
<template> <template>
<div class="EmployeeRemark"> <div class="EmployeeRemark">
<q-input filled stack-label maxlength="20" :dense="false" v-model="saveMsg.Content" ref="Content" <q-input filled v-model="saveMsg.Content" class="col-12 row-2" maxlength="100" label="备注信息" type="textarea" />
class="col-6 q-pr-lg q-pb-lg" label="备注信息" /> <div class="col" style="display:flex;width:100%;margin:30px 0;align-items:center;">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType" <div style="width:50%">
:options="RemarkTypeList" label="内容内心" :dense="false" class="col-3 q-pr-lg " emit-value map-options /> <q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType"
<div class="col-3 q-pb-lg q-pt-lg"> :options="RemarkTypeList" label="内容类型" :dense="false" class="q-pr-lg " emit-value map-options />
<q-toggle size="md" label="公文" color="primary" :false-value="0" :true-value="1" v-model="saveMsg.IsAddNotice" /> </div>
<div style="width:50%;display:flex;justify-content: space-between;height:30px;">
<q-toggle size="md" label="公文" color="primary" :false-value="0" :true-value="1" v-model="saveMsg.IsAddNotice" />
<q-btn label="发布" color="accent q-px-md" size="12px" style="font-weight:400 !important" :loading="saveLoading"
@click="saveRemark" />
</div>
</div> </div>
<q-btn label="发布" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
@click="saveRemark" />
<div class="LogList"> <div class="LogList">
<q-timeline> <q-timeline>
<template v-for="(item,index) in remarkList"> <template v-for="(item,index) in remarkList">
<q-timeline-entry> <q-timeline-entry>
<template v-slot:title> <template v-slot:title>
{{item.CreateStr}} <span class="LogList_Create">{{item.CreateStr}}</span>
</template> </template>
<div v-for="(subItem,subIndex) in item.AccountRemarkList"> <div v-for="(subItem,subIndex) in item.AccountRemarkList" class="LogList_Item">
{{subItem.RemarkType}}(图标) {{subItem.CreateTimeStr}} {{subItem.CreateByName}} {{subItem.Content}} <img v-if="subItem.RemarkType==1" src="../../../assets/images/myimg/type1.png" />
<img v-if="subItem.RemarkType==2" src="../../../assets/images/myimg/type2.png" />
<img v-if="subItem.RemarkType==3" src="../../../assets/images/myimg/type3.png" />&nbsp;
{{subItem.CreateTimeStr}}
{{subItem.CreateByName}}
{{subItem.Content}}
</div> </div>
</q-timeline-entry> </q-timeline-entry>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment