订单详情完成

 <template>
-  <div class="order-list">
-    <Card class="order-list-card">
-      <div class="search">
-        <el-form
-          class="count-form"
-          ref="ruleForm"
-          size="mini"
-          inline
-          :model="ruleForm"
-        >
-          <el-form-item label="营销员姓名" prop="customName">
-            <el-input
-              v-model.trim="ruleForm.customName"
-              placeholder="请输入营销员姓名"
-              maxlength="21"
-            >
-              <i slot="prefix" class="el-icon-search"></i
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="营销员工号" prop="customId">
-            <el-input
-              v-model.trim="ruleForm.customId"
-              placeholder="请输入营销员工号"
-              maxlength="21"
-            >
-              <i slot="prefix" class="el-icon-search"></i
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="展业开始时间" prop="times">
-            <el-date-picker
-              v-model="ruleForm.times"
-              type="daterange"
-              value-format="yyyy-MM-dd"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="flex-end mb10">
-        <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
-        <el-button size="mini" @click="onReset">重置</el-button>
-      </div>
-      <el-table
-        class="mb10"
-        :data="tableData"
-        border
-        style="width: 100%"
-        v-loading="loading"
+  <Card>
+    <div class="search">
+      <el-form
+        class="count-form"
+        ref="ruleForm"
+        size="mini"
+        inline
+        :model="ruleForm"
+      >
+        <el-form-item label="营销员姓名" prop="customName">
+          <el-input
+            v-model.trim="ruleForm.customName"
+            placeholder="请输入营销员姓名"
+            maxlength="21"
+          >
+            <i slot="prefix" class="el-icon-search"></i
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="营销员工号" prop="customId">
+          <el-input
+            v-model.trim="ruleForm.customId"
+            placeholder="请输入营销员工号"
+            maxlength="21"
+          >
+            <i slot="prefix" class="el-icon-search"></i
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="展业开始时间" prop="times">
+          <el-date-picker
+            v-model="ruleForm.times"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="flex-end mb10">
+      <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
+      <el-button size="mini" @click="onReset">重置</el-button>
+    </div>
+    <el-table
+      class="mb10"
+      :data="tableData"
+      border
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <el-table-column align="center" prop="orderId" label="序号" fixed>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="createTime"
+        label="客户姓名"
+        width="160"
+      >
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="callTime"
+        label="客户手机号"
+        width="160"
       >
-        <el-table-column align="center" prop="orderId" label="序号" fixed>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="createTime"
-          label="客户姓名"
-          width="160"
-        >
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="callTime"
-          label="客户手机号"
-          width="160"
-        >
-        </el-table-column>
-        <el-table-column align="center" prop="partnerDesc" label="管理员姓名">
-        </el-table-column>
-        <el-table-column align="center" prop="customerName" label="营销员工号">
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="customerPhoneNo"
-          label="展业时长"
-          width="160"
-        >
-        </el-table-column>
-        <el-table-column align="center" prop="callType" label="展业开始时间">
-        </el-table-column>
-        <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
-              >
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <FooterPaginationfrom
-        @pager="handleGetPager"
-        :total="total"
-      ></FooterPaginationfrom>
-    </Card>
-  </div>
+      </el-table-column>
+      <el-table-column align="center" prop="partnerDesc" label="管理员姓名">
+      </el-table-column>
+      <el-table-column align="center" prop="customerName" label="营销员工号">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="customerPhoneNo"
+        label="展业时长"
+        width="160"
+      >
+      </el-table-column>
+      <el-table-column align="center" prop="callType" label="展业开始时间">
+      </el-table-column>
+      <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
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <FooterPaginationfrom
+      @pager="handleGetPager"
+      :total="total"
+    ></FooterPaginationfrom>
+  </Card>
 </template>
 
 <script>
@@ -164,30 +159,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.order-list {
-  .order-list-card {
-    .search {
-      .count-form {
-        margin-top: 20px;
-        margin-left: 20px;
-      }
-    }
-    .status {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .dot {
-        margin-right: 6px;
-        display: inline-block;
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        background-color: #34c780;
-      }
-      .yellow {
-        background-color: #ffaa00;
-      }
-    }
+.search {
+  .count-form {
+    margin-top: 20px;
+    margin-left: 20px;
+  }
+}
+.status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .dot {
+    margin-right: 6px;
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #34c780;
+  }
+  .yellow {
+    background-color: #ffaa00;
   }
 }
 .flex-end {

 <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>