【修改】bug

src/components/Common/print-common.vue

@@ -242,7 +242,7 @@ export default {
     }
     .head {
       color: #909399;
-      font-weight: bold;
+      // font-weight: bold;
       .el-col {
         padding-right: 0 !important;
         display: flex;

src/views/basic_data/material/components/modify_list-apply.vue

@@ -972,7 +972,7 @@ export default {
       serviceName: '',
       adminCompanyName: '',
       adminWebsitId: '',
-      remark: '',
+
       detail: [],
       form: {},
       startDate: '',
@@ -1386,6 +1386,7 @@ export default {
       const params = {
         ...this.base,
         items: this.items,
+
         saleTypeId: this.saleTypeId,
         adminWebsitId: this.adminWebsitId,
         serviceId: this.serviceId,

src/views/supply/deliver/components/sum_print.vue

@@ -138,16 +138,17 @@ export default {
     // 1 毫米 [mm] = 3,779 527 559 055 1 像素 [px]
     //  241mm = ~911px
     //  140mm = ~529px
-    // @page{
-    // width: 911px;
-    // height: 529px;
-    // }
     .detail-container {
-    width: 100%;
-    height: auto !important;
-    margin-bottom: 50px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    width: 911px !important;
+    height: 529px !important;
+    margin:auto;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    // right: 0;
+    // bottom: 0;
     // font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
     color: #000 !important;
   }
   .top-container {

src/views/supply/deliver/sum_list.vue

@@ -242,8 +242,9 @@
             <el-table-column align="left" label="月份" prop="month" min-width="100" show-overflow-tooltip></el-table-column>
             <el-table-column align="left" label="项目编码" prop="refEnginRecordNo" min-width="160" show-overflow-tooltip></el-table-column>
             <el-table-column align="left" label="项目名称" prop="refProjectName" min-width="160" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="表头备注" prop="remark" min-width="200" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="备注" prop="invoiceRemark" min-width="200" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="申请发货单备注" prop="remark" min-width="200" show-overflow-tooltip></el-table-column>
+                       <el-table-column align="left" label="表头备注" prop="headerRemark" min-width="200" show-overflow-tooltip></el-table-column>
+           <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column align="left" label="打印次数" prop="printNum" min-width="200" show-overflow-tooltip></el-table-column>
             <el-table-column align="left" label="经销商现金钱包" prop="customerWalletName" min-width="200" show-overflow-tooltip></el-table-column>
             <el-table-column align="left" label="经销商返利钱包" prop="customerWalletName2" min-width="200" show-overflow-tooltip></el-table-column>

src/views/supply/policy/components/retail_examine.vue

@@ -15,15 +15,15 @@
         <el-col :span="8" class="item">
           <div class="label">订单日期</div>
           <div class="value">
-             <el-date-picker
-            v-model="detailData.theTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            style="width: 100%"
-            placeholder="选择日期"
-          >
-          </el-date-picker>
-            </div>
+            <el-date-picker
+              v-model="detailData.theTime"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              style="width: 100%"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">单据状态</div>
@@ -31,7 +31,14 @@
         </el-col>
         <el-col :span="16" class="item">
           <div class="label">备注</div>
-          <div class="value">{{ detailData.remark }}</div>
+          <div class="value">
+            <template v-if="userName">
+              <el-input v-model="detailData.remark" clearable></el-input>
+            </template>
+            <template v-else>
+              {{ detailData.remark }}
+            </template>
+          </div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">业务员</div>
@@ -39,7 +46,6 @@
             <el-select
               v-model="detailData.k3ServiceName"
               placeholder="选择业务员"
-
               style="width: 100%"
               @change="handleUser"
             >
@@ -150,14 +156,14 @@
           min-width="100"
           show-overflow-tooltip
         >
-       <template slot-scope="scope">
-              <!-- v-for="item in scope.row.rebateWallets" -->
+          <template slot-scope="scope">
+            <!-- v-for="item in scope.row.rebateWallets" -->
             <el-tag
-            v-if="scope.row.customerWalletName2"
+              v-if="scope.row.customerWalletName2"
               type="success"
               size="small"
             >
-                {{ scope.row.customerWalletName2 }}
+              {{ scope.row.customerWalletName2 }}
             </el-tag>
           </template>
         </el-table-column>
@@ -186,14 +192,10 @@
           min-width="100"
           show-overflow-tooltip
         >
-            <template slot-scope="scope">
-              <!-- v-for="item in scope.row.rebateWallets" -->
-            <el-tag
-              type="success"
-              size="small"
-
-            >
-                {{ scope.row.customerWalletName }}
+          <template slot-scope="scope">
+            <!-- v-for="item in scope.row.rebateWallets" -->
+            <el-tag type="success" size="small">
+              {{ scope.row.customerWalletName }}
             </el-tag>
           </template>
         </el-table-column>
@@ -204,7 +206,7 @@
           min-width="100"
           show-overflow-tooltip
         ></el-table-column>
-          <!-- <el-table-column
+        <!-- <el-table-column
           align="center"
           label="已退数量"
           prop="retiredQty"
@@ -237,20 +239,29 @@
           show-overflow-tooltip
         ></el-table-column>
 
-             <el-table-column
-              align="left"
-              label="表体业务员"
-              prop="serviceName"
-              min-width="100"
-              show-overflow-tooltip
-            />
+        <el-table-column
+          align="left"
+          label="表体业务员"
+          prop="serviceName"
+          min-width="100"
+          show-overflow-tooltip
+        />
         <el-table-column
           align="center"
           label="表体备注"
           prop="itemRemark"
           min-width="160"
           show-overflow-tooltip
-        ></el-table-column>
+        >
+          <template slot-scope="scope">
+            <!-- <div v-if="userName">
+            <el-input v-model="scope.row.itemRemark" size="mini"></el-input>
+          </div> -->
+            <!-- <div v-else> -->
+            {{ scope.row.itemRemark }}
+            <!-- </div> -->
+          </template>
+        </el-table-column>
         <el-table-column
           align="center"
           label="税率"
@@ -306,7 +317,7 @@
 </template>
 
 <script>
-import { examineData, getDetail, getUserList } from '@/api/supply/policy'
+import { examineData, getDetail, getUserList } from "@/api/supply/policy";
 
 export default {
   name: "RetailExamine",
@@ -328,12 +339,12 @@ export default {
     return {
       detailData: {},
       userName: JSON.parse(localStorage.getItem("supply_user")).nickName,
-      userList:[],
+      userList: [],
       formLoading: false,
       mainForm: {
         status: true,
         remark: "",
-        theTime:''
+        theTime: "",
       },
     };
   },
@@ -368,32 +379,32 @@ export default {
       getUserList({
         pageNum: 1,
         pageSize: -1,
-        adminWebsitId: '',
+        adminWebsitId: "",
         isCustomer: 0,
-        roleId: '',
+        roleId: "",
         status: true,
-        userName: ''
+        userName: "",
       }).then((res) => {
-        this.userList = res.data.records
-      })
+        this.userList = res.data.records;
+      });
     },
     handleUser(e) {
-      const user = this.userList.filter(k => {
-        return k.adminUserId === e
-      })[0]
-      this.detailData.k3ServiceId = user.adminUserId
-      this.detailData.k3ServiceName = user.nickName
+      const user = this.userList.filter((k) => {
+        return k.adminUserId === e;
+      })[0];
+      this.detailData.k3ServiceId = user.adminUserId;
+      this.detailData.k3ServiceName = user.nickName;
     },
     // 提交审批
     clickSubmitForm() {
-
       this.formLoading = true;
       examineData({
         id: this.listItem.id,
         examineStatus: this.mainForm.status ? "OK" : "FAIL",
         examineRemark: this.mainForm.remark,
-        theTime:this.detailData.theTime,
-        serviceId:this.detailData.k3ServiceId
+        remark: this.detailData.remark,
+        theTime: this.detailData.theTime,
+        serviceId: this.detailData.k3ServiceId,
       })
         .then((res) => {
           this.$successMsg("审批成功");
@@ -425,10 +436,10 @@ export default {
     margin: 0;
   }
   ::v-deep .el-input__suffix {
-  right: -15px;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
+    right: -15px;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+  }
 }
 .detail-container {
   width: 100%;

src/views/supply/policy/components/retail_form.vue

@@ -365,11 +365,11 @@
         <el-table-column
           align="left"
           label="表体备注"
-          prop="itemRemark"
+          prop="remark"
           min-width="160"
         >
           <template slot-scope="scope">
-            <el-input v-model="scope.row.itemRemark" size="small" />
+            <el-input v-model="scope.row.remark" size="small" />
           </template>
         </el-table-column>
         <el-table-column
@@ -1844,6 +1844,7 @@ export default {
           //   this.typeList[
           //     findElem(this.typeList, "dictCode", this.mainForm.type)
           //   ].dictValue;
+
           const params = {
             theTime: this.mainForm.date,
             k3ServiceId: this.mainForm.k3ServiceId,

src/views/supply/retail/components/retail_detail.vue

@@ -90,9 +90,8 @@
           <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
           <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
           <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
-                       <el-table-column align="center" label="文件编号" prop="fileNo" min-width="100" show-overflow-tooltip></el-table-column>
-
-        <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip>
+          <el-table-column align="center" label="文件编号" prop="fileNo" min-width="100" show-overflow-tooltip></el-table-column>
+          <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip>
             <template slot-scope="scope">
               {{ scope.row.price | numToFixed }}
             </template>

src/views/supply/retail/components/retail_examine.vue

@@ -10,39 +10,46 @@
       <el-row>
         <el-col :span="8" class="item">
           <div class="label">订单号</div>
-          <div class="value">{{detailData.id}}</div>
+          <div class="value">{{ detailData.id }}</div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">订单日期</div>
-          <div class="value">{{detailData.theTime}}</div>
+          <div class="value">{{ detailData.theTime }}</div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">单据状态</div>
-          <div class="value">{{detailData.examineStatus | statusFilter}}</div>
+          <div class="value">{{ detailData.examineStatus | statusFilter }}</div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">业务员</div>
-          <div class="value">{{detailData.k3ServiceName}}</div>
+          <div class="value">{{ detailData.k3ServiceName }}</div>
         </el-col>
         <el-col :span="16" class="item">
           <div class="label">文件编号</div>
-          <div class="value">{{detailData.fileNo}}</div>
+          <div class="value">{{ detailData.fileNo }}</div>
         </el-col>
         <el-col :span="24" class="item">
           <div class="label">备注</div>
-          <div class="value">{{detailData.remark}}</div>
+          <div class="value">
+            <template v-if="userName">
+              <el-input v-model="detailData.remark" clearable></el-input>
+            </template>
+            <template v-else>
+              {{ detailData.remark }}
+            </template>
+          </div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">制单人</div>
-          <div class="value">{{detailData.createName}}</div>
+          <div class="value">{{ detailData.createName }}</div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">审核人</div>
-          <div class="value">{{detailData.examineName}}</div>
+          <div class="value">{{ detailData.examineName }}</div>
         </el-col>
         <el-col :span="8" class="item">
           <div class="label">关闭人</div>
-          <div class="value">{{detailData.closeName}}</div>
+          <div class="value">{{ detailData.closeName }}</div>
         </el-col>
       </el-row>
     </div>
@@ -61,42 +68,167 @@
         stripe
         max-height="400"
         show-summary
-        :summary-method="$getSummaries">
-        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
-        <el-table-column align="center" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="产品编码" prop="materialOldNumber" min-width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
-               <el-table-column align="center" label="文件编号" prop="fileNo" min-width="100" show-overflow-tooltip></el-table-column>
+        :summary-method="$getSummaries"
+      >
+        <el-table-column
+          align="center"
+          label="序号"
+          type="index"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="销售类型"
+          prop="saleTypeName"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="物料编码"
+          prop="materialCode"
+          min-width="120"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="产品编码"
+          prop="materialOldNumber"
+          min-width="120"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="产品名称"
+          prop="materialName"
+          min-width="160"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="规格型号"
+          prop="specification"
+          min-width="160"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="单位"
+          prop="unit"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="文件编号"
+          prop="fileNo"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
 
-
-       <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip>
+        <el-table-column
+          align="right"
+          label="单价"
+          prop="price"
+          min-width="100"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             {{ scope.row.price | numToFixed }}
           </template>
         </el-table-column>
-        <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="right" label="订单金额" prop="totalAmount" min-width="100" show-overflow-tooltip>
+        <el-table-column
+          align="right"
+          label="数量"
+          prop="refundableQty"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="right"
+          label="订单金额"
+          prop="totalAmount"
+          min-width="100"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             {{ scope.row.totalAmount | numToFixed }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="返利类型" prop="customerWalletName2" min-width="140" show-overflow-tooltip></el-table-column>
-        <el-table-column align="right" label="返利金额" prop="rebateAmount" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="right" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="现金钱包" prop="customerWalletName" min-width="140" show-overflow-tooltip></el-table-column>
-        <el-table-column align="right" label="实付金额" prop="payAmount" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="是否直调" prop="isDirectTransfer" min-width="100" show-overflow-tooltip>
+        <el-table-column
+          align="center"
+          label="返利类型"
+          prop="customerWalletName2"
+          min-width="140"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="right"
+          label="返利金额"
+          prop="rebateAmount"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="right"
+          label="格力折扣"
+          prop="totalDiscAmount"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="现金钱包"
+          prop="customerWalletName"
+          min-width="140"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="right"
+          label="实付金额"
+          prop="payAmount"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="是否直调"
+          prop="isDirectTransfer"
+          min-width="100"
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
-            {{scope.row.isDirectTransfer ? '是':'否'}}
+            {{ scope.row.isDirectTransfer ? "是" : "否" }}
           </template>
         </el-table-column>
-        <el-table-column align="right" label="直调数量" prop="directTransferQty" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="right" label="原订单数量" prop="oldQty" min-width="100" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column>
-        <el-table-column align="center" label="税率" prop="tax" min-width="100" show-overflow-tooltip></el-table-column>
+        <el-table-column
+          align="right"
+          label="直调数量"
+          prop="directTransferQty"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="right"
+          label="原订单数量"
+          prop="oldQty"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="备注"
+          prop="remark"
+          min-width="160"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="税率"
+          prop="tax"
+          min-width="100"
+          show-overflow-tooltip
+        ></el-table-column>
       </el-table>
     </div>
 
@@ -107,7 +239,7 @@
       <el-row :gutter="0">
         <el-col :span="12" class="item">
           <div class="label">审批人</div>
-          <div class="value">{{userName}}</div>
+          <div class="value">{{ userName }}</div>
         </el-col>
         <el-col :span="12" class="item">
           <div class="label">审批结果</div>
@@ -120,18 +252,27 @@
         </el-col>
         <el-col :span="24" class="item">
           <div class="label">审批说明</div>
-          <div class="value"><el-input v-model="mainForm.remark" placeholder="请输入内容"></el-input></div>
+          <div class="value">
+            <el-input
+              v-model="mainForm.remark"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
         </el-col>
       </el-row>
     </div>
 
     <div class="page-footer">
       <div class="footer">
-        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
+        <el-button
+          type="primary"
+          @click="clickSubmitForm"
+          :loading="formLoading"
+          >{{ formLoading ? "提交中 ..." : "提 交" }}</el-button
+        >
         <el-button @click="goBack">关 闭</el-button>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -139,20 +280,20 @@
 import { getDetail, examineData } from "@/api/supply/retail";
 
 export default {
-  name: 'RetailExamine',
-  componentName: 'RetailExamine',
-  props: ['listItem'],
+  name: "RetailExamine",
+  componentName: "RetailExamine",
+  props: ["listItem"],
   filters: {
     statusFilter(val) {
       const statusList = [
-        { label: '已保存', value: 'SAVE' },
-        { label: '待审核', value: 'WAIT' },
-        { label: '审核通过', value: 'OK' },
-         // { label: '审核驳回', value: 'FAIL' },,
+        { label: "已保存", value: "SAVE" },
+        { label: "待审核", value: "WAIT" },
+        { label: "审核通过", value: "OK" },
+        // { label: '审核驳回', value: 'FAIL' },,
       ];
-      let obj = statusList.find(o => o.value == val);
-      return obj ? obj.label : ''
-    }
+      let obj = statusList.find((o) => o.value == val);
+      return obj ? obj.label : "";
+    },
   },
   data() {
     return {
@@ -162,9 +303,9 @@ export default {
       formLoading: false,
       mainForm: {
         status: true,
-        remark: '',
-      }
-    }
+        remark: "",
+      },
+    };
   },
 
   created() {
@@ -174,20 +315,33 @@ export default {
   methods: {
     // 返回列表
     goBack() {
-      this.$emit('backListFormDetail');
+      this.$emit("backListFormDetail");
     },
 
     // 获取详情
     getDetail() {
-      getDetail({id: this.listItem.id}).then(res => {
-        if(res.data.retailOrderItemList) {
-          res.data.retailOrderItemList.forEach(item => {
-            item.sums1 = ['directTransferQty', 'qty', 'refundableQty', 'oldQty', 'tdQty'];
-            item.sums2 = ['totalAmount', 'payAmount', 'price', 'discAmount', 'totalDiscAmount', 'rebateAmount'];
-          })
+      getDetail({ id: this.listItem.id }).then((res) => {
+        if (res.data.retailOrderItemList) {
+          res.data.retailOrderItemList.forEach((item) => {
+            item.sums1 = [
+              "directTransferQty",
+              "qty",
+              "refundableQty",
+              "oldQty",
+              "tdQty",
+            ];
+            item.sums2 = [
+              "totalAmount",
+              "payAmount",
+              "price",
+              "discAmount",
+              "totalDiscAmount",
+              "rebateAmount",
+            ];
+          });
         }
         this.detailData = res.data;
-      })
+      });
     },
 
     // 提交审批
@@ -195,38 +349,40 @@ export default {
       this.formLoading = true;
       examineData({
         id: this.listItem.id,
-        examineStatus: this.mainForm.status ? 'OK' : 'FAIL',
+        examineStatus: this.mainForm.status ? "OK" : "FAIL",
         examineRemark: this.mainForm.remark,
-      }).then(res => {
-        this.$successMsg('审批成功');
-        this.goBack();
-        this.$parent.getList();
-      }).finally(res => {
-        this.formLoading = false;
+        remark: this.detailData.remark,
       })
+        .then((res) => {
+          this.$successMsg("审批成功");
+          this.goBack();
+          this.$parent.getList();
+        })
+        .finally((res) => {
+          this.formLoading = false;
+        });
     },
-
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .detail-container {
-    width: 100%;
-    height: 100%;
-  }
-  .main-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 20px;
-    height: 60px;
-    border-bottom: 1px solid #DCDFE6;
-    margin-bottom: 20px;
-    .title {
-      font-size: 16px;
-      font-weight: 600;
-      padding-left: 10px;
-    }
+.detail-container {
+  width: 100%;
+  height: 100%;
+}
+.main-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  height: 60px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 20px;
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    padding-left: 10px;
   }
+}
 </style>