PC-questions-answersnuxt/css/indexVice.less
2025-01-17 17:19:18 +08:00

1096 lines
31 KiB
Plaintext

#answer-app {
.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 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;
&::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;
}
.bottom-tps {
font-weight: 400;
font-size: 12px;
color: #555;
text-align: center;
padding: 30px 0;
min-width: 508px;
}
.avatar-box {
flex-direction: column;
width: 140px;
height: 101px;
background-color: rgba(244, 248, 255, 1);
border: 1px solid rgba(220, 224, 234, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
position: absolute;
top: 30px;
z-index: 100;
.avatar-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
// background-color: rgba(0, 0, 0, 0.8);
z-index: -1;
cursor: auto;
}
.avatar-item {
font-size: 14px;
color: #333;
height: 50px;
cursor: pointer;
&:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
}
}
.avatar-icon {
width: 16px;
height: 16px;
margin-right: 5px;
}
}
.edit-answers {
width: 720px;
height: 400px;
background-color: rgba(255, 255, 255, 1);
// border: 1px solid rgba(235, 235, 235, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
position: relative;
display: flex;
flex-direction: column;
.close-icon {
width: 12px;
height: 12px;
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
}
.titletitle {
height: 64px;
border-bottom: 1px solid #ebebeb;
font-size: 14px;
color: #000000;
font-weight: 650;
padding-top: 20px;
padding-left: 20px;
}
.question-textarea {
display: block;
border: none;
outline: none;
width: 100%;
// height: 255px;
font-size: 14px;
color: #555555;
line-height: 26px;
resize: none;
padding: 20px;
flex: 1;
overflow: auto;
&.placeholder::after {
content: "输入图文内容回答提问(支持直接粘贴图片)";
color: #999;
}
img {
max-width: 100%;
}
}
}
.msg-container {
display: flex;
align-items: center;
line-height: 16px;
.iconfont {
margin-right: 5px;
}
}
.msg-enter-active {
animation: anim 0.5s;
}
.msg-leave-active {
animation: anim 0.5s reverse;
}
@keyframes anim {
0% {
opacity: 0;
transform: translate(-50%, -200%);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
.my-popover {
.popover-box {
width: 750px;
height: 616px;
max-height: 92vh;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
flex-direction: column;
padding-top: 30px;
position: relative;
.cross-icon {
position: absolute;
top: 12px;
right: 12px;
width: 12px;
height: 12px;
cursor: pointer;
}
.tab-list {
color: #aaa;
font-size: 16px;
margin-bottom: 30px;
.tab-item {
cursor: pointer;
.quantity {
margin-left: 10px;
}
&.pitch {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
.quantity {
font-weight: 400;
color: #555;
}
}
}
.long-string {
margin: 0 20px;
width: 1px;
height: 17px;
background-color: #d7d7d7;
}
}
.empty-box {
width: 690px;
height: 490px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 6px;
margin: 0 auto;
flex-direction: column;
.dot-list {
.item {
width: 8px;
height: 8px;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
.empty-icon {
width: 100px;
height: 100px;
margin-top: 10px;
margin-bottom: 15px;
}
.empty-hint {
font-size: 13px;
color: #7f7f7f;
line-height: 22px;
}
}
.content-box {
width: 690px;
height: 490px;
margin: 0 auto;
overflow: auto;
.icon {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-size: 13px;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
color: #fff;
margin-right: 17px;
&.q {
background-color: #72db86;
}
&.a {
background-color: #62b1ff;
}
}
.item {
padding: 20px 0;
border-bottom: 1px dotted #ebebeb;
cursor: pointer;
.centre {
.info {
font-size: 12px;
color: #555;
margin-bottom: 10px;
.time {
color: #aaa;
margin-left: 8px;
}
}
.titletitle {
color: #333333;
font-size: 14px;
// line-height: 22px;
min-height: 21px;
margin-bottom: 10px;
width: 532px;
img {
height: 80px;
}
}
.text {
font-size: 12px;
color: #aaaaaa;
width: 532px;
}
flex-direction: column;
}
.operate-box {
.state-box {
position: relative;
cursor: pointer;
.text {
font-size: 13px;
color: #333;
}
.arrows {
width: 8px;
height: 5px;
margin-left: 6px;
}
.state-popup {
position: absolute;
top: 28px;
right: 3px;
width: 140px;
height: 101px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
flex-direction: column;
z-index: 1;
.state-popup-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
// background-color: #000000;
z-index: -1;
}
.state-popup-item {
justify-content: space-between;
color: #555;
font-size: 14px;
padding: 0 10px;
&:hover {
color: #000000;
}
&.pitch {
color: #fa6b11;
.state-popup-icon {
display: block;
}
}
&:not(:last-of-type) {
border-bottom: 1px dotted #e3e3e3;
}
.state-popup-icon {
width: 11px;
height: 8px;
display: none;
}
}
}
}
.edit-icon {
width: 16px;
height: 16px;
cursor: pointer;
margin-left: 30px;
}
}
}
padding-right: 10px;
&.collect-list {
.item {
padding: 20px 0;
border-bottom: 1px dotted #ebebeb;
.delete-box {
.delete-icon {
cursor: pointer;
}
}
}
}
&.answers-list {
.item {
.centre {
}
}
}
&.questions-list {
.item {
.new-answer {
color: #f95d5d;
.long-string {
width: 1px;
height: 12px;
background-color: #d7d7d7;
margin: 0 8px;
}
}
}
}
}
}
}
.popover-mask {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
height: 100vh;
z-index: 1000;
}
.respond-add {
width: 30px;
height: 30px;
background-color: rgba(98, 177, 255, 1);
border-radius: 50%;
cursor: pointer;
position: relative;
&.angle {
&::after {
content: "";
background: #f6f6f6;
border: 1px solid #e4e7ed;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
border-top-left-radius: 2px;
width: 10px;
height: 10px;
position: absolute;
bottom: -17px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
z-index: 3000;
}
}
.respond-add-icon {
width: 14px;
height: 14px;
}
}
.respond-list-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.respond-pop-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
.respond-pop {
width: 600px;
height: 500px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 20px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
.respond-pop-title {
height: 50px;
display: flex;
justify-content: center;
border-bottom: 1px dotted rgba(215, 215, 215, 0.5);
align-items: center;
color: #555555;
position: relative;
font-size: 16px;
.respond-pop-amount {
margin: 0 8px;
font-weight: 650;
color: #000000;
}
.respond-title-icon {
position: absolute;
width: 20px;
right: 20px;
cursor: pointer;
}
}
.respond-list {
overflow: auto;
height: 450px;
&::-webkit-scrollbar-track {
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background-color: #0003;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
&::-webkit-scrollbar {
width: 6px;
}
.respond-item {
display: flex;
padding: 20px 0 0 20px;
&:not(:last-of-type) .respond-content {
border-bottom: 1px dotted rgba(215, 215, 215, 0.5);
}
.respond-code {
width: 60px;
height: 60px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
font-family: "emojifont";
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
cursor: pointer;
box-sizing: border-box;
&.pitch {
background-color: #f6f6bd;
border: 1px solid #ccd003;
}
}
.respond-content {
padding-bottom: 10px;
.respond-total {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 10px;
}
.user-item {
font-size: 14px;
color: #555555;
display: inline-flex;
margin-right: 20px;
margin-bottom: 10px;
align-items: center;
cursor: pointer;
.user-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 10px;
}
}
}
}
}
.respond-pop-no {
width: 100%;
height: 100%;
flex-direction: column;
position: relative;
.respond-title-icon {
position: absolute;
width: 20px;
top: 20px;
right: 20px;
cursor: pointer;
}
.respond-pop-no-icon {
width: 90px;
margin-bottom: 15px;
}
.respond-pop-no-text {
font-size: 13px;
color: #7f7f7f;
line-height: 22px;
}
}
}
}
.slit-pop-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.slit-pop-box {
width: 523px;
border: 1px solid #e5e5e5;
background-color: #fff;
border-radius: 11px;
padding: 60px 50px 48px 38px;
display: flex;
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
.slit-left {
width: 50px;
.slit-left-icon {
width: 50px;
height: 60px;
margin-top: -8px;
}
}
.slit-box {
flex: 1;
margin-left: 15px;
.slit-head {
display: flex;
justify-content: space-between;
height: 54px;
flex: 1;
flex-direction: column;
align-items: flex-start;
.slit-head-title {
font-weight: 650;
font-size: 20px;
color: #333;
width: 100%;
justify-content: space-between;
a {
font-weight: 100;
font-size: 13px;
text-decoration: underline !important;
}
}
.in-all {
font-size: 13px;
color: #7f7f7f;
> span {
color: #000;
font-weight: 650;
}
}
}
.coin-quantity {
display: flex;
align-items: center;
margin-bottom: 27px;
margin-top: 20px;
.coin-quantity-item {
width: 78px;
height: 46px;
border: 1px solid #d7d7d7;
background-color: #f0f2f5;
border-radius: 5px;
font-size: 20px;
color: #000;
font-weight: 650;
line-height: 46px;
text-align: center;
cursor: pointer;
user-select: none;
> span {
color: #555;
font-weight: 400;
font-size: 14px;
}
&:not(:last-of-type) {
margin-right: 16px;
}
&.coin-pitch {
background-color: #333333;
border-color: #333333;
color: #fff;
> span {
color: #fff;
}
}
}
}
.slit-input {
width: 360px;
height: 38px;
padding-left: 8px;
border: 1px solid #d7d7d7;
outline: none;
border-radius: 8px;
overflow: hidden;
font-size: 15px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"] {
-moz-appearance: textfield;
}
.el-input__inner {
border: none;
outline: none;
padding: 0 54px 0 0;
margin: 0;
}
}
.message-box {
display: flex;
flex-direction: column;
.message-hint {
color: #000;
font-size: 14px;
margin-top: 29px;
margin-bottom: 12px;
}
}
.operation {
display: flex;
justify-content: flex-end;
margin-top: 48px;
.operation-item {
width: 120px;
height: 41px;
margin-left: 16px;
border: 1px solid #797979;
border-radius: 45px;
cursor: pointer;
font-size: 16px;
color: #000;
&.greenBj {
background-color: #50e3c2;
border-color: #50e3c2 !important;
}
}
}
}
}
.no-jituobi-pop-box {
width: 520px;
flex-direction: column;
border: 1px solid #e5e5e5;
background-color: #fff;
border-radius: 11px;
display: flex;
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
padding-bottom: 55px;
.no-jituobi-close {
width: 16px;
height: 16px;
margin: 10px;
align-self: flex-end;
cursor: pointer;
}
.no-jituobi-head {
font-size: 16px;
color: #333;
margin: 23px auto 42px;
.bi-icon {
width: 50px;
height: 60px;
}
}
.strategy-btn {
width: 198px;
height: 43px;
color: #000;
font-size: 16px;
border-radius: 100px;
margin: 0 auto;
cursor: pointer;
&.greenBj {
background-color: #50e3c2;
border-color: #50e3c2 !important;
}
.strategy-icon {
width: 16px;
height: 16px;
margin-left: 8px;
}
}
}
.answer-empty-box {
height: 321px;
flex-direction: column;
justify-content: center;
background-color: #fff;
width: 626px;
height: 300px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
margin-bottom: 21px;
}
}
.el-popover.el-popper {
padding: 0px;
border-radius: 10px;
border: 1px solid #ebebeb;
}
.el-popper.is-light .el-popper__arrow:before {
background: #f6f6f6;
}
.respond-list-box {
width: 470px;
background: #f6f6f6;
border-radius: 10px;
.respond-list-title {
font-size: 14px;
line-height: 22px;
color: #333333;
padding-top: 16px;
padding-left: 20px;
padding-bottom: 25px;
}
.respond-list {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(10, 1fr);
.respond-item {
font-size: 20px;
font-family: "emojifont";
text-align: center;
margin-bottom: 20px;
// cursor: pointer;
.respond-item-key {
font-family: "emojifont";
cursor: pointer;
position: relative;
z-index: 1;
&:hover {
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 35px;
height: 35px;
background-color: #eee;
border-radius: 4px;
z-index: -1;
}
}
}
}
}
}