diff --git a/front-end/mall4uni/src/pages/index/index.scss b/front-end/mall4uni/src/pages/index/index.scss
index 9eba5a5..c85a66f 100644
--- a/front-end/mall4uni/src/pages/index/index.scss
+++ b/front-end/mall4uni/src/pages/index/index.scss
@@ -1,3 +1,4 @@
+/* 容器背景颜色设置为浅灰色，并且高度根据内容自动调整 */
 .container {
   background: #f7f7f7;
   height: auto;
@@ -5,409 +6,443 @@
 
 /* 轮播图及搜索框 */
 swiper {
-  width: 100%;
-  height: 350rpx;
-  overflow: hidden;
+  width: 100%; /* 占满整个宽度 */
+  height: 350rpx; /* 高度为350rpx */
+  overflow: hidden; /* 隐藏超出容器的内容 */
 }
+
 swiper.pic-swiper {
-  padding: 10rpx 0;
-  background: #fff;
-  height: 422rpx;
+  padding: 10rpx 0; /* 上下内边距 */
+  background: #fff; /* 白色背景 */
+  height: 422rpx; /* 设置轮播图的高度 */
   .img-box {
-    font-size: 0;
+    font-size: 0; /* 去除图片间的空白间隙 */
   }
+
   .banner {
-    position: absolute;
-    width: 690rpx;
-    margin: 0 10rpx;
-    height: 402rpx;
-    border-radius: 8rpx;
-    display: inline-block;
-    box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
+    position: absolute; /* 绝对定位 */
+    width: 690rpx; /* 宽度 */
+    margin: 0 10rpx; /* 左右外边距 */
+    height: 402rpx; /* 高度 */
+    border-radius: 8rpx; /* 圆角 */
+    display: inline-block; /* 内联块级元素 */
+    box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288); /* 添加阴影效果 */
   }
 }
+
 swiper-item {
-  font-size: 26rpx;
-  font-weight: bold;
+  font-size: 26rpx; /* 文字大小 */
+  font-weight: bold; /* 加粗字体 */
 }
+
 .wx-swiper-dots {
-  margin-bottom: 15rpx;
+  margin-bottom: 15rpx; /* 下边距 */
 }
+
 .banner-item {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 盒模型包含内边距和边框 */
 }
+
+/* 搜索框固定在顶部 */
 .container {
   .bg-sear {
-    position: fixed;
-    z-index: 999;
-    width: 100%;
-    line-height: 56rpx;
-    background: #fff;
-    padding: 20rpx 0;
-    text-align: center;
-    top: 0;
+    position: fixed; /* 固定定位 */
+    z-index: 999; /* 确保位于其他内容之上 */
+    width: 100%; /* 占满整个宽度 */
+    line-height: 56rpx; /* 行高 */
+    background: #fff; /* 白色背景 */
+    padding: 20rpx 0; /* 上下内边距 */
+    text-align: center; /* 文本居中 */
+    top: 0; /* 顶部位置 */
   }
 }
+
 .bg-sear {
   .section {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 60rpx;
-    background: #fff;
-    z-index: 1;
-    border-radius: 50rpx;
-    width: 92%;
-    margin: auto;
-    left: 4%;
-    background: #f7f7f7;
+    display: flex; /* 弹性布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    height: 60rpx; /* 高度 */
+    background: #fff; /* 白色背景 */
+    z-index: 1; /* 层叠顺序 */
+    border-radius: 50rpx; /* 圆角 */
+    width: 92%; /* 宽度 */
+    margin: auto; /* 自动外边距 */
+    left: 4%; /* 左侧位置 */
+    background: #f7f7f7; /* 浅灰色背景 */
     .placeholder {
-      display: block;
-      font-size: 24rpx;
-      color: #999;
+      display: block; /* 块级元素 */
+      font-size: 24rpx; /* 字体大小 */
+      color: #999; /* 颜色 */
     }
+
     .search-img {
-      width: 32rpx;
-      height: 32rpx;
-      margin-right: 10rpx;
+      width: 32rpx; /* 宽度 */
+      height: 32rpx; /* 高度 */
+      margin-right: 10rpx; /* 右侧外边距 */
     }
   }
 }
 
 /* 分类栏目 */
 .content {
-  background: #fff;
+  background: #fff; /* 白色背景 */
 }
+
 .cat-item {
-  display: flex;
-  justify-content: space-between;
-  background: #fff;
-  padding-top: 20rpx;
-  padding-bottom: 30rpx;
+  display: flex; /* 弹性布局 */
+  justify-content: space-between; /* 子元素两端对齐 */
+  background: #fff; /* 白色背景 */
+  padding-top: 20rpx; /* 上内边距 */
+  padding-bottom: 30rpx; /* 下内边距 */
   .item {
-    text-align: center;
-    width: 25%;
-    display: flex;
-    flex-direction: column;
-    margin: auto;
-    align-items: center;
+    text-align: center; /* 文本居中 */
+    width: 25%; /* 宽度 */
+    display: flex; /* 弹性布局 */
+    flex-direction: column; /* 列方向排列 */
+    margin: auto; /* 自动外边距 */
+    align-items: center; /* 子元素垂直居中 */
     image {
-      width: 75rpx;
-      height: 75rpx;
+      width: 75rpx; /* 宽度 */
+      height: 75rpx; /* 高度 */
     }
+
     text {
-      font-size: 26rpx;
-      margin-top: 20rpx;
+      font-size: 26rpx; /* 字体大小 */
+      margin-top: 20rpx; /* 上外边距 */
     }
   }
 }
 
 /* 消息播放 */
 .message-play {
-  position: relative;
-  height: 90rpx;
-  background: #fff;
-  margin: auto;
-  padding: 0 60rpx 0 100rpx;
-  box-sizing: border-box;
-  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
-  border: 2rpx solid #fafafa;
+  position: relative; /* 相对定位 */
+  height: 90rpx; /* 高度 */
+  background: #fff; /* 白色背景 */
+  margin: auto; /* 自动外边距 */
+  padding: 0 60rpx 0 100rpx; /* 内边距 */
+  box-sizing: border-box; /* 盒模型包含内边距和边框 */
+  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加阴影效果 */
+  border: 2rpx solid #fafafa; /* 边框 */
   .hornpng {
-    width: 77rpx;
-    height: 36rpx;
-    position: absolute;
-    left: 20rpx;
-    top: 27rpx;
-    margin-right: 8rpx;
+    width: 77rpx; /* 宽度 */
+    height: 36rpx; /* 高度 */
+    position: absolute; /* 绝对定位 */
+    left: 20rpx; /* 左侧位置 */
+    top: 27rpx; /* 顶部位置 */
+    margin-right: 8rpx; /* 右侧外边距 */
   }
+
   .swiper-cont {
-    height: 90rpx;
-    line-height: 90rpx;
+    height: 90rpx; /* 高度 */
+    line-height: 90rpx; /* 行高 */
     .items {
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      text-align: left;
+      text-overflow: ellipsis; /* 超出文本显示省略号 */
+      display: -webkit-box; /* 使用Webkit盒模型 */
+      -webkit-line-clamp: 1; /* 限制行数 */
+      -webkit-box-orient: vertical; /* 垂直排列 */
+      text-align: left; /* 文本左对齐 */
     }
   }
 }
+
 .arrow {
-  width: 15rpx;
-  height: 15rpx;
-  border-top: 3rpx solid #686868;
-  border-right: 3rpx solid #686868;
-  transform: rotate(45deg);
-  position: absolute;
-  right: 30rpx;
-  top: 34rpx;
+  width: 15rpx; /* 宽度 */
+  height: 15rpx; /* 高度 */
+  border-top: 3rpx solid #686868; /* 上边框 */
+  border-right: 3rpx solid #686868; /* 右边框 */
+  transform: rotate(45deg); /* 旋转45度形成箭头 */
+  position: absolute; /* 绝对定位 */
+  right: 30rpx; /* 右侧位置 */
+  top: 34rpx; /* 顶部位置 */
 }
 
 /* 每日上新 */
 .title {
-  position: relative;
-  height: 64rpx;
-  line-height: 64rpx;
-  font-size: 32rpx;
-  padding: 40rpx 0 10rpx 30rpx;
-  color: #333;
-  background: #fff;
+  position: relative; /* 相对定位 */
+  height: 64rpx; /* 高度 */
+  line-height: 64rpx; /* 行高 */
+  font-size: 32rpx; /* 字体大小 */
+  padding: 40rpx 0 10rpx 30rpx; /* 内边距 */
+  color: #333; /* 颜色 */
+  background: #fff; /* 白色背景 */
   .more-prod-cont {
-    color: #999;
-    display: inline-block;
-    text-align: right;
+    color: #999; /* 颜色 */
+    display: inline-block; /* 内联块级元素 */
+    text-align: right; /* 文本右对齐 */
     .more {
-      position: absolute;
-      right: 30rpx;
-      top: 48rpx;
-      color: #666;
-      font-size: 24rpx;
-      padding: 0 20rpx;
-      height: 44rpx;
-      line-height: 44rpx;
+      position: absolute; /* 绝对定位 */
+      right: 30rpx; /* 右侧位置 */
+      top: 48rpx; /* 顶部位置 */
+      color: #666; /* 颜色 */
+      font-size: 24rpx; /* 字体大小 */
+      padding: 0 20rpx; /* 内边距 */
+      height: 44rpx; /* 高度 */
+      line-height: 44rpx; /* 行高 */
     }
+
     .arrow {
-      top: 58rpx;
-      right: 30rpx;
-      border-top: 2rpx solid #666;
-      border-right: 2rpx solid #666;
+      top: 58rpx; /* 顶部位置 */
+      right: 30rpx; /* 右侧位置 */
+      border-top: 2rpx solid #666; /* 上边框 */
+      border-right: 2rpx solid #666; /* 右边框 */
     }
   }
 }
