Commit f76b3dc9 authored by 吴婷慧's avatar 吴婷慧

UI尺寸标准确认修改

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