diff --git a/fuintCashierWeb/src/views/details/index.vue b/fuintCashierWeb/src/views/details/index.vue
index bc4ae0e06..3d28c2fcd 100644
--- a/fuintCashierWeb/src/views/details/index.vue
+++ b/fuintCashierWeb/src/views/details/index.vue
@@ -1,15 +1,66 @@
 <template>
-    <div>
-      详情页
+    <div class="app-center">
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <i class="el-icon-back"></i>
+          <span>会员详情</span>
+        </div>
+        <div>基础资料</div>
+        <div class="vip-my-top">
+<!--          -->
+          <div class="f-box">
+            <div class="imgtoux"><el-avatar :size="80" :src="circleUrl"></el-avatar></div>
+            <div>
+              <el-button type="warning" plain round>绑定实体卡</el-button>
+            </div>
+            <div>
+              <el-button type="primary" plain round>会员充值</el-button>
+            </div>
+
+
+          </div>
+
+<!--          -->
+        </div>
+
+      </el-card>
+      <el-card class="box-card">
+      </el-card>
+      <el-card class="box-card">
+      </el-card>
+
     </div>
 </template>
 
 <script>
     export default {
-        name: "index"
+        name: "index",
+        data(){
+          return{
+            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+          }
+        }
     }
 </script>
 
 <style scoped>
+  .app-center{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .vip-my-top{
+    width: 100%;
+    display: flex;
+  }
+  .f-box{
+    width: 20%;
+
+  }
+  .imgtoux{
+    width: 80px;
+    margin: 10px auto;
+  }
 
 </style>