+
 .up-to-date {
   .title {
-    color: #fff;
-    background: none;
+    color: #fff; /* 颜色 */
+    background: none; /* 无背景 */
     .more-prod-cont {
       .more {
-        position: absolute;
-        right: 30rpx;
-        top: 48rpx;
-        color: #fff;
-        font-size: 24rpx;
-        background: #65addf;
-        border-radius: 30rpx;
-        padding: 0 30rpx;
-        height: 44rpx;
-        line-height: 44rpx;
+        position: absolute; /* 绝对定位 */
+        right: 30rpx; /* 右侧位置 */
+        top: 48rpx; /* 顶部位置 */
+        color: #fff; /* 颜色 */
+        font-size: 24rpx; /* 字体大小 */
+        background: #65addf; /* 背景颜色 */
+        border-radius: 30rpx; /* 圆角 */
+        padding: 0 30rpx; /* 内边距 */
+        height: 44rpx; /* 高度 */
+        line-height: 44rpx; /* 行高 */
       }
     }
   }
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
-  background-position: top;
-  background-size: 100% 332rpx;
-  background-repeat: no-repeat;
-  background-color: #fff;
+
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABxCAYAAACkwXoWAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAZBJREFUeJzt1DEBwCAAwLAxYfhEGXJABkcTBb065trnAwj6XwcAvGKAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGRdKykDj9OUNYkAAAAASUVORK5CYII=");
+  background-position: top; /* 背景图像位置 */
+  background-size: 100% 332rpx; /* 背景图像大小 */
+  background-repeat: no-repeat; /* 不重复背景图像 */
+  background-color: #fff; /* 白色背景 */
   .item-cont {
-    margin: auto;
-    height: auto;
-    width: calc(100% - 40rpx);
-    display: flex;
-    flex-wrap: wrap;
+    margin: auto; /* 自动外边距 */
+    height: auto; /* 自动高度 */
+    width: calc(100% - 40rpx); /* 宽度计算 */
+    display: flex; /* 弹性布局 */
+    flex-wrap: wrap; /* 换行 */
     &::before {
-      clear: both;
-      height: 0;
-      overflow: hidden;
+      clear: both; /* 清除浮动 */
+      height: 0; /* 高度 */
+      overflow: hidden; /* 隐藏溢出 */
     }
+
     .prod-item {
-      border-radius: 10rpx;
-      width: 220rpx;
-      background: #fff;
-      display: inline-block;
-      margin: 0 8rpx;
-      margin-bottom: 20rpx;
-      box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
+      border-radius: 10rpx; /* 圆角 */
+      width: 220rpx; /* 宽度 */
+      background: #fff; /* 白色背景 */
+      display: inline-block; /* 内联块级元素 */
+      margin: 0 8rpx; /* 左右边距 */
+      margin-bottom: 20rpx; /* 下边距 */
+      box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2); /* 添加阴影效果 */
       .imagecont {
-        width: 100%;
-        font-size: 0;
-        width: 220rpx;
-        height: 220rpx;
+        width: 100%; /* 占满整个宽度 */
+        font-size: 0; /* 去除图片间的空白间隙 */
+        width: 220rpx; /* 宽度 */
+        height: 220rpx; /* 高度 */
         .prodimg {
-          width: 220rpx;
-          height: 220rpx;
-          vertical-align: middle;
-          border-top-left-radius: 10rpx;
-          border-top-right-radius: 10rpx;
-          font-size: 0;
+          width: 220rpx; /* 宽度 */
+          height: 220rpx; /* 高度 */
+          vertical-align: middle; /* 垂直居中 */
+          border-top-left-radius: 10rpx; /* 左上圆角 */
+          border-top-right-radius: 10rpx; /* 右上圆角 */
+          font-size: 0; /* 去除图片间的空白间隙 */
         }
       }
+
       .prod-text {
-        font-size: 28rpx;
-        overflow: hidden;
-        margin: 10rpx 0;
-        height: 75rpx;
-        display: -webkit-box;
-        word-break: break-all;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        color: #000;
-        padding: 0 10rpx;
+        font-size: 28rpx; /* 字体大小 */
+        overflow: hidden; /* 隐藏溢出 */
+        margin: 10rpx 0; /* 上下外边距 */
+        height: 75rpx; /* 高度 */
+        display: -webkit-box; /* 使用Webkit盒模型 */
+        word-break: break-all; /* 单词换行 */
+        display: -webkit-box; /* 使用Webkit盒模型 */
+        -webkit-line-clamp: 2; /* 限制行数 */
+        -webkit-box-orient: vertical; /* 垂直排列 */
+        color: #000; /* 颜色 */
+        padding: 0 10rpx; /* 内边距 */
       }
+
       .prod-price {
-        font-size: 25rpx;
-        color: #eb2444;
-        font-family: Arial;
-        padding: 0 10rpx;
+        font-size: 25rpx; /* 字体大小 */
+        color: #eb2444; /* 颜色 */
+        font-family: Arial; /* 字体 */
+        padding: 0 10rpx; /* 内边距 */
       }
     }
   }
 }
+
 .hotsale-item-cont {
-  padding-bottom: 20rpx;
-  background: #fff;
+  padding-bottom: 20rpx; /* 下内边距 */
+  background: #fff; /* 白色背景 */
 }
+
 .more.prod-price {
-  position: absolute;
-  bottom: 20rpx;
+  position: absolute; /* 绝对定位 */
+  bottom: 20rpx; /* 底部位置 */
 }
 
 /* 商城热卖 */
 .hot-sale {
   .prod-items {
-    width: 345rpx;
-    display: inline-block;
-    background: #fff;
-    padding-bottom: 20rpx;
-    box-sizing: border-box;
-    box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
+    width: 345rpx; /* 宽度 */
+    display: inline-block; /* 内联块级元素 */
+    background: #fff; /* 白色背景 */
+    padding-bottom: 20rpx; /* 下内边距 */
+    box-sizing: border-box; /* 盒模型包含内边距和边框 */
+    box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2); /* 添加阴影效果 */
     &:nth-child(2n-1) {
-      margin: 20rpx 10rpx 10rpx 20rpx;
+      margin: 20rpx 10rpx 10rpx 20rpx; /* 奇数项的外边距 */
     }
+
     &:nth-child(2n) {
-      margin: 20rpx 20rpx 10rpx 10rpx;
+      margin: 20rpx 20rpx 10rpx 10rpx; /* 偶数项的外边距 */
     }
   }
 }
+
 .prod-items {
   .hot-imagecont {
-    width: 341rpx;
-    height: 341rpx;
+    width: 341rpx; /* 宽度 */
+    height: 341rpx; /* 高度 */
     .hotsaleimg {
-      width: 341rpx;
-      height: 341rpx;
+      width: 341rpx; /* 宽度 */
+      height: 341rpx; /* 高度 */
     }
-    font-size: 0;
-    text-align: center;
+
+    font-size: 0; /* 去除图片间的空白间隙 */
+    text-align: center; /* 文本居中 */
   }
+
   .hot-text {
     .hotprod-text {
-      font-size: 28rpx;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: 28rpx; /* 字体大小 */
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 隐藏溢出 */
+      text-overflow: ellipsis; /* 超出文本显示省略号 */
     }
-    margin-top: 20rpx;
-    padding: 0 10rpx;
+
+    margin-top: 20rpx; /* 上外边距 */
+    padding: 0 10rpx; /* 内边距 */
     .prod-info {
-      font-size: 22rpx;
-      color: #999;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: 22rpx; /* 字体大小 */
+      color: #999; /* 颜色 */
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 隐藏溢出 */
+      text-overflow: ellipsis; /* 超出文本显示省略号 */
     }
+
     .prod-text-info {
-      position: relative;
-      height: 70rpx;
-      line-height: 70rpx;
-      font-family: Arial;
+      position: relative; /* 相对定位 */
+      height: 70rpx; /* 高度 */
+      line-height: 70rpx; /* 行高 */
+      font-family: Arial; /* 字体 */
       .hotprod-price {
-        display: inline;
-        font-size: 26rpx;
-        color: #eb2444;
+        display: inline; /* 内联元素 */
+        font-size: 26rpx; /* 字体大小 */
+        color: #eb2444; /* 颜色 */
       }
+
       .basket-img {
-        width: 50rpx;
-        height: 50rpx;
-        position: absolute;
-        right: 0;
-        bottom: 7rpx;
-        padding: 8rpx;
+        width: 50rpx; /* 宽度 */
+        height: 50rpx; /* 高度 */
+        position: absolute; /* 绝对定位 */
+        right: 0; /* 右侧位置 */
+        bottom: 7rpx; /* 底部位置 */
+        padding: 8rpx; /* 内边距 */
       }
     }
   }
 }
+
 .more-prod {
   .prod-text-right {
     .prod-info {
-      font-size: 22rpx;
-      color: #999;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: 22rpx; /* 字体大小 */
+      color: #999; /* 颜色 */
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 隐藏溢出 */
+      text-overflow: ellipsis; /* 超出文本显示省略号 */
     }
   }
 }
