diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 7d4632ae7f4be1074edce924d33e69110f9ee1c5..3738387094219f0a78524041d324ad722984af72 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -1,29 +1,34 @@
 [v-cloak] {
   display: none;
 }
+
 /* 新增按钮颜色 */
 .form-group .el-button--primary {
   background-color: #264dd9 !important;
   border-color: #264dd9 !important;
 }
+
 /* 返回按钮颜色 */
-.from_return > .el-button--primary {
+.from_return>.el-button--primary {
   background-color: #edf0ff !important;
   border-color: #edf0ff !important;
   color: #264dd9 !important;
 }
+
 /* 取消按钮颜色 */
 .form_c {
   background-color: #dde4ff !important;
   border-color: #dde4ff !important;
-  color: #264dd9 !important ;
+  color: #264dd9 !important;
 }
+
 /* 确定按钮颜色 */
 .form_t {
   background-color: #264dd9 !important;
   border-color: #264dd9 !important;
-  color: #f4f7fc !important ;
+  color: #f4f7fc !important;
 }
+
 /* 搜索框颜色 */
 .form-group .el-input__inner {
   border-radius: 28px !important;
@@ -31,12 +36,14 @@
   background: #f4f7fc !important;
   color: #8890a7 !important;
 }
+
 .drawer_return .el-input__inner {
   border-radius: 28px !important;
   border: 1px solid #bcc1d0 !important;
   background: #f4f7fc !important;
   color: #8890a7 !important;
 }
+
 /* 多行文本框样式 */
 .jbxx_desc textarea {
   height: 150px !important;
@@ -45,39 +52,46 @@
   outline: none !important;
   resize: none !important;
 }
+
 /* 面包屑文字大小 */
 .el-breadcrumb {
   font-size: 14px;
   color: #898d9e;
 }
+
 /* 编辑颜色*/
 .primary-edit {
   color: #264dd9;
   cursor: pointer;
 }
+
 /* 删除颜色 */
 .primary-del {
   color: #264dd9;
   cursor: pointer;
 }
-.space_bet {
-}
+
+.space_bet {}
+
 /* reset */
-html {
-}
+html {}
+
 body {
   margin: 0;
   font-family: Microsoft YaHei, sans-serif;
   /* font-size: 17px; */
 }
+
 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
+
 p {
   margin: 0;
 }
+
 h1,
 h2,
 h3,
@@ -90,6 +104,7 @@ h5 {
 div {
   box-sizing: border-box;
 }
+
 /* reset end */
 
 /* common */
@@ -97,12 +112,14 @@ div {
   /* height: 100%; */
   /* overflow: hidden; */
 }
+
 .text_clip {
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
 }
+
 .text_clip_2 {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
@@ -112,16 +129,19 @@ div {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
 .map_container {
   background-color: #eee;
 }
+
 .ss_card {
   padding: 1.2rem;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.ss_card > .sc_left_container {
+
+.ss_card>.sc_left_container {
   width: 6rem;
   height: 6rem;
   flex-shrink: 0;
@@ -129,71 +149,87 @@ div {
   overflow: hidden;
   font-size: 0;
 }
-.ss_card > .sc_right_container {
+
+.ss_card>.sc_right_container {
   width: calc(100% - 7rem);
   flex-grow: 1;
   margin-left: 1.2rem;
 }
-.ss_card > .sc_right_container > .sc_title {
+
+.ss_card>.sc_right_container>.sc_title {
   font-size: 1.6rem;
   font-weight: bold;
   line-height: 2.6rem;
 }
-.ss_card > .sc_right_container > .sc_info {
+
+.ss_card>.sc_right_container>.sc_info {
   display: flex;
   justify-content: space-between;
 }
+
 .form-group {
   padding: 20px 20px 15px;
   box-sizing: border-box;
   border-bottom: 1px solid #edf0ff;
 }
+
 .padding_table {
   padding: 0 20px;
 }
+
 /* 设置抽屉的样式 */
 .el-drawer__header {
   display: none;
 }
+
 .from_return {
   text-align: center;
   padding: 18px 20px 10px;
   border-bottom: 1px solid #edf0ff;
   position: relative;
 }
-.from_return > .el-button--primary {
+
+.from_return>.el-button--primary {
   position: absolute;
   top: 15px;
   left: 20px;
 }
-.from_return > span {
+
+.from_return>span {
   color: #1a2236;
   font-size: 16px;
 }
+
 .demo-drawer__content .el-form-item__label {
   color: #242c43;
 }
+
 .demo-drawer__content .el-input__inner {
   border: 1px solid #bcc1d0;
   border-radius: 17px;
   color: #58617a;
   background: #fff;
 }
+
 .demo-drawer__footer {
   text-align: right;
   padding-right: 40px;
   margin-top: 40px;
 }
+
 .el-form-item__error {
   font-size: 11px;
 }
+
 /* 设置提示弹窗的样式 */
 .el-dialog {
   border-radius: 10px;
 }
+
 .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
 }
+
 .el-dialog__title {
   font-size: 16px;
   font-weight: 700;
@@ -201,6 +237,7 @@ div {
   padding-left: 8px;
   position: relative;
 }
+
 .el-dialog__title::before {
   content: "";
   position: absolute;
@@ -211,37 +248,49 @@ div {
   left: 0;
   top: 2px;
 }
+
 .el-dialog__body {
   font-size: 18px;
   color: #242c43;
   text-align: center;
 }
+
 /* 设置tab切换的样式 */
 .el-tabs__item.is-disabled {
   color: #8890a7 !important;
 }
+
 .el-tabs__item {
   font-size: 16px;
   color: #8890a7;
   line-height: 24px !important;
+  font-weight: bold;
 }
+
 .el-tabs__nav-scroll .el-tabs__item {
-  line-height: 40px !important;
+  line-height: 30px !important;
+  height: 44px !important;
 }
+
 .el-tabs__item:hover {
   color: #687087;
 }
+
 .el-tabs__item.is-active {
   color: #e56600 !important;
 }
+
 .el-tabs__active-bar {
   height: 3px;
-  background-color: #e56600 !important;
+  border-radius: 1px;
+  background-color: #f5ab4c !important;
 }
+
 .el-tabs__nav-wrap::after {
   height: 1px;
   background-color: #edf0ff;
 }
+
 /* 设置tree的样式 */
 /* .usrrole .el-tree-node:focus>.el-tree-node__content{
   background: rgb(248, 249, 253) !important;
@@ -287,18 +336,26 @@ border-radius:8px;
 /* 左右布局 */
 .flex {
   height: 100%;
-  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-  display: -moz-box; /* Firefox 17- */
-  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-  display: -moz-flex; /* Firefox 18+ */
-  display: -ms-flexbox; /* IE 10 */
-  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
+  display: -webkit-box;
+  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
+  display: -moz-box;
+  /* Firefox 17- */
+  display: -webkit-flex;
+  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
+  display: -moz-flex;
+  /* Firefox 18+ */
+  display: -ms-flexbox;
+  /* IE 10 */
+  display: flex;
+  /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
 }
+
 .flex-left {
   width: 178px;
   background-color: #1a2236;
   height: 100%;
 }
+
 .flex-right {
   padding: 0 20px 20px;
   box-sizing: border-box;
@@ -308,64 +365,76 @@ border-radius:8px;
   flex: 1;
   overflow-y: auto;
 }
+
 .flex-right-box {
   width: 100%;
   height: 100%;
   position: relative;
 }
+
 .ces-main {
   position: absolute;
   width: 100%;
 }
+
 .v-modal {
   background: #000a2b !important;
 }
+
 .drawer600 {
   width: 600px !important;
 }
+
 .drawer620 {
   width: 620px !important;
 }
+
 .drawer1202 {
   width: 1202px !important;
 }
-.el-form-item.is-required:not(.is-no-asterisk)
-  .el-form-item__label-wrap
-  > .el-form-item__label:before,
-.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+
+.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
   content: "";
 }
+
 /* 设置switch的样式 */
 .switchStyle1 .el-switch__label {
   position: absolute;
   display: none;
   color: #fff;
 }
+
 /*打开时文字位置设置*/
 .switchStyle1 .el-switch__label--right {
   z-index: 1;
   right: -10px;
   top: 1px;
 }
+
 /*关闭时文字位置设置*/
 .switchStyle1 .el-switch__label--left {
   z-index: 1;
   left: 28px;
   top: 1px;
 }
+
 .switchStyle1 .el-switch__label.is-active {
   display: block;
 }
+
 .switchStyle1.el-switch .el-switch__core,
 .switchStyle1.el-switch .el-switch__label {
   width: 62px !important;
   height: 28px !important;
   border-radius: 28px !important;
 }
+
 .switchStyle1 .el-switch__core {
   background: #f8f9fd !important;
   border: 1px solid #8890a7 !important;
 }
+
 .switchStyle1 .el-switch__core:after {
   background: #8890a7 !important;
   width: 22px;
@@ -373,10 +442,12 @@ border-radius:8px;
   left: 2px;
   top: 2.1px;
 }
+
 .switchStyle1.el-switch.is-checked .el-switch__core {
   background: #f8f9fd !important;
   border: 1px solid #5c82ff !important;
 }
+
 .switchStyle1.el-switch.is-checked .el-switch__core:after {
   background: #5c82ff !important;
   width: 22px;
@@ -384,22 +455,28 @@ border-radius:8px;
   right: 0;
   top: 2.1px;
 }
+
 .switchStyle1.el-switch.is-checked .el-switch__core::after {
   margin-left: -25px;
 }
+
 .switchStyle1 .el-switch__label * {
   font-size: 14px !important;
   font-weight: 800;
 }
+
 .switchStyle1.el-switch .el-switch__label {
   color: #8890a7 !important;
 }
+
 .switchStyle1.el-switch.is-checked .el-switch__label {
   color: #5c82ff !important;
 }
+
 .switchStyle1.el-switch:hover {
   opacity: 0.8;
 }
+
 /* 自定义图表提示框小三角 */
 /* .div-tip-warp {
   position: relative;
@@ -424,13 +501,16 @@ border-radius:8px;
 .el-input__inner {
   border-radius: 8px;
 }
+
 .el-input-group__append,
 .el-input-group__prepend {
   border-radius: 8px;
 }
+
 .el-button {
   border-radius: 8px;
 }
+
 /* 
     下拉选样式
     此处勿删，apaasV3下拉选择样式统一用这个
@@ -438,17 +518,20 @@ border-radius:8px;
 .el-select-dropdown {
   border-radius: 8px;
 }
+
 .el-select-dropdown__empty {
   background-color: #0f2683;
   color: #f4f7fc;
   border-radius: 8px;
 }
+
 .el-select-dropdown__list {
   padding: 0;
   background-color: #0f2683;
   top: 10px;
   border-radius: 4px;
 }
+
 .el-select-dropdown__item {
   font-size: 12px;
   padding: 0 20px;
@@ -457,59 +540,75 @@ border-radius:8px;
   line-height: 34px;
   background-color: #0f2683;
 }
+
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background-color: #3f4f9c;
 }
+
 .el-select-dropdown__item.selected {
   color: #f4f7fc;
 }
+
 .el-scrollbar {
   border-radius: 8px;
 }
+
 .el-popper[x-placement^="bottom"] .popper__arrow::after {
   border-bottom-color: transparent;
 }
+
 .el-popper[x-placement^="top"] .popper__arrow::after {
   border-top-color: transparent;
 }
+
 /* 单选激活样式 */
 .el-radio__input.is-checked .el-radio__inner {
   border-color: #e3e5ef;
   background-color: #f7f8f9;
 }
-.el-radio__input.is-checked + .el-radio__label {
+
+.el-radio__input.is-checked+.el-radio__label {
   color: #1a2236;
   font-weight: 700;
 }
+
 .el-radio__inner::after {
   width: 8px;
   height: 8px;
 }
+
 .el-radio__input.is-checked .el-radio__inner::after {
   background-color: #e56600;
 }
+
 .el-radio__inner:hover {
   border-color: #e56600;
 }
+
 /* 面包屑样式 */
 .bread_crumb {
   margin: 20px;
   font-size: 14px;
 }
+
 .bread_crumb .el-breadcrumb__inner {
   color: #b4c0f5 !important;
 }
+
 .bread_crumb .is-link {
   color: #626de9 !important;
 }
+
 .bread_crumb1 {
   margin: 20px;
   font-size: 14px;
 }
+
 .bread_crumb1 .el-breadcrumb__inner {
   color: #242c43 !important;
 }
+
 .bread_crumb1 .is-link {
   color: #898d9e !important;
 }
@@ -522,60 +621,68 @@ border-radius:8px;
 }
 
 /* common */
-.apass_breadcrumb > .el-breadcrumb {
+.apass_breadcrumb>.el-breadcrumb {
   padding: 15px 0;
 }
-.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+
+.apass_breadcrumb>.el-breadcrumb .el-breadcrumb__inner {
   font-size: 14px;
   font-weight: bold;
   color: #898d9e;
   line-height: 23px;
 }
-.apass_breadcrumb
-  > .el-breadcrumb
-  .el-breadcrumb__item:last-child
-  .el-breadcrumb__inner {
+
+.apass_breadcrumb>.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
   color: #242c43;
   font-weight: normal;
 }
+
 .apaas_button .el-button {
   min-width: 90px;
   color: #0f2683;
 }
+
 .apaas_button .el-button--mini,
 .apaas_button .el-button--mini.is-round {
   padding: 10px 15px;
 }
+
 .apaas_button .el-button--primary {
   color: #fff;
   background-color: #0f2683;
   border-color: #0f2683;
 }
+
 .apaas_button .el-button--primary.is-plain {
   color: #0f2683;
   background-color: #e1e4fb;
   border-color: #e1e4fb;
 }
+
 .apaas_button .el-button--danger {
   color: #fff;
   background-color: #e15260;
   border-color: #e15260;
 }
+
 .apaas_button .el-button.is-disabled,
 .apaas_button .el-button.is-disabled:focus,
 .apaas_button .el-button.is-disabled:hover {
   cursor: not-allowed;
 }
+
 .apaas_button .el-button--warning.is-plain {
   background-color: #fcefd6;
   border-color: #fac266;
   color: #e56600;
 }
+
 .apaas_button .el-button--warning {
   background-color: #e56600;
   border-color: #e56600;
   color: #fcefd6;
 }
+
 .apaas_button .el-button.is-disabled,
 .apaas_button .el-button.is-disabled:focus,
 .apaas_button .el-button.is-disabled:hover {
@@ -586,62 +693,76 @@ border-radius:8px;
   border-color: #ebeef5;
 }
 
-.apass_table .el-table th > .cell {
+.apass_table .el-table th>.cell {
   color: #1a2236;
 }
+
 .apass_table .el-table td,
 .apass_table .el-table th.is-leaf {
   border: none !important;
   line-height: 23px;
 }
+
 .apass_table .el-table::before {
   display: none;
 }
+
 .apass_table .el-table {
   width: 100%;
 }
+
 .apass_table .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
 }
+
 .apass_table .table_html a {
   font-size: 14px;
   color: #0f2683;
   cursor: pointer;
 }
+
 .apass_table .row_action {
   user-select: none;
 }
+
 .apass_table .row_action .btn {
   font-size: 14px;
   font-weight: bold;
   color: #0f2683;
   cursor: pointer;
 }
+
 .apass_table .row_action .btn.warn {
   color: #830f53;
 }
+
 .apass_table .row_action .btn.disabled {
   color: #999;
   cursor: not-allowed;
 }
+
 .apass_table .row_action .disabled.hide {
   opacity: 0;
   cursor: auto;
 }
+
 .apass_table .row_action .interval_line {
   font-size: 14px;
   color: #dde4ff;
   margin: 0 20px;
 }
+
 .apass_table .border-active td {
   padding: 10px 0;
   background-color: #e6ebfe;
   border-top: 2px solid #515fe7 !important;
   border-bottom: 2px solid #515fe7 !important;
 }
+
 .apass_table .border-active td:first-child {
   border-left: 2px solid #515fe7 !important;
 }
+
 .apass_table .border-active td:last-child {
   border-right: 2px solid #515fe7 !important;
 }
@@ -651,7 +772,8 @@ border-radius:8px;
   background-color: #626de9;
   border-color: #515fe7;
 }
-.apass_checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
+
+.apass_checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
   color: #58617a;
 }
 
@@ -659,12 +781,14 @@ border-radius:8px;
   width: 16px;
   height: 1px;
 }
+
 .apaas_scroll::-webkit-scrollbar-thumb {
   border-radius: 8px;
   /* background: #dde4ff; */
   box-shadow: 8px 0 0 #a5adb7 inset;
   border: 4px solid rgba(0, 0, 0, 0);
 }
+
 .apaas_scroll::-webkit-scrollbar-track {
   border-radius: 8px;
   /* background: #f4f4f4; */
@@ -676,6 +800,7 @@ border-radius:8px;
 .apaas_detail_container {
   padding: 0 20px;
 }
+
 .apaas_detail_container .main_contaner {
   min-height: calc(100vh - 58px - 83px);
   flex-grow: 1;
@@ -691,41 +816,51 @@ border-radius:8px;
   flex-direction: column;
   justify-content: space-between;
 }
+
 .apaas_detail_container .main_contaner.locked_height {
   height: calc(100vh - 58px - 83px);
   min-height: 400px;
 }
+
 .apaas_detail_container .main_contaner.locked_height_900 {
   height: calc(100vh - 58px - 83px);
   min-height: 900px;
 }
+
 .apaas_detail_container .detail_action {
   text-align: right;
   margin-top: 50px;
 }
-.apaas_detail_container .detail_action .el-button + .el-button {
+
+.apaas_detail_container .detail_action .el-button+.el-button {
   margin-left: 30px;
 }
+
 .apaas_detail_form {
   max-width: 970px;
 }
+
 .apaas_detail_form .el-input__inner,
 .apaas_detail_form .el-textarea__inner {
   width: 100%;
   background-color: #f7f8f9;
 }
+
 .apaas_detail_form .el-select {
   width: 100%;
 }
+
 .apaas_detail_form.el-form--label-top .el-form-item__label {
   padding: 0 0 15px;
   font-size: 14px;
   line-height: 1;
   color: #58617a;
 }
+
 .apaas_detail_form .el-form-item {
   margin-bottom: 30px;
 }
+
 .apaas_detail_form .textarea_count {
   font-size: 14px;
   line-height: 1;
@@ -733,13 +868,16 @@ border-radius:8px;
   text-align: right;
   margin-top: 10px;
 }
+
 .apaas_steps {
   height: 100%;
 }
+
 .apaas_steps .apaas_step {
   height: 100%;
   position: relative;
 }
+
 .apaas_steps .apaas_step .apaas_step_content {
   position: absolute;
   top: 0;
@@ -749,6 +887,7 @@ border-radius:8px;
   border-bottom: 1px solid #f4f7fc;
   /* overflow: hidden; */
 }
+
 .apaas_steps .apaas_step .apaas_step_action {
   position: absolute;
   bottom: 0;
@@ -758,34 +897,42 @@ border-radius:8px;
   justify-content: space-between;
   align-items: flex-start;
 }
+
 .apaas_steps .apaas_step .apaas_step_action .el-button {
   height: 44px;
   width: 124px;
 }
-.apaas_steps .apaas_step .apaas_step_action .el-button + .el-button {
+
+.apaas_steps .apaas_step .apaas_step_action .el-button+.el-button {
   margin-left: 20px;
 }
+
 .top_fliter {
   display: flex;
 }
+
 .top_fliter .filter_list {
   flex-grow: 1;
   min-width: 550px;
   font-size: 0;
 }
-.filter_list > .filter_item {
+
+.filter_list>.filter_item {
   display: inline-block;
   vertical-align: middle;
   margin-top: 15px;
 }
-.filter_list > .filter_item {
+
+.filter_list>.filter_item {
   margin-right: 15px;
 }
-.filter_list > .filter_item > * {
+
+.filter_list>.filter_item>* {
   display: inline-block;
   vertical-align: middle;
 }
-.filter_list > .filter_item > .filter_title {
+
+.filter_list>.filter_item>.filter_title {
   width: 8em;
   text-align: right;
   font-size: 14px;
@@ -794,19 +941,23 @@ border-radius:8px;
   margin-right: 10px;
   white-space: nowrap;
 }
-.filter_list > .filter_item > .filter_title + * {
+
+.filter_list>.filter_item>.filter_title+* {
   width: 300px;
 }
+
 .top_fliter .filter_action {
   flex-shrink: 0;
   margin-left: 25px;
   text-align: right;
 }
-.filter_action > .el-button {
+
+.filter_action>.el-button {
   min-width: 90px;
   margin-top: 15px;
 }
-.filter_action > .el-button + .el-button {
+
+.filter_action>.el-button+.el-button {
   margin-left: 10px;
 }
 
@@ -815,41 +966,232 @@ border-radius:8px;
   flex-wrap: wrap;
   text-align: left;
 }
+
 .meassage_detail_dialog .detail_item {
   flex: 1 1 auto;
   width: 50%;
   margin-top: 20px;
 }
+
 .meassage_detail_dialog .detail_item.full_line {
   width: 100%;
 }
+
 .meassage_detail_dialog .detail_item p {
   padding: 0 15px;
   font-size: 14px;
   line-height: 22px;
   color: #8890a7;
 }
+
 .meassage_detail_dialog .detail_item .item_content {
   color: #000;
   margin-top: 10px;
 }
+
 .meassage_detail_dialog .detail_item .full_content {
   padding: 10px 0;
   border-radius: 8px;
   background-color: #f8f9fd;
   margin-top: 5px;
 }
-.meassage_detail_dialog .detail_item .full_content > .apaas_scroll {
+
+.meassage_detail_dialog .detail_item .full_content>.apaas_scroll {
   height: 176px;
   overflow: auto;
 }
+
 .meassage_detail_dialog .detail_item .full_content .item_content {
   margin: 0;
 }
+
 .no_wrap .apass_table td .cell {
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
 }
+
 /* 详情页公共样式 by xuyiming ~~~end */
+
+/* 
+    form_content
+*/
+.from_content1 {
+  width: calc(100% - 40px);
+  background-color: rgba(255, 255, 255, 1);
+  overflow: hidden;
+  margin: 0 20px 20px;
+  position: relative;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
+  border-radius: 12px;
+  padding-top: 20px;
+}
+
+.from_content {
+  width: calc(100% - 40px);
+  background-color: rgba(255, 255, 255, 1);
+  /* flex: 1 0 auto; */
+  position: relative;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
+  border-radius: 12px;
+  margin: 0 20px;
+  padding: 20px 20px 30px;
+}
+
+.from_content_table {
+  height: calc(100% - 90px);
+}
+
+.from_content_table_app {
+  height: calc(100% - 170px);
+}
+
+.from_content_table_auth {
+  height: calc(100% - 100px);
+}
+
+.from_content_btn {
+  height: 40px;
+  margin-bottom: 20px;
+}
+
+/* 时间控件样式 */
+.el-picker-panel {
+  background-color: #242c43 !important;
+  border-radius: 8px !important;
+  font-size: 12px !important;
+  color: #e3e5ef !important;
+  box-shadow: 0 !important;
+  border: none !important;
+}
+
+.el-picker-panel__footer {
+  border-top: 1px solid #3f4864 !important;
+  background-color: #242c43 !important;
+}
+
+.el-date-table th {
+  border-bottom: 1px solid #3f4864 !important;
+  color: #e3e5ef !important;
+}
+
+.el-date-table td.current:not(.disabled) span {
+  color: #e3e5ef !important;
+  background-color: #315efc !important;
+}
+
+.el-date-table td.next-month,
+.el-date-table td.prev-month {
+  color: #58617a !important;
+}
+
+.el-date-picker__time-header {
+  border-bottom: 1px solid #3f4864 !important;
+}
+
+.el-picker-panel__body .el-input__inner {
+  height: 24px !important;
+  line-height: 24px !important;
+  background-color: #1a2236 !important;
+  border-radius: 12px !important;
+  border: solid 1px #3f4864 !important;
+  color: #e3e5ef !important;
+  font-size: 12px;
+}
+
+.el-picker-panel__footer .el-button {
+  background-color: #264dd9;
+  border-radius: 12px;
+  padding: 5px 12px;
+  color: #f4f7fc;
+  font-size: 12px;
+  border: none !important;
+}
+
+.el-picker-panel__footer .el-button--text {
+  background-color: #dde4ff;
+  border-radius: 12px;
+  padding: 5px 12px;
+  color: #264dd9;
+  font-size: 12px;
+}
+
+.el-button.is-plain:focus,
+.el-button.is-plain:hover {
+  background-color: #264dd9;
+  color: #f4f7fc;
+}
+
+.el-button--text:focus,
+.el-button--text:hover {
+  color: #264dd9;
+
+}
+
+.el-time-panel {
+  border-radius: 8px !important;
+  border: 1px solid #3f4864 !important;
+  background-color: #242c43 !important;
+}
+
+.el-time-panel__footer {
+  border: 1px solid #3f4864 !important;
+}
+
+.el-time-panel__btn.confirm {
+  background-color: #264dd9;
+  border-radius: 12px !important;
+  padding: 0px 12px;
+  color: #f4f7fc !important;
+  font-size: 12px !important;
+}
+
+.el-time-panel__btn {
+  line-height: 22px !important;
+  height: 22px !important;
+}
+
+.el-time-spinner__item:hover:not(.disabled):not(.active) {
+  background-color: #264dd9 !important;
+  border-radius: 12px !important;
+  color: #f4f7fc;
+}
+
+.el-time-spinner__item {
+  color: #58617a !important;
+}
+
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+  background-color: #283456;
+}
+
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+  background-color: #264DD9;
+}
+
+.el-date-table td.today span {
+  color: #0c3ff7;
+}
+
+.el-date-editor .el-range-separator {
+  width: 15%;
+  line-height: 28px;
+}
+
+/* table select window */
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #515fe7;
+}
+.el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #515fe7;
+}
+.el-checkbox__input:hover .el-checkbox__inner {
+  border-color: #515fe7;
+}
\ No newline at end of file
diff --git a/src/assets/i18n/language-zh.js b/src/assets/i18n/language-zh.js
index 1e64e6fe8b7aabb34eb1a1a5e58847a1e9f7f7b0..dc78d6f56c25f72d481be264dfb2d20a5000739f 100644
--- a/src/assets/i18n/language-zh.js
+++ b/src/assets/i18n/language-zh.js
@@ -7,6 +7,7 @@ export const lang = {
     personal_center: "个人中心",
     profile: "个人档案",
     message_center: "消息中心",
+    my_questions_and_answers: "我的问答",
 
     // unit of purchase duration
     by_year: "按年",
diff --git a/src/assets/imgs/ic_liulanshu.png b/src/assets/imgs/ic_liulanshu.png
new file mode 100644
index 0000000000000000000000000000000000000000..13dc89d5df65cc60c15df7f0c7f6af9ec97ca076
Binary files /dev/null and b/src/assets/imgs/ic_liulanshu.png differ
diff --git a/src/assets/imgs/ic_wodehuida.png b/src/assets/imgs/ic_wodehuida.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe013168b0ce88dd74e1460500efe94a719a14b2
Binary files /dev/null and b/src/assets/imgs/ic_wodehuida.png differ
diff --git a/src/assets/imgs/ic_wodetiwen.png b/src/assets/imgs/ic_wodetiwen.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0795bb9121bb40bf23f2a11e74917f865921cd9
Binary files /dev/null and b/src/assets/imgs/ic_wodetiwen.png differ
diff --git a/src/components/new-com/apassTable.vue b/src/components/new-com/apassTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b77c0af44f6d463fb25f1ec8490f16e8dff3bbb1
--- /dev/null
+++ b/src/components/new-com/apassTable.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="apass_table">
+    <el-table
+      :data="data"
+      @sort-change="sortChange"
+      @row-click="rowClick"
+      :row-class-name="rowClassName"
+      ref="multipleTable"
+      :height="height"
+      @select="select"
+      @select-all="selectAll"
+    >
+      <el-table-column v-if="select_show" type="selection" width="60" align="center"></el-table-column>
+      <el-table-column
+        v-for="(item, index) in header"
+        :label="item.label"
+        :align="item.align || 'left'"
+        :width="item.width"
+        :key="'head_' + index"
+        :prop="item.prop"
+        :sortable="item.sortable ? 'custom' : false"
+      >
+        <template slot-scope="scope">
+          <div v-if="item.type === 'buttons'" class="row_action">
+            <template v-for="(v, i) in item.actionList">
+              <span
+                v-if="v.disabledRule && v.disabledRule(scope.row)"
+                class="btn disabled"
+                :class="{ hide: v.disableHide }"
+                :key="'btn_' + index + '_' + i"
+                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
+              ></span>
+              <a
+                v-else
+                class="btn"
+                :class="v.class || ''"
+                :key="'btn_' + index + '_' + i"
+                @click.stop="v.callback && v.callback(scope.row)"
+                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
+              ></a>
+              <span
+                v-if="i < item.actionList.length - 1"
+                class="interval_line"
+                :key="'line_' + index + '_' + i"
+              >|</span>
+            </template>
+            <template v-if="item.moreActionList">
+              <span class="interval_line" v-if="item.actionList && item.actionList.length > 0">|</span>
+              <a
+                class="btn"
+                @mouseenter="mouseenter($event, item.moreActionList, scope.row)"
+                @mouseleave="mouseleave"
+              >更多</a>
+            </template>
+          </div>
+          <div v-else-if="item.type === 'button'" class="row_action">
+            <a
+              class="btn warn"
+              v-text="scope.row[item.prop]"
+              @click.stop="item.callback && item.callback(scope.row)"
+            ></a>
+          </div>
+          <div v-else-if="item.type === 'tag'" class="table_tag">
+            <template v-for="(item, index) in scope.row[item.prop]">
+              <el-tag
+                v-if="index <= 1 || tag_flag_arr[scope.$index] == 1"
+                :key="'tag_' + index"
+              >{{ item }}</el-tag>
+            </template>
+          </div>
+          <div v-else-if="item.type === 'chart'" class="charts">
+            <sparkline :indicatorStyles="spIndicatorStyles1">
+              <sparklineCurve
+                :refLineStyles="spRefLineStyles3"
+                :refLineType="false"
+                :data="scope.row[item.prop]"
+                :limit="scope.row[item.prop].length"
+                :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
+              />
+            </sparkline>
+          </div>
+          <div v-else-if="item.type === 'image'" class="img_content">
+            <img :src="item.getImage && item.getImage(scope.row)" :width="item.size" />
+          </div>
+          <div v-else-if="item.type === 'image-tooltip'" class="img_content">
+            <el-tooltip
+              effect="dark"
+              :content="
+                String(item.getTooltip ? item.getTooltip(scope.row) : item.tooltip)
+              "
+              placement="top"
+            >
+              <img :src="item.getImage && item.getImage(scope.row)" :width="item.size" />
+            </el-tooltip>
+          </div>
+          <div
+            v-else-if="
+              item.type === 'tooltip' &&
+                item.getLength &&
+                item.getLength(scope.row) > 1
+            "
+          >
+            <el-tooltip placement="right-start" popper-class="apass_table_tooltip">
+              <div slot="content" v-html="item.getContent && item.getContent(scope.row)"></div>
+              <span
+                v-text="(item.getText && item.getText(scope.row)) + '..'"
+                style="text-decoration: underline;color: #515fe7;"
+              ></span>
+            </el-tooltip>
+          </div>
+          <span
+            v-else-if="item.type === 'hot-index'"
+            class="hot_index"
+            :class="'index_' + scope.row.hotIndex"
+            v-text="'TOP' + scope.row.hotIndex"
+          ></span>
+          <span class="sort_table" v-else-if="item.sortable">
+            <span>{{ getPercent(scope.row[item.prop]) }}</span>
+          </span>
+          <span
+            v-else-if="item.type === 'selected-icon'"
+            class="selected_icon"
+            :class="{
+              selected: scope.row[item.prop],
+            }"
+          >
+            <span></span>
+          </span>
+          <span
+            v-else-if="item.type === 'html'"
+            class="table_html"
+            v-html="
+              item.getHtml ? item.getHtml(scope.row) : scope.row[item.prop]
+            "
+          ></span>
+          <el-tooltip
+            v-else-if="item.type === 'popover'"
+            placement="top"
+            popper-class="apass_table_tooltip"
+            :content="String(scope.row[item.prop])"
+          >
+            <span>{{ spanSlice(scope.row[item.prop], item.num) }}</span>
+          </el-tooltip>
+          <div v-else-if="item.type === 'state'">
+            <div
+              class="switch_back"
+              @click="changeState(scope.row)"
+              :style="scope.row[item.prop] == 1 ? 'background-color: #8796cf;' : 'background-color: #999;'"
+            >
+              <div v-if="scope.row[item.prop] != 1" class="dolt"></div>
+              <span>{{ scope.row[item.prop] == 1 ? "有效" : "无效" }}</span>
+              <div v-if="scope.row[item.prop] == 1" class="dolt"></div>
+            </div>
+          </div>
+          <span
+            v-else
+            v-text="
+              item.getText ? item.getText(scope.row) : scope.row[item.prop]
+            "
+          ></span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <ul
+      ref="moreActionList"
+      class="more_action_list"
+      :style="moreActionStyle"
+      @mouseenter="enterMoreActionList"
+      @mouseleave="leaveMoreActionList"
+      v-show="showMoreActionList"
+    >
+      <li
+        v-for="(item, index) in moreActionList"
+        :key="'more_' + index"
+        @click="item.callback"
+        v-text="item.label"
+      ></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    header: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: String,
+      default: null,
+    },
+    rowClassName: {
+      type: Function,
+      default: null,
+    },
+    select_show: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      tag_flag_arr: [],
+      spCurveStyles2: {
+        stroke: "#515fe7",
+        fill: "#515fe7",
+        // fill: '#d2d6f8'
+      },
+      spCurveStyles3: {
+        stroke: "#37c299",
+        fill: "#37c299",
+        // fill: '#c8ebe4'
+      },
+      // 指示器样式
+      spIndicatorStyles1: false,
+      spRefLineStyles3: {
+        stroke: "#d14",
+        strokeOpacity: 0,
+        strokeDasharray: "2, 2",
+      },
+      moreActionList: [],
+      showMoreActionList: false,
+      moreActionStyle: {
+        top: 0,
+        left: 0,
+      },
+    };
+  },
+  watch: {
+    data: {
+      handler(val) {
+        console.log(val);
+        this.toggleSelection(val);
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.tag_flag_arr = Array.from(
+      { length: this.data.length },
+      (item, index) => (item = 0)
+    );
+  },
+  methods: {
+    toggleSelection(rows) {
+      let self = this;
+      console.log(self.$refs.multipleTable);
+      rows.forEach((row) => {
+        if (row.sort == 1) {
+          console.log(row);
+          self.$nextTick(function () {
+            self.$refs.multipleTable.toggleRowSelection(row, true);
+          });
+        }
+      });
+    },
+    changeTag(index, val) {
+      this.$set(this.tag_flag_arr, index, val);
+    },
+    sortChange(value) {
+      this.$emit("sort-change", value);
+    },
+    rowClick(value) {
+      this.$emit("row-click", value);
+    },
+    getPercent(num) {
+      return Math.round(num * 100) + "%";
+    },
+    mouseenter($event, moreActionList, row) {
+      let _self = this;
+
+      _self.moreActionList = [];
+      _self.showMoreActionList = true;
+      _self.moreActionList = moreActionList
+        .filter((item) => {
+          if (item.showRule) {
+            return item.showRule(row);
+          } else {
+            return true;
+          }
+        })
+        .map((item) => ({
+          id: row.id,
+          label: item.label,
+          callback() {
+            _self.showMoreActionList = false;
+            _self.moreActionList = [];
+
+            item.callback && item.callback(row);
+          },
+        }));
+
+      _self.$nextTick(() => {
+        let targetInfo = $event.target.getBoundingClientRect();
+        let containerInfo = _self.$refs.moreActionList.getBoundingClientRect();
+
+        _self.moreActionStyle = {
+          top: targetInfo.y + targetInfo.height + 15 + "px",
+          left:
+            targetInfo.x - (containerInfo.width - targetInfo.width) / 2 + "px",
+        };
+      });
+    },
+    mouseleave() {
+      this.showMoreActionList = false;
+    },
+    enterMoreActionList() {
+      this.showMoreActionList = true;
+    },
+    leaveMoreActionList() {
+      this.showMoreActionList = false;
+    },
+    //全选
+    selectAll(rows) {
+      let select = [];
+      if (rows && rows.length) {
+        select = rows;
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+      this.$emit("selectnum", { select, rows });
+    },
+    select(select, rows) {
+      this.$emit("selectnum", { select, rows });
+    },
+    spanSlice(span, num) {
+      if (span) {
+        if (span.length > num) {
+          return span.slice(0, num) + "..";
+        } else {
+          return span;
+        }
+      } else {
+        return "";
+      }
+    },
+    changeState(row) {
+      console.log(row);
+      this.$emit("resetData");
+    },
+    cleanSel() {
+      this.$refs.multipleTable.clearSelection();
+      this.$emit("selectnum", { select: [], rows: [] });
+    },
+  },
+};
+</script>
+
+<style>
+.apass_table .el-table th > .cell {
+  color: #1a2236;
+}
+.table_tag .el-tag {
+  background-color: #58617a;
+  color: #fff;
+  display: inline-block;
+  height: 22px;
+  padding: 0 5px;
+  line-height: 22px;
+  font-size: 12px;
+  border-radius: 4px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.tagclo {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 22px;
+  cursor: pointer;
+  background-size: contain;
+  margin-top: -3px;
+}
+.charts {
+  position: relative;
+}
+.charts .use {
+  position: absolute;
+  bottom: 0;
+  right: -10px;
+  font-size: 12px;
+  color: rgba(26, 34, 54, 1);
+}
+.apass_table_tooltip {
+  font-size: 12px;
+  line-height: 20px;
+}
+.hot_index {
+  font-family: "Arial";
+  font-style: italic;
+  font-weight: 800;
+  font-size: 16px;
+  color: #b9bab5;
+}
+.hot_index.index_1 {
+  color: #d9ac64;
+}
+.hot_index.index_2 {
+  color: #c3c4c0;
+}
+.hot_index.index_3 {
+  color: #ba6e40;
+}
+.sort_table {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sort_table > span {
+  flex-shrink: 0;
+}
+.sort_table > span:nth-child(1) {
+  flex-grow: 1;
+  text-align: right;
+}
+.sort_table > span:nth-child(2) {
+  width: 30%;
+  margin-left: 5px;
+  text-align: left;
+}
+</style>
+
+<style scoped>
+.img_content {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.selected_icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #e3e5ef;
+  padding: 2px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 50%;
+}
+.selected_icon > span {
+  display: none;
+  width: 100%;
+  height: 100%;
+  background-color: #e56600;
+  border-radius: 50%;
+}
+.selected_icon.selected > span {
+  display: block;
+}
+.more_action_list {
+  position: fixed;
+}
+.more_action_list > li {
+  padding: 5px 20px;
+  background-color: #0f2683;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  cursor: pointer;
+  position: relative;
+}
+.more_action_list > li:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.more_action_list > li:first-child::before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  right: calc(50% - 20px);
+  width: 40px;
+  height: 20px;
+  /* background-color: red; */
+}
+.more_action_list > li:first-child::after {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: calc(50% - 7px);
+  border-top: 0 solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 14px solid #0f2683;
+  border-left: 7px solid transparent;
+}
+.more_action_list > li:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.more_action_list > li:hover {
+  background-color: #3f4f9c;
+}
+.more_action_list > li:first-child:hover::after {
+  border-bottom: 14px solid #3f4f9c;
+}
+.btn {
+  color: #2b4695;
+  font-weight: 600;
+}
+.interval_line {
+  margin: 0 10px;
+}
+.switch_back {
+  width: 60px;
+  height: 22px;
+  margin: 0 10px;
+  padding: 2px;
+  border-radius: 15px;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.switch_back span {
+  line-height: 20px;
+  padding: 0 4px;
+}
+.dolt {
+  width: 18px;
+  height: 18px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+</style>
diff --git a/src/components/new-com/inlineForm.vue b/src/components/new-com/inlineForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..91c9d0428f9ebb8470a72a5290ec601502039bbf
--- /dev/null
+++ b/src/components/new-com/inlineForm.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline formsearch d_ui_form">
+    <el-form-item
+      :label="item.label"
+      v-for="(item,index) in data"
+      :key="index+500"
+      :prop="item.key"
+    >
+      <el-input
+        v-if="item.type == 'input'"
+        class="d_search_input"
+        v-model="formInline[item.key]"
+        :placeholder="item.placeholder"
+      ></el-input>
+      <el-date-picker
+        v-if="item.type == 'daterange'"
+        v-model="formInline[item.key]"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <el-select
+        v-if="item.type == 'select'"
+        v-model="formInline[item.key]"
+        :placeholder="item.placeholder"
+      >
+        <el-option v-for="(it,idx) in item.arr" :key="idx+600" :label="it.label" :value="it.value"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button class="primary_btn" type="primary" @click="onSubmit">查询</el-button>
+      <el-button class="defaule_btn" @click="remove_data">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: ["data"],
+  components: {},
+  data() {
+    return {
+      formInline: {},
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    var temp = {};
+    this.data.forEach((e) => {
+      temp[e.key] = "";
+    });
+    this.formInline = temp;
+  },
+  mounted() {},
+  methods: {
+    onSubmit() {
+      this.$emit("serach", this.formInline);
+    },
+    remove_data() {
+      this.$refs["formInline"].resetFields();
+      this.$emit("serach", "");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.primary_btn {
+  width: 100px;
+  background-color: #515fe7;
+  color: #e6ebfe;
+}
+.defaule_btn {
+  width: 100px;
+  background-color: #c3caf8;
+  color: #0f2683;
+}
+</style>
+<style>
+.formsearch .el-form-item {
+  /* margin-left: 50px; */
+  margin-left: 30px;
+}
+.formsearch .el-form-item:nth-last-of-type(1) {
+  position: absolute;
+  right: -210px;
+}
+.formsearch .el-form-item .el-form-item__label {
+  color: #242c43;
+  font-weight: 600;
+}
+.d_search_input.el-input {
+  width: 200px;
+}
+</style>
+<style scoped>
+.formsearch {
+  position: relative;
+  width: calc(100% - 220px);
+}
+</style>
diff --git a/src/components/new-com/tableBtn.vue b/src/components/new-com/tableBtn.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1acdebdd2459ae76706427b6b3b4ee59a13d78ad
--- /dev/null
+++ b/src/components/new-com/tableBtn.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="tab_btns">
+    <div
+      class="btn"
+      v-for="(item, index) in data"
+      :key="index + 100"
+      @click="clickFunc(item.func)"
+      :style="{
+        float: item.position,
+        backgroundColor: item.type == 'warn' ? '#ad3a4a' : '',
+      }"
+      :class="item.position == 'right' ? 'left_marg' : ''"
+    >
+      {{ item.label }}
+    </div>
+    <span class="selectnum"
+      >已选择
+      <span style="color: #242c43; font-weight: 600">{{ num }}</span> 项</span
+    >
+    <span class="clean" @click="clean">清空</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["data", "num"],
+  components: {},
+  data() {
+    return {};
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    clickFunc(type) {
+      this.$emit(type);
+    },
+    clean() {
+      this.$emit("clean");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.btn {
+  height: 40px;
+  line-height: 40px;
+  background-color: #2b4695;
+  border-radius: 8px;
+  padding: 0 30px;
+  float: left;
+  color: #fefefe;
+  cursor: pointer;
+}
+.selectnum {
+  /* float: right; */
+  line-height: 40px;
+  margin: 0 30px;
+  color: #8890a7;
+}
+.clean {
+  /* float: right; */
+  text-decoration: underline;
+  color: #2b4695;
+  line-height: 40px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.left_marg {
+  margin-left: 10px;
+}
+.tab_btns {
+  position: relative;
+  margin-bottom: 25px;
+}
+.tab_btns::after {
+  content: "";
+  position: absolute;
+  width: calc(100% + 40px);
+  height: 1px;
+  background-color: #e3e5ef;
+  left: -20px;
+  bottom: -20px;
+}
+</style>
+<style>
+.from_content1 .el-input__inner {
+  background-color: #f7f8f9;
+}
+.el-date-editor.el-range-editor .el-range-input {
+  background-color: #f7f8f9;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/user/questions-answers/community.vue b/src/pages/user/questions-answers/community.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2370d99448914e1d7e2b232c96ebc01cf5068252
--- /dev/null
+++ b/src/pages/user/questions-answers/community.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="community">
+    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+      <el-breadcrumb-item :to="{ path: '/user' }">{{
+        $t("lang.personal_center")
+      }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{
+        $t("lang.my_questions_and_answers")
+      }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="from_content1 form_input_block">
+      <inline-form
+        class="form"
+        :data="form_data"
+        @serach="get_search_list"
+      ></inline-form>
+    </div>
+    <div class="from_content form_list_block">
+      <table-btn
+        class="from_content_btn"
+        :data="btn_data"
+        :num="num"
+        @deleteData="deleteData"
+        @clean="clean"
+      ></table-btn>
+      <apass-table
+        class="from_content_table"
+        height="calc(100% - 20px)"
+        ref="outtreetable"
+        @selectnum="selectnum"
+        v-if="tableData.length"
+        :data="tableData"
+        :header="table_header"
+      ></apass-table>
+      <list-pagination
+        v-if="tableData.length"
+        :total="total_list"
+        :page-sizes="[50, 10]"
+        :page-size="currentlimit"
+        :current-page="currentPage"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      ></list-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import inlineForm from "@/components/new-com/inlineForm";
+import tableBtn from "@/components/new-com/tableBtn";
+import apassTable from "@/components/new-com/apassTable";
+import ListPagination from "@/components/comments-pagination";
+import apassDialog from "@/components/apass-dialog";
+export default {
+  components: {
+    inlineForm,
+    tableBtn,
+    apassTable,
+    ListPagination,
+    apassDialog,
+  },
+  data() {
+    return {
+      search_text: "",
+      tableData: [
+        {
+          user_id: "100021李想李想李想李想李想李想李想李想李想李想",
+          user_name: "李想李想李想李想李想李想李想李想李想李想",
+          user_type: 1,
+          oid: "f49afc8a-e4a5-4f70-8192-bbe2bb36945f",
+          org_name: "山西省应急管理厅-应急物资处",
+          gender: 2,
+          shared_state: 2,
+          state: 2,
+          operate_user_name: "",
+          operate_time: "2020-08-27 14:46:40",
+          sort: 1,
+        },
+      ],
+      table_header: [],
+      total_list: 0,
+      currentPage: 1,
+      currentlimit: 50,
+      form_data: [
+        {
+          label: "问题搜索",
+          type: "input",
+          placeholder: "请输入问题标题或内容关键词",
+          key: "name",
+        },
+        {
+          label: "发布人搜索",
+          type: "input",
+          placeholder: "请输入发布人名称",
+          key: "name",
+        },
+        {
+          label: "发布时间",
+          type: "daterange",
+          placeholder: "请选择",
+          key: "name",
+        },
+      ],
+      btn_data: [
+        {
+          position: "left",
+          label: "批量删除",
+          type: "warn",
+          func: "deleteData",
+        },
+      ],
+      num: 0,
+      selected_date: [],
+      role_type: "",
+    };
+  },
+  watch: {
+    $route(to, from) {
+      this.changeState(to.path);
+    },
+  },
+  created() {
+    this.getlist();
+  },
+  methods: {
+    getRouter() {
+      let this_route = this.$route.path;
+      this.changeState(this_route);
+    },
+    edit_data(val) {},
+    deleteData() {
+      if (this.selected_date.length) {
+        this.$refs.deletelog.show();
+      } else {
+        this.$message.error("请先选择要删除的数据");
+      }
+    },
+    handleSizeChange(val) {
+      console.log(val);
+      this.currentlimit = val;
+      this.currentPage = 1;
+      this.getlist();
+    },
+    handleCurrentChange(val) {
+      console.log(val);
+      this.currentPage = val;
+      this.getlist();
+    },
+    //获取列表数据
+    getlist() {},
+    get_search_list(val) {
+      console.log(val);
+      if (val) {
+        this.search_text = val.name;
+        this.role_type = val.type;
+      } else {
+        this.search_text = "";
+      }
+      this.currentPage = 1;
+      this.getlist();
+    },
+    clean() {
+      this.$refs.outtreetable.cleanSel();
+    },
+    selectnum({ select, rows }) {
+      this.num = select.length;
+      this.selected_date = select;
+    },
+    changeState(val) {
+      if (val == "/user/questions") {
+        this.table_header = [
+          {
+            prop: "user_id",
+            label: "问题标题",
+            align: "left",
+            type: "html",
+            getHtml: (str) => {
+              return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
+            },
+          },
+          {
+            prop: "user_id",
+            label: "问题内容",
+            align: "left",
+            type: "html",
+            getHtml: (str) => {
+              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
+            },
+          },
+          {
+            prop: "operate_time",
+            label: "回复数",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "浏览数",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "发布人",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "发布时间",
+            align: "center",
+            width: 200,
+          },
+          {
+            label: "操作",
+            type: "buttons",
+            width: "120px",
+            align: "center",
+            actionList: [
+              {
+                label: "修改",
+                callback: this.edit_data,
+              },
+            ],
+          },
+        ];
+      } else {
+        this.table_header = [
+          {
+            prop: "user_id",
+            label: "回答内容",
+            align: "left",
+            type: "html",
+            getHtml: (str) => {
+              return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
+            },
+          },
+          {
+            prop: "user_id",
+            label: "问题标题",
+            align: "left",
+            type: "html",
+            getHtml: (str) => {
+              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
+            },
+          },
+          {
+            prop: "user_id",
+            label: "问题内容",
+            align: "left",
+            type: "html",
+            getHtml: (str) => {
+              return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.user_id}">${str.user_id}</span>`;
+            },
+          },
+          {
+            prop: "operate_time",
+            label: "回复数",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "浏览数",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "回复人",
+            align: "center",
+          },
+          {
+            prop: "operate_time",
+            label: "回复时间",
+            align: "center",
+            width: 200,
+          },
+          {
+            label: "操作",
+            type: "buttons",
+            width: "120px",
+            align: "center",
+            actionList: [
+              {
+                label: "修改",
+                callback: this.edit_data,
+              },
+            ],
+          },
+        ];
+      }
+    },
+  },
+  mounted() {
+    this.getRouter();
+  },
+};
+</script>
+
+<style scoped>
+.community {
+  height: calc(100%);
+  overflow: hidden;
+}
+.form_list_block {
+  height: calc(100% - 180px);
+}
+</style>
diff --git a/src/pages/user/questions-answers/my-qa.vue b/src/pages/user/questions-answers/my-qa.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c2c4bbf296d65ef22503d5516a2927a17be7f29
--- /dev/null
+++ b/src/pages/user/questions-answers/my-qa.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="my_qa">
+    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+      <el-breadcrumb-item :to="{ path: '/user' }">{{
+        $t("lang.personal_center")
+      }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{
+        $t("lang.my_questions_and_answers")
+      }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <BlockRadius class="info_block user_qa">
+      <div class="left_user">
+        <div class="img_head">
+          <img src="@/assets/imgs/shop_img_banner_test.png" />
+        </div>
+        <div class="left_word">
+          <p class="left_name">设计师设计啥都往</p>
+          <p class="left_role">普通用户开发者</p>
+        </div>
+      </div>
+      <div class="right_list">
+        <div class="user_qa_card my_q">
+          <img src="@/assets/imgs/ic_wodetiwen.png" />
+          <div class="card_word">
+            <p class="card_name">我的提问</p>
+            <p>
+              {{ helper.numberFormat(870000) }}<span class="card_wan">万</span>
+            </p>
+          </div>
+        </div>
+        <div class="user_qa_card my_a">
+          <img src="@/assets/imgs/ic_wodehuida.png" />
+          <div class="card_word">
+            <p class="card_name">我的提问</p>
+            <p>
+              {{ helper.numberFormat(870000) }}<span class="card_wan">万</span>
+            </p>
+          </div>
+        </div>
+        <div class="user_qa_card my_view">
+          <img src="@/assets/imgs/ic_liulanshu.png" />
+          <div class="card_word">
+            <p class="card_name">我的提问</p>
+            <p>
+              {{ helper.numberFormat(870000) }}<span class="card_wan">万</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </BlockRadius>
+    <BlockRadius class="block_down info_block">
+      <el-tabs v-model="activeName" @tab-click="clickTab">
+        <el-tab-pane label="我的提问" name="0"> </el-tab-pane>
+        <el-tab-pane label="我的回答" name="1"> </el-tab-pane>
+        <el-tab-pane label="被删除" name="2"> </el-tab-pane>
+      </el-tabs>
+      <div class="qa_list apaas_scroll">
+        <div v-for="(item, index) in data_list" :key="index" class="qa_cell">
+          <div class="qa_cell_in">
+            <div :class="activeName == 2 ? 'qa_is_del' : 'qa_init'">
+              <p v-if="activeName == 1" class="cell_answer">为什么感知服务提示我无法注册？</p>
+              <p :class="activeName == 0 ? 'cell_title' : 'cell_ans_title'">为什么感知服务提示我无法注册？</p>
+              <p class="cell_cont">
+                为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？为什么感知服务提示我无法注册？
+              </p>
+              <p v-if="activeName == 2" class="cell_other">
+                <span>删除时间：2020-10-01 18:00:00</span>
+                <span>删除人：管理员</span>
+                <span>删除理由：帖子内容含违规广告信息</span>
+              </p>
+              <p v-else class="cell_other">
+                <span>2020-10-01 18:00:00</span>
+                <span>评论 12</span>
+                <span>阅读 1,024</span>
+              </p>
+              
+            </div>
+            <div class="qa_del">
+              <img
+                src="@/assets/imgs/msg_icon_shanchu.png"
+                @click="delectItem(index)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <section class="com-pagination">
+        <div class="com_page_total">共3个条目</div>
+        <div class="com_page_item">
+          <div class="com_page_num">
+            <div>每页条数：</div>
+            <div class="com_page_num_sel">
+              <el-select
+                v-model="pagination.rowsPerPage"
+                placeholder="请选择"
+                size="small"
+                @change="handleSizeChange"
+              >
+                <el-option
+                  v-for="item in pageOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="com_page_control">
+            <el-button
+              icon="el-icon-arrow-left"
+              circle
+              size="mini"
+              @click="handleCurrentChange(-1)"
+              :disabled="pagination.page == 1"
+            ></el-button>
+            &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
+              Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage)
+            }}页
+            <el-button
+              icon="el-icon-arrow-right"
+              circle
+              size="mini"
+              @click="handleCurrentChange(1)"
+              :disabled="
+                pagination.page >=
+                Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage)
+              "
+            ></el-button>
+          </div>
+        </div>
+      </section>
+    </BlockRadius>
+  </div>
+</template>
+
+<script>
+import BlockRadius from "@/components/general/block-radius";
+import helper from "@/services/helper.js";
+export default {
+  components: {
+    BlockRadius,
+  },
+  data: () => ({
+    helper,
+    activeName: "0",
+    pagination: {
+      rowsPerPage: 10,
+      page: 1,
+    },
+    total: 123,
+    pageOptions: [
+      {
+        value: "10",
+        label: "10",
+      },
+      {
+        value: "20",
+        label: "20",
+      },
+      {
+        value: "50",
+        label: "50",
+      },
+    ],
+    data_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
+  }),
+  watch: {},
+  methods: {
+    clickTab() {},
+    handleSizeChange(val) {
+      this.pagination.rowsPerPage = val;
+      this.refreshData();
+    },
+    handleCurrentChange(val) {
+      this.pagination.page += val;
+      this.refreshData();
+    },
+    refreshData() {
+      this.$emit("refresh", this.pagination);
+    },
+    pageResize() {
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      // console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = listWidth / rowCardNum - 1 + "px";
+      }
+      // console.log(this.$refs.commodityCardIn);
+    },
+    delectItem(index) {
+      console.log(index);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.my_qa {
+  /* height: calc(100% - 20px); */
+  height: calc(100%);
+  overflow: hidden;
+}
+.info_block {
+  margin: 0 20px 20px;
+  position: relative;
+}
+.block_down {
+  height: calc(100% - 214px);
+}
+.user_qa {
+  height: 120px;
+  display: flex;
+  justify-content: space-between;
+}
+.left_user {
+  width: 300px;
+  display: flex;
+  justify-content: space-between;
+}
+.img_head {
+  width: 76px;
+  height: 76px;
+  margin: 2px 10px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: solid 2px #e3e5ef;
+}
+.left_word {
+  width: 200px;
+  padding-top: 5px;
+}
+.left_name {
+  color: #1d1e20;
+  font-size: 22px;
+  line-height: 44px;
+}
+.left_role {
+  color: #8890a7;
+  font-size: 14px;
+}
+.right_list {
+  width: 60%;
+  min-width: 750px;
+  max-width: 1000px;
+  display: flex;
+  justify-content: space-between;
+}
+.user_qa_card {
+  width: 31%;
+  height: 80px;
+  border-radius: 10px 10px 10px 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 34px;
+  font-family: Arial;
+  font-weight: bold;
+  text-align: right;
+}
+.my_q {
+  background-color: #fcefd6;
+  color: #ef9433;
+}
+.my_a {
+  background-color: #e7fdfc;
+  color: #25bdb1;
+}
+.my_view {
+  background-color: #e5f4fe;
+  color: #38aef9;
+}
+.card_word {
+}
+.card_name {
+  color: #242c43;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: normal;
+}
+.card_wan {
+  font-size: 14px;
+}
+.qa_list {
+  height: calc(100% - 114px);
+  overflow: auto;
+}
+.qa_cell {
+  padding: 0 20px;
+  border-radius: 12px;
+}
+.qa_cell:hover {
+  background-color: #f8f9fd;
+}
+.qa_cell_in {
+  height: 100%;
+  padding: 20px 0;
+  border-bottom: #f4f7fc 2px solid;
+  display: flex;
+  justify-content: space-between;
+}
+.qa_cell:nth-last-child(1) .qa_cell_in {
+  border-bottom: none;
+}
+.qa_init {
+  width: calc(100% - 80px);
+}
+.qa_init .cell_answer {
+  color: #1a2236;
+  font-size: 16px;
+  margin: 0 0 16px;
+  cursor: pointer;
+}
+.qa_init .cell_ans_title {
+  color: #58617a;
+  font-size: 16px;
+  margin: 0 0 8px;
+  cursor: pointer;
+}
+.qa_init .cell_title {
+  color: #242c43;
+  font-size: 16px;
+  margin: 0 0 8px;
+  cursor: pointer;
+}
+.qa_init .cell_cont {
+  color: #8890a7;
+  font-size: 14px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.qa_init .cell_other {
+  color: #58617a;
+  font-size: 14px;
+  margin: 14px 0 0;
+}
+.qa_init .cell_other span {
+  display: inline-block;
+  padding: 0 16px 0 0;
+  position: relative;
+}
+.qa_init .cell_other span::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 11px;
+  background-color: #e6ebfe;
+  right: 5px;
+  top: 4px;
+}
+.qa_init .cell_other span:nth-last-child(1)::after {
+  content: none;
+}
+.qa_is_del {
+  width: calc(100% - 80px);
+}
+.qa_is_del .cell_answer {
+  color: #a9aec0;
+  font-size: 16px;
+  margin: 0 0 16px;
+  cursor: pointer;
+}
+.qa_is_del .cell_ans_title {
+  color: #a9aec0;
+  font-size: 16px;
+  margin: 0 0 8px;
+  cursor: pointer;
+}
+.qa_is_del .cell_title {
+  color: #a9aec0;
+  font-size: 16px;
+  margin: 0 0 8px;
+  cursor: pointer;
+}
+.qa_is_del .cell_cont {
+  color: #a9aec0;
+  font-size: 14px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.qa_is_del .cell_other {
+  color: #8890a7;
+  font-size: 14px;
+  margin: 14px 0 0;
+}
+.qa_is_del .cell_other span {
+  display: inline-block;
+  padding: 0 16px 0 0;
+  position: relative;
+}
+.qa_is_del .cell_other span::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 11px;
+  background-color: #e6ebfe;
+  right: 5px;
+  top: 4px;
+}
+.qa_is_del .cell_other span:nth-last-child(1)::after {
+  content: none;
+}
+.qa_del {
+  width: 70px;
+  justify-content: center;
+  align-items: center;
+  display: none;
+}
+.qa_cell:hover .qa_del {
+  display: flex;
+}
+.qa_del img {
+  cursor: pointer;
+}
+</style>
+<style scoped>
+.com-pagination {
+  margin-top: 20px;
+  font-size: 14px;
+  padding: 0 5%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.com_page_num {
+  width: 140px;
+  margin-right: 20px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.com_page_num_sel {
+  width: 50px;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+}
+.com_page_item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.commodity_card {
+}
+.commodity_card_list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
+</style>
+<style>
+.com_page_control .el-button {
+  border: 0;
+}
+.com_page_num .el-input__inner {
+  border: 0;
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 42aba9219c41a80518322387c3bd2ba56c021404..2d26c8e1887a11346fb83bcea2e9df0d3f4b82fc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -419,6 +419,21 @@ export default new Router({
               name: "orderDetail",
               component: () => import("@/pages/user/order/order_detail"),
             },
+            {
+              path: "/user/my_qa", // 我的问答
+              name: "myQA",
+              component: () => import("@/pages/user/questions-answers/my-qa"),
+            },
+            {
+              path: "/user/questions", // 提问列表
+              name: "questions",
+              component: () => import("@/pages/user/questions-answers/community"),
+            },
+            {
+              path: "/user/answers", // 回答列表
+              name: "answers",
+              component: () => import("@/pages/user/questions-answers/community"),
+            },
           ],
         }, // 个人中心
         {