adjust group order component

src/component/grouporder.vue

@@ -1,21 +1,25 @@
 <template>
     <view class="bg">
-        <view class="flex-round-m-8">
+        <view class="flex-s-between-m-8">
+            <view class="flex-c-m-8"> 
                 <image 
                   :src="groupLeader.avatar" 
                   mode="aspectFill" 
                   class="avatar"
                   @error="handleAvatarError(groupLeader)"
                 />
-            <text>{{ groupLeader.nickname }}</text>
+                <text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
+            </view>
+            
             <uni-icons v-if="type === 'pickup'" type="location" size="30"></uni-icons>
             <text v-if="type === 'pickup'">{{ pickupAddr }}</text>
             <text>{{ groupTypeInfo() }}</text>
         </view>
-        <text>{{ desc }}</text>
+        <view class="text-ellipsis">{{ desc }}</view>
         <view class="flex-c-m-8">
-            <view v-for="item in itemList" :key="item.id">
+            <view class="item" v-for="item in itemList" :key="item.id">
                 <image 
+                  class="item-img-h-50"
                   :src="item.image_url" 
                   mode="aspectFill" 
                   @error="handleImageError(item)"
@@ -24,18 +28,13 @@
             </view>
         </view>
         
-        <view class="flex-c-m-8">
+        <view class="flex-s-between-m-8">
             <text>{{ statisticDesc }}</text>
-            <button
-                @click="shareHandler"
-            >
-                分享
-            </button>
-            <button
-                @click="joinHandler"
-            >
-                参团
-            </button>
+            <view class="flex-c-m-8">
+                <button @click="shareHandler">分享</button>
+                <button @click="joinHandler">参团</button>
+            </view>
+            
         </view>
     </view>
 </template>
@@ -107,9 +106,9 @@ function groupTypeInfo() {
     margin: 10px;
 }
 
-.flex-round-m-8 {
+.flex-s-between-m-8 {
     display: flex;
-    align-content: space-around;
+    justify-content: space-between;
     align-items: center;
     margin: 8px;
 }
@@ -125,4 +124,29 @@ function groupTypeInfo() {
   height: 100rpx;
   border-radius: 50%;
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box; /* 兼容 WebKit 内核浏览器 */
+  -webkit-line-clamp: 2; /* 限制显示行数 */
+  -webkit-box-orient: vertical; /* 文本垂直排列 */
+  line-clamp: 2; /* 标准语法（部分浏览器支持） */
+  white-space: normal; /* 允许换行 */
+  /* 其他样式 */
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.item-img-h-50 {
+    width: 50px;
+    height: 50px;
+}
+
+.item {
+  margin-left: 20px;
+  display: inline-grid;
+  justify-content: center;   /* 水平方向居中对齐 */
+  align-items: center;       /* 垂直方向居中对齐 */
+}
 </style>

src/pages/home/home.vue

@@ -31,7 +31,7 @@ export default {
         {
           id:"1",
           type:"express",
-          desc:"测试描述",
+          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
           status:"start",
           pickup_addr:"自提点地址",
           item_list:[