报告预览静态页完成

src/components/reportList/index.vue

@@ -112,7 +112,6 @@
 
   const emit = defineEmits(['toggleReport','deleteReport','sendReport','reCreateReport','refreshReportList'])
   const toggleReport = (item) => {
-    isTeam.value = false;
     return pdfShow.value = true;
 
     if(isTeam.value){

src/components/reportPdf/pdf.scss

@@ -1,6 +1,7 @@
 .cd_box{
     padding: 20px 0 30px;
     box-sizing: border-box;
+    border-top: 1px solid red !important;
     position: relative;
     height: 890px;
     color: #111111;
@@ -1310,9 +1311,12 @@
                 font-family: PingFangSC, PingFang SC;
                 font-weight: 400;
                 font-size: 10px;
-                color: #002846;
+                color: #FFFFFF;
                 line-height: 14px;
                 border-bottom: 1px solid #FFFFFF;
+                &.black{
+                    color: #002846;
+                }
             }
             .vbtp-right{
                 width: calc(100% - 110px);
@@ -1364,5 +1368,142 @@
                 }
             }
         }
+
+        .vbt-th{
+            height: 26px;
+            border-radius: 4px 4px 0px 0px;
+            border-bottom: 1px solid #FFFFFF;
+            &>div{
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 10px;
+                color: #FFFFFF;
+                line-height: 26px;
+                text-align: center;
+            }
+            &.black{
+                &>div{
+                    color: #002846;
+                }
+            }
+        }
+        .vbtt-w1{
+            width: 72px !important;
+        }
+        .vbtt-w2{
+            width: 46px !important;
+        }
+        .vbtt-w3{
+            flex: 1 !important;
+        }
+
+        .vbtp-num{
+            font-family: DIN, DIN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #667E90;
+            text-align: center;
+            line-height: 44px;
+            &.green{
+                color: #199C9C;
+            }
+        }
+
+        .vbtp-desc{
+            height: 44px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .vbtpd-title{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 9px;
+                color: #193D59;
+                line-height: 10px;
+            }
+            .xr_tb{
+                width: calc(100% - 20px);
+                height: 4px;
+                margin-top: 11px;
+                position: relative;
+                .xt_pre{
+                    width: calc(100% / 3);
+                    height: 100%;
+                    &.p1{
+                        background: #BA8EB4;
+                    }
+                    &.p2{
+                        background: #66BDBD;
+                    }
+                    &.p3{
+                        background: #AFCDF5;
+                    }
+                }
+                .xt_score{
+                    position: absolute;
+                    left: 14px;
+                    top: -9px;
+                    .xts_num{
+                        background: #FFFFFF;
+                        box-shadow: 0px 4px 10px 0px rgba(118,30,106,0.08);
+                        border-radius: 4px;
+                        border: 1px solid rgba(131,52,120,0.19);
+                        font-family: DIN, DIN;
+                        font-weight: bold;
+                        font-size: 12px;
+                        color: #904A87;
+                        line-height: 10px;
+                        padding: 4px 7px;
+                        white-space: nowrap;
+                        &.red{
+                            color: #904A87;
+                        }
+                        &.green{
+                            color: #199C9C;
+                        }
+                    }
+                    .xts_box{
+                        flex: 1;
+                        height: 8px;
+                        background: #199C9C;
+                    }
+                }
+            }
+        }
+    }
+
+    .vb-category{
+        position: absolute;
+        top: 80px;
+        left: 16px;
+        .vbc-pre{
+            margin-top: 16px;
+            .vbcp-yuan{
+                width: 10px;
+                height: 10px;
+                border-radius: 5px;
+                &.y1{
+                    background: #9F6196;
+                }
+                &.y2{
+                    background: #AFCDF5;
+                }
+                &.y3{
+                    background: #FFD650;
+                }
+                &.y4{
+                    background: #012846;
+                }
+            }
+            .vbcp-text{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #002846;
+                line-height: 10px;
+                margin-left: 8px;
+            }
+        }
     }
 }

