asda

build/utils.js

@@ -17,7 +17,7 @@ const devPathSrc = path.resolve(__dirname, "../../../src"); // node_modules应
 //  'statisticalReport','systemConfig','TMS','WMS','workFlow','ADMINISTRATORS']
 // let devModules = ['index','inward']
 // let devModules = ['index','TMS']
-// let devModules = ["index", "appoint", "sale", "statisticalReport", "TMS"];
+// let devModules = ["index", "appoint", "sale", "statisticalReport"];
 let devModules = ["all"];
 // let devModules = ['index','statisticalReport','inward']
 if (pathSrc.indexOf("node_modules") > -1) {

package.json

@@ -44,6 +44,7 @@
     "sass-loader": "^6.0.7",
     "sass-node": "^4.11.2",
     "sass-resources-loader": "^2.2.4",
+    "screenfull": "^5.1.0",
     "script-loader": "^0.7.2",
     "socket.io": "^2.2.0",
     "socket.io-stream": "^0.9.1",

src/components/exportPdf/exportPdf.js

@@ -1,43 +1,61 @@
 // 导出页面为PDF格式
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
-export default{
-  install (Vue, options) {
-    Vue.prototype.getPdf = function () {
-      var title = this.htmlTitle
-      html2Canvas(document.querySelector('#pdfDom'), {
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdf = function() {
+      var title = this.htmlTitle;
+      html2Canvas(document.querySelector("#pdfDom"), {
         allowTaint: true
-      }).then(function (canvas) {
-        var pdf = new JsPDF('p', 'mm', 'a4') // A4纸，纵向
+      }).then(function(canvas) {
+        var pdf = new JsPDF("p", "mm", "a4"); // A4纸，纵向
 
-        var ctx = canvas.getContext('2d')
+        var ctx = canvas.getContext("2d");
 
         var a4w = 210;
-        var a4h = 297 // A4大小，210mm x 297mm，四边不保留边距，显示区域210x297 (四边各保留20mm的边距，显示区域170x257)(pass)
+        var a4h = 297; // A4大小，210mm x 297mm，四边不保留边距，显示区域210x297 (四边各保留20mm的边距，显示区域170x257)(pass)
 
-        var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
+        var imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
 
-        var renderedHeight = 0
+        var renderedHeight = 0;
 
         while (renderedHeight < canvas.height) {
-            var page = document.createElement('canvas')
-
-            page.width = canvas.width
-
-            page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
-
-            // 用getImageData剪裁指定区域，并画到前面建立的canvas对象中
-            page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
-            pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
-            renderedHeight += imgHeight
-
-            if (renderedHeight < canvas.height) {
-                pdf.addPage()
-            } // 若是后面还有内容，添加一个空页
-            // delete page;
+          var page = document.createElement("canvas");
+
+          page.width = canvas.width;
+
+          page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
+
+          // 用getImageData剪裁指定区域，并画到前面建立的canvas对象中
+          page
+            .getContext("2d")
+            .putImageData(
+              ctx.getImageData(
+                0,
+                renderedHeight,
+                canvas.width,
+                Math.min(imgHeight, canvas.height - renderedHeight)
+              ),
+              0,
+              0
+            );
+          pdf.addImage(
+            page.toDataURL("image/jpeg", 1.0),
+            "JPEG",
+            0,
+            0,
+            a4w,
+            Math.min(a4h, (a4w * page.height) / page.width)
+          ); // 添加图像到页面，保留10mm边距
+          renderedHeight += imgHeight;
+
+          if (renderedHeight < canvas.height) {
+            pdf.addPage();
+          } // 若是后面还有内容，添加一个空页
+          // delete page;
         }
-        pdf.save(title + '.pdf')
-    })
-    }
+        pdf.save(title + ".pdf");
+      });
+    };
   }
-}
+};

src/components/exportPdfs/exportPdfs.js

