web-base-admin/src/views/information/specialBusiness/waterPv.vue

1158 lines
32 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="page">
<topBar
v-if="topList.length > 0"
:top-list="topList"
:moren="moren"
/>
<div v-if="topList[3].changed == true">
<div class="thetopbox">
<el-form ref="queryParams" :model="queryParams" label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input v-model="queryParams.memberCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员姓名'" prop="memberName">
<el-input v-model="queryParams.memberName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'真实奖衔'">
<el-select
v-model="queryParams.pkAwards"
clearable
placeholder=""
>
<el-option
v-for="item in awardsList"
:key="item.pkId"
:label="item.awardsName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'隶属体系'">
<el-select
v-model="queryParams.pkVertex"
clearable
placeholder=""
>
<el-option
v-for="item in verList"
:key="item.value"
:label="item.vertexName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'隶属团队'">
<el-select
v-model="queryParams.pkTeamCode"
clearable
placeholder=""
>
<el-option
v-for="item in memberList"
:key="item.value"
:label="item.teamName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'注水状态'">
<el-select
v-model="queryParams.waterStatus"
clearable
placeholder=""
>
<el-option
v-for="item in waterStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'注水方式'">
<el-select
v-model="queryParams.infusingWaterType"
clearable
placeholder=""
>
<el-option
v-for="item in waterWayList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'注水日期'" prop="pkSettleCountry">
<el-date-picker
v-model="zsDate"
value-format="yyyy-MM-dd"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeZsDate"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'结束日期'" prop="pkSettleCountry">
<el-date-picker
v-model="jsDate"
value-format="yyyy-MM-dd"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeJsDate"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<div class="searchbox" style="margin-left: 30px">
<el-button class="searchbtn" @click="getSearch()">
{{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
</div>
</el-col>
</el-row>
</el-form>
</div>
<div class="main">
<div class="maintop">
<div class="mainbtn">
<el-button
v-hasButtons="['WaterPvUpdate']"
size="small"
class="thebtn1"
@click="updateCode()"
>{{ '注水业绩' }}</el-button>
<el-button
v-hasButtons="['WaterPvExport']"
size="small"
class="thebtn2"
@click="handleExport"
>
{{ '导出' }}</el-button>
</div>
<div>
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link kuang" style="margin-right: 10px">
{{ '筛选字段'
}}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu
slot="dropdown"
style="overflow: auto; height: 70%"
>
<el-dropdown-item v-for="item in menuList" :key="item.id">
<el-checkbox
v-model="item.checked"
@change="getMenu($event, item.id)"
>{{ item.text }}</el-checkbox></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="maintable">
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
height="620px"
>
<el-table-column
align="center"
prop="memberCode"
min-width="120px"
:label="'会员编号'"
/>
<el-table-column
align="center"
prop="memberName"
:label="'会员姓名'"
/>
<el-table-column
align="center"
prop="awardsVal"
:label="'真实奖衔'"
/>
<el-table-column
align="center"
prop="vertexName"
:label="'隶属体系'"
/>
<el-table-column
align="center"
prop="teamName"
:label="'隶属团队'"
/>
<el-table-column
v-for="(item, index) in headerList"
:key="index"
align="center"
:prop="item.prop"
:label="item.text"
min-width="180px"
/>
<el-table-column
align="center"
prop="infusingWaterTypeVal"
:label="'注水方式'"
/>
<el-table-column
align="center"
prop="settleDate"
:label="'注水日期'"
min-width="150px"
/>
<el-table-column
align="center"
prop="dueDate"
min-width="150px"
:label="'结束日期'"
/>
<el-table-column
align="center"
prop="waterStatusVal"
:label="'注水状态'"
/>
</el-table>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getSearch"
/>
<el-dialog
title="注水业绩"
:visible.sync="updateShow"
width="80%"
:close-on-click-modal="false"
center
class="updateClass"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item :label="'操作类型'">
<el-select
v-model="form.czlx"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in cztypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-row style="margin-top: 10px">
<el-col :span="6">
<el-form-item :label="'会员编号'">
<el-input
v-model="form.memberCode"
clearable
style="width: 200px"
@blur="checkName"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'会员姓名'">
<el-input
v-model="form.memberName"
clearable
style="width: 200px"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-button
style="background-color: #c8161d; color: #fff"
@click="getDataList"
>
{{ '搜索' }}</el-button>
<el-button @click="reset"> {{ '重置' }}</el-button>
</el-col>
</el-row>
<template v-if="form.czlx == 2">
<div class="mainbtn">
<el-button
size="small"
class="thebtn1"
style="background: #ff6723"
@click="handleImport"
>
{{ '导入' }}</el-button>
<el-button
size="small"
class="thebtn2"
style="background: #009b58"
@click="importTemplate"
>
{{ '下载模板' }}</el-button>
</div>
</template>
<div class="tableBox" style="padding: 0">
<el-form-item :label="'业务类型'">
<el-checkbox-group v-model="form.waterTypeList" :min="1">
<el-checkbox
v-for="item in waterTypeList"
:key="item.value"
:label="item.value"
@change="changeAccountType"
>{{ item.label }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="'注水方式'">
<el-radio-group v-model="form.infusingWaterType">
<el-radio
v-for="(item, index) in waterWayList"
:key="index"
:label="item.value"
>{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-table
:data="waterPvList"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
>
<el-table-column
min-width="120px"
align="center"
prop="memberCode"
:label="'会员编号'"
/>
<!-- CN30720201 -->
<el-table-column
min-width="100px"
align="center"
prop="memberName"
:label="'会员姓名'"
/>
<el-table-column
min-width="180px"
align="center"
prop="settleDate"
:label="'注水日期'"
>
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.settleDate"
type="date"
:placeholder="'请选择'"
value-format="yyyy-MM-dd"
style="width: 160px"
@change="changeSettleData(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
min-width="180px"
align="center"
prop="dueDate"
:label="'到期日期'"
>
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.dueDate"
type="date"
:placeholder="'请选择'"
value-format="yyyy-MM-dd"
style="width: 160px"
/>
</template>
</el-table-column>
<el-table-column
v-for="item in tableTitleList"
:key="item.value"
:label="item.label"
align="center"
:prop="item.field"
min-width="180px"
>
<template slot-scope="scope">
<el-input v-model="scope.row[`${item.field}`]" clearable />
</template>
</el-table-column>
<el-table-column
align="center"
prop="pkAccountKeyVal"
:label="'扣款币种'"
/>
<el-table-column
min-width="160px"
align="center"
prop="cost"
:label="'单笔扣款金额' + `(${isOther()})`"
/>
<el-table-column
align="center"
prop="remarks"
:label="'合计扣款金额' + `(${isOther()})`"
min-width="160px"
/>
</el-table>
</div>
</el-form>
<div class="footer">
<div style="margin: 0 auto">
<!-- <el-button
v-for="(item, index) in processTypeList"
:key="index"
:class="`thebtn${item.value}`"
@click="saveDate(item.value)"
>{{ item.label }}</el-button
> -->
<el-button class="thebtn0" @click="saveDate(0)">
{{ '取消' }}</el-button>
<!-- <el-button
v-hasButtons="['WaterPvExemptSign']"
class="thebtn1"
@click="saveDate(1)"
>{{ '免签' }}</el-button>
<el-button
v-hasButtons="['WaterPvExemptPay']"
class="thebtn2"
@click="saveDate(2)"
>{{ '免付' }}</el-button> -->
<!-- 走免的权限 -->
<el-button
v-hasButtons="['WaterPvExemptAll']"
class="thebtn3"
@click="saveDate(3)"
>确认</el-button>
<!-- <el-button
v-hasButtons="['WaterPvConfirm']"
class="thebtn4"
@click="saveDate(4)"
>
{{ '确认' }}</el-button> -->
</div>
</div>
</el-dialog>
<el-dialog
:title="upload.title"
:close-on-click-modal="false"
:visible.sync="upload.open"
width="600px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-exceed="handleExceed"
:auto-upload="false"
drag
>
<i class="el-icon-upload" />
<div class="el-upload__text">
{{ '将文件拖到此处,或' }}
<em>{{ '点击上传' }}</em>
</div>
<div slot="tip" class="el-upload__tip" style="color: red">
{{ '提示仅允许导入“xls”或“xlsx”格式文件' }}
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">{{
'确认'
}}</el-button>
<el-button @click="upload.open = false">{{
'取消'
}}</el-button>
</div>
</el-dialog>
<el-dialog
:title="'会员信息错误'"
:close-on-click-modal="false"
:visible.sync="errorShow"
width="600px"
append-to-body
>
<div>
<el-table
:data="errorData"
height="400px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
>
<el-table-column
align="center"
prop="memberCode"
:label="'会员编号'"
/>
<el-table-column
align="center"
prop="errorMsg"
:label="'报错信息'"
/>
</el-table>
</div>
<div class="footer" style="text-align: center">
<div style="margin: 0 auto">
<el-button class="thebtn" @click="errorShow = false">
{{ '取消' }}</el-button>
<el-button type="primary" class="thebtn" @click="errorShow = false">
{{ '确认' }}</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import * as spe from '@/api/specialBusiness'
import { getPubEnumsProcessTyepe, getHistoryAchieve } from '@/api/business.js'
import { getToken } from '@/utils/auth'
import { getMemberName } from '@/api/financial'
import { getAwardsListChiose } from '@/api/level'
import * as api from '@/api/settle.js'
import { getRouters } from '@/api/settle.js'
import { isOther } from '@/utils/numberToCurrency'
export default {
name: 'WaterPv',
components: { topBar },
data() {
return {
moren: 'waterPv',
topList: [
{
name: '空单注册',
path: 'emptyOrder',
changed: false
},
{
name: '修改直推',
path: 'modifyDirectpush',
changed: false
},
{
name: '修改安置',
path: 'modifyPlacement',
changed: false
},
{
name: '注水业绩',
path: 'waterPv',
changed: false
},
{
name: '修改编号',
path: 'modifyCode',
changed: false
},
{
name: '真实奖衔控制',
path: 'awardControl',
changed: false
},
{
name: '修改结算国家',
path: 'modifySettleCountry',
changed: false
},
{
name: '政策币业务',
path: 'policyMoney',
changed: false
},
{
name: '分红配置',
path: 'bonusConfig',
changed: false
}
],
queryParams: {
pageNum: 1,
pageSize: 50,
memberCode: '',
memberName: '',
startDate: '',
endtDate: '',
pkAwards: '',
pkTeamCode: '',
pkVertex: ''
},
tableTitleList: [],
tableData: [],
loading: false,
total: 0,
updateShow: false,
upload: {
// 是否显示弹出层(物流导入)
open: false,
// 弹出层标题(物流导入)
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的物流数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url:
process.env.VUE_APP_BASE_API +
'/member/manager/member-achieve-log/importData'
},
processTypeList: [],
zsDate: '',
jsDate: '',
form: {
czlx: 2,
waterTypeList: [], // 选中注水类型
memberCode: '',
memberName: '',
infusingWaterType: '' // 注水方式
},
cztypeList: [],
waterTypeList: [], // 注水类型
waterWayList: [], // 注水方式
waterStatusList: [], // 注水状态
waterPvList: [],
awardsList: [],
verList: [],
memberList: [],
menuList: [
{
id: 0,
text: '全选',
checked: true
},
{
id: 23,
text: `${'变更后左区业绩'}(${isOther()})`,
checked: true,
prop: 'afirstModifyPv'
},
{
id: 24,
text: `${'变更后右区业绩'}(${isOther()})`,
checked: true,
prop: 'bfirstModifyPv'
},
{
id: 25,
text: `${'变更后左区结余'}`,
checked: true,
prop: 'repAFirstModifyBalance'
},
{
id: 26,
text: `${'变更后右区结余'}`,
checked: true,
prop: 'repBFirstModifyBalance'
}
], // 表头筛选
headerList: [],
errorData: [],
errorShow: false
}
},
created() {
this.getSearch()
this.getOther()
this.getPubEnumsProcessTyepe()
this.getUserRoute()
this.getMenu()
},
methods: {
isOther,
changeSettleData(row) {
if (this.form.infusingWaterType) {
if (this.form.infusingWaterType == 3) {
getHistoryAchieve({
pkMember: row.pkMember,
settleDate: row.settleDate
}).then((res) => {
if (res.data) {
this.waterPvList.forEach((ele, index) => {
if (ele.pkMember == res.data.pkMember) {
const tedata = Object.assign({}, ele, res.data)
this.$set(this.waterPvList, index, tedata)
}
})
}
})
}
} else {
this.$message({
message: '请先选择注水方式',
type: 'warning'
})
this.waterPvList.forEach((ele, index) => {
if ((row.pkId = ele.pkId)) {
this.$set(this.waterPvList[index], 'settleDate', '')
}
})
return
}
},
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((_) => {
this.download(
'/member/manager/member-achieve-log/export',
{ ...this.queryParams },
`${'注水业绩'}${new Date().getTime()}.xlsx`
)
})
},
changeJsDate(val) {
this.queryParams.staDueDate = val ? val[0] : ''
this.queryParams.endDueDate = val ? val[1] : ''
},
changeZsDate(val) {
this.queryParams.startDate = val ? val[0] : ''
this.queryParams.endtDate = val ? val[1] : ''
},
getUserRoute() {
getRouters().then((res) => {
res.data.forEach((item) => {
this.topList.forEach((items) => {
if (item.path == items.url) {
items.changed = true
}
})
})
})
},
getMenu(e, id) {
if (e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', true)
})
const theList1 = []
this.menuList.forEach((ele) => {
if (ele.checked && ele.prop) {
theList1.push(ele)
}
})
this.headerList = theList1
} else if (!e && id == 0) {
this.menuList.forEach((item) => {
this.$set(item, 'checked', false)
})
const theList2 = []
this.menuList.forEach((ele) => {
if (ele.checked) {
theList2.push(ele)
}
})
this.headerList = theList2
} else {
const theList = []
this.menuList.forEach((ele) => {
if (ele.id != 0 && ele.checked) {
theList.push(ele)
}
})
this.headerList = theList
}
},
// 下载模板
importTemplate() {
this.download(
'/member/manager/member-achieve-log/download',
{},
`${'模板'}${new Date().getTime()}.xlsx`
)
},
getDataList() {
// 根据选中的会员查询会员业绩
spe
.getAchieveSearchList({
memberCode: this.form.memberCode
})
.then((res) => {
this.waterPvList = res.data
})
},
getOther() {
getAwardsListChiose().then((res) => {
this.awardsList = res.rows
})
// 获取隶属体系
api.vertexList().then((res) => {
this.verList = res.data
})
// 获取隶属团队
api.memberTeam().then((res) => {
this.memberList = res.rows
})
spe.getEmusBatchType().then((res) => {
this.cztypeList = res.data
})
spe.getMemberAchieve().then((res) => {
this.waterTypeList = res.data
this.waterTypeList.forEach((ele) => {
{
this.form.waterTypeList.push(ele.value)
}
})
this.changeAccountType()
})
spe.getMemberWaterType().then((res) => {
this.waterWayList = res.data
})
spe.getWaterStatus().then((res) => {
this.waterStatusList = res.data
})
},
// 根据会员编号查询会员姓名
checkName() {
getMemberName({ memberCode: this.form.memberCode }).then((res) => {
this.form.memberName = res.memberName
})
},
changeAccountType() {
var titles = []
if (this.form.waterTypeList.length > 0) {
this.form.waterTypeList.forEach((ele) => {
this.waterTypeList.forEach((item) => {
if (ele == item.value) {
titles.push({
value: item.value,
label: item.label,
field: item.field
})
this.tableTitleList = titles
}
})
})
} else {
this.tableTitleList = []
}
this.tableTitleList = titles
this.$forceUpdate()
},
saveDate(index) {
if (index == 0) {
this.updateShow = false
// this.$router.go(-1);
} else if (index == 2 || index == 4) {
// 免付和确认走签呈
spe
.saveInfusingWater({
infusingWaterType: this.form.infusingWaterType,
cmalvList: this.waterPvList,
processType: index
})
.then((res) => {
if (res.code == 200) {
this.$router.push({
path: 'waterZxqc',
query: {
data: JSON.stringify(res.data),
index: index,
businessType: 123
}
})
} else if (res.code == 504 && res.data) {
this.errorShow = true
this.errorData = res.data
}
})
} else {
const unSelectedField = this.waterTypeList.filter((item) =>
!this.form.waterTypeList.includes(item.value)
).map(item => item.field)
const waterPvList = this.waterPvList.map(item => {
const newItem = { ...item }
unSelectedField.forEach(field => {
delete newItem[field]
})
return newItem
})
spe
.saveInfusingWater({
infusingWaterType: this.form.infusingWaterType,
cmalvList: waterPvList,
processType: index
})
.then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
this.updateShow = false
this.getSearch()
} else if (res.code == 504 && res.data) {
this.errorShow = true
this.errorData = res.data
}
})
}
},
reset() {
this.form.memberCode = ''
this.form.memberName = ''
this.getDataList()
},
getPubEnumsProcessTyepe() {
getPubEnumsProcessTyepe().then((res) => {
this.processTypeList = res.data
})
},
handleDelete(row, index, rows) {
this.$confirm('是否删除').then((_) => {
rows.splice(index, 1)
})
},
getSearch() {
this.loading = true
spe.getMmeberAchieveList(this.queryParams).then((res) => {
this.loading = false
this.tableData = res.rows
this.total = res.total
})
},
reChongzhi() {
this.queryParams = {
pageNum: 1,
pageSize: 50,
memberCode: '',
memberName: '',
startDate: '',
endtDate: ''
}
this.zsDate = ''
this.jsDate = ''
this.getSearch()
},
updateCode() {
// if (this.idList.length > 0) {
// spe.getselectedCountry({ pkMemberList: this.idList }).then((res) => {
// this.waterPvList = res.data;
// });
// }
this.updateShow = true
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = '安置架构'
this.upload.open = true
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
var fileName = response.fileName
if (fileName != undefined && fileName != '') {
}
if (response.code == 200) {
this.waterPvList = response.data
}
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(response.msg, '导入结果', {
dangerouslyUseHTMLString: true
})
// this.getList();
},
// 上传文件数量超出后的动作
handleExceed() {
this.upload.isUploading = false
this.msgInfo('仅可上传一个文件哦')
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor--daterange.el-input__inner {
width: 100%;
}
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
::v-deep .el-table .success-row {
background: #ffffff;
}
::v-deep .el-table thead {
color: #000000;
}
.updateClass {
.footer {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
.thebtn0 {
width: 120px;
height: 38px;
}
.thebtn1 {
width: 120px;
height: 38px;
background: rgba(0, 155, 88, 1);
color: #ffffff;
border: none;
}
.thebtn2 {
width: 120px;
height: 38px;
background: rgba(243, 169, 0, 1);
border: none;
color: #ffffff;
}
.thebtn3 {
width: 120px;
height: 38px;
border: none;
color: #ffffff;
background: rgba(228, 27, 27, 1);
}
.thebtn4 {
width: 120px;
height: 38px;
border: none;
color: #ffffff;
background: rgba(72, 178, 253, 1);
}
.thebtn {
width: 120px;
height: 38px;
border: none;
color: #ffffff;
background: rgba(204, 204, 204, 1);
}
}
}
::v-deep .el-form-item {
margin-bottom: 10px;
}
.page {
padding: 10px 20px;
background: #f9f9f9;
font-size: 14px;
.thetopbox {
padding-top: 20px;
background: #ffffff;
border-radius: 8px;
.searchbox {
display: flex;
align-items: center;
.searchtitle {
margin-right: 10px;
}
.searchbtn {
background: #c8161d;
color: #ffffff;
}
}
}
.mainbtn {
padding: 10px;
// margin-bottom: 20px;
.thebtn1 {
background: rgba(72, 178, 253, 1);
color: #ffffff;
}
.thebtn2 {
background: rgba(255, 173, 65, 1);
color: #ffffff;
}
}
.tableBox {
border-radius: 8px;
border: 1px solid rgba(204, 204, 204, 1);
padding: 20px 0;
// padding-top: 20px;
}
.main {
margin-top: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
.maintop {
display: flex;
// padding: 10px 0px;
justify-content: space-between;
align-items: center;
.kuang {
padding: 5px 20px;
background: rgba(255, 255, 255, 0);
border-radius: 4px;
border: 1px solid #cccccc;
}
.mainbtn {
.thebtn1 {
background: rgba(72, 178, 253, 1);
color: #ffffff;
}
.thebtn2 {
background: #ffad41;
color: #ffffff;
}
}
}
}
}
</style>