商品详情: 调整图片样式,保持原始比率

@@ -7,7 +7,9 @@
           </div>
           </div>
         </div>
         </div>
         <div class="title">
         <div class="title">
-          <img-size class="title-thumbnail" :src="imageUrl" :width="300" :height="300"/>
+          <div class="title-thumbnail">
+            <square-img :src="imageUrl" :width="300" :height="300"/>
+          </div>
           <div>{{productDetail.product_name}} {{goodsName}}</div>
           <div>{{productDetail.product_name}} {{goodsName}}</div>
         </div>
         </div>
         <div class="size-list">
         <div class="size-list">
@@ -29,9 +31,9 @@ import { Scroll } from 'cube-ui';
 import { get } from 'lodash';
 import { get } from 'lodash';
 import { createNamespacedHelpers } from 'vuex';
 import { createNamespacedHelpers } from 'vuex';
 
 
-import ImgSize from '../../../components/img-size';
 import ActionSheet from './action-sheet';
 import ActionSheet from './action-sheet';
 import stateShortCutsMixins from '../mixins';
 import stateShortCutsMixins from '../mixins';
+import SquareImg from './square-img';
 
 
 const { mapActions, mapGetters } = createNamespacedHelpers('product');
 const { mapActions, mapGetters } = createNamespacedHelpers('product');
 
 
@@ -39,7 +41,7 @@ export default {
   name: 'BuySheet',
   name: 'BuySheet',
   mixins: [stateShortCutsMixins],
   mixins: [stateShortCutsMixins],
   components: {
   components: {
-    ImgSize,
+    SquareImg,
     ActionSheet,
     ActionSheet,
     'cube-scroll': Scroll,
     'cube-scroll': Scroll,
   },
   },

@@ -4,7 +4,9 @@
       <div class="select-size">
       <div class="select-size">
         <div class="title" @click="hide">{{config.title}}<i class="cubeic-close"></i></div>
         <div class="title" @click="hide">{{config.title}}<i class="cubeic-close"></i></div>
         <div class="selected-info">
         <div class="selected-info">
-          <img-size class="title-thumbnail" :src="imageList[0] && imageList[0].image_url" :width="70" :height="70"/>
+          <div class="title-thumbnail">
+            <square-img :src="imageList[0] && imageList[0].image_url" :width="70" :height="70"/>
+          </div>
           <div class="product">
           <div class="product">
             <div>¥{{product.least_price||''}}</div>
             <div>¥{{product.least_price||''}}</div>
             <div>
             <div>
@@ -18,8 +20,8 @@
                    @select="onSelectSize"
                    @select="onSelectSize"
                    @add="onAdd" />
                    @add="onAdd" />
         <transition name="slide-up">
         <transition name="slide-up">
-          <div class="footer">
-            <cube-button @click="select" :class="{active: isTradable}">{{config.title}}</cube-button>
+          <div class="footer" v-if="isTradable">
+            <cube-button @click="select" class="active">{{config.title}}</cube-button>
           </div>
           </div>
         </transition>
         </transition>
       </div>
       </div>
@@ -33,8 +35,8 @@ import { get } from 'lodash';
 import { createNamespacedHelpers } from 'vuex';
 import { createNamespacedHelpers } from 'vuex';
 
 
 import ActionSheet from './action-sheet';
 import ActionSheet from './action-sheet';
-import ImgSize from '../../../components/img-size';
 import SizeList from './size-list';
 import SizeList from './size-list';
+import SquareImg from './square-img';
 
 
 const { mapActions, mapState } = createNamespacedHelpers('product');
 const { mapActions, mapState } = createNamespacedHelpers('product');
 
 
@@ -64,8 +66,8 @@ export default {
     }
     }
   },
   },
   components: {
   components: {
+    SquareImg,
     SizeList,
     SizeList,
-    ImgSize,
     'cube-button': Button,
     'cube-button': Button,
     'cube-scroll': Scroll,
     'cube-scroll': Scroll,
     'action-sheet': ActionSheet,
     'action-sheet': ActionSheet,

@@ -13,8 +13,8 @@
       <div class="slide">
       <div class="slide">
         <cube-slide ref="slide" :data="imageList">
         <cube-slide ref="slide" :data="imageList">
           <cube-slide-item v-for="(item, index) in imageList" :key="index">
           <cube-slide-item v-for="(item, index) in imageList" :key="index">
-            <a click="javascript:void 0">
-              <img-size :src="item.image_url" :width="300" :height="300"/>
+            <a click="javascript:void 0" class="square-img-container">
+              <square-img :src="item.image_url" :width="300" :height="300" />
             </a>
             </a>
           </cube-slide-item>
           </cube-slide-item>
           <template slot="dots" slot-scope="props">
           <template slot="dots" slot-scope="props">
@@ -104,6 +104,7 @@ import SizeSelectSheet from './components/size-select-sheet';
 import SizeRequestSheet from './components/size-request-sheet';
 import SizeRequestSheet from './components/size-request-sheet';
 import BuySheet from './components/buy-sheet';
 import BuySheet from './components/buy-sheet';
 import TopList from './components/top-list';
 import TopList from './components/top-list';
+import SquareImg from './components/square-img';
 import stateShortCutsMixins from './mixins';
 import stateShortCutsMixins from './mixins';
 
 
 const { mapActions } = createNamespacedHelpers('product');
 const { mapActions } = createNamespacedHelpers('product');
@@ -120,6 +121,7 @@ export default {
     ImgSize,
     ImgSize,
     ProductList,
     ProductList,
     TopList,
     TopList,
+    SquareImg,
     'cube-button': Button,
     'cube-button': Button,
     'cube-slide': Slide,
     'cube-slide': Slide,
     'cube-slide-item': Slide.Item,
     'cube-slide-item': Slide.Item,
@@ -372,9 +374,13 @@ export default {
   }
   }
 
 
   .slide {
   .slide {
+    .square-img-container {
+      display: block;
       width: 520px;
       width: 520px;
       height: 520px;
       height: 520px;
       margin: 0 auto;
       margin: 0 auto;
+    }
+
     .dot {
     .dot {
       width: 10px;
       width: 10px;
       height: 10px;
       height: 10px;