*

dsk-operate-ui/src/assets/lib/swiper/swiper-bundle.css

+/**
+ * Swiper 7.2.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 27, 2021
+ */
+
+@font-face {
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, 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');
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+}
+.swiper-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-pointer-events {
+  touch-action: pan-y;
+}
+.swiper-pointer-events.swiper-vertical {
+  touch-action: pan-x;
+}
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+/* 3D Effects */
+.swiper-3d,
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-wrapper,
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+/* CSS Mode */
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+.swiper-centered > .swiper-wrapper::before {
+  content: '';
+  flex-shrink: 0;
+  order: 9999;
+}
+.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+  margin-inline-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+  height: 100%;
+  min-height: 1px;
+  width: var(--swiper-centered-offset-after);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+  margin-block-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+  width: 100%;
+  min-width: 1px;
+  height: var(--swiper-centered-offset-after);
+}
+.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+}
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+  height: 1px;
+  width: var(--swiper-virtual-size);
+}
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+  width: 1px;
+  height: var(--swiper-virtual-size);
+}
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant: initial;
+  line-height: 1;
+}
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  content: 'prev';
+}
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
+  content: 'next';
+}
+.swiper-button-lock {
+  display: none;
+}
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+          appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet:only-child {
+  display: none !important;
+}
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform, 200ms top;
+}
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms left;
+}
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
+.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-vertical > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+:root {
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  animation: swiper-preloader-spin 1s infinite linear;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* a11y */
+.swiper .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-grid > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-grid-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-fade.swiper-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+.swiper-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-fade .swiper-slide-active,
+.swiper-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-cube {
+  overflow: visible;
+}
+.swiper-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-cube.swiper-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-next,
+.swiper-cube .swiper-slide-prev,
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-cube .swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.swiper-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  z-index: 0;
+}
+.swiper-cube .swiper-cube-shadow:before {
+  content: '';
+  background: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  filter: blur(50px);
+}
+.swiper-flip {
+  overflow: visible;
+}
+.swiper-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-flip .swiper-slide-active,
+.swiper-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-flip .swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.swiper-creative .swiper-slide {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  overflow: hidden;
+  transition-property: transform, opacity, height;
+}
+.swiper-cards {
+  overflow: visible;
+}
+.swiper-cards .swiper-slide {
+  transform-origin: center bottom;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  overflow: hidden;
+}

dsk-operate-ui/src/views/detail/party-a/component/Sidebar.vue