+
 .singal-price {
-  display: inline;
-  font-size: 20rpx;
-  text-decoration: line-through;
-  color: #777;
-  margin-left: 15rpx;
+  display: inline; /* 内联元素 */
+  font-size: 20rpx; /* 字体大小 */
+  text-decoration: line-through; /* 删除线 */
+  color: #777; /* 颜色 */
+  margin-left: 15rpx; /* 左边距 */
 }
 
 /* 更多宝贝 */
 .more-prod {
-  background: #fff;
+  background: #fff; /* 白色背景 */
   .prod-show {
     .show-item {
       .more-prod-pic {
-        width: 250rpx;
-        height: 250rpx;
+        width: 250rpx; /* 宽度 */
+        height: 250rpx; /* 高度 */
         .more-pic {
-          max-width: 100%;
-          max-height: 100%;
+          max-width: 100%; /* 最大宽度 */
+          max-height: 100%; /* 最大高度 */
         }
       }
-      position: relative;
-      display: flex;
-      padding: 20rpx;
-      justify-content: flex-start;
-      border-top: 2rpx solid #f4f4f4;
+
+      position: relative; /* 相对定位 */
+      display: flex; /* 弹性布局 */
+      padding: 20rpx; /* 内边距 */
+      justify-content: flex-start; /* 子元素左对齐 */
+      border-top: 2rpx solid #f4f4f4; /* 上边框 */
       .prod-text-right {
-        margin-left: 30rpx;
-        width: 72%;
-        padding-bottom: 10rpx;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+        margin-left: 30rpx; /* 左边距 */
+        width: 72%; /* 宽度 */
+        padding-bottom: 10rpx; /* 下内边距 */
+        display: flex; /* 弹性布局 */
+        flex-direction: column; /* 列方向排列 */
+        justify-content: center; /* 子元素垂直居中 */
         .go-to-buy {
-          font-size: 26rpx;
-          background: #fff2f5;
-          color: #eb2444;
-          border-radius: 50rpx;
-          text-align: center;
-          padding: 12rpx 20rpx;
-          position: absolute;
-          right: 20rpx;
-          bottom: 20rpx;
+          font-size: 26rpx; /* 字体大小 */
+          background: #fff2f5; /* 背景颜色 */
+          color: #eb2444; /* 颜色 */
+          border-radius: 50rpx; /* 圆角 */
+          text-align: center; /* 文本居中 */
+          padding: 12rpx 20rpx; /* 内边距 */
+          position: absolute; /* 绝对定位 */
+          right: 20rpx; /* 右侧位置 */
+          bottom: 20rpx; /* 底部位置 */
         }
+
         .prod-text.more {
-          margin: 0;
-          font-size: 28rpx;
-          overflow: hidden;
-          margin-bottom: 20rpx;
-          display: -webkit-box;
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
+          margin: 0; /* 外边距 */
+          font-size: 28rpx; /* 字体大小 */
+          overflow: hidden; /* 隐藏溢出 */
+          margin-bottom: 20rpx; /* 下外边距 */
+          display: -webkit-box; /* 使用Webkit盒模型 */
+          word-break: break-all; /* 单词换行 */
+          display: -webkit-box; /* 使用Webkit盒模型 */
+          -webkit-line-clamp: 2; /* 限制行数 */
+          -webkit-box-orient: vertical; /* 垂直排列 */
         }
+
         .more.prod-price {
-          font-size: 28rpx;
-          font-family: arial;
+          font-size: 28rpx; /* 字体大小 */
+          font-family: arial; /* 字体 */
         }
       }
     }
   }
 }
+
 .b-cart {
-  margin-top: 30rpx;
+  margin-top: 30rpx; /* 上外边距 */
   .basket-img {
-    width: 50rpx;
-    height: 50rpx;
-    position: absolute;
-    right: 46rpx;
-    padding: 8rpx;
+    width: 50rpx; /* 宽度 */
+    height: 50rpx; /* 高度 */
+    position: absolute; /* 绝对定位 */
+    right: 46rpx; /* 右侧位置 */
+    padding: 8rpx; /* 内边距 */
   }
 }
diff --git a/front-end/mall4uni/src/pages/index/index.vue b/front-end/mall4uni/src/pages/index/index.vue
index 70a8c77..d92335c 100644
--- a/front-end/mall4uni/src/pages/index/index.vue
+++ b/front-end/mall4uni/src/pages/index/index.vue
@@ -1,15 +1,17 @@
 <template>
+  <!-- 页面的最外层容器，用于包裹整个页面内容 -->
   <view class="container">
+    <!-- 搜索栏背景区域，用于设置搜索相关部分的背景样式 -->
     <view class="bg-sear">
+      <!-- 可滚动到顶部的区域，通常用于放置一些操作元素，方便用户能快速回到页面顶部 -->
       <view class="scrolltop">
-        <view
-          class="section"
-          @tap="toSearchPage"
-        >
-          <image
-            src="@/static/images/icon/search.png"
-            class="search-img"
-          />
+        <!-- 搜索栏的具体视图容器，绑定了点击事件 `toSearchPage`，点击此处可触发跳转到搜索页面的操作 -->
+        <view class="section"
+              @tap="toSearchPage">
+          <!-- 搜索图标元素，通过指定路径引入图片资源，设置类名为 `search-img`，用于在搜索栏中显示搜索图标，提示用户此处可进行搜索操作 -->
+          <image src="@/static/images/icon/search.png"
+                 class="search-img" />
+          <!-- 搜索栏的占位文本，显示“搜索”字样，提示用户在此处输入想要搜索的内容 -->
           <text class="placeholder">
             搜索
           </text>
@@ -17,156 +19,151 @@
       </view>
     </view>
 
+    <!-- 页面主要内容区域，包含轮播图、分类导航、消息通知、商品展示等多个板块 -->
     <view class="content">
-      <!-- swiper -->
-      <swiper
-        :autoplay="autoplay"
-        :indicator-color="indicatorColor"
-        :interval="interval"
-        :duration="duration"
-        :indicator-active-color="indicatorActiveColor + ' '"
-        :circular="true"
-        class="pic-swiper"
-        indicator-dots
-        previous-margin="20rpx"
-        next-margin="20rpx"
-      >
-        <block
-          v-for="(item, index) in indexImgs"
-          :key="index"
-        >
+      <!-- swiper 组件用于实现轮播图功能，通过一系列属性来配置轮播图的展示效果和行为 -->
+      <swiper :autoplay="autoplay"
+              :indicator-color="indicatorColor"
+              :interval="interval"
+              :duration="duration"
+              :indicator-active-color="indicatorActiveColor + ' '"
+              :circular="true"
+              class="pic-swiper"
+              indicator-dots
+              previous-margin="20rpx"
+              next-margin="20rpx">
+        <!-- 使用 `v-for` 指令循环遍历 `indexImgs` 数组，`index` 为当前项的索引，每个元素对应轮播图中的一张图片相关信息 -->
+        <block v-for="(item, index) in indexImgs"
+               :key="index">
+          <!-- swiper-item 组件表示轮播图中的每一项，即每张图片对应的展示容器 -->
           <swiper-item class="banner-item">
+            <!-- 图片的外层视图容器，方便对图片进行样式设置和布局调整 -->
             <view class="img-box">
-              <image
-                :src="item.imgUrl"
-                :data-prodid="item.relation"
-                class="banner"
-                @tap="toProdPage"
-              />
+              <!-- 轮播图中的图片元素，通过 `:src` 绑定图片的 URL 地址（来自 `item.imgUrl`），同时利用自定义属性 `:data-prodid` 传递商品相关的 ID 信息，并且绑定了点击事件 `toProdPage`，点击图片可触发跳转到对应商品页面的操作 -->
+              <image :src="item.imgUrl"
+                     :data-prodid="item.relation"
+                     class="banner"
+                     @tap="toProdPage" />
             </view>
           </swiper-item>
         </block>
       </swiper>
-      <!-- end swiper -->
-
+      <!-- 轮播图部分结束 -->
+      <!-- 分类导航区域，展示多个不同分类的导航项，每个项可点击跳转到对应的页面 -->
       <view class="cat-item">
-        <view
-          class="item"
-          data-sts="1"
-          @tap="toClassifyPage"
-        >
+        <!-- 单个分类导航项的视图容器，设置了自定义属性 `data-sts="1"`，并绑定点击事件 `toClassifyPage`，点击该项可触发跳转到相应分类页面的操作，不同分类项通过此属性传递不同参数以区分具体分类情况 -->
+        <view class="item"
+              data-sts="1"
+              @tap="toClassifyPage">
+          <!-- 分类项的图标元素，通过指定路径引入图片资源，此处图标可能用于标识“新品推荐”分类 -->
           <image src="@/static/images/icon/newProd.png" />
+          <!-- 分类项的文本标签，显示“新品推荐”字样，明确告知用户该分类的含义 -->
           <text>新品推荐</text>
         </view>
-        <view
-          class="item"
-          data-sts="1"
-          @tap="toClassifyPage"
-        >
+        <view class="item"
+              data-sts="1"
+              @tap="toClassifyPage">
+          <!-- 类似上述分类项结构，该图标用于标识“限时特惠”分类，文本标签显示对应分类名称 -->
           <image src="@/static/images/icon/timePrice.png" />
           <text>限时特惠</text>
         </view>
-        <view
-          class="item"
-          data-sts="3"
-          @tap="toClassifyPage"
-        >
+        <view class="item"
+              data-sts="3"
+              @tap="toClassifyPage">
+          <!-- 此图标对应“每日疯抢”分类标识，文本标签显示相应分类名称 -->
           <image src="@/static/images/icon/neweveryday.png" />
           <text>每日疯抢</text>
         </view>
-        <view
-          class="item"
-          @tap="toCouponCenter"
-        >
+        <view class="item"
+              @tap="toCouponCenter">
+          <!-- 该图标表示“领优惠券”分类相关标识，文本标签显示对应操作名称，点击此项会触发领优惠券相关的业务逻辑（具体由 `toCouponCenter` 函数处理） -->
           <image src="@/static/images/icon/newprods.png" />
           <text>领优惠券</text>
         </view>
       </view>
 
