居民积分

project/fengdu/app/AppResidentIntegrating/components/Detail.vue

@@ -5,16 +5,22 @@
       </ai-title>
     </template>
     <template slot="content">
-      <ai-card title="基本信息">
-        <template #content>
-          <ai-wrapper
-            label-width="120px">
-            <ai-info-item label="姓名" isLine :value="info.userName"></ai-info-item>
-            <ai-info-item label="个人积分" isLine :value="info.integral || 0"></ai-info-item>
-            <ai-info-item label="已用积分" isLine :value="info.usedIntegral || 0"></ai-info-item>
-          </ai-wrapper>
-        </template>
-      </ai-card>
+      <el-row style="margin-bottom: 16px;">
+        <div class="card_list">
+          <div class="card">
+            <h2>姓名</h2>
+            <p class="color1">{{ info.userName }}</p>
+          </div>
+          <div class="card">
+            <h2>积分余额</h2>
+            <p class="color2">{{ info.integral || 0 }}</p>
+          </div>
+          <div class="card">
+            <h2>已用积分</h2>
+            <p class="color3">{{ info.usedIntegral || 0 }}</p>
+          </div>
+        </div>
+      </el-row>
       <ai-card>
         <ai-title slot="title" title="余额变动明细"/>
         <template #content>
@@ -130,4 +136,46 @@
 </script>
 
 <style scoped lang="scss">
+  .card_list {
+    display: flex;
+
+    .card {
+      flex: 1;
+      height: 96px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
+      border-radius: 4px;
+      margin-right: 20px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+
+      h2 {
+        color: #888888;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      p {
+        margin-top: 8px;
+        font-size: 24px;
+        font-weight: 600;
+      }
+
+      .color1 {
+        color: #2891FF;
+      }
+
+      .color2 {
+        color: #22AA99;
+      }
+
+      .color3 {
+        color: #F8B425;
+      }
+    }
+
+    .card:last-child {
+      margin-right: 0;
+    }
+  }
 </style>