@@ -37,12 +37,12 @@ export default {
       searchText: '',
       sideRoute: [
         {title: '企业概要', pathName: '', children: [
-          {title: '企业速览', pathName: ''},
-          {title: '工商信息', pathName: ''},
-          {title: '股东信息', pathName: ''},
-          {title: '高管信息', pathName: ''},
-          {title: '对外投资', pathName: ''},
-          {title: '分支机构', pathName: ''}
+          {title: '企业速览', pathName: 'overview'},
+          {title: '工商信息', pathName: 'businfo'},
+          {title: '股东信息', pathName: 'holderinfo'},
+          {title: '高管信息', pathName: 'execuinfo'},
+          {title: '对外投资', pathName: 'overseas'},
+          {title: '分支机构', pathName: 'branch'}
         ]},
         {title: '财务简析', pathName: 'financial'},
         {title: '项目商机', pathName: '', children: [
@@ -112,62 +112,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .detail-container{
-    width: 144px;
-    min-height: calc(100vh - 170px);
-    padding-bottom: 20px;
-    background: #FFFFFF;
-    .side-input{
-      width: 128px;
-      margin-top: 16px;
-      margin-left: 8px;
-      border: 0;
-      ::v-deep .el-input__inner{
-        height: 32px;
-        background: #F3F3F4;
-        border-radius: 20px;
+  #app{
+    .detail-container{
+      width: 144px;
+      min-height: calc(100vh - 170px);
+      padding-bottom: 20px;
+      background: #FFFFFF;
+      .side-input{
+        width: 128px;
+        margin-top: 16px;
+        margin-left: 8px;
         border: 0;
-        &::placeholder {
-          color: #3D3D3D;
+        ::v-deep .el-input__inner{
+          height: 32px;
+          background: #F3F3F4;
+          border-radius: 20px;
+          border: 0;
+          &::placeholder {
+            color: #3D3D3D;
+          }
         }
-      }
-      .el-icon-search{
-        color: #0081FF;
-        cursor: pointer;
-      }
-    }
-    .detail-menu{
-      margin-top: 20px;
-      border-right: 0;
-      ::v-deep .el-menu-item, ::v-deep .el-submenu__title{
-        height: 30px;
-        line-height: 30px;
-        font-size: 14px;
-        color: #232323;
-        &:hover, &:focus{
-          background: linear-gradient(91deg, rgba(0,129,255,0.1) 0%, rgba(0,129,255,0) 100%);;
+        .el-icon-search{
+          color: #0081FF;
+          cursor: pointer;
         }
-        .el-submenu__icon-arrow{
+      }
+      .detail-menu{
+        margin-top: 20px;
+        border-right: 0;
+        ::v-deep .el-menu-item, ::v-deep .el-submenu__title{
+          height: 30px;
+          line-height: 30px;
+          font-size: 14px;
           color: #232323;
-          right: 48px;
-          margin-top: -5px;
+          padding: 0 0 0 16px !important;
+          text-align: initial !important;
+          &:hover, &:focus, &.is-active{
+            background: linear-gradient(91deg, rgba(0,129,255,0.1) 0%, rgba(0,129,255,0) 100%);;
+          }
+          .el-submenu__icon-arrow{
+            color: #232323;
+            right: 48px;
+            margin-top: -5px;
+          }
         }
-      }
-      ::v-deep .el-submenu .el-menu-item{
-        font-size: 12px;
-        color: rgba(35,35,35,0.8);
-        padding: 0 0 0 27px !important;
-        min-width: 144px !important;
-        position: relative;
-        &:before {
-          content: "";
-          position: absolute;
-          top: 14px;
-          left: 21px;
-          width: 2px;
-          height: 2px;
-          background: rgba(35,35,35,0.8);
-          border-radius: 50%;
+        ::v-deep .el-submenu .el-menu-item{
+          font-size: 12px;
+          color: rgba(35,35,35,0.8);
+          padding: 0 0 0 27px !important;
+          min-width: 144px !important;
+          position: relative;
+          &:before {
+            content: "";
+            position: absolute;
+            top: 14px;
+            left: 21px;
+            width: 2px;
+            height: 2px;
+            background: rgba(35,35,35,0.8);
+            border-radius: 50%;
+          }
         }
       }
     }

dsk-operate-ui/src/views/detail/party-a/index.vue

@@ -7,6 +7,12 @@
       </div>
       <div class="part-right">
         <div id="partBox">
+          <Overview v-if="currentPath.pathName=='overview'" />
+          <Businfo v-if="currentPath.pathName=='businfo'" />
+          <Holderinfo v-if="currentPath.pathName=='holderinfo'" />
+          <Execuinfo v-if="currentPath.pathName=='execuinfo'" />
+          <Overseas v-if="currentPath.pathName=='overseas'" />
+          <Branch v-if="currentPath.pathName=='branch'" />
           <Financial v-if="currentPath.pathName=='financial'" />
           <Business v-if="currentPath.pathName=='business'" />
         </div>
@@ -19,20 +25,32 @@
 import elementResizeDetectorMaker from "element-resize-detector"
 import Header from "./component/Header"
 import SideBar from "./component/Sidebar"
-import Financial from "./financial"
-import Business from "./business"
+import Overview from "./overview/overview"  //企业概览-企业速览
+import Businfo from "./overview/businfo"   //企业概览-工商信息
+import Holderinfo from "./overview/holderinfo"   //企业概览-股东信息
+import Execuinfo from "./overview/execuinfo"   //企业概览-高管信息
+import Overseas from "./overview/overseas"   //企业概览-对外投资
+import Branch from "./overview/branch"   //企业概览-分支机构
+import Financial from "./financial" //财务简析
+import Business from "./business" //商务信息
 export default {
   name: 'PartyA',
   components: {
     Header,
     SideBar,
+    Overview,
+    Businfo,
+    Holderinfo,
+    Execuinfo,
+    Overseas,
+    Branch,
     Financial,
     Business
   },
   data() {
     return {
       currentPath: {
-        pathName: 'financial'  //默认展示页
+        pathName: 'overview'  //默认展示页
       },
       partBoxHeight: null
     }

dsk-operate-ui/src/views/detail/party-a/overview/branch.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/businfo.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/component/operations.vue

+<template>
+  <div class="app-container operations-container">
+    <div class="common-title">公司经营</div>
+    <div class="part-swiper">
+      <div class="swiper-containers">
+        <ul class="swiper-wrapper">
+          <li class="swiper-slide" v-for="(item, index) in operList" :key="index">
+            <div class="swiper-div">
+              <div class="operations-title">{{item.range}}-<span>{{item.year}}</span></div>
+              <div class="flex-box text-cl1 operations-info">
+                {{item.name}}
+                <span><img src="@/assets/images/detail/overview/oper_source.png">{{item.name}}</span>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="swiper-button-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
+      <div class="swiper-button-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
+    </div>
+    <div class="flex-box operations-list">
+      <div class="list-item" v-for="(item, index) in gsjyList" :key="index">
+        <div class="flex-box list-item-all"><img :src="item.ico">{{item.name}}</div>
+        <div class="list-item-amount">{{item.amount}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
+import "@/assets/lib/swiper/swiper-bundle.css"
+export default {
+  name: 'Overview',
+  data() {
+    return {
+      operList: [
+        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
+        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
+        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
+        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
+        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'}
+      ],
+      gsjyList: [
+        { name: '总资产', ico: require('@/assets/images/detail/overview/gsjy_ico1.png'), amount: '1699.7'},
+        { name: '净资产', ico: require('@/assets/images/detail/overview/gsjy_ico2.png'), amount: '1699.7'},
+        { name: '授信余额', ico: require('@/assets/images/detail/overview/gsjy_ico3.png'), amount: '1699.7'},
+        { name: '营业收入', ico: require('@/assets/images/detail/overview/gsjy_ico4.png'), amount: '1699.7'},
+        { name: '总负债', ico: require('@/assets/images/detail/overview/gsjy_ico5.png'), amount: '1699.7'}
+      ],
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.companySwiper()
+  },
+  methods: {
+    companySwiper(){
+      new Swiper('.swiper-containers', {
+        slidesPerView: 4,
+        // 设置点击箭头
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .operations-container{
+    margin: 0;
+    padding: 24px 16px;
+    background: #FFFFFF;
+    .part-swiper{
+      position: relative;
+      margin-top: 16px;
+      .swiper-containers{
+        width: calc(100% - 38px);
+        height: 96px;
+        margin-top: 8px;
+        margin-left: 25px;
+        overflow: hidden;
+        .swiper-slide{
+          .swiper-div{
+            width: calc(100% - 12px);
+            height: 96px;
+            background: url("~@/assets/images/detail/overview/swiper_bg.png") no-repeat;
+            background-size: 100% 100%;
+            .operations-title{
+              margin-right: 22px;
+              font-weight: bold;
+              font-size: 20px;
+              color: #0081FF;
+              padding: 24px 16px 0 16px;
+              span{
+                font-size: 16px;
+              }
+            }
+            .operations-info{
+              padding: 14px 16px 10px 16px;
+              justify-content: space-between;
+              font-size: 14px;
+              color: #416587;
+              span{
+                font-size: 12px;
+                img{
+                  width: 10px;
+                  height: 10px;
+                  margin-right: 3px;
+                }
+              }
+            }
+          }
+        }
+      }
+      .swiper-button-prev, .swiper-button-next{
+        width: 16px;
+        height: 96px;
+        background: #F0F5FC;
+        top: 0;
+        margin-top: 0;
+        &.swiper-button-disabled{
+          opacity: 1;
+          color:#AAAAAA;
+          background: #F5F5F5;
+        }
+        i{
+          color: #AAAAAA;
+        }
+        &:hover i{
+          color:#667199;
+        }
+        &:after{
+          content: "";
+        }
+      }
+    }
+    .operations-list{
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .list-item{
+        width: calc(20% - 12px);
+        height: 88px;
+        padding: 18px;
+        margin-top: 14px;
+        font-size: 14px;
+        color: #232323;
+        border: 1px solid #E2E7EE;
+        text-align: center;
+        .list-item-all{
+          justify-content: center;
+          img{
+            width: 24px;
+            height: 24px;
+            margin-right: 4px;
+          }
+        }
+        .list-item-amount{
+          padding-top: 6px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/execuinfo.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/holderinfo.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/overseas.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+  }
+</style>

dsk-operate-ui/src/views/detail/party-a/overview/overview.vue

+<template>
+  <div class="app-container part-container">
+    企业速览
+    <div class="gsjy">
+      <Operations />
+    </div>
+  </div>
+</template>
+
+<script>
+import Operations from "./component/operations";
+export default {
+  name: 'Overview',
+  components: {
+    Operations
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .part-container{
+    margin: 0;
+    padding: 0;
+    .gsjy{
+      margin-top: 12px;
+    }
+  }
+</style>