fix

@@ -6,6 +6,7 @@
   </div>
 
   <div class="close" @click="close">
+    <i class="iconfont icon-close icon"></i>
   </div>
 </div>
 </template>
@@ -64,4 +65,12 @@ export default {
   margin-left: 12px;
 }
 
+.close {
+  color: white;
+}
+
+.icon {
+  font-size: 55px;
+}
+
 </style>

+<template>
+  <div class="order-wrapper">
+    <AvatarHeader class="avatar-wrapper"></AvatarHeader>
+    <Slide :data="list" :loop="false" :autoPlay="false" class="slide-container" @change="slideChangeHandler">
+      <SlideItem v-for="i in list">
+        <div class="image-wrapper">
+          <img class="image" :src="i" alt="">
+        </div>
+      </SlideItem>
+
+      <template slot="dots"><i></i></template>
+    </Slide>
+
+    <div class="image-preview-footer">
+    </div>
+    <span class="image-preview-counter">{{currentPageIndex + 1}}/{{list.length}}</span>
+  </div>
+</template>
+
+<script>
+
+import {Slide} from 'cube-ui';
+import AvatarHeader from './avatar-header';
+
+export default {
+  name: 'ShowOrderItem',
+  components: {
+    AvatarHeader,
+    Slide,
+    SlideItem: Slide.Item
+  },
+  data() {
+    return {
+      list: [
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg',
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0ncnnej21hc0zetxo.jpg',
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mqvu5j21hc0zkgzz.jpg',
+        'https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0m3ufuj21hc0zkqbj.jpg'
+      ],
+
+      currentPageIndex: 0
+
+    };
+  },
+  methods: {
+    close() {
+
+    },
+    slideChangeHandler(currentPageIndex) {
+      this.currentPageIndex = currentPageIndex;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.order-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-image: url('~statics/image/showorder/sd_bg@2x.png');
+  background-size: cover;
+}
+
+.avatar-wrapper {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  z-index: 2;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .image {
+    width: 100%;
+  }
+}
+
+.image-preview-footer {
+  position: absolute;
+  width: 180px;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.4);
+  top: 110px;
+  right: -60px;
+  border-radius: 30px;
+}
+
+.image-preview-counter {
+  position: absolute;
+  top: 124px;
+  right: 36px;
+  font-size: 26px;
+  color: white;
+}
+</style>

 <template>
   <Layout>
-    <Header slot="header"></Header>
+      <Slide ref="slide" :data="list" :loop="false" :autoPlay="false" direction="vertical" class="slide-container" :showDots="false">
+        <SlideItem v-for="i in list">
+          <OrderSlideItem></OrderSlideItem>
+        </SlideItem>
+      </Slide>
   </Layout>
 </template>
 
 <script>
 
-import {Scroll, Loading} from 'cube-ui';
-import Header from './components/header';
+import {Slide} from 'cube-ui';
+import OrderSlideItem from './components/order-slide-item';
 
 export default {
   name: 'ShowOrderPage',
   components: {
-    Loading,
-    Scroll,
-    Header
+    Slide,
+    SlideItem: Slide.Item,
+    OrderSlideItem
   },
   data() {
     return {
-      list: [],
+      list: [
+        {
+          url: 'http://www.didichuxing.com/',
+          image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3978382133,2176310874&fm=27&gp=0.jpg'
+        },
+        {
+          url: 'http://www.didichuxing.com/',
+          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+        },
+        {
+          url: 'http://www.didichuxing.com/',
+          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+        }
+      ],
+
     };
   },
   methods: {
-    close() {
-
-    }
   }
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+
+.slide-container {
+  /deep/ .cube-slide-item {
+    width: 100%;
+  }
+}
+
 </style>