forked from wangjiadong/comp
commit
c99350a977
40 changed files with 877 additions and 306 deletions
|
After Width: | Height: | Size: 908 B |
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -1,206 +1,245 @@ |
||||
<template> |
||||
<div> |
||||
<!--引用表格--> |
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
||||
<!--插槽:table标题--> |
||||
<template #tableTitle> |
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
||||
<!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>--> |
||||
<!-- <a-dropdown v-if="selectedRowKeys.length > 0"> |
||||
<template #overlay> |
||||
<a-menu> |
||||
<a-menu-item key="1" @click="batchHandleDelete"> |
||||
<Icon icon="ant-design:delete-outlined" /> |
||||
删除 |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
<a-button |
||||
>批量操作 |
||||
<Icon icon="mdi:chevron-down" /> |
||||
</a-button> |
||||
</a-dropdown>--> |
||||
</template> |
||||
<!--操作栏--> |
||||
<template #action="{ record }"> |
||||
<TableAction :actions="getTableAction(record)" /> |
||||
</template> |
||||
<!--字段回显插槽--> |
||||
<template #htmlSlot="{ text }"> |
||||
<div v-html="text"></div> |
||||
</template> |
||||
<!--省市区字段回显插槽--> |
||||
<template #pcaSlot="{ text }"> |
||||
{{ getAreaTextByCode(text) }} |
||||
</template> |
||||
<template #fileSlot="{ text }"> |
||||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
||||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
||||
</template> |
||||
</BasicTable> |
||||
<!-- 表单区域 --> |
||||
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
||||
<div class="main-box"> |
||||
<a-card title="年度比赛管理" :bordered="false" style="height: 100%"> |
||||
<div class="filter-search"> |
||||
<div class="left"> |
||||
<ul> |
||||
<li :class="index === activeIndex ? 'active' : ''" v-for="(item, index) in filterYearList" :key="index" @click="activeIndex = index">{{ |
||||
item |
||||
}}</li> |
||||
</ul> |
||||
</div> |
||||
<div class="right"> <a-input-search v-model:value="searchValue" placeholder="请输入年份" style="width: 320px" @search="onSearch" /></div> |
||||
</div> |
||||
<div class="filter-search"> |
||||
<div class="left"> |
||||
{{ filterYearList[activeIndex] }} |
||||
</div> |
||||
<div class="right"> |
||||
<a-radio-group v-model:value="radioValue" name="radioGroup"> |
||||
<a-radio value="1">全部</a-radio> |
||||
<a-radio value="2">已审核</a-radio> |
||||
<a-radio value="3">待审核</a-radio> |
||||
<a-radio value="4">已驳回</a-radio> |
||||
</a-radio-group> |
||||
</div> |
||||
</div> |
||||
<div class="race-box"> |
||||
<div class="add-race item" @click="addRace"> |
||||
<PlusOutlined style="font-size: 22px" /> |
||||
<div>点击添加比赛</div> |
||||
</div> |
||||
<cardItem v-for="item in raceList" @click="handleDetail(item)" :key="item.id" :data="item" @editChange="handleEdit" @delChange="handleDelete"/> |
||||
</div> |
||||
<div class="pagination"> |
||||
<Pagination v-model:current="current" :total="50" show-less-items style="width: 300px; height: 30px" /> |
||||
</div> |
||||
</a-card> |
||||
</div> |
||||
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
||||
</template> |
||||
|
||||
<script lang="ts" name="annualcomp-annualComp" setup> |
||||
import { ref, computed, unref } from 'vue'; |
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
||||
<script lang="ts" setup> |
||||
import { PlusOutlined } from '@ant-design/icons-vue'; |
||||
import { Pagination } from 'ant-design-vue'; |
||||
import { ref } from 'vue'; |
||||
import cardItem from './components/cardItem.vue'; |
||||
import { list,deleteOne } from './AnnualComp.api'; |
||||
import { useModal } from '/@/components/Modal'; |
||||
import { useListPage } from '/@/hooks/system/useListPage'; |
||||
import AnnualCompModal from './components/AnnualCompModal.vue'; |
||||
import { columns, searchFormSchema } from './AnnualComp.data'; |
||||
import { list, submit, enable, deactivate, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AnnualComp.api'; |
||||
import { downloadFile } from '/@/utils/common/renderUtils'; |
||||
const checkedKeys = ref<Array<string | number>>([]); |
||||
//注册model |
||||
|
||||
const [registerModal, { openModal }] = useModal(); |
||||
//注册table数据 |
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
||||
tableProps: { |
||||
title: '年度比赛管理', |
||||
api: list, |
||||
columns, |
||||
canResize: false, |
||||
formConfig: { |
||||
//labelWidth: 120, |
||||
schemas: searchFormSchema, |
||||
autoSubmitOnEnter: true, |
||||
showAdvancedButton: true, |
||||
fieldMapToNumber: [], |
||||
fieldMapToTime: [], |
||||
}, |
||||
actionColumn: { |
||||
width: 120, |
||||
fixed: 'right', |
||||
}, |
||||
}, |
||||
exportConfig: { |
||||
name: '年度比赛管理', |
||||
url: getExportUrl, |
||||
}, |
||||
importConfig: { |
||||
url: getImportUrl, |
||||
success: handleSuccess, |
||||
}, |
||||
}); |
||||
import AnnualCompModal from './components/AnnualCompModal.vue'; |
||||
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
||||
const filterYearList = ref(['全部比赛', '2024年', '2023年', '其他年份']); |
||||
const activeIndex = ref(0); |
||||
const current = ref(2); |
||||
// 搜索 |
||||
const searchValue = ref(''); |
||||
const onSearch = () => { |
||||
console.log(searchValue.value); |
||||
}; |
||||
|
||||
/** |
||||
* 新增事件 |
||||
*/ |
||||
function handleAdd() { |
||||
// 单选 |
||||
const radioValue = ref('1'); |
||||
|
||||
// 获取比赛列表 |
||||
const raceList = ref<any>([]); |
||||
const total = ref(0); |
||||
const getList = async () => { |
||||
const res = await list({ pageSize: 7 }); |
||||
console.log(res); |
||||
raceList.value = res.records; |
||||
total.value = res.total; |
||||
}; |
||||
getList(); |
||||
|
||||
// 新增比赛 |
||||
const addRace = () => { |
||||
openModal(true, { |
||||
isUpdate: false, |
||||
showFooter: true, |
||||
}); |
||||
} |
||||
/** |
||||
* 编辑事件 |
||||
*/ |
||||
function handleEdit(record: Recordable) { |
||||
}; |
||||
// 成功回调 |
||||
const handleSuccess = () => { |
||||
console.log('操作成功'); |
||||
getList(); |
||||
}; |
||||
// 编辑 |
||||
const handleEdit = (record: any) => { |
||||
openModal(true, { |
||||
record, |
||||
isUpdate: true, |
||||
showFooter: true, |
||||
}); |
||||
} |
||||
/** |
||||
* 详情 |
||||
*/ |
||||
function handleDetail(record: Recordable) { |
||||
}; |
||||
// 查看详情 |
||||
const handleDetail = (record: any) => { |
||||
openModal(true, { |
||||
record, |
||||
isUpdate: true, |
||||
showFooter: false, |
||||
}); |
||||
} |
||||
async function handleSubmit(record) { |
||||
await submit({ id: record.id }, handleSuccess); |
||||
} |
||||
async function handleEnable(record) { |
||||
await enable({ id: record.id }, handleSuccess); |
||||
} |
||||
async function handleDeactivate(record) { |
||||
await deactivate({ id: record.id }, handleSuccess); |
||||
} |
||||
/** |
||||
/** |
||||
* 删除事件 |
||||
*/ |
||||
async function handleDelete(record) { |
||||
await deleteOne({ id: record.id }, handleSuccess); |
||||
} |
||||
/** |
||||
* 批量删除事件 |
||||
*/ |
||||
async function batchHandleDelete() { |
||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
||||
} |
||||
/** |
||||
* 成功回调 |
||||
*/ |
||||
function handleSuccess() { |
||||
(selectedRowKeys.value = []) && reload(); |
||||
} |
||||
/** |
||||
* 操作栏 |
||||
*/ |
||||
function getTableAction(record) { |
||||
if (record.state_dictText == '待提交' || record.state_dictText == '已驳回') { |
||||
return [ |
||||
{ |
||||
label: '提交', |
||||
onClick: handleSubmit.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '编辑', |
||||
onClick: handleEdit.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '删除', |
||||
popConfirm: { |
||||
title: '是否确认删除', |
||||
confirm: handleDelete.bind(null, record), |
||||
}, |
||||
}, |
||||
]; |
||||
} |
||||
if (record.state_dictText == '已提交') { |
||||
return [ |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
} else if (record.state_dictText == '已审核' && record.isopen == '0') { |
||||
return [ |
||||
{ |
||||
label: '启用', |
||||
onClick: handleEnable.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
} else |
||||
return [ |
||||
{ |
||||
label: '停用', |
||||
onClick: handleDeactivate.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
console.log(record,'record'); |
||||
|
||||
await deleteOne({ id: record.value.id }, handleSuccess); |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
<style lang="less" scoped> |
||||
.main-box { |
||||
width: 100%; |
||||
height: calc(100vh - 100px); |
||||
padding: 20px; |
||||
.filter-search { |
||||
height: 50px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.left { |
||||
ul { |
||||
padding: 0; |
||||
margin: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
li { |
||||
width: 105px; |
||||
height: 43px; |
||||
line-height: 43px; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
border-radius: 20px; |
||||
color: #4e5969; |
||||
margin: 10px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
} |
||||
.active { |
||||
background-color: #f2f3f5; |
||||
color: #01dbaf; |
||||
} |
||||
} |
||||
} |
||||
.right { |
||||
} |
||||
} |
||||
.race-box { |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); /* 创建四个等宽的列 */ |
||||
grid-template-rows: repeat(2, 1fr); |
||||
gap: 32px; /* 项目之间的间距 */ |
||||
.add-race { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center !important; |
||||
cursor: pointer; |
||||
div { |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
.item { |
||||
width: 356px; |
||||
height: 232px; |
||||
border: 1px solid #e5e6eb; |
||||
padding: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
.title { |
||||
font-size: 22px; |
||||
font-weight: 700; |
||||
} |
||||
.time { |
||||
font-size: 16px; |
||||
color: #86909c; |
||||
} |
||||
.center { |
||||
ul { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
li { |
||||
display: flex; |
||||
width: 50%; |
||||
.label { |
||||
color: #86909c; |
||||
} |
||||
} |
||||
li:nth-child(3) { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
.footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 90px; |
||||
height: 43px; |
||||
background-color: #e8ffea; |
||||
text-align: center; |
||||
line-height: 43px; |
||||
color: #00b42a; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
div { |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
.right { |
||||
display: flex; |
||||
div { |
||||
width: 80px; |
||||
height: 43px; |
||||
text-align: center; |
||||
line-height: 43px; |
||||
font-size: 16px; |
||||
} |
||||
.del { |
||||
background-color: #f2f3f5; |
||||
color: #4e5969; |
||||
} |
||||
.edit { |
||||
background-color: #00c7be; |
||||
color: #fff; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.pagination { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-top: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,206 @@ |
||||
<template> |
||||
<div> |
||||
<!--引用表格--> |
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
||||
<!--插槽:table标题--> |
||||
<template #tableTitle> |
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
||||
<!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>--> |
||||
<!-- <a-dropdown v-if="selectedRowKeys.length > 0"> |
||||
<template #overlay> |
||||
<a-menu> |
||||
<a-menu-item key="1" @click="batchHandleDelete"> |
||||
<Icon icon="ant-design:delete-outlined" /> |
||||
删除 |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
<a-button |
||||
>批量操作 |
||||
<Icon icon="mdi:chevron-down" /> |
||||
</a-button> |
||||
</a-dropdown>--> |
||||
</template> |
||||
<!--操作栏--> |
||||
<template #action="{ record }"> |
||||
<TableAction :actions="getTableAction(record)" /> |
||||
</template> |
||||
<!--字段回显插槽--> |
||||
<template #htmlSlot="{ text }"> |
||||
<div v-html="text"></div> |
||||
</template> |
||||
<!--省市区字段回显插槽--> |
||||
<template #pcaSlot="{ text }"> |
||||
{{ getAreaTextByCode(text) }} |
||||
</template> |
||||
<template #fileSlot="{ text }"> |
||||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
||||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
||||
</template> |
||||
</BasicTable> |
||||
<!-- 表单区域 --> |
||||
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" name="annualcomp-annualComp" setup> |
||||
import { ref, computed, unref } from 'vue'; |
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
||||
import { useModal } from '/@/components/Modal'; |
||||
import { useListPage } from '/@/hooks/system/useListPage'; |
||||
import AnnualCompModal from './components/AnnualCompModal.vue'; |
||||
import { columns, searchFormSchema } from './AnnualComp.data'; |
||||
import { list, submit, enable, deactivate, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AnnualComp.api'; |
||||
import { downloadFile } from '/@/utils/common/renderUtils'; |
||||
const checkedKeys = ref<Array<string | number>>([]); |
||||
//注册model |
||||
const [registerModal, { openModal }] = useModal(); |
||||
//注册table数据 |
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
||||
tableProps: { |
||||
title: '年度比赛管理', |
||||
api: list, |
||||
columns, |
||||
canResize: false, |
||||
formConfig: { |
||||
//labelWidth: 120, |
||||
schemas: searchFormSchema, |
||||
autoSubmitOnEnter: true, |
||||
showAdvancedButton: true, |
||||
fieldMapToNumber: [], |
||||
fieldMapToTime: [], |
||||
}, |
||||
actionColumn: { |
||||
width: 120, |
||||
fixed: 'right', |
||||
}, |
||||
}, |
||||
exportConfig: { |
||||
name: '年度比赛管理', |
||||
url: getExportUrl, |
||||
}, |
||||
importConfig: { |
||||
url: getImportUrl, |
||||
success: handleSuccess, |
||||
}, |
||||
}); |
||||
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
||||
|
||||
/** |
||||
* 新增事件 |
||||
*/ |
||||
function handleAdd() { |
||||
openModal(true, { |
||||
isUpdate: false, |
||||
showFooter: true, |
||||
}); |
||||
} |
||||
/** |
||||
* 编辑事件 |
||||
*/ |
||||
function handleEdit(record: Recordable) { |
||||
openModal(true, { |
||||
record, |
||||
isUpdate: true, |
||||
showFooter: true, |
||||
}); |
||||
} |
||||
/** |
||||
* 详情 |
||||
*/ |
||||
function handleDetail(record: Recordable) { |
||||
openModal(true, { |
||||
record, |
||||
isUpdate: true, |
||||
showFooter: false, |
||||
}); |
||||
} |
||||
async function handleSubmit(record) { |
||||
await submit({ id: record.id }, handleSuccess); |
||||
} |
||||
async function handleEnable(record) { |
||||
await enable({ id: record.id }, handleSuccess); |
||||
} |
||||
async function handleDeactivate(record) { |
||||
await deactivate({ id: record.id }, handleSuccess); |
||||
} |
||||
/** |
||||
* 删除事件 |
||||
*/ |
||||
async function handleDelete(record) { |
||||
await deleteOne({ id: record.id }, handleSuccess); |
||||
} |
||||
/** |
||||
* 批量删除事件 |
||||
*/ |
||||
async function batchHandleDelete() { |
||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
||||
} |
||||
/** |
||||
* 成功回调 |
||||
*/ |
||||
function handleSuccess() { |
||||
(selectedRowKeys.value = []) && reload(); |
||||
} |
||||
/** |
||||
* 操作栏 |
||||
*/ |
||||
function getTableAction(record) { |
||||
if (record.state_dictText == '待提交' || record.state_dictText == '已驳回') { |
||||
return [ |
||||
{ |
||||
label: '提交', |
||||
onClick: handleSubmit.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '编辑', |
||||
onClick: handleEdit.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '删除', |
||||
popConfirm: { |
||||
title: '是否确认删除', |
||||
confirm: handleDelete.bind(null, record), |
||||
}, |
||||
}, |
||||
]; |
||||
} |
||||
if (record.state_dictText == '已提交') { |
||||
return [ |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
} else if (record.state_dictText == '已审核' && record.isopen == '0') { |
||||
return [ |
||||
{ |
||||
label: '启用', |
||||
onClick: handleEnable.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
} else |
||||
return [ |
||||
{ |
||||
label: '停用', |
||||
onClick: handleDeactivate.bind(null, record), |
||||
}, |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, |
||||
]; |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,154 @@ |
||||
<template> |
||||
<div> |
||||
<div class="item"> |
||||
<div class="top"> |
||||
<div class="title">{{ data.compname }}</div> |
||||
<div class="time">报名时间：{{ data.starttime }}~{{ data.endtime }}</div> |
||||
</div> |
||||
<div class="center"> |
||||
<ul> |
||||
<li><div class="label">比赛权重</div> <div class="content">4</div></li> |
||||
<li><div class="label">负责人</div> <div class="content">无糖</div></li> |
||||
<li><div class="label">负责部门</div> <div class="content">国际教育学院</div></li> |
||||
</ul> |
||||
</div> |
||||
<div class="footer"> |
||||
<div |
||||
class="left" |
||||
:class="data.state == 0 ? ' status-color-1' : data.state == 1 ? ' status-color-1' : data.state == 2 ? ' status-color-2' : data.state == 3 ? ' status-color-3' : ''" |
||||
> |
||||
<SvgIcon :name="data.state == 0 ? 'duihao' : data.state == 1 ? 'duihao' : data.state == 2 ? 'duihao' : data.state == 3 ? 'cuowu' : ''" /> <div>{{ data.state_dictText }}</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="del" @click.stop="del"> 删除</div> |
||||
<div class="edit" @click.stop="edit">修改</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { watch, ref } from 'vue'; |
||||
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
}); |
||||
const emits = defineEmits(['editChange', 'delChange']); |
||||
const data = ref(props.data); |
||||
console.log(props, 'props'); |
||||
|
||||
// 修改 |
||||
const edit = () => { |
||||
emits('editChange', data); |
||||
}; |
||||
const del = () => { |
||||
emits('delChange', data); |
||||
}; |
||||
watch( |
||||
() => props.data, |
||||
(newVal) => { |
||||
data.value = newVal; |
||||
} |
||||
); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.item { |
||||
width: 356px; |
||||
height: 232px; |
||||
border: 1px solid #e5e6eb; |
||||
padding: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
cursor: pointer; |
||||
transition: all 0.3s; |
||||
.title { |
||||
font-size: 22px; |
||||
font-weight: 700; |
||||
} |
||||
.time { |
||||
font-size: 16px; |
||||
color: #86909c; |
||||
} |
||||
.center { |
||||
ul { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
li { |
||||
display: flex; |
||||
width: 50%; |
||||
.label { |
||||
color: #86909c; |
||||
} |
||||
} |
||||
li:nth-child(3) { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
.footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 90px; |
||||
height: 43px; |
||||
text-align: center; |
||||
line-height: 43px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
div { |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
.status-color-1 { |
||||
color: #165dff; |
||||
background-color: #e8f3ff; |
||||
} |
||||
.status-color-2 { |
||||
|
||||
color: #00b42a; |
||||
background-color: #e8ffea; |
||||
} |
||||
.status-color-3 { |
||||
color: #f53f3f; |
||||
background-color: #ffece8; |
||||
} |
||||
.right { |
||||
display: flex; |
||||
div { |
||||
width: 80px; |
||||
height: 43px; |
||||
text-align: center; |
||||
line-height: 43px; |
||||
font-size: 16px; |
||||
cursor: pointer; |
||||
} |
||||
.del { |
||||
background-color: #f2f3f5; |
||||
color: #4e5969; |
||||
} |
||||
.del:hover { |
||||
border: 1px solid #ccc; |
||||
} |
||||
.edit { |
||||
background-color: #00c7be; |
||||
color: #fff; |
||||
margin-left: 10px; |
||||
} |
||||
.edit:hover { |
||||
border: 1px solid #348d89; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.item:hover { |
||||
transform: translateY(-5px); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue