xcx

src/components/orderListItem/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="orderListItem">
+    <div class="title flex-h">
+      <div class="orange">
+        <i class="iconfont icon-dengdai"></i><br>
+        <span>制作中</span>
+      </div>
+      <div class="flex-item">
+        <div>
+          <span>悦见山</span>
+        </div>
+      </div>
+      <span>02/16 14:20</span>
+    </div>
+    <div class="line">
+      <div>
+        <i v-for="(iconItem,iconIndex) in 40" :key="iconIndex"></i>
+      </div>
+    </div>
+    <div class="list flex-h">
+      <div class="flex-item">
+        <ul>
+          <li>
+            <span>商品名称</span>
+            <div>
+              <span>￥20 x 2</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/orderListItem/page.scss

@@ -0,0 +1,120 @@
+.orderListItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .title{
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    &>div:nth-child(1){
+      width: .5rem;
+      text-align: center;
+      *{
+        display: inline-block;
+        font-size: .1rem;
+        line-height: .17rem;
+      }
+      i{
+        font-size: .15rem;
+      }
+    }
+    &>div:nth-child(1).orange{
+      *{
+        color: #fc6243;
+      }
+    }
+    &>div:nth-child(1).grey{
+      *{
+        color: #ccc;
+      }
+    }
+    &>div:nth-child(1).green{
+      *{
+        color: #63c86f;
+      }
+    }
+    &>div:nth-child(2){
+      margin-right: .1rem;
+      &>div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          display: block;
+          font-size: .14rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    &>span{
+      font-size: .11rem;
+      color: #666;
+      margin-right: .15rem;
+    }
+  }
+  .line{
+    width: 100%;
+    height: .2rem;
+    position: relative;
+    overflow: hidden;
+    &>div{
+      width: 100%;
+      position: absolute;
+      overflow: hidden;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%) translateX(-.035rem);
+      -webkit-transform: translateY(-50%) translateX(-.035rem);
+      font-size: 0;
+      white-space: nowrap;
+      i{
+        display: inline-block;
+        width: .07rem;
+        height: .07rem;
+        position: relative;
+        overflow: hidden;
+        border-radius: 100%;
+        background: #eee;
+        margin-right: .1rem;
+      }
+    }
+  }
+  .list{
+    &>div{
+      margin: 0 .15rem;
+      &>ul{
+        margin: .06rem auto;
+        &>li{
+          font-size: 0;
+          white-space: nowrap;
+          &>*{
+            display: inline-block;
+            vertical-align: middle;
+            width: 50%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &>span{
+            line-height: .26rem;
+            font-size: .14rem;
+            color: #555;
+          }
+          &>div{
+            text-align: right;
+            font-size: 0;
+            span{
+              font-size: .11rem;
+              line-height: .26rem;
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/topCaseInfo/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="topCaseInfo flex-h">
+    <i class="iconfont icon-dingwei"></i>
+      <span>{{data.caseName}}</span>
+      <a v-if="data.showSelect" @click="selectCase">请选择</a>
+      <div class="flex-item">
+        <span>{{data.userName}}您好！</span>
+      </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    selectCase () { // 选择案场
+      this.$emit('selectCase')
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/topCaseInfo/page.scss

@@ -0,0 +1,31 @@
+.topCaseInfo{
+  align-items: center;
+  background: rgba(0, 0, 0, .3);
+  padding: .05rem 0;
+  &>*{
+    margin-left: .05rem;
+    line-height: .2rem;
+    font-size: .12rem;
+    color: #fff;
+  }
+  i{
+    font-size: .15rem;
+  }
+  a{
+    color: #fb6b2f;
+    text-decoration: underline;
+    margin-left: .1rem;
+  }
+  &>*:first-child{
+    margin-left: .2rem;
+  }
+  &>div{
+    text-align: right;
+    margin-right: .2rem;
+    font-size: 0;
+    span{
+      font-size: .12rem;
+      color: #fff;
+    }
+  }
+}

src/module/user/mainPage/coffeeIndex/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="mainPage flex-v">
-    <div class="top flex-h">
-      <i class="iconfont icon-dingwei"></i>
-      <span>{{caseInfo.value}}</span>
-      <a @click="showSelect = true">请选择</a>
-      <div class="flex-item">
-        <span>Alise您好！</span>
-      </div>
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="selectCase"></topCaseInfo>
     </div>
     <div class="content flex-item">
       <div>
@@ -57,11 +52,18 @@
 </template>
 
 <script>
+import topCaseInfo from '../../../../components/topCaseInfo/index'
 
 export default {
   name: '',
   data () {
     return {
+      topCaseInfoData: {
+        caseName: 'xxx',
+        caseId: '',
+        showSelect: true,
+        userName: 'xxx'
+      },
       caseInfo: {
         value: '案场一',
         id: ''
@@ -93,7 +95,7 @@ export default {
 
   },
   components: {
-
+    topCaseInfo,
   },
   created () {
 

src/module/user/mainPage/coffeeIndex/page.scss

@@ -1,34 +1,36 @@
 .mainPage{
   .top{
-    align-items: center;
-    background: rgba(0, 0, 0, .3);
-    padding: .05rem 0;
-    &>*{
-      margin-left: .05rem;
-      line-height: .2rem;
-      font-size: .12rem;
-      color: #fff;
-    }
-    i{
-      font-size: .15rem;
-    }
-    a{
-      color: #fb6b2f;
-      text-decoration: underline;
-      margin-left: .1rem;
-    }
-    &>*:first-child{
-      margin-left: .2rem;
-    }
-    &>div{
-      text-align: right;
-      margin-right: .2rem;
-      font-size: 0;
-      span{
-        font-size: .12rem;
-        color: #fff;
-      }
-    }
+    position: relative;
+    overflow: hidden;
+    // align-items: center;
+    // background: rgba(0, 0, 0, .3);
+    // padding: .05rem 0;
+    // &>*{
+    //   margin-left: .05rem;
+    //   line-height: .2rem;
+    //   font-size: .12rem;
+    //   color: #fff;
+    // }
+    // i{
+    //   font-size: .15rem;
+    // }
+    // a{
+    //   color: #fb6b2f;
+    //   text-decoration: underline;
+    //   margin-left: .1rem;
+    // }
+    // &>*:first-child{
+    //   margin-left: .2rem;
+    // }
+    // &>div{
+    //   text-align: right;
+    //   margin-right: .2rem;
+    //   font-size: 0;
+    //   span{
+    //     font-size: .12rem;
+    //     color: #fff;
+    //   }
+    // }
   }
   .content{
     &>div{

src/module/user/orderList/index.vue

@@ -1,20 +1,43 @@
 <template>
   <div class="mainPage flex-v">
-    1
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData"></topCaseInfo>
+    </div>
+    <div class="flex-item">
+      <div class="flex-h">
+        <div class="flex-item">
+          <ul>
+            <li v-for="(item,index) in 10" :key="index">
+              <orderListItem></orderListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+import orderListItem from '../../../components/orderListItem/index'
 
 export default {
   name: '',
   data () {
     return {
-      
+      topCaseInfoData: {
+        caseName: 'xxx',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
     }
   },
   computed: {},
-  components: {},
+  components: {
+    topCaseInfo,
+    orderListItem,
+  },
   created () { },
   methods: {
     

src/module/user/orderList/page.scss

@@ -1,3 +1,150 @@
 .mainPage{
-  
+  &>div.flex-item{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      &>div{
+        margin: 0 .25rem;
+        overflow: visible;
+        &>ul{
+          width: 100%;
+          position: relative;
+          overflow: visible;
+          margin-bottom: .25rem;
+          &>li{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            border-radius: .1rem;
+            background: #fff;
+            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);
+            padding: .08rem 0;
+            margin: .25rem auto 0;
+            // .title{
+            //   width: 100%;
+            //   position: relative;
+            //   overflow: hidden;
+            //   align-items: center;
+            //   &>div:nth-child(1){
+            //     width: .5rem;
+            //     text-align: center;
+            //     *{
+            //       display: inline-block;
+            //       font-size: .1rem;
+            //       line-height: .17rem;
+            //     }
+            //     i{
+            //       font-size: .15rem;
+            //     }
+            //   }
+            //   &>div:nth-child(1).orange{
+            //     *{
+            //       color: #fc6243;
+            //     }
+            //   }
+            //   &>div:nth-child(1).grey{
+            //     *{
+            //       color: #ccc;
+            //     }
+            //   }
+            //   &>div:nth-child(1).green{
+            //     *{
+            //       color: #63c86f;
+            //     }
+            //   }
+            //   &>div:nth-child(2){
+            //     margin-right: .1rem;
+            //     &>div{
+            //       width: 100%;
+            //       position: relative;
+            //       overflow: hidden;
+            //       span{
+            //         width: 100%;
+            //         display: block;
+            //         font-size: .14rem;
+            //         overflow: hidden;
+            //         text-overflow: ellipsis;
+            //         white-space: nowrap;
+            //       }
+            //     }
+            //   }
+            //   &>span{
+            //     font-size: .11rem;
+            //     color: #666;
+            //     margin-right: .15rem;
+            //   }
+            // }
+            // .line{
+            //   width: 100%;
+            //   height: .2rem;
+            //   position: relative;
+            //   overflow: hidden;
+            //   &>div{
+            //     width: 100%;
+            //     position: absolute;
+            //     overflow: hidden;
+            //     left: 0;
+            //     top: 50%;
+            //     transform: translateY(-50%) translateX(-.035rem);
+            //     -webkit-transform: translateY(-50%) translateX(-.035rem);
+            //     font-size: 0;
+            //     white-space: nowrap;
+            //     i{
+            //       display: inline-block;
+            //       width: .07rem;
+            //       height: .07rem;
+            //       position: relative;
+            //       overflow: hidden;
+            //       border-radius: 100%;
+            //       background: #eee;
+            //       margin-right: .1rem;
+            //     }
+            //   }
+            // }
+            // .list{
+            //   &>div{
+            //     margin: 0 .15rem;
+            //     &>ul{
+            //       margin: .06rem auto;
+            //       &>li{
+            //         font-size: 0;
+            //         white-space: nowrap;
+            //         &>*{
+            //           display: inline-block;
+            //           vertical-align: middle;
+            //           width: 50%;
+            //           overflow: hidden;
+            //           text-overflow: ellipsis;
+            //           white-space: nowrap;
+            //         }
+            //         &>span{
+            //           line-height: .26rem;
+            //           font-size: .14rem;
+            //           color: #555;
+            //         }
+            //         &>div{
+            //           text-align: right;
+            //           font-size: 0;
+            //           span{
+            //             font-size: .11rem;
+            //             line-height: .26rem;
+            //             color: #666;
+            //           }
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
+          }
+        }
+      }
+    }
+  }
 }