no message
This commit is contained in:
A1300399510
parent
c27e4a5420
commit
b91bbd90fc
242
css/index.css
242
css/index.css
@ -1,9 +1,17 @@
|
||||
.index-footer {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
header.page-header .box .tab-list .item.pitch {
|
||||
color: #FDDF6D !important;
|
||||
}
|
||||
header.page-header .box .tab-list .item.pitch::after {
|
||||
background-color: #fddf6d !important;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Webkit浏览器（Chrome、Safari等） */
|
||||
*::-webkit-scrollbar {
|
||||
@ -59,6 +67,7 @@
|
||||
#answer-app {
|
||||
min-width: 1200px;
|
||||
overflow-x: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
#answer-app header {
|
||||
background: #f6f6f6;
|
||||
@ -102,6 +111,17 @@
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#answer-app header .top .right .searchInput .clear-search .cross-circle-black {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#answer-app header .top .right .searchInput .clear-search .halving-line {
|
||||
width: 1px;
|
||||
height: 13px;
|
||||
background-color: #ebebeb;
|
||||
margin: 0 17px;
|
||||
}
|
||||
#answer-app header .top .right .searchInput .history-box {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
@ -168,6 +188,7 @@
|
||||
}
|
||||
#answer-app header .tab-box {
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
z-index: 1;
|
||||
background-color: #f6f6f6;
|
||||
padding: 5px 0;
|
||||
@ -243,7 +264,7 @@
|
||||
font-size: 14px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
padding-right: 20px;
|
||||
margin-right: 20px;
|
||||
border-right: 1px solid #ebebeb;
|
||||
@ -343,6 +364,9 @@
|
||||
color: #000000;
|
||||
line-height: 22px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .issue-title .issue em {
|
||||
color: #ff0000;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .answer {
|
||||
color: #555;
|
||||
height: 22px;
|
||||
@ -350,6 +374,9 @@
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .answer em {
|
||||
color: #ff0000;
|
||||
}
|
||||
#answer-app .main .list-box .list .item .content .bottom {
|
||||
font-size: 12px;
|
||||
justify-content: flex-end;
|
||||
@ -401,6 +428,28 @@
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
#answer-app .main .details-area-box .loading-bj {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
#answer-app .main .details-area-box .loading-bj svg {
|
||||
width: 100px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box {
|
||||
width: 688px;
|
||||
@ -443,6 +492,7 @@
|
||||
padding-top: 24px;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
word-break: break-all;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .details-issue .icon {
|
||||
background-color: #72db86;
|
||||
@ -555,6 +605,7 @@
|
||||
line-height: 26px;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .answer-text img {
|
||||
max-width: 100%;
|
||||
@ -642,12 +693,16 @@
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box {
|
||||
position: relative;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .report-box {
|
||||
display: flex;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 0;
|
||||
@ -658,6 +713,15 @@
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
color: #7F7F7F;
|
||||
cursor: pointer;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
right: 0;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .comment-icon {
|
||||
width: 14px;
|
||||
@ -844,6 +908,14 @@
|
||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit {
|
||||
position: relative;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box {
|
||||
width: 628px;
|
||||
border: 1px solid #ebebeb;
|
||||
@ -857,7 +929,7 @@
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 40px 35px 42px;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
}
|
||||
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box .transmit-title {
|
||||
font-weight: 650;
|
||||
@ -1464,6 +1536,7 @@
|
||||
margin-right: 12px;
|
||||
}
|
||||
#answer-app .i-answer-box .question-middle .question-textarea {
|
||||
height: 412px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -1555,3 +1628,166 @@
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
.alert-form {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.alert-form * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.alert-form .reports {
|
||||
height: 440px;
|
||||
}
|
||||
.alert-form .reports .radio-area {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.alert-form .reports .radio-area .radio-area-item {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
}
|
||||
.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
.alert-form .reports .radio-area .radio-area-item .radio-area-frame {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.alert-form .reports .radio-area .radio-area-item .radio-area-frame::after {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
.alert-form .el-checkbox-group {
|
||||
font-size: 0;
|
||||
}
|
||||
.alert-form .comments {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 740px;
|
||||
height: 440px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px 8px 6px 6px;
|
||||
}
|
||||
.alert-form .comments .text-box {
|
||||
position: relative;
|
||||
}
|
||||
.alert-form .comments .text-num {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.alert-form .comments .form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 34px 30px 40px;
|
||||
}
|
||||
.alert-form .comments .form textarea {
|
||||
height: 172px;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
padding: 18px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #F7F7F7;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 22px;
|
||||
}
|
||||
.alert-form .head {
|
||||
padding: 0 18px 0 30px;
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.alert-form .head .close {
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alert-form .footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.alert-form .footer button[type=button] {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.alert-form .footer button {
|
||||
border: 1px #999999 solid;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
width: 128px;
|
||||
height: 38px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alert-form .footer button[type=submit] {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
color: #fff;
|
||||
}
|
||||
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
}
|
||||
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__inner:hover {
|
||||
border-color: #50E3C2;
|
||||
}
|
||||
.alert-form .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #50E3C2;
|
||||
}
|
||||
|
||||
302
css/index.less
302
css/index.less
@ -1,9 +1,21 @@
|
||||
.index-footer {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
header.page-header .box .tab-list .item.pitch {
|
||||
color: #FDDF6D !important;
|
||||
}
|
||||
|
||||
header.page-header .box .tab-list .item.pitch::after {
|
||||
background-color: rgba(253, 223, 109, 1) !important;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-style: normal;
|
||||
// font-style: normal;
|
||||
}
|
||||
|
||||
/* Webkit浏览器（Chrome、Safari等） */
|
||||
@ -72,6 +84,7 @@
|
||||
#answer-app {
|
||||
min-width: 1200px;
|
||||
overflow-x: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
header {
|
||||
background: rgba(246, 246, 246, 1);
|
||||
@ -121,6 +134,21 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
.cross-circle-black {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.halving-line {
|
||||
width: 1px;
|
||||
height: 13px;
|
||||
background-color: #ebebeb;
|
||||
margin: 0 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-box {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
@ -201,6 +229,7 @@
|
||||
|
||||
.tab-box {
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
z-index: 1;
|
||||
background-color: #f6f6f6;
|
||||
padding: 5px 0;
|
||||
@ -295,7 +324,7 @@
|
||||
font-size: 14px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
|
||||
.search-keyword-cross {
|
||||
width: 14px;
|
||||
@ -440,6 +469,10 @@
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 22px;
|
||||
|
||||
em {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -449,6 +482,10 @@
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
em {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
@ -520,6 +557,32 @@
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.loading-bj {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
svg {
|
||||
width: 100px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-box {
|
||||
width: 688px;
|
||||
@ -567,6 +630,7 @@
|
||||
padding-top: 24px;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
word-break: break-all;
|
||||
|
||||
// .icon-boxb {
|
||||
// border: 4px solid #fbfbfb;
|
||||
@ -714,6 +778,7 @@
|
||||
line-height: 26px;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 20px;
|
||||
word-break: break-all;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@ -819,15 +884,22 @@
|
||||
|
||||
.comments-header-right {
|
||||
.menu-box {
|
||||
position: relative;
|
||||
|
||||
&:hover .report-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.report-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 0;
|
||||
@ -838,6 +910,16 @@
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
color: #7F7F7F;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1074,8 +1156,24 @@
|
||||
&.operate-transmit {
|
||||
position: relative;
|
||||
// z-index: 1;
|
||||
// &:hover {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// .transmit-box {
|
||||
// display: flex;
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
.transmit-box {
|
||||
// display: none;
|
||||
width: 628px;
|
||||
// height: 300px;
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
@ -1090,7 +1188,7 @@
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 40px 35px 42px;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
|
||||
.transmit-title {
|
||||
font-weight: 650;
|
||||
@ -1870,7 +1968,7 @@
|
||||
}
|
||||
|
||||
.question-textarea {
|
||||
// height: 412px;
|
||||
height: 412px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -1984,3 +2082,197 @@
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-form {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.alert-form * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.alert-form .reports {
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.alert-form .reports .radio-area {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.radio-area-item {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
.radio-area-frame {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
|
||||
&::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-area-frame {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
&::after {
|
||||
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #FFF;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
-webkit-transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: -webkit-transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-form .el-checkbox-group {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.alert-form .comments {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 740px;
|
||||
height: 440px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px 8px 6px 6px;
|
||||
}
|
||||
|
||||
.alert-form .comments .text-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.alert-form .comments .text-num {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.alert-form .comments .form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 34px 30px 40px;
|
||||
}
|
||||
|
||||
.alert-form .comments .form textarea {
|
||||
height: 172px;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
padding: 18px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #F7F7F7;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.alert-form .head {
|
||||
padding: 0 18px 0 30px;
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.alert-form .head .close {
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-form .footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert-form .footer button[type=button] {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.alert-form .footer button {
|
||||
border: 1px #999999 solid;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
width: 128px;
|
||||
height: 38px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-form .footer button[type=submit] {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #50E3C2;
|
||||
border-color: #50E3C2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__inner:hover {
|
||||
border-color: #50E3C2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #50E3C2;
|
||||
}
|
||||
BIN
img/cross-circle-black.png
Normal file
BIN
img/cross-circle-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
102
index.html
102
index.html
@ -9,8 +9,6 @@
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<script src="./js/vue@3.2.36.js"></script>
|
||||
<script src="https://app.gter.net/bottom?tpl=header&menukey=ask"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -21,6 +19,10 @@
|
||||
<div class="right flexacenter flex1">
|
||||
<div class="searchInput flexacenter">
|
||||
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
|
||||
<div class="clear-search flexacenter" v-if="isSearchMode">
|
||||
<img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png">
|
||||
<div class="halving-line"></div>
|
||||
</div>
|
||||
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()">
|
||||
<div class="history-box" v-if="historicalSearchState" @click.stop="">
|
||||
<div class="history-title">历史搜索</div>
|
||||
@ -42,37 +44,38 @@
|
||||
</div>
|
||||
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
|
||||
<div class="tab-list flexacenter">
|
||||
<div class="item flexcenter" :class="{'pitch': typePitch === null }" @click="cutType(null)">All</div>
|
||||
<div class="item flexcenter" :class="{'pitch': typePitch === null }" @click="cutType(null)">All</div>
|
||||
<template v-for="(item,index) in typeList" :key="index">
|
||||
<div class="halving-line">|</div>
|
||||
<div class="item flexcenter" :class="{'pitch': typePitch === it['id'] }" v-for="(it,i) in item" :key="it" @click="cutType(it.id)">{{ it['name'] }}</div>
|
||||
<div class="item flexcenter" :class="{'pitch': typePitch == it['id'] }" v-for="(it,i) in item" :key="it" @click="cutType(it.id)">{{ it['name'] }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="main flexflex" :class="{'mode-list': type == 'list'}">
|
||||
<div class="list-box" @scroll="handleListScroll">
|
||||
<div class="main-header " :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
|
||||
<div class="search-keyword flexacenter" v-if="isSearchMode" @click="handleClickClear()">
|
||||
<div class="flex1 ellipsis">{{ keywordText }}</div>
|
||||
<div class="ellipsis">{{ keywordText }}</div>
|
||||
<img class="search-keyword-cross" src="./img/cross-circle-icon.png">
|
||||
</div>
|
||||
<div class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
|
||||
</div>
|
||||
<div class="list" id="list" :style="listStyle()">
|
||||
<div class="list" id="list" :style="listStyle()">{{ list.lenght }}
|
||||
<div class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index,item['content'])" :class="{'pitch': index === pitchIndex,'upLevel': index === pitchIndex - 1}" @click.stop="getDetails(item['uniqid'],index)">
|
||||
<img class="dot" src="./img/dot.svg">
|
||||
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
|
||||
<div class="issue-title flexcenter">
|
||||
<img class="hot-icon" src="./img/hot-icon.png">
|
||||
<img class="hot-icon" v-if="item['ishot']" src="./img/hot-icon.png">
|
||||
<div class="issue ellipsis flex1" v-html="item['title']"></div>
|
||||
</div>
|
||||
<div class="answer ellipsis" v-html="item['content']"></div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="quantity">{{ item['answers'] == 0 ? '暂无回答' : `共${ item['answers'] }个回答` }}</div>
|
||||
<div class="longString"></div>
|
||||
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index,true)">我来回答</div>
|
||||
<template v-if="type=='list'">
|
||||
<div class="longString"></div>
|
||||
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index,true)">我来回答</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,8 +88,16 @@
|
||||
</div>
|
||||
|
||||
<div class="details-area-box flexflex" v-if="type == 'details'" @scroll="handleDetailsScroll">
|
||||
<!-- 加载 -->
|
||||
<div class="loading-bj flexcenter" v-if="detailLoading">
|
||||
<svg t="1642133548066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2597" width="200" height="200">
|
||||
<path d="M512 249.5c-22.5 0-37.5-15-37.5-37.5V99.5c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5V212c0 22.5-15 37.5-37.5 37.5z m0 712.5c-22.5 0-37.5-15-37.5-37.5V812c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5v112.5c0 22.5-15 37.5-37.5 37.5zM212 549.5H99.5C77 549.5 62 534.5 62 512s15-37.5 37.5-37.5H212c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m712.5 0H812c-22.5 0-37.5-15-37.5-37.5s15-37.5 37.5-37.5h112.5c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m-153.75-150c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5L849.5 272c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5l-97.5 56.25c-3.75 3.75-11.25 3.75-18.75 3.75z m-615 356.25c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5l97.5-56.25c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5L174.5 752c-7.5 3.75-15 3.75-18.75 3.75z m506.25-465c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5L684.5 137c11.25-18.75 33.75-22.5 52.5-15 18.75 11.25 22.5 33.75 15 52.5L695.75 272c-7.5 11.25-22.5 18.75-33.75 18.75z m-356.25 615c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5l56.25-97.5c11.25-15 33.75-22.5 52.5-11.25s22.5 33.75 15 52.5L339.5 887c-7.5 11.25-22.5 18.75-33.75 18.75z m-52.5-506.25c-7.5 0-15 0-18.75-3.75L137 339.5c-18.75-11.25-26.25-33.75-15-52.5s33.75-22.5 52.5-15l97.5 56.25c18.75 11.25 22.5 33.75 11.25 52.5-3.75 11.25-18.75 18.75-30 18.75z m615 356.25c-7.5 0-11.25 0-18.75-3.75L752 695.75c-18.75-11.25-22.5-33.75-15-52.5 11.25-18.75 33.75-22.5 52.5-15L887 684.5c18.75 11.25 22.5 33.75 15 52.5-7.5 11.25-18.75 18.75-33.75 18.75zM362 290.75c-11.25 0-26.25-7.5-33.75-18.75L272 174.5c-7.5-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15l56.25 97.5c7.5 18.75 3.75 41.25-15 48.75-7.5 3.75-11.25 7.5-18.75 7.5z m356.25 615c-11.25 0-26.25-7.5-33.75-18.75l-56.25-97.5c-11.25-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15L752 849.5c11.25 18.75 3.75 41.25-15 52.5-7.5 3.75-11.25 3.75-18.75 3.75z" p-id="2598" fill="#26d79f"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="details-box flexflex">
|
||||
<div class="transmit-mask" v-if="questionsTransmitMaskState" @click="closeAllTransmitState()"></div>
|
||||
<!-- 转发的蒙版 -->
|
||||
<!-- <div class="transmit-mask" v-if="questionsTransmitMaskState" @click="closeAllTransmitState()"></div> -->
|
||||
|
||||
<div class="close-box">
|
||||
<div class="close-circle flexcenter" @click="closeDetailMode()">
|
||||
@ -102,7 +113,7 @@
|
||||
<div class="hint" @click="handleAnswerText" v-html="detailsInfo['content']"></div>
|
||||
<div class="info-box flexacenter">
|
||||
<div class="user-info flexacenter">
|
||||
<img class="avatar" :src="detailsInfo['avatar']">
|
||||
<img class="avatar" v-if="detailsInfo['avatar']" :src="detailsInfo['avatar']">
|
||||
<div class="user-name">{{ detailsInfo['nickname'] }}</div>
|
||||
</div>
|
||||
<div class="time">{{ handleDate(detailsInfo['publicationdate']) }}</div>
|
||||
@ -118,10 +129,10 @@
|
||||
<img class="operate-icon operate-collect-icon" :src="detailsIscollection == 0 ? './img/collect-icon.png' : './img/collect-icon-colours.svg'">
|
||||
收藏
|
||||
</div>
|
||||
<div class="operate-item flexacenter operate-transmit" @click="closeTransmitState()">
|
||||
<div class="operate-item flexacenter operate-transmit" @mouseenter.stop="closeTransmitState()" @mouseleave.stop="closeAllTransmitState()">
|
||||
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
||||
转发
|
||||
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 1;">
|
||||
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 10;">
|
||||
<div class="transmit-left transmit-web">
|
||||
<div class="transmit-title">转发网页版</div>
|
||||
<div class="transmit-content">
|
||||
@ -196,7 +207,7 @@
|
||||
<img class="operate-icon operate-collect-icon" :src="item['iscollection'] == 1 ? './img/collect-icon-colours.svg' : './img/collect-icon.png'">
|
||||
{{ item['collectionnum'] == 0 ? '收藏' : item['collectionnum'] }}
|
||||
</div>
|
||||
<div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)">
|
||||
<div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)" @mouseenter.stop="handleAnswerTransmitList(index)" @mouseleave.stop="closeAllTransmitState()">
|
||||
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
||||
转发
|
||||
<div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop="">
|
||||
@ -238,13 +249,13 @@
|
||||
<img class="comments-avatar" :src="it['avatar']">
|
||||
<div class="comments-username">{{ it['nickname'] }}</div>
|
||||
<div class="comments-time">{{ handleDate(it['timestamp']) }}</div>
|
||||
<!-- <div class="comments-identity">提问者</div> -->
|
||||
<div class="comments-identity" v-if="item['isauthor']">提问者</div>
|
||||
<div class="comments-identity" v-if="it['questioner'] == 1">提问者</div>
|
||||
<div class="comments-identity" v-else-if="it['isauthor'] == 1">回答者</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<div class="menu-box flexacenter" @click="handleMenuState(index,ind)">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
||||
<div class="report-box flexcenter" v-if="false">举报</div>
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind)" src="./img/comment-icon-gray.svg">
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(it['token'],index,ind)">
|
||||
@ -271,11 +282,13 @@
|
||||
<div class="comments-username">{{ ite['nickname'] }}</div>
|
||||
<div class="comments-time">{{ handleDate(ite['timestamp']) }}</div>
|
||||
<!-- <div class="comments-identity">提问者</div> -->
|
||||
<div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div>
|
||||
<div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div>
|
||||
</div>
|
||||
<div class="comments-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<div class="menu-box flexacenter" @click="handleMenuState(index,ind,i)">
|
||||
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
||||
<div class="report-box flexcenter" v-if="false">举报</div>
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind,i)" src="./img/comment-icon-gray.svg">
|
||||
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite['token'],index,ind,i)">
|
||||
@ -298,7 +311,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] != it['child'].length" @click="alsoCommentsData(index,ind)">
|
||||
<div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] > it['child'].length" @click="alsoCommentsData(index,ind)">
|
||||
<div class="">还有{{ it['childnum'] - 1 }}条回复</div>
|
||||
<img class="also-icon" src="./img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
@ -336,7 +349,7 @@
|
||||
手机查看该问答
|
||||
|
||||
<div class="QRCode-pop flexcenter">
|
||||
<img class="offer-mini-QRcode" src="./img/offer-mini-QRcode.png">
|
||||
<img class="offer-mini-QRcode" :src="detailShare['qrcode']">
|
||||
<div class="QRCode-hint flexacenter">
|
||||
<img class="QRCode-img" src="./img/give-sweep.png" />
|
||||
微信扫一扫
|
||||
@ -344,7 +357,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -406,7 +418,7 @@
|
||||
<div class="centre flexflex flex1">
|
||||
<div class="info flexacenter">
|
||||
<div class="name">{{ item['nickname'] }}</div>
|
||||
<div class="time">{{ item['publicationdate'] }}</div>
|
||||
<div class="time">{{ handleDate(item['publicationdate']) }}</div>
|
||||
</div>
|
||||
<div class="title ellipsis" v-html="item['content']"></div>
|
||||
<div class="text ellipsis">提问：{{ item['title'] }}</div>
|
||||
@ -469,16 +481,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 我要提问 -->
|
||||
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp">
|
||||
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp" @click="cutQuestionsSetp(0)">
|
||||
<!-- 第一步 -->
|
||||
<!-- <div class="choosing-theme" v-if="questionsSetp == 1">
|
||||
<div class="title">选择提问所属主题</div>
|
||||
<div class="theme-list flexflex">
|
||||
<div class="theme-item flexcenter" v-for="item in questionsTypeList" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="choosing-theme" v-if="questionsSetp == 1">
|
||||
<div class="choosing-theme" v-if="questionsSetp == 1" @click.stop="">
|
||||
<div class="title">选择提问所属主题</div>
|
||||
<div class="theme-list flexflex">
|
||||
<div class="theme-stair-box flexflex" v-for="(item,index) in questionsTypeList">
|
||||
@ -489,7 +494,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 第二步 -->
|
||||
<div class="issue-form" v-else>
|
||||
<div class="issue-form" v-else @click.stop="">
|
||||
<!-- <img class="issue-bj" src="./img/issue-bj.png"> -->
|
||||
<img class="issue-bj" src="./img/issue-bj.svg">
|
||||
<div class="flexcenter q">Q</div>
|
||||
@ -538,7 +543,7 @@
|
||||
<div class="question-icon flexcenter">Q</div>
|
||||
<div class="flex1">{{ IAnswerInfo['title'] }}</div>
|
||||
</div>
|
||||
<div class="question-replenish" v-html="IAnswerInfo['content']"></div>
|
||||
<div class="question-replenish" v-if="IAnswerInfo['content']" v-html="IAnswerInfo['content']"></div>
|
||||
</div>
|
||||
<div class="question-middle flexflex">
|
||||
<div class="question-icon flexcenter">A</div>
|
||||
@ -576,6 +581,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 举报 -->
|
||||
<div class="alert-form" v-show="alertShow">
|
||||
<div class="comments reports">
|
||||
<div class="head">
|
||||
<span style="display: flex;align-items: center;"><img style="width:25px;margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png?v=4.2.08_331040000">举报投诉</span>
|
||||
<div class="close icon-close iconfont" @click="alertShow=false"></div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="radio-area flexacenter">
|
||||
<div class="radio-area-item flexacenter" :class="{'pitch': checkList.includes(s)}" v-for="s in reasonList" @click="selectRadio(s)">
|
||||
<div class="radio-area-frame"></div>{{ s }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
||||
<div class="text-num">{{ 200 - alertText.length}}</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button type="button" @click="alertShow=false">取消</button>
|
||||
<button type="submit" :disabled="checkList.length==0" @click="alertSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
294
js/index.js
294
js/index.js
@ -1,7 +1,5 @@
|
||||
// 提交问题
|
||||
// 切换头部分类
|
||||
// 转发的链接和title
|
||||
// 图片上传有一些错误
|
||||
// 评论的回答者 提问者
|
||||
// 列表 hot标签
|
||||
|
||||
Object.assign(window, Vue)
|
||||
const forumApp = Vue.createApp({
|
||||
@ -13,16 +11,16 @@ const forumApp = Vue.createApp({
|
||||
onMounted(() => {
|
||||
getUrlParams()
|
||||
getUserData()
|
||||
getList()
|
||||
getListClass()
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
getHistoricalSearchList()
|
||||
|
||||
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
});
|
||||
|
||||
@ -40,7 +38,10 @@ const forumApp = Vue.createApp({
|
||||
initParams = params
|
||||
|
||||
if (params['uniqid']) getDetails(params['uniqid'])
|
||||
if (params['keyword']) keyword.value = params['keyword']
|
||||
if (params['tid']) typePitch.value = params['tid']
|
||||
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取当前url
|
||||
@ -122,7 +123,7 @@ const forumApp = Vue.createApp({
|
||||
|
||||
getList()
|
||||
|
||||
replaceState()
|
||||
deleteState(['keyword'])
|
||||
}
|
||||
|
||||
let historicalSearchState = ref(false) // 历史记录弹窗状态
|
||||
@ -136,7 +137,8 @@ const forumApp = Vue.createApp({
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight) getList()
|
||||
// console.log("type.value == 'list'", type.value == 'list', scrollTop + clientHeight, scrollHeight);
|
||||
// if (scrollTop + clientHeight >= scrollHeight - 40 && type.value == 'list') getList()
|
||||
|
||||
// 列表下 滚动到顶部 触发类型的固定状态
|
||||
if (scrollTop > 115 && type.value == 'list') tabListFixeState.value = true
|
||||
@ -213,10 +215,19 @@ const forumApp = Vue.createApp({
|
||||
let detailsIsmyself = ref(0) // 详情信息
|
||||
let detailsToken = '' // 详情信息
|
||||
let detailShare = ref({}) // 详情信息
|
||||
let detailLoading = ref(false) // 详情加载
|
||||
|
||||
|
||||
// 获取详情
|
||||
const getDetails = (uniqid, index, isOpenAnswer) => {
|
||||
// uniqid = "fubm5CnD05qj" // 标记一下
|
||||
if (detailLoading.value) return
|
||||
detailLoading.value = true
|
||||
|
||||
// uniqid = "fubm5CnD05qj" // 标记一下 8yr1m1fOH5CS
|
||||
detailsInfo.value = {}
|
||||
answerList.value = []
|
||||
answerPage.value = 0
|
||||
|
||||
$ajax("/api/details", { uniqid }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
@ -231,29 +242,7 @@ const forumApp = Vue.createApp({
|
||||
type.value = 'details'
|
||||
|
||||
if (index !== null && index !== undefined) cut(index)
|
||||
else {
|
||||
let targetList = [...list.value]
|
||||
let valve = false
|
||||
targetList.forEach((element, index) => {
|
||||
|
||||
if (element['uniqid'] == uniqid) {
|
||||
cut(index)
|
||||
valve = true
|
||||
}
|
||||
})
|
||||
|
||||
if (!valve) {
|
||||
list.value.unshift({
|
||||
answers: data.info['answers'],
|
||||
content: data.info['content'],
|
||||
publicationdate: data.info['publicationdate'],
|
||||
title: data.info['title'],
|
||||
uniqid,
|
||||
})
|
||||
cut(0)
|
||||
}
|
||||
|
||||
}
|
||||
else calculateListIndex(data.info, uniqid)
|
||||
|
||||
answerList.value = []
|
||||
answerPage.value = 1
|
||||
@ -264,9 +253,41 @@ const forumApp = Vue.createApp({
|
||||
if (isOpenAnswer) openIAnswer()
|
||||
|
||||
replaceState({ uniqid })
|
||||
}).finally(() => {
|
||||
detailLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
const calculateListIndex = (info, uniqid) => {
|
||||
let targetList = [...list.value]
|
||||
if (targetList.length == 0 && isSearchMode.value == false) {
|
||||
setTimeout(() => calculateListIndex(info, uniqid), 200)
|
||||
return
|
||||
}
|
||||
let valve = false
|
||||
targetList.forEach((element, index) => {
|
||||
if (element['uniqid'] == uniqid) {
|
||||
cut(index)
|
||||
valve = true
|
||||
}
|
||||
})
|
||||
|
||||
if (!valve) {
|
||||
let content = ""
|
||||
if (info['content'].indexOf('<img') == -1) content = info['content']
|
||||
list.value.unshift({
|
||||
answers: info['answers'],
|
||||
content,
|
||||
publicationdate: info['publicationdate'],
|
||||
title: info['title'],
|
||||
uniqid,
|
||||
})
|
||||
cut(0)
|
||||
}
|
||||
}
|
||||
|
||||
let answerList = ref([]) // 回答列表数据
|
||||
let answerPage = ref(1) // 回答列表页数
|
||||
let answerLoading = false // 回答列表加载
|
||||
@ -406,14 +427,14 @@ const forumApp = Vue.createApp({
|
||||
content: IAnswerInfo.value['text'],
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
answerList.value = []
|
||||
answerPage.value = 1
|
||||
getAnswerList()
|
||||
closeIAnswer()
|
||||
isNeedNewAnswersData = true
|
||||
handleMsg('success', res['message'] || '操作成功')
|
||||
|
||||
if (!IAnswerInfo.value['token']) myCount.value['answer']++
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
@ -449,7 +470,11 @@ const forumApp = Vue.createApp({
|
||||
getAnswerCommentPublic(index).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
let slice3 = data.data.slice(3)
|
||||
console.log(answerList.value[index]['commentList'], "commentList");
|
||||
|
||||
answerList.value[index]['commentList'] = answerList.value[index]['commentList'].concat(data.data.slice(3))
|
||||
answerList.value[index]['commentList'] = merged
|
||||
handleMsg('success', res['message'] || '操作成功')
|
||||
})
|
||||
}
|
||||
@ -496,6 +521,7 @@ const forumApp = Vue.createApp({
|
||||
|
||||
if (i != null) {
|
||||
let targetData = {
|
||||
id: data['commentid'],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
@ -507,9 +533,10 @@ const forumApp = Vue.createApp({
|
||||
}
|
||||
|
||||
targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)
|
||||
|
||||
targetAnswerList[index]['commentList'][ind]['childnum']++
|
||||
} else if (ind != null) {
|
||||
let targetData = {
|
||||
id: data['commentid'],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
@ -518,6 +545,7 @@ const forumApp = Vue.createApp({
|
||||
...data,
|
||||
}
|
||||
targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)
|
||||
targetAnswerList[index]['commentList'][ind]['childnum']++
|
||||
|
||||
} else {
|
||||
let targetData = {
|
||||
@ -529,12 +557,10 @@ const forumApp = Vue.createApp({
|
||||
child: []
|
||||
}
|
||||
targetAnswerList[index]['commentList'].unshift(targetData)
|
||||
|
||||
}
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
console.log("targetAnswerList", targetAnswerList);
|
||||
handleMsg('success', res['message'] || '操作成功')
|
||||
})
|
||||
}
|
||||
@ -601,7 +627,7 @@ const forumApp = Vue.createApp({
|
||||
const alsoCommentsData = (index, ind) => {
|
||||
const targetAnswerList = [...answerList.value]
|
||||
const parentid = targetAnswerList[index]['commentList'][ind]['id']
|
||||
const token = targetAnswerList[index]['commentList'][ind]['token']
|
||||
const token = targetAnswerList[index]['token']
|
||||
|
||||
$ajax("/api/comment/childrenList", {
|
||||
token,
|
||||
@ -610,12 +636,12 @@ const forumApp = Vue.createApp({
|
||||
page: 1,
|
||||
childlimit: 1,
|
||||
}).then(res => {
|
||||
console.log("res", res);
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
targetAnswerList[index]['commentList'][ind]['child'] = targetAnswerList[index]['commentList'][ind]['child'].concat(data.data)
|
||||
let merged = [...targetAnswerList[index]['commentList'][ind]['child'], ...data.data.filter(item2 => !targetAnswerList[index]['commentList'][ind]['child'].find(item1 => item1.id == item2.id))];
|
||||
|
||||
targetAnswerList[index]['commentList'][ind]['child'] = merged
|
||||
answerList.value = targetAnswerList
|
||||
})
|
||||
}
|
||||
@ -646,9 +672,13 @@ const forumApp = Vue.createApp({
|
||||
let myCollectionList = ref([]) // 我的收藏列表
|
||||
let myCollectionCount = ref(0) // 我的收藏数量
|
||||
let myCollectionPage = 1 // 我的收藏页数
|
||||
let myCollectionLading = false // 我的收藏加载中
|
||||
|
||||
// 获取我的收藏
|
||||
const getMyCollection = () => {
|
||||
if (myCollectionPage == 0) return
|
||||
if (myCollectionPage == 0 || myCollectionLading) return
|
||||
myCollectionLading = true
|
||||
|
||||
$ajax("/api/user/collect", {
|
||||
limit: 20,
|
||||
page: myCollectionPage,
|
||||
@ -663,7 +693,7 @@ const forumApp = Vue.createApp({
|
||||
|
||||
if (myCollectionList.value.length != data['count']) myCollectionPage++
|
||||
else myCollectionPage = 0
|
||||
})
|
||||
}).finally(() => myCollectionLading = false)
|
||||
}
|
||||
|
||||
// 取消收藏
|
||||
@ -681,19 +711,18 @@ const forumApp = Vue.createApp({
|
||||
// 监听 我的收藏滚动到底部
|
||||
const handleCollectionScroll = (e) => {
|
||||
const el = e.target;
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
|
||||
getMyCollection()
|
||||
}
|
||||
|
||||
let myAnswerList = ref([]) // 我的回答数据
|
||||
let myAnswerCount = ref(0) // 我的回答数量
|
||||
let myAnswerPage = 1
|
||||
|
||||
let myAnswerloadimg = false
|
||||
// 获取我的回答
|
||||
const getMyAnswer = () => {
|
||||
if (myAnswerPage == 0) return
|
||||
|
||||
if (myAnswerPage == 0 || myAnswerloadimg) return
|
||||
myAnswerloadimg = true
|
||||
$ajax("/api/user/answer", {
|
||||
limit: 20,
|
||||
page: myAnswerPage,
|
||||
@ -713,14 +742,14 @@ const forumApp = Vue.createApp({
|
||||
myType.value = 'answers'
|
||||
isNeedNewAnswersData = false
|
||||
|
||||
})
|
||||
}).finally(() => myAnswerloadimg = false)
|
||||
}
|
||||
|
||||
// 我的回答 的滚动到底部事件
|
||||
const handleAnswersScroll = e => {
|
||||
const el = e.target;
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
|
||||
getMyAnswer()
|
||||
}
|
||||
|
||||
@ -753,9 +782,11 @@ const forumApp = Vue.createApp({
|
||||
let myQuestionsList = ref([]) // 我的提问数据
|
||||
let myQuestionsCount = ref(0) // 我的提问数量
|
||||
let myQuestionsPage = 0 // 我的提问页数
|
||||
let myQuestionsloading = false // 我的提问页数
|
||||
// 获取我的提问
|
||||
const getMyQuestions = () => {
|
||||
if (myQuestionsPage == 0) return
|
||||
if (myQuestionsPage == 0 || myQuestionsloading) return
|
||||
myQuestionsloading = true
|
||||
$ajax("/api/user/questions", {
|
||||
limit: 20,
|
||||
page: myQuestionsPage,
|
||||
@ -769,14 +800,15 @@ const forumApp = Vue.createApp({
|
||||
if (myQuestionsList.value.length != data['count']) myQuestionsPage++
|
||||
else myQuestionsPage = 0
|
||||
|
||||
})
|
||||
}).finally(() => myQuestionsloading = false)
|
||||
}
|
||||
|
||||
// 我的提问 的滚动到底部 事件
|
||||
const handleQuestionsScroll = e => {
|
||||
const el = e.target;
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
console.log(el.scrollHeight - el.scrollTop >= el.clientHeight + 10);
|
||||
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
|
||||
getMyQuestions()
|
||||
}
|
||||
|
||||
@ -850,15 +882,23 @@ const forumApp = Vue.createApp({
|
||||
|
||||
// 发布问题
|
||||
const postingIssue = () => {
|
||||
// 还没有分类
|
||||
console.log("发布问题", questionsObj.value);
|
||||
|
||||
$ajax("/api/publish/questionsSubmit", questionsObj.value).then(res => {
|
||||
console.log("res", res);
|
||||
|
||||
myCount.value['questions']++
|
||||
if (res.code == 200) {
|
||||
myCount.value['questions']++
|
||||
questionsSetp.value = 0
|
||||
questionsObj.value = {
|
||||
token: "",
|
||||
title: "",
|
||||
content: "",
|
||||
tags: "",
|
||||
tid: "",
|
||||
anonymous: 0,
|
||||
}
|
||||
handleMsg('success', res['message'] || '操作成功')
|
||||
let data = res.data
|
||||
// calculateListIndex(res)
|
||||
getDetails(data['uniqid'])
|
||||
return
|
||||
}
|
||||
handleMsg('error', res['message'] || '刷新重试！！！')
|
||||
})
|
||||
@ -942,20 +982,37 @@ const forumApp = Vue.createApp({
|
||||
const $ajax = (url, data) => {
|
||||
url = url.indexOf('//') > -1 ? url : baseURL + url;
|
||||
return new Promise(function (resolve, reject) {
|
||||
// var xhr = new XMLHttpRequest()
|
||||
// xhr.responseType = "json"
|
||||
// xhr.withCredentials = true
|
||||
// xhr.onreadystatechange = function () {
|
||||
// if (xhr.readyState === 4) {
|
||||
// if (xhr.status === 200) {
|
||||
// if (xhr.response.code != 200) handleMsg('error', xhr.response['message'] || '报错了，请重试！！！')
|
||||
// resolve(xhr.response)
|
||||
// } else {
|
||||
// if (xhr.response.status == 401) window.location.href = 'https://passport.gter.net';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// xhr.open("POST", url, true)
|
||||
// xhr.setRequestHeader("Content-Type", "application/json")
|
||||
// xhr.setRequestHeader("authorization", "63c9bef150557f9c90e93f98d2e2497e")
|
||||
// xhr.send(JSON.stringify(data))
|
||||
|
||||
axios.post(url, data, {
|
||||
emulateJSON: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
// authorization: "9l3vfdx6h5xhu2hbw4fv5ygbog1dhtly"
|
||||
// authorization: "194cdc367ed40c938f2eaaf1c6dfa5ff"
|
||||
authorization: "63c9bef150557f9c90e93f98d2e2497e"
|
||||
authorization: "efd8239b3f9ab533ac59311096738096"
|
||||
}
|
||||
}).then(function (res) {
|
||||
var data = null
|
||||
try {
|
||||
data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data;
|
||||
|
||||
if (data['code'] != 200) handleMsg('error', data['message'] || '报错了，请重试！！！')
|
||||
if (data['code'] == 401) window.location.href = 'https://passport.gter.net';
|
||||
|
||||
} catch (error) { }
|
||||
resolve(data)
|
||||
}).catch(err => {
|
||||
@ -965,7 +1022,7 @@ const forumApp = Vue.createApp({
|
||||
}
|
||||
|
||||
// 处理时间
|
||||
const handleDate = (dateTimeStamp) => {
|
||||
const handleDate = (dateTimeStamp = new Date()) => {
|
||||
dateTimeStamp = dateTimeStamp ? dateTimeStamp : null;
|
||||
var timestamp = new Date(dateTimeStamp)
|
||||
timestamp = timestamp.getTime()
|
||||
@ -1024,12 +1081,7 @@ const forumApp = Vue.createApp({
|
||||
|
||||
// 统计转发次数
|
||||
const countForwardingTimes = (token) => {
|
||||
console.log("token", token);
|
||||
|
||||
// return
|
||||
$ajax("/api/operate/share", { token }).then(res => {
|
||||
console.log("res", res);
|
||||
})
|
||||
$ajax("/api/operate/share", { token }).then()
|
||||
}
|
||||
|
||||
// 关闭详情模式
|
||||
@ -1042,9 +1094,7 @@ const forumApp = Vue.createApp({
|
||||
// 全部的启动到底部
|
||||
const handleListScroll = (e) => {
|
||||
const el = e.target;
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
|
||||
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return
|
||||
getList()
|
||||
}
|
||||
|
||||
@ -1052,31 +1102,23 @@ const forumApp = Vue.createApp({
|
||||
const handlePaste = (event) => {
|
||||
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
|
||||
for (const item of items) {
|
||||
console.log(item);
|
||||
if (item.type.indexOf('image') === 0) {
|
||||
// 如果包含图片，阻止默认行为
|
||||
event.preventDefault();
|
||||
handleMsg('warning', '上传图片中')
|
||||
const file = item.getAsFile();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
const base64 = e.target.result
|
||||
// console.log("base64", base64);
|
||||
uploadImg(base64).then(res => {
|
||||
const questionTextarea = document.querySelector(".question-textarea")
|
||||
const imgElements = questionTextarea.querySelectorAll("img");
|
||||
// console.log("imgElements1111", imgElements);
|
||||
if (imgElements.length == 0) {
|
||||
questionTextarea.innerHTML += `<img 1 src="${res.url}" data-aid="${res.aid}" />`
|
||||
handleInput()
|
||||
} else {
|
||||
imgElements.forEach(img => {
|
||||
// console.log("src", img.getAttribute("src"));
|
||||
// if (img.getAttribute("src") == base64) {
|
||||
if (img.getAttribute("data-aid") == null && img.getAttribute('data-custom') == null) {
|
||||
img.setAttribute("src", res.url);
|
||||
img.setAttribute("data-aid", res.aid);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let imgNode = document.createElement('img');
|
||||
imgNode.setAttribute('src', res.url);
|
||||
imgNode.setAttribute('data-aid', res.aid);
|
||||
questionTextarea.appendChild(imgNode);
|
||||
handleInput()
|
||||
handleMsg('warning', '上传成功')
|
||||
})
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
@ -1157,13 +1199,6 @@ const forumApp = Vue.createApp({
|
||||
const replaceState = (obj = {}) => {
|
||||
// 获取当前URL参数
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
|
||||
// 循环删除所有参数
|
||||
for (let key of params.keys()) {
|
||||
params.delete(key);
|
||||
}
|
||||
// 修改URL参数
|
||||
// params.set('paramName', 'paramValue');
|
||||
for (const key in obj) {
|
||||
params.set(key, obj[key]);
|
||||
}
|
||||
@ -1171,21 +1206,27 @@ const forumApp = Vue.createApp({
|
||||
// 替换当前URL，但不刷新页面
|
||||
window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
|
||||
}
|
||||
// 删除 url 参数的key
|
||||
const deleteState = (keys = []) => {
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
keys.forEach(key => {
|
||||
params.delete(key);
|
||||
})
|
||||
window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
|
||||
}
|
||||
|
||||
// 我的打开 详情
|
||||
const myOpenDetails = (value) => {
|
||||
getDetails(value['uniqid'])
|
||||
getDetails(value.data['uniqid'])
|
||||
myType.value = ""
|
||||
}
|
||||
|
||||
|
||||
// 详情页滚动事件
|
||||
const handleDetailsScroll = e => {
|
||||
// console.log("e", e);
|
||||
const el = e.target;
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
// console.log("底部");
|
||||
getAnswerList()
|
||||
}
|
||||
|
||||
@ -1196,9 +1237,17 @@ const forumApp = Vue.createApp({
|
||||
if (e.target.tagName === 'IMG') {
|
||||
var src = e.target.getAttribute('src');
|
||||
dialogSrc.value = src
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
}
|
||||
|
||||
// 大图的监听 esc 键盘按钮
|
||||
const handleKeydown = event => {
|
||||
if (event.key !== 'Escape') return
|
||||
dialogSrc.value = ""
|
||||
window.removeEventListener('keydown', handleKeydown) // 取消监听
|
||||
}
|
||||
|
||||
|
||||
// 切换顶部的 type
|
||||
const cutType = (id) => {
|
||||
@ -1206,12 +1255,56 @@ const forumApp = Vue.createApp({
|
||||
page = 1
|
||||
list.value = []
|
||||
type.value = 'list'
|
||||
pitchIndex.value = null
|
||||
if (id != null) {
|
||||
replaceState({ tid: id })
|
||||
deleteState(['uniqid'])
|
||||
} else deleteState(['tid', 'uniqid'])
|
||||
|
||||
getList()
|
||||
}
|
||||
|
||||
// 打开举报
|
||||
const handleMenuState = (index, ind, i) => {
|
||||
if (i === undefined) reportToken = answerList.value[index].commentList[ind]['token']
|
||||
else reportToken = answerList.value[index].commentList[ind]['child'][i]['token']
|
||||
alertShow.value = true
|
||||
}
|
||||
|
||||
// 举报 token
|
||||
let reportToken = ""
|
||||
const reasonList = ['广告', '辱骂', '重复发送', '不良信息', '其他']
|
||||
let checkList = ref([])
|
||||
let alertShow = ref(false)
|
||||
let alertText = ref("")
|
||||
const selectRadio = value => {
|
||||
const index = checkList.value.indexOf(value);
|
||||
if (index === -1) checkList.value.push(value);
|
||||
else checkList.value.splice(index, 1);
|
||||
}
|
||||
// 举报提交
|
||||
const alertSubmit = () => {
|
||||
checkList.value.push(alertText.value)
|
||||
$ajax("/api/operate/report", {
|
||||
message: checkList.value,
|
||||
token: reportToken,
|
||||
}).then(res => {
|
||||
checkList.value = []
|
||||
reportToken = ""
|
||||
alertShow.value = false
|
||||
handleMsg('success', '举报成功')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
handleMenuState,
|
||||
reasonList,
|
||||
checkList,
|
||||
alertShow,
|
||||
alertText,
|
||||
selectRadio,
|
||||
alertSubmit,
|
||||
cutType,
|
||||
dialogSrc,
|
||||
answerPage,
|
||||
@ -1242,6 +1335,7 @@ const forumApp = Vue.createApp({
|
||||
detailsIscollection,
|
||||
detailsIsmyself,
|
||||
detailShare,
|
||||
detailLoading,
|
||||
answerList,
|
||||
operateLike,
|
||||
operateCollect,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user