Explorar el Código

按照最新设计图已有部分更新样式和内容

htc hace 5 días
padre
commit
3cbfa83551
Se han modificado 2 ficheros con 454 adiciones y 25 borrados
  1. 226 10
      src/components/reportPdf/pdf.scss
  2. 228 15
      src/components/reportPdf/pdf.vue

+ 226 - 10
src/components/reportPdf/pdf.scss

@@ -38,6 +38,14 @@
         margin-top: 20px;
     }
 
+    .bp{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 20px;
+        color: #252525;
+        line-height: 24px;
+    }
+
     .big_title{
         font-family: STSongti-SC, STSongti-SC;
         font-weight: 400;
@@ -90,10 +98,14 @@
         }
     }
 
-    &.js{
-        .cb_content{
-            padding: 28px 32px 0;
+    .cb_content{
+        padding: 28px 32px 0;
+        &.jxpjmddj{
+            padding: 28px 0 0;
         }
+    }
+
+    &.js{
         .js_boxs{
             margin-top: 26px;
             display: flex;
@@ -149,6 +161,51 @@
                         margin-top: 14px;
                     }
                 }
+                &.jp1{
+                    border: 2px solid #9374B5;
+                    .jbp_zm{
+                        background: #9374B5;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #9374B5;
+                    }
+                }
+                &.jp2{
+                    border: 2px solid #8C95DC;
+                    .jbp_zm{
+                        background: #8C95DC;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #8C95DC;
+                    }
+                }
+                &.jp3{
+                    border: 2px solid #5D7EE5;
+                    .jbp_zm{
+                        background: #5D7EE5;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #5D7EE5;
+                    }
+                }
+                &.jp4{
+                    border: 2px solid #61B7C8;
+                    .jbp_zm{
+                        background: #61B7C8;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #61B7C8;
+                    }
+                }
+                &.jp5{
+                    border: 2px solid #B6C38D;
+                    .jbp_zm{
+                        background: #B6C38D;
+                    }
+                    .jbp_title{
+                        border-bottom: 2px solid #B6C38D;
+                    }
+                }
             }
         }
         .js_single_box{
@@ -156,13 +213,13 @@
             width: 100%;
             height: 112px;
             border-radius: 0px 18px 0px 18px;
-            border: 2px solid #761E6A;
+            border: 2px solid #484EAE;
             padding-bottom: 10px;
             position: relative;
             .jsb_zm{
                 width: 32px;
                 height: 32px;
-                background: #761E6A;
+                background: #484EAE;
                 font-family: PingFang-SC, PingFang-SC;
                 font-weight: bold;
                 font-size: 22px;
@@ -190,7 +247,7 @@
                 }
             }
             .jsb_r{
-                border-left: 2px solid #761E6A;
+                border-left: 2px solid #484EAE;
                 padding: 10px 22px;
                 flex: 1;
                 font-family: STSongti-SC, STSongti-SC;
@@ -210,11 +267,11 @@
             height: 45px;
         }
         span{
-            font-family: FZZCHJW--GB1, FZZCHJW--GB1;
-            font-weight: normal;
-            font-size: 48px;
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 800;
+            font-size: 40px;
             color: #761E6A;
-            line-height: 58px;
+            line-height: 40px;
             margin-left: 8px;
         }
     }
@@ -320,4 +377,163 @@
         color: #F09216;
         margin-top: 20px;
     }
+
+    .mddj_boxs{
+        margin-top: 10px;
+        .mb_item{
+            padding: 20px 0;
+            border-bottom: 1px dotted #833478;
+
+            .mbi_title{
+                background: rgba(131,52,120,0.12);
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 10px;
+                color: #761E6A;
+                line-height: 14px;
+                padding: 5px;
+                display: inline;
+            }
+            .mbi_text{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #111111;
+                line-height: 14px;
+                margin-top: 10px;
+            }
+        }
+    }
+
+    .cyfx_boxs{
+        margin-top: 25px;
+        display: flex;
+        .cyfxb_box{
+            width: calc(100% / 4 - 1px);
+            border-left: 1px dotted #C1C7D2;
+            padding: 0 5px;
+            box-sizing: border-box;
+            .cbb_top{
+                padding: 9px 0;
+                border-bottom: 1px dotted #C1C7D2;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 600;
+                font-size: 20px;
+                color: #93C000;
+                line-height: 24px;
+                text-align: right;
+                &.red{
+                    color: #F31616;
+                }
+            }
+            .cbb_bottom{
+                .cbbb_item{
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-top: 10px;
+                    min-height: 64px;
+                    .ci_l{
+                        width: calc(100% - 42px);
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: #252525;
+                        line-height: 16px;
+                        padding-right: 10px;
+                        box-sizing: border-box;
+                    }
+                    .ci_r{
+                        width: 42px;
+                        height: 42px;
+                        .circle {
+                            position: relative;
+                            width: 39px;
+                            height: 39px;
+                            border-radius: 50%;
+                            border: 3px solid #E5E5E5;
+                            background-color: transparent;
+                        }
+                
+                        .semi-circle {
+                            position: absolute;
+                            top: -3px;
+                            right: -3px;
+                            width: 39px;
+                            height: 39px;
+                            border-radius: 100%;
+                            background: conic-gradient(
+                                #93C000 0deg,                          /* 起始点 */
+                                #93C000 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分,使用透明 */
+                                transparent 360deg                 /* 圆的结束 */
+                            );
+                            z-index: 2;
+                            &.red{
+                                background: conic-gradient(
+                                    #F31616 0deg,                          /* 起始点 */
+                                    #F31616 calc(var(--percentage, 0) * 3.6deg), /* 切割范围 */
+                                    transparent calc(var(--percentage, 0) * 3.6deg), /* 切割的部分,使用透明 */
+                                    transparent 360deg                 /* 圆的结束 */
+                                );
+                            }
+                        }
+                
+                        .number {
+                            position: absolute;
+                            width: 100%;
+                            height: 100%;
+                            left: 0;
+                            top: 0;
+                            background: #FFFFFF;
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: 800;
+                            font-size: 18px;
+                            color: #93C000;
+                            z-index: 3;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
+                            border-radius: 50%;
+                            &.red{
+                                color: #F31616;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .jxpjmddj_box{
+        border-radius: 0px 6px 0px 6px;
+        border: 1px solid #E5E7EB;
+        margin-top: 20px;
+        padding: 8px;
+        .jb_title{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #252525;
+            line-height: 16px;
+        }
+        .jb_title2{
+            margin-top: 12px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #761E6A;
+            line-height: 16px;
+        }
+        .jb_text{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #252525;
+            line-height: 16px;
+            margin-top: 10px;
+        }
+    }
 }

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 228 - 15
src/components/reportPdf/pdf.vue