Skip to content

B
bims
Commit f76b3dc9 authored by 吴婷慧's avatar 吴婷慧
Browse files
Options

UI尺寸标准确认修改

parent bd86d569
Show whitespace changes
Inline Side-by-side
Showing with 335 additions and 215 deletions
public/index.html
View file @ f76b3dc9
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script <script
type="text/javascript" type="text/javascript"
src="//at.alicdn.com/t/font_3020450_fmrwd9gemcl.js" src="//at.alicdn.com/t/font_3020450_mgm6gng7qr.js"
></script> ></script>
</head> </head>
<body> <body>
......
src/assets/style/common.less
View file @ f76b3dc9
...@@ -29,15 +29,7 @@ button::-moz-focus-inner { ...@@ -29,15 +29,7 @@ button::-moz-focus-inner {
} }
.mar-left10 { .mar-left10 {
.mg-l(40); .mg-l(30);
}
// form部分全局样式重置
.ant-form label{
.fs(19);
}
.ant-calendar-picker {
width: 100%;
} }
// 媒体查询 // 媒体查询
......
src/assets/style/reset.less
View file @ f76b3dc9
...@@ -169,3 +169,119 @@ input, ...@@ -169,3 +169,119 @@ input,
select { select {
vertical-align: middle; vertical-align: middle;
} }
// 菜单默认样式及激活样式重置
.menu {
.icon-class {
.mg-r(19);
}
.ant-menu .ant-menu-submenu .ant-menu-submenu-title,
.ant-menu li.ant-menu-item {
.h(64);
.lh(64);
.mg(0);
.ant-menu-submenu-arrow {
&::before,
&::after {
content: none;
}
}
}
.ant-menu .ant-menu-submenu .ant-menu-submenu-title,
.ant-menu li.ant-menu-item a {
.fs(14);
color: #778ca2;
}
.ant-menu.ant-menu-sub {
background-color: #f8fafb;
.ant-menu-item:not(:last-child) {
.bd-b(solid, 1, #F0F3F5);
}
}
.ant-menu-item.ant-menu-item-selected,
.ant-menu-submenu.ant-menu-submenu-open .ant-menu-submenu-title {
background-color: #2b63ff !important;
color: #fff;
&::after {
content: none;
}
a.router-link-active {
color: #fff;
}
}
.ant-menu-sub {
.ant-menu-item.ant-menu-item-selected {
background-color: transparent !important;
a.router-link-active {
color: #2b63ff;
}
}
}
}
// form部分全局样式重置
.ant-form {
.ant-form-item{
.mg-b(22);
}
label{
// .fs(19);
font-weight: bold;
font-family: PingFangSC-Medium, PingFang SC;
}
}
.ant-calendar-picker {
width: 100%;
}
// .ant-table,
.ant-table {
thead th{
font-weight: bold;
background-color: #F8FAFB;
}
.ant-btn {
// .fs(21);
.pa(0, 8, 0, 8)
}
}
.ant-btn-primary{
background-color: #2B63FF;
}
.ant-btn-link{
color: #2B63FF;
}
.ant-input,
.ant-select-selection {
border: none;
background-color: #f8fafb;
&::placeholder {
color: #252631;
opacity: 0.4;
}
}
.none-label {
.ant-form-item-label {
opacity: 0;
}
}
.custom-info {
.ant-pagination-item-active {
.fs(16);
border: none;
// vertical-align: baseline;
}
.ant-pagination-item-link {
.fs(16);
.lh(22);
.pa(7, 15, 7, 15);
display: inline-block;
background-color: #f8fafb;
border: none;
}
.ant-pagination-item:not(.ant-pagination-item-active) {
display: none;
}
}
\ No newline at end of file
src/components/Antd/index.js
View file @ f76b3dc9
...@@ -14,6 +14,7 @@ import { ...@@ -14,6 +14,7 @@ import {
InputNumber, InputNumber,
message, message,
pagination, pagination,
popconfirm,
} from "ant-design-vue"; } from "ant-design-vue";
export default () => { export default () => {
...@@ -32,6 +33,7 @@ export default () => { ...@@ -32,6 +33,7 @@ export default () => {
InputNumber, InputNumber,
message, message,
pagination, pagination,
popconfirm,
]; ];
// 注册 // 注册
els.forEach((item) => { els.forEach((item) => {
......
src/router/modules/customer.js
View file @ f76b3dc9
// 客户信息路由表,分包名称:customer // 客户信息路由表,分包名称:customer
export default { export default {
path: "/customer", path: "/customer",
redirect: "/customer/info", redirect: "customerInfo",
component: () => { component: () => {
return import(/* webpackChunkName: "customer" */ "@/views/customer"); return import(/* webpackChunkName: "customer" */ "@/views/customer");
}, },
children: [ children: [
{ {
path: "info", path: "",
name: "CustomerInfo", name: "customerInfo",
component: () => import("@/views/customer/info"), component: () => import("@/views/customer/info"),
}, },
{
path: "edit",
name: "customerEdit",
component: () => import("@/views/customer/edit"),
},
], ],
}; };
src/router/modules/menu.js
View file @ f76b3dc9
...@@ -5,11 +5,11 @@ export default [ ...@@ -5,11 +5,11 @@ export default [
title: "客户信息", title: "客户信息",
children: [ children: [
{ {
path: "/customer/info", path: "/customer",
title: "客户信息明细", title: "客户信息明细",
}, },
{ {
path: "", path: "/customer/edit",
title: "新建客户信息", title: "新建客户信息",
}, },
], ],
......
src/views/author/forget.vue
View file @ f76b3dc9
...@@ -26,24 +26,19 @@ ...@@ -26,24 +26,19 @@
<div v-if="activeStep === '1'"> <div v-if="activeStep === '1'">
<a-form-model-item prop="userName"> <a-form-model-item prop="userName">
<a-input <a-input
size="large"
v-model="form.userName" v-model="form.userName"
placeholder="请输入用户名" placeholder="请输入用户名"
></a-input> ></a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item prop="verificationCode"> <a-form-model-item prop="verificationCode">
<a-input <a-input v-model="form.verificationCode" placeholder="请输入验证码">
size="large"
v-model="form.verificationCode"
placeholder="请输入验证码"
>
<a-button type="primary" slot="addonAfter" @click="getVerifyCode" <a-button type="primary" slot="addonAfter" @click="getVerifyCode"
>发送验证码至邮箱</a-button >发送验证码至邮箱</a-button
> >
</a-input> </a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button size="large" type="primary" block @click="handlerNext" <a-button type="primary" block @click="handlerNext"
>下一步</a-button >下一步</a-button
> >
</a-form-model-item> </a-form-model-item>
...@@ -51,7 +46,6 @@ ...@@ -51,7 +46,6 @@
<div v-if="activeStep === '2'"> <div v-if="activeStep === '2'">
<a-form-model-item prop="passWord"> <a-form-model-item prop="passWord">
<a-input <a-input
size="large"
type="password" type="password"
v-model="form.passWord" v-model="form.passWord"
placeholder="请输入新密码" placeholder="请输入新密码"
...@@ -59,14 +53,13 @@ ...@@ -59,14 +53,13 @@
</a-form-model-item> </a-form-model-item>
<a-form-model-item prop="newPwd"> <a-form-model-item prop="newPwd">
<a-input <a-input
size="large"
type="password" type="password"
v-model="form.newPwd" v-model="form.newPwd"
placeholder="再次输入新密码" placeholder="再次输入新密码"
></a-input> ></a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button size="large" type="primary" block @click="handlerReset" <a-button type="primary" block @click="handlerReset"
>确定重置密码</a-button >确定重置密码</a-button
> >
</a-form-model-item> </a-form-model-item>
...@@ -166,8 +159,8 @@ export default { ...@@ -166,8 +159,8 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
.fs(21); .fs(16);
.lh(29); .lh(22);
color: #fff; color: #fff;
.pa(20, 17, 20, 17); .pa(20, 17, 20, 17);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
...@@ -177,9 +170,9 @@ export default { ...@@ -177,9 +170,9 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
.h(69); .h(62);
.bd-t(solid, 35, transparent); .bd-t(solid, 31, transparent);
.bd-b(solid, 35, transparent); .bd-b(solid, 31, transparent);
} }
&::before { &::before {
.l(-20); .l(-20);
...@@ -194,7 +187,7 @@ export default { ...@@ -194,7 +187,7 @@ export default {
.pa(18, 37, 32, 37); .pa(18, 37, 32, 37);
display: flex; display: flex;
.step-item { .step-item {
.fs(14); .fs(12);
width: 50%; width: 50%;
opacity: 0.4; opacity: 0.4;
&:first-child { &:first-child {
...@@ -234,8 +227,8 @@ export default { ...@@ -234,8 +227,8 @@ export default {
} }
} }
.module-title { .module-title {
.fs(19); .fs(14);
.lh(29); .lh(20);
.mg-b(32); .mg-b(32);
a { a {
color: #373842; color: #373842;
...@@ -244,7 +237,8 @@ export default { ...@@ -244,7 +237,8 @@ export default {
._forget { ._forget {
float: right; float: right;
font-weight: bold; font-weight: bold;
.fs(21); .fs(16);
.lh(22);
color: #373842; color: #373842;
} }
} }
......
src/views/author/index.vue
View file @ f76b3dc9
<template> <template>
<div class="author"> <div class="author">
<div class="content"> <div class="content">
<h1 class="title">欢迎登陆商保管理系统</h1> <h1 class="title">欢迎登录商保管理系统</h1>
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
...@@ -20,31 +20,29 @@ export default {}; ...@@ -20,31 +20,29 @@ export default {};
background: url("../../assets/image/login_bg.png") center center no-repeat; background: url("../../assets/image/login_bg.png") center center no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
.fs(120); .fs(90);
.lh(168); .lh(126);
.pb(90); .pb(90);
color: #fff; color: #fff;
letter-spacing: 3px;
} }
.login, .login,
.forget { .forget {
.w(525); .w(394);
.bd-rd(27); .bd-rd(27);
.pa(50, 63, 10, 63); .pa(50, 63, 10, 63);
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
} /deep/ .ant-input-group > .ant-input {
input {
background-color: #f8fafb; background-color: #f8fafb;
} }
} /deep/ .ant-input-group-addon {
</style> border: none;
}
}
<style lang="less"> input {
.forget,
.login {
.ant-input-group > .ant-input {
background-color: #f8fafb; background-color: #f8fafb;
} }
} }
......
src/views/author/login.vue
View file @ f76b3dc9
...@@ -8,26 +8,17 @@ ...@@ -8,26 +8,17 @@
</p> </p>
<a-form-model ref="form" :model="form" :rules="formRules"> <a-form-model ref="form" :model="form" :rules="formRules">
<a-form-model-item prop="userName"> <a-form-model-item prop="userName">
<a-input <a-input v-model="form.userName" placeholder="请输入用户名"></a-input>
size="large"
v-model="form.userName"
placeholder="请输入用户名"
></a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item prop="passWord"> <a-form-model-item prop="passWord">
<a-input <a-input
size="large"
type="password" type="password"
v-model="form.passWord" v-model="form.passWord"
placeholder="请输入密码" placeholder="请输入密码"
></a-input> ></a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item prop="verificationCode"> <a-form-model-item prop="verificationCode">
<a-input <a-input v-model="form.verificationCode" placeholder="请输入验证码">
size="large"
v-model="form.verificationCode"
placeholder="请输入验证码"
>
<img <img
:src="verifyImg" :src="verifyImg"
class="verify-img" class="verify-img"
...@@ -37,9 +28,7 @@ ...@@ -37,9 +28,7 @@
</a-input> </a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button size="large" type="primary" block @click="handlerLogin" <a-button type="primary" block @click="handlerLogin">登录</a-button>
>登录</a-button
>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
...@@ -99,8 +88,8 @@ export default { ...@@ -99,8 +88,8 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
.fs(21); .fs(16);
.lh(29); .lh(22);
color: #fff; color: #fff;
.pa(20, 17, 20, 17); .pa(20, 17, 20, 17);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
...@@ -110,9 +99,9 @@ export default { ...@@ -110,9 +99,9 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
.h(69); .h(62);
.bd-t(solid, 35, transparent); .bd-t(solid, 31, transparent);
.bd-b(solid, 35, transparent); .bd-b(solid, 31, transparent);
} }
&::before { &::before {
.l(-20); .l(-20);
...@@ -124,14 +113,15 @@ export default { ...@@ -124,14 +113,15 @@ export default {
} }
} }
.module-title { .module-title {
.fs(21); .fs(16);
.lh(29); .lh(22);
.mg-b(32); .mg-b(32);
color: #373842; color: #373842;
font-weight: bold; font-weight: bold;
._forget { ._forget {
float: right; float: right;
.fs(19); .fs(14);
.lh(20);
font-weight: normal; font-weight: normal;
color: #373842; color: #373842;
opacity: 0.4; opacity: 0.4;
......
src/views/customer/edit/index.vue 0 → 100644
View file @ f76b3dc9
<template>
<div>
<!-- form -->
<a-form-model ref="form" layout="vertical" :model="form">
<a-row :gutter="30">
<a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="病历号码">
<a-input v-model="form.mrnNo" placeholder="请输入病历号"></a-input>
</a-form-model-item>
</a-col>
<a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="客户姓名">
<a-input
v-model="form.patientName"
placeholder="请输入客户姓名"
></a-input>
</a-form-model-item>
</a-col>
<a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="出生日期">
<a-date-picker
v-model="form.birthday"
placeholder="请选择出生日期"
></a-date-picker>
</a-form-model-item>
</a-col>
<a-col :xl="4" :lg="6" :sm="12">
<a-form-model-item label="保险公司">
<a-select v-model="form.payorId" placeholder="请选择保险公司">
<a-select-option v-for="item in companyCode" :key="item.corpCode">
{{ item.longName }}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="保单号码">
<a-input
v-model="form.policyNo"
placeholder="请输入保单号码"
></a-input>
</a-form-model-item>
</a-col>
<a-col :xl="24" :lg="18" :sm="12" class="none-label">
<a-form-model-item label="button">
<a-button type="primary">新建客户信息</a-button>
<a-button class="mar-left10" type="primary" @click="handlerSearch"
>查询</a-button
>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
};
},
};
</script>
<style></style>
src/views/customer/index.vue
View file @ f76b3dc9
<template> <template>
<div class="index"> <div class="customer">
<!-- 客户信息 --> <!-- 客户信息 -->
<!-- 客户信息 <!-- 客户信息
<a-button>按钮</a-button> <a-button>按钮</a-button>
...@@ -41,4 +41,9 @@ export default { ...@@ -41,4 +41,9 @@ export default {
}; };
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.customer {
.pa(30, 36, 50, 39);
background-color: #fff;
}
</style>
src/views/customer/info/index.vue
View file @ f76b3dc9
...@@ -2,66 +2,53 @@ ...@@ -2,66 +2,53 @@
<div class="custom-info"> <div class="custom-info">
<!-- form --> <!-- form -->
<a-form-model ref="form" layout="vertical" :model="form"> <a-form-model ref="form" layout="vertical" :model="form">
<a-row :gutter="40"> <a-row :gutter="30">
<a-col :xl="6" :sm="8"> <a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="病历号码"> <a-form-model-item label="病历号码">
<a-input <a-input v-model="form.mrnNo" placeholder="请输入病历号"></a-input>
v-model="form.mrnNo"
size="large"
placeholder="请输入病历号"
></a-input>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :xl="6" :sm="8"> <a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="客户姓名"> <a-form-model-item label="客户姓名">
<a-input <a-input
v-model="form.patientName" v-model="form.patientName"
size="large"
placeholder="请输入客户姓名" placeholder="请输入客户姓名"
></a-input> ></a-input>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :xl="6" :sm="8"> <a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="出生日期"> <a-form-model-item label="出生日期">
<a-date-picker <a-date-picker
v-model="form.birthday" v-model="form.birthday"
size="large"
placeholder="请选择出生日期" placeholder="请选择出生日期"
></a-date-picker> ></a-date-picker>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :xl="6" :sm="8"> <a-col :xl="4" :lg="6" :sm="12">
<a-form-model-item label="保险公司"> <a-form-model-item label="保险公司">
<a-select <a-select v-model="form.payorId" placeholder="请选择保险公司">
v-model="form.payorId"
size="large"
placeholder="请选择保险公司"
>
<a-select-option v-for="item in companyCode" :key="item.corpCode"> <a-select-option v-for="item in companyCode" :key="item.corpCode">
{{ item.longName }} {{ item.longName }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :xl="6" :sm="8"> <a-col :xl="5" :lg="6" :sm="12">
<a-form-model-item label="保单号码"> <a-form-model-item label="保单号码">
<a-input <a-input
v-model="form.policyNo" v-model="form.policyNo"
size="large"
placeholder="请输入保单号码" placeholder="请输入保单号码"
></a-input> ></a-input>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :xl="18" :sm="16" class="none-label"> <a-col :xl="24" :lg="18" :sm="12" class="none-label">
<a-form-model-item label="button"> <a-form-model-item label="button">
<a-button size="large" type="primary">新建客户信息</a-button> <a-button type="primary"
<a-button ><Icon name="ssiadd" size="14" />新建客户信息</a-button
size="large"
class="mar-left10"
type="primary"
@click="handlerSearch"
>查询</a-button
> >
<a-button class="mar-left10" type="primary" @click="handlerSearch">
<Icon name="ssisearch_active" size="14" />查询
</a-button>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
</a-row> </a-row>
...@@ -71,13 +58,22 @@ ...@@ -71,13 +58,22 @@
<a-table <a-table
:columns="columns" :columns="columns"
:data-source="dataList" :data-source="dataList"
size="large"
row-key="mrnNo" row-key="mrnNo"
:scroll="{ x: true }"
:pagination="pagination" :pagination="pagination"
@change="onChange" @change="onChange"
> >
<template slot="operation" slot-scope=""> <template slot="operation" slot-scope="">
<a-button size="large" type="link">修改</a-button> <a-button type="link">修改</a-button>
<a-button type="link" class="success">新增</a-button>
<a-popconfirm
title="你确定要关闭吗？"
ok-text="确定"
cancel-text="取消"
@confirm="deleteData"
>
<a-button type="link" class="danger">删除</a-button>
</a-popconfirm>
</template> </template>
</a-table> </a-table>
</div> </div>
...@@ -87,19 +83,34 @@ ...@@ -87,19 +83,34 @@
export default { export default {
data() { data() {
const columns = [ const columns = [
{ title: "病历号", dataIndex: "mrnNo", width: 120 }, { title: "病历号", dataIndex: "mrnNo", ellipsis: true, width: 180 },
{ title: "客户姓名", dataIndex: "patientName", width: 120 }, {
{ title: "出生日期", dataIndex: "birthday", width: 120 }, title: "客户姓名",
{ title: "性别", dataIndex: "sex", width: 60 }, dataIndex: "patientName",
{ title: "保险公司", dataIndex: "payorId", width: 120 }, ellipsis: true,
{ title: "保单号码", dataIndex: "policyNo", width: 120 }, width: 120,
{ title: "保险有效日期", dataIndex: "startDate", width: 120 }, },
{ title: "保险终止日期", dataIndex: "endDate", width: 120 }, { title: "出生日期", dataIndex: "birthday", ellipsis: true, width: 180 },
{ title: "性别", dataIndex: "sex", ellipsis: true, width: 80 },
{ title: "保险公司", dataIndex: "payorName", ellipsis: true, width: 180 },
{ title: "保单号码", dataIndex: "policyNo", ellipsis: true, width: 190 },
{
title: "保险有效日期",
dataIndex: "startDate",
ellipsis: true,
width: 180,
},
{
title: "保险终止日期",
dataIndex: "endDate",
ellipsis: true,
width: 180,
},
{ {
title: "操作", title: "操作",
key: "operation", key: "operation",
align: "center", width: "175px",
width: "90px", fixed: "right",
scopedSlots: { customRender: "operation" }, scopedSlots: { customRender: "operation" },
}, },
]; ];
...@@ -122,16 +133,18 @@ export default { ...@@ -122,16 +133,18 @@ export default {
}, },
computed: { computed: {
pagination() { pagination() {
if (!this.pager || !this.dataList.length) { // if (!this.pager || !this.dataList.length) {
return false; // return false;
} // }
const { pageNum, pageSize } = this.pager; const { pageNum, pageSize } = this.pager;
const pages = Math.ceil(this.total / pageSize); const pages = Math.ceil(this.total / pageSize);
return { return {
current: pageNum, current: pageNum,
pageSize,
size: "large", size: "large",
position: "bottom", position: "bottom",
align: "right", align: "right",
total: this.total,
hideOnSinglePage: false, hideOnSinglePage: false,
itemRender: (current, type, originalElement) => { itemRender: (current, type, originalElement) => {
if (type === "prev") { if (type === "prev") {
...@@ -165,20 +178,21 @@ export default { ...@@ -165,20 +178,21 @@ export default {
} }
return originalElement; return originalElement;
}, },
onChange: (pager) => this.onChange(pager),
}; };
}, },
}, },
methods: { methods: {
onChange(pager) { onChange(pager) {
const { current } = pager; const { current } = pager;
console.log(pager); // console.log(pager);
this.pager.pageNum = current; this.pager.pageNum = current;
// this._getCustomerList(); this._getCustomerList();
}, },
onShowSizeChange(e) { onShowSizeChange(e) {
e && e.stopPropagation(); e && e.stopPropagation();
const val = e.target.value; const val = e.target.value * 1;
if (!val) { if (!val || val < 0) {
return false; return false;
} }
this.pager.pageSize = val; this.pager.pageSize = val;
...@@ -195,6 +209,9 @@ export default { ...@@ -195,6 +209,9 @@ export default {
this._getCustomerList(); this._getCustomerList();
}); });
}, },
deleteData() {
this.$message.success("删除成功");
},
_getCorporateCode() { _getCorporateCode() {
const params = { const params = {
longName: "", longName: "",
...@@ -218,10 +235,6 @@ export default { ...@@ -218,10 +235,6 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.custom-info {
.pa(40, 48, 67, 52);
background-color: #fff;
}
.none-label { .none-label {
text-align: right; text-align: right;
.ant-form-item-label { .ant-form-item-label {
...@@ -237,29 +250,13 @@ export default { ...@@ -237,29 +250,13 @@ export default {
background-color: #f8fafb; background-color: #f8fafb;
border: none; border: none;
} }
</style> .ant-btn .icon-class {
<style lang="less"> .mg-r(10);
.none-label {
.ant-form-item-label {
opacity: 0;
}
} }
.custom-info { .success.ant-btn-link {
.ant-pagination-item-active { color: #4cd964;
.fs(16); }
border: none; .danger.ant-btn-link {
// vertical-align: baseline; color: #ff3b30;
}
.ant-pagination-item-link {
.fs(16);
.lh(22);
.pa(7, 15, 7, 15);
display: inline-block;
background-color: #f8fafb;
border: none;
}
.ant-pagination-item:not(.ant-pagination-item-active) {
display: none;
}
} }
</style> </style>
src/views/layout/components/Header.vue
View file @ f76b3dc9
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<div class="header"> <div class="header">
<div class="logo">商保管理系统</div> <div class="logo">商保管理系统</div>
<div class="user-info"> <div class="user-info">
<p class="name"> <p class="name"><Icon :name="'ssicb'" :size="24" />{{ userInfo.name }}</p>
<Icon :name="'ssiuser'" :size="16" />{{ userInfo.name }}
</p>
<a-dropdown <a-dropdown
class="avator" class="avator"
:getPopupContainer="getPopupContainer" :getPopupContainer="getPopupContainer"
...@@ -12,7 +10,7 @@ ...@@ -12,7 +10,7 @@
> >
<div @click="(e) => e.preventDefault()"> <div @click="(e) => e.preventDefault()">
<img v-if="userInfo.avator" :src="userInfo.avator" alt="avator" /> <img v-if="userInfo.avator" :src="userInfo.avator" alt="avator" />
<Icon v-else :name="'ssiuser'" :size="32" /> <Icon v-else :name="'ssiuser'" :size="36" />
</div> </div>
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item> <a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item>
...@@ -63,15 +61,16 @@ export default { ...@@ -63,15 +61,16 @@ export default {
border-bottom: 1px solid #eef1f3; border-bottom: 1px solid #eef1f3;
z-index: 1; z-index: 1;
.logo { .logo {
.w(323); .w(242);
.fs(24); .fs(18);
.pa(27, 44, 24, 44); .pa(20, 44, 20, 44);
.lh(33); .lh(25);
font-weight: bold; font-weight: bold;
border-right: 2px solid #eef1f3; border-right: 2px solid #eef1f3;
} }
.user-info { .user-info {
.fs(19); .fs(14);
.lh(20);
display: flex; display: flex;
align-items: center; align-items: center;
color: #778ca2; color: #778ca2;
......
src/views/layout/components/menu/components/menuItem.js
View file @ f76b3dc9
...@@ -4,7 +4,7 @@ function SubMenu(h, menu, selectMenu) { ...@@ -4,7 +4,7 @@ function SubMenu(h, menu, selectMenu) {
// 菜单激活的时候图标要变颜色 图标名称要处理好 应该是在默认的基础上加个'_active' // 菜单激活的时候图标要变颜色 图标名称要处理好 应该是在默认的基础上加个'_active'
const iconName = const iconName =
selectMenu.indexOf(menu.path) < 0 ? menu.icon : menu.icon + "_active"; selectMenu.indexOf(menu.path) < 0 ? menu.icon : menu.icon + "_active";
icon = <Icon name={iconName} size={24} />; icon = <Icon name={iconName} size={18} />;
} }
return ( return (
<a-sub-menu key={menu.path}> <a-sub-menu key={menu.path}>
...@@ -25,7 +25,7 @@ function MenuItem(h, menu, selectMenu) { ...@@ -25,7 +25,7 @@ function MenuItem(h, menu, selectMenu) {
// 菜单激活的时候图标要变颜色 图标名称要处理好 应该是在默认的基础上加个'_active' // 菜单激活的时候图标要变颜色 图标名称要处理好 应该是在默认的基础上加个'_active'
const iconName = const iconName =
selectMenu.indexOf(menu.path) < 0 ? menu.icon : menu.icon + "_active"; selectMenu.indexOf(menu.path) < 0 ? menu.icon : menu.icon + "_active";
icon = <Icon name={iconName} size={24} />; icon = <Icon name={iconName} size={18} />;
} }
return ( return (
<a-menu-item key={menu.path}> <a-menu-item key={menu.path}>
......
src/views/layout/components/menu/subMenu.vue
View file @ f76b3dc9
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<Icon <Icon
@click="closeMenu(index)" @click="closeMenu(index)"
:name="isVisit(item.path) ? 'ssiclose_active' : 'ssiclose'" :name="isVisit(item.path) ? 'ssiclose_active' : 'ssiclose'"
:size="22" :size="16"
/> />
</router-link> </router-link>
<slot name="tips" /> <slot name="tips" />
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
methods: { methods: {
isVisit(val) { isVisit(val) {
const path = this.$route.path; const path = this.$route.path;
return path.indexOf(val) > -1; return path === val;
}, },
closeMenu(index) { closeMenu(index) {
const menuStack = JSON.parse(JSON.stringify(this.menuStack)); const menuStack = JSON.parse(JSON.stringify(this.menuStack));
...@@ -48,13 +48,14 @@ export default { ...@@ -48,13 +48,14 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.sub-menu { .sub-menu {
.mg-b(21); .mg-b(16);
.btn { .btn {
.fs(19); .fs(14);
.lh(27); .lh(20);
.pa(11, 13, 11, 13); .pa(8, 13, 8, 13);
.mg-r(40); .mg-r(40);
color: #252631; color: #252631;
font-weight: bold;
border: none; border: none;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
......
src/views/layout/index.vue
View file @ f76b3dc9
...@@ -35,72 +35,26 @@ export default { ...@@ -35,72 +35,26 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.menu-layout { .menu-layout {
background-color: #f8fafb; background-color: #f8fafb;
font-family: "Helvetica" "Microsoft YaHei" "微软雅黑";
.container { .container {
display: flex; display: flex;
position: relative; position: relative;
.pt(92); .pt(68);
// min-height: calc(100vh - 50px); // min-height: calc(100vh - 50px);
.content { .content {
flex: 1; flex: 1;
.mg-l(323); .mg-l(242);
.pa(19, 40, 0, 40); .pa(14, 40, 0, 40);
min-height: calc(100vh - 85px); min-height: calc(100vh - 68px);
overflow-x: hidden;
} }
} }
.menu { .menu {
position: fixed; position: fixed;
.w(323); .w(242);
height: calc(100vh - 85px); height: calc(100vh - 68px);
overflow: auto; overflow: auto;
background-color: #fff; background-color: #fff;
} }
} }
</style> </style>
<style lang="less">
// 菜单默认样式及激活样式重置
.menu {
.icon-class {
.mg-r(24);
}
.ant-menu .ant-menu-submenu .ant-menu-submenu-title,
.ant-menu li.ant-menu-item {
.h(85);
.lh(85);
.ant-menu-submenu-arrow {
&::before,
&::after {
content: none;
}
}
}
.ant-menu .ant-menu-submenu .ant-menu-submenu-title,
.ant-menu li.ant-menu-item a {
.fs(19);
color: #778ca2;
}
.ant-menu-sub {
background-color: #f8fafb;
}
.ant-menu-item.ant-menu-item-selected,
.ant-menu-submenu.ant-menu-submenu-open .ant-menu-submenu-title {
background-color: #2b63ff !important;
color: #fff;
&::after {
content: none;
}
a.router-link-active {
color: #fff;
}
}
.ant-menu-sub {
.ant-menu-item.ant-menu-item-selected {
background-color: #fff !important;
a.router-link-active {
color: #2b63ff;
}
}
}
}
</style>
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