修改SOP页面样式

src/views/qw/sopTemp/updateSopTemp.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="app-container sop-temp-container">
+  <div class="app-container sop-temp-container" 
+       v-loading="!form.id" 
+       element-loading-text="页面加载中..."
+       element-loading-background="rgba(255, 255, 255, 0.95)">
     <!-- 页面头部 -->
 <!--    <div class="page-header">-->
 <!--      <div class="header-title">-->
@@ -88,7 +91,7 @@
               <el-badge slot="label" :is-dot="!item.id" class="item" style="display: inline-block">
                 <span>{{ '第' + item.dayNum + '天' }}</span>
               </el-badge>
-              <el-row v-loading="loading">
+              <el-row v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.9)" class="tab-content-row">
                 <el-col :span="22">
                   <el-card shadow="never" class="day-content-card">
                     <el-form :model="item" label-width="100px" class="content-form">
@@ -1041,6 +1044,49 @@
   border-color: #1890ff;
 }
 
+/* 红点样式优化 - 未选中状态 */
+.rule-tabs ::v-deep .el-badge__content.is-dot {
+  width: 6px;
+  height: 6px;
+  top: -3px;
+  right: -8px;
+  background-color: #f56c6c;
+  border: none;
+  box-shadow: none;
+}
+
+/* 红点样式优化 - 选中状态 */
+.rule-tabs ::v-deep .el-tabs__item.is-active .el-badge__content.is-dot {
+  background-color: #faad14;
+  border: none;
+  box-shadow: none;
+}
+
+/* 标签内容区域 */
+.tab-content-row {
+  min-height: 300px;
+}
+
+/* 加载动画优化 */
+.tab-content-row ::v-deep .el-loading-mask {
+  border-radius: 6px;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner {
+  top: 40%;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner .circular {
+  width: 42px;
+  height: 42px;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner .el-loading-text {
+  color: #1890ff;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
 /* 天内容卡片 */
 .day-content-card {
   border: 1px solid #e8e8e8;