基础版报告pdf页面静态页完成

src/components/reportPdf/pdf.scss

@@ -2,7 +2,7 @@
     padding: 20px 0 30px;
     box-sizing: border-box;
     position: relative;
-    border-top: 1px solid rgba(0,0,0,.4);
+    border-top: 1px solid rgba(0,0,0,.4) !important;
     height: 890px;
     color: #111111;
     .cb_db{
@@ -71,6 +71,56 @@
         background: url('@/assets/images/report/fm_bg.png') no-repeat;
         background-size: 100% 100%;
         position: relative;
+    } 
+    &.fm2{
+        background: url('@/assets/images/versionTwo/fm_bg.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        justify-content: flex-end;
+        padding: 0 40px 30px;
+        box-sizing: border-box;
+    }
+    .fm2-logo{
+        width: 163px;
+        height: 44px;
+        position: absolute;
+        top: 48px;
+        left: 30px;
+    }
+    .fm2-perill{
+        width: 308px;
+        height: 58px;
+    }
+    .fm2-line{
+        width: calc(100% - 87px);
+        height: 1px;
+        background: rgba(255,255,255,0.12);
+        margin-top: 12px;
+    }
+    .fm2-p{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 40px;
+        color: #FFDF73;
+        line-height: 48px;
+        margin-top: 12px;
+    }
+    .fm2-texts{
+        margin-top: 15px;
+        overflow: hidden;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    
+    .fm2-texts-pre{
+        width: 50%;
+        margin-top: 15px;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 12px;
+        text-align: left;
     }
 
     .fm_img{
@@ -299,7 +349,6 @@
         }
     }
 
-
     .mddj_title{
         img{
             width: 65px;
@@ -866,7 +915,6 @@
             margin-top: 7px;
         }
     }
-
     
     .cb_content{
         &.box_dj{
@@ -1010,4 +1058,310 @@
             }
         }
     }
