xg

src/assets/styles/index.css

@@ -0,0 +1,688 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #bfcbd9;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #f4f4f5;
+  menuBackground: #304156;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #1f2d3d;
+  subMenuHover: #001528;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #001529;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload input[type="file"] {
+  display: none !important;
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell .el-tag {
+  margin-right: 0px;
+}
+
+.small-padding .cell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.fixed-width .el-button--mini {
+  padding: 7px 10px;
+  width: 60px;
+}
+
+.status-col .cell {
+  padding: 0 10px;
+  text-align: center;
+}
+
+.status-col .cell .el-tag {
+  margin-right: 0px;
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+.upload-container .el-upload {
+  width: 100%;
+}
+
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
+  display: none;
+}
+
+#app .main-container {
+  height: 100vh;
+  overflow: hidden;
+  transition: margin-left .28s;
+  margin-left: 200px;
+  position: relative;
+}
+
+#app .sidebarHide {
+  margin-left: 0 !important;
+}
+
+#app .sidebar-container {
+  -webkit-transition: width .28s;
+  transition: width 0.28s;
+  width: 200px !important;
+  background-color: #304156;
+  height: 100%;
+  position: fixed;
+  font-size: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+}
+
+#app .sidebar-container .horizontal-collapse-transition {
+  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+}
+
+#app .sidebar-container .scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+#app .sidebar-container .el-scrollbar__bar.is-vertical {
+  right: 0px;
+}
+
+#app .sidebar-container .el-scrollbar {
+  height: 100%;
+}
+
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 50px);
+}
+
+#app .sidebar-container .is-horizontal {
+  display: none;
+}
+
+#app .sidebar-container a {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app .sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+#app .sidebar-container .el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .is-active > .el-submenu__title {
+  color: #f4f4f5 !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  min-width: 200px !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item {
+  background-color: #1f2d3d !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover {
+  background-color: #001528 !important;
+}
+
+#app .hideSidebar .sidebar-container {
+  width: 54px !important;
+}
+
+#app .hideSidebar .main-container {
+  margin-left: 54px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown {
+  padding: 0 !important;
+  position: relative;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-submenu {
+  overflow: hidden;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+#app .el-menu--collapse .el-menu .el-submenu {
+  min-width: 200px !important;
+}
+
+#app .mobile .main-container {
+  margin-left: 0px;
+}
+
+#app .mobile .sidebar-container {
+  transition: transform .28s;
+  width: 200px !important;
+}
+
+#app .mobile.hideSidebar .sidebar-container {
+  pointer-events: none;
+  transition-duration: 0.3s;
+  transform: translate3d(-200px, 0, 0);
+}
+
+#app .withoutAnimation .main-container,
+#app .withoutAnimation .sidebar-container {
+  transition: none;
+}
+
+.el-menu--vertical > .el-menu .svg-icon {
+  margin-right: 16px;
+}
+
+.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
+.el-menu--vertical .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 20px;
+}
+
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #bfcbd9;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #f4f4f5;
+  menuBackground: #304156;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #1f2d3d;
+  subMenuHover: #001528;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #001529;
+}
+
+.blue-btn {
+  background: #324157;
+}
+
+.blue-btn:hover {
+  color: #324157;
+}
+
+.blue-btn:hover:before, .blue-btn:hover:after {
+  background: #324157;
+}
+
+.light-blue-btn {
+  background: #3A71A8;
+}
+
+.light-blue-btn:hover {
+  color: #3A71A8;
+}
+
+.light-blue-btn:hover:before, .light-blue-btn:hover:after {
+  background: #3A71A8;
+}
+
+.red-btn {
+  background: #C03639;
+}
+
+.red-btn:hover {
+  color: #C03639;
+}
+
+.red-btn:hover:before, .red-btn:hover:after {
+  background: #C03639;
+}
+
+.pink-btn {
+  background: #E65D6E;
+}
+
+.pink-btn:hover {
+  color: #E65D6E;
+}
+
+.pink-btn:hover:before, .pink-btn:hover:after {
+  background: #E65D6E;
+}
+
+.green-btn {
+  background: #30B08F;
+}
+
+.green-btn:hover {
+  color: #30B08F;
+}
+
+.green-btn:hover:before, .green-btn:hover:after {
+  background: #30B08F;
+}
+
+.tiffany-btn {
+  background: #4AB7BD;
+}
+
+.tiffany-btn:hover {
+  color: #4AB7BD;
+}
+
+.tiffany-btn:hover:before, .tiffany-btn:hover:after {
+  background: #4AB7BD;
+}
+
+.yellow-btn {
+  background: #FEC171;
+}
+
+.yellow-btn:hover {
+  color: #FEC171;
+}
+
+.yellow-btn:hover:before, .yellow-btn:hover:after {
+  background: #FEC171;
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+}
+
+.pan-btn:hover {
+  background: #fff;
+}
+
+.pan-btn:hover:before, .pan-btn:hover:after {
+  width: 100%;
+  transition: 600ms ease all;
+}
+
+.pan-btn:before, .pan-btn:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  transition: 400ms ease all;
+}
+
+.pan-btn::after {
+  right: inherit;
+  top: inherit;
+  left: 0;
+  bottom: 0;
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+aside a {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+aside a:hover {
+  color: #20a0ff;
+}
+
+.app-container {
+  height: calc(100vh - 84px);
+  padding: 20px 0 10px 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
+}
+
+.sub-navbar .subtitle {
+  font-size: 20px;
+  color: #fff;
+}
+
+.sub-navbar.draft {
+  background: #d0d0d0;
+}
+
+.sub-navbar.deleted {
+  background: #d0d0d0;
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.link-type:hover,
+.link-type:focus:hover {
+  color: #20a0ff;
+}
+
+.filter-container {
+  padding-bottom: 10px;
+}
+
+.filter-container .filter-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 10px;
+}
+
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}

src/assets/styles/index.scss

@@ -123,11 +123,6 @@ aside {
 .app-container {
   height: calc(100vh - 84px);
   padding: 20px 0 10px 20px;
-
-  .form {
-  }
-
-  .pagination {}
 }
 
 
@@ -195,4 +190,4 @@ aside {
 
 .multiselect--active {
   z-index: 1000 !important;
-}
+}

src/assets/styles/xinelu.css

@@ -0,0 +1,297 @@
+@charset "UTF-8";
+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2024 xinelu
+ */
+/** 基础通用 **/
+.pt5 {
+  padding-top: 5px;
+}
+
+.pr5 {
+  padding-right: 5px;
+}
+
+.pb5 {
+  padding-bottom: 5px;
+}
+
+.mt5 {
+  margin-top: 5px;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+
+.mb5 {
+  margin-bottom: 5px;
+}
+
+.mb8 {
+  margin-right: 20px;
+  height: 40px;
+}
+
+.ml5 {
+  margin-left: 5px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+
+.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
+}
+
+.el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+  word-break: break-word;
+  background-color: #f8f8f9;
+  color: #515a6e;
+  height: 40px;
+  font-size: 13px;
+}
+
+.el-table .el-table__body-wrapper .el-button [class*="el-icon-"] + span {
+  margin-left: 1px;
+}
+
+/** 表单布局 **/
+.form-header {
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px;
+}
+
+/** 表格布局 **/
+.pagination-container {
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
+}
+
+/* tree border */
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
+}
+
+.pagination-container .el-pagination {
+  right: 0;
+  position: absolute;
+}
+
+@media (max-width: 768px) {
+  .pagination-container .el-pagination > .el-pagination__jump {
+    display: none !important;
+  }
+  .pagination-container .el-pagination > .el-pagination__sizes {
+    display: none !important;
+  }
+}
+
+.el-table .fixed-width .el-button--mini {
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
+}
+
+/** 表格更多操作下拉样式 */
+.el-table .el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+  margin-left: 5px;
+}
+
+.el-table .el-dropdown,
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.list-group {
+  padding-left: 0px;
+  list-style: none;
+}
+
+.list-group-item {
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.el-card__header {
+  padding: 14px 15px 7px;
+  min-height: 40px;
+}
+
+.el-card__body {
+  padding: 15px 20px 20px 20px;
+}
+
+.card-box {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
+}
+
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+  background: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+  background: #48D1CC;
+  border-color: #48D1CC;
+  color: #FFFFFF;
+}
+
+.el-button--cyan {
+  background-color: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+/* text color */
+.text-navy {
+  color: #1ab394;
+}
+
+.text-primary {
+  color: inherit;
+}
+
+.text-success {
+  color: #1c84c6;
+}
+
+.text-info {
+  color: #23c6c8;
+}
+
+.text-warning {
+  color: #f8ac59;
+}
+
+.text-danger {
+  color: #ed5565;
+}
+
+.text-muted {
+  color: #888888;
+}
+
+/* image */
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.avatar-upload-preview {
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
+
+/* 拖拽列样式 */
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
+
+.top-right-btn {
+  position: relative;
+  float: right;
+}

src/assets/styles/xinelu.min.css

@@ -0,0 +1 @@
+.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.mt5{margin-top:5px}.mr5{margin-right:5px}.mb5{margin-bottom:5px}.mb8{margin-right:20px;height:40px}.ml5{margin-left:5px}.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.el-dialog:not(.is-fullscreen){margin-top:6vh !important}.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body{overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0}.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th{word-break:break-word;background-color:#f8f8f9;color:#515a6e;height:40px;font-size:13px}.el-table .el-table__body-wrapper .el-button [class*="el-icon-"]+span{margin-left:1px}.form-header{font-size:15px;color:#6379bb;border-bottom:1px solid #ddd;margin:8px 10px 25px 10px;padding-bottom:5px}.pagination-container{position:relative;height:25px;margin-bottom:10px;margin-top:15px;padding:10px 20px !important}.tree-border{margin-top:5px;border:1px solid #e5e6e7;background:#FFFFFF none;border-radius:4px}.pagination-container .el-pagination{right:0;position:absolute}@media (max-width: 768px){.pagination-container .el-pagination>.el-pagination__jump{display:none !important}.pagination-container .el-pagination>.el-pagination__sizes{display:none !important}}.el-table .fixed-width .el-button--mini{padding-left:0;padding-right:0;width:inherit}.el-table .el-dropdown-link{cursor:pointer;color:#409EFF;margin-left:5px}.el-table .el-dropdown,.el-icon-arrow-down{font-size:12px}.el-tree-node__content>.el-checkbox{margin-right:8px}.list-group-striped>.list-group-item{border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.list-group{padding-left:0px;list-style:none}.list-group-item{border-bottom:1px solid #e7eaec;border-top:1px solid #e7eaec;margin-bottom:-1px;padding:11px 0px;font-size:13px}.pull-right{float:right !important}.el-card__header{padding:14px 15px 7px;min-height:40px}.el-card__body{padding:15px 20px 20px 20px}.card-box{padding-right:15px;padding-left:15px;margin-bottom:10px}.el-button--cyan.is-active,.el-button--cyan:active{background:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.el-button--cyan:focus,.el-button--cyan:hover{background:#48D1CC;border-color:#48D1CC;color:#FFFFFF}.el-button--cyan{background-color:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.text-navy{color:#1ab394}.text-primary{color:inherit}.text-success{color:#1c84c6}.text-info{color:#23c6c8}.text-warning{color:#f8ac59}.text-danger{color:#ed5565}.text-muted{color:#888888}.img-circle{border-radius:50%}.img-lg{width:120px;height:120px}.avatar-upload-preview{position:absolute;top:50%;transform:translate(50%, -50%);width:200px;height:200px;border-radius:50%;box-shadow:0 0 4px #ccc;overflow:hidden}.sortable-ghost{opacity:.8;color:#fff !important;background:#42b983 !important}.top-right-btn{position:relative;float:right}

src/views/components/SearchForm.vue

@@ -0,0 +1,113 @@
+<template>
+    <Form ref="form" :label-width="labelWidth" :size="size" style="display: flex;">
+        <div id="searchFilter" ref="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap;"
+            :style="{ width: widths + '%' }">
+            <slot></slot>
+        </div>
+        <div style="width:20%;text-align:right;padding-right:18px;">
+            <Button type="primary" @click="handleQuery" size="mini">搜索</Button>
+            <Button @click="handleReset" size="mini">重置</Button>
+            <Button v-show="collapsiable" type="text" @click="shiftCollapsiable" size="mini">
+                <span>
+                    {{ fold ? '收起' : '展开' }}
+                    <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+                </span>
+            </Button>
+        </div>
+    </Form>
+</template>
+<script>
+import { Form, FormItem, Button } from 'element-ui'
+export default {
+    name: 'SearchFilter',
+    components: { Form, FormItem, Button },
+    props: {
+        labelWidth: {
+            type: String,
+            default: '80px',
+        },
+        widths: {
+            type: Number,
+            default: 80,
+        },
+        labelWidths: {
+            type: Number,
+            default: 280,
+        },
+        size: {
+            type: String,
+            default: 'small',
+        },
+    },
+    data() {
+        return {
+            collapsiable: false,
+            fold: false,
+            // 最大展示数，默认3个，超过则隐藏，为0时不限制
+            maxShow: undefined,
+        }
+    },
+    mounted() {
+        // 通过最大显示个数控制展开/折叠
+        this.minShowCtrol()
+    },
+    watch: {
+        '$store.state.app.sidebar.opened'(newVal, Val) {
+            if (newVal) {
+                const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
+                group[this.maxShow - 1].hidden = true
+            }
+            setTimeout(() => {
+                this.minShowCtrol()
+            }, 500);
+        }
+    },
+    methods: {
+        // 屏幕resize监听
+        screenChange() {
+            // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
+            window.addEventListener('resize', this.minShowCtrol, true)
+            // 将屏幕监听事件移除
+            // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
+            // 或者将这里的方法直接写在beforeDestroy函数中也可以
+            this.$once('hook:beforeDestroy', () => {
+                window.removeEventListener('resize', this.minShowCtrol, true)
+            })
+        },
+        shiftCollapsiable() {
+            this.fold = !this.fold
+            this.minShowCtrol()
+        },
+        // 通过maxShow控制元素显示/折叠
+        minShowCtrol() {
+            this.maxShow = Math.floor(this.$refs.searchFilter.offsetWidth / this.labelWidths)
+            const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
+            const len = group?.length ? group?.length - 1 : 0
+            if (this.maxShow < len) {
+                group.forEach((item, index) => {
+                    item.hidden = false
+                    if (index > this.maxShow - 1) {
+                        item.hidden = !this.fold
+                    }
+                })
+                this.collapsiable = true
+            } else {
+                this.collapsiable = false
+            }
+            this.screenChange();
+            this.$emit('minShowCtrol')
+        },
+        handleQuery() {
+            this.$emit('search')
+        },
+        handleReset() {
+            this.$emit('reset')
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item {
+    height: 28px !important;
+}
+</style>

src/views/manage/components/cardlist.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :style="{ height: maxTableHeight + 'px' }" class="cardlist">
+        <div v-for="item in patientInfoList" :key="item.id">
+            <div class="carditem">
+                <div class="top">
+                    <img src="../../../assets/manage/nvtouxiang.png" alt="" class="img" />
+                    <!-- <img src="../../../assets/manage/touxiang.png" alt="" class="img" /> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'cardlist',
+    props: {
+        maxTableHeight: {
+            type: Number,
+            default: 0,
+        },
+        patientInfoList: {
+            type: Array,
+            default: []
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    mounted() {
+    },
+    methods: {},
+}
+</script>
+<style lang="scss" scoped>
+.cardlist {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    overflow-y: auto;
+
+    .carditem {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        width: 260px;
+        min-height: 200px;
+        border: 1px solid #DCDFE6;
+        border-radius: 10px;
+
+        .top {
+            height: 80px;
+            background-color: #F7F8FA;
+        }
+
+        .img {
+            margin: 10px 0 0 10px;
+            width: 50px;
+            height: 50px;
+        }
+    }
+}
+</style>

src/views/manage/patientInfo/index.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="app-container" ref="layout">
     <div ref="topform" class="form">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
+      <div class="card-table">
+        <div :class="type == 'card' ? 'bluediv' : ''" @click="type = 'card'">
+          <img src="../../../assets/manage/kapian.png" alt="" />
+          <img src="../../../assets/manage/bluekapian.png" alt="" v-if="type == 'card'" />
+        </div>
+        <div :class="type == 'table' ? 'bluediv' : ''" @click="type = 'table'">
+          <img src="../../../assets/manage/liebiao.png" alt="" />
+          <img src="../../../assets/manage/blueliebiao.png" alt="" v-if="type == 'table'" />
+        </div>
+      </div>
+      <SearchFilter :labelWidths="280" style="width: calc(100% - 80px);" :widths="90" size="mini" @search="handleQuery"
+        @reset="resetQuery" @minShowCtrol="getMaxTableHeight">
         <el-form-item label="患者姓名" prop="patientName">
           <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable @keyup.enter.native="handleQuery"
             style="width:200px" />
@@ -14,11 +25,6 @@
           <el-input v-model="queryParams.mainDiagnosis" placeholder="请选择诊断" clearable style="width:200px"
             @keyup.enter.native="handleQuery" />
         </el-form-item>
-        <!-- <el-form-item label="手术名称" prop="surgicalName">
-        <el-input v-model="queryParams.surgicalName" placeholder="请输入手术名称" clearable @keyup.enter.native="handleQuery"
-          style="width:200px" />
-      </el-form-item> -->
-        <!-- ，微信小程序：WE_CHAT_APPLET，微信公众号：WE_CHAT_OFFICIAL_ACCOUNT，管理端：MANAGE_END -->
         <el-form-item label="患者来源" prop="patientSource">
           <el-select v-model="queryParams.patientSource" placeholder="请选择患者来源" clearable style="width:200px">
             <el-option v-for="dict in dict.type.patient_source" :key="dict.value" :label="dict.label"
@@ -33,15 +39,9 @@
         </el-form-item>
         <el-form-item label="就诊时间" prop="visitDateStart">
           <el-date-picker v-model="visitDate" type="daterange" range-separator="至" start-placeholder="开始日期"
-            style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
+            style="width:200px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
-        <!-- <el-form-item label="入院时间" prop="admissionTimeStart">
-        <el-date-picker v-model="admissionTime" type="daterange" range-separator="至" start-placeholder="开始日期"
-          style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
-        </el-date-picker>
-      </el-form-item> -->
-        <!-- ，门诊：OUTPATIENT_SERVICE，住院：BE_IN_HOSPITAL -->
         <el-form-item label="医院" prop="hospitalAgencyId">
           <el-select v-model="queryParams.hospitalAgencyId" filterable placeholder="请选择医院" style="width:200px" clearable
             @clear="clearhospitalAgency" @change="changehospitalAgency">
@@ -69,21 +69,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="门诊号" prop="outpatientNumber">
-        <el-input v-model="queryParams.outpatientNumber" placeholder="请输入门诊号" clearable style="width:200px"
-          @keyup.enter.native="handleQuery" />
-      </el-form-item> -->
-        <!-- <el-form-item label="出生日期" prop="birthDate">
-        <el-date-picker clearable v-model="queryParams.birthDate" type="date" value-format="yyyy-MM-dd"
-          style="width:200px" placeholder="请选择出生日期">
-        </el-date-picker>
-      </el-form-item> -->
-        <!-- 预住院患者：PRE_HOSPITALIZED_PATIENT，在院患者：IN_HOSPITAL_PATIENT，门诊患者：OUTPATIENT，出院患者：DISCHARGED_PATIENT，签约患者：CONTRACTED_PATIENT -->
-        <!-- <el-form-item label="患者类型" prop="patientType">
-        <el-select v-model="queryParams.patientType" placeholder="请选择患者类型" clearable style="width:200px">
-          <el-option v-for="dict in dict.type.patient_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item> -->
         <el-form-item label="主治医生" prop="attendingPhysicianId">
           <el-select v-model="queryParams.attendingPhysicianId" style="width:200px" filterable placeholder="请选择主治医生"
             clearable>
@@ -92,13 +77,13 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
+        <!-- <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item> -->
+      </SearchFilter>
     </div>
-    <div ref="table">
+    <div ref="table" v-if="type == 'table'">
       <el-table :max-height="maxTableHeight" v-loading="loading" :data="patientInfoList">
         <el-table-column label="序号" type="index" width="55" align="center" />
         <el-table-column label="患者姓名" align="center" prop="patientName" />
@@ -160,8 +145,9 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
+    <div ref="table" v-else-if="type == 'card'">
+      <cardlist :maxTableHeight="maxTableHeight" :patientInfoList="patientInfoList"></cardlist>
+    </div>
     <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
       :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
   </div>
@@ -172,11 +158,16 @@ import { listPatientInfo } from "@/api/manage/patientInfo";
 import { getAge } from "@/utils/age";
 import { selectAgencyList, getDepartmentList, getAgencyList } from "@/api/manage/selectAgencyList";
 import { usergetList } from "@/api/unitconfig/patientConfiguration";
+import SearchFilter from '../../components/SearchForm.vue'
+import cardlist from '../components/cardlist.vue'
 export default {
   name: "PatientInfo",
   dicts: ['patient_type', 'visit_method', 'sign_status', 'patient_source'],
+  components: { SearchFilter, cardlist },
   data() {
     return {
+      type: 'card',
+      searchData: {},
       maxTableHeight: undefined,
       attendingPhysicianlist: [],
       // 遮罩层
@@ -325,13 +316,16 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10
+      }
       this.admissionTime = [];
       this.queryParams.admissionTimeStart = null
       this.queryParams.admissionTimeEnd = null
       this.visitDate = []
       this.queryParams.visitDateStart = null
       this.queryParams.visitDateEnd = null
-      this.resetForm("queryForm");
       this.handleQuery();
     },
     selectAgencyinfo() {
@@ -462,10 +456,31 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.cardlist {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-y: auto;
+}
+
+.carditem {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  width: 260px;
+  min-height: 200px;
+  border: 1px solid #DCDFE6;
+  border-radius: 10px;
+}
+
 ::v-deep .el-table__body-wrapper {
   overflow: auto;
 }
 
+.form {
+  display: flex;
+  width: 100%;
+}
+
 ::v-deep .el-table {
   overflow: hidden;
 }
@@ -474,4 +489,33 @@ export default {
 ::v-deep .el-table__fixed-right {
   height: 100% !important;
 }
+
+.card-table {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  transform: translateY(-1px);
+
+  div {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    border: 1px solid #575B66;
+    position: relative;
+  }
+
+  img {
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .bluediv {
+    border: 1px solid #409EFF !important;
+  }
+}
 </style>