#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; } } } } } }