开发详情页

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebPackConfiguration">
+    <option name="mode" value="DISABLED" />
+  </component>
+</project>

project/src/components/customManage/manage.vue

@@ -89,10 +89,10 @@
     </el-table>
 
     <el-drawer
-      size="50%"
+      :size="drawerSize"
       :visible.sync="detialDrawer"
       :with-header="false">
-      <detial></detial>
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer"></detial>
     </el-drawer>
   </div>
 </template>
@@ -109,6 +109,7 @@ export default {
   components: { selfInput, selfCustomerservice, enterpriseTag, datePicker, selfChannel, selfGender, lossBody, detial },
   data () {
     return {
+      drawerSize:'60%',
       detialDrawer: false,
       pageOptions: [
         { name: '全部', id: 1 },
@@ -148,6 +149,12 @@ export default {
     }
   },
   methods: {
+    changeDrawerSize(){
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer(){
+      this.detialDrawer = false
+    },
     init () {
       console.log(this.input_keyword)
     },
@@ -155,6 +162,7 @@ export default {
 
     },
     showDetial(){
+      this.drawerSize = '60%'
       this.detialDrawer = true
     }
   }

project/src/components/detials/customerProfile.vue

@@ -1,43 +1,88 @@
 <template>
-  <div>
+<!--  v-loading="loading"-->
+  <div >
     <div class="bigTitle">
       <i class="el-icon-user-solid"></i>
       <span>添加客服信息</span>
     </div>
     <div class="tableBox_detial">
-      <el-table
-        :data="tableData"
-        :header-cell-class-name="headerClassName"
-        border
-        style="width: 100%">
-        <el-table-column
-          label="所属员工"
-          class-name="self-column">
-          <template >
-            <div class="flex">
-              <img src="@/assets/img/userDefault.png" alt="" width="40px">
-              <span>莲雾</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          class-name="self-column"
-          prop="name"
-          label="其他客户来源">
-        </el-table-column>
-        <el-table-column
-          class-name="self-column"
-          prop="address"
-          label="添加时间">
-        </el-table-column>
-        <el-table-column
-          class-name="self-column"
-          prop="address"
-          label="最近沟通">
-        </el-table-column>
-      </el-table>
+      <el-skeleton :loading="loading" animated>
+        <template slot="template">
+          <el-skeleton-item animated style="height: 100px"/>
+        </template>
+        <template>
+          <el-table
+            :data="tableData"
+            :header-cell-class-name="headerClassName"
+            border
+            style="width: 100%">
+            <el-table-column
+              label="所属员工"
+              class-name="self-column">
+              <template >
+                <div class="flex-align-center">
+                  <img src="@/assets/img/userDefault.png" alt="" width="40px">
+                  <span class="lMar8">莲雾</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              class-name="self-column"
+              prop="name"
+              label="其他客户来源">
+            </el-table-column>
+            <el-table-column
+              class-name="self-column"
+              prop="address"
+              label="添加时间">
+            </el-table-column>
+            <el-table-column
+              class-name="self-column"
+              prop="address"
+              label="最近沟通">
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-skeleton>
     </div>
 
+    <div class="bigTitle tMar30">
+      <i class="el-icon-user-solid"></i>
+      <span>基本信息</span>
+      <span style="color: #898D92;font-weight: 400;margin-left: 6px">所属员工可在「侧边栏-客户画像」中进行编辑</span>
+    </div>
+    <el-skeleton :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item animated style="height: 140px"/>
+      </template>
+      <template>
+        <div class="tableBox_detial flexWrap" style="border: 1px solid #D2D2D2">
+          <div v-for="(b,bidx) in basicInfo" :key="bidx" class="basic_item"
+               :style="[{borderBottom:(b.name == '企业' || b.name == '微博') ? 'none' : '' },{borderRight:bidx%2!==0 ? 'none' : ''}]">
+            <div class="name">{{b.name}}</div>
+            <div class="value">
+              <template v-if="b.name == '生日'">
+                <el-date-picker class="ipt"
+                                v-focus
+                                v-if="b.itpShow"
+                                @blur="iptBlur(bidx)"
+                                v-model="b.value"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                :placeholder="'请输入'+b.name">
+                </el-date-picker>
+                <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
+              </template>
+              <template v-else>
+                <el-input class="ipt" v-focus v-model="b.value" :placeholder="'请输入'+b.name" v-if="b.itpShow" @blur="iptBlur(bidx)"></el-input>
+                <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </el-skeleton>
+
   </div>
 </template>
 
@@ -46,16 +91,101 @@ export default {
   name: "customerProfile",
   data(){
     return{
+      loading:false,
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
-      }]
+      }],
+      basicInfo:[
+        {
+          name:'性别',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'地址',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'年龄',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'生日',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'描述',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'邮箱',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'电话',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'职位',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'QQ',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'来源',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'企业',
+          key:'sex',
+          value:'',
+          itpShow:false
+        },
+        {
+          name:'微博',
+          key:'sex',
+          value:'',
+          itpShow:false
+        }
+      ]
+    }
+  },
+  directives:{
+    focus:{
+      inserted : function (el){
+        el.querySelector('input').focus()
+      }
     }
   },
   methods:{
     headerClassName(){
       return 'headerClass'
+    },
+    iptBlur(index){
+      this.basicInfo[index].itpShow = false
     }
   }
 }
@@ -67,6 +197,43 @@ export default {
     font-weight: 400;
     color: #666;
   }
+  .basic_item{
+    width: 50%;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    line-height: 44px;
+    border-bottom: 1px solid #D2D2D2;
+    border-right: 1px solid #D2D2D2;
+    .value{
+      padding: 0 20px;
+      width: 100%;
+      .ipt{
+        width: 80%;
+        .el-input__inner{
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+      .text{
+        width: 80%;
+        height: 30px;
+        line-height: 30px;
+        display:inline-block;
+      }
+      .text:hover{
+        border-bottom: 1px solid #333;
+        cursor: text;
+      }
+    }
+    .name{
+      color: #666;
+      background: #FBFBFB;
+      width: 30%;
+      padding-left: 20px;
+      border-right: 1px solid #D2D2D2;
+    }
+  }
 }
 </style>
 
@@ -76,6 +243,7 @@ export default {
   font-size: 14px;
   margin-left: 5px;
   font-weight: 600;
+  margin-bottom: 10px;
 }
 .tableBox_detial{
   font-size: 14px;

project/src/components/detials/customerStatus.vue

@@ -1,13 +1,130 @@
 <template>
+  <div v-loading="loading" class="con">
+    <div v-for="(l,idx) in list" :key="idx">
+      <div class="dayDate">{{l.date}}{{l.week}}</div>
+      <div v-for="(s,sIdx) in l.sub" :key="sIdx" class="subBox" :class="sIdx==0 ? 'tMar17' : ''">
+        <div class="subBox_line">
+          <i class="el-icon-price-tag f16"></i>
+          <div class="splitLine"></div>
+        </div>
+        <div class="lMar8">
+          <div class="dayTime">{{s.time}}</div>
+          <div class="behavior_box">
+            <div class="behavior">{{s.opa}}</div>
+            <div class="behavior_detial"><span class="fWeight600">{{s.name1}}</span> 添加了 <span class="fWeight600">{{s.name2}}</span> 为好友</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 
 </template>
 
 <script>
 export default {
-  name: "customerStatus"
+  name: "customerStatus",
+  data(){
+    return{
+      loading:false,
+      list:[
+        {
+          date:'2022-03-18',
+          week:'星期三',
+          sub:[
+            {
+              time:'10.45',
+              opa:'添加好友',
+              name1:'黄金菊',
+              name2:'蛋卷',
+            }
+          ]
+        },
+        {
+          date:'2022-03-18',
+          week:'星期三',
+          sub:[
+            {
+              time:'10.45',
+              opa:'添加好友',
+              name1:'黄金菊',
+              name2:'蛋卷',
+            },
+            {
+              time:'10.45',
+              opa:'添加好友',
+              name1:'黄金菊',
+              name2:'蛋卷',
+            },
+            {
+              time:'10.45',
+              opa:'添加好友',
+              name1:'黄金菊',
+              name2:'蛋卷',
+            }
+          ]
+        },
+        {
+          date:'2022-03-18',
+          week:'星期三',
+          sub:[
+            {
+              time:'10.45',
+              opa:'添加好友',
+              name1:'黄金菊',
+              name2:'蛋卷',
+            }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.con{
+  .dayDate{
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-top: 20px;
+  }
+  .subBox{
+    display: flex;
+    align-items: flex-start;
+    .dayTime{
+      font-size: 14px;
+      color: #999;
+    }
+    .subBox_line{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .splitLine{
+        width: 1px;
+        height: 120px;
+        border-left: 1px dashed #979797;
+      }
+    }
+
+    .behavior_box{
+      margin-top: 15px;
+      background: #F5FFFD;
+      border: 1px solid #00B38A;
+      padding: 20px 18px 25px;
+      .behavior{
+        font-size: 16px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 10px;
+      }
+      .behavior_detial{
+
+      }
+    }
+  }
 
+
+}
 </style>

project/src/components/detials/index.vue

@@ -1,46 +1,181 @@
 <template>
   <div class="detialCon">
     <div class="title padCon">
-      <div>客户详情</div>
+      <div class="flex">
+        客户详情
+        <span class="lMar8">
+          <el-tooltip effect="light" content="上一位" placement="bottom">
+            <i class="el-icon-arrow-left f16"></i>
+          </el-tooltip>
+        </span>
+        <span class="lMar8">
+           <el-tooltip effect="light" content="下一位" placement="bottom">
+            <i class="el-icon-arrow-right f16"></i>
+          </el-tooltip>
+        </span>
+      </div>
       <div>
-        <i class="el-icon-plus"></i>
-        <i class="el-icon-close"></i>
+        <i class="el-icon-plus pointer" @click="changeWidth"></i>
+        <i class="el-icon-close pointer" @click="close"></i>
       </div>
     </div>
     <div class="splitLine"></div>
-    <div class="infoBox padCon">
-      <div><img src="@/assets/img/userDefault.png" alt="" ></div>
-      <div>
-        <div class="name">
-          <span>我回去了</span>
-          <span class="bright">@微信</span>
-        </div>
-        <div class="lable">
-          <span>企业标签:</span>
-          <span class="lable_con">开发</span>
-          <span class="bright"><i class="el-icon-edit"></i> 编辑</span>
-        </div>
-        <div class="lable">
-          <span>个人标签:</span>
-          <span class="bright"><i class="el-icon-edit"></i> 编辑</span>
-        </div>
-      </div>
-
+    <div class= "padCon">
+      <el-skeleton :loading="loading" animated>
+        <template slot="template">
+          <div class="infoBox">
+            <el-skeleton-item variant="image" style="width: 100px;height: 100px;margin-right: 10px;"/>
+            <div style="width: 30%">
+              <el-skeleton-item animated/>
+              <el-skeleton-item class="tMar20" animated/>
+              <el-skeleton-item class="tMar20" animated/>
+            </div>
+          </div>
+        </template>
+        <template>
+          <div class="infoBox">
+            <div><img src="@/assets/img/userDefault.png"  alt="" ></div>
+            <div>
+              <div class="name">
+                <span>我回去了</span>
+                <span class="bright">@微信</span>
+              </div>
+              <div class="lable">
+                <span>企业标签:</span>
+                <span class="lable_con">开发</span>
+                <span class="bright" @click="comLableShow = true"><i class="el-icon-edit"></i> 编辑</span>
+              </div>
+              <div class="lable">
+                <span>个人标签:</span>
+                <span class="bright" @click="selfLableShow = true"><i class="el-icon-edit"></i> 编辑</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-skeleton>
     </div>
     <div class="splitLine"></div>
     <div class="tabCon padCon">
       <div class="tabCon_bar">
         <div class="rMar60 pointer" v-for="t in tabList" :key="t.id" :class="acIdx == t.id ? 'ac_css' : ''" @click="acIdx = t.id">
-          <div style="margin:10px 10px 20px">{{t.name}}</div>
+          <div style="margin:10px 10px 15px">{{t.name}}</div>
           <div :class="acIdx == t.id ? 'bor_line_ac' : 'bor_line'"></div>
         </div>
       </div>
       <customerProfile v-if="acIdx == 0"></customerProfile>
       <customerStatus v-if="acIdx == 1"></customerStatus>
-      <chatRecord v-if="acIdx == 2"></chatRecord>
-      <chatGroup v-if="acIdx == 3"></chatGroup>
+<!--      <chatRecord v-if="acIdx == 2"></chatRecord>-->
+<!--      <chatGroup v-if="acIdx == 3"></chatGroup>-->
       <order v-if="acIdx == 4"></order>
     </div>
+
+    <el-dialog
+      title="选择企业标签"
+      :visible.sync="comLableShow"
+      :append-to-body="true"
+      class="addLable_dialog"
+      width="30%">
+      <div class="addLableBox">
+        <div class="add" @click="iptshow = true,addLableVal = ''">+ 添加</div>
+        <el-input v-if="iptshow" v-focus class="ipt" v-model="addLableVal" placeholder="请输入标签" @blur="iptBlur"></el-input>
+        <div class="lableItem" v-for="(l,lidx) in lableArr" :key="l.id" :class="lableArr_checked.indexOf(l.id) == -1 ? '' : 'lableItemAc'" @click="switchLable(l.id)">{{l.name}}</div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div class="addLableGroup" @click="lableGroup = true">
+          +新建标签组
+        </div>
+        <div>
+          <el-button size="mini" @click="comLableShow = false">取 消</el-button>
+          <el-button size="mini" type="primary" @click="comLableShow = false">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="新建企业标签组"
+      :visible.sync="lableGroup"
+      :append-to-body="true"
+      class="addLable_dialog"
+      width="30%">
+      <div class="groupCon">
+        <div class="group_item">
+          <div class="lable">标签组名称:</div>
+          <div class="opaArea">
+            <el-input class="ipt_group" v-model="groupName" placeholder="请输入标签组名称"></el-input>
+          </div>
+        </div>
+        <div class="group_item">
+          <div class="lable">可见范围:</div>
+          <div class="opaArea">
+            <el-radio-group v-model="scopeVal">
+              <el-radio :label="0">全部员工</el-radio>
+              <el-radio :label="1">部门可用</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="group_item" v-if="scopeVal==1">
+          <div class="lable">选择可用部门:</div>
+          <div class="pointer" style="padding: 8px 12px;border: 1px solid #D2D2D2;margin-left: 20px">
+            + 添加部门
+          </div>
+        </div>
+        <div class="group_item" style="align-items: baseline;margin-top: 10px">
+          <div class="lable">标签名称:</div>
+          <div class="opaArea">
+            <div v-for="(m,mIdx) in moreLable" :key="m.id" class="flex">
+              <el-input class="ipt_group tMar10" v-model="m.name" placeholder="请输入标签名称"></el-input>
+              <span v-if="moreLable&&moreLable.length>1" class="flex">
+                <span class="minusIptGroup" @click="moreLable.splice(mIdx,1)">-</span>
+                <i class="el-icon-top f18 lMar8 pointer" :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>
+                <i class="el-icon-bottom f18 lMar8 pointer" :class="mIdx == moreLable.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>
+              </span>
+            </div>
+            <div class="addIptGroup" @click="moreLable.push({id:moreLable.length,name:''})">+ 添加标签</div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button size="mini" @click="lableGroup = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="lableGroup = false">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="个人标签"
+      :visible.sync="selfLableShow"
+      :append-to-body="true"
+      class="addLable_dialog"
+      width="30%">
+
+      <div class="groupCon">
+        <div class="group_item">
+          <div class="lable">性别:</div>
+          <div class="opaArea">
+<!--            <el-select v-model="value" placeholder="请选择">-->
+<!--              <el-option-->
+<!--                v-for="item in sexList"-->
+<!--                :key="item.value"-->
+<!--                :label="item.label"-->
+<!--                :value="item.value">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+          </div>
+        </div>
+        <div class="group_item">
+          <div class="lable">可见范围:</div>
+          <div class="opaArea">
+            <el-radio-group v-model="scopeVal">
+              <el-radio :label="0">全部员工</el-radio>
+              <el-radio :label="1">部门可用</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button size="mini" @click="selfLableShow = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="selfLableShow = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -54,7 +189,21 @@ export default {
   name: "detialIndex",
   data(){
     return{
+      addLableVal:'',
+      lableArr:[
+        {id:0,name:'123'},
+        {id:1,name:'123567'},
+        {id:2,name:'123433'},
+        {id:3,name:'123778'},
+        {id:4,name:'12993'}
+      ],
+      lableArr_checked:[1,3],
+      comLableShow:false,
+      lableGroup:false,
+      selfLableShow:false,
       acIdx:0,
+      loading:false,
+      iptshow:false,
       tabList:[
         {
           id:0,
@@ -64,30 +213,181 @@ export default {
           id:1,
           name:'客户动态'
         },
-        {
-          id:2,
-          name:'聊天记录'
-        },
-        {
-          id:3,
-          name:'所在群聊'
-        },
+        // {
+        //   id:2,
+        //   name:'聊天记录'
+        // },
+        // {
+        //   id:3,
+        //   name:'所在群聊'
+        // },
         {
           id:4,
           name:'订单'
         },
+      ],
+      scopeVal:0,
+      groupName:'',
+      moreLable:[
+        {id:0,name:''}
       ]
     }
   },
+  directives:{
+    focus:{
+      inserted : function (el){
+        el.querySelector('input').focus()
+      }
+    }
+  },
   components:{
     customerProfile,
     customerStatus,
     chatGroup,
     chatRecord,
     order,
+  },
+  methods:{
+    changeWidth(){
+      this.$emit('changeDrawerSize')
+    },
+    close(){
+      this.$emit('closeDrawer')
+    },
+    // 上移
+    upClick(index) {
+      if(index == 0){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
+    },
+    // 下移
+    downClick(index) {
+      if(index == this.moreLable.length-1){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
+
+    iptBlur(){
+      this.iptshow = false
+      if(this.addLableVal){
+        this.lableArr.push({id:this.lableArr.length,name:this.addLableVal})
+      }
+    },
+    switchLable(id){
+      if(this.lableArr_checked.indexOf(id) == -1){
+        this.lableArr_checked.push(id)
+      }else{
+        this.lableArr_checked.forEach((i,idx)=>{
+          if(i == id){
+            this.lableArr_checked.splice(idx,1)
+          }
+        })
+      }
+
+    }
   }
 }
 </script>
+<style lang="scss">
+.addLable_dialog{
+  .addLableBox{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .add{
+      padding: 4px 10px;
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #D2D2D2;
+      cursor: pointer;
+      margin-right: 8px;
+      margin-top: 10px;
+    }
+    .lableItem{
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #D2D2D2;
+      padding: 4px 10px;
+      background-color: #fafafa;
+      margin-right: 8px;
+      cursor: pointer;
+      margin-top: 10px;
+    }
+    .lableItem:hover{
+      //color: #00B38A;
+      border: 1px solid #00B38A;
+    }
+    .lableItemAc{
+      background-color: rgba(0,179,138,0.4);
+      border: 1px solid rgba(0,179,138,0.4);
+      color: #00B38A;
+    }
+    .ipt{
+      width: 120px;
+      margin-right: 8px;
+      margin-top: 10px;
+      .el-input__inner{
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+  .dialog-footer{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .addLableGroup{
+      font-size: 14px;
+      color: #00B38A;
+      cursor: pointer;
+    }
+  }
+  .groupCon{
+    .group_item{
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      .lable{
+        width: 30%;
+        text-align: right;
+      }
+      .opaArea{
+        margin-left: 20px;
+        width: 50%;
+        .addIptGroup{
+          font-size: 12px;color: #00B38A;cursor: pointer;margin-top: 10px
+        }
+        .minusIptGroup{
+          display: inline-block;
+          border: 1px solid #333;
+          border-radius: 50%;
+          font-size: 18px;
+          width: 16px;
+          height: 16px;
+          text-align: center;
+          line-height: 12px;
+          margin-left: 10px;
+          color: #333;
+          cursor: pointer;
+          flex-shrink: 0;
+        }
+        .disCss{
+          color: rgba(0,0,0,.25)
+        }
+      }
+    }
+    .ipt_group{
+      .el-input__inner{
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+}
+
+</style>
 
 <style lang="scss">
 .detialCon{
@@ -97,6 +397,7 @@ export default {
   .title{
     position: sticky;
     top: 0;
+    z-index: 2;
     background-color: #fff;
     display: flex;
     align-items: center;
@@ -104,6 +405,15 @@ export default {
     font-weight: 600;
     color: #333;
     font-size: 20px;
+    .el-icon-arrow-left,.el-icon-arrow-right{
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      background: #f7f8fc;
+      border-radius: 2px;
+      cursor: pointer;
+    }
   }
   .splitLine{
     width: 100%;
@@ -172,5 +482,6 @@ export default {
 
   }
 
+
 }
 </style>

project/src/components/detials/order.vue

@@ -1,13 +1,216 @@
 <template>
-
+  <div class="con" v-loading="loading">
+    <div class="thead">
+      <div class="thead_item" v-for="(t_h,thidx) in theadList" :key="thidx">{{t_h.name}}</div>
+    </div>
+    <div class="tbody">
+      <div class="tbody_item" v-for="(l,lidx) in list" :key="lidx">
+        <div>{{l.id}}</div>
+        <div>{{l.date}}</div>
+        <div>{{l.status == 1 ? '已付款' : '未付款'}}</div>
+        <div class="c-00B38A fWeight600">￥{{l.amount}}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "order"
+  name: "order",
+  data(){
+    return{
+      loading:false,
+      theadList:[
+        {name:'订单ID'},
+        {name:'创建时间'},
+        {name:'付款状态'},
+        {name:'订单金额'},
+      ],
+      list:[
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+       {
+         id:'12888888888888899',
+           date:'2022-03-18',
+         status:1,
+         amount:'34'
+       },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },     {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        },
+        {
+          id:'12888888888888899',
+          date:'2022-03-18',
+          status:1,
+          amount:'34'
+        }
+
+      ]
+    }
+
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.con{
+  position: relative;
+  .thead{
+    background: #FBFBFB;
+    border: 1px solid #D2D2D2;
+    font-size: 14px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 60px;
+    .thead_item{
+      width: 25%;
+      padding: 6px;
+      text-align: center;
+    }
+  }
+  .tbody{
+    .tbody_item{
+      margin-top: 20px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      color: #333;
+      font-size: 13px;
+      div{
+        width: 25%;
+      }
+      .c-00B38A{
+        color: #00B38A;
+      }
+    }
+  }
+}
 </style>

project/src/style/self.scss

@@ -318,6 +318,11 @@
   align-items: center;
   justify-content: space-between;
 }
+.flexWrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
 .flex-column{
   display: flex;
   flex-direction: column;