修改生成分析页面样式

src/views/reviewManagement/stepComponent/generateAnalysisComponent/GenerateAnalysisComponent.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="page_grades">
+    <div  :class="'score_content_s'">
         <div class="content_center">
             <div class="score_upload">
                 <div class="upload_item">
@@ -34,9 +35,8 @@
                 <el-progress :percentage="percentage" :stroke-width="34" :color="customColor" :show-text="false"></el-progress>
                 <span class="span_progress">{{percentage}}%</span>
             </div>
-            <div class="score_button" >
-                <el-button type="primary" class="button_start" :loading="isLoading"  @click="StartRelease" v-if="!isSucess" >{{ReleaseButtonText}}</el-button>
-                <el-button type="primary" class="button_start" :loading="isLoading" v-else @click="StartRelease">{{ReleaseButtonText}}</el-button>
+            <div class="score_button">
+                <el-button type="primary" class="button_start"  :loading="isLoading" >{{ReleaseButtonText}}</el-button>
             </div>
             <div class="page_jg_20"></div>
             <div class="page_jg_20"></div>
@@ -45,15 +45,15 @@
             </div>
         </div>
     </div>
+</div>
 </template>
 
 
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 
-const percentage = ref(50)
+const percentage = ref(0)
 const customColor = ref('')
 const isLoading = ref(false)
 