src/components/reportPdf/pdfUser.vue

@@ -82,7 +82,7 @@
                     <div class="v2-p2" style="margin-top: 16px;">评分总体分布</div>
                     <div class="vb-table" :style="{'border':'1px solid '+item.bcolor}">
                         <div class="vbt-pre adfac" v-for="i in 5" :key="item">
-                            <div class="vbtp-left adfacjc" :style="{'background':item.bcolor}">{{ '宗旨共融，同心共识' }}</div>
+                            <div class="vbtp-left adfacjc" :class="{'black':item.title==='目的与动机'}" :style="{'background':item.titlecolor}">{{ '宗旨共融，同心共识' }}</div>
                             <div class="vbtp-right" :style="{'border':'1px solid '+item.bcolor}">
                                 <div class="vbtpr-title">{{ '团队成员能够共同阐述其共享目的，并且在团队使命上保持高度一致。' }}</div>
                                 <div class="vbtpr-jd">
@@ -252,22 +252,22 @@
         // reportData.value = props.reportData;
         reportData.value = {
             dimensionAnalysis:[
-                {title:'目的与动机',bcolor:'#FFE796',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
+                {title:'目的与动机',bcolor:'#FFE796',titlecolor:'#FFE796',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
                     pfztfb:'linear-gradient( 90deg, #FEDA60 0%, #FBE182 100%)',
                     desc:`「宗旨与动机」维度，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同的目标，并达成一致。`},
-                {title:'外部流程及系统与架构',bcolor:'#E4D2E1',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
+                {title:'外部流程及系统与架构',bcolor:'#E4D2E1',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
                     pfztfb:'linear-gradient( 90deg, #833479 0%, #9F6196 100%)',
                     desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同的期望和需求。`},
-                {title:'人际关系',bcolor:'#B3DEDE',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
+                {title:'人际关系',bcolor:'#B3DEDE',titlecolor:'#66BDBD',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
                     pfztfb:'linear-gradient( 90deg, #189B9B 0%, #64BBBB 100%)',
                     desc:`「人际关系」维度，我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度，以及团队成员之间的关系如何促进（或破坏）协作。`},
-                {title:'内部流程及系统与架构',bcolor:'#C7DCF8',wddf:'linear-gradient( 90deg, #E3ECF8 0%, #F2F5F9 100%)',
+                {title:'内部流程及系统与架构',bcolor:'#C7DCF8',titlecolor:'#95BDF1',wddf:'linear-gradient( 90deg, #E3ECF8 0%, #F2F5F9 100%)',
                     pfztfb:'linear-gradient( 90deg, #7AABED 0%, #AFCDF5 100%)',
                     desc:`「内部流程、系统与结构」维度，我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
-                {title:'学习',bcolor:'#E6EAED',wddf:'linear-gradient( 90deg, #EDF0F2 0%, #F2F4F6 100%)',
+                {title:'学习',bcolor:'#E6EAED',titlecolor:'#8093A3',wddf:'linear-gradient( 90deg, #EDF0F2 0%, #F2F4F6 100%)',
                     pfztfb:'linear-gradient( 90deg, #4D697E 0%, #8093A3 100%)',
                     desc:`「学习」维度，我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
-                {title:'领导力',bcolor:'#D4EDF8',wddf:'linear-gradient( 90deg, #E6F5FB 0%, #F3FCFB 100%)',
+                {title:'领导力',bcolor:'#D4EDF8',titlecolor:'#3BB6D9',wddf:'linear-gradient( 90deg, #E6F5FB 0%, #F3FCFB 100%)',
                     pfztfb:'linear-gradient( 90deg, #0096D8 0%, #5CC9DA 100%)',
                     desc:`「领导力」维度，我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响，以及这是积极的还是消极的。`}
             ]