修改组件样式

src/views/common/OrderItem.vue

@@ -179,10 +179,7 @@ function switchButtonFunction() {
 </script>
 
 <template>
-
-  <div>
-
-    <el-card class="order-item-card">
+    <el-card class="order-item-card" shadow="hover">
 
       <template #header>
         <div class="card-header">
@@ -208,7 +205,7 @@ function switchButtonFunction() {
         <el-descriptions-item style="font-size: 15px" label="取货类型">
           <el-tag> {{ parseType() }}</el-tag>
         </el-descriptions-item>
-        <el-descriptions-item style="font-size: 15px" label="评分">
+        <el-descriptions-item style="font-size: 15px" label="评分" v-if="status==='DONE'">
           <el-rate
               v-model="rating"
               disabled
@@ -257,17 +254,22 @@ function switchButtonFunction() {
     </el-dialog>
 
 
-    <el-dialog v-model="commentDialogVisible">
+    <el-dialog
+        v-model="commentDialogVisible"
+        title="发起评价"
+    >
       <el-form>
 
-        <el-form-item>
-          <el-rate v-model="rating" clearable
-                   :texts="['非常差', '差', '普通', '好', '非常好']"
-                    show-text/>
+        <el-form-item >
+            <span style="margin-right: 30px">商品满意度</span>
+            <el-rate v-model="rating" clearable
+                     :texts="['非常差', '差', '普通', '好', '非常好']"
+                     show-text/>
         </el-form-item>
 
         <el-form-item>
-          <el-input type="textarea" rows="10">
+          <label>文字评价</label>
+          <el-input v-model="content" type="textarea" rows="10" placeholder="说点什么吧">
 
           </el-input>
         </el-form-item>
@@ -279,22 +281,23 @@ function switchButtonFunction() {
       </el-form>
     </el-dialog>
 
-  </div>
 </template>
 
 <style scoped>
 
+.order-item-card {
+  margin: 20px;
+  border-radius: 8px;
+  min-width: max-content;
+}
+
 .card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.order-item-card {
-  margin-bottom: 10px;
-  width: 30%;
-  border-radius: 8px;
-}
+
 
 .status-change-button {
   margin-left: 10px;

src/views/customer/AllOrder.vue

@@ -15,15 +15,17 @@ function getOrderList() {
 </script>
 
 <template>
-  <div>
-    <OrderItem class="order-item-list"
+  <div class="order-item-list">
+    <OrderItem
                v-for="orderVO in orderList" :orderId="orderVO.id"/>
   </div>
 </template>
 
 <style scoped>
 .order-item-list {
-  margin-top: 20px;
-  margin-left: 50px;
+  display: flex;
+  padding: 2px;
+  flex-flow: wrap;
+  justify-content: center;
 }
 </style>