wip

public/build/beike/css/admin.css

@@ -284,8 +284,8 @@ hr.horizontal.dark {
 }
 
 .card {
-  box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
-  border: 1px solid #edf2f9;
+  border: none;
 }
 .card .card-header {
   padding: 1rem 1rem 0.3rem;
@@ -398,6 +398,10 @@ table.table.table-striped > tbody > tr:nth-of-type(2n) {
   box-shadow: none;
 }
 
+.form-max-w {
+  max-width: 560px;
+}
+
 @font-face {
   font-family: "iconfont";
   /* Project id 2787822 */
@@ -421,3 +425,11 @@ table.table.table-striped > tbody > tr:nth-of-type(2n) {
 .form-group .col-form-label {
   text-align: right;
 }
+
+.el-input__inner {
+  border-radius: 0;
+}
+
+.el-button {
+  border-radius: 0;
+}

resources/beike/admin/css/_bootstrap-extra.scss

@@ -23,9 +23,11 @@ hr.horizontal.dark {
 
 .card {
   // box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
-  box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
+  // box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
+  box-shadow: rgba(0, 0, 0, .1) 0px 1px 4px 0px;
   // border: 0 solid rgba(0,0,0,.125);
-  border: 1px solid #edf2f9;
+  // border: 1px solid #edf2f9;
+  border: none;
   // border-radius: 0.5rem;
 
   .card-header {
@@ -169,3 +171,8 @@ table.table {
     box-shadow: none;
   }
 }
+
+.form-max-w {
+  max-width: 560px;
+}
+

resources/beike/admin/css/app.scss

@@ -19,3 +19,4 @@ $main_color: #fd560f;
 @import 'dashboard';
 @import 'subscription';
 @import 'form';
+@import 'element-ui';

resources/beike/admin/css/element-ui.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+.el-input__inner {
+  border-radius: 0;
+}
+
+.el-button {
+  border-radius: 0;
+}

resources/beike/admin/views/pages/customers/form.blade.php

@@ -5,10 +5,10 @@
 @section('content')
     <div id="customer-app-form" class="card">
         <div class="card-body">
-            <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="width: 460px;">
+            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
-                <div class="row">
+                <el-tabs v-model="customerTab">
-                    <div class="col-12 col-md-6">
+                  <el-tab-pane label="用户信息" name="customer">
-                        <h6 class="mb-4">用户信息</h6>
+                    <div class="form-max-w">
                         <el-form-item label="用户名" prop="name">
                           <el-input v-model="form.name"></el-input>
                         </el-form-item>
@@ -31,11 +31,38 @@
                         <el-form-item label="状态" prop="status">
                             <el-switch v-model="form.status"></el-switch>
                         </el-form-item>
+                        <el-form-item>
+                          <el-button type="primary" @click="submitForm('form')">提交</el-button>
+                        </el-form-item>
                     </div>
-                </div>
+                  </el-tab-pane>
-                <el-form-item>
+                  <el-tab-pane label="地址管理" name="address">
-                  <el-button type="primary" @click="submitForm('form')">提交</el-button>
+                      <table class="table">
-                </el-form-item>
+                        <thead>
+                          <tr>
+                            <th>#</th>
+                            <th>名称</th>
+                            <th>电话</th>
+                            <th>注册来源</th>
+                            <th>状态</th>
+                            <th>操作</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                              <tr v-for="address, index in form.address" :key="index">
+                                <td>@{{ index }}</td>
+                                <td>@{{ address.name }}</td>
+                                <td>@{{ address.phone }}</td>
+                                <td>222</td>
+                                <td>222</td>
+                                <td>
+                                    <button class="btn btn-outline-secondary btn-sm" @click="editAddress(address.id)">编辑</button>
+                                </td>
+                              </tr>
+                        </tbody>
+                      </table>
+                  </el-tab-pane>
+                </el-tabs>
             </el-form>
         </div>
     </div>
@@ -47,6 +74,7 @@
     new Vue({
       el: '#customer-app-form',
       data: {
+        customerTab: 'customer',
         form: {
             id: '',
             name: '',
@@ -87,6 +115,10 @@
               }
 
             });
+        },
+
+        editAddress(id) {
+            console.log(1)
         }
       }
     });

resources/beike/admin/views/pages/customers/index.blade.php

@@ -21,7 +21,7 @@
               </thead>
               <tbody>
                 @foreach ($customers as $customer)
-                    <tr v-for="customer, index in customers" :key="index">
+                    <tr>
                       <td>{{ $customer['id'] }}</td>
                       <td>{{ $customer['email'] }}</td>
                       <td>