ai应用作业样式

src/assets/icon/svgImg/nrk_fullscreen.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.2H11.9516L8.7758 6.3758L9.6242 7.2242L12.8 4.0484V8H14V2H8V3.2ZM3.2 11.9516L6.3758 8.7758L7.2242 9.6242L4.0484 12.8H8V14H2V8H3.2V11.9516Z" fill="black"/>
+</svg>

src/components/components/cocoFlowDia.vue

@@ -9,25 +9,32 @@
             :before-close="handleClose">
             <div slot="title">
                 <div class="markScore_diyTit">
-                <div>查看作业</div>
-                <img  @click="markFullScreenBtn" style="cursor: pointer;height: 20px;" src="../../assets/icon/newIcons/FullS.svg" alt="" />
+                    <div>查看作业</div>
+                    <img  @click="markFullScreenBtn" style="cursor: pointer;height: 16px;" src="../../assets/icon/svgImg/nrk_fullscreen.svg" alt="" />
                 </div>
             </div>
            
-            <div  style="margin-bottom: 20px;" v-for="(item,index) in listData" :key="index">
-                <div style="margin-bottom: 15px;font-size: 20px;font-weight: 600;color: #000;">第{{ index + 1}}阶段</div>
-                <div v-for="(po, index2) in item.messages" :key="index+'-'+index2">
-                    <div class="left" v-if="po.role == 'assistant'">
-                            <div class="TName">小可AI助手</div>:
-                            <div class="con" v-html="MarkdownT(po.content)"></div>
-                    </div>
+            <div class="markDialog">
+                <template  v-for="(item,index) in listData">
+                    <div class="BodyCon" v-if="item.messages.length"  :key="index">
+                        <div class="BodyConTit">节点{{ index + 1}}</div>
+
+                        <div class="BodyConChat" v-for="(po, index2) in item.messages" :key="index+'-'+index2">
+                            <div class="left" v-if="po.role == 'assistant'">
+                                    <div class="TName" style="background-color: #0560FD;">小可AI助手</div>
+                                    <div class="con" v-html="MarkdownT(po.content)"></div>
+                            </div>
 
-                    <div class="left" v-if="po.role == 'user'">
-                            <div class="TName">{{ username }}</div>:
-                            <div class="con" v-html="po.content"></div>
+                            <div class="left" v-if="po.role == 'user'">
+                                    <div class="TName" style="background-color: #9747FF;">{{ username }}</div>
+                                    <div class="con" v-html="po.content"></div>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                </template>
             </div>
+            
+
         </el-dialog>
 
     </div>
@@ -87,8 +94,14 @@ import MarkdownIt from "markdown-it";
     }
 
     .dialog_diy >>> .el-dialog__header {
-    background: #454545 !important;
-    padding: 15px 20px;
+        background: #fff !important;
+        padding: 15px 20px;
+        border-radius: 12px 12px 0 0 !important;
+        border-bottom: 1px #E7E7E7 solid;
+    }
+    .dialog_diy >>> .el-dialog{
+        border-radius: 12px;
+        overflow: hidden;
     }
 
     .dialog_diy >>> .el-dialog__title{
@@ -100,52 +113,106 @@ import MarkdownIt from "markdown-it";
     }
 
     .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close{
-    color: #fff;
+        color: #000;
     }
 
     .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
-    color: #fff;
+        color: #000;
     }
 
 
 