@@ -0,0 +1,63 @@
+// 导出页面为PDF格式
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdfs = function() {
+      var title = this.htmlTitle;
+      console.log(document.querySelector("#pdfDom"));
+      html2Canvas(document.querySelector("#pdfDom"), {
+        allowTaint: false,
+        // useCORS: true,
+        windowWidth: 1695,
+        width: 1695
+      }).then(function(canvas) {
+        var pdf = new JsPDF("l", "mm", "a4"); // A4纸，横向
+        var ctx = canvas.getContext("2d");
+        var a4w = 300;
+        var a4h = 297; // A4大小，210mm x 297mm，四边不保留边距，显示区域210x297 (四边各保留20mm的边距，显示区域170x257)(pass)
+
+        var imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
+
+        var renderedHeight = 0;
+
+        while (renderedHeight < canvas.height) {
+          var page = document.createElement("canvas");
+
+          page.width = canvas.width;
+
+          page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
+
+          // 用getImageData剪裁指定区域，并画到前面建立的canvas对象中
+          page
+            .getContext("2d")
+            .putImageData(
+              ctx.getImageData(
+                0,
+                renderedHeight,
+                canvas.width,
+                Math.min(imgHeight, canvas.height - renderedHeight)
+              ),
+              0,
+              0
+            );
+          pdf.addImage(
+            page.toDataURL("image/jpeg", 1.0),
+            "JPEG",
+            0,
+            0,
+            a4w,
+            Math.min(a4h, (a4w * page.height) / page.width)
+          ); // 添加图像到页面，保留10mm边距
+          renderedHeight += imgHeight;
+
+          if (renderedHeight < canvas.height) {
+            pdf.addPage();
+          } // 若是后面还有内容，添加一个空页
+          // delete page;
+        }
+        pdf.save(title + ".pdf");
+      });
+    };
+  }
+};

src/views/appoint/app.js

@@ -1,61 +1,85 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue';
-import App from '@/components/App.vue';
+import Vue from "vue";
+import App from "@/components/App.vue";
 // include
-import '@/config/include.js';
+import "@/config/include.js";
 
 // 通用store
-import store from '@/store/index.js';
+import store from "@/store/index.js";
 
 // router
-import router from './router/index.js';
+import router from "./router/index.js";
 
-import VueApollo from 'vue-apollo'
+import VueApollo from "vue-apollo";
 
-import apollo from '@/config/apolloConfig.js'
+import apollo from "@/config/apolloConfig.js";
 
 // 关闭生产模式下给出的提示
 Vue.config.productionTip = false;
 
-Vue.use(VueApollo)
-import 'xe-utils' 
-import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
-Vue.use(VXETable)
-Vue.prototype.$XModal = VXETable.modal
+Vue.use(VueApollo);
+import "xe-utils";
+import VXETable from "vxe-table";
+import "vxe-table/lib/style.css";
+Vue.use(VXETable);
+Vue.prototype.$XModal = VXETable.modal;
 
 // 注册表格的全局组件
 import DilCommonUI from "@/components/DilCommonUI";
 Vue.use(DilCommonUI);
 
-import htmlToPdf from '@/components/exportPdf/exportPdf'
-Vue.use(htmlToPdf)
+import htmlToPdf from "@/components/exportPdf/exportPdf";
+Vue.use(htmlToPdf);
 
-import vuescroll from "vuescroll";//引入vuescroll
-import "vuescroll/dist/vuescroll.css";//引入vuescroll样式
-Vue.use(vuescroll);//使用
+import vuescroll from "vuescroll"; //引入vuescroll
+import "vuescroll/dist/vuescroll.css"; //引入vuescroll样式
+Vue.use(vuescroll); //使用
 
 // 导出Excel全局组件
-import tableToExcel from '@/components/exportExcel/exportExcel'
-Vue.use(tableToExcel)
+import tableToExcel from "@/components/exportExcel/exportExcel";
+Vue.use(tableToExcel);
 
 const apolloProvider = new VueApollo({
-    defaultClient: apollo
-})
+  defaultClient: apollo
+});
 
- //把时间戳改为正常可读的时间
- export function renderTime(date) {
-  if(date !== null){
-      let dateee = new Date(date).toJSON();
-      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, " ").replace(/\.[\d]{3}Z/, "");
+//禁止打开控制台
+document.onkeydown = () => {
+  //禁用F12
+  if (window.event && window.event.keyCode == 123) {
+    return false;
+    //禁用ctrl+shift+i,
+  } else if (
+    window.event.ctrlKey &&
+    window.event.shiftKey &&
+    window.event.keyCode == 73
+  ) {
+    return false;
+    //屏蔽Shift+F10
+  } else if (window.event.shiftKey && window.event.keyCode == 121) {
+    return false;
+  }
+};
+
+// console.log = function() {};
+// console.error = function() {};
+
+//把时间戳改为正常可读的时间
+export function renderTime(date) {
+  if (date !== null) {
+    let dateee = new Date(date).toJSON();
+    return new Date(+new Date(dateee) + 8 * 3600 * 1000)
+      .toISOString()
+      .replace(/T/g, " ")
+      .replace(/\.[\d]{3}Z/, "");
   }
   return null;
 }
 //把毫秒数转换分
-export function getDuration(my_time) { 
-  if(my_time !== null){
-      return Math.floor(my_time / 1000 / 60);
+export function getDuration(my_time) {
+  if (my_time !== null) {
+    return Math.floor(my_time / 1000 / 60);
   }
   return null;
 }
@@ -66,11 +90,11 @@ export function sjTime(orderPlanInTime) {
 }
 //验证电话号码
 export function VerifyPhoneNumber(Phone) {
-  var myreg=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
+  var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
   if (!myreg.test(Phone)) {
-      return false;
+    return false;
   } else {
-      return true;
+    return true;
   }
 }
 export function isNumber(value) {
@@ -93,10 +117,10 @@ export function isIntegerNumber(value) {
 }
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   components: { App },
   provide: apolloProvider.provide(),
-  template: '<App/>'
+  template: "<App/>"
 });

src/views/appoint/components/saleContract/updateSaleOrderSteel.vue

@@ -208,6 +208,7 @@
                     <el-button
                       type="primary"
                       @click="changeMaterial(scope.$index)"
+                      v-if="scope.row.netWeight == null"
                       >更改</el-button
                     >
                   </template>
@@ -217,13 +218,16 @@
                       class="textinput111"
                       v-model.number="scope.row.orderPlanWeight"
                       placeholder="(必填)"
+                      :disabled="scope.row.netWeight != null"
                     ></el-input>
                   </template>
                   <!-- 米数 -->
                   <template v-if="item.prop == 'meterNumber'">
                     <el-input
                       v-if="scope.row.haveMeter == 1"
-                      :disabled="scope.row.isDisable == 1"
+                      :disabled="
+                        scope.row.isDisable == 1 || scope.row.netWeight != null
+                      "
                       class="textinput111"
                       v-model.number="scope.row.meterNumber"
                       placeholder="(必填)"
@@ -235,6 +239,7 @@
                       v-model="scope.row.isPound"
                       placeholder="请选择"
                       style="width:65px"
+                      :disabled="scope.row.netWeight != null"
                     >
                       <el-option
                         v-for="item in options2"
@@ -261,6 +266,7 @@
                   type="text"
                   icon="el-icon-close"
                   size="big"
+                  v-if="scope.row.netWeight == null"
                 ></el-button>
               </template>
             </el-table-column>

src/views/statisticalReport/app.js

@@ -1,50 +1,56 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue';
-import App from '@/components/App.vue';
+import Vue from "vue";
+import App from "@/components/App.vue";
 // include
-import '@/config/include.js';
+import "@/config/include.js";
 
 // 通用store
-import store from '@/store/index.js';
+import store from "@/store/index.js";
 
 // router
-import router from './router/index.js';
+import router from "./router/index.js";
 
-import VueApollo from 'vue-apollo'
-
-import apollo from '@/config/apolloConfig.js'
+import VueApollo from "vue-apollo";
 
+import apollo from "@/config/apolloConfig.js";
 
 // 注册表格的全局组件
 import DilCommonUI from "@/components/DilCommonUI";
 Vue.use(DilCommonUI);
 
 // 导出Excel全局组件
-import tableToExcel from '@/components/exportExcel/exportExcel'
-Vue.use(tableToExcel)
+import tableToExcel from "@/components/exportExcel/exportExcel";
+Vue.use(tableToExcel);
+
+import htmlToPdf from "@/components/exportPdfs/exportPdfs";
+Vue.use(htmlToPdf);
+//导出PDF组件
 
 // 关闭生产模式下给出的提示
 Vue.config.productionTip = false;
 
-Vue.use(VueApollo)
+Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-    defaultClient: apollo
-})
+  defaultClient: apollo
+});
 