@@ -79,174 +79,772 @@ onMounted(async ()=>{
     background-position: 0 0;
     background-size:100% 100%;
     position: relative;
+  
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-       
-    .content_center {
-        width: calc(100% - 100px);
-        margin: auto;
-        .score_progress
+    .score_content_s
+    {
+        width:100%;
+        height:100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .content_center
         {
-            margin-top: 60px;
+            line-height: 1;
+            width: calc(100% - 100px);
+            margin: auto;
+            .score_progress
+            {
+                margin-top: 60px;
+            }
+            .score_button
+            {
+                margin-top: 40px;
+            }
         }
-        .score_button
+    }
+
+     @media (max-height: 600px) 
+    {
+        .score_content
         {
-            margin-top: 40px;
+            width:100%;
+            height:calc(100% - 230px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .content_center
+            {
+                width: calc(100% - 200px);
+                margin: auto;
+            }
+
+        
         }
     }
-
-    .score_upload {
+    .grades_class_list
+    {
         width: 100%;
-        margin: auto;
-        display:flex;
-        justify-content: space-around;
-        align-items: center;
-        height:auto;
-        gap: 38px;
-        .upload_item
+        // min-height: auto;
+        height: auto;
+        padding: 20px;
+        box-sizing: border-box;
+        // display: flex;
+        // justify-content: flex-start;
+        .list_tab
+        {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            gap: 10px;
+        }
+
+        .list_content
         {
-            width: 25%;
-            height: auto;
-            .item_title
+            width: 100%;
+            height: 220px;
+            background: rgba(46,100,250,0.08);
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(46,100,250,0.8);
+            padding: 20px 20px 10px 20px;
+            box-sizing: border-box;
+            .all_check
+            {
+                text-align: left;
+              
+                display: flex;
+                align-items: center;
+            }
+            .content_height
             {
                 width: 100%;
-                text-align: center;
+                height: calc(100% - 30px);
+                overflow-y: auto;
             }
-
-            .item_progress
+            .grades_list
             {
-                width: 150px;
-                height: 150px;
-                margin: auto;
                 display: flex;
-                justify-content: center;
-                align-items: center;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                margin-top: 16px;
+
+                .el-checkbox-group
+                {
+                    display: flex;
+                    justify-content: flex-start;
+                    flex-wrap: wrap;
+                    width: 100%;
+                    .el-checkbox
+                    {
+                        width: 8%;
+                        min-width: 100px;
+                        margin-bottom: 20px;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+        
+        @media (max-height: 600px) 
+        {
+            .list_content
+            {
+                
+                height: 150px !important;
+                
+            }
+        }
+    }
+    
+    .select_exam_content
+    {
+        color: #333333;
+        font-size: 16px;
+        font-weight: 500;
+        left: 20px;
+        top:15px;
+        position: absolute;
+    }
+
 
-                background-size: 100% 100%;
-                background-position: 0 0;
-                background-repeat: no-repeat;
+
+    /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
+    @media (max-height: 600px) 
+    {
+        .score_upload
+        {
+            width: 100%;
+            margin: auto;
+            display:flex;
+            justify-content: space-around;
+            align-items: center;
+            height:auto;
+            gap: 38px;
+            .upload_item
+            {
+                width: 25%;
+                height: auto;
+                .item_title
+                {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                .item_progress
+                {
+                    width: 150px;
+                    height: 150px;
+                    margin: auto;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    background-size: 100% 100%;
+                    background-position: 0 0;
+                    background-repeat: no-repeat;
+                }
+
+                .item_text
+                {
+                    width: 100%;
+                    // height: 30px;
+                    // line-height: 30px;
+                    text-align: center;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #666666;
+                
+                }
+
+                .grades_bg_1
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
+                }
+
+                .grades_bg_2
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
+                }
+
+                .grades_bg_3
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
+                }
+
+                .grades_bg_4
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
+                }
+                
             }
 
-            .item_text
+
+            
+        }
+
+        // 成绩汇总进度条
+        .score_progress
+        {
+            width: 100%;
+            margin-top: 20px;
+            display: flex;
+            // justify-content: space-around;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+
+            .el-progress
             {
-                width: 100%;
-                // height: 30px;
-                // line-height: 30px;
-                text-align: center;
+                width: calc(100% - 430px);    
+
+                .el-progress-bar__inner
+                {
+                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
+                    border-radius: 10px 0px 0px 10px;
+                }
+
+                .el-progress-bar__outer
+                {
+                    background-color: #F3F3F3 !important;
+                    border:1px solid #2796FF;
+
+                }
+            }
+
+            .span_title
+            {
+                width: 130px;
+
                 font-weight: 400;
-                font-size: 20px;
+                font-size: 24px;
                 color: #666666;
-            
             }
 
-            .grades_bg_1
+            .span_progress
             {
-                background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
+                width: 100px;
+
+                font-weight: 600;
+                font-size: 30px;
+                color: #0879FC;
+
+                
+            }
+        }
+        .score_button
+        {
+            width: 100%;
+            height: 60px;
+            margin-top: 20px;
+            font-size: 14px;
+            font-weight: 500;
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            .button_start
+            {
+                width: 200px;
+                height: 42px;
+                background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #FFFFFF;
             }
 
-            .grades_bg_2
+            //客观题发布
+            .object_button
             {
-                background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
+                width: 200px;
+                height: 52px;
+                border-radius: 4px 4px 4px 4px;
+                border: 1px solid #2E64FA;
+
+                font-weight: 500;
+                font-size: 16px;
+                color: #2E64FA;
             }
 
-            .grades_bg_3
+            .button_start_disabled
+            {
+                width: 200px;
+                height: 42px;
+                background: #F3F3F3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #C0C4CC;
+            }
+            //重新发布
+            .score_button_again
             {
-                background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
+                width: 240px;
+                height: 42px;
+                font-size: 14px;
+                font-weight: 500;
             }
 
-            .grades_bg_4
+            //置灰 不可点击
+            .button_disabled
             {
-                background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
+                width: 200px;
+                height: 42px;
+                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
+                background-color: #f3f3f3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #c0c4cc;
             }
-            
-        }
 
+        
+        }
 
+        .score_message
+        {
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            font-weight: 400;
+            font-size: 14px;
+            color: #666666;
         
+        }
+
     }
-    // 成绩汇总进度条
-    .score_progress  {
-        width: 100%;
-        margin-top: 20px;
-        display: flex;
-        // justify-content: space-around;
-        justify-content: center;
-        align-items: center;
-        gap: 20px;
 
-        .el-progress
+    /* 屏幕高度在767-到1440之间时 常见分辨率：1600x900, 1920x1080*/
+    @media (min-height: 600px) and (max-height: 900px) 
+    {
+        .score_upload
         {
-            width: calc(100% - 430px);    
+            width: 100%;
+            margin: auto;
+            display:flex;
+            justify-content: space-around;
+            align-items: center;
+            height:auto;
+            gap: 38px;
+            .upload_item
+            {
+                width: 25%;
+                height: auto;
+                .item_title
+                {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                .item_progress
+                {
+                    width: 200px;
+                    height: 200px;
+                    margin: auto;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    background-size: 100% 100%;
+                    background-position: 0 0;
+                    background-repeat: no-repeat;
+                }
+
+                .item_text
+                {
+                    width: 100%;
+                    // height: 30px;
+                    // line-height: 30px;
+                    text-align: center;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #666666;
+                
+                }
+
+                .grades_bg_1
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
+                }
+
+                .grades_bg_2
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
+                }
+
+                .grades_bg_3
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
+                }
+
+                .grades_bg_4
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
+                }
+                
+            }
 
-            .el-progress-bar__inner
+
+            
+        }
+
+        // 成绩汇总进度条
+        .score_progress
+        {
+            width: 100%;
+            margin-top: 20px;
+            display: flex;
+            // justify-content: space-around;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+
+            .el-progress
             {
+                width: calc(100% - 430px);    
+
+                .el-progress-bar__inner
+                {
+                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
+                    border-radius: 10px 0px 0px 10px;
+                }
+
+                .el-progress-bar__outer
+                {
+                    background-color: #F3F3F3 !important;
+                    border:1px solid #2796FF;
+
+                }
+            }
+
+            .span_title
+            {
+                width: 130px;
+
+                font-weight: 400;
+                font-size: 24px;
+                color: #666666;
+            }
+
+            .span_progress
+            {
+                width: 100px;
+
+                font-weight: 600;
+                font-size: 30px;
+                color: #0879FC;
+
+                
+            }
+        }
+        .score_button
+        {
+            width: 100%;
+            height: 60px;
+            margin-top: 20px;
+            font-size: 14px;
+            font-weight: 500;
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+
+            .button_start
+            {
+                width: 200px;
+                height: 52px;
                 background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
-                border-radius: 10px 0px 0px 10px;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #FFFFFF;
             }
 
-            .el-progress-bar__outer
+            
+            //客观题发布
+            .object_button
             {
-                background-color: #F3F3F3 !important;
-                border:1px solid #2796FF;
+                width: 200px;
+                height: 52px;
+                border-radius: 4px 4px 4px 4px;
+                border: 1px solid #2E64FA;
+
+                font-weight: 500;
+                font-size: 16px;
+                color: #2E64FA;
+            }
+            .button_start_disabled
+            {
+                width: 200px;
+                height: 52px;
+                background: #F3F3F3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #C0C4CC;
+            }
+            //重新发布
+            .score_button_again
+            {
+                width: 240px;
+                height: 52px;
+                font-size: 14px;
+                font-weight: 500;
+            }
 
+            //置灰 不可点击
+            .button_disabled
+            {
+                width: 200px;
+                height: 52px;
+                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
+                background-color: #f3f3f3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #c0c4cc;
             }
+
+        
         }
 
-        .span_title
+        .score_message
         {
-            width: 130px;
-
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
             font-weight: 400;
-            font-size: 24px;
+            font-size: 14px;
             color: #666666;
+        
         }
+    }
 
-        .span_progress
+    /* 当屏幕高度至少为1440px时应用的样式  常见分辨率：2560x1440*/
+    @media screen and (min-height:900px) 
+    {
+        .score_upload
         {
-            width: 100px;
+            width: 100%;
+            margin: auto;
+            display:flex;
+            justify-content: space-around;
+            align-items: center;
+            height:auto;
+            gap: 38px;
+            .upload_item
+            {
+                width: 25%;
+                height: auto;
+                .item_title
+                {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                .item_progress
+                {
+                    width: 200px;
+                    height: 200px;
+                    margin: auto;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    background-size: 100% 100%;
+                    background-position: 0 0;
+                    background-repeat: no-repeat;
+                }
+
+                .item_text
+                {
+                    width: 100%;
+                    // height: 30px;
+                    // line-height: 30px;
+                    text-align: center;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #666666;
+                
+                }
+
+                .grades_bg_1
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
+                }
+
+                .grades_bg_2
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
+                }
+
+                .grades_bg_3
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
+                }
+
+                .grades_bg_4
+                {
+                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
+                }
+                
+            }
 
-            font-weight: 600;
-            font-size: 30px;
-            color: #0879FC;
 
             
         }
-    }
-    .score_button {
-        width: 100%;
-        height: 60px;
-        margin-top: 20px;
-        font-size: 14px;
-        font-weight: 500;
-        display: flex;
-        justify-content: center;
-        gap: 40px;
-        .button_start
-        {
-            width: 200px;
-            height: 42px;
-            background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
-            border-radius: 4px 4px 4px 4px;
-            border:none;
-            font-weight: 600;
-            font-size: 16px;
-            color: #FFFFFF;
+
+        // 成绩汇总进度条
+        .score_progress
+        {
+            width: 100%;
+            margin-top: 60px;
+            display: flex;
+            // justify-content: space-around;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+
+            .el-progress
+            {
+                width: calc(100% - 430px);    
+
+                .el-progress-bar__inner
+                {
+                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
+                    border-radius: 10px 0px 0px 10px;
+                }
+
+                .el-progress-bar__outer
+                {
+                    background-color: #F3F3F3 !important;
+                    border:1px solid #2796FF;
+
+                }
+            }
+
+            .span_title
+            {
+                width: 130px;
+
+                font-weight: 400;
+                font-size: 24px;
+                color: #666666;
+            }
+
+            .span_progress
+            {
+                width: 100px;
+
+                font-weight: 600;
+                font-size: 30px;
+                color: #0879FC;
+
+                
+            }
         }
-    
-    }
+        .score_button
+        {
+            width: 100%;
+            height: 60px;
+            margin-top: 60px;
+            font-size: 14px;
+            font-weight: 500;
+            display: flex;
+            justify-content: center;
 
-    .score_message {
-        width: 100%;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        font-weight: 400;
-        font-size: 14px;
-        color: #666666;
-    
+            gap: 40px;
+            .button_start
+            {
+                width: 200px;
+              
+                height: 52px;
+                background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #FFFFFF;
+            }
+
+            //客观题发布
+            .object_button
+            {
+                width: 200px;
+                height: 52px;
+                border-radius: 4px 4px 4px 4px;
+                border: 1px solid #2E64FA;
+
+                font-weight: 500;
+                font-size: 16px;
+                color: #2E64FA;
+            }
+
+            .button_start_disabled
+            {
+                width: 200px;
+                height: 52px;
+                background: #F3F3F3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #C0C4CC;
+            }
+            //重新发布
+            .score_button_again
+            {
+                width: 240px;
+                height: 52px;
+                font-size: 14px;
+                font-weight: 500;
+            }
+
+            //置灰 不可点击
+            .button_disabled
+            {
+                width: 200px;
+                height: 52px;
+                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
+                background-color: #f3f3f3;
+                border-radius: 4px 4px 4px 4px;
+                border:none;
+                font-weight: 600;
+                font-size: 16px;
+                color: #c0c4cc;
+            }
+
+        
+        }
+
+        .score_message
+        {
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            font-weight: 400;
+            font-size: 14px;
+            color: #666666;
+        
+        }
     }
+
 }
 
+
+.page_grades .score_progress .el-progress{
+     :deep(.el-progress-bar__outer) {
+        background-color: #F3F3F3 !important;
+        border: 1px solid #2796FF;
+        box-sizing: content-box;
+
+    }
+}
 </style>