commit

+<template>
+  <ImageFormat :mode="1" :lazy="lazy" :style="imageStyle" class="image-slide-item" :src="data.contentData" :width="imageSize.width" :height="imageSize.height"></ImageFormat>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+export default {
+  name: 'ArticleItemSlideImage',
+  props: {
+    thumbSize: Object,
+    data: Object,
+    lazy: Boolean
+  },
+  computed: {
+    ...mapState(['yoho']),
+    imageStyle() {
+      const {width, height} = this.itemSize;
+
+      return {
+        width: `${width}px`,
+        height: `${height}px`
+      };
+    },
+    itemSize() {
+      const {height: fHeight} = this.thumbSize;
+      const scale = this.data.width / this.data.height;
+
+      if (scale > 1) {
+        return {
+          width: parseInt(this.yoho.window.clientWidth, 10),
+          height: parseInt(this.yoho.window.clientWidth / scale, 10)
+        };
+      } else if (scale < 1) {
+        return {
+          width: parseInt(fHeight * scale, 10),
+          height: parseInt(fHeight, 10)
+        };
+      } else {
+        return {
+          width: this.yoho.window.clientWidth,
+          height: this.yoho.window.clientWidth
+        };
+      }
+    },
+    imageSize() {
+      const {width, height} = this.itemSize;
+
+      if (this.data.width < width && this.data.height < height) {
+        return this.itemSize;
+      }
+      return this.data;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-slide-item {
+  overflow: hidden;
+}
+</style>

@@ -2,7 +2,7 @@
   <div class="article-item-slide">
     <Slide :data="data.blockList" :threshold="0.2" :auto-play="false" :loop="false" :options="scrollOption" @change="onChange">
       <SlideItem :style="slideItemStyle" v-for="(item, inx) in data.blockList" :key="inx">
-        <ImageFormat :mode="1" :lazy="lazy" :style="getImageStyle(item)" class="image-slide-item" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
+        <ArticleItemSlideImage :lazy="lazy" :data="item" :thumb-size="firstBlockSize"></ArticleItemSlideImage>
       </SlideItem>
       <template slot="dots" slot-scope="props">
         <span class="slide-dot"
@@ -22,6 +22,7 @@
 import {first} from 'lodash';
 import {Slide} from 'cube-ui';
 import {mapState} from 'vuex';
+import ArticleItemSlideImage from './article-item-slide-image';
 
 export default {
   name: 'ArticleItemSlide',
@@ -75,22 +76,6 @@ export default {
     }
   },
   methods: {
-    getImageStyle({width, height}) {
-      const {height: fHeight} = this.firstBlockSize;
-      const scale = width / height;
-
-      if (scale > 1) {
-        return {
-          width: `${this.yoho.window.clientWidth}px`,
-          height: `${this.yoho.window.clientWidth / scale}px`
-        };
-      } else if (scale < 1) {
-        return {
-          width: `${fHeight * scale}px`,
-          height: `${fHeight}px`
-        };
-      }
-    },
     onChange(inx) {
       this.currentIndex = inx + 1;
     },
@@ -127,7 +112,7 @@ export default {
       };
     }
   },
-  components: {Slide, SlideItem: Slide.Item}
+  components: {Slide, SlideItem: Slide.Item, ArticleItemSlideImage}
 };
 </script>
 
@@ -165,10 +150,6 @@ export default {
   }
 }
 
-.image-slide-item {
-  overflow: hidden;
-}
-
 .pages {
   position: absolute;
   top: 0;