Skip to content

A
apaas-ui
Commit 90bb7ec1 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'ldx' into dev

parents f7e0e6d0 631715f7
Show whitespace changes
Inline Side-by-side
Showing with 1909 additions and 44 deletions
src/assets/css/index.css
View file @ 90bb7ec1
[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
src/assets/i18n/language-zh.js
View file @ 90bb7ec1
......@@ -7,6 +7,7 @@ export const lang = {
personal_center: "个人中心",
profile: "个人档案",
message_center: "消息中心",
my_questions_and_answers: "我的问答",
// unit of purchase duration
by_year: "按年",
......
src/components/new-com/apassTable.vue 0 → 100644
View file @ 90bb7ec1
<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>
src/components/new-com/inlineForm.vue 0 → 100644
View file @ 90bb7ec1
<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>
src/components/new-com/tableBtn.vue 0 → 100644
View file @ 90bb7ec1
<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
src/pages/user/questions-answers/community.vue 0 → 100644
View file @ 90bb7ec1
<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>
src/pages/user/questions-answers/my-qa.vue 0 → 100644
View file @ 90bb7ec1
<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
src/router/index.js
View file @ 90bb7ec1
......@@ -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"),
},
],
}, // 个人中心
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment