Update 专家提问界面优化

SourceCode/WeApp.Application/BaseSystem/Query/QueryAppService.cs

@@ -695,12 +695,18 @@ namespace WeApp.BaseSystem.Query
             var logs = new List<OpSpecialistQuestionDto>();
             foreach (var item in list)
             {
-                if (!await GlRepository.GetAll().Where(a => a.ParentNo == item.Id + "").AnyAsync())
+                var answers = await GlRepository.GetAll().Where(a => a.ParentNo == item.Id + "" && a.GroupNo == groupNo).Select(a => new OpSpecialistAnswerDto()
                 {
-                    logs.Add(item);
-                }
+                    Id = a.Id,
+                    Answer = a.LogMessage,
+                    GroupNo = a.GroupNo,
+                    GroupName = a.ExtendInfo1,
+                }).ToListAsync();
+
+                item.Answers = answers;
+                logs.Add(item);
             }
-            return logs;
+            return logs.OrderByDescending(a => a.Id).ToList(); ;
         }
 
         /// <summary>
@@ -716,11 +722,11 @@ namespace WeApp.BaseSystem.Query
                     Id = a.Id,
                     GroupName = a.GroupNo == null ? "全部分组" : a.CampGroupInfo.Name,
                     Question = a.LogMessage,
-                }).OrderByDescending(a => a.Id).ToListAsync();
+                }).ToListAsync();
 
             foreach (var item in list)
             {
-                var answer = await GlRepository.GetAll().Where(a => a.ParentNo == item.Id + "").Select(a =>
+                var answers = await GlRepository.GetAll().Where(a => a.ParentNo == item.Id + "").Select(a =>
                     new OpSpecialistAnswerDto()
                     {
                         Id = a.Id,
@@ -728,9 +734,9 @@ namespace WeApp.BaseSystem.Query
                         GroupName = a.ExtendInfo1,
                         Answer = a.LogMessage,
                     }).ToListAsync();
-                item.Answers = answer;
+                item.Answers = answers;
             }
-            return list;
+            return list.OrderByDescending(a => a.Id).ToList();
         }
 
         #endregion 日志

SourceCode/WeApp.Application/TrainingEval/Dto/RoleGroupDto.cs

@@ -62,6 +62,7 @@ namespace WeApp.TrainingEval.Dto
         public string GroupNo { get; set; }
         public string GroupName { get; set; }
         public string Question { get; set; }
+        public string Answer { get; set; }
         public List<OpSpecialistAnswerDto> Answers { get; set; }
     }
 

SourceCode/WeApp.Web/Content/Css/ExerciseV2_1/screen.css

@@ -523,7 +523,7 @@ body {
 }
 
 .modal .modal-content {
-  background: #d7e7fa;
+  /*background: #d7e7fa;*/
 }
 .modal .modal-header {
   color: var(--tc);
@@ -612,17 +612,240 @@ body {
   margin-bottom: 10px;
 }
 
-@keyframes shine {
-  0% {
-    filter: drop-shadow(0 0 12px #dc3545);
-  }
-  50% {
-    filter: drop-shadow(0 0 12px #bd2130);
-  }
-  100% {
-    filter: drop-shadow(0 0 12px #dc3545);
-  }
+.btn-box {
+  position: absolute;
+  top: 15px;
+  left: 50px;
+}
+.btn-box.btn-box-right {
+  top: 5px;
+  left: auto;
+  right: 40px;
 }
+.btn-box .btn-question {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.btn-box .btn-question .img {
+  --w: 40px;
+  width: var(--w);
+  height: var(--w);
+}
+.btn-box .btn-question .text {
+  color: #fff;
+  font-size: 14px;
+}
+.btn-box .btn-question .dot {
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: red;
+  position: absolute;
+  top: 2px;
+  right: 6px;
+  animation: 1s flashing ease-in-out infinite;
+}
+.btn-box .btn-question.notity .dot {
+  display: block;
+}
+
+.stu-question-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.stu-question-box .question-box-body {
+  position: relative;
+  z-index: 20;
+}
+.stu-question-box .question-box-body .close-icon {
+  --w: 35px;
+  --t: -70px;
+  width: var(--w);
+  height: var(--w);
+  border-radius: var(--w);
+  position: absolute;
+  top: var(--t);
+  right: var(--t);
+  background: #5f7790;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.stu-question-box .question-box-body .close-icon :hover {
+  background: #405b76;
+}
+.stu-question-box .question-bg-box {
+  --h: 624px;
+  width: 888px;
+  height: var(--h);
+  z-index: 11;
+  background-image: url("/Content/Image/ExerciseV2/msg02.png");
+}
+.stu-question-box .question-bg-box .close-icon {
+  top: 0;
+  right: -70px;
+}
+.stu-question-box .questions-box {
+  width: 100%;
+  transform: translate(70px, 90px);
+  height: calc(var(--h) - 140px);
+  background: #fff;
+  background: linear-gradient(106.01deg, #F3E1F1 3.44%, #E7ECF5 16.08%, #F1F3FF 45.1%, #D1D9F7 97.06%);
+  border-radius: 10px;
+  padding: 10px 15px;
+  color: #36536D;
+}
+.stu-question-box .questions-box .question-header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.stu-question-box .questions-box .questions {
+  display: flex;
+  flex-direction: column;
+  height: 250px;
+  overflow-y: auto;
+  padding: 5px;
+}
+.stu-question-box .questions-box .questions .question-item {
+  display: flex;
+  flex-direction: column;
+}
+.stu-question-box .questions-box .questions .question-item .question, .stu-question-box .questions-box .questions .question-item .answers {
+  padding: 6px 2px 6px 35px;
+  border-bottom: 1px dashed #36536D;
+  position: relative;
+  font-size: 14px;
+  display: flex;
+  color: #36536D;
+}
+.stu-question-box .questions-box .questions .question-item .question:before, .stu-question-box .questions-box .questions .question-item .answers:before {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 2px;
+  width: 26px;
+  height: 26px;
+}
+.stu-question-box .questions-box .questions .question-item .question {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  font-weight: 600;
+}
+.stu-question-box .questions-box .questions .question-item .question .btn {
+  margin: 0 8px;
+  white-space: nowrap;
+  padding: 4px 15px;
+  border-radius: 3px;
+}
+.stu-question-box .questions-box .questions .question-item .question:before {
+  background-image: url("/Content/Image/ExerciseV2/stu-question.png");
+}
+.stu-question-box .questions-box .questions .question-item .question.has-answer .btn {
+  background: rgba(204, 224, 248, 0.76);
+  color: #36536D;
+}
+.stu-question-box .questions-box .questions .question-item .answers {
+  flex-direction: column;
+}
+.stu-question-box .questions-box .questions .question-item .answers .answer {
+  padding: 4px 0;
+}
+.stu-question-box .questions-box .questions .question-item .answers .answer.answer-empty {
+  color: #aaa;
+}
+.stu-question-box .questions-box .questions .question-item .answers:before {
+  background-image: url("/Content/Image/ExerciseV2/stu-answer.png");
+}
+.stu-question-box .questions-box .question-form {
+  position: relative;
+  padding-top: 20px;
+}
+.stu-question-box .questions-box .question-form .question {
+  display: flex;
+  font-size: 16px;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+.stu-question-box .questions-box .question-form .question img {
+  width: 42px;
+  height: 42px;
+  margin-right: 8px;
+}
+.stu-question-box .questions-box .question-form .question .text {
+  display: flex;
+  align-items: center;
+}
+.stu-question-box .questions-box .question-form textarea {
+  height: 80px;
+  padding-right: 110px;
+}
+.stu-question-box .questions-box .question-form .send-btn {
+  margin: 0;
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}
+.stu-question-box .questions-box .empty {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: -30px;
+}
+.stu-question-box .questions-box .empty img {
+  width: 80px;
+  height: 84px;
+}
+.stu-question-box .questions-box .empty .text {
+  margin-top: 10px;
+  color: #aaa;
+}
+.stu-question-box .new {
+  width: 840px;
+  height: 464px;
+  background-image: url("/Content/Image/ExerciseV2/msg01.png");
+  animation: 1.5s shake ease-in-out infinite;
+}
+
+/*@keyframes shine {
+    0% {
+        filter: drop-shadow(0 0 12px #dc3545);
+    }
+
+    50% {
+        filter: drop-shadow(0 0 12px #bd2130);
+    }
+
+    100% {
+        filter: drop-shadow(0 0 12px #dc3545);
+    }
+}*/
 @keyframes flashing {
   0% {
     opacity: 1;
@@ -645,6 +868,27 @@ body {
     filter: drop-shadow(0 0 15px #c82333);
   }
 }
+@keyframes shake {
+  0%, 100% {
+    filter: drop-shadow(0 0 5px #457ddd);
+  }
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+  50% {
+    filter: drop-shadow(0 0 15px #457ddd);
+    transform: translate3d(-4px, 0, 0);
+  }
+}
 @keyframes flash {
   0% {
     transform: scale(1, 1.05);

SourceCode/WeApp.Web/Content/Css/ExerciseV2_1/stu-spec.css

@@ -5,11 +5,6 @@
 .main-box {
   margin: 0 !important;
 }
-.main-box .btn-box {
-  position: absolute;
-  top: 15px;
-  left: 50px;
-}
 .main-box .btn-box .vb-btn {
   padding: 8px 20px;
   font-size: 16px;
@@ -37,10 +32,6 @@
 .main-box .btn-box .vb-btn .tag.tag-lg {
   --w: 25px;
 }
-.main-box .btn-box.btn-box-right {
-  left: auto;
-  right: 50px;
-}
 .main-box .carousel {
   display: flex;
   flex-direction: column;
@@ -124,62 +115,136 @@
   font-weight: 600;
 }
 
-.question-list {
+.question-list-box {
+  display: none;
+  position: absolute;
+  top: 70px;
+  right: 30px;
+  width: 625px;
+  background: #fff;
+  z-index: 2;
+  border-radius: 10px;
+  padding: 10px 0;
+}
+.question-list-box .question-header {
+  padding: 0 15px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.question-list-box .question-header .title {
+  position: relative;
+  font-size: 22px;
+  font-weight: 600;
+  padding-left: 15px;
+}
+.question-list-box .question-header .title:before {
+  position: absolute;
+  content: "";
+  display: block;
+  width: 5px;
+  height: 15px;
+  background: #03aebc;
+  border-radius: 3px;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.question-list-box .question-header .btn {
+  cursor: pointer;
+  margin: 0;
+}
+.question-list-box .question-body {
   width: 100%;
   max-height: 600px;
   overflow-y: auto;
-  padding: 10px 0;
+  padding: 0 15px 5px;
   display: flex;
   flex-direction: column;
+  height: 450px;
+  overflow-y: auto;
 }
-.question-list .question-item {
+.question-list-box .question-body .question-item {
+  display: flex;
   padding: 10px;
-  margin: 5px 15px;
-  border: 1px solid #80baef;
+  margin: 5px 0;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid #ddd;
+  background: #EFF6FD;
+  padding: 10px 0;
+  font-size: 14px;
 }
-.question-list .question-item .question {
+.question-list-box .question-body .question-item .img {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}
+.question-list-box .question-body .question-item .img svg {
+  --w: 40px;
+  width: var(--w);
+  height: var(--w);
+}
+.question-list-box .question-body .question-item .content {
+  padding: 0 10px;
+  width: 100%;
+}
+.question-list-box .question-body .question-item .content .question {
+  display: flex;
+  justify-content: space-between;
+}
+.question-list-box .question-body .question-item .content .question .text {
   color: #36536D;
+  font-weight: 600;
 }
-.question-list .question-item .question .group {
-  margin: 10px;
+.question-list-box .question-body .question-item .content .question .group {
+  height: 25px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  margin-left: 10px;
   font-size: 12px;
-  padding: 1px 5px;
+  padding: 0 5px;
   border-radius: 3px;
   background: rgba(69, 133, 204, 0.1);
   border: 1px solid #094888;
   color: #094B88;
+  white-space: nowrap;
 }
-.question-list .question-item .answers {
+.question-list-box .question-body .question-item .content .answers {
   display: flex;
   flex-direction: column;
   border-radius: 5px;
-  border: 1px dashed var(--mc);
 }
-.question-list .question-item .answers .answer {
-  padding: 10px 15px;
-  font-size: 16px;
+.question-list-box .question-body .question-item .content .answers .answer {
+  padding-top: 8px;
+  color: #36536D;
 }
-.question-list .question-item .answers .answer .title {
+.question-list-box .question-body .question-item .content .answers .answer .title {
   font-size: 18px;
   padding-right: 5px;
 }
-.question-list .question-item .answers .answer:not(:last-child) {
-  border-bottom: 1px dashed var(--mc);
+.question-list-box .question-body .question-item .content .answers .answer.anwser-empty {
+  width: 100%;
+  color: #aaa;
 }
-.question-list .empty {
+.question-list-box .question-body .empty {
   width: 100%;
-  height: 200px;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
-  color: #dc3545;
+  flex-direction: column;
+  font-size: 14px;
   font-weight: 600;
-  opacity: 0.8;
+  margin-top: -30px;
 }
-.question-list .anwser-empty {
-  font-size: 16px;
-  height: 100px;
+.question-list-box .question-body .empty img {
+  width: 80px;
+  height: 84px;
+}
+.question-list-box .question-body .empty .text {
+  margin-top: 10px;
+  color: #aaa;
 }

SourceCode/WeApp.Web/Content/Scss/ExerciseV2_1/screen.scss

@@ -451,7 +451,7 @@ body {
 
 .modal {
     .modal-content {
-        background: #d7e7fa;
+        /*background: #d7e7fa;*/
     }
 
     .modal-header {
@@ -558,7 +558,267 @@ body {
     margin-bottom: 10px;
 }
 
-@keyframes shine {
+.btn-box {
+    position: absolute;
+    top: 15px;
+    left: 50px;
+
+    &.btn-box-right {
+        top: 5px;
+        left: auto;
+        right: 40px;
+    }
+
+    .btn-question {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        .img {
+            --w: 40px;
+            width: var(--w);
+            height: var(--w);
+        }
+
+        .text {
+            color: #fff;
+            font-size: 14px;
+        }
+
+        .dot {
+            display: none;
+            width: 10px;
+            height: 10px;
+            border-radius: 10px;
+            background: red;
+            position: absolute;
+            top: 2px;
+            right: 6px;
+            animation: 1s flashing ease-in-out infinite;
+        }
+
+        &.notity {
+            .dot {
+                display: block;
+            }
+        }
+    }
+}
+
+.stu-question-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .question-box-body {
+        position: relative;
+        z-index: 20;
+
+        .close-icon {
+            --w: 35px;
+            --t: -70px;
+            width: var(--w);
+            height: var(--w);
+            border-radius: var(--w);
+            position: absolute;
+            top: var(--t);
+            right: var(--t);
+            background: #5f7790;
+            color: #fff;
+            font-size: 14px;
+            font-weight: 400;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            :hover {
+                background: #405b76;
+            }
+        }
+    }
+
+    .question-bg-box {
+        --h: 624px;
+        width: 888px;
+        height: var(--h);
+        z-index: 11;
+        background-image: url('/Content/Image/ExerciseV2/msg02.png');
+
+        .close-icon {
+            top: 0;
+            right: -70px;
+        }
+    }
+
+    .questions-box {
+        width: 100%;
+        transform: translate(70px,90px);
+        height: calc(var(--h) - 140px);
+        background: #fff;
+        background: linear-gradient(106.01deg, #F3E1F1 3.44%, #E7ECF5 16.08%, #F1F3FF 45.1%, #D1D9F7 97.06%);
+        border-radius: 10px;
+        padding: 10px 15px;
+        color: #36536D;
+
+        .question-header {
+            width: 100%;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 10px
+        }
+
+        .questions {
+            display: flex;
+            flex-direction: column;
+            height: 250px;
+            overflow-y: auto;
+            padding: 5px;
+
+            .question-item {
+                display: flex;
+                flex-direction: column;
+
+                .question, .answers {
+                    padding: 6px 2px 6px 35px;
+                    border-bottom: 1px dashed #36536D;
+                    position: relative;
+                    font-size: 14px;
+                    display: flex;
+                    color: #36536D;
+
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        top: 10px;
+                        left: 2px;
+                        width: 26px;
+                        height: 26px;
+                    }
+                }
+
+                .question {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    font-weight: 600;
+
+                    .btn {
+                        margin: 0 8px;
+                        white-space: nowrap;
+                        padding: 4px 15px;
+                        border-radius: 3px;
+                    }
+
+                    &:before {
+                        background-image: url('/Content/Image/ExerciseV2/stu-question.png');
+                    }
+
+                    &.has-answer {
+                        .btn {
+                            background: rgba(204, 224, 248, 0.76);
+                            color: #36536D;
+                        }
+                    }
+                }
+
+                .answers {
+                    flex-direction: column;
+
+                    .answer {
+                        padding: 4px 0;
+
+                        &.answer-empty {
+                            color: #aaa;
+                        }
+                    }
+
+                    &:before {
+                        background-image: url('/Content/Image/ExerciseV2/stu-answer.png');
+                    }
+                }
+            }
+        }
+
+        .question-form {
+            position: relative;
+            padding-top: 20px;
+
+            .question {
+                display: flex;
+                font-size: 16px;
+                font-weight: 600;
+                padding-bottom: 10px;
+
+                img {
+                    width: 42px;
+                    height: 42px;
+                    margin-right: 8px;
+                }
+
+                .text {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            textarea {
+                height: 80px;
+                padding-right: 110px;
+            }
+
+            .send-btn {
+                margin: 0;
+                position: absolute;
+                bottom: 20px;
+                right: 20px;
+            }
+        }
+
+        .empty {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: -30px;
+
+            img {
+                width: 80px;
+                height: 84px;
+            }
+
+            .text {
+                margin-top: 10px;
+                color: #aaa;
+            }
+        }
+    }
+
+    .new {
+        width: 840px;
+        height: 464px;
+        background-image: url('/Content/Image/ExerciseV2/msg01.png');
+        animation: 1.5s shake ease-in-out infinite;
+    }
+}
+
+/*@keyframes shine {
     0% {
         filter: drop-shadow(0 0 12px #dc3545);
     }
@@ -570,7 +830,7 @@ body {
     100% {
         filter: drop-shadow(0 0 12px #dc3545);
     }
-}
+}*/
 
 @keyframes flashing {
     0% {
@@ -599,6 +859,33 @@ body {
     }
 }
 
+@keyframes shake {
+    0%,100% {
+        filter: drop-shadow(0 0 5px #457ddd);
+    }
+
+    10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%, 80% {
+        transform: translate3d(+2px, 0, 0);
+    }
+
+    30%, 70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%, 60% {
+        transform: translate3d(+4px, 0, 0);
+    }
+
+    50% {
+        filter: drop-shadow(0 0 15px #457ddd);
+        transform: translate3d(-4px, 0, 0);
+    }
+}
+
 @keyframes flash {
     0% {
         transform: scale(1.0,1.05);

SourceCode/WeApp.Web/Content/Scss/ExerciseV2_1/stu-spec.scss

@@ -6,10 +6,6 @@
     margin: 0 !important;
 
     .btn-box {
-        position: absolute;
-        top: 15px;
-        left: 50px;
-
         .vb-btn {
             padding: 8px 20px;
             font-size: 16px;
@@ -31,19 +27,15 @@
                 color: #fff;
                 border-radius: 15px;
 
-                &:empty{
-                    display:none;
+                &:empty {
+                    display: none;
                 }
+
                 &.tag-lg {
                     --w: 25px;
                 }
             }
         }
-
-        &.btn-box-right {
-            left: auto;
-            right: 50px;
-        }
     }
 
     .carousel {
@@ -140,73 +132,155 @@
     }
 }
 
-.question-list {
-    width: 100%;
-    max-height: 600px;
-    overflow-y: auto;
+.question-list-box {
+    display: none;
+    position: absolute;
+    top: 70px;
+    right: 30px;
+    width: 625px;
+    background: #fff;
+    z-index: 2;
+    border-radius: 10px;
     padding: 10px 0;
-    display: flex;
-    flex-direction: column;
-
-    .question-item {
-        padding: 10px;
-        margin: 5px 15px;
-        border: 1px solid #80baef;
-        border-radius: 10px;
-        background: rgba(255, 255, 255, .4);
-
 
+    .question-header {
+        padding: 0 15px;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 15px;
 
-        .question {
-            color: #36536D;
+        .title {
+            position: relative;
+            font-size: 22px;
+            font-weight: 600;
+            padding-left: 15px;
 
-            .group {
-                margin: 10px;
-                font-size: 12px;
-                padding: 1px 5px;
+            &:before {
+                position: absolute;
+                content: "";
+                display: block;
+                width: 5px;
+                height: 15px;
+                background: #03aebc;
                 border-radius: 3px;
-                background: rgba(69, 133, 204, 0.1);
-                border: 1px solid #094888;
-                color: #094B88;
+                left: 0px;
+                top: 50%;
+                transform: translateY(-50%);
             }
         }
 
-        .answers {
+        .btn {
+            cursor: pointer;
+            margin: 0;
+        }
+    }
+
+    .question-body {
+        width: 100%;
+        max-height: 600px;
+        overflow-y: auto;
+        padding: 0 15px 5px;
+        display: flex;
+        flex-direction: column;
+        height: 450px;
+        overflow-y: auto;
+
+        .question-item {
             display: flex;
-            flex-direction: column;
-            border-radius: 5px;
-            border: 1px dashed var(--mc);
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 10px;
+            border: 1px solid #ddd;
+            background: #EFF6FD;
+            padding: 10px 0;
+            font-size: 14px;
 
-            .answer {
-                padding: 10px 15px;
-                font-size: 16px;
+            .img {
+                display: flex;
+                justify-content: center;
+                padding: 8px;
 
-                .title {
-                    font-size: 18px;
-                    padding-right:5px;
+                svg {
+                    --w: 40px;
+                    width: var(--w);
+                    height: var(--w);
                 }
+            }
+
+            .content {
+                padding: 0 10px;
+                width: 100%;
+
+                .question {
+                    display: flex;
+                    justify-content: space-between;
+
+                    .text {
+                        color: #36536D;
+                        font-weight: 600;
+                    }
+
+                    .group {
+                        height: 25px;
+                        justify-content: center;
+                        align-items: center;
+                        display: flex;
+                        margin-left: 10px;
+                        font-size: 12px;
+                        padding: 0 5px;
+                        border-radius: 3px;
+                        background: rgba(69, 133, 204, 0.1);
+                        border: 1px solid #094888;
+                        color: #094B88;
+                        white-space: nowrap;
+                    }
+                }
+
+                .answers {
+                    display: flex;
+                    flex-direction: column;
+                    border-radius: 5px;
+
+                    .answer {
+                        padding-top: 8px;
+                        color: #36536D;
+
+                        .title {
+                            font-size: 18px;
+                            padding-right: 5px;
+                        }
 
-                &:not(:last-child) {
-                    border-bottom: 1px dashed var(--mc);
+                        &.anwser-empty {
+                            width: 100%;
+                            color: #aaa;
+                        }
+                    }
                 }
             }
         }
-    }
 
-    .empty {
-        width: 100%;
-        height: 200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 24px;
-        color: #dc3545;
-        font-weight: 600;
-        opacity: .8;
-    }
+        .empty {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: -30px;
+
+            img {
+                width: 80px;
+                height: 84px;
+            }
 
-    .anwser-empty {
-        font-size: 16px;
-        height: 100px;
+            .text {
+                margin-top: 10px;
+                color: #aaa;
+            }
+        }
     }
 }

SourceCode/WeApp.Web/Views/ExerciseV2_1/Specialist.cshtml

@@ -25,16 +25,26 @@
 <div class="main-box box">
     <div class="btn-box">
         <span onclick="Carousel(this)" class="vb-btn active" style="margin-right: 15px;">停止轮播</span>
-        <span onclick="Question()" class="vb-btn" style="margin-right: 15px;">学员提问</span>
-        <span onclick="Answer()" class="vb-btn" style="margin-right: 15px;">
-            学员回答
-            <span id="answer-count" class="tag"></span>
-        </span>
-        @* <span onclick="Reviews()" class="vb-btn" style="margin-right: 15px;">我要点评</span> *@
+        <span onclick="ScenePath()" class="vb-btn" style="margin-right: 15px;">情景路径</span>
+        <span onclick="Reviews()" class="vb-btn" style="margin-right: 15px;">我要点评</span>
     </div>
     <div class="btn-box btn-box-right">
-        <span onclick="ScenePath()" class="vb-btn" style="margin-right: 15px;">情景路径</span>
+        <div onclick="QuestionList()" class="btn-question" style="margin-right: 15px;">
+            <img class="img" src="/Content/Image/ExerciseV2/spec-question.png" />
+            <span class="text">专家提问</span>
+            <span class="dot"></span>
+        </div>
+    </div>
+    <div>
+        <div class="question-list-box">
+            <div class="question-header">
+                <div class="title">提问记录</div>
+                <div class="btn btn-submit" onclick="QuestionModal()">我要提问</div>
+            </div>
+            <div class="question-body"></div>
+        </div>
     </div>
+
     @if (groups != null)
     {
         <div id="Carousel" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="30000" style="width: 100%; height: 100%;">
@@ -95,8 +105,7 @@
         <div class="modal-content">
             <div class="modal-header" style="cursor: move;">
                 <h4 class="modal-title">
-                    <span>学员提问</span>
-                    <span onclick="Answer()" class="vb-btn" style="margin-left: 15px;">查看回答列表</span>
+                    <span>我要提问</span>
                 </h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
             </div>
@@ -132,6 +141,7 @@
     <script>
 
         $(function () {
+
             resizeHeight_Screen();
             window.addEventListener('resize', resizeHeight_Screen);
             @if (groups != null && groups.Any())
@@ -150,6 +160,12 @@
                     });
                 </text>
             }
+
+            $(document).on("click", function (e) {
+                if ($(e.target).closest(".question-list-box").length == 0 && $(".question-list-box").hasClass("show")) {
+                    $(".question-list-box").removeClass("show").fadeOut(600);
+                }
+            })
         });
 
         function resizeHeight_Screen() {
@@ -246,89 +262,84 @@
                 });
         }
 
-        function Question() {
-             OpenModal({
-                 modal:"modal_question",
-                 url: abp.appUrl + 'eval/SpecialistQuestion',
-                 data: {  campNo: '@(id)' },
-                 success: function() {
-                     $('.question-box button').fadeOut();
-                     $(".question-box").html("")
-                 }
-             });
-        }
+        function QuestionList() {
+            $(".btn-question").removeClass("notity")
+             $.iwbAjax4({
+                 url: abp.appUrl + `query/GetQuestionAndAnswerByCamp?campNo=@(id)`,
+                 success: function (res) {
+                     formatQa(res);
+                     $(".question-list-box").addClass("show").fadeIn(500);
 
-        function Answer() {
-            $("#answer-count").removeClass("tag-lg").html("")
-            $.iwbAjax4({
-                url: abp.appUrl + `query/GetQuestionAndAnswerByCamp?campNo=@(id)`,
-                success: function (res) {
-                    $(document).iwbModal('create', {
-                        modal: 'modal-answers',
-                        modaltitle: '学员回答提问列表',
-                        width: 1200,
-                        modalBody: formatQa(res),
-                        modalFooter:`<div class="modal-footer" style="text-align: center;"><button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">关闭</button></div>`,
-                        data: null,
-                        shownAfter: function () {
-                            var $modal = $("#modal-answers");
-                            $modal.css('display', 'block');
-                            var topHeight = $(window).height() - $modal.find('.modal-dialog').height() - 150;
-                            if (topHeight < 50) {
-                                topHeight = 50;
-                            }
-                            $modal.find('.modal-dialog').animate({ 'marginTop': topHeight / 2 + "px" });
-                        },
-                    })
-                }
-            })
+                 }
+             })
         }
-
         function formatQa(data) {
-            var str = `<div class="question-list">`;
+            var str = ``;
             if (data && data.length) {
                 data.forEach(function (v) {
-                    str += `<div class="question-item d-flex flex-column">
-                                <div class="question">
-                                    <span class="group">${v.groupName}</span>
-                                    <strong class="title">问题：</strong>
-                                    <span class="text">${v.question}</span>
-                                </div>
-                                <div class="answers">
-                                    ${_formatAnswer(v.answers,v)}
-                                </div>
-                            </div>`;
+                    str += `<div class="question-item">
+                          <div class="img">
+                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="24" cy="24" r="24" fill="white" />
+                                <path d="M24.0007 11C27.4734 11 30.7373 12.3518 33.192 14.808C34.4029 16.0122 35.363 17.4445 36.0166 19.0222C36.6702 20.5999 37.0045 22.2916 37 23.9993C37 27.4719 35.6482 30.7359 33.192 33.192C31.9878 34.4029 30.5555 35.363 28.9778 36.0166C27.4001 36.6703 25.7084 37.0045 24.0007 37H14.2342C14.0619 37.0001 13.8936 36.9489 13.7506 36.8528C13.6076 36.7567 13.4966 36.6202 13.4316 36.4606C13.3666 36.3011 13.3507 36.1258 13.3859 35.9572C13.4211 35.7886 13.5057 35.6343 13.6291 35.5141C14.1701 34.9835 14.9704 33.9462 14.9674 33.4096C14.9674 33.35 14.957 33.3396 14.9421 33.3247C13.6926 32.1146 12.6996 30.6652 12.0223 29.063C11.3451 27.4609 10.9974 25.7387 11 23.9993C11 20.5267 12.3518 17.2627 14.808 14.808C16.0121 13.5971 17.4445 12.637 19.0222 11.9834C20.5999 11.3298 22.2915 10.9955 23.9992 11H24.0007Z" fill="url(#paint0_linear_632_2438)" />
+                                <circle cx="17.4836" cy="23.9758" r="1.60963" fill="white" />
+                                <circle cx="23.9231" cy="23.9749" r="1.60963" fill="white" />
+                                <circle cx="30.3606" cy="23.9749" r="1.60963" fill="white" />
+                                <defs>
+                                <linearGradient id="paint0_linear_632_2438" x1="17" y1="11" x2="32" y2="37" gradientUnits="userSpaceOnUse">
+                                <stop stop-color="#0AE5F5" />
+                                <stop offset="1" stop-color="#005CE7" />
+                                </linearGradient>
+                                </defs>
+                            </svg>
+                          </div>
+                          <div class="content">
+                            <div class="question">
+                                <span class="text">${v.question}</span>
+                                <span class="group">${v.groupName}</span>
+                            </div>
+                            <div class="answers">
+                                ${_formatAnswer(v.answers, v)}
+                            </div>
+                          </div>
+                       </div>`;
                 })
             } else {
-                str+=`<span class="empty">暂无提问，请先提问学员！</span>`
+                str += `
+                <div class="empty">
+                    <img class="img" src="/Content/Image/ExerciseV2/empty.png">
+                    <span class="text">没有记录先去提问吧~</span>
+                </div>
+                `
             }
-            str += `</div>`;
-            return str;
-
-            function _formatAnswer(answers,question) {
+            $(".question-body").html(str);
+            function _formatAnswer(answers, question) {
                 var awStr = "";
                 if (answers && answers.length) {
                     answers.forEach(function (vv) {
                         awStr += `<div class="answer">
-                            ${question.groupName == "全部分组" ? `<strong class="name">${vv.groupName}：</strong>` : ''}
-                            <span class="text">${vv.answer}</span>
-                        </div>`;
+                       ${question.groupName == "全部分组" ? `<strong class="name">${vv.groupName}：</strong>` : ''}
+                       <span class="text">${vv.answer}</span>
+                   </div>`;
                     })
                 } else {
-                    awStr = `<span class="empty anwser-empty">学员暂未回答</span>`
+                    awStr = `<span class="answer anwser-empty">学员暂未回答</span>`
                 }
                 return awStr;
             }
         }
 
-        function addAnsweCount() {
-            var $that = $("#answer-count");
-            var count = Number($that.removeClass("tag-lg").text()) || 0;
-            count++;
-            if (count > 9) {
-                $that.addClass("tag-lg");
-            }
-            $that.text(count)
+        function QuestionModal() {
+            $(".question-list-box").removeClass("show").fadeOut(600);
+             OpenModal({
+                 modal:"modal_question",
+                 url: abp.appUrl + 'eval/SpecialistQuestion',
+                 data: {  campNo: '@(id)' },
+                 success: function() {
+                     $('.question-box button').fadeOut();
+                     $(".question-box").html("")
+                 }
+             });
         }
 
         iwbHub.client.getReloadAll = function (msg) {
@@ -380,8 +391,8 @@
         iwbHub.client.getStudentAnswer = function(msg) {
             console.log('getStudentAnswer: ', msg);
             if (msg) {
-                addAnsweCount()
+                $(".btn-question").addClass("notity")
             }
         };
     </script>
-    }
+}

SourceCode/WeApp.Web/WeApp.Web.csproj

@@ -578,6 +578,13 @@
     <Content Include="Content\Image\ExerciseV2\btn.png" />
     <Content Include="Content\Image\ExerciseV2\bg.jpg" />
     <Content Include="Content\Image\ExerciseV2\bg.png" />
+    <Content Include="Content\Image\ExerciseV2\empty.png" />
+    <Content Include="Content\Image\ExerciseV2\msg01.png" />
+    <Content Include="Content\Image\ExerciseV2\msg02.png" />
+    <Content Include="Content\Image\ExerciseV2\spec-answer.png" />
+    <Content Include="Content\Image\ExerciseV2\spec-question.png" />
+    <Content Include="Content\Image\ExerciseV2\stu-answer.png" />
+    <Content Include="Content\Image\ExerciseV2\stu-question.png" />
     <Content Include="Content\Image\ExerciseV2\timer_1.png" />
     <Content Include="Content\Image\ExerciseV2\timer_2.png" />
     <Content Include="Content\Image\ExerciseV2\title_icon.svg" />
@@ -1903,6 +1910,7 @@
     <Content Include="Content\Scss\ExerciseV2_1\stu-zhb.scss" />
     <Content Include="Content\Scss\ExerciseV2_1\_stu-scene-tip.scss" />
     <Content Include="Content\Scss\ExerciseV2_1\stu-spec.scss" />
+    <Content Include="Content\Image\ExerciseV2\Compressed\~%24USER_1715072770997.xlsx" />
     <None Include="packages.config" />
     <None Include="Properties\PublishProfiles\WeApp.pubxml" />
     <None Include="Resources\Guids.iwbx" />

SourceCode/WeApp.Web/Web.config

@@ -36,7 +36,7 @@
 	</appSettings>
 	<connectionStrings>
 		<!-- <add name="Default" connectionString="Server=.\Y; Database=We_AppDb_V2.2_Dev; User Id=sa;Password=123456" providerName="System.Data.SqlClient" /> -->
-		<add name="Default" connectionString="Server=shvber.com,5016; Database=We_AppDb_V2.2_Dev; User Id=iwb;Password=123456Qsc" providerName="System.Data.SqlClient" />
+		<add name="Default" connectionString="Server=shvber.com,5030; Database=We_AppDb_V2.2_Dev; User Id=iwb;Password=123456Qsc" providerName="System.Data.SqlClient" />
 		<!--<add name="Default" connectionString="Server=192.168.0.101:49173; Database=We_AppDb_V2.1; User Id=sa;Password=Iwb2017" providerName="System.Data.SqlClient" />-->
 	</connectionStrings>
 	<!--