Files
fe-manage/src/views/lecturer/LecturerAPPEdit.vue
2024-11-12 16:18:30 +08:00

967 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="appedit">
<div class="header">
<div class="headerTitle">编辑讲师费审批</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="content">
<div class="title">
<div class="line"></div>
<div class="text">基本信息</div>
</div>
<div class="desc">
<a-descriptions :column="2" bordered>
<a-descriptions-item label="培训发生组织编号">{{formData?.code||'-'}}</a-descriptions-item>
<a-descriptions-item label="培训发生组名称">{{formData?.trainOrgName||'-'}}</a-descriptions-item>
<a-descriptions-item label="是否为根节点">{{formData?.isParent==1?'否':'是'}}</a-descriptions-item>
<a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
<a-descriptions-item label="状态">
{{{0:'待确认' ,1:'待提交' ,2:'审核中', 3:'审核通过', 4:'审核拒绝'}[formData?.status]}}
</a-descriptions-item>
</a-descriptions>
</div>
<div class="title">
<div class="line"></div>
<div class="text">基本信息</div>
</div>
<div class="desc">
<div class="input_box">
<div class="input">
<a-input style="height:40px;border-radius:8px;" v-model:value="params.userNoName" placeholder="请输入工号/讲师名称进行搜索" allowClear />
</div>
<div class="input">
<a-range-picker style="height:40px;border-radius:8px;" @change="dateChange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model:value="dateValue" />
</div>
<div class="input">
<a-button style="margin-right: 15px;height:40px;border-radius:8px;" type="primary" @click="search">搜索</a-button>
<a-button style="height:40px;border-radius:8px;" type="primary" @click="reset">重置</a-button>
</div>
</div>
<div style="margin-bottom: 20px;">
<a-button @click="searchResetPrevious()" type="primary" class="langbtn" style="width: 150px; height: 40px; border-radius: 8px" >
重新汇总讲师费
</a-button>
</div>
<div class="table">
<a-table
:columns="columns"
:dataSource="dataList"
:loading="loading"
:scroll="{ x: 'max-content' }"
:pagination="pagination"
>
<template #appEdit="{ record }">
<a-button type="link" :disabled="record.createFrom==1 ?false :true" @click="edit(record)">编辑</a-button>
<a-button type="link" @click="recome(record)">移除</a-button>
</template>
</a-table>
</div>
</div>
</div>
<div class="btnn">
<button class="btn2" @click="closeDrawer">取消</button>
<button class="btn2" @click="paramsDrawer">提交</button>
</div>
</div>
<a-drawer v-model:visible="teacherdialog" placement="right" @closa="cancelTeacherDialog" :maskClosable="true" dropdown-style="drawaer"
width="60%" title="编辑讲师费">
<a-form :model="formParam" :rules="rules" layout="vertical" ref="formRef" >
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师名称" name="name">
<SearchTeacher @tlevel="tlevelChange" v-model:id="formParam.teacherId" v-model:value="formParam.name" v-model:orgId="formParam.orgId" v-model:lable="formParam.orgName" v-model:user="formParam.userNo"
v-model:system="tSystemNames" v-model:payrollPlaceCode="formParam.payrollPlaceId"
v-model:payrollPlaceName="formParam.payrollPlace" v-model:level="formParam.tlevelId" ></SearchTeacher>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师工号" name="userNo">
<a-input class="draitem" v-model:value="formParam.userNo" disabled
placeholder="请输入讲师工号" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师组织" name="orgName">
<a-popover>
<template #content>
{{ formParam.orgName }}.
</template>
<a-input disabled v-model:value="formParam.orgName" class="draitem"
placeholder="自动带出讲师的组织,展示主要部分,鼠标浮上去展示所有" allowClear showSearch>
</a-input>
</a-popover>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师体系" name="tsystemName">
<a-input disabled v-model:value="tSystemNames.systemName" class="draitem"
placeholder="自动带出讲师的体系" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="讲师级别" name="tlevelName">
<a-input disabled v-model:value="formParam.tlevelName" class="draitem"
placeholder="自动带出讲师级别" allowClear showSearch>
</a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="讲师发薪地" name="payrollPlace ">
<a-input disabled v-model:value="formParam.payrollPlace" class="draitem"
placeholder="自动带出讲师发薪地" allowClear showSearch >
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="费用类型" name="courseType">
<a-select class="draitem" v-model:value="formParam.courseType" placeholder="请选择费用类型"
:options="courseTypeList">
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="课程名称" name="courseName ">
<a-input v-model:value="formParam.courseName" placeholder="请输入面授课名称" class="draitem">
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="授课/课程日期 :" name="teachingDate">
<a-date-picker class="draitem" v-model:value="teachingDate" style="width:100%" format="YYYY-MM-DD"
placeholder="请选择课程日期" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="授课时长" name="teachingTime">
<a-input v-model:value="formParam.teachingTime" style="width:80%; height: 40px; border-radius: 8px; "
@blur="clearNonNumber" placeholder="0" allowClear showSearch suffix="分钟">
</a-input>
<span style="margin-left: 5px ;" v-if="formParam.teachingTime != null">{{
(formParam.teachingTime / 60).toFixed(2) }}小时</span>
<span style="margin-left: 5px ;" v-if="formParam.teachingTime == null">0.00小时</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="参训人数" name="studys">
<a-input v-model:value="formParam.studys" class="draitem" @blur="clearstudysNumber"
placeholder="0 " allowClear showSearch >
</a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="评分" name="score">
<a-input class="draitem" v-model:value="formParam.score" placeholder="0"
@blur="clearscoreNumber" allowClear >
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="课酬基准" name="levelPay">
<a-input v-model:value="formParam.levelPay" placeholder="可手动更改"
@blur="clearlevelPayNumber"
allowClear class="draitem">
</a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="计划费用" name="expense">
<a-input class="draitem" v-model:value="formParam.expense" placeholder="" allowClear disabled
showSearch>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="应发费用" name="payableExpense">
<a-input v-model:value="formParam.payableExpense" class="draitem"
placeholder="0 " allowClear>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="备注">
<a-textarea v-model:value="formParam.remark" showCount :maxlength="200"
style="width: 100%; height: 100px; border-radius: 8px ;margin-bottom:50px" placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<div :style="{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
zIndex: 1,
}">
<a-button class="drabtn" @click="cancelTeacherDialog">取消</a-button>
<a-button class="drabtn" type="primary" @click="createTeacherDialog">保存
</a-button>
</div>
</a-drawer>
<a-modal
:visible="modalVisible"
:footer="null"
:title="null"
:centere="true"
:closable="false"
style="margin-top: 400px"
:zIndex="9"
@cancel="close"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icons">
<img src="@/assets/images/coursewareManage/QR.png" alt=""/>
</div>
<span>提示</span>
<div class="close_exit" @click="close"></div>
</div>
<div class="body">
<div style="margin-top: 30px;">
<span>自动添加的讲师费不可直接编辑需在数据源头进行修改</span>
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn2" @click="close">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="handleConfirm">
<div class="btnText">复制课程名称</div>
</div>
</div>
</div>
</div>
</a-modal>
</template>
<script lang="jsx">
import { ref, reactive,toRefs,watch,onMounted,computed } from 'vue'
import { submitApproval,updateTeacherFee,getTeacherFeeDetail,withdrawRecord,queryById,queryExpnseByBillId,CreateSummaryAgain, } from "../../api/lecturerFeeManagement";
import SearchTeacher from "@/components/project/SearchTeacher";
import { useRouter,useRoute } from 'vue-router'
import dialog from '@/utils/dialog'
import dayjs from "dayjs";
import { message } from 'ant-design-vue';
export default {
components: {
SearchTeacher,
},
setup () {
const router = useRouter()
const route = useRoute()
const state = reactive({
params: {
pageNo: 1,
pageSize: 10,
total: 100,
userNoName: null,
startTime: null,
endTime: null,
},
paramsId: route.query.id,
copyName: null,
modalVisible: false,
tSystemNames:{
systemName:null,
systemId: null,
levelVoList: []
},
teachingDate:null,
formData: {
},
formParam: {
teachingDate:null ,
teachingTime:null,
name: null,
userNo: null,
payrollPlace: null,
payrollPlaceId: null,
orgName:null,
tsystemName:null,
tlevelId:null,
courseType: null,
courseName:null,
studys:null,
teacherlevelPay:null,
score:null,
levelPay:null,
payableExpense:null,
expense:null,
remark:null,
},
teacherdialog: false,
dateValue: [],
dataList: [],
loading: false,
})
onMounted(()=>{
queryById({id: state.paramsId}).then(res=>{
state.formData = res.data.data
})
getTableList()
})
const getTableList = () => {
state.loading = true
queryExpnseByBillId({
id: state.paramsId,
pageNo: state.params.pageNo,
pageSize: state.params.pageSize,
name: state.params.userNoName,
startTime: state.params.startTime,
endTime: state.params.endTime
}).then(res => {
state.dataList = res.data.data.records
state.params.total = Number(res.data.data.total);
state.loading = false
})
}
const dateChange = (e) => {
if(e){
state.params.startTime = e[0];
state.params.endTime = e[1];
}else{
state.params.startTime = null;
state.params.endTime = null;
}
}
const pagination = computed(() => ({
total: state.params.total,
showSizeChanger: false,
showQuickJumper:true,
current: state.params.pageNo,
pageSize: state.params.pageSize,
onChange: paginationChange,
}));
const paginationChange = (e,pageSize) => {
state.params.pageNo = e;
state.params.pageSize = pageSize
getTableList();
};
const close = () => {
state.modalVisible = false;
state.copyName = null;
}
const search = () => {
state.params.pageNo = 1
getTableList()
}
const reset = () => {
state.params.userNoName = null
state.params.startTime = null
state.params.endTime = null
state.dateValue = []
search()
}
const searchResetPrevious = () => {
dialog({
content: '正在重新汇总数据,请稍后...',
ok: () => {
CreateSummaryAgain().then(res=>{
search();
}).catch(err=>{
message.error(err.data.msg)
})
}
})
}
const handleConfirm = () => {
navigator.clipboard.writeText(state.copyName).then(() => {
message.success('复制成功')
close()
}).catch(() => {
message.error('复制失败,请重新尝试')
});
}
const clearlevelPayNumber = () => {
state.formParam.levelPay = state.formParam?.levelPay.replace(/\D/g, '');
state.formParam.expense = state.formParam?.levelPay*state.formParam?.teachingTime
}
const clearscoreNumber= () => {
state.formParam.score = state.formParam?.score?.replace(/\D/g, '');
}
const clearstudysNumber = () => {
state.formParam.studys = state.formParam?.studys?.replace(/\D/g, '');
}
const clearNonNumber = () => {
state.formParam.teachingTime = state.formParam?.teachingTime?.replace(/\D/g, '');
state.formParam.expense = state.formParam?.levelPay*state.formParam?.teachingTime
}
const courseTypeList = ref([
{ value: '0', label: "在线" },
{ value: '1', label: "面授 " },
{ value: '2', label: "授课 " },
{ value: '3', label: "课程开发" },
{ value: '4', label: "作业员如模培训" },
])
const formRef = ref();
const tlevelChange = (e) => {
state.formParam.tlevelName = e?.tlevelName
state.formParam.tlevelId = e?.tlevelId
}
watch(()=>state.formParam.name,(val)=>{
state.formParam.userNo = val?.split('/')[1]
})
async function validateField(name) {
return new Promise((resolve) => {
formRef.value.validateFields([name])
.then(() => {
resolve(false);
})
.catch(() => {
resolve(true);
});
});
}
const createTeacherDialog = async () => {
console.log(state.formParam,'formParam')
state.formParam.expense = String(state.formParam.expense)
state.formParam.teachingDate=state.teachingDate ? dayjs(state.teachingDate).format("YYYY-MM-DD").toString() : ""
state.formParam.tsystemName = state.tSystemNames.systemName
state.formParam.tsystemId = state.tSystemNames.systemId
const formItemNames = Object.keys(rules);
for(let i=0;i<formItemNames.length;i++){
const result = await validateField(formItemNames[i]);
if (result) {
return message.error(rules[formItemNames[i]][0].log)
}
}
state.formParam = {...state.formParam,...state.tSystemNames}
state.formParam.name = state.formParam?.name?.split('/')[0]
dialog({
content: '是否确定提交',
ok: ()=>{
updateTeacherFee(state.formParam).then(res => {
message.success("修改成功");
state.teacherdialog = false;
search()
});
}
})
};
const cancelTeacherDialog = () => {
formRef.value.resetFields();
state.teacherdialog = false
cancel()
};
const cancel = () => {
state.formParam ={
name:null,
userNo:null,
orgName:null,
tsystemName:null,
tlevelId:null,
payrollPlace:null,
courseType: null,
courseName:null,
teachingDate:null,
teachingTime:null,
studys:null,
teacherlevelPay:null,
score:null,
levelPay:null,
payableExpense:null,
expense:null,
remark:null,
}
state.teachingDate=null
state.tSystemNames = {
systemName:null,
systemId: null,
levelVoList: []
}
}
const rules = {
name: [{ required: true, message:'',log: '讲师不能为空' }],
userNo: [{ required: true, message: '',log:'讲师工号不能为空' }],
orgName: [{ required: true, message: '',log:'讲师组织不能为空' }],
tsystemName: [{ required: true, message:'',log: '讲师体系不能为空' }],
tlevelName: [{ required: true, message:'',log: ' 讲师级别 不能为空' }],
payrollPlace: [{ required: true, message:'',log: '讲师发薪地 不能为空' }],
courseType: [{ required: true, message: '',log:'费用类型不能为空' }],
courseName: [{ required: true, message:'',log: '课程名称不能为空' }],
teachingDate: [{ required: true, message:'',log: '授课日期不能为空' }],
teachingTime: [{ required: true, message:'',log: ' 授课时长不能为空' }],
studys: [{ required: true, message: '',log:' 参训人数不能为空' }],
score: [{ required: true, message:'',log: ' 评分不能为空' }],
levelPay: [{ required: true, message:'',log: '课酬基准 不能为空' }],
expense: [{ required: true, message: '',log:'计划费用不能为空' }],
}
const closeDrawer = () => {
reset()
router.push({
path: '/lecturerfeemanagement',
query:{activeKey:true}
})
}
const paramsDrawer = () => {
dialog({
content: '是否确定提交',
ok: ()=>{
submitApproval().then(res=>{
closeDrawer()
})
}
})
}
const edit = (record) => {
console.log(record,'record')
if(record.id == 2){
state.modalVisible = true;
state.copyName = record.name
return
}
state.teacherdialog = true
getTeacherFeeDetail({id : record.id||6}).then((res) => {
state.formParam=res.data.data
state.formParam.courseType = String(res.data.data.courseType)
state.formParam.levelPay = String(res.data.data.levelPay)
state.tSystemNames.systemName = res.data.data.tsystemName
state.tSystemNames.systemId = res.data.data.tsystemId
state.tSystemNames.systemCode = res.data.data.systemCode
state.tSystemNames.levelVoList = res.data.data.levelVoList
state.formParam.tlevelName = res.data.data.tlevelName
state.formParam.tlevelId = res.data.data.tlevelId
state.formParam.name = res.data.data.name+'/'+res.data.data.userNo
state.teachingDate = dayjs(res.data.data.teachingDate)
}).catch((err) => {
console.log("详情", err);
});
}
const recome = (record) => {
console.log(record,'record')
dialog({
content: '确定要移除此条数据吗?',
ok: () => {
withdrawRecord({
billId: 0,
ids: [record.id]
}).then(res=>{
message.success('移除成功')
search()
}).catch(err=>{
message.error(err.msg)
})
}
})
}
const columns = ref([
{
title: '讲师姓名 ',
dataIndex: 'name',
key: 'name',
elipsis: true,
align: "center",
width: 200,
},
{
title: '讲师工号',
dataIndex: 'userNo',
key: 'userNo',
align: "center",
elipsis: true,
width: 200,
},
{
title: '所属组织 ',
dataIndex: 'orgName',
key: 'orgName',
elipsis: true,
align: "center",
width: 300,
scopedSlots: { customRender: "teacherOrg" },
},
{
title: '讲师体系',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '讲师等级',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '发薪地',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '课程类型',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '课程名称',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '授课/开发课程日期',
dataIndex: 'teachingSystem',
key: 'teachingSystem',
elipsis: true,
align: "center",
width: 200,
},
{
title: '授课/开发课程时长 ',
dataIndex: 'teachingEnter',
key: 'teachingEnter',
elipsis: true,
align: "center",
width: 200,
},
{
title: '参训人数 ',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '评分 ',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '课程基准 ',
dataIndex: 'trainOrgName',
key: 'trainOrgName',
elipsis: true,
align: "center",
width: 200,
},
{
title: '计划费用 ',
dataIndex: 'expense',
key: 'expense',
elipsis: true,
align: "center",
width: 200,
},
{
title: '应发费用 ',
dataIndex: 'payableExpense',
key: 'payableExpense',
elipsis: true,
align: "center",
width: 200,
},
{
title: '操作 ',
dataIndex: 'operation',
key: 'operation',
elipsis: true,
align: "center",
fixed: "right",
width: 200,
slots: { customRender: "appEdit" },
},
])
return {
...toRefs(state),
columns,
closeDrawer,
paramsDrawer,
edit,
rules,
recome,
validateField,
tlevelChange,
createTeacherDialog,
cancelTeacherDialog,
formRef,
courseTypeList,
clearlevelPayNumber,
clearscoreNumber,
clearstudysNumber,
clearNonNumber,
close,
handleConfirm,
search,
dateChange,
getTableList,
reset,
searchResetPrevious,
pagination,
paginationChange,
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
height: 40px !important;
line-height: 40px;
border-radius: 8px
}
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{
border-radius:8px;
height:40px;
}
::v-deep .ant-descriptions-bordered .ant-descriptions-item-label{
width: 200px;
}
.delete {
min-width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icons {
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: 100% 100%;
}
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.title{
padding: 0 30px;
margin-top: 34px;
}
.body {
width: 100%;
padding: 0 30px;
margin: 34px auto 56px auto;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
.draitem{
width: 100%;
height: 40px !important;
border-radius: 8px;
line-height: 40px;
}
.drabtn{
height:40px;
width:80px;
border-radius:8px;
margin-right:20px
}
.appedit {
width: 100%;
// margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.header {
padding: 0px 32px;
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.content{
margin: 0px 32px;
padding-right: 20px;
.title{
display: flex;
align-items: center;
margin-bottom: 20px;
.line{
width: 5px;
height: 15px;
background: #4ea6ff;
margin-right: 10px;
}
.text{
}
}
.desc{
margin-bottom: 30px;
.input_box{
display: flex;
margin-bottom: 20px;
.input{
margin-right: 20px;
}
}
.table{
// padding-bottom: 70px;
}
}
}
.btnn {
padding: 0px 32px;
min-height: 70px;
border-top: 1px solid #e6e6e6;
display: flex;
align-items: center;
justify-content: end;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
</style>