diff --git a/beike/Models/Product.php b/beike/Models/Product.php
index a6be47e9..238d7b0e 100644
--- a/beike/Models/Product.php
+++ b/beike/Models/Product.php
@@ -50,11 +50,6 @@ class Product extends Model
         return '$' . $this->price;
     }
 
-    public function getVariablesDecodedAttribute()
-    {
-        return json_decode($this->variables, true);
-    }
-
     public function getUrlAttribute()
     {
         return shop_route('products.show', ['product' => $this]);
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index c4816e1a..8da689a5 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -381,6 +381,23 @@ body.page-product .product-image .left {
 body.page-product .product-image .left > div {
   margin-bottom: 1rem;
 }
+body.page-product .variables-wrap .variable-info > div {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid #ddd;
+  margin-left: 0;
+  min-width: 3rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.1s ease-in-out;
+}
+body.page-product .variables-wrap .variable-info > div:hover, body.page-product .variables-wrap .variable-info > div.active {
+  border-color: #222;
+}
 body.page-product .peoduct-info .rating-wrap {
   margin-bottom: 2rem;
 }
diff --git a/resources/beike/admin/views/pages/products/form/form.blade.php b/resources/beike/admin/views/pages/products/form/form.blade.php
index c503db37..f2f6b499 100644
--- a/resources/beike/admin/views/pages/products/form/form.blade.php
+++ b/resources/beike/admin/views/pages/products/form/form.blade.php
@@ -140,11 +140,11 @@
       el: '#app',
       data: {
         form: {
-          variables: @json($product->variables_decoded ?? []),
+          variables: @json($product->variables ?? []),
           skus: @json($product->skus ?? []),
         },
         source: {
-          variables: @json($product->variables_decoded ?? []),
+          variables: @json($product->variables ?? []),
         },
         editing: {
           isVariable: @json(($product->variables ?? null) != null),
diff --git a/resources/beike/shop/default/css/product.scss b/resources/beike/shop/default/css/product.scss
index bad10638..3b6505a3 100644
--- a/resources/beike/shop/default/css/product.scss
+++ b/resources/beike/shop/default/css/product.scss
@@ -11,6 +11,28 @@ body.page-product {
     }
   }
 
+  .variables-wrap {
+    .variable-info {
+      > div {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+        border: 1px solid #ddd;
+        margin-left: 0;
+        min-width: 3rem;
+        padding: 0.5rem;
+        cursor: pointer;
+        text-align: center;
+        transition: all .1s ease-in-out;
+        &:hover, &.active {
+          border-color: #222;
+        }
+      }
+    }
+  }
+
   .peoduct-info {
     .rating-wrap {
       margin-bottom: 2rem;
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php
index 4be1d3a4..ae9c7cdd 100644
--- a/themes/default/product.blade.php
+++ b/themes/default/product.blade.php
@@ -2,9 +2,15 @@
 
 @section('body-class', 'page-product')
 
+@push('header')
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  {{-- <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script> --}}
+  {{-- <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}"> --}}
+@endpush
+
 @section('content')
 
-  <div class="container" id="checkout-app">
+  <div class="container" id="product-app" v-cloak>
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -12,7 +18,7 @@
       </ol>
     </nav>
 
-    <div class="row mb-5">
+    <div class="row mb-5" id="product-top">
       <div class="col-12 col-md-6">
         <div class="product-image d-flex">
           <div class="left">
@@ -20,13 +26,13 @@
               <div class=""><img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid"></div>
             @endfor
           </div>
-          <div class="right"><img src="{{ $product->image }}" class="img-fluid"></div>
+          <div class="right"><img src="{{ $product['image'] }}" class="img-fluid"></div>
         </div>
       </div>
 
       <div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
         <div class="peoduct-info">
-          <h1>{{ $product->description->name }}</h1>
+          <h1>{{ $product['name'] }}</h1>
           <div class="rating-wrap d-flex">
             <div class="rating">
               @for ($i = 0; $i < 5; $i++)
@@ -36,19 +42,35 @@
             <span class="text-muted">132 reviews</span>
           </div>
           <div class="price-wrap d-flex align-items-end">
-            <div class="new-price">{{ $product->master_sku->price }}</div>
-            <div class="old-price text-muted text-decoration-line-through">{{ $product->master_sku->origin_price }}</div>
+            <div class="new-price"></div>
+            <div class="old-price text-muted text-decoration-line-through"></div>
           </div>
+
+          <div class="variables-wrap">
+            <div class="variable-group mb-3" v-for="variable, index in source.variables" :key="index">
+              <p class=""><strong>@{{ variable.name }}</strong></p>
+              <div class="variable-info">
+                <div
+                  v-for="value, v in variable.values"
+                  @click="checkedVariableValue(index, v, value)"
+                  :key="v"
+                  :class="value.selected ? 'active' : ''">
+                  @{{ value.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="attribute-wrap">
             <table class="table table-striped table-borderless">
               <tbody>
                 <tr>
                   <td>型号</td>
-                  <td>{{ $product->master_sku->model }}</td>
+                  <td></td>
                 </tr>
                 <tr>
                   <td>Sku</td>
-                  <td>{{ $product->master_sku->sku }}</td>
+                  <td></td>
                 </tr>
               </tbody>
             </table>
@@ -87,17 +109,56 @@
   </div>
 
   <script>
-    $('.add-cart').on('click', function(event) {
-      const data = {
-        sku_id: '{{ $product->master_sku->id }}',
-        quantity: $('input[name="quantity"]').val()
-      };
-
-      $http.post('/carts', data).then((res) => {
-        layer.msg(res.message)
-      })
-    });
 
   </script>
 @endsection
 
+@push('add-scripts')
+  <script>
+    new Vue({
+      el: '#product-app',
+
+      data: {
+        selectedVariantsIndex: [], // 选中的变量索引
+        source: {
+          skus: @json($product['skus']),
+          variables: @json($product['variables']),
+        }
+      },
+
+      computed: {
+      },
+
+      beforeMount () {
+        const skuDefault = this.source.skus.find(e => e.is_default)
+        this.selectedVariantsIndex = skuDefault.variants
+
+        // 为 variables 里面每一个 values 的值添加一个 selected 字段
+        this.source.variables.forEach(variable => {
+          variable.values.forEach(value => {
+            this.$set(value, 'selected', false)
+          })
+        })
+
+        // console.log(this.selectedVariantsIndex)
+        this.checkedVariants()
+      },
+
+      methods: {
+        checkedVariableValue(variable_idnex, value_index,value) {
+          this.source.variables[variable_idnex].values[value_index].selected = !value.selected
+        },
+
+        // 把对应 selectedVariantsIndex 下标选中 variables -> values 的 selected 字段为 true
+        checkedVariants() {
+          this.source.variables.forEach((variable, index) => {
+            variable.values.forEach(value => {
+              value.selected = false
+            })
+            variable.values[this.selectedVariantsIndex[index]].selected = true
+          })
+        },
+      }
+    })
+  </script>
+@endpush
\ No newline at end of file