风险按照风险等级显示不同背景色20230726

src/views/riskProject/add/resultPage.vue

@@ -3,8 +3,8 @@
         <LHeader :text="text"></LHeader>
         <div class="section">
             <p>该次测评风险值为：</p>
-            <div class="resultScore">
-                <p style="font-weight: bold;font-size: 20px;">{{ this.$route.params.score }}</p>
+            <div class="resultScore" :style="{ background: backgroundColor}" >
+                <p style="font-weight: bold;font-size: 20px;color: white;">{{ this.$route.params.score }}</p>
             </div>
             <p>本次评估结果评定为：{{ level }}</p>
             <van-divider></van-divider>
@@ -34,7 +34,8 @@ import LHeader from "@/components/header.vue";
             return{
                 text:'测评结果',
                 score:0,
-                level:''
+                level:'',
+                backgroundColor:'',
             }
         },
         created(){
@@ -45,6 +46,8 @@ import LHeader from "@/components/header.vue";
                 getFun(`/risk/plan/matrix/score/${this.$route.params.score}`).then(res=>{
                     this.level = res.data.level
                     this.score  = res.data.max
+
+                    this.backgroundColor=this.level=='一般风险'?"#FFFF00":this.level=='较小风险'?"#0091EA":this.level=='较大风险'?"#FF9800":this.level=='重大风险'?"#FF4433":"orange";
                 })
             },
             resetClose(){
@@ -88,6 +91,6 @@ import LHeader from "@/components/header.vue";
         border-radius: 50%;
         margin: 0 auto;
     }
-    
+
 }
-</style>
\ No newline at end of file
+</style>