diff --git a/src/pages/view/routine/jc/components/dm.vue b/src/pages/view/routine/jc/components/dm.vue
index c2c6fcd..397a99b 100644
--- a/src/pages/view/routine/jc/components/dm.vue
+++ b/src/pages/view/routine/jc/components/dm.vue
@@ -206,16 +206,16 @@ const tjDm = debounce(async () => {
   padding: 30rpx;
   margin-bottom: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 20rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .class-tip {
@@ -245,21 +245,21 @@ const tjDm = debounce(async () => {
   background-color: #fff;
   box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
   z-index: 10;
-}
-
-.submit-btn {
-  width: 100%;
-  height: 80rpx;
-  background-color: #007aff;
-  color: #fff;
-  border: none;
-  border-radius: 40rpx;
-  font-size: 32rpx;
-  font-weight: bold;
   
-  &:disabled {
-    background-color: #d9d9d9;
-    color: #999;
+  .submit-btn {
+    width: 100%;
+    height: 80rpx;
+    background-color: #007aff;
+    color: #fff;
+    border: none;
+    border-radius: 40rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    
+    &:disabled {
+      background-color: #d9d9d9;
+      color: #999;
+    }
   }
 }
 
@@ -274,13 +274,13 @@ const tjDm = debounce(async () => {
   justify-content: center;
   align-items: center;
   z-index: 1000;
-}
-
-.loading-content {
-  background-color: #fff;
-  padding: 40rpx;
-  border-radius: 16rpx;
-  color: #333;
-  font-size: 28rpx;
+  
+  .loading-content {
+    background-color: #fff;
+    padding: 40rpx;
+    border-radius: 16rpx;
+    color: #333;
+    font-size: 28rpx;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/view/routine/jc/components/dmJs.vue b/src/pages/view/routine/jc/components/dmJs.vue
index 5be47f4..28e5449 100644
--- a/src/pages/view/routine/jc/components/dmJs.vue
+++ b/src/pages/view/routine/jc/components/dmJs.vue
@@ -174,59 +174,6 @@ defineExpose({
   background-color: #f5f5f5;
 }
 
-.status-tag {
-  font-size: 20rpx;
-  padding: 6rpx 16rpx;
-  border-radius: 8rpx;
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-  
-  &.clickable {
-    cursor: pointer;
-    transition: all 0.2s;
-    
-    &:hover {
-      opacity: 0.8;
-      transform: scale(1.05);
-    }
-  }
-  
-  &.readonly {
-    opacity: 0.8;
-    cursor: not-allowed;
-  }
-  
-  .status-arrow {
-    font-size: 16rpx;
-    opacity: 0.8;
-  }
-}
-
-.status-normal {
-  background-color: #e6f7ff;
-  color: #52c41a;
-}
-
-.status-leave {
-  background-color: #fff7e6;
-  color: #faad14;
-}
-
-.status-absent {
-  background-color: #fff2f0;
-  color: #ff4d4f;
-}
-
-.status-unpaid {
-  background-color: #f9f0ff;
-  color: #722ed1;
-}
-
-.status-unregistered {
-  background-color: #fff0f6;
-  color: #eb2f96;
-}
 
 .flex-row {
   display: flex;
@@ -241,13 +188,6 @@ defineExpose({
   overflow: hidden;
 }
 
-.mr-8 {
-  margin-right: 16rpx;
-}
-
-.mb-8 {
-  margin-bottom: 16rpx;
-}
 
 .font-14 {
   font-size: 28rpx;
diff --git a/src/pages/view/routine/jc/components/dmXs.vue b/src/pages/view/routine/jc/components/dmXs.vue
index 59e76f2..568565c 100644
--- a/src/pages/view/routine/jc/components/dmXs.vue
+++ b/src/pages/view/routine/jc/components/dmXs.vue
@@ -321,25 +321,25 @@ defineExpose({
   padding: 30rpx;
   margin-bottom: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 20rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.section-subtitle {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #666;
-  margin: 20rpx 0 15rpx 0;
-  padding: 10rpx 0;
-  border-bottom: 1px solid #f0f0f0;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .section-subtitle {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #666;
+    margin: 20rpx 0 15rpx 0;
+    padding: 10rpx 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
 }
 
 .refresh-btn {
@@ -357,45 +357,45 @@ defineExpose({
   border-radius: 12rpx;
   flex-wrap: wrap;
   gap: 60rpx;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 120rpx;
-}
-
-.stat-number {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 8rpx;
   
-  &.normal {
-    color: #52c41a;
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 120rpx;
+    
+    .stat-number {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8rpx;
+      
+      &.normal {
+        color: #52c41a;
+      }
+      
+      &.leave {
+        color: #faad14;
+      }
+      
+      &.absent {
+        color: #ff4d4f;
+      }
+      
+      &.unpaid {
+        color: #722ed1;
+      }
+      
+      &.unregistered {
+        color: #eb2f96;
+      }
+    }
+    
+    .stat-label {
+      font-size: 24rpx;
+      color: #666;
+    }
   }
-  
-  &.leave {
-    color: #faad14;
-  }
-  
-  &.absent {
-    color: #ff4d4f;
-  }
-  
-  &.unpaid {
-    color: #722ed1;
-  }
-  
-  &.unregistered {
-    color: #eb2f96;
-  }
-}
-
-.stat-label {
-  font-size: 24rpx;
-  color: #666;
 }
 
 .xs-section {
@@ -410,37 +410,37 @@ defineExpose({
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20rpx;
-}
-
-.xs-item {
-  position: relative;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-}
-
-.xs-item:hover {
-  transform: translateY(-2rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-}
-
-.avatar-container {
-  width: 92rpx;
-  height: 92rpx;
-  border-radius: 50%;
-  padding: 6rpx;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
-}
-
-.xs-avatar {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #f5f5f5;
+  
+  .xs-item {
+    position: relative;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+    
+    &:hover {
+      transform: translateY(-2rpx);
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+    }
+    
+    .avatar-container {
+      width: 92rpx;
+      height: 92rpx;
+      border-radius: 50%;
+      padding: 6rpx;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+      
+      .xs-avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        background-color: #f5f5f5;
+      }
+    }
+  }
 }
 
 .status-tag {
diff --git a/src/pages/view/routine/jc/detail.vue b/src/pages/view/routine/jc/detail.vue
index 5a931f1..5d69f93 100644
--- a/src/pages/view/routine/jc/detail.vue
+++ b/src/pages/view/routine/jc/detail.vue
@@ -335,37 +335,37 @@ onMounted(() => {
 <style lang="scss" scoped>
 .dm-detail-content {
   padding: 20rpx;
-}
-
-.loading-state, .error-state {
-  text-align: center;
-  padding: 100rpx 0;
-}
-
-.loading-icon, .error-icon {
-  font-size: 80rpx;
-  margin-bottom: 20rpx;
-}
-
-.loading-text, .error-text {
-  display: block;
-  font-size: 32rpx;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.error-text {
-  color: #ff4d4f;
-}
-
-.retry-btn {
-  margin-top: 20rpx;
-  padding: 16rpx 32rpx;
-  background-color: #007aff;
-  color: #fff;
-  border: none;
-  border-radius: 8rpx;
-  font-size: 28rpx;
+  
+  .loading-state, .error-state {
+    text-align: center;
+    padding: 100rpx 0;
+    
+    .loading-icon, .error-icon {
+      font-size: 80rpx;
+      margin-bottom: 20rpx;
+    }
+    
+    .loading-text, .error-text {
+      display: block;
+      font-size: 32rpx;
+      color: #333;
+      margin-bottom: 16rpx;
+    }
+    
+    .error-text {
+      color: #ff4d4f;
+    }
+  }
+  
+  .retry-btn {
+    margin-top: 20rpx;
+    padding: 16rpx 32rpx;
+    background-color: #007aff;
+    color: #fff;
+    border: none;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+  }
 }
 
 .section {
@@ -374,22 +374,22 @@ onMounted(() => {
   padding: 30rpx;
   margin-bottom: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 20rpx;
-}
-
-.section-subtitle {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #666;
-  margin: 20rpx 0 15rpx 0;
-  padding: 10rpx 0;
-  border-bottom: 1px solid #f0f0f0;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20rpx;
+  }
+  
+  .section-subtitle {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #666;
+    margin: 20rpx 0 15rpx 0;
+    padding: 10rpx 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
 }
 
 .xs-section {
@@ -400,27 +400,27 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16rpx;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  padding: 16rpx;
-  background-color: #f8f9fa;
-  border-radius: 8rpx;
-}
-
-.info-label {
-  font-size: 28rpx;
-  color: #666;
-  width: 160rpx;
-  flex-shrink: 0;
-}
-
-.info-value {
-  font-size: 28rpx;
-  color: #333;
-  font-weight: bold;
+  
+  .info-item {
+    display: flex;
+    align-items: center;
+    padding: 16rpx;
+    background-color: #f8f9fa;
+    border-radius: 8rpx;
+    
+    .info-label {
+      font-size: 28rpx;
+      color: #666;
+      width: 160rpx;
+      flex-shrink: 0;
+    }
+    
+    .info-value {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: bold;
+    }
+  }
 }
 
 .stats-container {
@@ -431,45 +431,45 @@ onMounted(() => {
   padding: 20rpx;
   background-color: #f8f9fa;
   border-radius: 12rpx;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.stat-number {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 8rpx;
   
-  &.normal {
-    color: #52c41a;
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    
+    .stat-number {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8rpx;
+      
+      &.normal {
+        color: #52c41a;
+      }
+      
+      &.leave {
+        color: #faad14;
+      }
+      
+      &.absent {
+        color: #ff4d4f;
+      }
+      
+      &.unpaid {
+        color: #722ed1;
+      }
+      
+      &.unregistered {
+        color: #eb2f96;
+      }
+    }
+    
+    .stat-label {
+      font-size: 24rpx;
+      color: #666;
+    }
   }
-  
-  &.leave {
-    color: #faad14;
-  }
-  
-  &.absent {
-    color: #ff4d4f;
-  }
-  
-  &.unpaid {
-    color: #722ed1;
-  }
-  
-  &.unregistered {
-    color: #eb2f96;
-  }
-}
-
-.stat-label {
-  font-size: 24rpx;
-  color: #666;
 }
 
 .teacher-list, .xs-list {
@@ -480,43 +480,57 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20rpx;
+  
+  .teacher-item {
+    position: relative;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+    
+    &:hover {
+      transform: translateY(-2rpx);
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+    }
+  }
 }
 
 .xs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20rpx;
+  
+  .xs-item {
+    position: relative;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+    
+    &:hover {
+      transform: translateY(-2rpx);
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+    }
+  }
 }
 
 .teacher-item, .xs-item {
-  position: relative;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-}
-
-.teacher-item:hover, .xs-item:hover {
-  transform: translateY(-2rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-}
-
-.avatar-container {
-  width: 92rpx;
-  height: 92rpx;
-  border-radius: 50%;
-  padding: 6rpx;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
-}
-
-.teacher-avatar, .xs-avatar {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #f5f5f5;
+  .avatar-container {
+    width: 92rpx;
+    height: 92rpx;
+    border-radius: 50%;
+    padding: 6rpx;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+    
+    .teacher-avatar, .xs-avatar {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background-color: #f5f5f5;
+    }
+  }
 }
 
 .status-tag {