新增个人中心列表、公告及订单组件

+<template>
+  <div class="orders">
+    <div v-for="(item, index) in orders" :key="index" class="order-cell">
+        <p class="order-num">{{item.num}}</p>
+        <p class="order-text">{{item.name}}</p>
+    </div>   
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapActions} = createNamespacedHelpers('home/mine');
+
+export default {
+  name: 'order',
+  props: {
+
+  },
+  data() {
+    return {
+      orders: [
+        {name: '待发货',num:1},
+        {name: '已发货',num:1},
+        {name: '交易成功',num:2},
+        {name: '交易失败',num:2}
+      ]
+    };
+  },
+  computed: {
+
+    },
+  mounted() {
+
+  },
+  methods: {
+    ...mapActions([]),
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+    .orders {
+        display: flex;
+        height: 100px;
+        justify-content: space-between;
+    }
+    .order-cell {
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        &:not(:last-child) {
+            position: relative;
+            &::after {
+                content: '';
+                position: absolute;
+                width: 1px;
+                height: 80px;
+                top: 10px;
+                right: 0;
+                background: linear-gradient(#fff, #F0F0F0,#fff)
+            }
+        }
+    }
+    .order-num {
+        font-family: 'Alte DIN 1451 Mittelschrift';
+        font-size: 32px;
+        text-align: center;
+    }
+    .order-text {
+        padding-top: 10px;
+        font-size: 24;
+        color: #444;
+        text-align: center;
+    }
+</style>

+<template>
+    <div class="marquee_box">
+            <ul class="marquee_list" :class="{marquee_top:animate}">
+                    <li v-for="(item,index) in lists" :key="index">
+                            {{item.name}}
+                    </li>
+            </ul>
+    </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapActions} = createNamespacedHelpers('home/mine');
+
+export default {
+  name: 'scroll',
+  props: {
+
+  },
+  data() {
+    return {
+      animate:false,
+        lists:[
+            {name:'公告1'},  
+            {name:'公告2'}
+        ],
+    };
+  },
+  computed: {
+
+    },
+  mounted() {
+
+  },
+  created(){
+      if(this.lists.length > 1) {
+          setInterval(this.showMarquee, 3000)
+      }
+       
+},
+  methods: {
+    ...mapActions([]),
+     showMarquee() {
+        let that = this
+        that.animate = true;
+        setTimeout(()=>{
+            that.lists.push(that.lists[0]);
+            that.lists.shift();
+            that.animate = false;
+        },500)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.marquee_box {
+    position: relative;
+    width: 100%;
+    height: 90px;
+    overflow: hidden;
+}
+
+.marquee_list {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.marquee_top {
+    transition: all 0.8s;
+    margin-top: -90px
+}
+
+.marquee_list li {
+    height: 90px;
+    line-height: 90px;
+    font-size: 24px;
+    color: #D0021B;
+    padding-left: 20px;
+}
+</style>

+<template>
+  <div class="tab-item" :class="itemClass">
+      <div class="title" :class="titleClass">标题</div>
+      <slot><div class="text">文字</div></slot>
+      <i class="cubeic-arrow"></i>
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapActions} = createNamespacedHelpers('home/mine');
+
+export default {
+  name: 'tabItem',
+  props: {
+      noLine: {
+          type: Boolean,
+          default: false
+      },
+      small: {
+          type: Boolean,
+          default: false
+      },
+      grey: {
+          type: Boolean,
+          default: false
+      },
+      titleBold: {
+          type: Boolean,
+          default: false
+      },
+      titleSmall: {
+          type: Boolean,
+          default:false
+      }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  computed: {
+      itemClass() {
+        return {
+          'line': !this.noLine,
+          'grey': this.grey,
+          'small': this.small
+        }
+      },
+      titleClass() {
+          return {
+              'title-bold': this.titleBold,
+              'title-size': this.titleSmall
+          }
+      }
+    },
+  mounted() {
+
+  },
+  methods: {
+    ...mapActions([]),
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-item {
+    display: flex;
+    width: 100%;
+    height: 120px;
+    line-height: 120px;
+}
+.small {
+    height: 90px;
+    line-height: 90px;
+}
+.grey {
+    background-color: #F5F7F9;
+}
+.line {
+    border-bottom: solid 1px #eee;
+}
+.title {
+    flex: 1;
+    font-size: 32px;
+    color: black;
+    min-width: 65px;
+}
+.title-bold {
+    font-weight: bold;
+}
+.title-size {
+    font-size: 28px;
+}
+.text {
+    font-family: 'Alte DIN 1451 Mittelschrift';
+    color: black;
+    text-align: right;
+    font-size: 32px;
+}
+.cubeic-arrow {
+    color: #D8D8D8;
+    margin-left: 10px;
+    font-size: 32px;
+}
+
+</style>

 export default [{
   name: 'mine',
   path: '/xianyu/home/mine.html',
-  component: () => import(/* webpackChunkName: "home" */ './mine')
+  component: () => import(/* webpackChunkName: "mine" */ './mine')
 }];

 <template>
   <LayoutApp :show-back="true">
     <div class="body" ref="body">
-        <div>username: {{username}}</div>
-      <!-- <List></List> -->
+      <tab-item noLine titleBold titleSmall small grey>
+        <scroll></scroll>
+      </tab-item>
+
+      <tab-item noLine titleBold></tab-item>
+      <order></order>
+      <tab-item></tab-item>
+
     </div>
   </LayoutApp>
 </template>
 
 <script>
-// import List from './components/list';
-import { createNamespacedHelpers } from 'vuex'
+import tabItem from './components/tabItem';
+import order from './components/order';
+import scroll from './components/scroll';
+
+import { createNamespacedHelpers } from 'vuex';
+
 const {mapState} = createNamespacedHelpers('home/mine');
 export default {
     computed:{
@@ -18,21 +28,18 @@ export default {
         })
     },
   components: {
-    // List
+    tabItem,
+    order,
+    scroll
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
-}
-
 .body {
   height: 100%;
   overflow-y: auto;
+  background-color: white;
+  padding: 0 40px;
 }
 </style>