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>
.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 {
color: #000000;
font-weight: bold;
......@@ -29,72 +19,132 @@
.empInfo_Dialog .normalName {
color: #999999;
font-size:12px;
}
.empInfo_Dialog .normalInner {
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>
<template>
<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">
<div class="drawerTop">
<div style="display:flex;align-items:center;">
<q-avatar size="md" v-if="saveObj.UserIcon">
<img :src="saveObj.UserIcon" />
</q-avatar>
<q-avatar size="md" color="teal-10" text-color="white"
style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="!saveObj.UserIcon">
<div class="Employee_Top">
<div style="display:flex;">
<div>
<q-avatar size="60px" v-if="saveObj.UserIcon">
<img :src="saveObj.UserIcon" />
</q-avatar>
<q-avatar size="60px" color="teal-10" text-color="white" v-if="!saveObj.UserIcon">
{{saveObj.EmployeeName.substring(0,1)}}</q-avatar>
<div class="className">
<div class="classFirst">{{saveObj.EmployeeName}}</div>
</div>
<div class="Employee_Name">
<div>姓名</div>
<div>{{saveObj.EmployeeName}}</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 style="margin:20px;font-size:12px;">
<div class="row wrap ">
<div class="col-6">
<span class="normalName">公司</span>
<span class="normalInner">{{saveObj.SchoolName}}</span>
</div>
<div class="col-6">
<span class="normalName">部门</span>
<span class="normalInner"> {{saveObj.DeptName}}</span>
</div>
<div class="col-6">
<span class="normalName">岗位</span>
<span class="normalInner">{{saveObj.PostName}}</span>
</div>
<div class="col-6">
<span class="normalName">电话</span>
<span class="normalInner">{{saveObj.EmployeeTel}}</span>
</div>
<div class="Emloyee_CompanyInfo">
<div>
<div class="normalName">公司</div>
<div class="normalInner">{{saveObj.SchoolName}}</div>
</div>
<div>
<div class="normalName">部门</div>
<div class="normalInner">{{saveObj.DeptName}}</div>
</div>
<div>
<div class="normalName">岗位</div>
<div class="normalInner">{{saveObj.PostName}}</div>
</div>
<div>
<div class="normalName">电话</div>
<div class="normalInner">{{saveObj.EmployeeTel}}</div>
</div>
</div>
<q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
<q-tab :ripple="false" name="first" label="行政备注" />
<q-tab :ripple="false" name="second" label="详细资料" />
<q-tab :ripple="false" name="third" label="日志记录" />
<q-tab :ripple="false" name="fourth" label="附件" />
<q-tab :ripple="false" name="fifth" label="财务单据" />
</q-tabs>
<div v-if="tabCheck=='first'" style="margin:0 15px;">
<div class="employee_MenuList">
<span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}"
v-for="(item,index) in menuList" :key="index">{{item.name}}
</span>
</div>
<div v-if="tabCheck==0" style="margin:0 15px;">
<employeeRemark :saveObj="saveObj"></employeeRemark>
</div>
<div v-if="tabCheck=='second'">
<div v-if="tabCheck==1">
<employeeDetails :saveObj="saveObj"></employeeDetails>
</div>
<div v-if="tabCheck=='third'">
<div v-if="tabCheck==2">
<employeeLog :saveObj="saveObj"></employeeLog>
</div>
<div v-if="tabCheck=='fourth'">
<div v-if="tabCheck==3">
<employeeFile :saveObj="saveObj"></employeeFile>
</div>
<div v-if="tabCheck=='fifth'">
<div v-if="tabCheck==4">
<employeeFinace :saveObj="saveObj"></employeeFinace>
</div>
</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>
</template>
......@@ -121,8 +171,25 @@
data() {
return {
persistent: true,
tabCheck: 'first', //默认选第一个
tabCheck: 0, //默认选第一个
loading: false,
checkedIndex:0,
menuList:[{
name:'行政备注',
id:0
},{
name:'详细资料',
id:1
},{
name:'日志记录',
id:2
},{
name:'附件',
id:3
},{
name:'财务单据',
id:4
}]
}
},
created() {},
......@@ -133,7 +200,12 @@
closeShenheForm() {
this.persistent = false;
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>
<div class="EmployeeRemark">
<q-input filled stack-label maxlength="20" :dense="false" v-model="saveMsg.Content" ref="Content"
class="col-6 q-pr-lg q-pb-lg" label="备注信息" />
<q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType"
:options="RemarkTypeList" label="内容内心" :dense="false" class="col-3 q-pr-lg " emit-value map-options />
<div class="col-3 q-pb-lg q-pt-lg">
<q-toggle size="md" label="公文" color="primary" :false-value="0" :true-value="1" v-model="saveMsg.IsAddNotice" />
<q-input filled v-model="saveMsg.Content" class="col-12 row-2" maxlength="100" label="备注信息" type="textarea" />
<div class="col" style="display:flex;width:100%;margin:30px 0;align-items:center;">
<div style="width:50%">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="saveMsg.RemarkType" ref="RemarkType"
:options="RemarkTypeList" label="内容类型" :dense="false" class="q-pr-lg " emit-value map-options />
</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>
<q-btn label="发布" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
@click="saveRemark" />
<div class="LogList">
<q-timeline>
<template v-for="(item,index) in remarkList">
<q-timeline-entry>
<template v-slot:title>
{{item.CreateStr}}
<span class="LogList_Create">{{item.CreateStr}}</span>
</template>
<div v-for="(subItem,subIndex) in item.AccountRemarkList">
{{subItem.RemarkType}}(图标) {{subItem.CreateTimeStr}} {{subItem.CreateByName}} {{subItem.Content}}
<div v-for="(subItem,subIndex) in item.AccountRemarkList" class="LogList_Item">
<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>
</q-timeline-entry>
</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