fix

src/assets/style/main.scss

@@ -1,151 +1,589 @@
 @import "./color";
 
-body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, input, textarea, th, td { margin: 0; padding: 0 }
-body, input, select, textarea { font: 14px -apple-system; color: #333; -ms-overflow-style: scrollbar }
-body, html {font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
-button, input, select, textarea { font-size: 100% }
-a { color: #333; text-decoration: none;outline: 0 }
-a:hover { color: $primary }
-table { border-collapse: collapse; border-spacing: 0 }
-fieldset, img, area, a { border: 0; outline: 0 }
-address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal }
-code, kbd, pre, samp { font-family: courier new, courier, monospace }
-ol, ul { list-style: none }
-body { background: #fff;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
-small { font-size: 12px }
-h1, h2, h3, h4, h5, h6 { font-size: 100% }
-sup { vertical-align: text-top }
-sub { vertical-align: text-bottom }
-legend { color: #000 }
-a, input { -webkit-tap-highlight-color: rgba(0,0,0,0); }
-div{ -webkit-overflow-scrolling: touch; }
-input, textarea, select { border: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background:none; outline:none; }
-input[type='checkbox'] { -webkit-appearance: checkbox; }
-img {vertical-align: top;}
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, input, textarea, th, td {
+  margin: 0;
+  padding: 0
+}
+
+body, input, select, textarea {
+  font: 14px -apple-system;
+  color: #333;
+  -ms-overflow-style: scrollbar
+}
+
+body, html {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+
+button, input, select, textarea {
+  font-size: 100%
+}
+
+a {
+  color: #333;
+  text-decoration: none;
+  outline: 0
+}
+
+a:hover {
+  color: $primary
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0
+}
+
+fieldset, img, area, a {
+  border: 0;
+  outline: 0
+}
+
+address, caption, cite, code, dfn, em, th, var, i {
+  font-style: normal;
+  font-weight: normal
+}
+
+code, kbd, pre, samp {
+  font-family: courier new, courier, monospace
+}
+
+ol, ul {
+  list-style: none
+}
+
+body {
+  background: #fff;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+small {
+  font-size: 12px
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: 100%
+}
+
+sup {
+  vertical-align: text-top
+}
+
+sub {
+  vertical-align: text-bottom
+}
+
+legend {
+  color: #000
+}
+
+a, input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+div {
+  -webkit-overflow-scrolling: touch;
+}
+
+input, textarea, select {
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  background: none;
+  outline: none;
+}
+
+input[type='checkbox'] {
+  -webkit-appearance: checkbox;
+}
+
+img {
+  vertical-align: top;
+}
 
 @media screen and (max-device-width: 828px) {
-  body { -webkit-text-size-adjust: none; }
+  body {
+    -webkit-text-size-adjust: none;
+  }
 }
 
 /****************flexbox**************/
-.flex {display:flex;}
-.inline-flex {display:inline-flex;}
-.flex-center{justify-content: center;align-items: center;}
-.flex-center-between{justify-content: space-between;align-items: center;}
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-center-between {
+  justify-content: space-between;
+  align-items: center;
+}
+
 /*横向或纵向*/
-.flex-row {flex-direction:row;}
-.flex-col {flex-direction:column;}
-.flex-row-reverse {flex-direction:row-reverse;}
-.flex-col-reverse {flex-direction:column-reverse;}
-.flex-wrap {flex-wrap:wrap;}
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 /*主轴对齐方式*/
-.flex-justify-start {justify-content:flex-start;}
-.flex-justify-end {justify-content:flex-end;}
-.flex-justify-center {justify-content:center;}
-.flex-justify-between {justify-content:space-between;}
-.flex-justify-around {justify-content:space-around;}
+.flex-justify-start {
+  justify-content: flex-start;
+}
+
+.flex-justify-end {
+  justify-content: flex-end;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-justify-between {
+  justify-content: space-between;
+}
+
+.flex-justify-around {
+  justify-content: space-around;
+}
+
 /*侧轴对齐方式*/
-.flex-align-start {align-items:flex-start;}
-.flex-align-end {align-items:flex-end;}
-.flex-align-center {align-items:center;}
-.flex-align-baseline {align-items:baseline;}
-.flex-align-stretch {align-items:stretch;}
+.flex-align-start {
+  align-items: flex-start;
+}
+
+.flex-align-end {
+  align-items: flex-end;
+}
+
+.flex-align-center {
+  align-items: center;
+}
+
+.flex-align-baseline {
+  align-items: baseline;
+}
+
+.flex-align-stretch {
+  align-items: stretch;
+}
+
 /*主轴换行时行在侧轴的对齐方式，必须定义flex-wrap为换行*/
-.flex-content-start {align-content:flex-start;}
-.flex-content-end {align-content:flex-end;}
-.flex-content-center {align-content:center;}
-.flex-content-between {align-content:space-between;}
-.flex-content-around {align-content:space-around;}
-.flex-content-stretch {align-content:stretch;}
+.flex-content-start {
+  align-content: flex-start;
+}
+
+.flex-content-end {
+  align-content: flex-end;
+}
+
+.flex-content-center {
+  align-content: center;
+}
+
+.flex-content-between {
+  align-content: space-between;
+}
+
+.flex-content-around {
+  align-content: space-around;
+}
+
+.flex-content-stretch {
+  align-content: stretch;
+}
+
 /*允许子元素收缩*/
-.flex-child-grow {flex-grow: 1;}/*允许拉伸*/
-.flex-child-shrink {flex-shrink: 1;}/*允许收缩*/
-.flex-child-noshrink {flex-shrink: 0;}/*不允许收缩*/
-.flex-child-average {flex:1;}/*平均分布，兼容旧版必须给宽度*/
-.flex-child-first {order: 1;}/*排第一个*/
+.flex-child-grow {
+  flex-grow: 1;
+}
+
+/*允许拉伸*/
+.flex-child-shrink {
+  flex-shrink: 1;
+}
+
+/*允许收缩*/
+.flex-child-noshrink {
+  flex-shrink: 0;
+}
+
+/*不允许收缩*/
+.flex-child-average {
+  flex: 1;
+}
+
+/*平均分布，兼容旧版必须给宽度*/
+.flex-child-first {
+  order: 1;
+}
+
+/*排第一个*/
 /*子元素在侧轴的对齐方式*/
-.flex-child-align-start {align-self:flex-start;}
-.flex-child-align-end {align-self:flex-end;}
-.flex-child-align-center {align-self:center;}
-.flex-child-align-baseline {align-self:baseline;}
-.flex-child-align-stretch {align-self:stretch;}
-
-.wrapper { width: 1200px; margin: 0 auto; }
-.block { display: block; }
-.inline-block { display: inline-block; }
-.inline { display: inline; }
-.hide { display: none; }
-.full-height{height:100%;}
-.full-width{width:100%;}
-.full-size{width:100%;height:100%;}
-.full-screen{width:100vw;height:100vh;}
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.clear { clear: both; }
-.overflow-hide { overflow: hidden; }
-.normal { font-weight: normal; }
-.bold { font-weight: bold; }
-.radius { border-radius: 5px; }
-.font-34 { font-size: 34px; }
-.font-30 { font-size: 30px; }
-.font-28 { font-size: 28px; }
-.font-24 { font-size: 24px; }
-.font-20 { font-size: 20px; }
-.font-18 { font-size: 18px; }
-.font-16 { font-size: 16px; }
-.font-15 { font-size: 15px; }
-.font-14 { font-size: 14px; }
-.font-13 { font-size: 13px; }
-.font-12 { font-size: 12px; }
-.border-box{box-sizing: border-box;}
-.border { border: 1px solid $border; }
-.border-top { border-top: 1px solid $border; }
-.border-bottom { border-bottom: 1px solid $border; }
-.border-left { border-left: 1px solid $border; }
-.border-right { border-right: 1px solid $border; }
-.margin { margin: 10px; }
-.mt-5 { margin-top: 5px; }
-.mr-5 { margin-right: 5px; }
-.mb-5 { margin-bottom: 5px; }
-.ml-5 { margin-left: 5px; }
-.mt-10 { margin-top: 10px; }
-.mr-10 { margin-right: 10px; }
-.mb-10 { margin-bottom: 10px; }
-.ml-10 { margin-left: 10px; }
-.mt-15 { margin-top: 15px; }
-.mr-15 { margin-right: 15px; }
-.mb-15 { margin-bottom: 15px; }
-.ml-15 { margin-left: 15px; }
-.mt-20 { margin-top: 20px; }
-.mr-20 { margin-right: 20px; }
-.mb-20 { margin-bottom: 20px; }
-.ml-20 { margin-left: 20px; }
-.padding { padding: 10px; }
-.padding-14 { padding: 14px; }
-.padding-20 { padding: 20px; }
-.padding-top { padding-top: 10px; }
-.padding-right { padding-right: 10px; }
-.padding-bottom { padding-bottom: 10px; }
-.padding-left { padding-left: 10px; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.pointer{cursor: pointer;}
-.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.nowrap { word-wrap: normal; white-space: nowrap; }
-.lines-1{text-overflow:ellipsis;-webkit-line-clamp:1;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;}
-.lines-2{text-overflow:ellipsis;-webkit-line-clamp:2;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;word-break: break-all;}
-.lines-height-2 {line-height: 2}
-.lines-height-15 {line-height: 1.5}
-.row2 { word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
-.card-item{border-radius: 8px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08); background-color: #fff; margin: 0 14px 14px; overflow:hidden; }
-.btn{ height: 32px; border-radius: 5px; }
-.pointer{cursor: pointer;}
+.flex-child-align-start {
+  align-self: flex-start;
+}
+
+.flex-child-align-end {
+  align-self: flex-end;
+}
+
+.flex-child-align-center {
+  align-self: center;
+}
+
+.flex-child-align-baseline {
+  align-self: baseline;
+}
+
+.flex-child-align-stretch {
+  align-self: stretch;
+}
+
+.wrapper {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.hide {
+  display: none;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.full-size {
+  width: 100%;
+  height: 100%;
+}
+
+.full-screen {
+  width: 100vw;
+  height: 100vh;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.clear {
+  clear: both;
+}
+
+.overflow-hide {
+  overflow: hidden;
+}
+
+.normal {
+  font-weight: normal;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.radius {
+  border-radius: 5px;
+}
+
+.font-34 {
+  font-size: 34px;
+}
+
+.font-30 {
+  font-size: 30px;
+}
+
+.font-28 {
+  font-size: 28px;
+}
+
+.font-24 {
+  font-size: 24px;
+}
+
+.font-20 {
+  font-size: 20px;
+}
+
+.font-18 {
+  font-size: 18px;
+}
+
+.font-16 {
+  font-size: 16px;
+}
+
+.font-15 {
+  font-size: 15px;
+}
+
+.font-14 {
+  font-size: 14px;
+}
+
+.font-13 {
+  font-size: 13px;
+}
+
+.font-12 {
+  font-size: 12px;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+
+.border {
+  border: 1px solid $border;
+}
+
+.border-top {
+  border-top: 1px solid $border;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $border;
+}
+
+.border-left {
+  border-left: 1px solid $border;
+}
+
+.border-right {
+  border-right: 1px solid $border;
+}
+
+.margin {
+  margin: 10px;
+}
+
+.mt-5 {
+  margin-top: 5px;
+}
+
+.mr-5 {
+  margin-right: 5px;
+}
+
+.mb-5 {
+  margin-bottom: 5px;
+}
+
+.ml-5 {
+  margin-left: 5px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.mt-15 {
+  margin-top: 15px;
+}
+
+.mr-15 {
+  margin-right: 15px;
+}
+
+.mb-15 {
+  margin-bottom: 15px;
+}
+
+.ml-15 {
+  margin-left: 15px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
+
+.ml-20 {
+  margin-left: 20px;
+}
+
+.padding {
+  padding: 10px;
+}
+
+.padding-14 {
+  padding: 14px;
+}
+
+.padding-20 {
+  padding: 20px;
+}
+
+.padding-top {
+  padding-top: 10px;
+}
+
+.padding-right {
+  padding-right: 10px;
+}
+
+.padding-bottom {
+  padding-bottom: 10px;
+}
+
+.padding-left {
+  padding-left: 10px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nowrap {
+  word-wrap: normal;
+  white-space: nowrap;
+}
+
+.lines-1 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+.lines-2 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.lines-height-2 {
+  line-height: 2
+}
+
+.lines-height-15 {
+  line-height: 1.5
+}
+
+.row2 {
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-item {
+  border-radius: 8px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
+  background-color: #fff;
+  margin: 0 14px 14px;
+  overflow: hidden;
+}
+
+.btn {
+  height: 32px;
+  border-radius: 5px;
+}
+
+.pointer {
+  cursor: pointer;
+}
 
 .box-shadow-blue {
   box-shadow: 0 0 16px 2px #deedff;
 }
 
+.box-shadow {
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.18)
+}
+
 .main-button {
   color: #fff;
   width: 100%;
@@ -155,6 +593,7 @@ img {vertical-align: top;}
   font-size: 16px;
   background: linear-gradient(239deg, #85CAFF 0%, #007CDD 100%);
   cursor: pointer;
+
   &:hover {
     opacity: 0.9;
   }
@@ -176,61 +615,210 @@ img {vertical-align: top;}
 }
 
 /*颜色*/
-.main-color, a.main-color { color: $primary; } /*主色*/
-.main-bgcolor { background-color: $primary; }
-.assist-color, a.assist-color{color:#78b} /*辅助色*/
-.assist-bgcolor { background-color: #78b; }
-.orange, a.orange { color: #ff6700; }
-.orange-bg { background-color: #ff6700; }
-.grey, a.grey { color: #505050; }
-.grey-bg { background-color: #505050; }
-.grey-6, a.grey-6 { color: #6b6b6b; }
-.grey-6-bg { background-color: #6b6b6b; }
-.grey-9, a.grey-9 { color: #9c9c9c; }
-.grey-9-bg { background-color: #9c9c9c; }
-.grey-d, a.grey-d { color: #dfdfdf; }
-.grey-d-bg { background-color: #dfdfdf; }
-.grey-e, a.grey-e { color: #efefef; }
-.grey-e-bg { background-color: #efefef; }
-.grey-f, a.grey-f { color: #f5f5f5; }
-.grey-f-bg { background-color: #f5f5f5; }
-.black, a.black { color: #333; }
-.black-bg { background-color: #333; }
-.white, a.white { color: #fff; }
-.white-bg { background-color: #fff; }
-.red, a.red { color: #e12e2e; }
-.red-bg { background-color: #e12e2e; }
-.light-red, a.light-red { color: #ff5050; }
-.light-red-bg { background-color: #ff5050; }
-.orange-red, a.orange-red { color: #ff4e00; }
-.orange-red-bg { background-color: #ff4e00; }
-.yellow, a.yellow { color: #fbcb30; }
-.yellow-bg { background-color: #fbcb30; }
-.orange, a.orange { color: #ff6700; }
-.orange-bg { background-color: #ff6700; }
-.orange-yellow, a.orange-yellow { color: #fd9712; }
-.orange-yellow-bg { background-color: #fd9712; }
-.green, a.green { color: $green; }
-.green-bg { background-color: $green; }
-.green-text, a.green-text { color: #008000; }
-.light-green, a.light-green { color: #8fd14c; }
-.light-green-bg { background-color: #8fd14c; }
-.blue, a.blue { color: #3caaff; }
-.blue-bg { background-color: #3caaff; }
-.light-blue, a.light-blue { color: #7597dc; }
-.light-blue-bg { background-color: #7597dc; }
-.pink, a.pink { color: #fb5c9b; }
-.pink-bg { background-color: #fb5c9b; }
-.purple, a.purple { color: #a776d9; }
-.purple-bg { background-color: #a776d9; }
-.light-purple, a.light-purple { color: #b394f3; }
-.light-purple-bg { background-color: #b394f3; }
+.main-color, a.main-color {
+  color: $primary;
+}
+
+/*主色*/
+.main-bgcolor {
+  background-color: $primary;
+}
+
+.assist-color, a.assist-color {
+  color: #78b
+}
+
+/*辅助色*/
+.assist-bgcolor {
+  background-color: #78b;
+}
+
+.orange, a.orange {
+  color: #ff6700;
+}
+
+.orange-bg {
+  background-color: #ff6700;
+}
+
+.grey, a.grey {
+  color: #707070;
+}
+
+.grey-bg {
+  background-color: #505050;
+}
+
+.grey-6, a.grey-6 {
+  color: #6b6b6b;
+}
+
+.grey-6-bg {
+  background-color: #6b6b6b;
+}
+
+.grey-9, a.grey-9 {
+  color: #9c9c9c;
+}
+
+.grey-9-bg {
+  background-color: #9c9c9c;
+}
+
+.grey-d, a.grey-d {
+  color: #dfdfdf;
+}
+
+.grey-d-bg {
+  background-color: #dfdfdf;
+}
+
+.grey-e, a.grey-e {
+  color: #efefef;
+}
+
+.grey-e-bg {
+  background-color: #efefef;
+}
+
+.grey-f, a.grey-f {
+  color: #f5f5f5;
+}
+
+.grey-f-bg {
+  background-color: #f5f5f5;
+}
+
+.black, a.black {
+  color: #333;
+}
+
+.black-bg {
+  background-color: #333;
+}
+
+.white, a.white {
+  color: #fff;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.red, a.red {
+  color: #e12e2e;
+}
+
+.red-bg {
+  background-color: #e12e2e;
+}
+
+.light-red, a.light-red {
+  color: #ff5050;
+}
+
+.light-red-bg {
+  background-color: #ff5050;
+}
+
+.orange-red, a.orange-red {
+  color: #ff4e00;
+}
+
+.orange-red-bg {
+  background-color: #ff4e00;
+}
+
+.yellow, a.yellow {
+  color: #fbcb30;
+}
+
+.yellow-bg {
+  background-color: #fbcb30;
+}
+
+.orange, a.orange {
+  color: #ff6700;
+}
+
+.orange-bg {
+  background-color: #ff6700;
+}
+
+.orange-yellow, a.orange-yellow {
+  color: #fd9712;
+}
+
+.orange-yellow-bg {
+  background-color: #fd9712;
+}
+
+.green, a.green {
+  color: $green;
+}
+
+.green-bg {
+  background-color: $green;
+}
+
+.green-text, a.green-text {
+  color: #008000;
+}
+
+.light-green, a.light-green {
+  color: #8fd14c;
+}
+
+.light-green-bg {
+  background-color: #8fd14c;
+}
+
+.blue, a.blue {
+  color: #3caaff;
+}
+
+.blue-bg {
+  background-color: #3caaff;
+}
+
+.light-blue, a.light-blue {
+  color: #7597dc;
+}
+
+.light-blue-bg {
+  background-color: #7597dc;
+}
+
+.pink, a.pink {
+  color: #fb5c9b;
+}
+
+.pink-bg {
+  background-color: #fb5c9b;
+}
+
+.purple, a.purple {
+  color: #a776d9;
+}
+
+.purple-bg {
+  background-color: #a776d9;
+}
+
+.light-purple, a.light-purple {
+  color: #b394f3;
+}
+
+.light-purple-bg {
+  background-color: #b394f3;
+}
 
 /* 表格头部标题左边的border */
 .before-line {
   position: relative;
   margin-left: 10px;
 }
+
 .before-line:before {
   content: '';
   position: absolute;

src/assets/svg/icon2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.a{fill:#ffe5d2;}.b{fill:#ac1f1d;}.c{fill:#ef716f;}</style></defs><g transform="translate(-43 -473)"><circle class="a" cx="12.5" cy="12.5" r="12.5" transform="translate(43 473)"/><g transform="translate(-11 477)"><path class="b" d="M61.353,0A1.353,1.353,0,0,0,60,1.353V15.147A1.353,1.353,0,0,0,61.353,16.5H71.847A1.353,1.353,0,0,0,73.2,15.147v-9.4a1.35,1.35,0,0,0-.316-.869L69.156.424A1.185,1.185,0,0,0,68.247,0ZM71.1,5.25H68.8v-2.9Zm.445,9.6h-9.9V1.65h5.5V5.891A1.01,1.01,0,0,0,68.16,6.9h3.39Z" transform="translate(0)"/><rect class="c" width="6.6" height="1.65" rx="0.825" transform="translate(63.3 8.745)"/><rect class="c" width="6.6" height="1.65" rx="0.825" transform="translate(63.3 11.385)"/></g></g></svg>

src/assets/svg/icon3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.a{fill:#ffe5d2;}.b{fill:#ac1f1d;}.c{fill:#ef716f;}</style></defs><g transform="translate(60 -550)"><circle class="a" cx="12.5" cy="12.5" r="12.5" transform="translate(-60 550)"/><g transform="translate(-12)"><g transform="translate(-8 554.18)"><path class="b" d="M-20.437,3.051h-4.231V1.562A1.866,1.866,0,0,0-26.633-.18h-2.352A1.866,1.866,0,0,0-30.95,1.562V3.051h-4.231A.819.819,0,0,0-36,3.87a.819.819,0,0,0,.819.819h1.16c0,.023-.013.043-.013.066v8.169a3.453,3.453,0,0,0,3.5,3.4h5.506a3.452,3.452,0,0,0,3.5-3.4V4.755c0-.024-.011-.043-.013-.066h1.105a.819.819,0,0,0,.819-.819A.819.819,0,0,0-20.437,3.051Zm-8.548-1.592h2.352a.509.509,0,0,1,.327.1V3.051h-3.008l0-1.467A.405.405,0,0,1-28.985,1.458Zm5.825,3.3v8.169a1.811,1.811,0,0,1-1.868,1.744h-5.506A1.811,1.811,0,0,1-32.4,12.924V4.755c0-.024-.011-.043-.013-.066h9.27C-23.149,4.712-23.16,4.731-23.16,4.755Z"/><rect class="c" width="1.638" height="6.761" rx="0.819" transform="translate(-30.707 5.999)"/><rect class="c" width="1.638" height="6.761" rx="0.819" transform="translate(-26.549 5.999)"/></g></g></g></svg>

src/assets/svg/top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.206" height="14" viewBox="0 0 14.206 14"><defs><style>.a,.c{fill:none;}.b{fill:#fff;}.b,.c{stroke:#707070;}.c{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.d{stroke:none;}</style></defs><g transform="translate(-501.794 56)"><rect class="a" width="14" height="14" transform="translate(502 -56)"/><g transform="translate(0.206)"><g class="b" transform="translate(507 -54)"><rect class="d" width="8" height="2" rx="1"/><rect class="a" x="0.5" y="0.5" width="7" height="1" rx="0.5"/></g><g class="b" transform="translate(507 -50)"><rect class="d" width="8" height="2" rx="1"/><rect class="a" x="0.5" y="0.5" width="7" height="1" rx="0.5"/></g><g class="b" transform="translate(507 -46)"><rect class="d" width="8" height="2" rx="1"/><rect class="a" x="0.5" y="0.5" width="7" height="1" rx="0.5"/></g><path class="c" d="M529.292-55.813l-2.475,4,.825,1.333,1.65,2.667" transform="translate(-24.229 2.813)"/></g></g></svg>

src/components/base-button.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="type === '1' ? 'btn' : 'btn1'" :style='`width:${width}px`' class="flex flex-center mr-5 font-12 pointer">
+    <el-icon color="#E9A956">
+      <component :is="icon"></component>
+    </el-icon>
+    <div class="ml-10 nowrap" @click="click"> {{ title }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'base-button',
+  props: {
+    title: {
+      type: String,
+      default: '搜索'
+    },
+    type: {
+      type: String,
+      default: '1'
+    },
+    icon: {
+      type: String,
+      default: 'Search'
+    },
+    width: {
+      type: Number,
+      default: 120
+    }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  border-radius: 6px;
+  padding: 8px 16px;
+  height: 20px;
+  font-size: 14px;
+  background-color: #BC002D;
+  color: white;
+}
+
+.btn1 {
+  border-radius: 6px;
+  padding: 8px 16px;
+  height: 20px;
+  font-size: 14px;
+  background-color: white;
+  color: #BC002D;
+  border: 1px solid #E9A856;
+}
+</style>

src/components/basic-container/main.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="basic-container"
+       :style="styleName"
+       :class="{'basic-container--block':block}">
+    <el-card class="basic-container__card">
+      <slot></slot>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'basicContainer',
+  props: {
+    radius: {
+      type: [String, Number],
+      default: 10
+    },
+    background: {
+      type: String
+    },
+    block: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    styleName () {
+      return {
+        borderRadius: this.setPx(this.radius),
+        background: this.background
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.basic-container {
+  padding: 10px 6px;
+  box-sizing: border-box;
+  &--block {
+    height: 100%;
+    .basic-container__card {
+      height: 100%;
+    }
+  }
+  &__card {
+    width: 100%;
+  }
+  &:first-child {
+    padding-top: 0;
+  }
+}
+</style>

src/components/main-button.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :style='`width:${width}px`' class="flex flex-center mr-5 mt-5 font-12 main pointer">
+    <el-icon v-if="type === '1'" class="mr-5" color="#E9A956">
+      <component :is="icon"></component>
+    </el-icon>
+    <div class="nowrap" @click="click"> {{ title }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'main-button',
+  props: {
+    title: {
+      type: String,
+      default: '项目详情'
+    },
+    type: {
+      type: String,
+      default: '1'
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 100
+    }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  border-radius: 20px;
+  border: 1px solid #BC002D;
+  color: #ECAB56;
+  height: 32px;
+  line-height: 34px
+}
+</style>

src/layout/index.vue

@@ -7,14 +7,14 @@
       <el-header class='header'>
           <top />
       </el-header>
-      <el-main class='wt-main'>
-        <el-card >
+      <el-main class='wt-main orange-bg'>
+        <div>
           <router-view v-slot="{ Component, route }">
               <keep-alive :include='keepAlive.list'>
                 <component :is="Component" :key="route.fullPath" />
               </keep-alive>
           </router-view>
-        </el-card>
+        </div>
       </el-main>
     </el-container>
   </div>
@@ -44,6 +44,7 @@ export default {
   padding: 0;
 }
 .wt-main {
-  background-color: #F2F3F5;
+  background-color: #E4E4E4;
+  padding: 0;
 }
 </style>

src/layout/letf.vue

@@ -6,10 +6,10 @@
       </div>
     </div>
     <div>
-      <div class="flex flex-center flex-col bold font-18 item-bg"  v-for="(item,index) in data" :key="item.name">
-        <div class="flex flex-center" :class="active === 0 ? 'item-s' : 'item'" @click="navClick(index)">
-          <img :src='getImageUrl(item.img)'>
-          <span class="ml-10">项目库</span>
+      <div class="flex flex-center flex-col bold font-18 item-bg" >
+        <div v-for="(item,index) in data" :key="item.name" class="flex flex-center pointer" :class="active === index ? 'item-s' : 'item'" @click="navClick(item,index)">
+          <img :src=item.img>
+          <span class="ml-10">{{item.name}}</span>
         </div>
       </div>
     </div>
@@ -18,29 +18,24 @@
 
 <script>
 export default {
-  setup () {
-    const getImageUrl = (name) => {
-      return new URL(`@/assets/svg/${name}`, import.meta.url).href
-    }
-    return {
-      getImageUrl
-    }
-  },
   data () {
     return {
       active: 0,
       data: [
         {
           name: '项目库',
-          img: 'icon1.svg'
+          img: new URL('../assets/svg/icon1.svg', import.meta.url).href,
+          path: '/'
         },
         {
           name: '资料库',
-          img: 'icon1.svg'
+          img: new URL('../assets/svg/icon2.svg', import.meta.url).href,
+          path: '/database'
         },
         {
           name: '回收站',
-          img: 'icon1.svg'
+          img: new URL('../assets/svg/icon3.svg', import.meta.url).href,
+          path: '/recycle'
         }
       ]
     }
@@ -64,8 +59,9 @@ export default {
         }
       })
     },
-    navClick (index) {
+    navClick (item, index) {
       this.active = index
+      this.$router.push(item.path)
     }
   }
 }
@@ -92,6 +88,7 @@ export default {
   margin-top: 40px;
   color: white;
   background-color: #BC002D;
+  box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);
 }
 
 .item {

src/layout/top.vue

@@ -2,10 +2,8 @@
       <el-row class='flex flex-align-center flex-justify-between top '>
         <el-col  :span='12'>
           <div class='flex flex-justify-start flex-align-center padding'>
-            <el-icon :size="20">
-              <Filter />
-            </el-icon>
-            <el-breadcrumb class='ml-20' separator="/">
+           <img class="ml-10" src="../assets/svg/top.svg"/>
+            <el-breadcrumb class='ml-10' separator="/">
               <el-breadcrumb-item v-for='item in nav.menus' :key='item.id'>
                 <a :href="item.path">{{ item.name }}</a>
               </el-breadcrumb-item>

src/views/database/component/list.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="full-height full-width flex flex-col">
+    <div class="white-bg flex flex-align-center padding">
+      <el-select
+          v-model="keyWords"
+          class="mt-10 ml-10"
+          clearable
+          placeholder="排列方式"
+      />
+      <div class="flex flex-align-center tip mt-10">
+        <el-icon class="ml-20" color="#ECAB56">
+          <WarningFilled/>
+        </el-icon>
+        <span class="ml-5">共找到相关资料23947,34份</span>
+      </div>
+    </div>
+    <avue-crud ref="crud"
+               v-model="form"
+               v-model:page="page"
+               :before-open="beforeOpen"
+               :data="data"
+               :option="option"
+               :permission="permissionList"
+               :table-loading="loading"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+    </avue-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  data () {
+    return {
+      keyWords: '',
+      loading: false,
+      data: [],
+      form: {},
+      option: {
+        calcHeight: 30,
+        refreshBtn: false,
+        tip: false,
+        columnBtn: false,
+        searchShow: true,
+        editBtn: true,
+        addBtn: false,
+        delBtn: false,
+        border: true,
+        index: true,
+        align: 'center',
+        viewBtn: true,
+        menuWidth: 320,
+        dialogClickModal: false,
+        column: [
+          {
+            label: '文件名称',
+            prop: 'name',
+            addDisplay: false,
+            editDisplay: false
+          },
+          {
+            label: '更新时间',
+            prop: 'totalAmount'
+          },
+          {
+            label: '格式',
+            prop: 'issueCumulative'
+          },
+          {
+            label: '大小（MB）',
+            prop: 'lot'
+          },
+          {
+            label: '上传时间',
+            prop: 'issueTerm'
+          }]
+      },
+      page: {
+        pageSize: 15,
+        currentPage: 1,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    choise (index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tip {
+  width: 260px;
+  height: 32px;
+  background-color: #FBF6ED;
+  color: #ECAB56;
+  font-weight: 500;
+  flex-wrap: nowrap;
+  margin-left: 20px;
+}
+
+</style>

src/views/database/component/serach.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex flex-col flex-justify-between padding white-bg">
+    <el-form v-model="form" class="lab mt-20" label-width="120px">
+      <el-col :span="24" class="flex flex-center">
+        <el-col :span="6">
+          <el-form-item class="full-width" label="搜索文件">
+            <el-input
+                v-model="form.keyWords"
+                clearable
+                placeholder="输入文件关键字"
+                prefix-icon="Search"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item class="full-width" label="搜索项目">
+            <el-input
+                v-model="form.keyWords"
+                clearable
+                placeholder="不限"
+                prefix-icon="Search"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" class="flex flex-center">
+          <!----时间区间间选择---->
+          <el-form-item class="full-width" label="上传时间">
+            <el-col :span="11">
+              <el-form-item prop="date1">
+                <el-date-picker
+                    v-model="form.date1"
+                    placeholder="开始日期"
+                    style="width: 100%"
+                    type="date"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <span class="grey-6">至</span>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item prop="date1">
+                <el-date-picker
+                    v-model="form.date1"
+                    placeholder="结束日期"
+                    style="width: 100%"
+                    type="date"
+                />
+              </el-form-item>
+            </el-col>
+          </el-form-item>
+        </el-col>
+        <!------领域------>
+        <el-col :span="6">
+          <el-form-item class="full-width" label="项目类型" style="color: #707070">
+            <el-select
+                v-model="form.keyWords"
+                clearable
+                placeholder="输入项目关键字"
+                style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-col>
+    </el-form>
+    <div class="flex full-width flex-center flex-justify-between">
+      <div></div>
+      <div class="flex flex-center mb-10">
+        <base-button class="pointer" icon="Delete" title="清空" type="0"/>
+        <base-button class="ml-20 pointer"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseButton from '../../../components/base-button.vue'
+
+export default {
+  name: 'serach',
+  components: { baseButton },
+  data () {
+    return {
+      form: {
+        keyWords: '',
+        name: '',
+        date1: '',
+        date2: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lab {
+  :deep(.el-form-item__label) {
+    color: #707070;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+</style>

src/views/database/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col full-height">
+    <serach/>
+    <div class="full-width full-height mt-10">
+      <list/>
+    </div>
+  </div>
+</template>
+
+<route>
+{
+path: '/database',
+name: '资料库',
+}
+</route>
+
+<script>
+import serach from './component/serach.vue'
+import list from './component/list.vue'
+
+export default {
+  name: 'index',
+  components: { serach, list }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/component/current.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col padding">
+    <div class="flex flex-center mt-20">
+      <div class="bold font-16 grey flex-child-average text-left" style="margin-left: 50px">
+        <span>当前数据（2004）</span>
+      </div>
+      <div class="flex flex-center flex-child-average flex-justify-end" style="margin-right: 50px">
+        <base-button class="mr-20" icon="User" title="授权查看" type="0"/>
+        <base-button icon="Upload" title="上传文件"/>
+      </div>
+    </div>
+    <files_list class="mt-20"/>
+  </div>
+</template>
+
+<script>
+import files_list from './files_list.vue'
+import baseButton from '../../../components/base-button.vue'
+
+export default {
+  name: "current",
+  components: {files_list, baseButton}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/component/dash.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="full-height full-width flex flex-col">
+    <div class="white-bg flex flex-col padding">
+      <div class="flex flex-align-center tip">
+        <el-icon class="ml-20" color="#ECAB56">
+          <WarningFilled/>
+        </el-icon>
+        <span class="ml-5">项目总投资额129387847万元</span>
+      </div>
+      <div class="flex ml-20">
+        <div v-for=" (item, index) in 8" :class="active === index ? 'total-s' : 'total'"
+             class="flex flex-col flex-align-start flex-center mt-20 bold font-18" @click="choise(index)">
+          <span class="ml-20 sp">全部项目</span>
+          <span class="ml-20 sp1 mt-5">111<span class="grey font-14 ml-5">个</span></span>
+        </div>
+        <el-button @click="go">项目详情</el-button>
+        <el-button @click="go1">跟踪审计</el-button>
+      </div>
+    </div>
+    <avue-crud ref="crud"
+               v-model="form"
+               v-model:page="page"
+               :before-open="beforeOpen"
+               :data="data"
+               :option="option"
+               :permission="permissionList"
+               :table-loading="loading"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+    </avue-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dash',
+  data() {
+    return {
+      active: 0,
+      loading: false,
+      data: [],
+      form: {},
+      option: {
+        calcHeight: 30,
+        refreshBtn: false,
+        tip: false,
+        columnBtn: false,
+        searchShow: true,
+        editBtn: true,
+        addBtn: false,
+        delBtn: false,
+        border: true,
+        index: true,
+        align: 'center',
+        viewBtn: true,
+        menuWidth: 320,
+        dialogClickModal: false,
+        column: [
+          {
+            label: '项目名称',
+            prop: 'name',
+            addDisplay: false,
+            editDisplay: false,
+            width: 500
+          },
+          {
+            label: '更新时间',
+            prop: 'totalAmount'
+          },
+          {
+            label: '项目类型',
+            prop: 'issueCumulative'
+          },
+          {
+            label: '项目进行阶段',
+            prop: 'lot'
+          },
+          {
+            label: '项目总投资（万元）',
+            prop: 'issueTerm'
+          },
+          {
+            label: '创建时间',
+            prop: 'issueDate',
+            type: 'month',
+            format: 'yyyy-MM',
+            valueFormat: 'yyyy-MM'
+          }
+        ]
+      },
+      page: {
+        pageSize: 15,
+        currentPage: 1,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    choise(index) {
+      this.active = index
+    },
+    beforeOpen(done, type) {
+      if (['view'].includes(type)) {
+        this.$api.knowledge.tagsDetail({id: this.form.id}).then(res => {
+          this.form = res.data.data
+        })
+      }
+      done()
+    },
+    go() {
+      this.$router.push('/home/details')
+    },
+    go1() {
+      this.$router.push('/home/track')
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tip {
+  width: 260px;
+  height: 38px;
+  background-color: #FBF6ED;
+  color: #ECAB56;
+  font-weight: 500;
+  flex-wrap: nowrap;
+  margin-left: 20px;
+}
+
+.total-s {
+  width: 170px;
+  height: 70px;
+  border: 1px solid #AC1F1D;
+  border-radius: 10px;
+  margin-right: 40px;
+  box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);
+
+  .sp {
+    color: #AC1F1D;
+  }
+
+  .sp1 {
+    color: #ECAB56;
+  }
+}
+
+.total {
+  width: 170px;
+  height: 70px;
+  border-radius: 10px;
+  margin-right: 40px;
+  background-color: #F0F2F7;
+
+  .sp {
+    color: #707070;
+  }
+
+  .sp1 {
+    color: #AC1F1D;
+  }
+}
+
+</style>

src/views/home/component/files_list.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="full-width full-height mb-10">
+    <div class="flex flex-col">
+      <div class="flex flex-align-center padding border-bottom bold">
+        <span style="flex: 0.6"></span>
+        <span style="flex: 1.4">文件/文件夹名称</span>
+        <span class="title">更新（上传）时间</span>
+        <span class="title">文件大小</span>
+        <span class="title">是否同步</span>
+        <span class="title">上传人</span>
+        <span style="flex: 2;color: #596A8A;">操作</span>
+      </div>
+      <div v-for="item in 5" class="flex flex-center border-bottom padding">
+        <div style="flex: 0.6">
+          <img src="../../../assets/svg/folder/doc.svg" style="width: 80px;height: 66px;">
+        </div>
+        <span style="flex: 1.4;color: #707070;">可研报告及批复</span>
+        <span class="title-x">2022-09-09 13:00:00</span>
+        <span class="title-x">202MB</span>
+        <span class="title-x">已同步</span>
+        <span class="title-x">老段</span>
+        <div class="flex flex-center" style="flex: 2">
+          <main-button icon="View" title="详情" width="85" @click="View"/>
+          <main-button icon="Download" title="下载" width="85"/>
+          <main-button icon="UploadFilled" title="同步" width="85"/>
+          <main-button icon="Delete" title="删除" width="85"/>
+        </div>
+      </div>
+    </div>
+    <!-------分页----->
+    <div class="mt-20 flex flex-center flex-justify-end" style="margin-right: 50px">
+      <span class="mr-20">共100条</span>
+      <el-pagination :total="1000" background layout="prev, pager, next"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import mainButton from '../../../components/main-button.vue'
+
+export default {
+  name: "files_list",
+  components: {mainButton},
+  data() {
+    return {}
+  },
+  methods: {
+    View() {
+      // this.$router.push('/home/files')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  color: #596A8A;
+  flex: 1;
+}
+
+.title-s {
+  color: #BC002D;
+  flex: 1;
+}
+
+.title-x {
+  color: #707070;
+  flex: 1;
+}
+</style>

src/views/home/component/folder_list.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="full-width full-height mb-10">
+    <div class="flex flex-col">
+      <div class="flex flex-align-center padding border-bottom bold">
+        <span class="title-s">谋划阶段</span>
+        <span class="title">文件/文件夹名称</span>
+        <span class="title">更新（上传）时间</span>
+        <span style="color: #707070;flex: 2">文件数量</span>
+        <span style="flex: 1.5;color: #596A8A;">操作</span>
+      </div>
+      <div v-for="item in 5" class="flex flex-center border-bottom padding">
+        <img class="icon" src="../../../assets/svg/folder/see.svg">
+        <span class="title-x">可研报告及批复</span>
+        <span class="title-x">2022-09-09 13:00:00</span>
+        <span style="color: #707070;flex: 2">202</span>
+        <div class="flex flex-center" style="flex: 1.5">
+          <main-button icon="View" title="详情" width="85" @click="View"/>
+          <main-button icon="Upload" title="上传文件" width="85"/>
+          <main-button icon="Pointer" title="授权操作" width="85"/>
+          <main-button icon="Delete" title="删除" width="85"/>
+        </div>
+      </div>
+    </div>
+    <!-------分页----->
+    <div class="mt-20 flex flex-center flex-justify-end" style="margin-right: 50px">
+      <span class="mr-20">共100条</span>
+      <el-pagination :total="1000" background layout="prev, pager, next"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import mainButton from '../../../components/main-button.vue'
+
+export default {
+  name: 'file_list',
+  components: {mainButton},
+  data() {
+    return {}
+  },
+  methods: {
+    View() {
+      this.$router.push('/home/files')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  color: #596A8A;
+  flex: 1;
+}
+
+.title-s {
+  color: #BC002D;
+  flex: 0.5;
+}
+
+.title-x {
+  color: #707070;
+  flex: 1;
+}
+
+.icon {
+  flex: 0.5;
+  width: 60px;
+  height: 56px;
+}
+</style>

src/views/home/component/historical.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col padding">
+    <div class="flex flex-center mt-20">
+      <div class="bold font-16 grey flex-child-average text-left" style="margin-left: 50px">
+        <span>历史数据（2004）</span>
+      </div>
+      <div class="flex flex-center flex-child-average flex-justify-end" style="margin-right: 50px">
+        <base-button class="mr-20" icon="User" title="授权查看" type="0"/>
+        <base-button icon="Upload" title="上传文件"/>
+      </div>
+    </div>
+    <folder_list class="mt-20"/>
+  </div>
+</template>
+
+<script>
+import folder_list from './folder_list.vue'
+
+export default {
+  name: "historical",
+  components: {folder_list}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/component/left.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="top">
+      <div class="flex flex-col padding mt-20 ml-10">
+        <main-button type="0" width="200px"/>
+        <el-divider></el-divider>
+      </div>
+      <div style="height: 600px;margin-left: 20px;text-align: left">
+        <span style="color: #ECAB56;font-size: 18px;font-weight: 500;">项目阶段-文件管理</span>
+        <el-steps :active="1" class="mt-20" direction="vertical">
+          <el-step title="全部阶段"/>
+          <el-step title="谋划阶段"/>
+          <el-step title="工程建设许可阶段"/>
+          <el-step title="施工许可阶段"/>
+          <el-step title="工程实施阶段"/>
+          <el-step title="竣工验收阶段"/>
+          <el-step title="运营阶段"/>
+        </el-steps>
+      </div>
+    </div>
+    <div class="down">
+      <div class="padding flex flex-col flex-center">
+        <el-divider></el-divider>
+        <div class="flex flex-col flex-center tip">
+          <span class="font-16 bold mt-5" style="color:#787C90;">项目总投资额</span>
+          <span class="mt-5 font-16 bold" style="color: #ECAB56">23244555万元</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mainButton from '../../../components/main-button.vue'
+
+export default {
+  name: 'left',
+  components: { mainButton }
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+  width: 260px;
+  position: fixed;
+  bottom: 200px;
+  top: 60px;
+  background-color: #FAF9FA
+}
+
+.down {
+  height: 200px;
+  width: 260px;
+  position: fixed;
+  bottom: 0;
+  background-color: #FAF9FA
+}
+
+.tip {
+  border-radius: 10px;
+  background-color: #F4F4F1;
+  height: 75px;
+  width: 240px
+}
+</style>

src/views/home/component/right1.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-center flex-justify-between margin">
+      <span class="grey font-18 bold">项目详情</span>
+      <base-button icon="EditPen" width="60"/>
+    </div>
+    <div class="flex flex-col">
+      <div class="flex flex-center flex-justify-between margin">
+        <span class="grey font-18 bold">发行明细</span>
+        <base-button icon="Plus" title="新增" width="60"/>
+      </div>
+      <avue-crud ref="crud"
+                 v-model="form"
+                 v-model:page="page"
+                 :before-open="beforeOpen"
+                 :data="data"
+                 :option="option"
+                 :permission="permissionList"
+                 :table-loading="loading"
+                 @row-update="rowUpdate"
+                 @row-save="rowSave"
+                 @row-del="rowDel"
+                 @current-change="currentChange"
+                 @size-change="sizeChange"
+                 @refresh-change="refreshChange"
+                 @on-load="onLoad">
+      </avue-crud>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseButton from '../../../components/base-button.vue'
+
+export default {
+  name: 'right1',
+  components: { baseButton },
+  data () {
+    return {
+      keyWords: '',
+      loading: false,
+      data: [],
+      form: {},
+      option: {
+        calcHeight: 30,
+        refreshBtn: false,
+        tip: false,
+        columnBtn: false,
+        searchShow: true,
+        editBtn: true,
+        addBtn: false,
+        delBtn: false,
+        border: true,
+        menu: false,
+        align: 'center',
+        viewBtn: true,
+        dialogClickModal: false,
+        column: [
+          {
+            label: '发行时间',
+            prop: 'name'
+          },
+          {
+            label: '发行金额（万元）',
+            prop: 'totalAmount'
+          },
+          {
+            label: '发行期限',
+            prop: 'issueCumulative'
+          },
+          {
+            label: '发行利率',
+            prop: 'issueTerm'
+          }]
+      },
+      page: {
+        pageSize: 15,
+        currentPage: 1,
+        total: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/component/right2.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex flex-col white-bg">
+    <div class="flex flex-center ml-20 mb-20 mt-10">
+      <div class="flex flex-center" style="flex: 3">
+        <span class="grey-6 font-18 bold nowrap mr-10">搜索</span>
+        <el-input
+            v-model="keyWords"
+            clearable
+            placeholder="输入关键字"
+            prefix-icon="Search"
+            size="large"
+            style="width: 100%"
+        />
+      </div>
+      <div class="flex flex-center" style="flex: 1">
+        <base-button icon="Delete" title="清空" type="0"/>
+        <base-button class="ml-20"/>
+      </div>
+    </div>
+    <div style="background-color: #E4E4E4;height: 10px;width: 100%;margin-left: -10px"></div>
+    <!------tab------>
+    <div class="flex flex-center mt-15">
+      <div class="flex flex-center" style="flex: 3.8">
+        <div v-for="(item,index) in tab" class="flex flex-center tab">
+          <div :class="active === index ? 'tab-active' : ''"
+               @click="change(index)">{{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-center mr-10 " style="flex: 1.2">
+        <base-button icon="Plus" title="添加文件夹" type="0"/>
+        <base-button class="ml-20" icon="User" title="批量授权"/>
+      </div>
+    </div>
+    <div class="mt-20">
+      <folder_list/>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseButton from '../../../components/base-button.vue'
+// eslint-disable-next-line camelcase
+import folder_list from './folder_list.vue'
+
+export default {
+  name: 'right2',
+  // eslint-disable-next-line camelcase
+  components: {baseButton, folder_list},
+  data() {
+    return {
+      keyWords: '',
+      active: 0,
+      tab: [
+        {
+          name: '项目必须文件'
+        },
+        {
+          name: '相关合同'
+        },
+        {
+          name: '财务相关资料'
+        },
+        {
+          name: '其他文件'
+        }
+      ]
+    }
+  },
+  methods: {
+    change(index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  width: 130px;
+  height: 38px;
+  background-color: #EDF0F3;
+  padding: 2px 10px;
+  color: #707070;
+  font-size: 13px;
+}
+
+.tab:first-child {
+  border-radius: 20px 0 0 20px;
+}
+
+.tab:last-child {
+  border-radius: 0 20px 20px 0;
+}
+
+.tab-active {
+  width: 130px;
+  flex-wrap: nowrap;
+  color: white;
+  font-size: 15px;
+  background-color: #BC002D;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+</style>

src/views/home/component/top_serach.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="flex flex-col flex-justify-between padding white-bg">
+    <el-form  v-model="form" label-width="120px" class="lab mt-20">
+      <div class="flex flex-center">
+        <el-form-item class="full-width" label="关键字">
+          <el-input
+              v-model="form.keyWords"
+              clearable
+              placeholder="输入项目关键字"
+              prefix-icon="Search"
+          />
+        </el-form-item>
+        <el-form-item class="full-width" label="业主部门">
+          <el-input
+              v-model="form.keyWords"
+              clearable
+              placeholder="输入项目关键字"
+              prefix-icon="Search"
+          />
+        </el-form-item>
+        <el-form-item class="full-width" label="项目类型">
+          <el-select
+              v-model="form.keyWords"
+              clearable
+              style="width: 100%"
+              placeholder="输入项目关键字"
+          />
+        </el-form-item>
+      </div>
+      <el-col :span="16" class="flex flex-center">
+        <!----时间区间间选择---->
+        <el-form-item class="full-width" label="项目建设期">
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker
+                  v-model="form.date1"
+                  type="date"
+                  placeholder="开始日期"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2">
+            <span class="grey-6">至</span>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker
+                  v-model="form.date1"
+                  type="date"
+                  placeholder="结束日期"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <!------领域------>
+        <el-form-item class="full-width" style="color: #707070" label="项目领域">
+          <el-select
+              v-model="form.keyWords"
+              clearable
+              style="width: 100%"
+              placeholder="输入项目关键字"
+          />
+        </el-form-item>
+      </el-col>
+      <div class="flex flex-center">
+        <el-col :span="16" class="flex flex-center">
+          <!----时间区间间选择---->
+          <el-form-item class="full-width" label="项目运营期">
+            <el-col :span="11">
+              <el-form-item prop="date1">
+                <el-date-picker
+                    v-model="form.date1"
+                    type="date"
+                    placeholder="开始日期"
+                    style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <span class="grey-6">至</span>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item prop="date1">
+                <el-date-picker
+                    v-model="form.date1"
+                    type="date"
+                    placeholder="结束日期"
+                    style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-form-item>
+          <el-form-item class="full-width" label="发债年份">
+            <el-select
+                v-model="form.keyWords"
+                placeholder="输入项目关键字"
+                style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <div class="flex flex-center flex-justify-between" style="margin-bottom: 18px;width: 80%;margin-left: 120px">
+            <base-button class="pointer" type="0" title="添加文件夹" icon="Plus"/>
+            <base-button class="pointer" type="0" title="清空" icon="Delete"/>
+            <base-button class="pointer"/>
+          </div>
+        </el-col>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import baseButton from '../../../components/base-button.vue'
+
+export default {
+  name: 'top-serach',
+  components: { baseButton },
+  data () {
+    return {
+      form: {
+        keyWords: '',
+        name: '',
+        date1: '',
+        date2: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lab{
+  :deep(.el-form-item__label){
+    color: #707070; font-size: 15px;font-weight: 500;
+  }
+}
+</style>

src/views/home/details.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class='flex flex-justify-start full-height'>
+    <div class="full-height">
+      <left-bar/>
+    </div>
+    <div class="full-height full-width white-bg padding-left padding-top" style="margin-left: 270px">
+      <right1 v-if="type === 0"/>
+      <right2 v-else/>
+    </div>
+  </div>
+</template>
+
+<route>
+{
+name:'项目详情',
+}
+</route>
+
+<script>
+import leftBar from './component/left.vue'
+import right1 from './component/right1.vue'
+import right2 from './component/right2.vue'
+
+export default {
+  name: 'test',
+  components: { leftBar, right1, right2 },
+  data () {
+    return {
+      type: 1
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/files.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class='flex flex-col full-height'>
+    <div class="full-height white-bg">
+      <current/>
+    </div>
+    <div class="full-height full-width white-bg mt-10">
+      <historical/>
+    </div>
+  </div>
+</template>
+
+<route>
+{
+name:'项目文件',
+}
+</route>
+
+<script>
+import current from './component/current.vue'
+import historical from './component/historical.vue'
+
+export default {
+  name: "files",
+  components: {current, historical}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/home/index.vue

@@ -1,20 +1,27 @@
 <template>
-  <div class='full-height light-green-bg rounded-3xl min-h-4rem'>
-    <el-button @click='push'>确定</el-button>
+  <div class="flex flex-col full-height">
+    <top-serach/>
+    <div class="full-width full-height mt-10">
+      <dash/>
+    </div>
   </div>
 </template>
 
 <route>
-  {
-    path: '/',
-    name: '首页',
-  }
+{
+path: '/',
+name: '项目库',
+}
 </route>
 
 <script>
+import topSerach from './component/top_serach.vue'
+import dash from './component/dash.vue'
 import { useStore } from '../../store/user.js'
 import tokenStore from '../../store/token.js'
+
 export default {
+  components: { topSerach, dash },
   setup () {
     const store = useStore()
     const token = tokenStore()
@@ -30,6 +37,6 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 </style>

src/views/home/test.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>test</div>
-</template>
-
-<route>
- {
-   name:'测试',
-   meta: {
-   layout: 'empty',
-  }
- }
-</route>
-
-<script>
-export default {
-  name: 'test'
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/home/track.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class='flex flex-justify-start full-height'>
+    <div class="full-height">
+      <left-bar/>
+    </div>
+    <div class="flex flex-col full-height full-width" style="margin-left: 270px">
+      <div class="white-bg padding-left padding-top flex flex-col">
+        <div class="flex flex-center full-width">
+          <!------tab------>
+          <div class="flex flex-center mt-15">
+            <div class="flex flex-center orange-bg">
+              <div v-for="(item,index) in tab" class="flex flex-center tab">
+                <div :class="active === index ? 'tab-active' : ''"
+                     @click="change(index)">{{ item.name }}
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-center mr-10 blue-bg">
+              <base-button icon="Plus" title="添加文件夹" type="0"/>
+              <base-button class="ml-20" icon="User" title="批量授权"/>
+            </div>
+          </div>
+        </div>
+        <folder_list/>
+      </div>
+      <div class="white-bg padding-left padding-top mt-10">
+        <files_list/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<route>
+{
+name:'跟踪审计',
+}
+</route>
+
+<script>
+import leftBar from "./component/left.vue";
+import folder_list from './component/folder_list.vue'
+import files_list from './component/files_list.vue'
+import baseButton from '../../components/base-button.vue'
+
+export default {
+  name: "track",
+  components: {leftBar, folder_list, files_list, baseButton},
+  data() {
+    return {
+      type: 1,
+      active: 0,
+      tab: [
+        {
+          name: '项目必须文件'
+        },
+        {
+          name: '相关合同'
+        },
+        {
+          name: '财务相关资料'
+        },
+        {
+          name: '其他文件'
+        }
+      ]
+    }
+  },
+  methods: {
+    change(index) {
+      this.active = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  width: 130px;
+  height: 38px;
+  background-color: #EDF0F3;
+  padding: 2px 10px;
+  color: #707070;
+  font-size: 13px;
+}
+
+.tab:first-child {
+  border-radius: 20px 0 0 20px;
+}
+
+.tab:last-child {
+  border-radius: 0 20px 20px 0;
+}
+
+.tab-active {
+  width: 130px;
+  flex-wrap: nowrap;
+  color: white;
+  font-size: 15px;
+  background-color: #BC002D;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+</style>

src/views/home/dash.vue → src/views/recycle/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
-    dash
+    回收站
   </div>
 </template>
+
 <route>
-  {
-    name:'工作台2'
-  }
+{
+path: '/recycle',
+name: '回收站',
+}
 </route>
 
 <script>
 export default {
-  name: 'dash'
+  name: 'index'
 }
 </script>