+
+    .v2-top{
+        width: 100%;
+        height: 49px;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 0 8px 0 32px;
+        .vt-left{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 24px;
+            color: #FFFFFF;
+            span{
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 600;
+                font-size: 20px;
+                color: #199C9C;
+                margin-left: 40px;
+            }
+            &.black{
+                color: #002846;
+            }
+        }
+        .vt-right{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 8px;
+            color: #002846;
+            line-height: 14px;
+            text-align: right;
+        }
+    }
+
+    .v2-box{
+        margin-top: 13px;
+        background: #FFFFFF;
+        border-radius: 10px;
+        border: 1px solid #33A7A7;
+        padding: 16px 16px 18px;
+        position: relative;
+        .vb-img1{
+            width: 48px;
+            height: 6px;
+            position: absolute;
+            left: 12px;
+            top: -3px;
+        }
+        .vb-img2{
+            width: 44px;
+            height: 20px;
+            position: absolute;
+            left: 16px;
+            bottom: -10px;
+        }
+    }
+
+    .v2-p{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 10px;
+        color: #002846;
+        line-height: 16px;
+        span{
+            font-family: DIN, DIN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #009191;
+            line-height: 14px;
+            margin: 0 10px;
+        }
+    }
+    .v2-p2{
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 12px;
+        color: #002846;
+        line-height: 16px;
+    }
+    .v2-p3{
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 14px;
+        color: #002846;
+        line-height: 20px;
+    }
+
+    .v2-six{
+        flex: 1;
+        margin-top: 29px;
+        background: #F1F9F9;
+        border-radius: 10px;
+        position: relative;
+        padding: 46px 16px 25px;
+        .vsix-title{
+            width: 234px;
+            height: 42px;
+            background: url('@/assets/images/versionTwo/intro_box_title_bg.png') no-repeat;
+            background-size: 100% 100%;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 20px;
+            color: #FFFFFF;
+            line-height: 42px;
+            text-align: center;
+            position: absolute;
+            left: 50%;
+            margin-left: -117px;
+            top: -10px;
+        }
+        .vsix-p{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #002846;
+            line-height: 16px;
+        }
+        .vsix-boxs{
+            margin-top: 16px;
+            overflow: hidden;
+            .vsb{
+                margin-top: 2px;
+                background: #FFFFFF;
+                border-radius: 8px;
+                padding: 12px 16px 12px 24px;
+                .vsb-img{
+                    width: 48px;
+                    height: 48px;
+                }
+                .vsb-right{
+                    width: calc(100% - 77px);
+                    margin-left: 29px;
+                    padding-left: 24px;
+                    box-sizing: border-box;
+                    position: relative;
+                    &::before{
+                        content: '';
+                        width: 1px;
+                        height: 48px;
+                        background: #E6EAED;
+                        position: absolute;
+                        left: 0;
+                        top: 50%;
+                        margin-top: -24px;
+                    }
+                    .vsbr-top{
+                        .vsbrt-type{
+                            width: 24px;
+                            height: 24px;
+                            border-radius: 4px;
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: bold;
+                            font-size: 20px;
+                            color: #FFFFFF;
+                            line-height: 24px;
+                            text-align: center;
+                        }
+                        .vsbrt-title{
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: bold;
+                            font-size: 14px;
+                            line-height: 16px;
+                            margin-left: 8px;
+                        }
+                    }
+                    .vsbr-desc{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: #002846;
+                        line-height: 16px;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    .v2-data{
+        background: #FFFFFF;
+        border-radius: 10px;
+        border: 1px solid #AEDADA;
+        width: calc(100% - 9px);
+        padding: 46px 16px 16px;
+        margin: 32px 0 0 8px;
+        position: relative;
+        .vd-title{
+            width: 134px;
+            height: 44px;
+            background-size: 100%;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 600;
+            font-size: 18px;
+            color: #FFFFFF;
+            line-height: 30px;
+            padding-left: 24px;
+            box-sizing: border-box;
+            position: absolute;
+            top: -1px;
+            left: -9px;
+            &.vt2{
+                width: 224px;
+            }
+            &.vt3{
+                line-height: 36px;
+            }
+            &.black{
+                color: #002846;
+            }
+        }
+    }
+
+    .vd-wd{
+        margin-top: 8px;
+        width: 100%;
+        height: 34px;
+        border-radius: 6px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        .vdwd-pre{
+            width: 30%;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #4D697E;
+            line-height: 34px;
+            text-align: left;
+            &.vp{
+                width: 40%;
+            }
+            span{
+                font-family: DIN, DIN;
+                font-weight: bold;
+                font-size: 14px;
+                color: #002846;
+                line-height: 20px;
+            }
+        }
+    }
+
+    .vb-table{
+        margin-top: 11px;
+        border: 1px solid #FFE796;
+        border-radius: 4px;
+        .vbt-pre{
+            height: 49px;
+            .vbtp-left{
+                width: 110px;
+                height: 49px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #002846;
+                line-height: 14px;
+                border-bottom: 1px solid #FFFFFF;
+            }
+            .vbtp-right{
+                width: calc(100% - 110px);
+                height: 49px;
+                padding: 0 18px;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                .vbtpr-title{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 9px;
+                    color: #193D59;
+                    line-height: 10px;
+                }
+                .vbtpr-jd{
+                    margin-top: 9px;
+                    width: 100%;
+                    height: 6px;
+                    background: #F0F2F8;
+                    border-radius: 3px;
+                    position: relative;
+                    .vj_num{
+                        position: absolute;
+                        height: 6px;
+                        left: 0;
+                        top: 0;
+                    }
+                    .vj-val{
+                        background: #FFFFFF;
+                        border-radius: 4px;
+                        padding: 4px 7px;
+                        font-family: DIN, DIN;
+                        font-weight: bold;
+                        font-size: 12px;
+                        color: #002846;
+                        line-height: 10px;
+                        position: absolute;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        z-index: 2;
+                    }
+                }
+            }
+            &:last-child{
+                .vbtp-left,.vbtp-right{
+                    border: none;
+                }
+            }
+        }
+    }
 }