商品名称的样式修改，现在商品名称在超过两行时会显示省略号，并且"购买"按钮位置固定不会被挤下。具体修改如下：

1. 为商品名称添加了多行文本截断样式：
   - 使用 `-webkit-line-clamp: 2` 限制最多显示两行
   - 使用 `overflow: hidden` 和 `text-overflow: ellipsis` 实现省略号效果
   - 添加 `padding-right: 90upx` 为"购买"按钮预留空间

2. 优化了商品详情区域的布局：
   - 为 `.goods-det` 添加了 `position: relative` 和明确的宽度计算
   - 将内联样式的"购买"按钮提取为独立的 `.buy-btn` 类
   - 设置"购买"按钮的位置为绝对定位，并固定在右下角

这样修改后，无论商品名称有多长，"购买"按钮都会固定在右下角位置，不会随着商品名称的长度变化而改变位置。同时，商品名称超过两行时会自动截断并显示省略号。

mallApp/src/pages/home/category.vue

@@ -37,7 +37,7 @@
                 <view class="goods-sales"></view>
               </view>
               <view class="goods-price">￥{{ items.price?parseFloat(items.price):0 }}</view>
-              <view style="color:red;border:1upx solid red;width:80upx;text-align:center;padding:5upx 0 5upx 0;font-size:25upx;right:30upx;position:absolute;">购买</view>
+              <view class="buy-btn">购买</view>
             </view>
           </view>
         </view>
@@ -335,11 +335,18 @@ page {
       .goods-det {
         padding-top: 18upx;
         font-size: 28upx;
+        position: relative;
+        width: calc(100% - 220upx);
         .goods-det-top {
           .goods-name {
             margin-bottom: 10upx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-break: break-all;
           }
-
         }
         .goods-price {
           margin-top: 50upx;
@@ -417,4 +424,16 @@ page {
 		height: 180upx;
 	}
 }
+
+.buy-btn {
+  color: red;
+  border: 1upx solid red;
+  width: 80upx;
+  text-align: center;
+  padding: 5upx 0;
+  font-size: 25upx;
+  position: absolute;
+  right: 30upx;
+  top: 150upx;
+}
 </style>