订单详情完成

 <template>
-  <div class="order-list">
-    <Card class="order-list-card">
+  <Card>
     <div class="search">
       <el-form
         class="count-form"
@@ -82,10 +81,7 @@
       <el-table-column align="center" label="操作" fixed="right">
         <template v-slot="scope">
           <div>
-              <el-button
-                type="text"
-                size="small"
-                @click="handleDetail(scope.row)"
+            <el-button type="text" size="small" @click="handleDetail(scope.row)"
               >查看</el-button
             >
           </div>
@@ -97,7 +93,6 @@
       :total="total"
     ></FooterPaginationfrom>
   </Card>
-  </div>
 </template>
 
 <script>
@@ -164,15 +159,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.order-list {
-  .order-list-card {
-    .search {
+.search {
   .count-form {
     margin-top: 20px;
     margin-left: 20px;
   }
-    }
-    .status {
+}
+.status {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -187,8 +180,6 @@ export default {
   .yellow {
     background-color: #ffaa00;
   }
-    }
-  }
 }
 .flex-end {
   display: flex;

 <template>
-  <Card>dsads</Card>
+  <div class="details">
+    <div class="top mb10">
+      <Card class="info">
+        <h4 class="mb10">客户信息</h4>
+        <div class="item">姓名：刘非法</div>
+        <div class="item">性别：男</div>
+        <div class="item">证件类型：身份证</div>
+        <div class="item">证件号：232303199101294123</div>
+        <div class="item">微信昵称：</div>
+        <div class="item">状态：交流中</div>
+        <div class="item">年收入：7万</div>
+        <div class="item">地址：北京</div>
+      </Card>
+      <div class="video-wrapper">
+        <VideoPlayer></VideoPlayer>
+      </div>
+    </div>
+    <Card class="mb10">
+      <el-form label-width="50px" :model="form">
+        <el-form-item label="备注">
+          <el-input
+            type="textarea"
+            placeholder="请输入"
+            maxlength="200"
+            show-word-limit
+            :autosize="{ minRows: 4, maxRows: 6 }"
+            v-model.trim="form.remarks"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </Card>
+    <div class="bottom">
+      <el-button type="primary" @click="handleSubmit">提交</el-button>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import VideoPlayer from '@/components/videoPlayer'
+
+export default {
+  components: {
+    VideoPlayer
+  },
+  data() {
+    return {
+      form: {
+        remarks: ''
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {}
+  }
+}
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.details {
+  display: flex;
+  flex-flow: column nowrap;
+  .top {
+    display: flex;
+    flex-flow: row nowrap;
+    .info {
+      width: 330px;
+      margin-right: 10px;
+      .item {
+        margin-bottom: 5px;
+        font-size: 14px;
+      }
+    }
+    .video-wrapper {
+      flex: 1 0 300px;
+      // width: 300px;
+      height: 400px;
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>