-      <!-- 消息播放 -->
-      <view
-        v-if="news && news.length"
-        class="message-play"
-        @tap="onNewsPage"
-      >
-        <image
-          src="@/static/images/icon/horn.png"
-          class="hornpng"
-        />
-        <swiper
-          :vertical="true"
-          :autoplay="true"
-          :circular="true"
-          duration="1000"
-          class="swiper-cont"
-        >
-          <block
-            v-for="(item, index) in news"
-            :key="index"
-          >
+      <!-- 消息播放区域，只有当 `news` 数组有数据（即 `news` 存在且长度大于 0）时才显示，用于展示滚动播放的消息通知，点击可触发跳转到消息页面的操作 -->
+      <view v-if="news && news.length"
+            class="message-play"
+            @tap="onNewsPage">
+        <!-- 消息通知的图标元素，通过指定路径引入图片资源，一般是类似喇叭的图标，用于提示此处为消息相关区域 -->
+        <image src="@/static/images/icon/horn.png"
+               class="hornpng" />
+        <!-- swiper 组件用于实现消息的垂直滚动播放效果，通过相关属性控制滚动行为 -->
+        <swiper :vertical="true"
+                :autoplay="true"
+                :circular="true"
+                duration="1000"
+                class="swiper-cont">
+          <!-- 使用 `v-for` 指令循环遍历 `news` 数组，`index` 为当前项的索引，每个元素对应一条消息内容 -->
+          <block v-for="(item, index) in news"
+                 :key="index">
+            <!-- swiper-item 组件表示滚动消息中的每一项，在此处直接通过双括号插值表达式展示消息的标题（`item.title`） -->
             <swiper-item class="items">
               {{ item.title }}
             </swiper-item>
           </block>
         </swiper>
+        <!-- 箭头图标元素，可能用于视觉上提示用户可点击查看更多消息等操作（具体功能要结合样式和交互设计来看） -->
         <text class="arrow" />
       </view>
     </view>
 
-    <view
-      v-if="updata"
-      class="updata"
-    >
-      <block
-        v-for="(item, index) in taglist"
-        :key="index"
-      >
-        <!-- 每日上新 -->
-        <view
-          v-if="item.style==='2' && item.prods && item.prods.length"
-          class="up-to-date"
-        >
+    <!-- 商品展示相关区域，通过条件判断 `v-if="updata"` 来控制显示与否，内部根据不同商品分类或样式展示相应商品信息 -->
+    <view v-if="updata"
+          class="updata">
+      <!-- 使用 `v-for` 指令循环遍历 `taglist` 数组，`index` 为当前项的索引，每个元素对应一组商品相关的信息，包括商品列表、标题等 -->
+      <block v-for="(item, index) in taglist"
+             :key="index">
+        <!-- 每日上新类型商品展示区域，只有当商品组的 `style` 属性为 `'2'` 且包含商品数据（即 `item.prods` 存在且长度大于 0）时才显示 -->
+        <view v-if="item.style==='2' && item.prods && item.prods.length"
+              class="up-to-date">
+          <!-- 商品组标题区域，包含标题文本以及“查看更多”操作按钮 -->
           <view class="title">
+            <!-- 通过双括号插值表达式展示商品组的标题，数据来源于 `item.title` 属性 -->
             <text>{{ item.title }}</text>
-            <view
-              class="more-prod-cont"
-              data-sts="0"
-              :data-id="item.id"
-              :data-title="item.title"
-              @tap="toClassifyPage"
-            >
+            <!-- “查看更多”操作按钮的视图容器，设置了多个自定义属性（`data-sts`、`data-id`、`data-title`）用于传递相关参数，绑定点击事件 `toClassifyPage`，点击可触发跳转到分类页面查看更多该类型商品的操作 -->
+            <view class="more-prod-cont"
+                  data-sts="0"
+                  :data-id="item.id"
+                  :data-title="item.title"
+                  @tap="toClassifyPage">
+              <!-- “查看更多”的文本标签 -->
               <text class="more">
                 查看更多
               </text>
             </view>
           </view>
+          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
           <view class="item-cont">
-            <block
-              v-for="(prod, index2) in item.prods"
-              :key="index2"
-            >
-              <view
-                class="prod-item"
-                :data-prodid="prod.prodId"
-                @tap="toProdPage"
-              >
+            <block v-for="(prod, index2) in item.prods"
+                   :key="index2">
+              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
+              <view class="prod-item"
+                    :data-prodid="prod.prodId"
+                    @tap="toProdPage">
                 <view>
+                  <!-- 商品图片的外层视图容器，用于包裹图片展示相关组件 -->
                   <view class="imagecont">
-                    <img-show
-                      :src="prod.pic"
-                      :class-list="['prodimg']"
-                    />
+                    <!-- `img-show` 组件用于展示商品图片（可能是自定义的图片展示组件，具备特定功能或样式处理），通过 `:src` 绑定商品图片的 URL 地址（`prod.pic`），并通过 `:class-list` 绑定类名数组（`['prodimg']`）来应用特定的图片样式 -->
+                    <img-show :src="prod.pic"
+                              :class-list="['prodimg']" />
                   </view>
+                  <!-- 商品名称的文本标签，通过双括号插值表达式展示商品的名称（`prod.prodName`） -->
                   <view class="prod-text">
                     {{ prod.prodName }}
                   </view>
+                  <!-- 商品价格展示区域，包含价格符号、整数部分、小数部分的文本展示 -->
                   <view class="price">
+                    <!-- 价格符号文本，显示“￥”字样 -->
                     <text class="symbol">
                       ￥
                     </text>
+                    <!-- 价格的整数部分，通过调用 `wxs.parsePrice` 函数对商品价格（`prod.price`）进行处理，取处理结果的第一个元素作为整数部分展示（`wxs.parsePrice` 函数具体功能需查看相关代码） -->
                     <text class="big-num">
                       {{ wxs.parsePrice(prod.price)[0] }}
                     </text>
+                    <!-- 价格的小数部分，通过 `wxs.parsePrice` 函数取处理结果的第二个元素展示，并添加小数点 -->
                     <text class="small-num">
                       .{{ wxs.parsePrice(prod.price)[1] }}
                     </text>
@@ -177,50 +174,51 @@
           </view>
         </view>
 
-        <!-- 商城热卖 -->
-        <view
-          v-if="item.style==='1' && item.prods && item.prods.length"
-          class="hot-sale"
-        >
+        <!-- 商城热卖类型商品展示区域，只有当商品组的 `style` 属性为 `'1'` 且包含商品数据（`item.prods` 存在且长度大于 0）时才显示 -->
+        <view v-if="item.style==='1' && item.prods && item.prods.length"
+              class="hot-sale">
+          <!-- 商品组标题区域，包含标题文本以及“更多”操作按钮（带有箭头图标，用于提示用户可点击查看更多商品） -->
           <view class="title">
             <text>{{ item.title }}</text>
-            <view
-              class="more-prod-cont"
-              data-sts="0"
-              :data-id="item.id"
-              :data-title="item.title"
-              @tap="toClassifyPage"
-            >
+            <view class="more-prod-cont"
+                  data-sts="0"
+                  :data-id="item.id"
+                  :data-title="item.title"
+                  @tap="toClassifyPage">
+              <!-- “更多”的文本标签 -->
               <text class="more">
                 更多
               </text>
+              <!-- 箭头图标元素，用于视觉上引导用户点击操作 -->
               <text class="arrow" />
             </view>
           </view>
+          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
           <view class="hotsale-item-cont">
-            <block
-              v-for="(prod, index2) in item.prods"
-              :key="index2"
-            >
-              <view
-                class="prod-items"
-                :data-prodid="prod.prodId"
-                @tap="toProdPage"
-              >
+            <block v-for="(prod, index2) in item.prods"
+                   :key="index2">
+              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
+              <view class="prod-items"
+                    :data-prodid="prod.prodId"
+                    @tap="toProdPage">
                 <view class="hot-imagecont">
-                  <img-show
-                    :src="prod.pic"
-                    :class-list="['hotsaleimg']"
-                  />
+                  <!-- 商品图片展示的外层视图容器，内部使用 `img-show` 组件展示商品图片，原理与前面类似 -->
+                  <img-show :src="prod.pic"
+                            :class-list="['hotsaleimg']" />
                 </view>
+                <!-- 商品详细信息展示区域，包含商品名称、简介、价格以及购物车图标等元素 -->
                 <view class="hot-text">
+                  <!-- 商品名称展示部分 -->
                   <view class="hotprod-text">
                     {{ prod.prodName }}
                   </view>
+                  <!-- 商品简介的文本标签，通过双括号插值表达式展示商品的简介内容（`prod.brief`） -->
                   <view class="prod-info">
                     {{ prod.brief }}
                   </view>
+                  <!-- 商品价格及购物车图标相关展示区域 -->
                   <view class="prod-text-info">
+                    <!-- 商品价格展示部分，格式与前面相同，包含价格符号、整数部分、小数部分 -->
                     <view class="price">
                       <text class="symbol">
                         ￥
@@ -232,10 +230,9 @@
                         .{{ wxs.parsePrice(prod.price)[1] }}
                       </text>
                     </view>
-                    <image
-                      src="@/static/images/tabbar/basket-sel.png"
-                      class="basket-img"
-                    />
+                    <!-- 购物车图标元素，通过指定路径引入图片资源，通常表示可将该商品加入购物车的操作（具体功能需结合相关交互逻辑确定） -->
+                    <image src="@/static/images/tabbar/basket-sel.png"
+                           class="basket-img" />
                   </view>
                 </view>
               </view>
