807 lines
21 KiB
Vue
807 lines
21 KiB
Vue
<template>
|
||
<!-- 楼层计划 -->
|
||
<div class="fullHeight positionPage">
|
||
<div class="left fullHeight whiteBlock">
|
||
<div class="title">
|
||
<span>楼层管理</span>
|
||
</div>
|
||
<div class="list_content">
|
||
<vue-scroll v-if="buildList.length > 0">
|
||
<div
|
||
class="flex content_data"
|
||
v-for="(item, index) in buildList"
|
||
:key="index"
|
||
:class="checkBuildingId == index ? 'active' : ''"
|
||
@click="selectMenu(index, item.id)"
|
||
>
|
||
<div>{{ item.name }}</div>
|
||
<div class="flex2">
|
||
<img
|
||
@click.stop="editBuildFn(item)"
|
||
src="@/assets/images/icon-edit.png"
|
||
style="margin-right: 16px"
|
||
class="icon"
|
||
/>
|
||
<img
|
||
@click.stop="deleteBuildFn(item)"
|
||
src="@/assets/images/icon-delete.png"
|
||
class="icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>
|
||
{{ $t('message.personnelPosition.mapManage.no_data') }}
|
||
</div>
|
||
</div>
|
||
<div class="addFirm" @click="addBtn">新增楼层</div>
|
||
</div>
|
||
<div class="system-right">
|
||
<div class="pageTitle" style="font-weight: 700">施工阶段管理</div>
|
||
<div class="searchDiv">
|
||
<el-form
|
||
:inline="true"
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
size="medium"
|
||
>
|
||
<el-form-item label="施工阶段" prop="state">
|
||
<el-input v-model="constructionPhase"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
style="margin-left: 50px"
|
||
type="primary"
|
||
plain
|
||
@click="loadDataTwo"
|
||
>查询</el-button
|
||
>
|
||
|
||
<el-button type="primary" size="medium" @click="addConstruction">
|
||
新增施工阶段
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_box" style="margin: -35px 10px">
|
||
<el-table height="552px" :data="threeData" class="tables">
|
||
<el-table-column
|
||
type="index"
|
||
label="序号"
|
||
width="100"
|
||
align="center"
|
||
></el-table-column>
|
||
|
||
<el-table-column
|
||
prop="constructionPhase"
|
||
label="施工阶段"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="major"
|
||
label="专业"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="startDate"
|
||
label="预计开始时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column prop="status" label="完成情况" align="center">
|
||
<template slot-scope="scope">
|
||
{{ getStatus(scope.row.status) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="progressRatio"
|
||
label="当前进度"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="endDate"
|
||
label="预计结束时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click="edit1(scope.row, 3)"
|
||
type="text"
|
||
size="small"
|
||
icon="el-icon-edit"
|
||
>
|
||
<span style="font-size: 14px">编辑</span>
|
||
</el-button>
|
||
<el-button
|
||
@click="del1(scope.row.id, 3)"
|
||
type="text"
|
||
size="small"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
>
|
||
<span style="font-size: 14px">删除</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- <el-pagination
|
||
class="pagerBox"
|
||
style="margin: 150px 600px 0; text-align: right"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination> -->
|
||
</div>
|
||
<!-- 添加楼层弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="dialogTitle"
|
||
:visible.sync="addBuildDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="addBuildForm"
|
||
ref="addBuildForm"
|
||
:rules="addBuildFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item label="楼层名称" prop="name">
|
||
<el-input
|
||
v-model="addBuildForm.name"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addBuildDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
@click="addBudBtn"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加施工阶段弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="floorDialogTitle"
|
||
:visible.sync="addFloorDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="floorForm"
|
||
ref="floorForm"
|
||
:rules="floorFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item label="楼层" prop="floorId">
|
||
<el-select v-model="floorId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(item, index) in optionsList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="施工阶段" prop="constructionPhase">
|
||
<el-input
|
||
v-model="floorForm.constructionPhase"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="专业" prop="major">
|
||
<el-input v-model="floorForm.major" placeholder="请输入"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="预计开始日期" prop="startDate">
|
||
<el-date-picker
|
||
v-model="floorForm.startDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="预计结束日期" prop="endDate">
|
||
<el-date-picker
|
||
v-model="floorForm.endDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="实际开始日期" prop="actualStartDate">
|
||
<el-date-picker
|
||
v-model="floorForm.actualStartDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="实际结束日期" prop="actualFinishDate">
|
||
<el-date-picker
|
||
v-model="floorForm.actualFinishDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="当前进度" prop="progressRatio">
|
||
<el-input-number
|
||
v-model="floorForm.progressRatio"
|
||
controls-position="right"
|
||
:min="0"
|
||
:max="100"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="阶段状态" prop="progressRatio">
|
||
<el-select v-model="floorForm.status" placeholder="请选择">
|
||
<el-option :value="0" label="未开始"> </el-option>
|
||
<el-option :value="1" label="进行中"> </el-option>
|
||
<el-option :value="2" label="已完成"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addFloorDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
@click="submit"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getProjectFloorApi, //所有楼层计划-楼层
|
||
addProjectFloorApi, //新增楼层
|
||
updateProjectFloorApi, //编辑楼层
|
||
deleteProjectFloorApi, //删除楼层
|
||
getConstructionPhaseApi, //查询所有施工阶段
|
||
addConstructionPhaseApi, //新增施工阶段
|
||
updateConstructionPhaseApi, //修改施工阶段
|
||
deleteConstructionPhaseApi //删除施工
|
||
} from '../../../assets/js/api/floorManagement'
|
||
export default {
|
||
data() {
|
||
return {
|
||
buildList: [],
|
||
threeData: [],
|
||
dialogTitle: '', //楼层
|
||
addBuildDialog: false, //楼层
|
||
addFloorDialog: false, //施工阶段
|
||
addBuildFormRules: {}, //施工阶段
|
||
floorDialogTitle: '',
|
||
searchForm: {},
|
||
addBuildForm: {
|
||
name: ''
|
||
}, //楼层
|
||
floorForm: {
|
||
floorId: 0, //楼层
|
||
constructionPhase: '', //施工阶段
|
||
major: '', //专业
|
||
startDate: '', //预计开始日期
|
||
endDate: '', //预计结束日期
|
||
actualStartDate: '', //实际开始日期
|
||
actualFinishDate: '', //实际结束日期
|
||
progressRatio: '', //当前进度
|
||
status: '' //阶段状态
|
||
},
|
||
floorId: '', //楼层id
|
||
current: 0,
|
||
currentTwo: -1,
|
||
floorFormRules: {},
|
||
constructionPhase: '',
|
||
// page: 1,
|
||
// pageSize: 10,
|
||
// total: 0,
|
||
projectSn: '',
|
||
optionsList: [], //消耗下拉
|
||
threeIndex: -1,
|
||
checkBuildingId: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.getBuildingData()
|
||
// this.getConstructionData();
|
||
},
|
||
methods: {
|
||
// 状态，0未开始 ,1进行中，2已完成 默认未开始
|
||
getStatus(status) {
|
||
if (status === 0) {
|
||
return '未开始'
|
||
} else if (status === 1) {
|
||
return '进行中'
|
||
} else {
|
||
return '已完成'
|
||
}
|
||
},
|
||
//查询所有楼层
|
||
getBuildingData() {
|
||
getProjectFloorApi({
|
||
projectSn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
console.log('查询所有楼层', res)
|
||
this.buildList = res.result
|
||
this.optionsList = res.result
|
||
this.floorId = this.optionsList[0].id
|
||
this.getConstructionData(this.optionsList[0].id)
|
||
})
|
||
},
|
||
//查询施工阶段
|
||
getConstructionData() {
|
||
let param = {
|
||
floorId: this.floorId,
|
||
constructionPhase: this.constructionPhase
|
||
? this.constructionPhase
|
||
: null
|
||
}
|
||
getConstructionPhaseApi(param).then((res) => {
|
||
console.log('查询施工阶段', res)
|
||
this.threeData = res.result
|
||
})
|
||
},
|
||
|
||
//-----------------楼层
|
||
//新增楼层
|
||
addBtn() {
|
||
this.addBuildDialog = true
|
||
this.dialogTitle = '新增楼层'
|
||
this.addBuildForm = {
|
||
name: ''
|
||
}
|
||
},
|
||
//编辑楼层
|
||
editBuildFn(val) {
|
||
console.log('编辑的内容', val)
|
||
this.addBuildDialog = true
|
||
this.dialogTitle = '编辑楼层'
|
||
this.addBuildForm = JSON.parse(JSON.stringify(val))
|
||
},
|
||
//删除楼层
|
||
deleteBuildFn(val) {
|
||
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteProjectFloorApi({ id: val.id }).then((res) => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
this.getBuildingData()
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
//新增或编辑楼层
|
||
addBudBtn() {
|
||
this.$refs.addBuildForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.dialogTitle == '新增楼层') {
|
||
addProjectFloorApi({
|
||
name: this.addBuildForm.name,
|
||
projectSn: this.projectSn
|
||
}).then((res) => {
|
||
this.$message.success('新增成功')
|
||
this.addBuildDialog = false
|
||
this.getBuildingData()
|
||
})
|
||
} else if (this.dialogTitle == '编辑楼层') {
|
||
updateProjectFloorApi(this.addBuildForm).then((res) => {
|
||
this.$message.success('编辑成功')
|
||
this.addBuildDialog = false
|
||
this.getBuildingData()
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//-----------------施工阶段
|
||
//新增施工阶段
|
||
addConstruction() {
|
||
this.addFloorDialog = true
|
||
this.floorDialogTitle = '新增施工阶段'
|
||
this.floorForm = {
|
||
floorId: '', //楼层
|
||
constructionPhase: '', //施工阶段
|
||
major: '', //专业
|
||
startDate: '', //预计开始日期
|
||
endDate: '', //预计结束日期
|
||
actualStartDate: '', //实际开始日期
|
||
actualFinishDate: '', //实际结束日期
|
||
progressRatio: '', //当前进度
|
||
status: '' //阶段状态
|
||
}
|
||
},
|
||
//编辑施工阶段
|
||
edit1(val) {
|
||
this.addFloorDialog = true
|
||
this.floorDialogTitle = '编辑施工阶段'
|
||
this.floorForm = JSON.parse(JSON.stringify(val))
|
||
},
|
||
//删除施工阶段
|
||
del1(val) {
|
||
console.log('删除', val)
|
||
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteConstructionPhaseApi({ id: val }).then((res) => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
this.getConstructionData(this.floorId)
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
//新增或编辑施工阶段
|
||
submit() {
|
||
this.floorForm.floorId = this.floorId
|
||
this.$refs.floorForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.floorDialogTitle == '新增施工阶段') {
|
||
addConstructionPhaseApi(this.floorForm).then((res) => {
|
||
this.$message.success('新增成功')
|
||
this.addFloorDialog = false
|
||
this.getConstructionData(this.floorId)
|
||
})
|
||
} else if (this.floorDialogTitle == '编辑施工阶段') {
|
||
updateConstructionPhaseApi(this.floorForm).then((res) => {
|
||
this.$message.success('修改成功')
|
||
this.addFloorDialog = false
|
||
this.getConstructionData(this.floorId)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// //切换类别
|
||
// next(index, data, $event, type) {
|
||
// console.log('data', this.buildList[data])
|
||
// this.threeData = []
|
||
// this.current = index
|
||
// this.currentTwo = -1
|
||
// this.getConstructionData(this.floorId)
|
||
// },
|
||
selectMenu(val, id) {
|
||
console.log(id)
|
||
console.log(val)
|
||
this.floorId = this.buildList[val].id
|
||
this.checkBuildingId = val
|
||
this.getConstructionData(this.floorId)
|
||
},
|
||
//查询
|
||
loadDataTwo() {
|
||
console.log('this.constructionPhase :', this.constructionPhase)
|
||
this.getConstructionData()
|
||
}
|
||
// //切换数量
|
||
// handleSizeChange(value) {
|
||
// this.pageSize = value;
|
||
// this.getInfoList();
|
||
// },
|
||
// handleCurrentChange(value) {
|
||
// this.page = value;
|
||
// this.getInfoList();
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.title {
|
||
border-bottom: 1px solid rgba(220, 230, 253, 1);
|
||
color: @--color-primary;
|
||
padding-left: 24px;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
position: relative;
|
||
padding: 16px 0 5px;
|
||
display: inline-block;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: @--color-primary;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
.searchDiv {
|
||
margin: 35px 48px;
|
||
}
|
||
.left {
|
||
width: 300px;
|
||
float: left;
|
||
}
|
||
.system-right {
|
||
float: right;
|
||
// margin-right: 1.5%;
|
||
margin-left: 20px;
|
||
width: calc(100% - 300px - 20px - 30px);
|
||
// min-height: 620px;
|
||
height: calc(100% - 40px);
|
||
// border: 1px solid #e9e9e9;
|
||
background-color: white;
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.addFirm {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
color: @--color-primary;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-top: 1px solid #dce6fd;
|
||
font-family: PingFangSC-Regular;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.list_content {
|
||
padding: 10px 0;
|
||
height: calc(100% - 87px - 20px);
|
||
position: relative;
|
||
}
|
||
|
||
.content_data {
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
height: 43px;
|
||
line-height: 43px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&.active {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background-color: @--color-primary;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.floorBox {
|
||
margin-bottom: 10px;
|
||
// background-color: rgba(251, 251, 251, 1);
|
||
padding: 20px 20px 10px;
|
||
|
||
.addFloorBox {
|
||
line-height: 20px;
|
||
border: 1px solid @--color-primary;
|
||
|
||
i {
|
||
font-size: 25px;
|
||
margin-top: 20px;
|
||
color: @--color-primary;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
li {
|
||
border: 1.2px solid rgba(0, 0, 0, 0.25);
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
// background-color: rgba(41, 216, 180, 0.25);
|
||
display: inline-block;
|
||
margin: 0 10px 10px 0;
|
||
line-height: 60px;
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
vertical-align: top;
|
||
|
||
&.more {
|
||
font-size: 1.6rem;
|
||
line-height: 65px;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #d8e2f9;
|
||
// color: #fff;
|
||
border-color: @--color-primary-deep;
|
||
}
|
||
|
||
.floorName {
|
||
height: 50px;
|
||
line-height: 70px;
|
||
}
|
||
|
||
.caretIcon {
|
||
height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mapContainer {
|
||
height: calc(100% - 133px - 40px);
|
||
padding: 20px;
|
||
position: relative;
|
||
|
||
.infoDetail {
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
|
||
span:first-child {
|
||
margin-right: 165px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.uploadBtn {
|
||
float: right;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
|
||
.mapBox {
|
||
border: 1px solid rgba(151, 151, 151, 0.5);
|
||
height: calc(100% - 40px);
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
|
||
.mapContent {
|
||
position: relative;
|
||
// left: 0;
|
||
// top: 0;
|
||
// z-index: 3;
|
||
}
|
||
|
||
// .mapContent2{
|
||
// position: relative;
|
||
// }
|
||
.personBox {
|
||
position: absolute;
|
||
transition: 0.2s all;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.redText {
|
||
margin-left: 20px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.devDetail {
|
||
p {
|
||
margin-bottom: 10px;
|
||
|
||
.primaryText {
|
||
margin-right: 20px;
|
||
display: inline-block;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operateBox {
|
||
// margin-bottom: 10px;
|
||
position: absolute;
|
||
right: 112px;
|
||
top: 11px;
|
||
|
||
img {
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.operateList {
|
||
font-size: 12px;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
justify-content: center;
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&.last {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
background-color: #d8e2f9;
|
||
// color: #fff;
|
||
border-color: @--color-primary-deep;
|
||
}
|
||
</style> |