修改组件样式

src/views/common/OrderItem.vue

@@ -297,8 +297,6 @@ function switchButtonFunction() {
   justify-content: space-between;
 }
 
-
-
 .status-change-button {
   margin-left: 10px;
 }

src/views/common/StoreItem.vue

@@ -31,31 +31,47 @@ function getStoreDetail() {
 </script>
 
 <template>
-  <el-card class="store-item-card">
+  <el-card class="store-item-card" :body-style="{ padding: '0px' }" shadow="hover">
     <el-image class="logo-image" :src="logoUrl"/>
-    <el-row style="font-size: 20px">
-      {{ name }}
-    </el-row>
-    <el-row style="font-size: 10px">
-      评分人数: {{ number }}
-    </el-row>
-    <el-row style="font-size: 10px">
-      评分: {{ rating }}
-    </el-row>
-    <el-row style="font-size: 10px">
-      地址: {{ location }}
-    </el-row>
+
+    <div style="padding: 14px">
+
+      <h1> {{name}} </h1>
+
+      <el-descriptions :column="1">
+        <el-descriptions-item style="font-size: 10px" label="评分人数">
+          {{ number }}
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="评分">
+          <el-rate
+              v-model="rating"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value} 分"
+              size="small"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="地址">
+          {{ location }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+    </div>
+
   </el-card>
 </template>
 
 <style scoped>
 .store-item-card {
-  margin-bottom: 10px;
-  width:30%;
+  margin: 20px;
   border-radius: 8px;
+  min-width: 25%;
+  max-width: 25%;
 }
 
 .logo-image {
-  height: 120px;
+  width: 100%;
+  display: block;
 }
 </style>

src/views/customer/AllOrder.vue

@@ -15,10 +15,10 @@ function getOrderList() {
 </script>
 
 <template>
-  <div class="order-item-list">
+  <el-main class="order-item-list">
     <OrderItem
                v-for="orderVO in orderList" :orderId="orderVO.id"/>
-  </div>
+  </el-main>
 </template>
 
 <style scoped>

src/views/portal/AllStore.vue

@@ -28,10 +28,10 @@ function toAllOrderPage() {
 </script>
 
 <template>
-  <el-main>
+  <el-main class="store-item-list">
 <!--    我挪到header去了 -->
 <!--    <el-button @click="toAllOrderPage">全部订单</el-button>-->
-    <StoreItem class="store-item-list"
+    <StoreItem
                v-for="storeVO in storeList" :storeId="storeVO.id"
                @click="toStoreDetailPage(storeVO.id)" />
   </el-main>
@@ -39,7 +39,9 @@ function toAllOrderPage() {
 
 <style scoped>
 .store-item-list {
-  margin-top: 20px;
-  margin-left: 50px;
+  display: flex;
+  padding: 2px;
+  flex-flow: wrap;
+  justify-content: center;
 }
 </style>