@@ -243,38 +240,39 @@
           </view>
         </view>
 
-        <!-- 更多宝贝 -->
-        <view
-          v-if="item.style==='0' && item.prods && item.prods.length"
-          class="more-prod"
-        >
+        <!-- 更多宝贝类型商品展示区域，只有当商品组的 `style` 属性为 `'0'` 且包含商品数据（`item.prods` 存在且长度大于 0）时才显示 -->
+        <view v-if="item.style==='0' && item.prods && item.prods.length"
+              class="more-prod">
+          <!-- 商品组标题区域，直接通过双括号插值表达式展示商品组的标题（来源于 `item.title` 属性） -->
           <view class="title">
             {{ item.title }}
           </view>
+          <!-- 商品列表展示区域，通过循环遍历 `item.prods` 数组展示每个商品的详细信息 -->
           <view class="prod-show">
-            <block
-              v-for="(prod, index2) in item.prods"
-              :key="index2"
-            >
-              <view
-                class="show-item"
-                :data-prodid="prod.prodId"
-                @tap="toProdPage"
-              >
+            <block v-for="(prod, index2) in item.prods"
+                   :key="index2">
+              <!-- 单个商品的视图容器，绑定点击事件 `toProdPage`，点击可触发跳转到对应商品页面的操作，通过自定义属性 `:data-prodid` 传递商品的 ID 信息 -->
+              <view class="show-item"
+                    :data-prodid="prod.prodId"
+                    @tap="toProdPage">
                 <view class="more-prod-pic">
-                  <img-show
-                    :src="prod.pic"
-                    :class-list="['more-pic']"
-                  />
+                  <!-- 商品图片展示的外层视图容器，内部使用 `img-show` 组件展示商品图片，方式与前面一致 -->
+                  <img-show :src="prod.pic"
+                            :class-list="['more-pic']" />
                 </view>
+                <!-- 商品详细信息展示区域，包含商品名称、简介、价格以及购物车图标等元素 -->
                 <view class="prod-text-right">
+                  <!-- 商品名称展示部分 -->
                   <view class="prod-text more">
                     {{ prod.prodName }}
                   </view>
+                  <!-- 商品简介的文本标签，通过双括号插值表达式展示商品的简介内容（`prod.brief`） -->
                   <view class="prod-info">
                     {{ prod.brief }}
                   </view>
+                  <!-- 商品价格及购物车图标相关展示区域 -->
                   <view class="b-cart">
+                    <!-- 商品价格展示部分，包含价格符号、整数部分、小数部分 -->
                     <view class="price">
                       <text class="symbol">
                         ￥
@@ -286,11 +284,10 @@
                         .{{ wxs.parsePrice(prod.price)[1] }}
                       </text>
                     </view>
-                    <image
-                      src="@/static/images/tabbar/basket-sel.png"
-                      class="basket-img"
-                      @tap.stop="addToCart(prod)"
-                    />
+                    <!-- 购物车图标元素，通过指定路径引入图片资源，绑定点击事件 `addToCart(prod)`，点击可触发将该商品加入购物车的操作 -->
+                    <image src="@/static/images/tabbar/basket-sel.png"
+                           class="basket-img"
+                           @tap.stop="addToCart(prod)" />
                   </view>
                 </view>
               </view>
diff --git a/front-end/mall4uni/src/pages/news-detail/news-detail.scss b/front-end/mall4uni/src/pages/news-detail/news-detail.scss
index 7dd8ece..4e2c682 100644
--- a/front-end/mall4uni/src/pages/news-detail/news-detail.scss
+++ b/front-end/mall4uni/src/pages/news-detail/news-detail.scss
@@ -1,23 +1,42 @@
+/* 定义新闻详情页的整体样式 */
 .news-detail {
+  /* 设置内边距（padding），20rpx表示在各个方向上都留出20个相对像素的空间 */
   padding: 20rpx;
+  /* 新闻标题的样式 */
   .news-detail-title {
+    /* 设置字体大小为32rpx */
     font-size: 32rpx;
+    /* 设置字体加粗 */
     font-weight: bold;
+    /* 设置行高为50rpx，确保文本有适当的间距 */
     line-height: 50rpx;
+    /* 设置内边距，使标题与容器边缘有一定的距离 */
     padding: 20rpx;
   }
+  /* 新闻正文内容的样式 */
   .news-detail-text {
+    /* 设置字体大小为28rpx */
     font-size: 28rpx;
+    /* 设置行高为46rpx，以保证阅读的舒适性 */
     line-height: 46rpx;
+    /* 设置文本对齐方式为两端对齐 */
     text-align: justify;
+    /* 对于中文字符，使用inter-ideograph来调整字符间距，使文本更美观 */
     text-justify: inter-ideograph;
+    /* 设置上边距，使得正文与前一个元素之间有足够的空间 */
     margin-top: 20rpx;
   }
 }
+
+/* 内容区域的样式 */
 .content {
+  /* 使用 :deep 伪类选择器穿透到子组件中的 img 标签 */
   :deep(img) {
+    /* 确保图片作为块级元素显示，占据其父容器的全部宽度 */
     display: block;
+    /* 图片宽度设置为100%，使其适应父容器的宽度 */
     width: 100%;
+    /* 保持图片的宽高比例不变，高度自动调整 */
     height: auto;
   }
 }
diff --git a/front-end/mall4uni/src/pages/news-detail/news-detail.vue b/front-end/mall4uni/src/pages/news-detail/news-detail.vue
index e21ce59..4b356fd 100644
--- a/front-end/mall4uni/src/pages/news-detail/news-detail.vue
+++ b/front-end/mall4uni/src/pages/news-detail/news-detail.vue
@@ -1,41 +1,59 @@
 <template>
   <view class="container">
+    <!-- 新闻详情容器 -->
     <view class="news-detail">
+      <!-- 动态绑定新闻标题，使用双大括号语法插值显示 news 对象中的 title 属性 -->
       <view class="news-detail-title">
         {{ news.title }}
       </view>
-      <rich-text
-        class="content"
-        :nodes="news.content"
+      <!-- 使用 rich-text 组件来解析并渲染 HTML 内容，动态绑定 news 对象中的 content 属性 -->
+      <rich-text class="content"
+                 :nodes="news.content"  <!-- :nodes 是 v-bind:nodes 的缩写，用于绑定 HTML 字符串 -->
       />
     </view>
   </view>
 </template>
 
 <script setup>
-const news = ref({
-  title: '',
-  content: '',
-  id: null
-})
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  // 加载公告详情
-  http.request({
-    url: '/shop/notice/info/' + options.id,
-    method: 'GET'
-  })
-    .then(({ data }) => {
-      data.content = data.content.replace(/width=/gi, 'sss=')
-      data.content = data.content.replace(/height=/gi, 'sss=')
-      data.content = data.content.replace(/ \/>/gi, ' style="max-width:100% !important;display:block;" />')
-      news.value = data
+  // 导入 ref 以创建响应式数据对象
+  import { ref } from 'vue';
+  // 假设 http 和 onLoad 已经通过适当的插件或框架特性导入
+
+  // 定义一个响应式的 news 对象，初始值为一个空的对象，包含 title, content 和 id 属性
+  const news = ref({
+    title: '',  // 新闻标题
+    content: '', // 新闻内容（HTML 格式）
+    id: null    // 新闻ID
+  });
+
+  /**
+   * 页面加载生命周期钩子，当页面加载时调用
+   * @param options - 包含页面加载参数的对象
+   */
+  onLoad((options) => {
+    // 发起 HTTP 请求以获取公告详情，使用传入的 options.id 作为请求参数
+    http.request({
+      url: '/shop/notice/info/' + options.id, // API 端点 URL
+      method: 'GET' // 请求方法
     })
-})
+      .then(({ data }) => {
+        // 修改返回的数据，移除 img 标签中的 width 和 height 属性，防止图片过大
+        // 并添加样式以确保图片宽度不超过父容器，并且以块级元素显示
+        data.content = data.content.replace(/width=/gi, 'sss=') // 移除 width 属性
+        data.content = data.content.replace(/height=/gi, 'sss=') // 移除 height 属性
+        data.content = data.content.replace(/ \/>/gi, ' style="max-width:100% !important;display:block;" />') // 添加样式
+
+        // 将从服务器获取的数据赋值给响应式的 news 对象
+        news.value = data;
+      })
+      .catch(error => {
+        // 处理可能发生的错误 (这里可以添加错误处理逻辑)
+        console.error('Failed to fetch news detail:', error);
+      });
+  });
 </script>
 
 <style scoped lang="scss">
-@use './news-detail.scss';
+  /* 引入外部的 SCSS 文件，以定义组件的样式 */
+  @use './news-detail.scss';
 </style>
diff --git a/front-end/mall4uni/src/pages/order-detail/order-detail.scss b/front-end/mall4uni/src/pages/order-detail/order-detail.scss
index 9a7795d..2ab5b7a 100644
--- a/front-end/mall4uni/src/pages/order-detail/order-detail.scss
+++ b/front-end/mall4uni/src/pages/order-detail/order-detail.scss
@@ -1,247 +1,284 @@
+/* 定义容器的基本样式 */
 .container {
-  background: #f4f4f4;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
 }
