Skip to content

O
on-site-service-admin-view
Commit 2c1be876 authored by shangtx's avatar shangtx
Browse files
Options

init: 主题修改

parent 9bcfce81
Show whitespace changes
Inline Side-by-side
Showing with 597 additions and 1229 deletions
src/components/layouts/ApplyCar.vue deleted 100644 → 0
View file @ 9bcfce81
<template>
<div>
<a-modal
title="用车申请"
:visible="show"
:width="1120"
@cancel="handleCancel"
destroyOnClose
:footer="null"
>
<a-spin :spinning="loading">
<div class="flex-column" style="background: #f4f8ff;margin-bottom: 30px;">
<div class="flex-row" style="flex-wrap: wrap">
<div class="flex-column" style="padding: 10px" v-for="(item,index) in data.processMsgList" :key="index">
<div class="flex-row" style="align-items: center">
<div class="point" v-show="item.isCurrent" style="height:8px;width:8px; background: #3A62D7"></div>
<div class="point" v-show="item.beforePoint" style="height:8px;width:8px; background: #00C17E"></div>
<div class="point" v-show="item.afterPoint" style="height:8px;width:8px; background: #E3E4F2"></div>
<!-- <div class="point" v-if="item.isCurrent" style="background:#3A62D7"></div>-->
<!-- <div class="point" v-else></div>-->
<div class="point-text" style="font-size: large">{{ item.name }}</div>
<div class="line2" v-if="index !=data.processMsgList.length-1"></div>
</div>
<div class="date">{{ item.auditDate }}</div>
</div>
</div>
</div>
<div class="flex-column">
<div class="title">用车人信息</div>
<div class="flex-row">
<div class="content">姓名：{{ data.name }}</div>
<div class="content">电话：{{ data.phone }}</div>
<div class="content">部门：{{ data.orgName }}</div>
<div class="content">发起时间：{{ data.ctDate }}</div>
</div>
<div class="line"></div>
<div class="title">用车事由</div>
<div class="content" style="width: auto">{{ data.reason }}</div>
<div class="line"></div>
<div class="title">行程信息</div>
<div class="flex-column">
<div class="flex-row">
<div class="content">出发时间：{{ data.startDate }}</div>
<div class="content">预计返回时间：{{ data.endDate }}</div>
<div class="content">目的地:{{ data.destination }}</div>
</div>
<div class="flex-row" style="margin-top: 8px">
<div class="content">用车人数：{{ data.passengerNum }}</div>
<div class="content">路途性质：{{ data.routeNature }}</div>
<div class="content">同行人员：{{ data.passengerStr }}</div>
</div>
</div>
<div class="line"></div>
<div class="flex-row" v-if="data.plate">
<div class="content">车辆属性：{{ data.property }}</div>
<div class="content">车牌信息：{{ data.plate }}</div>
</div>
<template v-if="data.isAuditUser">
<!--用车审批form-->
<a-form-model ref="form" style="margin-top: 10px" v-if="data.status == 1">
<a-row>
<a-col>
<a-form-model-item label="选择车辆">
<a-select placeholder="选择用车" style="width: 200px" v-model="auditData.carId">
<a-select-option v-for="type in carSelectList" v-bind:value="type.id" v-bind:key="type.id">
{{ type.name }}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!--用车审批form-->
<!--用车结束form-->
<a-form-model ref="form" style="margin-top: 10px" v-if="data.status == backCardStatus">
<a-row>
<a-col>
<a-form-model-item label="用车结束时间">
<a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" v-model="auditData.returnTime"/>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次里表里程">
<div class="flex-row fff">
<a-input-number :min="1" :max="999999" class="input" v-model="auditData.nowMile"/>
<div class="info">上次里程表：{{ data.lastMile }}</div>
</div>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item label="是否加油">
<div class="flex-row fff">
<a-switch v-model="auditData.isFuel"></a-switch>
<div style="width: 20px"></div>
<a-form-model-item label="本次加油金额" v-if="auditData.isFuel == 1">
<div class="flex-row fff">
<a-input-number :min="0" class="input" v-model="auditData.fuelAmount"/>
</div>
</a-form-model-item>
<div class="info">卡号:{{ auditData.fuelCard }}</div>
<a-button type="link" @click="changeCard">
换绑
</a-button>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="是否保养">
<div class="flex-row fff">
<a-switch v-model="auditData.isMaintain"></a-switch>
<div class="info">上次保养里程表：{{ data.lastMaintainMile }}</div>
</div>
</a-form-model-item>
</a-col>
</a-row>
<a-row v-if="auditData.isMaintain == 1">
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养金额">
<div class="flex-row fff">
<a-input-number :min="0" :max="99999" class="input" v-model="auditData.maintainAmount"/>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养里程" >
<div class="flex-row fff">
<a-input-number :min="0" :max="999999" class="input" v-model="auditData.maintainMile"/>
<div class="info">KM</div>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养时间" >
<div class="flex-row fff">
<a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" v-model="auditData.maintainTime"/>
</div>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!--用车结束form-->
</template>
<a-textarea
:rows="4"
style="margin-top: 10px; margin-bottom: 10px"
v-if="data.isAuditUser && data.status <backCardStatus"
placeholder="请输入备注"
v-model="auditData.remark"/>
<div style="height: 10px"></div>
<a-card class="cust-normal-card" title="流程信息">
<a-card
:style="{ maxHeight: '590px',minHeight: '590px',overflow:'auto',padding:'8px'}"
class="cust-list-cart">
<a-timeline>
<a-timeline-item :color="item.isCurrent?'green':'gray'" :key="item.id" v-for="item in processLogList">
<a-icon slot="dot" style="font-size: 16px;" type="clock-circle-o" v-if="item.isCurrent"/>
<div style="margin-bottom:5px;">
<span style="font-weight:bold">{{item.taskName}}</span>
<span v-if="item.auditUserName">（{{item.auditUserName}}）</span>
<div style="color:gray" v-if="item.auditDateStr!=null">{{item.auditDateStr}}</div>
</div>
<div v-if="item.isCurrent">
<div style="color:orange;font-weight:bold" v-if="item.alert">
<a-icon type="exclamation-circle"/>
&nbsp;{{item.alert}}
</div>
<div v-if="item.auditObjectBlackLog">
<span style="color:darkblue;font-weight:bold">[待办对象]：</span>
<span>{{item.auditObjectBlackLog}}</span>
</div>
</div>
<div style="color:gray" v-if="item.comment">
<span style="color:darkblue;font-weight:bold">[提交备注]：</span>
<span>{{item.comment}}</span>
</div>
</a-timeline-item>
</a-timeline>
</a-card>
</a-card>
<div style="height: 10px"></div>
<template v-if="data.isAuditUser">
<!-- 底部操作栏 -->
<div class="flex-row" style="justify-content: end;" v-if="data.status <backCardStatus">
<div class="jj" @click="action(0)">拒绝</div>
<div class="btn1 ty" @click="action(1)">同意</div>
</div>
<div class="flex-row" style="justify-content: end;" v-else-if="data.status == backCardStatus">
<div class="btn1 ty" @click="action(1)">确认用车结束</div>
</div>
</template>
</div>
</a-spin>
</a-modal>
<a-modal v-model="showChangeFuelCard" title="换绑卡号" @ok="handleOk">
<a-input class="input" v-model="auditData.fuelCard" style="width: 100%;"/>
</a-modal>
</div>
</template>
<script>
import {getCarApplyDetail, getCarSelectList, carAudit} from "@/api/car/home";
export default {
props: {
show: {
type: Boolean,
default: false,
},
},
data() {
return {
backCardStatus:4,
showChangeFuelCard:false,
loading: false,
data: {},
carSelectList: [],
processLogList: [],
auditData: {
// 1：同意 0：拒绝
auditType: null,
// 车辆id
carId: null,
// 流程id
id: null,
status: null,
remark: null,
// 是否保养： 1：是 0：否
isMaintain:null,
// 是否加油
isFuel:null,
// 用车结束时间
returnTime:null,
// 本次里表里程
nowMile:null,
fuelAmount:null,
maintainMile:null,
maintainTime:null,
maintainAmount:null,
// 加油卡号
fuelCard:"",
}
}
},
deactivated() {
this.processLogList = [];
},
mounted() {
},
methods: {
getData(id) {
this.loading = true
this.auditData = {}
getCarApplyDetail(id).then(res => {
this.data = res.data
this.processLogList = res.data.processLogList
this.auditData.fuelCard = res.data.fuelCard
this.auditData.id = res.data.id
if (res.data.status == 1) {
getCarSelectList().then(res => {
this.carSelectList = res.data
})
}
this.loading = false
}).catch(() => {
this.loading = false
})
},
handleOk(){
this.showChangeFuelCard = false
},
changeCard(){
this.showChangeFuelCard = true
},
handleCancel() {
this.$emit('onHide')
this.data = {}
this.auditData = {}
},
action(e) {
this.auditData.auditType = e
this.auditData.status = this.data.status
if (this.data.status == 1 && e == 1) {
if (this.auditData.carId == null) {
this.$notification.error({message: '系统提示', description: "请选择车辆", duration: 4,});
return
}
}
if(this.data.status != this.data.backCardStatus){
if (this.auditData.status != 4 && ( this.auditData.remark == null || this.auditData.remark.length <= 0)) {
this.$notification.error({message: '系统提示', description: "请填写备注信息", duration: 4,});
return
}
}
console.log(this.data.status)
if(this.data.status == this.backCardStatus){
if(this.auditData.isFuel == 1){
if (this.auditData.fuelAmount == null || this.auditData.fuelAmount.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写加油金额", duration: 4,});
return
}
}
if (this.auditData.returnTime == null || this.auditData.returnTime.length <= 0) {
this.$notification.error({message: '系统提示', description: "请选择用车结束时间", duration: 4,});
return
}
if (this.auditData.nowMile == null || this.auditData.nowMile.length <= 0) {
this.$notification.error({message: '系统提示', description: "请本次里表里程", duration: 4,});
return
}
console.log("1",this.data.lastMile)
console.log("2",this.auditData.nowMile)
if (this.auditData.nowMile <= this.data.lastMile){
this.$notification.error({message: '系统提示', description: "本次里表里程必须大于上次里表里程", duration: 4,});
return
}
if(this.auditData.isMaintain){
if (this.auditData.maintainAmount == null || this.auditData.maintainAmount.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写本次保养金额", duration: 4,});
return
}
if (this.auditData.maintainMile == null || this.auditData.maintainMile.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写本次保养里程(km)", duration: 4,});
return
}
if (this.auditData.maintainTime == null || this.auditData.maintainTime.length <= 0) {
this.$notification.error({message: '系统提示', description: "请选择本次保养时间", duration: 4,});
return
}
if (this.auditData.maintainMile <= this.data.lastMaintainMile){
this.$notification.error({message: '系统提示', description: "本次保养里程必须大于上次保养里程", duration: 4,});
return
}
}
}
this.loading = true
console.log("data",this.auditData)
carAudit(this.auditData).then(res => {
this.loading = false
this.$notification.success({message: '系统提示', description: res.code == 200 ? "处理成功" : "处理失败", duration: 4,});
if (res.code == 200) {
this.$emit('onSuccess')
}
}).catch(() => {
this.loading = false
})
}
},
}
</script>
<style lang="less" scoped>
.title {
font-size: 8px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #3e3e3e;
line-height: 22px;
}
.w40 {
width: 40px;
}
.content {
width: 255px;
font-size: 7px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3e3e3e;
line-height: 20px;
}
.line {
width: 100%;
border: 0.5px solid #e6e9f4;
margin-top: 10px;
margin-bottom: 10px;
}
.point {
width: 4px;
height: 4px;
background: #e3e4f2;
border-radius: 100%;
}
.point-text {
margin-left: 5px;
font-size: 7px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7d8592;
line-height: 10px;
}
.date {
margin-top: 4px;
font-size: 4px;
font-family: PingFangSC-Regular, PingFang SC;
margin-left: 7px;
color: #7d8592;
}
.line2 {
margin-left: 20px;
width: 50px;
height: 0.5px;
background: #c8d1f2;
}
::v-deep .ant-form-item {
margin-bottom: 0px;
}
::v-deep .ant-row {
display: flex;
align-items: center;
}
.info {
margin-left: 10px;
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #3E3E3E;
line-height: 20px;
}
.input {
width: 140px;
height: 30px;
}
.fff {
align-items: center;
}
.ty {
width: 160px;
height: 40px;
line-height: 40px;
font-size: 14px;
border-radius: 24px;
margin-right: 10px;
}
.jj {
width: 160px;
height: 40px;
border-radius: 24px;
border: 1px solid #EC3535;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #EC3535;
line-height: 40px;
margin-right: 10px;
}
</style>
src/components/menu/SideMenu.vue
View file @ 2c1be876
......@@ -37,7 +37,7 @@
theme: {
type: String,
required: false,
default: 'light'
default: 'dark'
},
collapsible: {
type: Boolean,
......
src/components/menu/index.js
View file @ 2c1be876
......@@ -13,7 +13,7 @@ export default {
theme: {
type: String,
required: false,
default: 'light'
default: 'dark'
},
mode: {
type: String,
......
src/components/page/GlobalHeader.vue
View file @ 2c1be876
......@@ -78,7 +78,7 @@
theme: {
type: String,
required: false,
default: 'light'
default: 'dark'
},
collapsed: {
type: Boolean,
......
src/components/page/GlobalLayout.vue
View file @ 2c1be876
<template>
<a-layout class="layout" :class="[device]">
<a-layout :class="[device]" class="layout">
<template v-if="layoutMode === 'sidemenu'">
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
:visible="collapsed"
:wrapClassName="'drawer-sider ' + navTheme"
@close="() => (this.collapsed = false)"
placement="left"
v-show="device === 'mobile'"
width="213"
class="drawerSty"
>
<side-menu
mode="inline"
:collapsed="false"
:collapsible="true"
:company="company"
:menus="menus"
@menuSelect="menuSelect"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
@menuSelect="menuSelect"
mode="inline"
></side-menu>
</a-drawer>
<side-menu
v-else
mode="inline"
:collapsed="collapsed"
:collapsible="true"
:company="company"
:menus="menus"
:theme="navTheme"
:collapsed="collapsed"
:collapsible="true"></side-menu>
mode="inline"
v-show="device === 'desktop'"
></side-menu>
</template>
<!-- 下次优化这些代码 -->
<template v-else>
<a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false"
:visible="collapsed"
:wrapClassName="'drawer-sider ' + navTheme"
@close="() => (this.collapsed = false)"
placement="left"
v-if="device === 'mobile'"
width="213"
>
<side-menu
mode="inline"
:collapsed="false"
:collapsible="true"
:company="company"
:menus="menus"
@menuSelect="menuSelect"
:theme="navTheme"
:collapsed="false"
:collapsible="true"></side-menu>
@menuSelect="menuSelect"
mode="inline"
></side-menu>
</a-drawer>
</template>
<a-layout
:class="[layoutMode, `content-width-${contentWidth}`]"
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 213 : 80}px` : '0' }">
:style="{
paddingLeft:
fixSiderbar && isDesktop() ? `${sidebarOpened ? 213 : 80}px` : '0',
}"
>
<!-- layout header -->
<global-header
style="background: transparent"
:mode="layoutMode"
:menus="menus"
:theme="navTheme"
:collapsed="collapsed"
:device="device"
:company="company"
:menus="menus"
:mode="layoutMode"
:theme="navTheme"
@toggle="toggle"
/>
<!-- layout content -->
<a-layout-content
:style="{ marginLeft: ' 10px',marginRight:'10px', height: 'calc(100vh - 50px)', marginTop: fixedHeader ? '50px' : '10' }">
style="scroll-behavior:smooth"
:style="{
marginLeft: ' 16px',
marginRight: '16px',
height: 'calc(100vh - 50px)',
marginTop: fixedHeader ? '74px' : '24px',
}"
>
<slot></slot>
</a-layout-content>
<!-- layout footer -->
<a-layout-footer style="padding: 0px">
</a-layout-footer>
<a-layout-footer style="padding: 0px"></a-layout-footer>
</a-layout>
<!--<setting-drawer></setting-drawer>-->
......@@ -81,248 +95,208 @@
</template>
<script>
import SideMenu from '@/components/menu/SideMenu'
import GlobalHeader from '@/components/page/GlobalHeader'
// import SettingDrawer from '@/components/setting/SettingDrawer'
import {triggerWindowResizeEvent} from '@/util/util'
import {mapActions, mapState} from 'vuex'
import {mixin, mixinDevice} from '@/util/mixin.js'
export default {
import SideMenu from "@/components/menu/SideMenu";
import GlobalHeader from "@/components/page/GlobalHeader";
// import SettingDrawer from '@/components/setting/SettingDrawer'
import { triggerWindowResizeEvent } from "@/util/util";
import { mapActions, mapState } from "vuex";
import { mixin, mixinDevice } from "@/util/mixin.js";
export default {
name: "GlobalLayout",
components: {
SideMenu,
GlobalHeader
GlobalHeader,
// ,SettingDrawer
},
mixins: [mixin, mixinDevice],
data() {
return {
collapsed: false,
menus: []
}
menus: [],
};
},
computed: {
...mapState({
// 主路由
mainMenu: state => state.permission.addRouters,
})
mainMenu: (state) => state.permission.addRouters,
company: (state) => state.user.company,
}),
},
watch: {
sidebarOpened(val) {
this.collapsed = !val
this.collapsed = !val;
},
},
created() {
this.menus = this.filterHidenRouter(this.mainMenu.find((item) => item.path === '/').children)
this.menus = this.filterHidenRouter(
this.mainMenu.find((item) => item.path === "/").children
);
},
methods: {
...mapActions(['setSidebar']),
...mapActions(["setSidebar"]),
toggle() {
this.collapsed = !this.collapsed
this.setSidebar(!this.collapsed)
triggerWindowResizeEvent()
this.collapsed = !this.collapsed;
this.setSidebar(!this.collapsed);
triggerWindowResizeEvent();
},
menuSelect() {
if (!this.isDesktop()) {
this.collapsed = false
this.collapsed = false;
}
},
filterHidenRouter(routes, init = []) {
for (let i = 0; i < routes.length; i++) {
let item = routes[i]
let item = routes[i];
if (item.hidden == true) {
continue
continue;
}
let routerItem = {
meta: {}
meta: {},
};
routerItem.path = item.path
routerItem.name = item.name
routerItem.meta.title = item.meta.title
routerItem.path = item.path;
routerItem.name = item.name;
routerItem.meta.title = item.meta.title;
if (item.meta.icon) {
routerItem.meta.icon = item.meta.icon
routerItem.meta.icon = item.meta.icon;
}
if (item.children) {
routerItem.children = []
routerItem.children = [];
this.filterHidenRouter(item.children, routerItem.children);
}
init.push(routerItem);
}
return init;
}
},
}
},
};
</script>
<style lang="less">
body {
body {
// 打开滚动条固定显示
// overflow-y: scroll;
&.colorWeak {
filter: invert(80%);
}
}
}
//修改antd header 行高
.ant-layout-header {
//修改antd header 行高
.ant-layout-header {
height: 50px !important;
line-height: 50px !important;
}
//修改menu行高
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: 35px !important;
line-height: 35px !important;
}
//修改menu行高
.ant-menu-sub.ant-menu-inline > .ant-menu-item, .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
height: 35px !important;
line-height: 35px !important;
}
//调整table行高
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td {
padding-bottom: 5px !important;
padding-top: 5px !important;
font-size: 13px;
}
.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
padding-bottom: 5px !important;
padding-top: 5px !important;
}
}
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
padding-bottom: 6px !important;
padding-top: 6px !important;
.ant-layout.ant-layout-has-sider > .ant-layout,
.ant-layout.ant-layout-has-sider > .ant-layout-content {
overflow: hidden;
}
.ant-layout-content {
overflow: auto;
.ant-spin-container {
// min-width: 400px;
}
}
.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
padding-bottom: 6px !important;
padding-top: 6px !important;
}
.ant-card-body {
.ant-card-body {
padding: 5px !important;
}
}
.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
padding-bottom: 5px !important;
padding-top: 5px !important;
font-size: 13px;
}
.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th {
padding-bottom: 6px !important;
padding-top: 6px !important;
}
//列表页样式调整
.ant-advanced-search-form {
//列表页样式调整
.ant-advanced-search-form {
margin-bottom: 5px !important;
padding: 3px !important;
background: #fbfbfb;
border: 1px solid #d9d9d9;
border-radius: 6px;
}
}
.ant-table-selection-column{
.ant-table-selection-column {
min-width: 45px !important;
width: 45px !important;
}
}
.cust-table-operator {
float: right
}
.cust-table-operator {
float: right;
}
.cust-pagination {
.cust-pagination {
float: right;
margin-top: -6px !important;
}
}
//列表页样式
.cust-list-cart {
//列表页样式
.cust-list-cart {
margin: 0px 0px 0px 0px !important;
}
}
.cust-list-cart .ant-table-footer {
.cust-list-cart .ant-table-footer {
padding: 0px 10px;
height: 37px;
line-height: 37px;
}
}
.cust-list-cart .ant-row .ant-form-item {
.cust-list-cart .ant-row .ant-form-item {
margin-bottom: 5px !important;
}
}
.cust-list-cart .ant-table-title {
.cust-list-cart .ant-table-title {
padding: 0px 10px 0px 10px !important;
height: 45px;
line-height: 45px;
border-bottom: 0px !important;
background: #fbfbfb;
}
}
.cust-list-cart .ant-table-content {
.cust-list-cart .ant-table-content {
clear: both;
}
}
//自定义卡片样式
.cust-normal-card {
//自定义卡片样式
.cust-normal-card {
margin: 5px !important;
}
}
.cust-normal-card .ant-card-head-title {
.cust-normal-card .ant-card-head-title {
padding: 0px;
font-weight: bold !important;
font-size: 15px;
line-height: 40px;
}
}
.cust-normal-card .ant-card-extra {
.cust-normal-card .ant-card-extra {
padding: 0px;
line-height: 40px;
}
}
.cust-normal-card .ant-card-head {
background: #F8F8FF;
.cust-normal-card .ant-card-head {
background: #f8f8ff;
min-height: 30px;
padding: 0px 10px !important;
}
}
.cust-normal-card .ant-card-body {
.cust-normal-card .ant-card-body {
padding: 5px !important;
}
}
//自定义form input 提示样式
.cust-normal-card .ant-form-explain {
//自定义form input 提示样式
.cust-normal-card .ant-form-explain {
font-size: 12px;
line-height: 14px;
}
}
.cust-normal-card .ant-form-item-with-help {
.cust-normal-card .ant-form-item-with-help {
margin-bottom: 0px !important;
}
.cust-normal-card .ant-row {
height: 40px;
}
.cust-normal-card .ant-form-item {
margin-bottom: 14px;
}
}
//自定义弹出dialog样式
.cust-modal{
.ant-modal-body{
//自定义弹出dialog样式
.cust-modal {
.ant-modal-body {
padding: 10px;
}
.ant-form-explain {
......@@ -338,31 +312,23 @@
.ant-form-item {
margin-bottom: 14px;
}
}
}
//自定义明细form
.cust-detail-form {
//自定义明细form
.cust-detail-form {
padding-top: 45px !important;
}
}
.cust-title {
font-size: 16px;
font-weight: bold;
color: #473C8B;
}
.cust-card-table{
.cust-card-table {
padding-bottom: 10px;
}
//原有样式
.layout {
}
//原有样式
.layout {
min-height: 100vh;
overflow-x: hidden;
&.mobile {
.ant-layout-content {
.content {
margin: 24px 0 0;
}
......@@ -384,9 +350,9 @@
.sidemenu {
.ant-header-fixedHeader {
&.ant-header-side-opened, &.ant-header-side-closed {
width: 100%
&.ant-header-side-opened,
&.ant-header-side-closed {
width: 100%;
}
}
}
......@@ -410,45 +376,13 @@
line-height: 50px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
transition: color 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.topmenu {
.ant-header-fixedHeader {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
&.ant-header-side-opened {
width: 100%;
}
&.ant-header-side-closed {
width: 100%;
}
}
/* 必须为 topmenu 才能启用流式布局 */
&.content-width-Fluid {
.header-index-wide {
max-width: unset;
margin-left: 24px;
}
.page-header-index-wide {
max-width: unset;
}
}
}
.sidemenu {
.ant-header-fixedHeader {
position: fixed;
......@@ -456,30 +390,28 @@
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
transition: width 0.2s;
&.ant-header-side-opened {
width: calc(100% - 213px)
width: calc(100% - 213px);
}
&.ant-header-side-closed {
width: calc(100% - 80px)
width: calc(100% - 80px);
}
}
}
.header {
height: 50px;
padding: 0 12px 0 0;
background: transparent;
background-color: whitesmoke;
//box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
}
.header, .top-nav-header-index {
.header,
.top-nav-header-index {
.breadcrumb {
float: left;
line-height: 50px;
......@@ -493,7 +425,7 @@
cursor: pointer;
padding: 0 12px;
display: inline-block;
transition: all .3s;
transition: all 0.3s;
height: 100%;
&:hover {
......@@ -503,11 +435,10 @@
.avatar {
margin: 12px 8px 20px 0;
color: #1890ff;
background: hsla(0, 0%, 100%, .85);
background: hsla(0, 0%, 100%, 0.85);
vertical-align: middle;
}
.icon {
font-size: 16px;
padding: 4px;
......@@ -517,7 +448,6 @@
&.dark {
.user-wrapper {
.action {
color: rgba(255, 255, 255, 0.85);
......@@ -531,11 +461,8 @@
&.mobile {
.top-nav-header-index {
.header-index-wide {
.header-index-left {
.trigger {
color: rgba(255, 255, 255, 0.85);
padding: 0 12px;
......@@ -550,17 +477,13 @@
}
&.light {
.header-index-wide {
.header-index-left {
.trigger {
color: rgba(0, 0, 0, 0.65);
}
}
}
//
}
}
}
......@@ -568,9 +491,7 @@
&.tablet {
// overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
.top-nav-header-index {
.header-index-wide {
.header-index-left {
.logo > a {
overflow: hidden;
......@@ -580,14 +501,12 @@
}
}
}
}
.top-nav-header-index {
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
transition: background .3s, width .2s;
transition: background 0.3s, width 0.2s;
.header-index-wide {
max-width: 1200px;
......@@ -611,7 +530,7 @@
height: 50px;
position: relative;
line-height: 50px;
transition: all .3s;
transition: all 0.3s;
overflow: hidden;
img {
......@@ -653,7 +572,6 @@
}
}
// 内容区
.layout-content {
margin: 24px 24px 0px;
......@@ -661,18 +579,17 @@
height: 50px;
padding: 0 12px 0 0;
}
}
}
.topmenu {
.topmenu {
.page-header-index-wide {
max-width: 1200px;
margin: 0 auto;
}
}
}
// drawer-sider 自定义
.ant-drawer.drawer-sider {
// drawer-sider 自定义
.ant-drawer.drawer-sider {
.sider {
box-shadow: none;
}
......@@ -692,13 +609,13 @@
}
.ant-drawer-body {
padding: 0
}
padding: 0;
}
}
// 菜单样式
.sider {
//box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
// 菜单样式
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
......@@ -712,12 +629,13 @@
position: relative;
line-height: 50px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: #002140;
overflow: hidden;
img, h1 {
img,
h1 {
display: inline-block;
vertical-align: middle;
}
......@@ -730,18 +648,21 @@
color: #fff;
font-size: 16px;
margin: 0 0 0 12px;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont,
"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
/*font-weight: 600;*/
}
}
&.light {
background-color: #fff;
//box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
.logo {
background: #fff;
//box-shadow: 1px 1px 0px 0px #e8e8e8;
box-shadow: 1px 1px 0px 0px #e8e8e8;
h1 {
color: unset;
......@@ -752,11 +673,10 @@
border-right-color: transparent;
}
}
}
}
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
.ant-dropdown-menu-item {
......@@ -765,23 +685,18 @@
.ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .anticon:first-child
.ant-dropdown-menu-submenu-title > a > .anticon:first-child {
.ant-dropdown-menu-submenu-title
> .anticon:first-child
.ant-dropdown-menu-submenu-title
> a
> .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
}
}
// 数据列表 样式
.table-alert {
margin-bottom: 16px;
}
.table-page-search-wrapper {
.table-page-search-wrapper {
.ant-form-inline {
.ant-form-item {
display: flex;
margin-bottom: 24px;
......@@ -811,11 +726,9 @@
margin-bottom: 24px;
white-space: nowrap;
}
}
}
.content {
.content {
.table-operator {
margin-bottom: 18px;
......@@ -823,46 +736,58 @@
margin-right: 8px;
}
}
}
}
//富文本编辑框默认样式
.ql-container {
//富文本编辑框默认样式
.ql-container {
min-height: 100px;
}
.quill-editor {
margin-bottom: 10px;
}
}
/**
/**
* 自动异常超长字段
*/
.white-space-content {
.white-space-content {
table-layout: fixed;
max-width: 400px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/*.white-space-content:hover{*/
/*max-width: 600px;*/
/*white-space: normal;*/
/*overflow: visible;*/
/*}*/
/**
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*.white-space-content:hover{*/
/*max-width: 600px;*/
/*white-space: normal;*/
/*overflow: visible;*/
/*}*/
/**
* 百度地图
*/
#baiduMap {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
#baiduMap {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#allmap{
}
#allmap {
height: 600px;
width: auto;
overflow: hidden;
}
}
.ant-input-disabled {
color: rgba(109, 103, 103, 0.85) !important;
}
.ant-select-disabled {
color: rgba(109, 103, 103, 0.85) !important;
}
/*页码选中样式*/
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
margin-bottom: 24px;
}
.bg-row {
background-color: lightgrey;
}
</style>
\ No newline at end of file
src/defaultSettings.js
View file @ 2c1be876
......@@ -15,7 +15,7 @@
export default {
primaryColor: '#3A62D7', // primary color of ant design
navTheme: 'light', // theme for nav menu
navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header
......
src/store/modules/app.js
View file @ 2c1be876
......@@ -18,7 +18,7 @@ const app = {
withoutAnimation: false
},
device: 'desktop',
theme: '',
theme: 'dark',
layout: '',
contentWidth: '',
fixedHeader: false,
......
src/views/user/Login.vue
View file @ 2c1be876
......@@ -7,7 +7,7 @@
>
<div style="width: 600px; margin-left: 150px">
<div class="aaa">欢迎使用</div>
<div class="bbb">服务预约管理系统</div>
<div class="bbb">城市匠人管理系统</div>
<div style="height: 50px"></div>
<a-form class="user-layout-login" @submit="handleSubmit" :form="form">
......@@ -21,7 +21,7 @@
{
initialValue: '',
rules: [
{ required: true, message: '请输入帐户名或邮箱地址' },
{ required: true, message: '请输入用户名' },
{ validator: this.handleUsernameOrEmail },
],
},
......@@ -74,14 +74,12 @@
import { mapActions } from "vuex";
import { initRouterTree } from "@/router/router.config";
import notification from "ant-design-vue/es/notification";
// import {timeFix} from "../../util/util"
export default {
data() {
return {
customActiveKey: "tab1",
loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
loginType: 1,
form: this.$form.createForm(this),
state: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment