diff --git a/front-end/mall4uni/src/pages/prod-classify/prod-classify.scss b/front-end/mall4uni/src/pages/prod-classify/prod-classify.scss
index 3932b9b..38698c5 100644
--- a/front-end/mall4uni/src/pages/prod-classify/prod-classify.scss
+++ b/front-end/mall4uni/src/pages/prod-classify/prod-classify.scss
@@ -1,38 +1,48 @@
+/* 容器样式 */
 .container {
-  background: #f4f4f4;
-  min-height: 100vh;
-  padding: 7px;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
+  min-height: 100vh; /* 最小高度为视口高度，确保内容不满屏时也有足够的空间 */
+  padding: 7px; /* 内边距，给容器内的元素留出一定的空间 */
 }
+
+/* 固定在顶部的线条 */
 .line-fix {
-  width: 100%;
-  height: 2rpx;
-  background: #e1e1e1;
-  position: fixed;
-  top: 0;
+  width: 100%; /* 线条宽度为100%，覆盖整个屏幕宽度 */
+  height: 2rpx; /* 线条高度为2rpx（响应式单位），非常细的一条线 */
+  background: #e1e1e1; /* 线条颜色为浅灰色 */
+  position: fixed; /* 将线条固定在页面顶部，不会随页面滚动而移动 */
+  top: 0; /* 线条距离页面顶部0像素 */
 }
+
+/* 标题背景样式 */
 .tit-background {
-  width: 100%;
-  height: 20rpx;
-  background: #f4f4f4;
+  width: 100%; /* 背景宽度为100%，覆盖整个屏幕宽度 */
+  height: 20rpx; /* 背景高度为20rpx（响应式单位） */
+  background: #f4f4f4; /* 背景颜色为浅灰色 */
 }
+
+/* 商品列表样式 */
 .prod-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: flex; /* 使用弹性布局，使子元素可以灵活排列 */
+  flex-wrap: wrap; /* 允许子元素换行显示 */
+  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
 }
+
+/* 深度选择器，用于修改子组件的样式 */
 :deep(.prod-items) {
-  display: inline-block;
-  width: 345rpx !important;
-  &:nth-child(2n) {
-    margin-left: 30rpx;
+  display: inline-block; /* 将商品项设置为行内块级元素，允许在同一行中显示多个商品 */
+  width: 345rpx !important; /* 设置商品项的宽度为345rpx，并使用!important确保优先级 */
+  &:nth-child(2n) { /* 对于每第二个商品项 */
+    margin-left: 30rpx; /* 左边距为30rpx，使第二列的商品与第一列保持一定间距 */
   }
 }
-/* 空 */
+
+/* 空状态提示样式 */
 .empty {
-  display: block;
-  width: 100%;
-  font-size: 26rpx;
-  color: #999;
-  margin-top: 20vh;
-  text-align: center;
+  display: block; /* 将空状态提示设置为块级元素 */
+  width: 100%; /* 提示宽度为100%，覆盖整个父容器 */
+  font-size: 26rpx; /* 字体大小为26rpx（响应式单位） */
+  color: #999; /* 文字颜色为浅灰色 */
+  margin-top: 20vh; /* 上边距为视口高度的20%，将提示居中显示 */
+  text-align: center; /* 文字水平居中 */
 }
diff --git a/front-end/mall4uni/src/pages/prod-classify/prod-classify.vue b/front-end/mall4uni/src/pages/prod-classify/prod-classify.vue
index c43ae5a..2e85f50 100644
--- a/front-end/mall4uni/src/pages/prod-classify/prod-classify.vue
+++ b/front-end/mall4uni/src/pages/prod-classify/prod-classify.vue
@@ -1,16 +1,13 @@
 <template>
   <view class="container">
     <view>
-      <block
-        v-for="(item, index) in prodList"
-        :key="index"
-      >
+      <!-- 使用v-for循环渲染商品列表 -->
+      <block v-for="(item, index) in prodList" :key="index">
+        <!-- 将每个商品项传递给production组件 -->
         <production :item="item" />
       </block>
-      <view
-        v-if="!prodList.length"
-        class="empty"
-      >
+      <!-- 如果没有商品数据，则显示“暂无数据”的提示信息 -->
+      <view v-if="!prodList.length" class="empty">
         暂无数据
       </view>
     </view>
@@ -18,215 +15,241 @@
 </template>
 
 <script setup>
-const sts = ref(0)
-const title = ref('')
-const current = ref(1)
-const size = ref(10)
-const pages = ref(0)
-const tagid = ref(0)
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  current.value = 1
-  pages.value = 0
-  sts.value = options.sts
-  title.value = options.title ? options.title : ''
-
-  if (options.tagid) {
-    tagid.value = options.tagid
-  }
+  // 定义响应式变量
+  const sts = ref(0) // 商品状态标识符
+  const title = ref('') // 页面标题
+  const current = ref(1) // 当前页码
+  const size = ref(10) // 每页显示的商品数量
+  const pages = ref(0) // 总页数
+  const tagid = ref(0) // 标签ID
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad((options) => {
+    // 初始化分页参数
+    current.value = 1
+    pages.value = 0
+    // 设置sts和title值
+    sts.value = options.sts
+    title.value = options.title ? options.title : ''
 
-  if (sts.value == 0) {
-    if (options.tagid == 1) {
-      uni.setNavigationBarTitle({
-        title: '每日上新'
-      })
-    } else if (options.tagid == 2) {
-      uni.setNavigationBarTitle({
-        title: '商城热卖'
-      })
-    } else if (options.tagid == 3) {
-      uni.setNavigationBarTitle({
-        title: '更多宝贝'
-      })
+    // 如果存在tagid选项，则设置标签ID
+    if (options.tagid) {
+      tagid.value = options.tagid
     }
-  } else if (sts.value == 1) {
-    uni.setNavigationBarTitle({
-      title: '新品推荐'
-    })
-  } else if (sts.value == 2) {
-    uni.setNavigationBarTitle({
-      title: '限时特惠'
-    })
-  } else if (sts.value == 3) {
-    uni.setNavigationBarTitle({
-      title: '每日疯抢'
-    })
-  } else if (sts.value == 4) {
-    uni.setNavigationBarTitle({
-      title: '优惠券活动商品'
-    })
-  } else if (sts.value == 5) {
-    uni.setNavigationBarTitle({
-      title: '我的收藏商品'
-    })
-  } else {
-    uni.setNavigationBarTitle({
-      title: title.value
-    })
-  }
 
-  loadProdData(options)
-})
+    // 根据sts和tagid设置页面导航栏标题
+    if (sts.value == 0) {
+      switch (options.tagid) {
+        case '1':
+          uni.setNavigationBarTitle({ title: '每日上新' })
+          break
+        case '2':
+          uni.setNavigationBarTitle({ title: '商城热卖' })
+          break
+        case '3':
+          uni.setNavigationBarTitle({ title: '更多宝贝' })
+          break
+      }
+    } else {
+      switch (sts.value) {
+        case 1:
+          uni.setNavigationBarTitle({ title: '新品推荐' })
+          break
+        case 2:
+          uni.setNavigationBarTitle({ title: '限时特惠' })
+          break
+        case 3:
+          uni.setNavigationBarTitle({ title: '每日疯抢' })
+          break
+        case 4:
+          uni.setNavigationBarTitle({ title: '优惠券活动商品' })
+          break
+        case 5:
+          uni.setNavigationBarTitle({ title: '我的收藏商品' })
+          break
+        default:
+          uni.setNavigationBarTitle({ title: title.value })
+      }
+    }
 
-/**
- * 页面上拉触底事件的处理函数
- */
-onReachBottom(() => {
-  if (current.value < pages.value) {
-    current.value = current.value + 1
-    loadProdData()
-  }
-})
-
-/**
- * 加载商品数据
- */
-const loadProdData = (options) => {
-  const stsParam = sts.value
-
-  if (stsParam == 0) {
-    // 分组标签商品列表
-    getTagProd()
-  } else if (stsParam == 1) {
-    // 新品推荐
-    const url = '/prod/lastedProdPage'
-    getActProd(url)
-  } else if (stsParam == 2) {
-    // 限时特惠
-    const url = '/prod/discountProdList'
-    getActProd(url)
-  } else if (stsParam == 3) {
-    // 每日疯抢
-    const url = '/prod/moreBuyProdList'
-    getActProd(url)
-  } else if (stsParam == 4) {
-    // 优惠券商品列表
-    getProdByCouponId(options.tagid)
-  } else if (stsParam == 5) {
-    // 收藏商品列表
-    getCollectionProd()
-  }
-}
-
-const prodList = ref([])
-const getActProd = (url) => {
-  uni.showLoading()
-  http.request({
-    url,
-    method: 'GET',
-    data: {
-      current: current.value,
-      size: size.value
+    // 加载商品数据
+    loadProdData(options)
+  })
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom(() => {
+    // 如果当前页小于总页数，则增加页码并加载更多数据
+    if (current.value < pages.value) {
+      current.value++
+      loadProdData()
     }
   })
-    .then(({ data }) => {
+
+  /**
+   * 加载商品数据
+   */
+  const loadProdData = (options) => {
+    const stsParam = sts.value
+
+    // 根据stsParam的值调用不同的商品获取方法
+    if (stsParam == 0) {
+      // 分组标签商品列表
+      getTagProd()
+    } else if (stsParam == 1) {
+      // 新品推荐
+      const url = '/prod/lastedProdPage'
+      getActProd(url)
+    } else if (stsParam == 2) {
+      // 限时特惠
+      const url = '/prod/discountProdList'
+      getActProd(url)
+    } else if (stsParam == 3) {
+      // 每日疯抢
+      const url = '/prod/moreBuyProdList'
+      getActProd(url)
+    } else if (stsParam == 4) {
+      // 优惠券商品列表
+      getProdByCouponId(options.tagid)
+    } else if (stsParam == 5) {
+      // 收藏商品列表
+      getCollectionProd()
+    }
+  }
+
+  // 响应式变量用于存储商品列表
+  const prodList = ref([])
+
+  /**
+   * 获取活动商品列表
+   */
+  const getActProd = (url) => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取商品数据
+    http.request({
+      url,
+      method: 'GET',
+      data: {
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
-        list = prodList.value
-        list = list.concat(data.records)
+        list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
-
-/**
- * 获取我的收藏商品
- */
-const getCollectionProd = () => {
-  uni.showLoading()
-  http.request({
-    url: '/p/user/collection/prods',
-    method: 'GET',
-    data: {
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取我的收藏商品
+   */
+  const getCollectionProd = () => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取收藏商品数据
+    http.request({
+      url: '/p/user/collection/prods',
+      method: 'GET',
+      data: {
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current == 1) {
         list = data.records
       } else {
-        list = prodList.value
-        list = list.concat(data.records)
+        list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
-
-/**
- * 获取标签列表
- */
-const getTagProd = () => {
-  uni.showLoading()
-  http.request({
-    url: '/prod/prodListByTagId',
-    method: 'GET',
-    data: {
-      tagId: tagid.value,
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取标签商品列表
+   */
+  const getTagProd = () => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取标签商品数据
+    http.request({
+      url: '/prod/prodListByTagId',
+      method: 'GET',
+      data: {
+        tagId: tagid.value,
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
         list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
-
-/**
- * 获取优惠券商品列表
- */
-const getProdByCouponId = (id) => {
-  uni.showLoading()
-  http.request({
-    url: '/coupon/prodListByCouponId',
-    method: 'GET',
-    data: {
-      couponId: id,
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取优惠券商品列表
+   */
+  const getProdByCouponId = (id) => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取优惠券商品数据
+    http.request({
+      url: '/coupon/prodListByCouponId',
+      method: 'GET',
+      data: {
+        couponId: id,
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
         list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
+  }
 </script>
 
 <style scoped lang="scss">
-@use './prod-classify.scss';
+  @use './prod-classify.scss'; /* 引入外部样式文件 */
 </style>
diff --git a/front-end/mall4uni/src/pages/prod/prod.scss b/front-end/mall4uni/src/pages/prod/prod.scss
index 7478438..578df99 100644
--- a/front-end/mall4uni/src/pages/prod/prod.scss
+++ b/front-end/mall4uni/src/pages/prod/prod.scss
@@ -1,26 +1,35 @@
-.container {
+.c /* 容器样式，设置了背景颜色、高度为100%（相对于父元素），并且在底部留出150rpx的内边距 */
+container {
   background: #f4f4f4;
   height: 100%;
   padding-bottom: 150rpx;
 }
+
+/* 轮播图组件，设定了高度、宽度以及下边框。内部图片也设定了相同的高度和宽度以确保适应轮播图容器 */
 swiper {
   height: 750rpx;
   width: 100%;
   border-bottom: 2rpx solid #f8f8f8;
+
   image {
     height: 750rpx;
     width: 100%;
   }
 }
+
+/* 产品信息区域，设置了上下左右的内边距，相对定位，白色背景 */
 .prod-info {
   padding: 30rpx 30rpx 0 30rpx;
   position: relative;
   background: #fff;
 }
+
+/* 标题包装器，使用了相对定位来放置子元素，并定义了行高和右边距 */
 .tit-wrap {
   position: relative;
   line-height: 40rpx;
   padding-right: 104rpx;
+  /* 列元素，绝对定位在标题包装器的右上角，作为额外的信息展示，如收藏按钮等 */
   .col {
     position: absolute;
     top: 0;
@@ -30,12 +39,14 @@ swiper {
     font-size: 20rpx;
     padding-left: 20rpx;
     text-align: center;
+    /* 列内的图标，设置为块级元素并居中显示 */
     image {
       display: block;
       margin: auto;
       width: 40rpx;
       height: 40rpx;
     }
+    /* 在列元素左侧添加一条竖线装饰 */
     &::after {
       content: "";
       display: block;
@@ -49,11 +60,15 @@ swiper {
     }
   }
 }
+
+/* 产品标题，设定字体大小、颜色和右边距 */
 .prod-tit {
   font-size: 32rpx;
   color: #333;
   padding-right: 20rpx;
 }
+
+/* 销量段落，设置了背景色、行高、颜色、字体大小、上边距和右边距 */
 .sales-p {
   background: #fff;
   line-height: 40rpx;
@@ -62,29 +77,38 @@ swiper {
   margin-top: 6rpx;
   margin-right: 104rpx;
 }
+
+/* 产品价格部分，包含新旧价格对比 */
 .prod-price {
   font-size: 30rpx;
   height: 100rpx;
   line-height: 100rpx;
+  /* 新价格的颜色、字体大小、加粗和右边距 */
+  .price {
+    color: #eb2444;
+    font-size: 24rpx;
+    font-weight: 600;
+    margin-right: 30rpx;
+  }
+  /* 新价格的数字部分，加大字体 */
+  .price-num {
+    font-size: 46rpx;
+    font-weight: 400;
+  }
+  /* 原价，较小字体，灰色，带删除线 */
+  .ori-price {
+    font-size: 25rpx;
+    color: #999;
+    text-decoration: line-through;
+  }
 }
-.price {
-  color: #eb2444;
-  font-size: 24rpx;
-  font-weight: 600;
-  margin-right: 30rpx;
-}
-.price-num {
-  font-size: 46rpx;
-  font-weight: 400;
-}
-.ori-price {
-  font-size: 25rpx;
-  color: #999;
-  text-decoration: line-through;
-}
+
+/* 销量文字的颜色 */
 .sales {
   color: #999;
 }
+
+/* 更多选项按钮，绝对定位在右侧，设置了宽度、顶部位置、文本对齐、字体大小和颜色 */
 .more {
   position: absolute;
   right: 20rpx;
@@ -95,243 +119,280 @@ swiper {
   color: #999;
   letter-spacing: 1px;
 }
+
+/* SKU（库存保有单位）信息，设置了内边距、背景色、外边距、相对定位和行高 */
 .sku {
   padding: 20rpx;
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
+  /* SKU标题，绝对定位在左上角，作为SKU信息的标签 */
+  .sku-tit {
+    position: absolute;
+    display: inline-block;
+    width: 60rpx;
+    left: 20rpx;
+    font-size: 22rpx;
+    top: 20rpx;
+    color: #999;
+  }
+  /* SKU内容，从标题右侧开始，单行显示，超出部分用省略号代替 */
+  .sku-con {
+    margin: 0 80rpx;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 28rpx;
+    font-weight: bold;
+  }
 }
-.sku-tit {
-  position: absolute;
-  display: inline-block;
-  width: 60rpx;
-  left: 20rpx;
-  font-size: 22rpx;
-  top: 20rpx;
-  color: #999;
-}
-.sku-con {
-  margin: 0 80rpx;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-size: 28rpx;
-  font-weight: bold;
-}
+
+/* 评论区包裹，设置了背景色、外边距、相对定位和行高 */
 .cmt-wrap {
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
-}
-.cmt-tit {
-  font-size: 32rpx;
-  position: relative;
-  border-bottom: 1px solid #ddd;
-  padding: 20rpx;
-}
-.cmt-t {
-  width: 300rpx;
-}
-.cmt-good {
-  color: #eb2444;
-  font-size: 24rpx;
-}
-.cmt-count {
-  position: absolute;
-  right: 20rpx;
-  top: 20rpx;
-  font-size: 24rpx;
-  color: #666;
-}
-.cmt-more {
-  width: 20rpx;
-  height: 20rpx;
-  border-top: 2rpx solid #999;
-  border-right: 2rpx solid #999;
-  transform: rotate(45deg);
-  margin-left: 10rpx;
-  display: inline-block;
-}
-.cmt-cont {
-  padding: 0 20rpx;
-}
-.cmt-tag {
-  position: relative;
-  padding: 14px 3px 0 0;
-  margin: 0;
-  text {
-    margin: 0 10px 10px 0;
-    background: #fdf0f0;
-    display: inline-block;
-    padding: 0 10px;
-    height: 25px;
-    border-radius: 3px;
-    line-height: 25px;
-    font-size: 12px;
-    font-family: -apple-system, Helvetica, sans-serif;
-    color: #666;
+  /* 评论区标题，较大字体，带有下边框，内边距 */
+  .cmt-tit {
+    font-size: 32rpx;
+    position: relative;
+    border-bottom: 1px solid #ddd;
+    padding: 20rpx;
   }
-  text.selected {
-    color: #fff;
-    background: #e93b3d;
+  /* 评论区的好评率，红色字体，稍小字号 */
+  .cmt-good {
+    color: #eb2444;
+    font-size: 24rpx;
   }
-}
-.cmt-item {
-  position: relative;
-  padding: 10px 0;
-  &::after {
-    content: "";
-    height: 0;
-    display: block;
-    border-bottom: 1px solid #ddd;
+  /* 评论数量，绝对定位在右上角，设置了字体大小和颜色 */
+  .cmt-count {
     position: absolute;
-    left: 0;
-    bottom: 0;
-    right: -10px;
-    border-bottom-color: #e5e5e5;
+    right: 20rpx;
+    top: 20rpx;
+    font-size: 24rpx;
+    color: #666;
   }
-}
-.cmt-items {
-  .empty {
+  /* 展示更多评论的箭头图标，通过旋转创建 */
+  .cmt-more {
+    width: 20rpx;
+    height: 20rpx;
+    border-top: 2rpx solid #999;
+    border-right: 2rpx solid #999;
+    transform: rotate(45deg);
+    margin-left: 10rpx;
+    display: inline-block;
+  }
+  /* 评论内容区，设置了左右内边距 */
+  .cmt-cont {
+    padding: 0 20rpx;
+  }
+  /* 评论标签，设置了相对定位，允许内部元素浮动或绝对定位 */
+  .cmt-tag {
+    position: relative;
+    padding: 14px 3px 0 0;
+    margin: 0;
+    /* 每个标签，设置了背景色、内边距、圆角、行高、字体大小和颜色 */
+    text {
+      margin: 0 10px 10px 0;
+      background: #fdf0f0;
+      display: inline-block;
+      padding: 0 10px;
+      height: 25px;
+      border-radius: 3px;
+      line-height: 25px;
+      font-size: 12px;
+      color: #666;
+      /* 当标签被选中时，改变背景色和字体颜色 */
+      &.selected {
+        color: #fff;
+        background: #e93b3d;
+      }
+    }
+  }
+  /* 单条评论项，设置了相对定位，添加了底部边框 */
+  .cmt-item {
+    position: relative;
+    padding: 10px 0;
+    /* 使用伪元素添加底部边框 */
+    &::after {
+      content: "";
+      height: 0;
+      display: block;
+      border-bottom: 1px solid #ddd;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: -10px;
+      border-bottom-color: #e5e5e5;
+    }
+  }
+  /* 评论列表为空时的提示 */
+  .cmt-items .empty {
     display: block;
     font-size: 24rpx;
     text-align: center;
     color: #aaa;
     margin-top: 5vh;
   }
-}
-.cmt-user {
-  line-height: 25px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  .user-img {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    vertical-align: middle;
-  }
-  .nickname {
-    margin-left: 10px;
-    display: inline-block;
-    color: #333;
-    max-width: 8.2em;
-    height: 25px;
-    line-height: 27px;
-  }
-  .date {
-    float: right;
-    color: #999;
-    margin-left: -60px;
-  }
-}
-.cmt-user-info {
-  display: flex;
-  align-items: center;
-  width: 400rpx;
-}
-.cmt-cnt {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  position: relative;
-  line-height: 1.5;
-  font-size: 14px;
-  margin: 5px 0;
-  word-break: break-all;
-  max-height: 126px;
-}
-.cmt-attr {
-  height: 85px;
-  width: 100%;
-  white-space: nowrap;
-  image {
-    display: inline-block;
-    width: 80px;
-    height: 80px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    border-radius: 2px;
-    background: #f3f3f3;
-  }
-}
-.cmt-more-v {
-  text-align: center;
-  background-color: #fff;
-  font-size: 12px;
-  text {
-    height: 25px;
+  /* 用户信息，设置了行高、底边距、字体大小 */
+  .cmt-user {
     line-height: 25px;
+    margin-bottom: 8px;
     font-size: 12px;
-    text-align: center;
-    color: #333;
-    padding: 0px 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 40px;
-    display: inline-block;
+    /* 用户头像，圆形，设置了宽度、高度、圆角和垂直对齐方式 */
+    .user-img {
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+    /* 用户昵称，设置了左边距、显示方式、颜色、最大宽度和高度 */
+    .nickname {
+      margin-left: 10px;
+      display: inline-block;
+      color: #333;
+      max-width: 8.2em;
+      height: 25px;
+      line-height: 27px;
+    }
+    /* 评论日期，设置为右侧浮动，颜色和左边距 */
+    .date {
+      float: right;
+      color: #999;
+      margin-left: -60px;
+    }
   }
-}
-.cmt-popup {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 998;
-  background-color: #fff;
-  padding-bottom: 98rpx;
-  .cmt-cont {
-    height: calc(100% - 80rpx);
-    overflow: auto;
+  /* 用户信息容器，使用flex布局，对齐项目中心，设置了宽度 */
+  .cmt-user-info {
+    display: flex;
+    align-items: center;
+    width: 400rpx;
   }
+  /* 评论内容，设置了溢出隐藏、文本溢出处理、弹性盒子模型属性、相对定位、行高、字体大小、边距、单词断开和最大高度 */
   .cmt-cnt {
-    -webkit-line-clamp: 20;
-    max-height: 500px;
-  }
-  .load-more {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: 1.5;
     font-size: 14px;
-    padding: 20px;
+    margin: 5px 0;
+    word-break: break-all;
+    max-height: 126px;
+  }
+  /* 评论中的商品属性展示，设置了高度、宽度和白空间处理 */
+  .cmt-attr {
+    height: 85px;
+    width: 100%;
+    white-space: nowrap;
+    /* 商品图片，设置了宽高、右边距、底边距、圆角和背景色 */
+    image {
+      display: inline-block;
+      width: 80px;
+      height: 80px;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      border-radius: 2px;
+      background: #f3f3f3;
+    }
+  }
+  /* 查看更多评论按钮，居中对齐，设置了背景色、字体大小、内边距、边框、圆角 */
+  .cmt-more-v {
     text-align: center;
-    margin-bottom: 10px;
+    background-color: #fff;
+    font-size: 12px;
+    /* 按钮文本，设置了高度、行高、字体大小、文本对齐、颜色、内边距、边框、圆角 */
     text {
-      border: 1px solid #ddd;
-      padding: 5px 10px;
-      border-radius: 10px;
-      color: #666;
+      height: 25px;
+      line-height: 25px;
+      font-size: 12px;
+      text-align: center;
+      color: #333;
+      padding: 0px 10px;
+      margin: 10px 0;
+      border: 1px solid #ccc;
+      border-radius: 40px;
+      display: inline-block;
+    }
+  }
+  /* 弹出层用于查看完整评论，设置了固定定位、z-index、背景色、内边距 */
+  .cmt-popup {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 998;
+    background-color: #fff;
+    padding-bottom: 98rpx;
+    /* 弹出层内的评论内容，设置了高度、溢出滚动 */
+    .cmt-cont {
+      height: calc(100% - 80rpx);
+      overflow: auto;
+    }
+    /* 弹出层内的评论内容，增加了行数限制和最大高度 */
+    .cmt-cnt {
+      -webkit-line-clamp: 20;
+      max-height: 500px;
+    }
+    /* 加载更多按钮，设置了字体大小、内边距、文本对齐、边距、边框、圆角 */
+    .load-more {
+      font-size: 14px;
+      padding: 20px;
+      text-align: center;
+      margin-bottom: 10px;
+      /* 按钮文本，设置了边框、内边距、圆角和颜色 */
+      text {
+        border: 1px solid #ddd;
+        padding: 5px 10px;
+        border-radius: 10px;
+        color: #666;
+      }
     }
   }
 }
+. /* 评论回复部分，设置了字体大小、上边框（虚线）、上下内边距 */
 .cmt-reply {
   font-size: 14px;
   border-top: 1px dashed #ddd;
   padding: 5px 0;
+  /* 回复标题，红色字体强调 */
   .reply-tit {
     color: #eb2444;
   }
 }
+
+/* 产品详情部分，设置了背景色、上外边距、相对定位和行高 */
 .prod-detail {
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
+  /* 详情图片，宽度设为750rpx并确保是块级元素显示 */
   image {
     width: 750rpx !important;
     display: block;
   }
 }
+
+/* 富文本组件内的图片，确保宽度为100%以适应父容器 */
 rich-text {
   image {
     width: 100% !important;
   }
 }
+
+/* 深度选择器，用于覆盖第三方组件或库的样式，确保图片宽度为100%并作为块级元素显示 */
 :deep(.img) {
   width: 100% !important;
   display: block;
 }
+
+/* 购物车底部固定栏，设置了固定位置、底部对齐、宽度、弹性布局、高度、z-index和阴影效果 */
 .cart-footer {
   position: fixed;
   bottom: 0;
@@ -342,6 +403,7 @@ rich-text {
   height: 98rpx;
   z-index: 999;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  /* 按钮，设置了相对定位、弹性增长、内容居中、宽度、背景色、字体大小和列式布局 */
   .btn {
     position: relative;
     display: flex;
@@ -352,6 +414,7 @@ rich-text {
     background-color: #fff;
     font-size: 28rpx;
     flex-flow: column;
+    /* 徽章，绝对定位的小圆圈，用于展示数字，如购物车商品数量 */
     .badge {
       position: absolute;
       top: 20rpx;
@@ -366,30 +429,37 @@ rich-text {
       font-size: 18rpx;
       color: #fff;
     }
+    /* 稍大一点的徽章 */
     .badge-1 {
       width: 36rpx;
     }
   }
+  /* 图标按钮，不随其他按钮拉伸，设置了固定宽度、字体大小和颜色 */
   .btn.icon {
     flex-grow: 0;
     flex-shrink: 0;
     width: 125rpx;
     font-size: 20rpx;
     color: #666;
+    /* 图标按钮内的图片，设置了宽度和高度 */
     image {
       width: 50rpx;
       height: 50rpx;
     }
   }
+  /* 购物车按钮，设置了背景色和文字颜色 */
   .btn.cart {
     background: #584e61;
     color: #fff;
   }
+  /* 立即购买按钮，设置了背景色和文字颜色 */
   .btn.buy {
     background: #eb2444;
     color: #fff;
   }
 }
+
+/* 关闭按钮，设置了颜色、圆角、行高、文本对齐、高度、宽度、字体大小、内边距、位置和伪元素内容 */
 .close {
   color: #aaa;
   border-radius: 12px;
@@ -402,15 +472,20 @@ rich-text {
   top: 10px;
   right: 10px;
   position: absolute;
+  /* 伪元素，设置关闭符号 */
   &::before {
     content: "\2716";
   }
 }
+
+/* 弹出层内容区，设置了最大高度、溢出滚动和左右内边距 */
 .popup-cnt {
   max-height: 429px;
   overflow: auto;
   padding: 0 10px;
 }
+
+/* SKU弹出层背景，设置了固定位置、全屏尺寸、z-index和半透明黑色背景 */
 .pup-sku {
   position: fixed;
   top: 0;
@@ -420,6 +495,8 @@ rich-text {
   z-index: 999;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+/* SKU弹出层主要内容，绝对定位在屏幕底部，设置了宽度、最小和最大高度、白色背景 */
 .pup-sku-main {
   position: absolute;
   bottom: 0;
@@ -428,6 +505,8 @@ rich-text {
   max-height: 475px;
   background-color: #fff;
 }
+
+/* SKU弹出层头部，设置了相对定位、行高、字体大小、颜色、高度、内边距和背景色 */
 .pup-sku-header {
   position: relative;
   line-height: 46px;
@@ -437,6 +516,8 @@ rich-text {
   padding: 0 0 10px 110px;
   background-color: #fff;
 }
+
+/* SKU弹出层中的产品图片，设置了绝对定位、左上偏移、圆角、宽度、高度和垂直对齐 */
 .pup-sku-img {
   position: absolute;
   left: 10px;
@@ -447,6 +528,8 @@ rich-text {
   border: 0 none;
   vertical-align: top;
 }
+
+/* SKU弹出层价格，设置了行内块显示、高度、行高、颜色和字体大小 */
 .pup-sku-price {
   display: inline-block;
   height: 40px;
@@ -454,9 +537,13 @@ rich-text {
   color: #e4393c;
   font-size: 10px;
 }
+
+/* SKU弹出层价格整数部分，加大字体 */
 .pup-sku-price-int {
   font-size: 16px;
 }
+
+/* SKU弹出层属性描述，允许单词断开，设置了字体大小、颜色、行高、右边距、溢出隐藏、文本溢出处理和弹性盒子模型属性 */
 .pup-sku-prop {
   word-break: break-all;
   font-size: 12px;
@@ -468,17 +555,22 @@ rich-text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  /* 属性描述中的文本，设置了颜色和右边距 */
   text {
     color: #999;
     margin-right: 5px;
   }
 }
+
+/* SKU弹出层主体内容，设置了盒模型属性、最大高度、下内边距和溢出滚动 */
 .pup-sku-body {
   box-sizing: border-box;
   max-height: 379px;
   padding-bottom: 100px;
   overflow: auto;
 }
+
+/* SKU区域，设置了字体大小、颜色、内外边距和高度 */
 .pup-sku-area {
   .sku-kind {
     font-size: 12px;
@@ -487,11 +579,14 @@ rich-text {
     height: 40px;
     line-height: 40px;
   }
+  /* SKU选择项容器，设置了溢出隐藏和底边距 */
   .sku-choose {
     overflow: hidden;
     margin-bottom: 3px;
   }
 }
+
+/* SKU选择项，设置了行内块显示、内边距、最小和最大宽度、高度、文本对齐、左边距、底边距、圆角、颜色、背景色和字体大小 */
 .sku-choose-item {
   display: inline-block;
   padding: 0 10px;
@@ -508,23 +603,31 @@ rich-text {
   background-color: #f7f7f7;
   font-size: 14px;
 }
+
+/* 当SKU选择项被选中时，改变背景色和字体颜色 */
 .sku-choose-item.active {
   background-color: #eb2444;
   color: #fff;
 }
+
+/* 当SKU选择项不可用时，改变背景色和字体颜色 */
 .sku-choose-item.gray {
   background-color: #f9f9f9;
   color: #ddd;
 }
+
+/* SKU弹出层数量选择部分，设置了内边距和字体大小 */
 .pup-sku-count {
   padding: 0 10px 13px;
   font-size: 12px;
+  /* 数量名称标签，设置了颜色、高度、行高和宽度 */
   .count-name {
     color: #999;
     height: 31px;
     line-height: 31px;
     width: 100rpx;
   }
+  /* 数量选择器包裹，设置了相对定位、宽度、浮动和垂直对齐 */
   .num-wrap {
     position: relative;
     z-index: 0;
@@ -533,11 +636,13 @@ rich-text {
     vertical-align: middle;
     display: flex;
   }
+  /* 输入框包裹，设置了相对定位、宽度、z-index和左右内边距 */
   .text-wrap {
     position: relative;
     width: 45px;
     z-index: 0;
     margin: 0 1px;
+    /* 输入框，设置了高度、宽度、颜色、背景、字体大小、文本对齐、无边框和背景色 */
     input {
       height: 30px;
       width: 100%;
@@ -550,8 +655,11 @@ rich-text {
     }
   }
 }
+
+/* 数量选择器的减号和加号按钮，设置了相对定位、最大最小宽度、高度、行高、背景色、文本对齐、圆角 */
 .num-wrap {
-  .minus {
+  .minus,
+  .plus {
     position: relative;
     max-width: 30px;
     min-width: 30px;
@@ -559,20 +667,18 @@ rich-text {
     line-height: 30px;
     background: #f7f7f7;
     text-align: center;
+  }
+  /* 减号按钮，设置了左上和左下圆角 */
+  .minus {
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   }
+  /* 加号按钮，设置了右上和右下圆角 */
   .plus {
-    position: relative;
-    max-width: 30px;
-    min-width: 30px;
-    height: 30px;
-    line-height: 30px;
-    background: #f7f7f7;
-    text-align: center;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  /* 行元素，创建加号的横线，设置了圆角、绝对定位、顶部和左侧偏移、宽度、高度和背景色 */
   .row {
     border-radius: 20px;
     position: absolute;
@@ -584,6 +690,7 @@ rich-text {
     height: 2px;
     background-color: #ccc;
   }
+  /* 列元素，创建加号的竖线，设置了圆角、绝对定位、顶部和左侧偏移、宽度、高度和背景色 */
   .col {
     border-radius: 20px;
     position: absolute;
@@ -596,6 +703,8 @@ rich-text {
     background-color: #999;
   }
 }
+
+/* SKU弹出层底部固定栏，设置了固定位置、底部对齐、宽度、弹性布局、高度、z-index和阴影效果 */
 .pup-sku-footer {
   position: fixed;
   bottom: 0;
@@ -606,6 +715,7 @@ rich-text {
   height: 98rpx;
   z-index: 999;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  /* 按钮，设置了相对定位、弹性增长、内容居中、宽度、背景色、字体大小和列式布局 */
   .btn {
     position: relative;
     display: flex;
@@ -617,10 +727,12 @@ rich-text {
     font-size: 28rpx;
     flex-flow: column;
   }
+  /* 购物车按钮，设置了背景色和文字颜色 */
   .btn.cart {
     background: #584e61;
     color: #fff;
   }
+  /* 立即购买按钮，设置了背景色和文字颜色 */
   .btn.buy {
     background: #eb2444;
     color: #fff;
diff --git a/front-end/mall4uni/src/pages/prod/prod.vue b/front-end/mall4uni/src/pages/prod/prod.vue
index 576998e..9941e85 100644
--- a/front-end/mall4uni/src/pages/prod/prod.vue
+++ b/front-end/mall4uni/src/pages/prod/prod.vue
@@ -1,260 +1,157 @@
 <template>
-  <!-- 商品详情 -->
+  <!-- 商品详情页面容器 -->
   <view class="container">
-    <!-- 轮播图 -->
-    <swiper
-      :indicator-dots="indicatorDots"
-      :autoplay="autoplay"
-      :indicator-color="indicatorColor"
-      :interval="interval"
-      :duration="duration"
-      :indicator-active-color="indicatorActiveColor"
+    <!-- 轮播图组件，用于展示商品图片 -->
+    <swiper :indicator-dots="indicatorDots"          <!-- 是否显示指示点 -->
+      :autoplay="autoplay"                     <!-- 是否自动播放 -->
+      :indicator-color="indicatorColor"        <!-- 未选中指示点的颜色 -->
+      :interval="interval"                     <!-- 自动切换时间间隔 -->
+      :duration="duration"                     <!-- 滑动动画时长 -->
+      :indicator-active-color="indicatorActiveColor" <!-- 当前选中指示点颜色 -->
     >
-      <block
-        v-for="(item, index) in imgs"
-        :key="index"
-      >
+      <!-- 循环生成轮播项 -->
+      <block v-for="(item, index) in imgs" :key="index">
         <swiper-item>
-          <image :src="item" />
+          <image :src="item" />                <!-- 显示每一张商品图片 -->
         </swiper-item>
       </block>
     </swiper>
     <!-- end  轮播图 -->
-    <!-- 商品信息 -->
+    <!-- 商品信息展示区 -->
     <view class="prod-info">
+      <!-- 标题与收藏按钮 -->
       <view class="tit-wrap">
-        <view class="prod-tit">
-          {{ prodName }}
-        </view>
-        <view
-          class="col"
-          @tap="addOrCannelCollection"
-        >
-          <image
-            v-if="!isCollection"
-            src="@/static/images/icon/prod-col.png"
-          />
-          <image
-            v-if="isCollection"
-            src="@/static/images/icon/prod-col-red.png"
-          />
+        <view class="prod-tit">{{ prodName }}</view>   <!-- 商品名称 -->
+        <view class="col" @tap="addOrCannelCollection">
+          <!-- 收藏/取消收藏按钮 -->
+          <image v-if="!isCollection" src="@/static/images/icon/prod-col.png" /> <!-- 未收藏图标 -->
+          <image v-if="isCollection" src="@/static/images/icon/prod-col-red.png" /> <!-- 已收藏图标 -->
           收藏
         </view>
       </view>
-      <view class="sales-p">
-        {{ brief }}
-      </view>
+      <view class="sales-p">{{ brief }}</view>         <!-- 商品简短描述 -->
+      <!-- 商品价格信息 -->
       <view class="prod-price">
-        <text
-          v-if="defaultSku && defaultSku.price"
-          class="price"
-        >
+        <text v-if="defaultSku && defaultSku.price" class="price">
+          <!-- 当前售价 -->
           ￥
-          <text class="price-num">
-            {{ wxs.parsePrice(defaultSku.price)[0] }}
-          </text>
-          .{{ wxs.parsePrice(defaultSku.price)[1] }}
+          <text class="price-num">{{ wxs.parsePrice(defaultSku.price)[0] }}</text> <!-- 整数部分 -->
+          .{{ wxs.parsePrice(defaultSku.price)[1] }} <!-- 小数部分 -->
         </text>
-        <text
-          v-if="defaultSku && defaultSku.oriPrice"
-          class="ori-price"
-        >
+        <text v-if="defaultSku && defaultSku.oriPrice" class="ori-price">
+          <!-- 原价 -->
           ￥{{ wxs.parsePrice(defaultSku.oriPrice)[0] }}.{{ wxs.parsePrice(defaultSku.oriPrice)[1] }}
         </text>
-        <text class="sales" />
+        <text class="sales"></text> <!-- 销量等其他信息预留 -->
       </view>
     </view>
-    <!-- 已选规格 -->
-    <view
-      class="sku"
-      @tap="showSku"
-    >
-      <view class="sku-tit">
-        已选
-      </view>
-      <view class="sku-con">
-        {{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
-      </view>
-      <view class="more">
-        ...
-      </view>
+
+    <!-- 已选规格展示 -->
+    <view class="sku" @tap="showSku">
+      <view class="sku-tit">已选</view>
+      <view class="sku-con">{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件</view> <!-- 展示已选择的规格和数量 -->
+      <view class="more">...</view> <!-- 更多选项提示 -->
     </view>
-    <!-- 评价 -->
+
+    <!-- 评价区域 -->
     <view class="cmt-wrap">
-      <view
-        class="cmt-tit"
-        @tap="showComment"
-      >
+      <!-- 评价标题 -->
+      <view class="cmt-tit" @tap="showComment">
         <view class="cmt-t">
           评价
-          <text class="cmt-good">
-            好评{{ prodCommData.positiveRating }}%
-          </text>
-        </view>
-        <view class="cmt-count">
-          共{{ prodCommData.number }}条
-          <text class="cmt-more" />
+          <text class="cmt-good">好评{{ prodCommData.positiveRating }}%</text> <!-- 好评率 -->
         </view>
+        <view class="cmt-count">共{{ prodCommData.number }}条<text class="cmt-more"></text></view> <!-- 评价总数 -->
       </view>
+      <!-- 评价标签和列表 -->
       <view class="cmt-cont">
-        <view
-          class="cmt-tag"
-          @tap="showComment"
-        >
+        <view class="cmt-tag" @tap="showComment">
           <text>全部({{ prodCommData.number }})</text>
           <text>好评({{ prodCommData.praiseNumber }})</text>
           <text>中评({{ prodCommData.secondaryNumber }})</text>
           <text>差评({{ prodCommData.negativeNumber }})</text>
           <text>有图({{ prodCommData.picNumber }})</text>
         </view>
+        <!-- 评价内容列表 -->
         <view class="cmt-items">
-          <view
-            v-for="(item, index) in littleCommPage"
-            :key="index"
-            class="cmt-item"
-          >
+          <view v-for="(item, index) in littleCommPage" :key="index" class="cmt-item">
             <view class="cmt-user">
-              <text class="date">
-                {{ item.recTime }}
-              </text>
+              <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
               <view class="cmt-user-info">
-                <image
-                  class="user-img"
-                  :src="item.pic"
-                />
-                <view class="nickname">
-                  {{ item.nickName }}
-                </view>
+                <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
+                <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
               </view>
             </view>
-            <view class="cmt-cnt">
-              {{ item.content }}
-            </view>
-            <scroll-view
-              v-if="item.pics.length"
-              class="cmt-attr"
-              scroll-x="true"
-            >
-              <image
-                v-for="(commPic, index2) in item.pics"
-                :key="index2"
-                :src="commPic"
-              />
+            <view class="cmt-cnt">{{ item.content }}</view> <!-- 评价内容 -->
+            <!-- 如果有图片，则显示图片滚动视图 -->
+            <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
+              <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
             </scroll-view>
           </view>
         </view>
-        <view
-          v-if="prodCommPage.records.length > 2"
-          class="cmt-more-v"
-        >
-          <text @tap="showComment">
-            查看全部评价
-          </text>
+        <!-- 如果评价超过2条，显示查看更多 -->
+        <view v-if="prodCommPage.records.length > 2" class="cmt-more-v">
+          <text @tap="showComment">查看全部评价</text>
         </view>
       </view>
     </view>
-    <!-- 商品详情 -->
+
+    <!-- 商品详情内容 -->
     <view class="prod-detail">
       <view>
-        <rich-text :nodes="content" />
+        <rich-text :nodes="content"></rich-text> <!-- 使用富文本渲染商品详情 -->
       </view>
     </view>
     <!-- end 商品详情 -->
-
-    <!-- 底部按钮 -->
+    <!-- 底部操作栏 -->
     <view class="cart-footer">
-      <view
-        class="btn icon"
-        @tap="toHomePage"
-      >
-        <image src="@/static/images/tabbar/homepage.png" />
-        首页
-      </view>
-      <view
-        class="btn icon"
-        @tap="toCartPage"
-      >
-        <image src="@/static/images/tabbar/basket.png" />
-        购物车
-        <view
-          v-if="totalCartNum>0"
-          class="badge badge-1"
-        >
-          {{ totalCartNum }}
-        </view>
-      </view>
-      <view
-        class="btn cart"
-        @tap="showSku"
-      >
-        <text>加入购物车</text>
+      <!-- 首页按钮 -->
+      <view class="btn icon" @tap="toHomePage">
+        <image src="@/static/images/tabbar/homepage.png" />首页
       </view>
-      <view
-        class="btn buy"
-        @tap="showSku"
-      >
-        <text>立即购买</text>
+      <!-- 购物车按钮 -->
+      <view class="btn icon" @tap="toCartPage">
+        <image src="@/static/images/tabbar/basket.png" />购物车
+        <view v-if="totalCartNum>0" class="badge badge-1">{{ totalCartNum }}</view> <!-- 购物车商品数量 -->
       </view>
+      <!-- 加入购物车按钮 -->
+      <view class="btn cart" @tap="showSku"><text>加入购物车</text></view>
+      <!-- 立即购买按钮 -->
+      <view class="btn buy" @tap="showSku"><text>立即购买</text></view>
     </view>
     <!-- end 底部按钮 -->
-
     <!-- 规格弹窗 -->
-    <view
-      v-if="skuShow"
-      class="pup-sku"
-    >
+    <view v-if="skuShow" class="pup-sku">
       <view class="pup-sku-main">
+        <!-- 弹窗头部 -->
         <view class="pup-sku-header">
-          <image
-            class="pup-sku-img"
-            :src="defaultSku.pic?defaultSku.pic:pic"
-          />
+          <image class="pup-sku-img" :src="defaultSku.pic?defaultSku.pic:pic" /> <!-- 商品图片 -->
           <view class="pup-sku-price">
+            <!-- 商品价格 -->
             ￥
-            <text
-              v-if="defaultSku && defaultSku.price"
-              class="pup-sku-price-int"
-            >
-              {{ wxs.parsePrice(defaultSku.price)[0] }}
-            </text>
+            <text v-if="defaultSku && defaultSku.price" class="pup-sku-price-int">{{ wxs.parsePrice(defaultSku.price)[0] }}</text>
             .{{ wxs.parsePrice(defaultSku.price)[1] }}
           </view>
           <view class="pup-sku-prop">
-            <text>已选</text>
-            {{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
+            <!-- 已选规格 -->
+            <text>已选</text>{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
           </view>
-          <view
-            class="close"
-            @tap="closePopup"
-          />
+          <view class="close" @tap="closePopup"></view> <!-- 关闭按钮 -->
         </view>
+        <!-- 弹窗主体 -->
         <view class="pup-sku-body">
+          <!-- 规格选择区 -->
           <view class="pup-sku-area">
-            <view
-              v-if="skuList.length"
-              class="sku-box"
-            >
-              <block
-                v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList"
-                :key="skuGroupItemIndex"
-              >
-                <view
-                  v-for="(skuLine, key) in skuGroupItem"
-                  :key="key"
-                  class="items sku-text"
-                >
-                  <text class="sku-kind">
-                    {{ key }}
-                  </text>
+            <view v-if="skuList.length" class="sku-box">
+              <block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
+                <view v-for="(skuLine, key) in skuGroupItem" :key="key" class="items sku-text">
+                  <text class="sku-kind">{{ key }}</text> <!-- 规格类型 -->
                   <view class="con">
-                    <text
-                      v-for="skuLineItem in skuLine"
-                      :key="skuLineItem"
-                      class="sku-choose-item"
-                      :class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
-                               isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
-                      @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
-                    >
+                    <!-- 循环展示每一个规格选项 -->
+                    <text v-for="skuLineItem in skuLine" :key="skuLineItem" class="sku-choose-item"
+                          :class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
+                                  isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
+                          @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)">
                       {{ skuLineItem }}
                     </text>
                   </view>
@@ -262,614 +159,595 @@
               </block>
             </view>
           </view>
+          <!-- 数量选择 -->
           <view class="pup-sku-count">
             <view class="num-wrap">
-              <view
-                class="minus"
-                @tap="onCountMinus"
-              >
-                <text class="row" />
-              </view>
-              <view class="text-wrap">
-                <input
-                  type="number"
-                  :value="prodNum"
-                  disabled
-                >
-              </view>
-              <view
-                class="plus"
-                @tap="onCountPlus"
-              >
-                <text class="row" />
-                <text class="col" />
-              </view>
-            </view>
-            <view class="count-name">
-              数量
+              <view class="minus" @tap="onCountMinus"><text class="row"></text></view> <!-- 减少数量 -->
+              <view class="text-wrap"><input type="number" :value="prodNum" disabled></view> <!-- 显示数量 -->
+              <view class="plus" @tap="onCountPlus"><text class="row"></text><text class="col"></text></view> <!-- 增加数量 -->
             </view>
+            <view class="count-name">数量</view>
           </view>
         </view>
+        <!-- 弹窗底部 -->
         <view class="pup-sku-footer">
-          <view
-            class="btn cart"
-            @tap="addToCart"
-          >
-            加入购物车
-          </view>
-          <view
-            class="btn buy"
-            @tap="buyNow"
-          >
-            立即购买
-          </view>
+          <view class="btn cart" @tap="addToCart">加入购物车</view> <!-- 加入购物车按钮 -->
+          <view class="btn buy" @tap="buyNow">立即购买</view> <!-- 立即购买按钮 -->
         </view>
       </view>
     </view>
 
     <!-- 评价弹窗 -->
-    <view
-      v-if="commentShow"
-      class="cmt-popup"
-    >
+    <view v-if="commentShow" class="cmt-popup">
       <view class="cmt-tit">
         <view class="cmt-t">
           商品评价
-          <text class="cmt-good">
-            好评度{{ prodCommData.positiveRating }}%
-          </text>
+          <text class="cmt-good">好评度{{ prodCommData.positiveRating }}%</text> <!-- 好评率 -->
         </view>
-        <text
-          class="close"
-          @tap="closePopup"
-        />
+        <text class="close" @tap="closePopup"></text> <!-- 关闭按钮 -->
       </view>
       <view class="cmt-cont">
+        <!-- 评价筛选标签 -->
         <view class="cmt-tag">
-          <text
-            data-evaluate="-1"
-            :class="evaluate==-1?'selected':''"
-            @tap="getProdCommPage"
-          >
-            全部({{ prodCommData.number }})
-          </text>
-          <text
-            data-evaluate="0"
-            :class="evaluate==0?'selected':''"
-            @tap="getProdCommPage"
-          >
-            好评({{ prodCommData.praiseNumber }})
-          </text>
-          <text
-            data-evaluate="1"
-            :class="evaluate==1?'selected':''"
-            @tap="getProdCommPage"
-          >
-            中评({{ prodCommData.secondaryNumber }})
-          </text>
-          <text
-            data-evaluate="2"
-            :class="evaluate==2?'selected':''"
-            @tap="getProdCommPage"
-          >
-            差评({{ prodCommData.negativeNumber }})
-          </text>
-          <text
-            data-evaluate="3"
-            :class="evaluate==3?'selected':''"
-            @tap="getProdCommPage"
-          >
-            有图({{ prodCommData.picNumber }})
-          </text>
+          <text data-evaluate="-1" :class="evaluate==-1?'selected':''" @tap="getProdCommPage">全部({{ prodCommData.number }})</text>
+          <text data-evaluate="0" :class="evaluate==0?'selected':''" @tap="getProdCommPage">好评({{ prodCommData.praiseNumber }})</text>
+          <text data-evaluate="1" :class="evaluate==1?'selected':''" @tap="getProdCommPage">中评({{ prodCommData.secondaryNumber }})</text>
+          <text data-evaluate="2" :class="evaluate==2?'selected':''" @tap="getProdCommPage">差评({{ prodCommData.negativeNumber }})</text>
+          <text data-evaluate="3" :class="evaluate==3?'selected':''" @tap="getProdCommPage">有图({{ prodCommData.picNumber }})</text>
         </view>
+        <!-- 评价内容列表 -->
         <view class="cmt-items">
           <block v-if="prodCommPage.records.length">
-            <view
-              v-for="(item, index) in prodCommPage.records"
-              :key="index"
-              class="cmt-item"
-            >
+            <view v-for="(item, index) in prodCommPage.records" :key="index" class="cmt-item">
               <view class="cmt-user">
-                <text class="date">
-                  {{ item.recTime }}
-                </text>
+                <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
                 <view class="cmt-user-info">
-                  <image
-                    class="user-img"
-                    :src="item.pic"
-                  />
-                  <view class="nickname">
-                    {{ item.nickName }}
-                  </view>
+                  <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
+                  <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
                 </view>
               </view>
-              <view class="cmt-cnt">
-                {{ item.content }}
-              </view>
-              <scroll-view
-                v-if="item.pics.length"
-                class="cmt-attr"
-                scroll-x="true"
-              >
-                <image
-                  v-for="(commPic, index2) in item.pics"
-                  :key="index2"
-                  :src="commPic"
-                />
+              <view class="cmt-cnt">{{ item.content }}</view> <!-- 评价内容 -->
+              <!-- 如果有图片，则显示图片滚动视图 -->
+              <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
+                <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
               </scroll-view>
-              <view
-                v-if="item.replyContent"
-                class="cmt-reply"
-              >
-                <text class="reply-tit">
-                  店铺回复：
-                </text>
-                {{ item.replyContent }}
-              </view>
             </view>
           </block>
-          <view
-            v-if="!prodCommPage.records.length"
-            class="empty"
-          >
-            暂无评价
-          </view>
         </view>
-        <view
-          v-if="prodCommPage.pages > prodCommPage.current"
-          class="load-more"
-        >
-          <text @tap="getMoreCommPage">
-            点击加载更多
-          </text>
+      </view>
+    </view>
+  </view>
+  <!-- 评价弹窗组件，当commentShow为true时显示 -->
+  <view v-if="commentShow" class="cmt-popup">
+    <!-- 弹窗标题栏 -->
+    <view class="cmt-tit">
+      <view class="cmt-t">
+        商品评价 <!-- 标题文本 -->
+        <text class="cmt-good">好评度{{ prodCommData.positiveRating }}%</text> <!-- 显示商品的好评率 -->
+      </view>
+      <text class="close" @tap="closePopup" /> <!-- 关闭按钮，点击时调用closePopup方法关闭弹窗 -->
+    </view>
+
+    <!-- 弹窗内容区 -->
+    <view class="cmt-cont">
+      <!-- 评价筛选标签 -->
+      <view class="cmt-tag">
+        <!-- 动态生成评价筛选选项 -->
+        <text data-evaluate="-1"
+              :class="evaluate == -1 ? 'selected' : ''"
+              @tap="getProdCommPage">
+          全部({{ prodCommData.number }})
+        </text>
+        <text data-evaluate="0"
+              :class="evaluate == 0 ? 'selected' : ''"
+              @tap="getProdCommPage">
+          好评({{ prodCommData.praiseNumber }})
+        </text>
+        <text data-evaluate="1"
+              :class="evaluate == 1 ? 'selected' : ''"
+              @tap="getProdCommPage">
+          中评({{ prodCommData.secondaryNumber }})
+        </text>
+        <text data-evaluate="2"
+              :class="evaluate == 2 ? 'selected' : ''"
+              @tap="getProdCommPage">
+          差评({{ prodCommData.negativeNumber }})
+        </text>
+        <text data-evaluate="3"
+              :class="evaluate == 3 ? 'selected' : ''"
+              @tap="getProdCommPage">
+          有图({{ prodCommData.picNumber }})
+        </text>
+        <!-- 每个文本元素都有一个data-evaluate属性用于标识评价类型，并根据evaluate值来决定是否添加'selected'类名以高亮当前选中的筛选条件 -->
+        <!-- 点击任一文本元素时会触发getProdCommPage方法，加载对应的评价数据 -->
+      </view>
+
+      <!-- 评价列表 -->
+      <view class="cmt-items">
+        <!-- 如果存在评价记录，则循环渲染每个评价项 -->
+        <block v-if="prodCommPage.records.length">
+          <view v-for="(item, index) in prodCommPage.records"
+                :key="index"
+                class="cmt-item">
+            <!-- 用户信息 -->
+            <view class="cmt-user">
+              <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
+              <view class="cmt-user-info">
+                <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
+                <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
+              </view>
+            </view>
+            <!-- 评价内容 -->
+            <view class="cmt-cnt">{{ item.content }}</view>
+            <!-- 如果评价中有图片，则展示图片滚动视图 -->
+            <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
+              <image v-for="(commPic, index2) in item.pics"
+                     :key="index2"
+                     :src="commPic" />
+            </scroll-view>
+            <!-- 店铺回复，如果有的话 -->
+            <view v-if="item.replyContent" class="cmt-reply">
+              <text class="reply-tit">店铺回复：</text>
+              {{ item.replyContent }}
+            </view>
+          </view>
+        </block>
+        <!-- 如果没有评价记录，则显示提示信息 -->
+        <view v-if="!prodCommPage.records.length" class="empty">
+          暂无评价
         </view>
       </view>
+
+      <!-- 加载更多按钮，当还有未加载的评价页时显示 -->
+      <view v-if="prodCommPage.pages > prodCommPage.current" class="load-more">
+        <text @tap="getMoreCommPage">点击加载更多</text> <!-- 点击时调用getMoreCommPage方法加载下一页评价 -->
+      </view>
     </view>
   </view>
 </template>
 
-<script setup>
-const wxs = number()
-
-const indicatorDots = ref(true)
-const indicatorColor = ref('#f2f2f2')
-const indicatorActiveColor = ref('#eb2444')
-const autoplay = ref(true)
-const interval = ref(3000)
-const duration = ref(1000)
-const selectedProp = ref([])
-let prodId = 0
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  prodId = options.prodid// 加载商品信息
-  getProdInfo() // 加载商品数据
-  getProdCommData() // 加载评论项
-  getLittleProdComm() // 查看用户是否关注
-  getCollection()
-})
-
-const app = getApp()
-const totalCartNum = ref(0)
-/**
- * 生命周期函数--监听页面显示
- */
-onShow(() => {
-  totalCartNum.value = app.globalData.totalCartCount
-})
-
-/**
- * 分享设置
- */
-onShareAppMessage(() => {
-  return {
-    title: prodName.value,
-    path: '/pages/prod/prod?prodid=' + prodId
-  }
-})
-
-const isCollection = ref(false)
-/**
- * 获取是否关注信息
- */
-const getCollection = () => {
-  uni.showLoading()
-  http.request({
-    url: '/p/user/collection/isCollection',
-    method: 'GET',
-    data: {
-      prodId
-    }
-  })
-    .then(({ data }) => {
-      isCollection.value = data
-      uni.hideLoading()
+  <script setup>
+    const wxs = number()
+
+    const indicatorDots = ref(true)
+    const indicatorColor = ref('#f2f2f2')
+    const indicatorActiveColor = ref('#eb2444')
+    const autoplay = ref(true)
+    const interval = ref(3000)
+    const duration = ref(1000)
+    const selectedProp = ref([])
+    let prodId = 0
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad((options) => {
+      prodId = options.prodid// 加载商品信息
+      getProdInfo() // 加载商品数据
+      getProdCommData() // 加载评论项
+      getLittleProdComm() // 查看用户是否关注
+      getCollection()
     })
-}
-
-/**
- * 添加或者取消收藏商品
- */
-const addOrCannelCollection = () => {
-  uni.showLoading()
-  http.request({
-    url: '/p/user/collection/addOrCancel',
-    method: 'POST',
-    data: prodId
-  })
-    .then(() => {
-      isCollection.value = !isCollection.value
-      uni.hideLoading()
+
+    const app = getApp()
+    const totalCartNum = ref(0)
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow(() => {
+      totalCartNum.value = app.globalData.totalCartCount
     })
-}
-
-const skuList = ref([])
-const brief = ref('')
-const prodNum = ref(1)
-const pic = ref('')
-const imgs = ref('')
-const prodName = ref('')
-const price = ref(0)
-const content = ref('')
-/**
- * 获取商品信息
- */
-const getProdInfo = () => {
-  uni.showLoading()
-  http.request({
-    url: '/prod/prodInfo',
-    method: 'GET',
-    data: {
-      prodId // userType: 0
-    }
-  })
-    .then(({ data }) => {
-      uni.hideLoading()
-      if (!data) {
-        setTimeout(() => {
-          uni.navigateBack()
-        }, 1000)
-        return
+
+    /**
+     * 分享设置
+     */
+    onShareAppMessage(() => {
+      return {
+        title: prodName.value,
+        path: '/pages/prod/prod?prodid=' + prodId
       }
-      imgs.value = data.imgs?.split(',')
-      content.value = util.formatHtml(data.content)
-      price.value = data.price
-      prodName.value = data.prodName
-      prodId = data.prodId
-      brief.value = data.brief
-      skuList.value = data.skuList
-      pic.value = data.pic
-      // 组装sku
-      groupSkuProp(data.skuList, data.price)
-      uni.hideLoading()
     })
-}
-
-const prodCommData = ref({})
-const getProdCommData = () => {
-  http.request({
-    url: '/prodComm/prodCommData',
-    method: 'GET',
-    data: {
-      prodId
+
+    const isCollection = ref(false)
+    /**
+     * 获取是否关注信息
+     */
+    const getCollection = () => {
+      uni.showLoading()
+      http.request({
+        url: '/p/user/collection/isCollection',
+        method: 'GET',
+        data: {
+          prodId
+        }
+      })
+        .then(({ data }) => {
+          isCollection.value = data
+          uni.hideLoading()
+        })
     }
-  })
-    .then(({ data }) => {
-      prodCommData.value = data
-    })
-}
-
-const prodCommPage = ref({
-  current: 0,
-  pages: 0,
-  records: []
-})
-/**
- * 获取部分评论
- */
-const getLittleProdComm = () => {
-  if (prodCommPage.value.records.length) {
-    return
-  }
-  getProdCommPage()
-}
-
-const getMoreCommPage = () => {
-  getProdCommPage()
-}
-
-const littleCommPage = ref([])
-const evaluate = ref(-1)
-/**
- * 获取分页获取评论
- */
-const getProdCommPage = (e) => {
-  if (e) {
-    if (e.currentTarget.dataset.evaluate === evaluate.value) {
-      return
+
+    /**
+     * 添加或者取消收藏商品
+     */
+    const addOrCannelCollection = () => {
+      uni.showLoading()
+      http.request({
+        url: '/p/user/collection/addOrCancel',
+        method: 'POST',
+        data: prodId
+      })
+        .then(() => {
+          isCollection.value = !isCollection.value
+          uni.hideLoading()
+        })
+    }
+
+    const skuList = ref([])
+    const brief = ref('')
+    const prodNum = ref(1)
+    const pic = ref('')
+    const imgs = ref('')
+    const prodName = ref('')
+    const price = ref(0)
+    const content = ref('')
+    /**
+     * 获取商品信息
+     */
+    const getProdInfo = () => {
+      uni.showLoading()
+      http.request({
+        url: '/prod/prodInfo',
+        method: 'GET',
+        data: {
+          prodId // userType: 0
+        }
+      })
+        .then(({ data }) => {
+          uni.hideLoading()
+          if (!data) {
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 1000)
+            return
+          }
+          imgs.value = data.imgs?.split(',')
+          content.value = util.formatHtml(data.content)
+          price.value = data.price
+          prodName.value = data.prodName
+          prodId = data.prodId
+          brief.value = data.brief
+          skuList.value = data.skuList
+          pic.value = data.pic
+          // 组装sku
+          groupSkuProp(data.skuList, data.price)
+          uni.hideLoading()
+        })
+    }
+
+    const prodCommData = ref({})
+    const getProdCommData = () => {
+      http.request({
+        url: '/prodComm/prodCommData',
+        method: 'GET',
+        data: {
+          prodId
+        }
+      })
+        .then(({ data }) => {
+          prodCommData.value = data
+        })
     }
-    prodCommPage.value = {
+
+    const prodCommPage = ref({
       current: 0,
       pages: 0,
       records: []
+    })
+    /**
+     * 获取部分评论
+     */
+    const getLittleProdComm = () => {
+      if (prodCommPage.value.records.length) {
+        return
+      }
+      getProdCommPage()
     }
-    evaluate.value = e.currentTarget.dataset.evaluate
-  }
-
-  http.request({
-    url: '/prodComm/prodCommPageByProd',
-    method: 'GET',
-    data: {
-      prodId,
-      size: 10,
-      current: prodCommPage.value.current + 1,
-      evaluate: evaluate.value
+
+    const getMoreCommPage = () => {
+      getProdCommPage()
     }
-  })
-    .then(({ data }) => {
-      data.records.forEach(item => {
-        if (item.pics) {
-          item.pics = item.pics.split(',')
+
+    const littleCommPage = ref([])
+    const evaluate = ref(-1)
+    /**
+     * 获取分页获取评论
+     */
+    const getProdCommPage = (e) => {
+      if (e) {
+        if (e.currentTarget.dataset.evaluate === evaluate.value) {
+          return
+        }
+        prodCommPage.value = {
+          current: 0,
+          pages: 0,
+          records: []
+        }
+        evaluate.value = e.currentTarget.dataset.evaluate
+      }
+
+      http.request({
+        url: '/prodComm/prodCommPageByProd',
+        method: 'GET',
+        data: {
+          prodId,
+          size: 10,
+          current: prodCommPage.value.current + 1,
+          evaluate: evaluate.value
         }
       })
-      let records = prodCommPage.value.records
-      records = records.concat(data.records)
-      // 如果商品详情中没有评论的数据，截取两条到商品详情页商品详情
-      prodCommPage.value = {
-        current: data.current,
-        pages: data.pages,
-        records
+        .then(({ data }) => {
+          data.records.forEach(item => {
+            if (item.pics) {
+              item.pics = item.pics.split(',')
+            }
+          })
+          let records = prodCommPage.value.records
+          records = records.concat(data.records)
+          // 如果商品详情中没有评论的数据，截取两条到商品详情页商品详情
+          prodCommPage.value = {
+            current: data.current,
+            pages: data.pages,
+            records
+          }
+          if (!littleCommPage.value.length) {
+            littleCommPage.value = records.slice(0, 2)
+          }
+        })
+    }
+    let selectedPropObjList = null
+    const skuGroup = ref({})
+    const defaultSku = ref(null)
+    const selectedPropObj = ref({})
+    const propKeys = ref([])
+    const allProperties = ref([])
+    const findSku = ref(true)
+    const skuGroupList = ref([])
+    /**
+     * 组装SKU
+     */
+    const groupSkuProp = (skuList, defaultPrice) => {
+      if (skuList.length === 1 && !skuList[0].properties) {
+        defaultSku.value = skuList[0]
+        findSku.value = true
+        return
       }
-      if (!littleCommPage.value.length) {
-        littleCommPage.value = records.slice(0, 2)
+      const _skuGroupList = []
+      const skuGroupParam = {}
+      const _allProperties = []
+      const _propKeys = []
+      const _selectedPropObj = {}
+      const selectedPropObjListParam = []
+
+      let defaultSkuParam = null
+      for (let i = 0; i < skuList.length; i++) {
+        let isDefault = false
+        if (!defaultSkuParam && skuList[i].price == defaultPrice) {
+          defaultSkuParam = skuList[i]
+          isDefault = true
+        }
+        const properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
+        _allProperties.push(properties)
+        const propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]
+        for (let j = 0; j < propList.length; j++) {
+          const propval = propList[j].split(':') // ["版本","公开版"]
+          let props = skuGroupParam[propval[0]] // 先取出 版本对应的值数组
+          // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
+          if (isDefault) {
+            _propKeys.push(propval[0])
+            _selectedPropObj[propval[0]] = propval[1]
+            const selectedPropObjItem = {}
+            selectedPropObjItem[propval[0]] = propval[1]
+            selectedPropObjListParam.push(selectedPropObjItem)
+          }
+          if (!props) {
+            props = [] // 假设还没有版本，新建个新的空数组
+            props.push(propval[1]) // 把 "公开版" 放进空数组
+          } else {
+            if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
+              props.push(propval[1]) // 把 "公开版" 放进数组
+            }
+          }
+          skuGroupParam[propval[0]] = props // 最后把数据 放回版本对应的值
+          const propListItem = {}
+          propListItem[propval[0]] = props
+          _skuGroupList.push(propListItem)
+        }
       }
-    })
-}
-let selectedPropObjList = null
-const skuGroup = ref({})
-const defaultSku = ref(null)
-const selectedPropObj = ref({})
-const propKeys = ref([])
-const allProperties = ref([])
-const findSku = ref(true)
-const skuGroupList = ref([])
-/**
- * 组装SKU
- */
-const groupSkuProp = (skuList, defaultPrice) => {
-  if (skuList.length === 1 && !skuList[0].properties) {
-    defaultSku.value = skuList[0]
-    findSku.value = true
-    return
-  }
-  const _skuGroupList = []
-  const skuGroupParam = {}
-  const _allProperties = []
-  const _propKeys = []
-  const _selectedPropObj = {}
-  const selectedPropObjListParam = []
-
-  let defaultSkuParam = null
-  for (let i = 0; i < skuList.length; i++) {
-    let isDefault = false
-    if (!defaultSkuParam && skuList[i].price == defaultPrice) {
-      defaultSkuParam = skuList[i]
-      isDefault = true
+      defaultSku.value = defaultSkuParam
+      propKeys.value = _propKeys
+      selectedPropObj.value = _selectedPropObj
+      skuGroup.value = skuGroupParam
+      selectedPropObjList = selectedPropObjListParam
+      skuGroupList.value = unique(_skuGroupList)
+      allProperties.value = _allProperties
+      parseSelectedObjToVals(skuList)
     }
-    const properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
-    _allProperties.push(properties)
-    const propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]
-    for (let j = 0; j < propList.length; j++) {
-      const propval = propList[j].split(':') // ["版本","公开版"]
-      let props = skuGroupParam[propval[0]] // 先取出 版本对应的值数组
-      // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
-      if (isDefault) {
-        _propKeys.push(propval[0])
-        _selectedPropObj[propval[0]] = propval[1]
-        const selectedPropObjItem = {}
-        selectedPropObjItem[propval[0]] = propval[1]
-        selectedPropObjListParam.push(selectedPropObjItem)
+
+    const selectedPropList = ref(null)
+    /**
+     * 将已选的 {key:val,key2:val2}转换成 [val,val2]
+     */
+    const parseSelectedObjToVals = (skuList) => {
+      const selectedPropObjListParam = selectedPropObjList
+      let selectedPropertiesParam = ''
+      const selectedPropListParam = []
+      const selectedPropShowListParam = []
+      for (let i = 0; i < selectedPropObjListParam.length; i++) {
+        const selectedPropObjItem = selectedPropObjListParam[i]
+        for (const key in selectedPropObjItem) {
+          if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
+            selectedPropListParam.push(key + ':' + selectedPropObjItem[key])
+            selectedPropShowListParam.push(selectedPropObjItem[key])
+            selectedPropertiesParam += key + ':' + selectedPropObjItem[key] + ';'
+          }
+        }
       }
-      if (!props) {
-        props = [] // 假设还没有版本，新建个新的空数组
-        props.push(propval[1]) // 把 "公开版" 放进空数组
-      } else {
-        if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
-          props.push(propval[1]) // 把 "公开版" 放进数组
+      selectedPropertiesParam = selectedPropertiesParam.substring(0, selectedPropertiesParam.length - 1)
+      selectedPropList.value = selectedPropListParam
+      selectedPropObjList = selectedPropObjListParam
+      let findSkuParam = false
+      for (let i = 0; i < skuList.length; i++) {
+        if (skuList[i].properties == selectedPropertiesParam) {
+          findSkuParam = true
+          defaultSku.value = skuList[i]
+          break
         }
       }
-      skuGroupParam[propval[0]] = props // 最后把数据 放回版本对应的值
-      const propListItem = {}
-      propListItem[propval[0]] = props
-      _skuGroupList.push(propListItem)
+      findSku.value = findSkuParam
     }
-  }
-  defaultSku.value = defaultSkuParam
-  propKeys.value = _propKeys
-  selectedPropObj.value = _selectedPropObj
-  skuGroup.value = skuGroupParam
-  selectedPropObjList = selectedPropObjListParam
-  skuGroupList.value = unique(_skuGroupList)
-  allProperties.value = _allProperties
-  parseSelectedObjToVals(skuList)
-}
-
-const selectedPropList = ref(null)
-/**
- * 将已选的 {key:val,key2:val2}转换成 [val,val2]
- */
-const parseSelectedObjToVals = (skuList) => {
-  const selectedPropObjListParam = selectedPropObjList
-  let selectedPropertiesParam = ''
-  const selectedPropListParam = []
-  const selectedPropShowListParam = []
-  for (let i = 0; i < selectedPropObjListParam.length; i++) {
-    const selectedPropObjItem = selectedPropObjListParam[i]
-    for (const key in selectedPropObjItem) {
-      if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
-        selectedPropListParam.push(key + ':' + selectedPropObjItem[key])
-        selectedPropShowListParam.push(selectedPropObjItem[key])
-        selectedPropertiesParam += key + ':' + selectedPropObjItem[key] + ';'
+
+    /**
+     * 判断当前的规格值 是否可以选
+     */
+    const isSkuLineItemNotOptional = (allProperties, selectedPropObjParam, key, item, propKeys) => {
+      const selectedPropObj = Object.assign({}, selectedPropObjParam)
+      let properties = ''
+      selectedPropObj[key] = item
+      for (let j = 0; j < propKeys.length; j++) {
+        properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
+      }
+      properties = properties.substring(0, properties.length - 1)
+      for (let i = 0; i < allProperties.length; i++) {
+        if (properties == allProperties[i]) {
+          return false
+        }
+      }
+      for (let i = 0; i < allProperties.length; i++) {
+        if (allProperties[i].indexOf(item) >= 0) {
+          return true
+        }
       }
+      return false
     }
-  }
-  selectedPropertiesParam = selectedPropertiesParam.substring(0, selectedPropertiesParam.length - 1)
-  selectedPropList.value = selectedPropListParam
-  selectedPropObjList = selectedPropObjListParam
-  let findSkuParam = false
-  for (let i = 0; i < skuList.length; i++) {
-    if (skuList[i].properties == selectedPropertiesParam) {
-      findSkuParam = true
-      defaultSku.value = skuList[i]
-      break
+
+    /**
+     * 规格点击事件
+     */
+    const toChooseItem = (skuGroupItemIndex, skuLineItem, key) => {
+      selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
+      selectedPropObj.value[key] = skuLineItem
+      parseSelectedObjToVals(skuList.value)
     }
-  }
-  findSku.value = findSkuParam
-}
-
-/**
- * 判断当前的规格值 是否可以选
- */
-const isSkuLineItemNotOptional = (allProperties, selectedPropObjParam, key, item, propKeys) => {
-  const selectedPropObj = Object.assign({}, selectedPropObjParam)
-  let properties = ''
-  selectedPropObj[key] = item
-  for (let j = 0; j < propKeys.length; j++) {
-    properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
-  }
-  properties = properties.substring(0, properties.length - 1)
-  for (let i = 0; i < allProperties.length; i++) {
-    if (properties == allProperties[i]) {
-      return false
+
+    /**
+     * 去重
+     */
+    const unique = (arr) => {
+      const map = {}
+      arr.forEach(item => {
+        const obj = {}
+        Object.keys(item).sort().map(key => (obj[key] = item[key]))
+        map[JSON.stringify(obj)] = item
+      })
+      return Object.keys(map).map(key => JSON.parse(key))
     }
-  }
-  for (let i = 0; i < allProperties.length; i++) {
-    if (allProperties[i].indexOf(item) >= 0) {
-      return true
+
+    /**
+     * 跳转到首页
+     */
+    const toHomePage = () => {
+      uni.switchTab({
+        url: '/pages/index/index'
+      })
     }
-  }
-  return false
-}
-
-/**
- * 规格点击事件
- */
-const toChooseItem = (skuGroupItemIndex, skuLineItem, key) => {
-  selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
-  selectedPropObj.value[key] = skuLineItem
-  parseSelectedObjToVals(skuList.value)
-}
-
-/**
- * 去重
- */
-const unique = (arr) => {
-  const map = {}
-  arr.forEach(item => {
-    const obj = {}
-    Object.keys(item).sort().map(key => (obj[key] = item[key]))
-    map[JSON.stringify(obj)] = item
-  })
-  return Object.keys(map).map(key => JSON.parse(key))
-}
-
-/**
- * 跳转到首页
- */
-const toHomePage = () => {
-  uni.switchTab({
-    url: '/pages/index/index'
-  })
-}
-
-/**
- * 跳转到购物车
- */
-const toCartPage = () => {
-  uni.switchTab({
-    url: '/pages/basket/basket'
-  })
-}
-
-const shopId = 1
-/**
- * 加入购物车
- */
-const addToCart = () => {
-  uni.showLoading({
-    mask: true
-  })
-  http.request({
-    url: '/p/shopCart/changeItem',
-    method: 'POST',
-    data: {
-      basketId: 0,
-      count: prodNum.value,
-      prodId,
-      shopId,
-      skuId: defaultSku.value.skuId
+
+    /**
+     * 跳转到购物车
+     */
+    const toCartPage = () => {
+      uni.switchTab({
+        url: '/pages/basket/basket'
+      })
     }
-  })
-    .then(() => {
-      totalCartNum.value = totalCartNum.value + prodNum.value
-      uni.hideLoading()
-      uni.showToast({
-        title: '加入购物车成功',
-        icon: 'none'
+
+    const shopId = 1
+    /**
+     * 加入购物车
+     */
+    const addToCart = () => {
+      uni.showLoading({
+        mask: true
       })
-    })
-}
-
-/**
- * 立即购买
- */
-const buyNow = () => {
-  uni.setStorageSync('orderItem', JSON.stringify({
-    prodId,
-    skuId: defaultSku.value.skuId,
-    prodCount: prodNum.value,
-    shopId
-  }))
-  uni.navigateTo({
-    url: '/pages/submit-order/submit-order?orderEntry=1'
-  })
-}
-
-/**
- * 减数量
- */
-const onCountMinus = () => {
-  if (prodNum.value > 1) {
-    prodNum.value = prodNum.value - 1
-  }
-}
-
-/**
- * 加数量
- */
-const onCountPlus = () => {
-  if (prodNum.value < 1000) {
-    prodNum.value = prodNum.value + 1
-  }
-}
-
-const skuShow = ref(false)
-const showSku = () => {
-  skuShow.value = true
-}
-
-const commentShow = ref(false)
-const showComment = () => {
-  commentShow.value = true
-}
-
-const closePopup = () => {
-  skuShow.value = false
-  commentShow.value = false
-}
-</script>
-
-<style scoped lang="scss">
-@use './prod.scss';
-</style>
+      http.request({
+        url: '/p/shopCart/changeItem',
+        method: 'POST',
+        data: {
+          basketId: 0,
+          count: prodNum.value,
+          prodId,
+          shopId,
+          skuId: defaultSku.value.skuId
+        }
+      })
+        .then(() => {
+          totalCartNum.value = totalCartNum.value + prodNum.value
+          uni.hideLoading()
+          uni.showToast({
+            title: '加入购物车成功',
+            icon: 'none'
+          })
+        })
+    }
+
+    /**
+     * 立即购买
+     */
+    const buyNow = () => {
+      uni.setStorageSync('orderItem', JSON.stringify({
+        prodId,
+        skuId: defaultSku.value.skuId,
+        prodCount: prodNum.value,
+        shopId
+      }))
+      uni.navigateTo({
+        url: '/pages/submit-order/submit-order?orderEntry=1'
+      })
+    }
+
+    /**
+     * 减数量
+     */
+    const onCountMinus = () => {
+      if (prodNum.value > 1) {
+        prodNum.value = prodNum.value - 1
+      }
+    }
+
+    /**
+     * 加数量
+     */
+    const onCountPlus = () => {
+      if (prodNum.value < 1000) {
+        prodNum.value = prodNum.value + 1
+      }
+    }
+
+    const skuShow = ref(false)
+    const showSku = () => {
+      skuShow.value = true
+    }
+
+    const commentShow = ref(false)
+    const showComment = () => {
+      commentShow.value = true
+    }
+
+    const closePopup = () => {
+      skuShow.value = false
+      commentShow.value = false
+    }
+  </script>
+
+  <style scoped lang="scss">
+    @use './prod.scss';
+  </style>
diff --git a/front-end/mall4uni/src/pages/recent-news/recent-news.scss b/front-end/mall4uni/src/pages/recent-news/recent-news.scss
index f6dbc96..736da00 100644
--- a/front-end/mall4uni/src/pages/recent-news/recent-news.scss
+++ b/front-end/mall4uni/src/pages/recent-news/recent-news.scss
@@ -1,34 +1,40 @@
 .recent-news {
-  background: #fff;
+  background: #fff; /* 设置最近新闻容器的背景颜色为白色 */
+
   .news-item {
-    padding: 20rpx 20rpx 0 20rpx;
-    position: relative;
+    padding: 20rpx 20rpx 0 20rpx; /* 内边距：上20rpx，左右各20rpx，下0rpx */
+    position: relative; /* 使子元素可以相对于此元素进行绝对定位 */
+
     &::after {
-      content: " ";
-      width: 100%;
-      height: 2rpx;
-      background-color: #e1e1e1;
-      left: 20rpx;
-      display: block;
-      position: absolute;
+      content: " "; /* 生成一个伪元素 */
+      width: 100%; /* 伪元素宽度为100% */
+      height: 2rpx; /* 伪元素高度为2rpx，作为分隔线 */
+      background-color: #e1e1e1; /* 分隔线的颜色为浅灰色 */
+      left: 20rpx; /* 从左边开始20rpx，与父元素内边距对齐 */
+      display: block; /* 伪元素作为块级元素显示 */
+      position: absolute; /* 伪元素绝对定位，相对于父元素 */
+      bottom: 0; /* 伪元素位于父元素底部 */
     }
+
     .news-item-title {
-      font-size: 28rpx;
-      text-align: left;
+      font-size: 28rpx; /* 新闻标题字体大小为28rpx */
+      text-align: left; /* 文字左对齐 */
     }
+
     .news-item-date {
-      font-size: 24rpx;
-      color: #999;
-      text-align: right;
-      margin-top: 10rpx;
-      margin-bottom: 20rpx;
+      font-size: 24rpx; /* 日期字体大小为24rpx */
+      color: #999; /* 日期颜色为浅灰色 */
+      text-align: right; /* 文字右对齐 */
+      margin-top: 10rpx; /* 上边距为10rpx */
+      margin-bottom: 20rpx; /* 下边距为20rpx */
     }
   }
+
   .empty {
-    display: block;
-    padding-top: 200rpx;
-    color: #999;
-    font-size: 26rpx;
-    text-align: center;
+    display: block; /* 空状态提示作为块级元素显示 */
+    padding-top: 200rpx; /* 上内边距为200rpx，用于居中显示空状态提示 */
+    color: #999; /* 文字颜色为浅灰色 */
+    font-size: 26rpx; /* 字体大小为26rpx */
+    text-align: center; /* 文字水平居中 */
   }
 }
diff --git a/front-end/mall4uni/src/pages/recent-news/recent-news.vue b/front-end/mall4uni/src/pages/recent-news/recent-news.vue
index 779d20a..07a39b2 100644
--- a/front-end/mall4uni/src/pages/recent-news/recent-news.vue
+++ b/front-end/mall4uni/src/pages/recent-news/recent-news.vue
@@ -1,60 +1,62 @@
 <template>
   <view class="container">
+    <!-- 最近新闻容器 -->
     <view class="recent-news">
-      <block
-        v-for="(item, index) in news"
-        :key="index"
-      >
-        <view
-          class="news-item"
-          :data-id="item.id"
-          @tap="toNewsDetail"
-        >
-          <view class="news-item-title">
-            {{ item.title }}
-          </view>
-          <view class="news-item-date">
-            {{ item.publishTime }}
-          </view>
+      <!-- 使用 v-for 指令循环渲染 news 数组中的每一个项目 -->
+      <block v-for="(item, index) in news" :key="index">
+        <!-- 新闻项，点击时触发 toNewsDetail 方法 -->
+        <view class="news-item" :data-id="item.id" @tap="toNewsDetail">
+          <!-- 新闻标题 -->
+          <view class="news-item-title">{{ item.title }}</view>
+          <!-- 新闻发布时间 -->
+          <view class="news-item-date">{{ item.publishTime }}</view>
         </view>
       </block>
-      <view
-        v-if="!news || !news.length"
-        class="empty"
-      >
-        暂无数据
-      </view>
+      <!-- 当 news 数组为空或不存在时显示的空状态提示 -->
+      <view v-if="!news || !news.length" class="empty">暂无数据</view>
     </view>
   </view>
 </template>
 
 <script setup>
-const news = ref([])
-/**
- * 生命周期函数--监听页面显示
- */
-onShow(() => {
-  // 加载公告
-  http.request({
-    url: '/shop/notice/noticeList',
-    method: 'GET'
-  })
-    .then(({ data }) => {
-      news.value = data.records
+  import { ref, onShow } from 'vue'; // 导入 Vue 的响应式引用和生命周期钩子
+  import http from '@/utils/http';   // 假设这是用于发送 HTTP 请求的工具
+
+  // 定义一个响应式的数组来存储新闻列表
+  const news = ref([]);
+
+  /**
+   * 生命周期函数--监听页面显示
+   * 当页面显示时调用此函数，通常用于加载初始数据。
+   */
+  onShow(() => {
+    // 发送 HTTP GET 请求到服务器以获取公告列表
+    http.request({
+      url: '/shop/notice/noticeList', // API 地址
+      method: 'GET'                    // 请求方法
     })
-})
+      .then(({ data }) => {
+        // 将从服务器接收到的数据赋值给 news 数组
+        news.value = data.records;
+      })
+      .catch((error) => {
+        console.error('Failed to fetch news:', error); // 错误处理
+      });
+  });
 
-/**
- * 跳转公告详情页
- * @param e
- */
-const toNewsDetail = (e) => {
-  uni.navigateTo({
-    url: '/pages/news-detail/news-detail?id=' + e.currentTarget.dataset.id
-  })
-}
+  /**
+   * 跳转公告详情页
+   * @param e - 触发事件对象，包含当前元素的数据集（dataset）
+   */
+  const toNewsDetail = (e) => {
+    // 使用 uni.navigateTo 方法导航到新闻详情页面，并传递新闻 ID 作为查询参数
+    uni.navigateTo({
+      url: `/pages/news-detail/news-detail?id=${e.currentTarget.dataset.id}`
+    });
+  };
 </script>
 
 <style scoped lang="scss">
-@use './recent-news.scss';
+  /* 引入外部样式文件，这里的样式将仅应用于本组件 */
+  @use './recent-news.scss';
 </style>