parent
d91e2b4d57
commit
ab8a6d5adb
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="office-car-data-serach-dom">
|
||||||
|
<a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>
|
||||||
|
<span style="margin-left: 0.5rem">申请日期</span>
|
||||||
|
<a-range-picker :locale="locale"
|
||||||
|
:getCalendarContainer="getCalendarContainer()"
|
||||||
|
@change="onDateChange"></a-range-picker>
|
||||||
|
<span style="margin-left: 0.5rem">用车时间</span>
|
||||||
|
<a-range-picker class="time-picker-style"
|
||||||
|
:getCalendarContainer="getCalendarContainer()"
|
||||||
|
:show-time="{ format: 'HH:mm' }"
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
:placeholder="['开始时间', '结束时间']"
|
||||||
|
@change="onTimeChange"
|
||||||
|
@ok="onTimeOk"
|
||||||
|
></a-range-picker>
|
||||||
|
<a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* 搜索条件组件
|
||||||
|
* */
|
||||||
|
import {Input, DatePicker, Icon, Spin, Empty, Modal, Checkbox} from 'ant-design-vue';
|
||||||
|
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||||
|
import moment from 'moment';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
locale,
|
||||||
|
carInfo: "",
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
startTime: "",
|
||||||
|
endTime: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCalendarContainer: function () {
|
||||||
|
return triggerNode => triggerNode.parentNode;
|
||||||
|
},
|
||||||
|
onDateChange(value, dateString) {
|
||||||
|
this.startDate = dateString[0];
|
||||||
|
this.endDate = dateString[1];
|
||||||
|
},
|
||||||
|
onTimeChange: function (value, dateString) {
|
||||||
|
this.startTime = dateString[0];
|
||||||
|
this.endTime = dateString[1];
|
||||||
|
},
|
||||||
|
onTimeOk:function (value) {
|
||||||
|
console.log(value)
|
||||||
|
},
|
||||||
|
search:function () {
|
||||||
|
this.$emit("toSearch",{
|
||||||
|
carInfo:this.carInfo,
|
||||||
|
startDate:this.startDate,
|
||||||
|
endDate:this.endDate,
|
||||||
|
startTime:this.startTime,
|
||||||
|
endTime:this.endTime,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
AInput: Input,
|
||||||
|
ADatePicker: DatePicker,
|
||||||
|
ARangePicker: DatePicker.RangePicker,
|
||||||
|
AIcon: Icon,
|
||||||
|
ASpin: Spin,
|
||||||
|
AEmpty: Empty,
|
||||||
|
AModal: Modal,
|
||||||
|
ACheckbox: Checkbox
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.office-car-data-serach-dom {
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
.ant-calendar-picker {
|
||||||
|
width: 12rem !important;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.time-picker-style {
|
||||||
|
width: 18rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div class="status-search-style">
|
||||||
|
<span>审批状态</span>
|
||||||
|
<a-select :value="checkStatus" style="width: 100px"
|
||||||
|
@change="checkChange">
|
||||||
|
<a-select-option v-for="item in checkStatusArr" :key="item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<span style="margin-left: 0.5rem">用车状态</span>
|
||||||
|
<a-select :value="useStatus" style="width: 100px" @change="useChange">
|
||||||
|
<a-select-option v-for="item in useStatusArr" :key="item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* 审批状态 用车状态搜索组件
|
||||||
|
* */
|
||||||
|
import {Select} from 'ant-design-vue';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
checkStatusArr: [
|
||||||
|
{id: "", name: "全部"},
|
||||||
|
{id: 0, name: "待审批"},
|
||||||
|
{id: 1, name: "已通过"},
|
||||||
|
{id: -1, name: "未通过"},
|
||||||
|
{id: 11, name: "已撤回"},
|
||||||
|
],
|
||||||
|
checkStatus: "",
|
||||||
|
useStatusArr: [
|
||||||
|
{id: "", name: "全部"},
|
||||||
|
{id: 0, name: "待领车"},
|
||||||
|
{id: 1, name: "待还车"},
|
||||||
|
{id: 2, name: "还车待审批"},
|
||||||
|
{id: 3, name: "已还车"},
|
||||||
|
{id: -1, name: "已取消"},
|
||||||
|
],
|
||||||
|
useStatus: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//审批状态改变
|
||||||
|
checkChange: function (value) {
|
||||||
|
this.checkStatus = value;
|
||||||
|
this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
|
||||||
|
},
|
||||||
|
//用车状态改变
|
||||||
|
useChange: function (value) {
|
||||||
|
this.useStatus = value;
|
||||||
|
this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ASelect: Select,
|
||||||
|
ASelectOption: Select.Option,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.status-search-style {
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.ant-select {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<div class="office-car-history-style">
|
||||||
|
<DateChoose @flushDate="flushDate" :begin_date="begin_date" :end_date="end_date" :callInter="true"></DateChoose>
|
||||||
|
<div class="status-search-box">
|
||||||
|
<StatusSearch @statusChange="statusChange"/>
|
||||||
|
</div>
|
||||||
|
<div class="data-list-content-style">
|
||||||
|
<a-spin :spinning="isLoading">
|
||||||
|
<vue-scroll :ops="listScroll" style="height:25rem">
|
||||||
|
<div v-if="!isLoading && dataList.length > 0" class="data-list-style">
|
||||||
|
<InfoRow v-for="item,index in dataList" :key="'info-'+ index" :info="item"/>
|
||||||
|
</div>
|
||||||
|
<div v-if="!isLoading && dataList.length === 0" class="data-list-style">
|
||||||
|
<a-empty></a-empty>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</a-spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import InterConfig from '../officeCar/interConfig';
|
||||||
|
import DateChoose from '../common/dateChoose.vue';
|
||||||
|
import StatusSearch from './carStatusSearch.vue';
|
||||||
|
import moment from 'moment';
|
||||||
|
import InfoRow from '../carUseReturn/infoRow.vue';
|
||||||
|
import {Empty, Spin} from 'ant-design-vue';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
listScroll: this.StaticParams.scrollOption,
|
||||||
|
isLoading: false,
|
||||||
|
begin_date: null,
|
||||||
|
end_date: null,
|
||||||
|
checkStatus: "",
|
||||||
|
useStatus: "",
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 100000,
|
||||||
|
totalPage: 0,
|
||||||
|
totolNum: 0,
|
||||||
|
dataList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
flushDate: function (param) {
|
||||||
|
this.begin_date = moment(param.beginDate).format("YYYY-MM-DD");
|
||||||
|
this.end_date = moment(param.endDate).format("YYYY-MM-DD");
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
//状态改变
|
||||||
|
statusChange: function (param) {
|
||||||
|
this.checkStatus = param.checkStatus;
|
||||||
|
this.useStatus = param.useStatus;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
//获取数据列表
|
||||||
|
getDataList: function () {
|
||||||
|
let param = {
|
||||||
|
org_id: this.BaseConfig.person_info_my.bureau_id,
|
||||||
|
person_id: this.BaseConfig.userInfo.person_id,
|
||||||
|
page_number: this.pageNumber,
|
||||||
|
page_size: this.pageSize,
|
||||||
|
apply_begin_time: this.begin_date,
|
||||||
|
apply_end_time: this.end_date,
|
||||||
|
apply_check_flag: this.checkStatus,
|
||||||
|
apply_car_status: this.useStatus,
|
||||||
|
}
|
||||||
|
this.isLoading = true;
|
||||||
|
this.InterfaceConfig.callInterface([{
|
||||||
|
url: InterConfig.listAllApplyCar.url,
|
||||||
|
params: param,
|
||||||
|
method: InterConfig.listAllApplyCar.method,
|
||||||
|
isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
|
||||||
|
}], (result) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
let resData = result[0].data;
|
||||||
|
if (resData.code === 2000) {
|
||||||
|
this.dataList = resData.data.list;
|
||||||
|
this.totalPage = resData.data.total_page;
|
||||||
|
this.totolNum = resData.data.total_row;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
DateChoose,
|
||||||
|
StatusSearch,
|
||||||
|
InfoRow,
|
||||||
|
AEmpty: Empty,
|
||||||
|
ASpin: Spin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.office-car-history-style {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 20rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
.status-search-box {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.data-list-content-style {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
.data-list-style {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,314 @@
|
|||||||
|
<template>
|
||||||
|
<div class="office-car-history-large-style">
|
||||||
|
<SearchDom @toSearch="toSearch"/>
|
||||||
|
<div class="status-search-box-style">
|
||||||
|
<StatusSearch @statusChange="statusChange"/>
|
||||||
|
</div>
|
||||||
|
<div class="apply-content-div">
|
||||||
|
<a-spin :spinning="isLoading">
|
||||||
|
<vue-scroll :ops="listScroll" style="height:25rem" v-if="!isLoading && dataList.length > 0">
|
||||||
|
<div class="data-list-div">
|
||||||
|
<div class="data-row-div" v-for="item,index in dataList" :key="'info-'+ index">
|
||||||
|
<InfoRow :info="item"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
<div class="no-data-div" v-if="!isLoading && dataList.length == 0">
|
||||||
|
<a-empty></a-empty>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</div>
|
||||||
|
<div class="page-dom-div">
|
||||||
|
<a-icon type="left-circle" title="上一页"
|
||||||
|
:class="'page-icon-dom '+ (pageNumber == 1?'cannot-click':'can-click')"
|
||||||
|
v-on:click="changePage('previous')"/>
|
||||||
|
<span class="total-num-span">共{{totolNum}}条</span>
|
||||||
|
<a-icon type="right-circle" title="下一页"
|
||||||
|
:class="'page-icon-dom '+ (pageNumber == totalPage?'cannot-click':'can-click')"
|
||||||
|
v-on:click="changePage('next')"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SearchDom from '../carUseReturn/searchDom.vue';
|
||||||
|
import StatusSearch from './carStatusSearch.vue';
|
||||||
|
import InterConfig from '../officeCar/interConfig';
|
||||||
|
import InfoRow from '../carUseReturn/infoRow.vue';
|
||||||
|
import {Spin, Empty, Icon} from 'ant-design-vue';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 8,
|
||||||
|
totalPage: 0,
|
||||||
|
totolNum: 0,
|
||||||
|
listScroll: this.StaticParams.scrollOption,
|
||||||
|
isLoading: false,
|
||||||
|
carInfo: "",
|
||||||
|
//申请起止日期
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
//用车时间
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
checkStatus: "",//审核状态
|
||||||
|
useStatus: "",//使用状态
|
||||||
|
dataList:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toSearch: function (param) {
|
||||||
|
this.carInfo = param.carInfo;
|
||||||
|
this.startDate = param.startDate;
|
||||||
|
this.endDate = param.endDate;
|
||||||
|
this.startTime = param.startTime;
|
||||||
|
this.endTime = param.endTime;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
statusChange: function (param) {
|
||||||
|
this.checkStatus = param.checkStatus;
|
||||||
|
this.useStatus = param.useStatus;
|
||||||
|
},
|
||||||
|
getDataList: function () {
|
||||||
|
let param = {
|
||||||
|
org_id: this.BaseConfig.person_info_my.bureau_id,
|
||||||
|
person_id: this.BaseConfig.userInfo.person_id,
|
||||||
|
page_number: this.pageNumber,
|
||||||
|
page_size: this.pageSize,
|
||||||
|
car_info: this.carInfo,
|
||||||
|
apply_begin_time: this.startDate,
|
||||||
|
apply_end_time: this.endDate,
|
||||||
|
use_begin_time: this.startTime,
|
||||||
|
use_end_time: this.endTime,
|
||||||
|
apply_check_flag: this.checkStatus,
|
||||||
|
apply_car_status: this.useStatus,
|
||||||
|
}
|
||||||
|
this.isLoading = true;
|
||||||
|
this.InterfaceConfig.callInterface([{
|
||||||
|
url: InterConfig.listAllApplyCar.url,
|
||||||
|
params: param,
|
||||||
|
method: InterConfig.listAllApplyCar.method,
|
||||||
|
isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
|
||||||
|
}], (result) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
let resData = result[0].data;
|
||||||
|
if (resData.code === 2000) {
|
||||||
|
this.dataList = resData.data.list;
|
||||||
|
this.totalPage = resData.data.total_page;
|
||||||
|
this.totolNum = resData.data.total_row;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changePage:function (type) {
|
||||||
|
if (type == 'previous') {
|
||||||
|
if (this.pageNumber == 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.pageNumber--;
|
||||||
|
} else if (type == 'next') {
|
||||||
|
if (this.pageNumber == this.totalPage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.pageNumber++;
|
||||||
|
}
|
||||||
|
this.getDataList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
SearchDom,
|
||||||
|
StatusSearch,
|
||||||
|
ASpin: Spin,
|
||||||
|
AEmpty: Empty,
|
||||||
|
AIcon: Icon,
|
||||||
|
InfoRow
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.office-car-history-large-style {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 20rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.status-search-box-style {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.apply-content-div {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 15rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.ant-spin-nested-loading {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.data-list-div {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.data-row-div {
|
||||||
|
width: 50%;
|
||||||
|
min-height: 5rem;
|
||||||
|
display: flex;
|
||||||
|
/* flex-direction: column;*/
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
position: relative;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
color: #7F7F7F;
|
||||||
|
padding: 0.5rem;
|
||||||
|
.user-image-box {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.apply-info-box {
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
.time-row-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
.meeting-info-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 6rem;
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.2rem;
|
||||||
|
.top-info-row-div {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
.room-type-div {
|
||||||
|
border: 1px solid #31a8fa;
|
||||||
|
color: #31a8fa;
|
||||||
|
padding: 0 0.2rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.default-span-div {
|
||||||
|
width: calc(100% - 10rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-row-div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
overflow-y: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
.room-other-info-div {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
/*background-color: #f59a23;*/
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
.no-data-tips {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.meeting-status-flag-style {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
padding: 5px 10px;
|
||||||
|
transform: rotate(7deg);
|
||||||
|
-ms-transform: rotate(7deg); /* IE 9 */
|
||||||
|
-moz-transform: rotate(7deg); /* Firefox */
|
||||||
|
-webkit-transform: rotate(7deg); /* Safari 和 Chrome */
|
||||||
|
-o-transform: rotate(7deg); /* Opera */
|
||||||
|
}
|
||||||
|
.not-start {
|
||||||
|
border: 1px solid #ec8692;
|
||||||
|
color: #ec8692;
|
||||||
|
}
|
||||||
|
.is-meeting {
|
||||||
|
border: 1px solid #f3d7b1;
|
||||||
|
color: #f3d7b1;
|
||||||
|
}
|
||||||
|
.is-delayed {
|
||||||
|
border: 1px solid #a64bfb;
|
||||||
|
color: #a64bfb;
|
||||||
|
}
|
||||||
|
.button-div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -0.5rem;
|
||||||
|
bottom: 0;
|
||||||
|
/* padding: 1rem 0.5rem;*/
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
.button-span {
|
||||||
|
width: 50px;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 2px;
|
||||||
|
background-color: #31a8fa;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page-dom-div {
|
||||||
|
height: 2.5rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
.page-icon-dom {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.cannot-click {
|
||||||
|
background-color: #a3b0c0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.can-click {
|
||||||
|
background-color: #31a8fa;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.total-num-span {
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue