{"remainingRequest":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!G:\\workSpace\\car-record\\src\\components\\CarRecord.vue?vue&type=style&index=0&id=28a51276&lang=scss&scoped=true&","dependencies":[{"path":"G:\\workSpace\\car-record\\src\\components\\CarRecord.vue","mtime":1640854035856},{"path":"G:\\workSpace\\car-record\\node_modules\\css-loader\\dist\\cjs.js","mtime":1653883359791},{"path":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1653883367038},{"path":"G:\\workSpace\\car-record\\node_modules\\postcss-loader\\src\\index.js","mtime":1653883362374},{"path":"G:\\workSpace\\car-record\\node_modules\\sass-loader\\lib\\loader.js","mtime":1653883365298},{"path":"G:\\workSpace\\car-record\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1653883357648},{"path":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\index.js","mtime":1653883364231}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5jYXIgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgbWFyZ2luOiBhdXRvOwogIHdpZHRoOiAxMTMzcHg7CiAgaGVpZ2h0OiA2NDJweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjQ1NzhjOwogIC5oZWFkIHsKICAgIGRpc3BsYXk6IGZsZXg7CiAgICB3aWR0aDogMTEzM3B4OwogICAgaGVpZ2h0OiA1NXB4OwogICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM1OGJlZmY7CiAgICAuaGVhZC1tc2cgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgd2lkdGg6IDU4cHg7CiAgICAgIGhlaWdodDogNTVweDsKICAgICAgaW1nIHsKICAgICAgICB3aWR0aDogMzVweDsKICAgICAgfQogICAgfQogICAgLmhlYWQtaW5mbyB7CiAgICAgIGxpbmUtaGVpZ2h0OiA1NXB4OwogICAgICBmb250LXNpemU6IDI1cHg7CiAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICBjb2xvcjogI2ZmZjsKICAgIH0KICB9CiAgLmxlZnQgewogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgtd3JhcDogd3JhcDsKICAgIGZsb2F0OiBsZWZ0OwogICAgd2lkdGg6IDc4M3B4OwogICAgaGVpZ2h0OiA1ODZweDsKICAgIC5sZWZ0LXBhc3MgewogICAgICB3aWR0aDogNzgzcHg7CiAgICAgIGhlaWdodDogMjkycHg7CiAgICAgIC5wYXNzIHsKICAgICAgICBtYXJnaW4tbGVmdDogMjdweDsKICAgICAgICB3aWR0aDogNzU4cHg7CiAgICAgICAgaGVpZ2h0OiAyOTRweDsKICAgICAgICAucGFzcy10aXRsZSB7CiAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgIHdpZHRoOiA3NTNweDsKICAgICAgICAgIGhlaWdodDogNTRweDsKICAgICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNThiZWZmOwogICAgICAgICAgLnBhc3MtaW1nIHsKICAgICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICAgIGhlaWdodDogMTZweDsKICAgICAgICAgICAgaW1nIHsKICAgICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgICAgLnBhc3MtaW5mbyB7CiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAxMHB4OwogICAgICAgICAgICB3aWR0aDogNzlweDsKICAgICAgICAgICAgaGVpZ2h0OiAyNXB4OwogICAgICAgICAgICBmb250LXNpemU6IDE5cHg7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgICBjb2xvcjogIzBmZWJmZjsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLnBhc3MtcmN0IHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDUwMHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAucGFzcy1yY3QtbGlzdCB7CiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLnBhc3MtcmVjb3JkIHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDI1NHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAucGFzcy1yZWNvcmQtdGl0bGUgewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogNDhweDsKICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAgIC5pbmZvIHsKICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDc2cHg7CiAgICAgICAgICAgICAgcGFkZGluZy10b3A6IDEycHg7CiAgICAgICAgICAgICAgd2lkdGg6IDc3cHg7CiAgICAgICAgICAgICAgaGVpZ2h0OiAxOXB4OwogICAgICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgICAgICBmb250LXdlaWdodDogNDAwOwogICAgICAgICAgICAgIGNvbG9yOiAjZmZmZmZmOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAucGFzcy1yZWNvcmQtdGltZSB7CiAgICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICAudGltZSB7CiAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvOwogICAgICAgICAgICAgIHdpZHRoOiAxNjBweDsKICAgICAgICAgICAgICBsaW5lLWhlaWdodDogNDBweDsKICAgICAgICAgICAgICAuZWwtZGF0ZS1lZGl0b3IuZWwtaW5wdXQgewogICAgICAgICAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAucGFzcy1yZWNvcmQtZm9ybSB7CiAgICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgICAgaGVpZ2h0OiAxNDZweDsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIH0KICAgIH0KICAgIC5sZWZ0LW91dCB7CiAgICAgIHdpZHRoOiA3ODNweDsKICAgICAgaGVpZ2h0OiAyOTJweDsKICAgICAgLm91dCB7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDI3cHg7CiAgICAgICAgd2lkdGg6IDc1OHB4OwogICAgICAgIGhlaWdodDogMjk0cHg7CiAgICAgICAgLm91dC10aXRsZSB7CiAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgIHdpZHRoOiA3NTNweDsKICAgICAgICAgIGhlaWdodDogNTRweDsKICAgICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNThiZWZmOwogICAgICAgICAgLm91dC1pbWcgewogICAgICAgICAgICB3aWR0aDogMjZweDsKICAgICAgICAgICAgaGVpZ2h0OiAxNnB4OwogICAgICAgICAgICBpbWcgewogICAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAub3V0LWluZm8gewogICAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsKICAgICAgICAgICAgd2lkdGg6IDc5cHg7CiAgICAgICAgICAgIGhlaWdodDogMjVweDsKICAgICAgICAgICAgZm9udC1zaXplOiAxOXB4OwogICAgICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICAgICAgY29sb3I6ICMwZmViZmY7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIC5vdXQtcmN0IHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDUwMHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAub3V0LXJjdC1saXN0IHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICAub3V0LXJlY29yZCB7CiAgICAgICAgICBmbG9hdDogbGVmdDsKICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgIGhlaWdodDogMjM2cHg7CiAgICAgICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjMGZlYmZmOwogICAgICAgICAgLm91dC1yZWNvcmQtdGl0bGUgewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogNDhweDsKICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAgIC5pbmZvIHsKICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDc2cHg7CiAgICAgICAgICAgICAgcGFkZGluZy10b3A6IDEycHg7CiAgICAgICAgICAgICAgd2lkdGg6IDc3cHg7CiAgICAgICAgICAgICAgaGVpZ2h0OiAxOXB4OwogICAgICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgICAgICBmb250LXdlaWdodDogNDAwOwogICAgICAgICAgICAgIGNvbG9yOiAjZmZmZmZmOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAub3V0LXJlY29yZC10aW1lIHsKICAgICAgICAgICAgd2lkdGg6IDI1NHB4OwogICAgICAgICAgICBoZWlnaHQ6IDQwcHg7CiAgICAgICAgICAgIC50aW1lIHsKICAgICAgICAgICAgICBtYXJnaW46IGF1dG87CiAgICAgICAgICAgICAgd2lkdGg6IDE2MHB4OwogICAgICAgICAgICAgIGxpbmUtaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICAgIC5lbC1kYXRlLWVkaXRvci5lbC1pbnB1dCB7CiAgICAgICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICAgIC5vdXQtcmVjb3JkLWZvcm0gewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogMTQ2cHg7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgfQogIC5yaWdodCB7CiAgICBmbG9hdDogbGVmdDsKICAgIHdpZHRoOiAzNTBweDsKICAgIGhlaWdodDogNTg2cHg7CiAgICAucmlnaHQtbGluZSB7CiAgICAgIHdpZHRoOiAzNTBweDsKICAgICAgaGVpZ2h0OiA1MCU7CiAgICAgIC5yaWdodC1saW5lLXRpdGxlIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIG1hcmdpbi1sZWZ0OiAxNnB4OwogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgd2lkdGg6IDMzNHB4OwogICAgICAgIGhlaWdodDogNTZweDsKICAgICAgICAubGluZS1pbWcgewogICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDE2cHg7CiAgICAgICAgICBpbWcgewogICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLmxpbmUtaW5mbyB7CiAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsKICAgICAgICAgIHdpZHRoOiAxMjZweDsKICAgICAgICAgIGhlaWdodDogMjVweDsKICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgY29sb3I6ICMwZmViZmY7CiAgICAgICAgfQogICAgICB9CiAgICAgIC5yaWdodC1saW5lLWJvZHkgewogICAgICAgIG1hcmdpbi1sZWZ0OiAxNnB4OwogICAgICAgIHdpZHRoOiAzMzRweDsKICAgICAgICBoZWlnaHQ6IDIzN3B4OwogICAgICB9CiAgICB9CiAgICAucmlnaHQtY291bW4gewogICAgICB3aWR0aDogMzUwcHg7CiAgICAgIGhlaWdodDogNTAlOwogICAgICAucmlnaHQtY291bW4tdGl0bGUgewogICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7CiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICB3aWR0aDogMzM0cHg7CiAgICAgICAgaGVpZ2h0OiA1NnB4OwogICAgICAgIC5jb3Vtbi1pbWcgewogICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDE2cHg7CiAgICAgICAgICBpbWcgewogICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLmNvdW1uLWluZm8gewogICAgICAgICAgbWFyZ2luLWxlZnQ6IDEwcHg7CiAgICAgICAgICB3aWR0aDogMTI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDI1cHg7CiAgICAgICAgICBmb250LXNpemU6IDE5cHg7CiAgICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICAgIGNvbG9yOiAjMGZlYmZmOwogICAgICAgIH0KICAgICAgfQogICAgICAucmlnaHQtY291bW4tYm9keSB7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7CiAgICAgICAgd2lkdGg6IDMzNHB4OwogICAgICAgIGhlaWdodDogMjM3cHg7CiAgICAgIH0KICAgIH0KICB9CiAgOjp2LWRlZXAgLmVsLXRhYmxlLAogIDo6di1kZWVwIC5lbC10YWJsZV9fZXhwYW5kZWQtY2VsbCB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICAgIGJhY2tncm91bmQtY29sb3I6ICMyNDU3OGM7CiAgfQoKICA6OnYtZGVlcCAuZWwtdGFibGUgdGgsCiAgOjp2LWRlZXAgLmVsLXRhYmxlIHRyLAogIDo6di1kZWVwIC5lbC10YWJsZSB0ZCB7CiAgICBjb2xvcjogI2ZmZjsKICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogIH0KCiAgOjp2LWRlZXAgLmVsLXRhYmxlIHRib2R5IHRyOmhvdmVyID4gdGQgewogICAgYmFja2dyb3VuZC1jb2xvcjogc2t5Ymx1ZTsKICB9Cn0K"},{"version":3,"sources":["CarRecord.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuhBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"CarRecord.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div class=\"car\">\n    <!-- 头部区域 -->\n    <div class=\"head\">\n      <div class=\"head-msg\">\n        <img src=\"@/assets/car.svg\" />\n      </div>\n      <div class=\"head-info\">车辆记录</div>\n    </div>\n    <!-- 左侧区域 -->\n    <div class=\"left\">\n      <!-- 驶入方向 -->\n      <div class=\"left-pass\">\n        <div class=\"pass\">\n          <div class=\"pass-title\">\n            <div class=\"pass-img\">\n              <img src=\"@/assets/jiantou.png\" />\n            </div>\n            <div class=\"pass-info\">驶入方向</div>\n          </div>\n          <!-- 识别区域 -->\n          <div class=\"pass-rct\">\n            <el-table\n              :data=\"tableData1.slice(0, 2)\"\n              border\n              style=\"width: 100%\"\n              height=\"238\"\n            >\n              <el-table-column label=\"捕获\" header-align=\"center\" width=\"98\">\n                <template slot-scope=\"{ row }\">\n                  <img :src=\"row.url\" style=\"width: 82px; height: 60px\" />\n                </template>\n              </el-table-column>\n\n              <el-table-column label=\"识别\" header-align=\"center\">\n                <template slot-scope=\"{ row }\">\n                  <div class=\"pass-rct-list\">\n                    <div>\n                      <img\n                        :src=\"row.msg.url\"\n                        style=\"width: 82px; height: 60px\"\n                      />\n                    </div>\n                    <div>\n                      <div>姓名:{{ row.msg.name }}</div>\n                      <div>识别ID:{{ row.msg.id }}</div>\n                      <div>车牌:{{ row.msg.number }}</div>\n                    </div>\n                    <div>\n                      <div>位置:{{ row.msg.place }}</div>\n                      <div>时间:{{ row.msg.time }}</div>\n                    </div>\n                  </div>\n                </template>\n              </el-table-column>\n            </el-table>\n          </div>\n          <!-- 历史记录区域 -->\n          <div class=\"pass-record\">\n            <!-- 标题 -->\n            <div class=\"pass-record-title\">\n              <div class=\"info\">历史记录</div>\n            </div>\n            <!-- 时间选择器 -->\n            <div class=\"pass-record-time\">\n              <div class=\"time\">\n                <el-date-picker\n                  v-model=\"value\"\n                  type=\"date\"\n                  size=\"mini\"\n                  :editable=\"false\"\n                  placeholder=\"选择日期\"\n                >\n                </el-date-picker>\n              </div>\n            </div>\n            <!-- 表格数据 -->\n            <div class=\"pass-record-form\">\n              <el-table :data=\"tableData1\" style=\"width: 100%\" height=\"148\">\n                <el-table-column\n                  prop=\"msg.name\"\n                  label=\"姓名\"\n                  align=\"center\"\n                  width=\"76\"\n                >\n                </el-table-column>\n                <el-table-column\n                  prop=\"msg.number\"\n                  label=\"车牌号\"\n                  align=\"center\"\n                  width=\"90\"\n                >\n                </el-table-column>\n                <el-table-column label=\"时间\" align=\"center\" width=\"76\">\n                  <template slot-scope=\"{ row }\">\n                    {{ row.msg.time.split(\" \")[1] }}\n                  </template>\n                </el-table-column>\n              </el-table>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- 驶出方向 -->\n      <div class=\"left-out\">\n        <div class=\"out\">\n          <div class=\"out-title\">\n            <div class=\"out-img\">\n              <img src=\"@/assets/jiantou.png\" />\n            </div>\n            <div class=\"out-info\">驶出方向</div>\n          </div>\n          <!-- 识别区域 -->\n          <div class=\"out-rct\">\n            <el-table\n              :data=\"tableData2.slice(0, 2)\"\n              border\n              style=\"width: 100%\"\n              height=\"238\"\n            >\n              <el-table-column label=\"捕获\" width=\"98\" header-align=\"center\">\n                <template slot-scope=\"{ row }\">\n                  <img :src=\"row.url\" style=\"width: 82px; height: 60px\" />\n                </template>\n              </el-table-column>\n\n              <el-table-column label=\"识别\" header-align=\"center\">\n                <template slot-scope=\"{ row }\">\n                  <div class=\"out-rct-list\">\n                    <div>\n                      <img\n                        :src=\"row.msg.url\"\n                        style=\"width: 82px; height: 60px\"\n                      />\n                    </div>\n                    <div>\n                      <div>姓名:{{ row.msg.name }}</div>\n                      <div>识别ID:{{ row.msg.id }}</div>\n\n                      <div>车牌:{{ row.msg.number }}</div>\n                    </div>\n                    <div>\n                      <div>位置:{{ row.msg.place }}</div>\n                      <div>时间:{{ row.msg.time }}</div>\n                    </div>\n                  </div>\n                </template>\n              </el-table-column>\n            </el-table>\n          </div>\n          <!-- 历史记录区域 -->\n          <div class=\"out-record\">\n            <!-- 标题 -->\n            <div class=\"out-record-title\">\n              <div class=\"info\">历史记录</div>\n            </div>\n            <!-- 时间选择器 -->\n            <div class=\"out-record-time\">\n              <div class=\"time\">\n                <el-date-picker\n                  v-model=\"value\"\n                  type=\"date\"\n                  size=\"mini\"\n                  :editable=\"false\"\n                  placeholder=\"选择日期\"\n                >\n                </el-date-picker>\n              </div>\n            </div>\n            <!-- 表格数据 -->\n            <div class=\"out-record-form\">\n              <el-table :data=\"tableData2\" style=\"width: 100%\" height=\"146\">\n                <el-table-column\n                  prop=\"msg.name\"\n                  label=\"姓名\"\n                  align=\"center\"\n                  width=\"76\"\n                >\n                </el-table-column>\n                <el-table-column\n                  prop=\"msg.number\"\n                  label=\"车牌号\"\n                  align=\"center\"\n                  width=\"90\"\n                >\n                </el-table-column>\n                <el-table-column label=\"时间\" align=\"center\" width=\"76\">\n                  <template slot-scope=\"{ row }\">\n                    {{ row.msg.time.split(\" \")[1] }}\n                  </template>\n                </el-table-column>\n              </el-table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- 右侧区域 -->\n    <div class=\"right\">\n      <!-- 折线图区域 -->\n      <div class=\"right-line\">\n        <!-- 折线图标题 -->\n        <div class=\"right-line-title\">\n          <div class=\"line-img\">\n            <img src=\"@/assets/jiantou.png\" />\n          </div>\n          <div class=\"line-info\">24小时车流量</div>\n        </div>\n        <!-- 折线图 -->\n        <div class=\"right-line-body\" id=\"line\"></div>\n      </div>\n      <!-- 柱状图区域 -->\n      <div class=\"right-coumn\">\n        <!-- 柱状图标题 -->\n        <div class=\"right-coumn-title\">\n          <div class=\"coumn-img\">\n            <img src=\"@/assets/jiantou.png\" />\n          </div>\n          <div class=\"coumn-info\">车牌来源地</div>\n        </div>\n        <!-- 柱状图 -->\n        <div class=\"right-coumn-body\" id=\"coumn\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n// 引入echarts\nimport * as echarts from \"echarts\";\n\nexport default {\n  name: \"HelloWorld\",\n  data() {\n    return {\n      // 时间选择器绑定的值\n      value: \"\",\n      // 驶入方向的车辆数据\n      tableData1: [\n        {\n          url: \"https://img1.baidu.com/it/u=402105144,1124774539&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img0.baidu.com/it/u=3538708005,999399332&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"王力宏啊\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2569\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2569\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2569\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2569\",\n          },\n        },\n      ],\n      // 驶出方向的车辆数据\n      tableData2: [\n        {\n          url: \"https://img0.baidu.com/it/u=3742738195,2894035218&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img1.baidu.com/it/u=2105880329,624276725&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"王力宏\",\n            place: \"1号机动车出口\",\n            number: \"赣AU2569\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2589\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2589\",\n          },\n        },\n        {\n          url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n          msg: {\n            url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n            id: \"42938\",\n            time: \"2018-12-23 14:32:26\",\n            name: \"吴亦凡\",\n            place: \"1号机动车出口\",\n            number: \"赣BU2589\",\n          },\n        },\n      ],\n      // 折线图表配置\n      lineOption: {\n        tooltip: {\n          trigger: \"axis\",\n        },\n        legend: {\n          data: [\"教师\", \"物业\", \"其他\"],\n          textStyle: {\n            color: \"#fff\",\n          },\n        },\n        grid: {\n          left: \"3%\",\n          right: \"4%\",\n          bottom: \"3%\",\n          containLabel: true,\n        },\n        xAxis: {\n          type: \"category\",\n          boundaryGap: false,\n          data: [0, 4, 8, 12, 16, 20, 24],\n          axisLine: {\n            lineStyle: {\n              color: \"#0febff\",\n            },\n          },\n          axisLabel: {\n            color: \"#fff\",\n          },\n          splitLine: {\n            show: true,\n            lineStyle: {\n              width: 1,\n              color: \"#0febff\",\n            },\n          },\n        },\n        yAxis: {\n          type: \"value\",\n          axisLabel: {\n            formatter: \"{value}\",\n\n            color: \"#fff\",\n          },\n          splitLine: {\n            show: true,\n            lineStyle: {\n              width: 1,\n              color: \"#0febff\",\n            },\n          },\n        },\n        series: [\n          {\n            name: \"教师\",\n            type: \"line\",\n            data: [120, 132, 101, 134, 90, 230, 210],\n            //设定为实心点\n            symbol: \"circle\",\n            //设定实心点的大小\n            symbolSize: 10,\n            //是否显示数值\n            // label: { show: true },\n          },\n          {\n            name: \"物业\",\n            type: \"line\",\n            data: [220, 182, 191, 234, 290, 330, 310],\n            symbol: \"circle\",\n            symbolSize: 10,\n            // label: { show: true },\n          },\n          {\n            name: \"其他\",\n            type: \"line\",\n            data: [150, 232, 201, 154, 190, 330, 410],\n            symbol: \"circle\",\n            symbolSize: 10,\n            // label: { show: true },\n          },\n        ],\n      },\n      // 柱状图表配置\n      coumnOption: {\n        tooltip: {\n          trigger: \"axis\",\n          axisPointer: {\n            type: \"shadow\",\n          },\n        },\n        grid: {\n          left: \"3%\",\n          right: \"4%\",\n          bottom: \"3%\",\n          top: \"3%\",\n          containLabel: true,\n        },\n        xAxis: [\n          {\n            type: \"category\",\n            data: [\"南昌\", \"赣州\", \"宜春\", \"上饶\", \"九江\"],\n            axisTick: {\n              alignWithLabel: true,\n            },\n            axisLine: {\n              lineStyle: {\n                color: \"#0febff\",\n              },\n            },\n            axisLabel: {\n              color: \"#fff\",\n            },\n            splitLine: {\n              show: true,\n              lineStyle: {\n                width: 1,\n                color: \"#0febff\",\n              },\n            },\n          },\n        ],\n        yAxis: {\n          type: \"value\",\n          axisLabel: {\n            formatter: \"{value}\",\n\n            color: \"#fff\",\n          },\n          splitLine: {\n            show: true,\n            lineStyle: {\n              width: 1,\n              color: \"#0febff\",\n            },\n          },\n        },\n\n        series: [\n          {\n            name: \"数量\",\n            type: \"bar\",\n            barWidth: \"60%\",\n            data: [101, 52, 35, 44, 50],\n            itemStyle: {\n              label: {\n                show: true, //开启显示\n                position: \"top\", //在上方显示\n                textStyle: {\n                  //数值样式\n                  color: \"#fff\",\n                },\n              },\n            },\n          },\n        ],\n      },\n    };\n  },\n  mounted() {\n    // 初始化图表\n    this.getEchartLine();\n    this.getEchartCoumn();\n    this.getTableData1();\n    // this.getTableData2();\n  },\n  methods: {\n    // 创建折线图表\n    getEchartLine() {\n      var chartLineDom = document.getElementById(\"line\");\n      var myLineChart = echarts.init(chartLineDom);\n      myLineChart.setOption(this.lineOption);\n    },\n    // 创建柱状图表\n    getEchartCoumn() {\n      var chartCoumnDom = document.getElementById(\"coumn\");\n      var myCoumnChart = echarts.init(chartCoumnDom);\n      myCoumnChart.setOption(this.coumnOption);\n    },\n    // 获取驶入方向的车辆数据\n    getTableData1() {\n      this.$axios({\n        url: \"/car-record-api/ncjtEntranceGuard/getTrafficRecordViewPageList\",\n        method: \"get\",\n        data: {\n          page: \"1\",\n          limit: \"999\",\n        },\n      })\n        .then((res) => {\n          console.log(res);\n        })\n        .catch((error) => {\n          console.log(error);\n        });\n    },\n    // 获取驶出方向的车辆数据\n    // getTableData2() {\n    //   console.log(2);\n    // },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.car {\n  box-sizing: border-box;\n  margin: auto;\n  width: 1133px;\n  height: 642px;\n  background-color: #24578c;\n  .head {\n    display: flex;\n    width: 1133px;\n    height: 55px;\n    border-bottom: 1px solid #58beff;\n    .head-msg {\n      display: flex;\n      justify-content: center;\n      width: 58px;\n      height: 55px;\n      img {\n        width: 35px;\n      }\n    }\n    .head-info {\n      line-height: 55px;\n      font-size: 25px;\n      font-weight: bold;\n      color: #fff;\n    }\n  }\n  .left {\n    display: flex;\n    flex-wrap: wrap;\n    float: left;\n    width: 783px;\n    height: 586px;\n    .left-pass {\n      width: 783px;\n      height: 292px;\n      .pass {\n        margin-left: 27px;\n        width: 758px;\n        height: 294px;\n        .pass-title {\n          display: flex;\n          align-items: center;\n          width: 753px;\n          height: 54px;\n          border-bottom: 1px solid #58beff;\n          .pass-img {\n            width: 26px;\n            height: 16px;\n            img {\n              width: 100%;\n            }\n          }\n          .pass-info {\n            margin-left: 10px;\n            width: 79px;\n            height: 25px;\n            font-size: 19px;\n            font-weight: bold;\n            color: #0febff;\n          }\n        }\n        .pass-rct {\n          float: left;\n          width: 500px;\n          height: 236px;\n          border-radius: 4px;\n          border: 1px solid #0febff;\n          .pass-rct-list {\n            display: flex;\n            justify-content: space-between;\n          }\n        }\n        .pass-record {\n          float: left;\n          width: 254px;\n          height: 236px;\n          border-radius: 4px;\n          border: 1px solid #0febff;\n          .pass-record-title {\n            width: 254px;\n            height: 48px;\n            border-bottom: 1px solid #0febff;\n            .info {\n              padding-left: 76px;\n              padding-top: 12px;\n              width: 77px;\n              height: 19px;\n              font-size: 19px;\n              font-weight: 400;\n              color: #ffffff;\n            }\n          }\n          .pass-record-time {\n            width: 254px;\n            height: 40px;\n            .time {\n              margin: auto;\n              width: 160px;\n              line-height: 40px;\n              .el-date-editor.el-input {\n                width: 100%;\n              }\n            }\n          }\n          .pass-record-form {\n            width: 254px;\n            height: 146px;\n          }\n        }\n      }\n    }\n    .left-out {\n      width: 783px;\n      height: 292px;\n      .out {\n        margin-left: 27px;\n        width: 758px;\n        height: 294px;\n        .out-title {\n          display: flex;\n          align-items: center;\n          width: 753px;\n          height: 54px;\n          border-bottom: 1px solid #58beff;\n          .out-img {\n            width: 26px;\n            height: 16px;\n            img {\n              width: 100%;\n            }\n          }\n          .out-info {\n            margin-left: 10px;\n            width: 79px;\n            height: 25px;\n            font-size: 19px;\n            font-weight: bold;\n            color: #0febff;\n          }\n        }\n        .out-rct {\n          float: left;\n          width: 500px;\n          height: 236px;\n          border-radius: 4px;\n          border: 1px solid #0febff;\n          .out-rct-list {\n            display: flex;\n            justify-content: space-between;\n          }\n        }\n        .out-record {\n          float: left;\n          width: 254px;\n          height: 236px;\n          border-radius: 4px;\n          border: 1px solid #0febff;\n          .out-record-title {\n            width: 254px;\n            height: 48px;\n            border-bottom: 1px solid #0febff;\n            .info {\n              padding-left: 76px;\n              padding-top: 12px;\n              width: 77px;\n              height: 19px;\n              font-size: 19px;\n              font-weight: 400;\n              color: #ffffff;\n            }\n          }\n          .out-record-time {\n            width: 254px;\n            height: 40px;\n            .time {\n              margin: auto;\n              width: 160px;\n              line-height: 40px;\n              .el-date-editor.el-input {\n                width: 100%;\n              }\n            }\n          }\n          .out-record-form {\n            width: 254px;\n            height: 146px;\n          }\n        }\n      }\n    }\n  }\n  .right {\n    float: left;\n    width: 350px;\n    height: 586px;\n    .right-line {\n      width: 350px;\n      height: 50%;\n      .right-line-title {\n        display: flex;\n        margin-left: 16px;\n        align-items: center;\n        width: 334px;\n        height: 56px;\n        .line-img {\n          width: 26px;\n          height: 16px;\n          img {\n            width: 100%;\n          }\n        }\n        .line-info {\n          margin-left: 10px;\n          width: 126px;\n          height: 25px;\n          font-size: 19px;\n          font-weight: bold;\n          color: #0febff;\n        }\n      }\n      .right-line-body {\n        margin-left: 16px;\n        width: 334px;\n        height: 237px;\n      }\n    }\n    .right-coumn {\n      width: 350px;\n      height: 50%;\n      .right-coumn-title {\n        display: flex;\n        margin-left: 16px;\n        align-items: center;\n        width: 334px;\n        height: 56px;\n        .coumn-img {\n          width: 26px;\n          height: 16px;\n          img {\n            width: 100%;\n          }\n        }\n        .coumn-info {\n          margin-left: 10px;\n          width: 126px;\n          height: 25px;\n          font-size: 19px;\n          font-weight: bold;\n          color: #0febff;\n        }\n      }\n      .right-coumn-body {\n        margin-left: 16px;\n        width: 334px;\n        height: 237px;\n      }\n    }\n  }\n  ::v-deep .el-table,\n  ::v-deep .el-table__expanded-cell {\n    background-color: transparent;\n    background-color: #24578c;\n  }\n\n  ::v-deep .el-table th,\n  ::v-deep .el-table tr,\n  ::v-deep .el-table td {\n    color: #fff;\n    background-color: transparent;\n  }\n\n  ::v-deep .el-table tbody tr:hover > td {\n    background-color: skyblue;\n  }\n}\n</style>\n"]}]}