+
+/* 订单详情的样式 */
 .order-detail {
-  margin-bottom: 120rpx;
-  padding-bottom: 160rpx;
-  .delivery-addr {
-    padding: 20rpx 30rpx;
-    background: #fff;
-    .user-info {
-      line-height: 48rpx;
-      word-wrap: break-word;
-      word-break: break-all;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      .item {
-        font-size: 28rpx;
-        margin-right: 30rpx;
-        vertical-align: top;
-        display: inline-block;
+  margin-bottom: 120rpx; /* 设置底部外边距，确保与其他元素有足够的间距 */
+  padding-bottom: 160rpx; /* 设置底部内边距，用于留出足够的空间 */
+
+  .delivery-addr { /* 配送地址部分的样式 */
+    padding: 20rpx 30rpx; /* 设置上下左右内边距 */
+    background: #fff; /* 设置背景颜色为白色 */
+
+    .user-info { /* 用户信息的样式 */
+      line-height: 48rpx; /* 设置行高 */
+      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
+      word-break: break-all; /* 在任何字符间断开 */
+      overflow: hidden; /* 超出内容隐藏 */
+      text-overflow: ellipsis; /* 超出内容以省略号显示 */
+      display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
+      -webkit-line-clamp: 1; /* 限制文本行数为1 */
+      -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
+
+      .item { /* 用户信息项的样式 */
+        font-size: 28rpx; /* 设置字体大小 */
+        margin-right: 30rpx; /* 设置右边距 */
+        vertical-align: top; /* 垂直对齐方式为顶部 */
+        display: inline-block; /* 作为行内块级元素显示 */
       }
     }
-    .addr {
-      font-size: 26rpx;
-      line-height: 36rpx;
-      color: #999;
-      word-wrap: break-word;
+
+    .addr { /* 地址的样式 */
+      font-size: 26rpx; /* 设置字体大小 */
+      line-height: 36rpx; /* 设置行高 */
+      color: #999; /* 设置字体颜色为浅灰色 */
+      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
     }
   }
 }
+
+/* 商品项的样式 */
 .prod-item {
-  background-color: #fff;
-  margin-top: 15rpx;
-  font-size: 28rpx;
-  .item-cont {
-    .prod-pic {
+  background-color: #fff; /* 设置背景颜色为白色 */
+  margin-top: 15rpx; /* 设置上边距 */
+  font-size: 28rpx; /* 设置字体大小 */
+
+  .item-cont { /* 商品内容的样式 */
+    .prod-pic { /* 商品图片的样式 */
       image {
         width: 180rpx;
         height: 180rpx;
         width: 100%;
-        height: 100%;
+        height: 100%; /* 确保图片填满整个容器 */
       }
-      font-size: 0;
-      display: block;
+
+      font-size: 0; /* 消除行内元素间的空隙 */
+      display: block; /* 作为块级元素显示 */
       width: 160rpx;
       height: 160rpx;
-      overflow: hidden;
-      background: #fff;
-      margin-right: 16rpx;
+      overflow: hidden; /* 超出内容隐藏 */
+      background: #fff; /* 设置背景颜色为白色 */
+      margin-right: 16rpx; /* 设置右边距 */
     }
-    display: flex;
-    align-items: center;
-    padding: 30rpx;
-    border-top: 2rpx solid #f1f1f1;
-    .prod-info {
-      margin-left: 10rpx;
-      font-size: 28rpx;
-      width: 100%;
-      position: relative;
+
+    display: flex; /* 使用弹性布局 */
+    align-items: center; /* 垂直居中对齐 */
+    padding: 30rpx; /* 设置内边距 */
+    border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
+
+    .prod-info { /* 商品信息的样式 */
+      margin-left: 10rpx; /* 设置左边距 */
+      font-size: 28rpx; /* 设置字体大小 */
+      width: 100%; /* 设置宽度为100% */
+      position: relative; /* 设置相对定位 */
       height: 80px;
-      -webkit-flex: 1;
-      -ms-flex: 1;
-      -webkit-box-flex: 1;
-      -moz-box-flex: 1;
-      flex: 1;
-      .prodname {
-        font-size: 28rpx;
-        line-height: 40rpx;
-        max-height: 86rpx;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        text-overflow: ellipsis;
-        word-break: break-all;
+      flex: 1; /* 占据剩余空间 */
+
+      .prodname { /* 商品名称的样式 */
+        font-size: 28rpx; /* 设置字体大小 */
+        line-height: 40rpx; /* 设置行高 */
+        max-height: 86rpx; /* 设置最大高度 */
+        overflow: hidden; /* 超出内容隐藏 */
+        display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
+        -webkit-line-clamp: 1; /* 限制文本行数为1 */
+        -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
+        text-overflow: ellipsis; /* 超出内容以省略号显示 */
+        word-break: break-all; /* 在任何字符间断开 */
       }
-      .prod-info-cont {
-        position: relative;
-        color: #999;
-        margin-top: 10rpx;
-        font-size: 24rpx;
-        .info-item {
-          color: #999;
-          height: 28rpx;
-          margin-top: 10rpx;
-          font-size: 24rpx;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
-          word-break: break-all;
-          width: 70%;
+
+      .prod-info-cont { /* 商品信息内容的样式 */
+        position: relative; /* 设置相对定位 */
+        color: #999; /* 设置字体颜色为浅灰色 */
+        margin-top: 10rpx; /* 设置上边距 */
+        font-size: 24rpx; /* 设置字体大小 */
+
+        .info-item { /* 信息项的样式 */
+          color: #999; /* 设置字体颜色为浅灰色 */
+          height: 28rpx; /* 设置高度 */
+          margin-top: 10rpx; /* 设置上边距 */
+          font-size: 24rpx; /* 设置字体大小 */
+          overflow: hidden; /* 超出内容隐藏 */
+          display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
+          -webkit-line-clamp: 1; /* 限制文本行数为1 */
+          -webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
+          text-overflow: ellipsis; /* 超出内容以省略号显示 */
+          word-break: break-all; /* 在任何字符间断开 */
+          width: 70%; /* 设置宽度 */
         }
-        .number {
-          float: left;
-          margin-right: 20rpx;
+
+        .number { /* 数量的样式 */
+          float: left; /* 向左浮动 */
+          margin-right: 20rpx; /* 设置右边距 */
         }
       }
     }
   }
-  .price-nums {
-    margin-top: 30rpx;
-    .prodprice {
-      color: #333;
-      height: 50rpx;
-      line-height: 50rpx;
-      font-size: 24rpx;
-      float: left;
+
+  .price-nums { /* 价格和数量的样式 */
+    margin-top: 30rpx; /* 设置上边距 */
+
+    .prodprice { /* 商品价格的样式 */
+      color: #333; /* 设置字体颜色 */
+      height: 50rpx; /* 设置高度 */
+      line-height: 50rpx; /* 设置行高 */
+      font-size: 24rpx; /* 设置字体大小 */
+      float: left; /* 向左浮动 */
     }
-    .btn-box {
-      float: right;
-      text-align: right;
-      .btn {
-        padding: 6rpx 30rpx;
-        line-height: 36rpx;
-        margin-left: 20rpx;
-        font-size: 24rpx;
-        display: inline-block;
-        border: 2rpx solid #e4e4e4;
-        border-radius: 50rpx;
+
+    .btn-box { /* 按钮容器的样式 */
+      float: right; /* 向右浮动 */
+      text-align: right; /* 文本右对齐 */
+
+      .btn { /* 按钮的样式 */
+        padding: 6rpx 30rpx; /* 设置内边距 */
+        line-height: 36rpx; /* 设置行高 */
+        margin-left: 20rpx; /* 设置左边距 */
+        font-size: 24rpx; /* 设置字体大小 */
+        display: inline-block; /* 作为行内块级元素显示 */
+        border: 2rpx solid #e4e4e4; /* 设置边框 */
+        border-radius: 50rpx; /* 设置圆角 */
       }
     }
   }
 }
+
+/* 订单消息的样式 */
 .order-msg {
-  background: #fff;
-  margin-top: 15rpx;
-  font-size: 28rpx;
-  .msg-item {
-    padding: 20rpx;
-    border-top: 2rpx solid #f1f1f1;
-    &:first-child {
+  background: #fff; /* 设置背景颜色为白色 */
+  margin-top: 15rpx; /* 设置上边距 */
+  font-size: 28rpx; /* 设置字体大小 */
+
+  .msg-item { /* 消息项的样式 */
+    padding: 20rpx; /* 设置内边距 */
+    border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
+
+    &:first-child { /* 第一个消息项没有上边框 */
       border: 0;
     }
-    .item {
-      display: flex;
-      padding: 10rpx 0;
-      align-items: center;
-      box-sizing: border-box;
-      .item-tit {
-        min-width: 140rpx;
-        color: #999;
-        line-height: 48rpx;
+
+    .item { /* 消息项内部的样式 */
+      display: flex; /* 使用弹性布局 */
+      padding: 10rpx 0; /* 设置上下内边距 */
+      align-items: center; /* 垂直居中对齐 */
+      box-sizing: border-box; /* 设置盒模型 */
+
+      .item-tit { /* 项目标题的样式 */
+        min-width: 140rpx; /* 设置最小宽度 */
+        color: #999; /* 设置字体颜色为浅灰色 */
+        line-height: 48rpx; /* 设置行高 */
       }
-      .item-txt {
-        flex: 1;
-        line-height: 48rpx;
+
+      .item-txt { /* 项目文本的样式 */
+        flex: 1; /* 占据剩余空间 */
+        line-height: 48rpx; /* 设置行高 */
       }
-      .item-txt.remarks {
-        max-width: 600rpx;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+
+      .item-txt.remarks { /* 备注文本的样式 */
+        max-width: 600rpx; /* 设置最大宽度 */
+        white-space: nowrap; /* 不允许换行 */
+        overflow: hidden; /* 超出内容隐藏 */
+        text-overflow: ellipsis; /* 超出内容以省略号显示 */
       }
-      .copy-btn {
-        display: block;
-        margin-left: 20rpx;
-        border: 2rpx solid #e4e4e4;
-        padding: 6rpx 24rpx;
-        border-radius: 50rpx;
-        font-size: 24rpx;
-        line-height: 28rpx;
+
+      .copy-btn { /* 复制按钮的样式 */
+        display: block; /* 作为块级元素显示 */
+        margin-left: 20rpx; /* 设置左边距 */
+        border: 2rpx solid #e4e4e4; /* 设置边框 */
+        padding: 6rpx 24rpx; /* 设置内边距 */
+        border-radius: 50rpx; /* 设置圆角 */
+        font-size: 24rpx; /* 设置字体大小 */
+        line-height: 28rpx; /* 设置行高 */
       }
-      .item-txt.price {
-        text-align: right;
+
+      .item-txt.price { /* 价格文本的样式 */
+        text-align: right; /* 文本右对齐 */
       }
     }
-    .item.payment {
-      border-top: 2rpx solid #f1f1f1;
-      color: #eb2444;
-      padding-top: 30rpx;
+
+    .item.payment { /* 支付信息的样式 */
+      border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
+      color: #eb2444; /* 设置字体颜色为红色 */
+      padding-top: 30rpx; /* 设置上边距 */
     }
   }
 }
+
+/* 订单详情页脚的样式 */
 .order-detail-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  max-width: 750rpx;
-  background: #fff;
-  margin: auto;
-  display: -webkit-flex;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 22rpx 0;
-  font-size: 26rpx;
-  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
-  .dele-order {
-    margin-left: 20rpx;
-    line-height: 60rpx;
-    display: block;
-    margin-right: 20rpx;
-    width: 150rpx;
-    text-align: center;
+  position: fixed; /* 固定定位 */
+  bottom: 0; /* 固定在页面底部 */
+  width: 100%; /* 设置宽度为100% */
+  max-width: 750rpx; /* 设置最大宽度 */
+  background: #fff; /* 设置背景颜色为白色 */
+  margin: auto; /* 水平居中 */
+  display: flex; /* 使用弹性布局 */
+  padding: 22rpx 0; /* 设置上下内边距 */
+  font-size: 26rpx; /* 设置字体大小 */
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 设置阴影效果 */
+
+  .dele-order { /* 删除订单按钮的样式 */
+    margin-left: 20rpx; /* 设置左边距 */
+    line-height: 60rpx; /* 设置行高 */
+    display: block; /* 作为块级元素显示 */
+    margin-right: 20rpx; /* 设置右边距 */
+    width: 150rpx; /* 设置宽度 */
+    text-align: center; /* 文本居中 */
   }
-  .footer-box {
-    flex: 1;
-    text-align: right;
-    line-height: 60rpx;
-    .buy-again {
-      font-size: 26rpx;
-      color: #fff;
-      background: #eb2444;
-      border-radius: 50rpx;
-      padding: 10rpx 20rpx;
-      margin-right: 20rpx;
+
+  .footer-box { /* 页脚容器的样式 */
+    flex: 1; /* 占据剩余空间 */
+    text-align: right; /* 文本右对齐 */
+    line-height: 60rpx; /* 设置行高 */
+
+    .buy-again { /* 再次购买按钮的样式 */
+      font-size: 26rpx; /* 设置字体大小 */
+      color: #fff; /* 设置字体颜色为白色 */
+      background: #eb2444; /* 设置背景颜色为红色 */
+      border-radius: 50rpx; /* 设置圆角 */
+      padding: 10rpx 20rpx; /* 设置内边距 */
+      margin-right: 20rpx; /* 设置右边距 */
     }
-    .apply-service {
-      font-size: 26rpx;
-      border-radius: 50rpx;
-      padding: 10rpx 20rpx;
-      border: 1px solid #e4e4e4;
-      margin-right: 20rpx;
+
+    .apply-service { /* 申请服务按钮的样式 */
+      font-size: 26rpx; /* 设置字体大小 */
+      border-radius: 50rpx; /* 设置圆角 */
+      padding: 10rpx 20rpx; /* 设置内边距 */
+      border: 1px solid #e4e4e4; /* 设置边框 */
+      margin-right: 20rpx; /* 设置右边距 */
     }
   }
 }
+
+/* 清除浮动的样式 */
 .clearfix {
-  &:after {
+  &:after { /* 使用伪元素清除浮动 */
     content: " ";
-    display: table;
-    clear: both;
+    display: table; /* 创建一个新的格式化上下文 */
+    clear: both; /* 清除所有浮动 */
   }
 }
+
+/* 订单状态的样式 */
 .order-state {
-  height: 70rpx;
-  line-height: 70rpx;
-  text-align: right;
-  margin-right: 20rpx;
-  .order-sts {
-    color: #eb2444;
-    font-size: 28rpx;
+  height: 70rpx; /* 设置高度 */
+  line-height: 70rpx; /* 设置行高 */
+  text-align: right; /* 文本右对齐 */
+  margin-right: 20rpx; /* 设置右边距 */
+
+  .order-sts { /* 订单状态文本的样式 */
+    color: #eb2444; /* 设置字体颜色为红色 */
+    font-size: 28rpx; /* 设置字体大小 */
   }
-  .order-sts.gray {
-    color: #999;
-    height: 32rpx;
-    line-height: 32rpx;
+
+  .order-sts.gray { /* 灰色状态文本的样式 */
+    color: #999; /* 设置字体颜色为浅灰色 */
+    height: 32rpx; /* 设置高度 */
+    line-height: 32rpx; /* 设置行高 */
   }
-  .order-sts.normal {
-    color: #333;
+
+  .order-sts.normal { /* 正常状态文本的样式 */
+    color: #333; /* 设置字体颜色为深灰色 */
   }
 }
diff --git a/front-end/mall4uni/src/pages/order-detail/order-detail.vue b/front-end/mall4uni/src/pages/order-detail/order-detail.vue
index 2c48514..9fb0d05 100644
--- a/front-end/mall4uni/src/pages/order-detail/order-detail.vue
+++ b/front-end/mall4uni/src/pages/order-detail/order-detail.vue
@@ -1,65 +1,35 @@
 <template>
   <view class="container">
     <view class="order-detail">
-      <view
-        v-if="userAddrDto"
-        class="delivery-addr"
-      >
+      <!-- 配送地址信息 -->
+      <view v-if="userAddrDto" class="delivery-addr">
         <view class="user-info">
-          <text class="item">
-            {{ userAddrDto.receiver }}
-          </text>
-          <text class="item">
-            {{ userAddrDto.mobile }}
-          </text>
+          <text class="item">{{ userAddrDto.receiver }}</text> <!-- 显示收件人姓名 -->
+          <text class="item">{{ userAddrDto.mobile }}</text> <!-- 显示联系电话 -->
         </view>
         <view class="addr">
-          {{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area }}{{
-            userAddrDto.area
-          }}{{ userAddrDto.addr }}
+          {{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area }}{{ userAddrDto.addr }} <!-- 显示详细地址 -->
         </view>
       </view>
 
       <!-- 商品信息 -->
-      <view
-        v-if="orderItemDtos"
-        class="prod-item"
-      >
-        <block
-          v-for="(item, index) in orderItemDtos"
-          :key="index"
-        >
-          <view
-            class="item-cont"
-            :data-prodid="item.prodId"
-            @tap="toProdPage"
-          >
+      <view v-if="orderItemDtos" class="prod-item">
+        <block v-for="(item, index) in orderItemDtos" :key="index">
+          <view class="item-cont" :data-prodid="item.prodId" @tap="toProdPage">
             <view class="prod-pic">
-              <image :src="item.pic" />
+              <image :src="item.pic" /> <!-- 显示商品图片 -->
             </view>
             <view class="prod-info">
-              <view class="prodname">
-                {{ item.prodName }}
-              </view>
+              <view class="prodname">{{ item.prodName }}</view> <!-- 显示商品名称 -->
               <view class="prod-info-cont">
-                <text class="number">
-                  数量：{{ item.prodCount }}
-                </text>
-                <text class="info-item">
-                  {{ item.skuName }}
-                </text>
+                <text class="number">数量：{{ item.prodCount }}</text> <!-- 显示商品数量 -->
+                <text class="info-item">{{ item.skuName }}</text> <!-- 显示SKU信息 -->
               </view>
               <view class="price-nums clearfix">
                 <text class="prodprice">
-                  <text class="symbol">
-                    ￥
-                  </text>
-                  <text class="big-num">
-                    {{ wxs.parsePrice(item.price)[0] }}
-                  </text>
-                  <text class="small-num">
-                    .{{ wxs.parsePrice(item.price)[1] }}
-                  </text>
+                  <text class="symbol">￥</text> <!-- 显示价格符号 -->
+                  <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分 -->
+                  <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分 -->
                 </text>
                 <view class="btn-box" />
               </view>
@@ -72,228 +42,176 @@
       <view class="order-msg">
         <view class="msg-item">
           <view class="item">
-            <text class="item-tit">
-              订单编号：
-            </text>
-            <text class="item-txt">
-              {{ orderNumber }}
-            </text>
+            <text class="item-tit">订单编号：</text>
+            <text class="item-txt">{{ orderNumber }}</text> <!-- 显示订单编号 -->
           </view>
           <view class="item">
-            <text class="item-tit">
-              下单时间：
-            </text>
-            <text class="item-txt">
-              {{ createTime }}
-            </text>
+            <text class="item-tit">下单时间：</text>
+            <text class="item-txt">{{ createTime }}</text> <!-- 显示下单时间 -->
           </view>
         </view>
         <view class="msg-item">
           <view class="item">
-            <text class="item-tit">
-              支付方式：
-            </text>
-            <text class="item-txt">
-              微信支付
-            </text>
+            <text class="item-tit">支付方式：</text>
+            <text class="item-txt">微信支付</text> <!-- 固定显示支付方式为微信支付 -->
           </view>
           <view class="item">
-            <text class="item-tit">
-              配送方式：
-            </text>
-            <text class="item-txt">
-              普通配送
-            </text>
+            <text class="item-tit">配送方式：</text>
+            <text class="item-txt">普通配送</text> <!-- 固定显示配送方式为普通配送 -->
           </view>
-          <view class="item">
-            <text
-              v-if="!!remarks"
-              class="item-tit"
-            >
-              订单备注：
-            </text>
-            <text class="item-txt remarks">
-              {{ remarks }}
-            </text>
+          <view class="item" v-if="!!remarks">
+            <text class="item-tit">订单备注：</text>
+            <text class="item-txt remarks">{{ remarks }}</text> <!-- 显示订单备注，如果有 -->
           </view>
         </view>
       </view>
 
+      <!-- 订单金额详情 -->
       <view class="order-msg">
         <view class="msg-item">
           <view class="item">
-            <view class="item-tit">
-              订单总额：
-            </view>
+            <view class="item-tit">订单总额：</view>
             <view class="item-txt price">
-              <text class="symbol">
-                ￥
-              </text>
-              <text class="big-num">
-                {{ wxs.parsePrice(total)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(total)[1] }}
-              </text>
+              <text class="symbol">￥</text>
+              <text class="big-num">{{ wxs.parsePrice(total)[0] }}</text> <!-- 显示订单总额的整数部分 -->
+              <text class="small-num">.{{ wxs.parsePrice(total)[1] }}</text> <!-- 显示订单总额的小数部分 -->
             </view>
           </view>
           <view class="item">
-            <view class="item-tit">
-              运费：
-            </view>
+            <view class="item-tit">运费：</view>
             <view class="item-txt price">
-              <text class="symbol">
-                ￥
-              </text>
-              <text class="big-num">
-                {{ wxs.parsePrice(transfee)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(transfee)[1] }}
-              </text>
+              <text class="symbol">￥</text>
+              <text class="big-num">{{ wxs.parsePrice(transfee)[0] }}</text> <!-- 显示运费的整数部分 -->
+              <text class="small-num">.{{ wxs.parsePrice(transfee)[1] }}</text> <!-- 显示运费的小数部分 -->
             </view>
           </view>
           <view class="item">
-            <view class="item-tit">
-              优惠券：
-            </view>
+            <view class="item-tit">优惠券：</view>
             <view class="item-txt price">
-              <text class="symbol">
-                -￥
-              </text>
-              <text class="big-num">
-                {{ wxs.parsePrice(reduceAmount)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(reduceAmount)[1] }}
-              </text>
+              <text class="symbol">-￥</text>
+              <text class="big-num">{{ wxs.parsePrice(reduceAmount)[0] }}</text> <!-- 显示优惠券的整数部分 -->
+              <text class="small-num">.{{ wxs.parsePrice(reduceAmount)[1] }}</text> <!-- 显示优惠券的小数部分 -->
             </view>
           </view>
           <view class="item payment">
             <view class="item-txt price">
               实付款：
-              <text class="symbol">
-                ￥
-              </text>
-              <text class="big-num">
-                {{ wxs.parsePrice(actualTotal)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(actualTotal)[1] }}
-              </text>
+              <text class="symbol">￥</text>
+              <text class="big-num">{{ wxs.parsePrice(actualTotal)[0] }}</text> <!-- 显示实付款的整数部分 -->
+              <text class="small-num">.{{ wxs.parsePrice(actualTotal)[1] }}</text> <!-- 显示实付款的小数部分 -->
             </view>
           </view>
         </view>
       </view>
 
       <!-- 底部栏 -->
-      <view
-        v-if="status==5||status==6"
-        class="order-detail-footer"
-      >
-        <text
-          v-if="status==5||status==6"
-          class="dele-order"
-          @tap="delOrderList"
-        >
+      <view v-if="status === 5 || status === 6" class="order-detail-footer">
+        <text v-if="status === 5 || status === 6" class="dele-order" @tap="delOrderList">
           删除订单
-        </text>
+        </text> <!-- 如果订单状态为已完成或已取消，则显示删除订单按钮 -->
       </view>
     </view>
   </view>
 </template>
 
 <script setup>
-const wxs = number()
+  import { ref } from 'vue';
+  import { onLoad, uni } from '@dcloudio/uni-app'; // 假设已经正确导入了必要的模块
+
+  // 引入处理数字的工具函数
+  const wxs = number();
 
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  loadOrderDetail(options.orderNum)
-})
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad((options) => {
+    loadOrderDetail(options.orderNum); // 加载订单详情
+  });
 
-/**
- * 跳转商品详情页
- * @param e
- */
-const toProdPage = (e) => {
-  const prodid = e.currentTarget.dataset.prodid
-  uni.navigateTo({
-    url: '/pages/prod/prod?prodid=' + prodid
-  })
-}
+  /**
+   * 跳转商品详情页
+   * @param e - 触发事件对象
+   */
+  const toProdPage = (e) => {
+    const prodid = e.currentTarget.dataset.prodid; // 获取商品ID
+    uni.navigateTo({
+      url: '/pages/prod/prod?prodid=' + prodid // 导航到商品详情页
+    });
+  };
 
-const remarks = ref('')
-const orderItemDtos = ref([])
-const reduceAmount = ref('')
-const transfee = ref('')
-const status = ref(0)
-const actualTotal = ref(0)
-const userAddrDto = ref(null)
-const orderNumber = ref('')
-const createTime = ref('')
-const total = ref(0) // 商品总额
-/**
- * 加载订单数据
- */
-const loadOrderDetail = (orderNum) => {
-  uni.showLoading() // 加载订单详情
-  http.request({
-    url: '/p/myOrder/orderDetail',
-    method: 'GET',
-    data: {
-      orderNumber: orderNum
-    }
-  })
-    .then(({ data }) => {
-      orderNumber.value = orderNum
-      actualTotal.value = data.actualTotal
-      userAddrDto.value = data.userAddrDto
-      remarks.value = data.remarks
-      orderItemDtos.value = data.orderItemDtos
-      createTime.value = data.createTime
-      status.value = data.status
-      transfee.value = data.transfee
-      reduceAmount.value = data.reduceAmount
-      total.value = data.total
-      uni.hideLoading()
+  // 定义响应式数据
+  const remarks = ref(''); // 订单备注
+  const orderItemDtos = ref([]); // 商品列表
+  const reduceAmount = ref(''); // 优惠券金额
+  const transfee = ref(''); // 运费
+  const status = ref(0); // 订单状态
+  const actualTotal = ref(0); // 实付款
+  const userAddrDto = ref(null); // 收货地址信息
+  const orderNumber = ref(''); // 订单编号
+  const createTime = ref(''); // 下单时间
+  const total = ref(0); // 商品总额
+
+  /**
+   * 加载订单数据
+   * @param orderNum - 订单编号
+   */
+  const loadOrderDetail = (orderNum) => {
+    uni.showLoading(); // 显示加载提示
+    http.request({
+      url: '/p/myOrder/orderDetail', // API 端点 URL
+      method: 'GET', // 请求方法
+      data: {
+        orderNumber: orderNum // 请求参数
+      }
     })
-}
+      .then(({ data }) => {
+        orderNumber.value = orderNum;
+        actualTotal.value = data.actualTotal;
+        userAddrDto.value = data.userAddrDto;
+        remarks.value = data.remarks;
+        orderItemDtos.value = data.orderItemDtos;
+        createTime.value = data.createTime;
+        status.value = data.status;
+        transfee.value = data.transfee;
+        reduceAmount.value = data.reduceAmount;
+        total.value = data.total;
+        uni.hideLoading(); // 隐藏加载提示
+      });
+  };
 
-/**
- * 删除已完成||已取消的订单
- */
-const delOrderList = () => {
-  uni.showModal({
-    title: '',
-    content: '确定要删除此订单吗？',
-    confirmColor: '#eb2444',
-    success (res) {
-      if (res.confirm) {
-        uni.showLoading()
-        http.request({
-          url: '/p/myOrder/' + orderNumber.value,
-          method: 'DELETE'
-        })
-          .then(() => {
-            uni.hideLoading()
-            uni.showToast({
-              title: res || '删除成功',
-              icon: 'none'
-            })
-            setTimeout(() => {
-              uni.redirectTo({
-                url: '/pages/orderList/orderList'
-              })
-            }, 1000)
+  /**
+   * 删除已完成||已取消的订单
+   */
+  const delOrderList = () => {
+    uni.showModal({
+      title: '', // 提示框标题
+      content: '确定要删除此订单吗？', // 提示内容
+      confirmColor: '#eb2444', // 确认按钮颜色
+      success(res) {
+        if (res.confirm) {
+          uni.showLoading(); // 显示加载提示
+          http.request({
+            url: '/p/myOrder/' + orderNumber.value, // API 端点 URL
+            method: 'DELETE' // 请求方法
           })
+            .then(() => {
+              uni.hideLoading(); // 隐藏加载提示
+              uni.showToast({
+                title: res || '删除成功', // 成功提示
+                icon: 'none'
+              });
+              setTimeout(() => {
+                uni.redirectTo({
+                  url: '/pages/orderList/orderList' // 重定向到订单列表页
+                });
+              }, 1000); // 1秒后跳转
+            });
+        }
       }
-    }
-  })
-}
+    });
+  };
 </script>
 
 <style scoped lang="scss">
-@use './order-detail.scss';
+  @use './order-detail.scss'; /* 引入外部的 SCSS 文件，以定义组件的样式 */
 </style>