报告页面修改完毕

src/views/Report.vue

@@ -6,10 +6,14 @@ import * as echarts from 'echarts'
 import CpmdHeader from '@/components/CpmdHeader.vue';
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 //雷达图
 const echarts_ld = ref<any>()
+
+//设置
+
+
 const option = reactive({
     title: {
         // text: 'Basic Radar Chart'
@@ -110,6 +114,7 @@ const option = reactive({
 })
 
 const route = useRoute()
+
 //此处应该是唯一的报告ID
 const id = ref<string>('')
 //持久化设置 菜单状态
@@ -125,12 +130,12 @@ onMounted(() => {
     myChart.setOption(option);
 })
 //界面销毁函数
-
-//跳转页面切换页面
-const viewReport = () => {
-
+const router = useRouter()
+const backFun = () => {
+    router.go(-1)
 }
 
+
 //轮旋切换页面的方法
 
 //退出页面销毁 方法
@@ -168,11 +173,38 @@ onUnmounted(() => {
                         </div>
                     </div>
                     <div class="report_echarts_out">
-                        <div ref="echarts_ld" style="width:400px;height:300px">
+                        <div ref="echarts_ld" style="width:500px;height:600px">
+
+                        </div>
+                        <div
+                            style="display: flex;flex-direction: column;align-items: center;width: 50%; justify-content: space-around;padding-top: 40px;padding-bottom: 40px;">
+                            <div class="progress_out" v-for="item in 6">
+                                <span class="progress_out_name" style="width:150px">
+                                    阳光指数
+                                </span>
+                                <span class="progress_out_score">40</span>
+                                <el-progress :percentage="40" style="width:100%" :stroke-width="18" :show-text='false'
+                                    color="linear-gradient(to right,#FF4E00 ,#ffffff)" />
+                            </div>
+
 
                         </div>
                     </div>
 
+                    <div v-for="item in 4" style="padding-top:60px">
+                        <div class="des_zhishu">阳光指数</div>
+                        <div class="report_des_out">
+                            <div class="score">分数：30.00</div>
+                            <div class="score">分析报告：</div>
+                            <div class="des">就像一颗刚破土的嫩芽，满载着成长的无限可能。每一次挑战都是阳光雨露，滋养着你向上生长。保持乐观，加把劲，未来的天空因你而更加绚烂！</div>
+                        </div>
+                    </div>
+
+                    <div class="start_button_out">
+                        <div @click="backFun" class="start_button_self">返回</div>
+                    </div>
+
+
                 </div>
 
             </div>
@@ -284,11 +316,86 @@ onUnmounted(() => {
                 margin-top: 100px;
                 background-color: #F7F7F7;
                 border-radius: 40px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
                 // height: 200px;
+                .progress_out {
+                    margin-bottom: 20px;
+                    width: 100%;
+                    display: flex;
+                    justify-content: start;
+                    flex-direction: row;
+                    align-items: center;
+                    margin-right: 40px;
+
+                    .progress_out_name {
+                        color: #000000;
+                        font-weight: 600;
+                    }
+
+                    .progress_out_score {
+                        color: #FF1E00;
+                        font-weight: 600;
+                        margin-right: 5px;
+
+                    }
+                }
+            }
+
+
+            .des_zhishu {
+                color: #222222;
+                font-size: 49px;
+                letter-spacing: 3px;
             }
 
+            .report_des_out {
+                margin-top: 40px;
+                background-color: #F7F7F7;
+                padding: 20px 40px;
+                border-radius: 40px;
+
+                .score {
+                    color: #48D68E;
+                    font-size: 30px;
+                    line-height: 60px;
+                    letter-spacing: 3px;
 
+                }
 
+                .des {
+                    color: #000000;
+                    font-size: 24px;
+                    line-height: 40px;
+                    letter-spacing: 3px;
+                }
+
+            }
+
+            .start_button_out {
+                margin-top: 100px;
+                margin-bottom: 40px;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                .start_button_self {
+                    cursor: pointer;
+                    // width: 100px;
+                    border-radius: 12px;
+                    border: 3px solid #48D68E;
+                    color: #ffffff;
+                    background-color: #000000;
+                    margin-right: 20px;
+                    padding: 8px 60px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+
+                }
+            }
 
         }
     }