-    .dialog_diy >>> .el-dialog__body,
-    .dialog_diy >>> .el-dialog__footer{
-    background: #fafafa;
-    /* max-height: 850px; */
-    /* overflow: auto; */
+    .dialog_diy >>> .el-dialog__body{
+        background: #FFFFFFCC;
+        border-radius: 12px !important;
+        overflow: auto;
+        box-sizing: border-box;
+        min-height: 70vh;
+        max-height: calc(100vh - 90px);
+        padding: 0 !important;
+        margin: 30px auto 0;
+        width: 99%;
+    }
+
+    .dialog_diy >>> .el-dialog__body::-webkit-scrollbar-thumb {
+        background-color: #0560FD; /* 设置滚动条滑块颜色 */
+    }
+
+    .markDialog{
+        height: 100%;
+        min-height: 600px;
+        display: flex;
+        padding:0 30px 30px;
+        box-sizing: border-box;
+        flex-direction: column;
+        gap: 30px;
     }
     .markScore_diyTit {
-        color: #fff;
+        color: #000000;
         width: calc(100% - 50px);
         display: flex;
         height: 24px;
         justify-content: space-between;
         align-items: center;
+        font-family: PingFang SC;
     }
     .TName{
-        /* font-size: 14px; */
-        color: #4472C4;
-        margin-bottom: 5px;
+        color: #fff;
         font-weight: 600;
-        width: 80px;
+        width: 150px;
         flex-shrink: 0;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        border-radius: 12px 12px 0 0;
+        height: 28px;
+        padding: 6px 17px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
     }
     .con{
-        margin-left: 10px;
-        /* font-size: 14px; */
-        color: #000;
+        color: #000000E5;
+        border-radius: 0 0 12px 12px;
+        border: 1px solid #E7E7E7;
+        padding: 16px;
+        box-sizing: border-box;
+        box-shadow: 0px 4px 20px 0px #0000001A;
     }
     .left{
         display: flex;
+        flex-direction: column;
         font-size: 16px !important;
         justify-content: flex-start;
-        margin-bottom: 10px;
         line-height: 25px;
-        flex: 1;
-        border-bottom: 1px  #e7e7e7 solid;
     }
+    .BodyCon{
+        background: #FFFFFF;
+        border: 0.5px solid #E7E7E7;
+        border-radius: 12px;
+        padding: 10px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .BodyConTit{
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        color: #000;
+    }
+    .BodyConChat{
+        display: flex;
+        flex-direction: column;
+        /* border-radius: 0 0 12px 12px;
+        border: 1px solid #E7E7E7;
+        padding: 16px;
+        box-sizing: border-box; */
+    }
+
+
+
+    
 </style>

src/components/components/studentWorkPreviewDialog.vue

@@ -270,20 +270,38 @@
               </div>
             </div>
             <div class="s_b_m_tool40" v-if="[72].includes(tool)">
-              <div  style="margin-bottom: 20px;" v-for="(item,index) in JSON.parse(studentWork.works)" :key="index">
+              <!-- <div  style="margin-bottom: 20px;" v-for="(item,index) in JSON.parse(studentWork.works)" :key="index">
                 <div style="margin-bottom: 15px;font-size: 20px;font-weight: 600;color: #000;">第{{ index + 1}}阶段</div>
                 <div v-for="(po,pInd) in item.messages" :key="pInd+'pInd'">
                     <div class="left" v-if="po.role == 'assistant'">
                             <div class="TName">小可AI助手</div>:
                             <div class="con"  v-html="MarkdownT(po.content)"></div>
-                    </div>
-
-                    <div class="left" v-if="po.role == 'user'">
+                    </div> -->
+                    <!-- <div class="left" v-if="po.role == 'user'">
                             <div class="TName">{{ studentWork.sName }}</div>:
                             <div class="con" v-html="po.content"></div>
                     </div>
                 </div>
-            </div>
+            </div> -->
+
+              <template v-for="(item,index) in JSON.parse(studentWork.works)">
+                  <div class="BodyCon" v-if="item.messages.length"  :key="index">
+                      <div class="BodyConTit">节点{{ index + 1}}</div>
+
+                      <div class="BodyConChat" v-for="(po, index2) in item.messages" :key="index+'-'+index2">
+                          <div class="left" v-if="po.role == 'assistant'">
+                                  <div class="TName" style="background-color: #0560FD;">小可AI助手</div>
+                                  <div class="con" v-html="MarkdownT(po.content)"></div>
+                          </div>
+
+                          <div class="left" v-if="po.role == 'user'">
+                                  <div class="TName" style="background-color: #9747FF;">{{ studentWork.sName }}</div>
+                                  <div class="con" v-html="po.content"></div>
+                          </div>
+                      </div>
+                  </div>
+              </template>
+
             </div>
           </div>
         </div>
@@ -803,30 +821,67 @@ export default {
 .redioStyle >>> .el-checkbox__label {
   font-size: 18px;
 }
-.TName{
-        /* font-size: 14px; */
-        color: #4472C4;
-        margin-bottom: 5px;
+.markScore_diyTit {
+        color: #000000;
+        width: calc(100% - 50px);
+        display: flex;
+        height: 24px;
+        justify-content: space-between;
+        align-items: center;
+        font-family: PingFang SC;
+
+    }
+    .TName{
+        color: #fff;
         font-weight: 600;
-        width: 80px;
+        width: 150px;
         flex-shrink: 0;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        border-radius: 12px 12px 0 0;
+        height: 28px;
+        padding: 6px 17px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
     }
     .con{
-        margin-left: 10px;
-        /* font-size: 14px; */
-        color: #000;
+        color: #000000E5;
+        border-radius: 0 0 12px 12px;
+        border: 1px solid #E7E7E7;
+        padding: 16px;
+        box-sizing: border-box;
+        box-shadow: 0px 4px 20px 0px #0000001A;
     }
     .left{
         display: flex;
+        flex-direction: column;
         font-size: 16px !important;
         justify-content: flex-start;
-        margin-bottom: 10px;
         line-height: 25px;
-        flex: 1;
-        border-bottom: 1px  #e7e7e7 solid;
+    }
+    .BodyCon{
+        background: #FFFFFF;
+        border: 0.5px solid #E7E7E7;
+        border-radius: 12px;
+        padding: 10px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-bottom: 20px;
+    }
+    .BodyConTit{
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        color: #000;
+    }
+    .BodyConChat{
+        display: flex;
+        flex-direction: column;
     }