- //把时间戳改为正常可读的时间
- export function renderTime(date) {
-  if(date !== null){
-      let dateee = new Date(date).toJSON();
-      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, " ").replace(/\.[\d]{3}Z/, "");
+//把时间戳改为正常可读的时间
+export function renderTime(date) {
+  if (date !== null) {
+    let dateee = new Date(date).toJSON();
+    return new Date(+new Date(dateee) + 8 * 3600 * 1000)
+      .toISOString()
+      .replace(/T/g, " ")
+      .replace(/\.[\d]{3}Z/, "");
   }
   return null;
 }
 //把毫秒数转换分
 export function getDuration(my_time) {
-  if(my_time !== null){
-      return Math.floor(my_time / 1000 / 60);
+  if (my_time !== null) {
+    return Math.floor(my_time / 1000 / 60);
   }
   return null;
 }
@@ -55,11 +61,11 @@ export function sjTime(orderPlanInTime) {
 }
 //验证电话号码
 export function VerifyPhoneNumber(Phone) {
-  var myreg=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
+  var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
   if (!myreg.test(Phone)) {
-      return false;
+    return false;
   } else {
-      return true;
+    return true;
   }
 }
 export function isNumber(value) {
@@ -82,10 +88,10 @@ export function isIntegerNumber(value) {
 }
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   components: { App },
   provide: apolloProvider.provide(),
-  template: '<App/>'
+  template: "<App/>"
 });

src/views/statisticalReport/components/Ship_dynamic_table.vue

@@ -13,16 +13,15 @@
         <el-button type="primary" class="btn" @click="onclick">
           <i class="el-icon-search"></i>查询
         </el-button>
-         <el-button type="primary" @click="gotoexcel()"
-          ><i class="el-icon-download"></i>导出(Excel)</el-button
-        >
+        <el-button type="primary" class="btn" @click="getPdfs()">
+          <i class="el-icon-upload2"></i>下载PDF
+        </el-button>
       </div>
-      <table-item :tableData="tableData" :col="col"> </table-item>
+      <table-item :tableData="tableData" :col="col" id="pdfDom"> </table-item>
     </div>
   </div>
 </template>
 <script>
-import LAY_EXCEL from "lay-excel";
 import tableItem from "./tableItem";
 export default {
   name: "TableView",
@@ -31,7 +30,7 @@ export default {
   },
   data() {
     return {
-      tableTitle: "船舶动态表",
+      htmlTitle: "船舶动态表",
       // 树型结构表头数据
       col: [
         {
@@ -142,8 +141,7 @@ export default {
       // 表格数据
 
       tableData: [],
-      input:"",
-
+      input: ""
     };
   },
   created() {},
@@ -152,28 +150,17 @@ export default {
     // console.log(this.$refs.excelDom);
   },
   methods: {
-    onclick(){
-        this.axios.post("/api/v1/tms/selectAllShipDynamaics?con=" + this.input).then((res) => {
-        if (res.data.code == "200") {
-          this.tableData = res.data.data;
-          console.log("aaad" +res.data.data);
-        } else if(res.data.data=="暂时没有船舶动态") { 
+    onclick() {
+      this.axios
+        .post("/api/v1/tms/selectAllShipDynamaics?con=" + this.input)
+        .then(res => {
+          if (res.data.code == "200") {
+            this.tableData = res.data.data;
+            console.log("aaad" + res.data.data);
+          } else if (res.data.data == "暂时没有船舶动态") {
             this.tableData = [];
-        }
-      });
-    },
-    gotoexcel() {
-      let _this = this;
-      let result = JSON.parse(JSON.stringify(_this.tableData));
-      console.log(result);
-      result.unshift({
-        pm: "品名",
-        portName: "港口名称",
-        tonnage: "下游港口吨位",
-        capacity1: "船名",
-        capacityNumber1: "吨位",
-        locationValue1: "位置",
-      });
+          }
+        });
     },
     initialization() {
       this.axios.post("/api/v1/tms/selectAllShipDynamaics").then(res => {

src/views/statisticalReport/components/purchasFuelMonitor/purchasFuelNewMonitor.vue

@@ -6,6 +6,7 @@
         v-model="input"
         style="width:210px;display:flex;margin-right:90px;"
         placeholder="请输入条件查询"
+        clearable
       ></el-input>
       <span>计毛时间：</span>
       <el-date-picker

src/views/statisticalReport/components/purchasFuelMonitor/purchasFuelOldMonitor.vue

@@ -2,7 +2,12 @@
 <template>
   <div class="purchasFuelOldMonitor">
     <div class="frameCalculation">
-      <el-input v-model="input" style="width:210px;display:flex;margin-right:90px;" placeholder="请输入条件查询"></el-input>
+      <el-input
+        v-model="input"
+        style="width:210px;display:flex;margin-right:90px;"
+        placeholder="请输入条件查询"
+        clearable
+      ></el-input>
       <span>计毛时间：</span>
       <el-date-picker
         v-model="startTime"
@@ -11,23 +16,29 @@
       >
       </el-date-picker>
       <span>至</span>
-      <el-date-picker
-        v-model="endTime"
-        type="datetime"
-        placeholder="选择日期"
-      >
+      <el-date-picker v-model="endTime" type="datetime" placeholder="选择日期">
       </el-date-picker>
       <el-button type="primary" class="btn" @click="onclick">
         <i class="el-icon-search"></i>查询
       </el-button>
-      <el-button type="primary" @click="exportData()"><i class="el-icon-download"></i>导出(Excel)</el-button>
+      <el-button type="primary" @click="exportData()"
+        ><i class="el-icon-download"></i>导出(Excel)</el-button
+      >
       <el-button type="primary" @click="refresh">
         <i class="el-icon-refresh"></i>刷新
       </el-button>
       <span style="margin-left: 1rem;">合计净重：</span>
-      <el-input v-model="totalNumber" :disabled="true" style="width: 150px;"></el-input>
+      <el-input
+        v-model="totalNumber"
+        :disabled="true"
+        style="width: 150px;"
+      ></el-input>
       <span style="margin-left: 1rem;">合计车数：</span>
-      <el-input v-model="totalCapacity" :disabled="true" style="width: 150px;"></el-input>
+      <el-input
+        v-model="totalCapacity"
+        :disabled="true"
+        style="width: 150px;"
+      ></el-input>
     </div>
     <div class="table">
       <dilTable ref="excelDom" v-bind.sync="option" @func="func"></dilTable>
@@ -36,13 +47,15 @@
 </template>
 
 <script>
-import { sjTime } from '@/utils/sharedJsFile'
+import { sjTime } from "@/utils/sharedJsFile";
 export default {
   data() {
     return {
-      input:null,
+      input: null,
       option: {
-        requestUrl: "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=null&endTime=null&i=" +new Date(),
+        requestUrl:
+          "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=null&endTime=null&i=" +
+          new Date()
       },
       startTime: null,
       endTime: null,
@@ -50,20 +63,20 @@ export default {
       totalNumber: 0,
       //合计车数
       totalCapacity: 0,
-      tableTitle:'采购燃料老区统计报表'
+      tableTitle: "采购燃料老区统计报表"
     };
   },
   methods: {
-    refresh(){
+    refresh() {
       this.$router.go(0);
     },
-    func(res){
-      console.log(res)
-      var resultNetWeightTotal = 0
+    func(res) {
+      console.log(res);
+      var resultNetWeightTotal = 0;
       res.list.forEach(e => {
-        resultNetWeightTotal = resultNetWeightTotal+e.resultNetWeight
+        resultNetWeightTotal = resultNetWeightTotal + e.resultNetWeight;
       });
-      this.totalNumber = resultNetWeightTotal.toFixed(2) + " t"
+      this.totalNumber = resultNetWeightTotal.toFixed(2) + " t";
       this.totalCapacity = res.total;
       //获取总记录条数作为合计车数
       // this.totalCapacity = res.total;
@@ -72,25 +85,41 @@ export default {
     onclick() {
       let startTime = null;
       let endTime = null;
-      if(this.startTime){
+      if (this.startTime) {
         startTime = sjTime(this.startTime);
       }
-      if(this.endTime){
+      if (this.endTime) {
         endTime = sjTime(this.endTime);
       }
-      if(startTime && endTime){
-        if(startTime < endTime){
-          this.option.requestUrl = "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=" + startTime + "&endTime=" + endTime + "&con=" + this.input+ "&i=" +new Date();
-        }else{
+      if (startTime && endTime) {
+        if (startTime < endTime) {
+          this.option.requestUrl =
+            "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=" +
+            startTime +
+            "&endTime=" +
+            endTime +
+            "&con=" +
+            this.input +
+            "&i=" +
+            new Date();
+        } else {
           this.startTime = null;
           this.endTime = null;
-          this.$message.warning('开始时间要比结束时间早')
+          this.$message.warning("开始时间要比结束时间早");
         }
-      }else{
-        this.option.requestUrl = "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=" + startTime + "&endTime=" +  "&con=" + this.input + endTime + "&i=" +new Date();
+      } else {
+        this.option.requestUrl =
+          "/api/v1/tms/getRLFLReport?apiId=382&orderType=6&startTime=" +
+          startTime +
+          "&con=" +
+          this.input +
+          "&endTime=" +
+          endTime +
+          "&i=" +
+          new Date();
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -102,9 +131,9 @@ export default {
     display: flex;
     align-items: center;
     padding-left: 50px;
-    .el-date-editor{
+    .el-date-editor {
       margin: 20px;
     }
   }
 }
-</style>
+</style>