1 line
15 KiB
JSON
1 line
15 KiB
JSON
{"remainingRequest":"D:\\办公文件\\前端\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\办公文件\\前端\\src\\components\\ddfHtml.vue?vue&type=style&index=0&id=6901335e&scoped=true&lang=css","dependencies":[{"path":"D:\\办公文件\\前端\\src\\components\\ddfHtml.vue","mtime":1709881622000},{"path":"D:\\办公文件\\前端\\node_modules\\css-loader\\dist\\cjs.js","mtime":1711099310000},{"path":"D:\\办公文件\\前端\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1711099310000},{"path":"D:\\办公文件\\前端\\node_modules\\postcss-loader\\src\\index.js","mtime":1711099310000},{"path":"D:\\办公文件\\前端\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1711099308000},{"path":"D:\\办公文件\\前端\\node_modules\\vue-loader\\lib\\index.js","mtime":1711099310000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:ICANCkBpbXBvcnQgdXJsKCcuLi9hc3NldHMvZm9udHMvaWNvbmZvbnQuY3NzJyk7DQpib2R5IHsgIA0KICBtYXJnaW46IDA7ICANCiAgZGlzcGxheTogZmxleDsgIA0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyAgDQogIG1pbi1oZWlnaHQ6IDEwMHZoOyAvKiDnoa7kv51ib2R56Iez5bCR5Y2g5o2u5pW05Liq6KeG56qX55qE6auY5bqmICovIA0KICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7ICANCiAgcGFkZGluZzogMDsgIA0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjRkZGQUVGOw0KICB3aWR0aDogMTAwJTsNCn0gIA0KDQoNCmEgew0KICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTsNCiAgICBjb2xvcjogIzMzMzsNCn0NCg0KaGVhZGVyIHsgIA0KICAgIHBhZGRpbmc6IDAgMTB2aDsNCiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsICNFMzI3MUMgMCUsICNGRjVCMjcgMTAwJSk7ICANCiAgICBjb2xvcjogI2ZmZjsgDQogICAgaGVpZ2h0OiA4dmg7IA0KfSAgDQoNCi5uYXZiYXIgeyAgDQogICAgICAgIG92ZXJmbG93OiBoaWRkZW47ICANCiAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICAgIH0gIA0KDQogICAgLm5hdmJhciBhIHsgIA0KICAgICAgICBmbG9hdDogbGVmdDsgIA0KICAgICAgICBkaXNwbGF5OiBibG9jazsgIA0KICAgICAgICBmb250LXNpemU6IDVweDsNCiAgICAgICAgY29sb3I6ICNmMmYyZjI7ICANCiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOyAgDQogICAgICAgIGxpbmUtaGVpZ2h0OiAzdmg7DQogICAgICAgIHBhZGRpbmc6IDJ2aCAzdmg7DQogICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTsgDQogICAgICAgIGJvcmRlci1ib3R0b206IDAuNXZoIHNvbGlkIHRyYW5zcGFyZW50OyAvKiDliJ3lp4vnirbmgIHkuI3mmL7npLrkuIvovrnmoYYgKi8gIA0KICAgIH0gIA0KDQogICAgLm5hdmJhciBhOmhvdmVyIHsgIA0KICAgICAgICBwYWRkaW5nLWJvdHRvbTogMi41dmg7DQogICAgICAgIGJvcmRlci1ib3R0b206ICNmZmYgMC41dmggc29saWQ7DQogICAgfSANCg0KICAgIG1haW4gew0KICAgICAgICBmbGV4OiAxOw0KICAgICAgICBtYXJnaW46NSUgMTAlOw0KICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KICAgICAgICBib3JkZXI6ICNlYmU4ZTggMXB4IHNvbGlkOw0KICAgIH0NCg0KbWFpbiAuZGV0YWlscyB7DQp3aWR0aDogMTAwJTsNCg0KfQ0KLmNvbnRhaW5lciB7ICANCiAgZGlzcGxheTogZmxleDsgIA0KICBtYXgtd2lkdGg6IDEyMDBweDsgIA0KICBwYWRkaW5nOiAyMHB4OyAgDQp9ICANCg0KLnByb2R1Y3QtaW1hZ2UgeyAgDQogIHdpZHRoOiA4MCU7DQogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7DQogIGJvcmRlci1yYWRpdXM6IDVweDsNCiAgZmxleDogMCAwIDUwJTsgLyog5Zu+54mH5Y2g5a655Zmo5a695bqm55qENDAlICovICANCiAgbWFyZ2luLXJpZ2h0OiAzMHB4OyAvKiDlm77niYfkuI7ku7fmoLzkuYvpl7TnmoTpl7Tot50gKi8gIA0KfSAgDQoucHJvZHVjdC1pbWFnZSBpbWcgew0KICAgIHdpZHRoOiA1MCU7DQogICAgaGVpZ2h0OiA1MCU7DQogICAgcGFkZGluZzogMTglIDI1JTsNCn0NCi5wcm9kdWN0LWluZm8geyAgDQogIGZsZXg6IDE7IC8qIOS7t+agvOWNoOWuueWZqOWJqeS9meWuveW6pueahOmDqOWIhiAqLyAgDQp9ICANCg0KLnByb2R1Y3QtdGl0bGUgeyAgDQogIGZvbnQtc2l6ZTogM3Z3OyAgDQogIG1hcmdpbi1ib3R0b206IDVweDsgIA0KfSAgDQoNCi5wcm9kdWN0LXByaWNlIHsgIA0KICBmb250LXNpemU6IDJ2dzsgIA0KICBmb250LXdlaWdodDogYm9sZDsgIA0KICBjb2xvcjogcmVkOw0KfSAgDQoNCi5wcm9kdWN0LXBheSB7DQogICAgbWFyZ2luLXRvcDogMjUlOw0KICAgIGJhY2tncm91bmQtY29sb3I6ICMwMzYyOWM7IC8qIOiuvue9ruaMiemSruiDjOaZr+minOiJsiAqLyAgDQogIGNvbG9yOiB3aGl0ZTsgLyog6K6+572u5oyJ6ZKu5paH5a2X6aKc6ImyICovICANCiAgcGFkZGluZzogM3ZoIDV2aDsgLyog6K6+572u5oyJ6ZKu5YaF6L656LedICovICANCiAgdGV4dC1hbGlnbjogY2VudGVyOyAvKiDorr7nva7mjInpkq7lhoXmloflrZflsYXkuK3lr7npvZAgKi8gIA0KICB0ZXh0LWRlY29yYXRpb246IG5vbmU7IC8qIOWOu+aOieaMiemSruaWh+Wtl+S4i+WIkue6vyAqLyAgDQogIGRpc3BsYXk6IGlubGluZS1ibG9jazsgLyog6K6+572u5oyJ6ZKu5Li66KGM5YaF5Z2X57qn5YWD57SgICovICANCiAgZm9udC1zaXplOiAydnc7IC8qIOiuvue9ruaMiemSruaWh+Wtl+Wtl+S9k+Wkp+WwjyAqLyANCiAgY3Vyc29yOiBwb2ludGVyOyAvKiDorr7nva7pvKDmoIfmgqzlgZzml7bnmoTmoLflvI/kuLrmiYvlnosgKi8NCiAgYm9yZGVyLXJhZGl1czogMXZoOw0KDQp9DQoucHJvZHVjdC1pbmZvMSwgLnByb2R1Y3QtZGV0YWlscyB7ICANCiAgLyogY3Vyc29yOiBwb2ludGVyOyAgICovDQogIG1hcmdpbjogMTBweCAyMHB4Ow0KfSANCi5wcm9kdWN0LWluZm8xIHsNCiAgICBjdXJzb3I6IGRlZmF1bHQ7DQp9IA0KDQoucHJvZHVjdC1kZXRhaWxzIHsgIA0KICBwYWRkaW5nOiA1cHggMTBweDsgIA0KICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOyAgDQogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7ICANCiAgDQp9ICANCi5wcm9kdWN0LWRldGFpbHMgcCB7ICANCiAgcGFkZGluZzogNXB4IDA7ICANCiAgDQp9DQouaWNvbi1qaWFudG91MSB7ICANCiAgbWFyZ2luLXJpZ2h0OiAxdmg7IA0KICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogIGZvbnQtc2l6ZTogM3ZoOw0KICBmb250LXdlaWdodDogNzAwOw0KICB0cmFuc2Zvcm06IHJvdGF0ZSg5MGRlZyk7IA0KfSAgDQouc3Agew0KICAgIGZvbnQtc2l6ZTogM3ZoOw0KICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCg0KfQ0KZm9vdGVyIHsgIA0KICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsICNFMzI3MUMgMCUsICNGRjVCMjcgMTAwJSk7ICANCiAgY29sb3I6ICNmZmY7ICANCiAgcGFkZGluZzogMnZoOyANCiAgZm9udC1zaXplOiA0cHg7ICANCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KICBoZWlnaHQ6IGF1dG87DQoNCn0gIA0KLyog5ZON5bqU5byP5aqS5L2T5p+l6K+iICovICANCkBtZWRpYSAobWF4LXdpZHRoOiA3NjhweCkgeyAgDQpodG1sLCBib2R5IHsNCiAgICBoZWlnaHQ6IDEwMCU7DQp9DQpoZWFkZXIgew0KICAgIHBhZGRpbmc6IDAgNTBweDsgIA0KICB9DQogIC5jb250YWluZXIgeyAgDQogICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgLyog5Zyo5bCP5bGP5bmV5LiK5Z6C55u05aCG5Y+gICovICANCiAgfSANCiAgLm5hdmJhciBhIHsNCiAgICAgICAgZm9udC1zaXplOjE4cHg7DQogICAgfSANCiAgbWFpbiB7DQogICAgd2lkdGg6IDEwMCU7DQogICAgbWFyZ2luOjA7DQogICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgICBib3gtc2hhZG93OiBub25lOw0KfQ0KICAucHJvZHVjdC1pbWFnZSB7ICANCiAgICB3aWR0aDogMTAwJTsNCiAgICBtYXJnaW4tcmlnaHQ6IDA7ICANCiAgICBtYXJnaW4tYm90dG9tOiAyMHB4OyAvKiDlm77niYfkuI7ku7fmoLzkuYvpl7TnmoTlnoLnm7Tpl7Tot50gKi8gIA0KICB9ICANCiAgLnByb2R1Y3QtdGl0bGUgeyAgDQogIGZvbnQtc2l6ZTogMjVweDsgICANCiAgZm9udC13ZWlnaHQ6IDcwMDsgDQp9ICANCg0KLnByb2R1Y3QtcHJpY2UgeyAgDQogIGZvbnQtc2l6ZTogMTZweCAhaW1wb3J0YW50OyAgDQogIGZvbnQtd2VpZ2h0OiBib2xkOyAgDQogIGNvbG9yOiByZWQ7DQp9ICANCiAgLnByb2R1Y3QtcGF5IHsNCiAgICBmb250LXNpemU6IDE4cHg7DQogICAgbWFyZ2luLXRvcDogNXZoOw0KICAgIHBhZGRpbmc6IDJ2aCA0dmggIWltcG9ydGFudDsNCn0NCg0KZm9vdGVyIHsNCiAgICBmb250LXNpemU6IDE0cHggIWltcG9ydGFudDsNCn0NCn0gIA0KDQo="},{"version":3,"sources":["ddfHtml.vue"],"names":[],"mappings":";AA8DA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"ddfHtml.vue","sourceRoot":"src/components","sourcesContent":["<template>\r\n <div>\r\n <html lang=\"en\"> \r\n <head> \r\n <meta charset=\"UTF-8\"> \r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \r\n <title>调度费商品详情页</title> \r\n\r\n </head> \r\n <body>\r\n <header> \r\n <div class=\"navbar\"> \r\n <a href=\"index.html\">首页</a> \r\n </div> \r\n </header> \r\n <main>\r\n <div class=\"details\">\r\n <div class=\"container\"> \r\n <div class=\"product-image\"> \r\n <img src=\"@/assets/images/调度费.png\" alt=\"商品图片\"> \r\n </div> \r\n <div class=\"product-info\"> \r\n <h2 class=\"product-title\">调度费</h2> \r\n <p class=\"product-price\">¥40.00</p> \r\n <a href=\"/#/pay\" class=\"product-pay\">立即支付</a> \r\n </div>\r\n \r\n </div>\r\n <div class=\"product-info1\"> \r\n <i class=\"iconfont icon-jiantou1\" aria-hidden=\"true\"></i> <!-- 使用Font Awesome图标库中的下箭头图标 --> \r\n <span class=\"sp\">商品信息</span>\r\n </div>\r\n \r\n <div class=\"product-details\"> \r\n <p>调度费是指出租车公司向出租车司机收取的一种费用,用于提供调度服务。通常是针对出租车司机通过调度中心接受订单并进行服务的行为而收取的。\r\n 出租车调度费的作用包括但不限于以下几个方面:</p>\r\n <p>提供订单调度服务:调度中心负责接收乘客的订单,并将订单分配给附近的出租车司机。这需要一定的人力和技术支持,因此出租车公司可能会收取调度费来覆盖这些成本。</p> \r\n <p>提供应用程序和技术支持:一些出租车公司可能提供手机应用程序或其他技术工具,使乘客能够轻松地预订出租车服务。调度费也可能用于维护和更新这些应用程序和技术平台。</p> \r\n <p>提供客户服务和支持:调度中心可能需要投入一定的人力资源来处理乘客的查询、投诉和其他服务请求。调度费可能部分用于支付这些客户服务人员的工资和培训成本。</p> \r\n <p>总的来说,出租车调度费是出租车公司为提供订单调度和客户服务而收取的一种费用,旨在覆盖与这些服务相关的各种成本。</p> \r\n </div> \r\n </div> \r\n </main>\r\n <footer> \r\n <p>\t京ICP备10021178号-2 © 2024 北京金银建科技发展有限公司</p> \r\n </footer>\r\n \r\n </body> \r\n </html>\r\n </div>\r\n</template>\r\n<script> \r\ndocument.addEventListener('DOMContentLoaded', function() { \r\nvar productInfo = document.querySelector('.icon-jiantou1'); \r\nvar productDetails = document.querySelector('.product-details'); \r\n\r\nproductInfo.addEventListener('click', function() { \r\n productDetails.style.display = productDetails.style.display === 'none' ? 'block' : 'none'; \r\n}); \r\n}); \r\n</script> \r\n<style scoped> \r\n@import url('../assets/fonts/iconfont.css');\r\nbody { \r\n margin: 0; \r\n display: flex; \r\n flex-direction: column; \r\n min-height: 100vh; /* 确保body至少占据整个视窗的高度 */ \r\n font-family: Arial, sans-serif; \r\n padding: 0; \r\n background-color: #FFFAEF;\r\n width: 100%;\r\n} \r\n\r\n\r\na {\r\n text-decoration: none;\r\n color: #333;\r\n}\r\n\r\nheader { \r\n padding: 0 10vh;\r\n background: linear-gradient(90deg, #E3271C 0%, #FF5B27 100%); \r\n color: #fff; \r\n height: 8vh; \r\n} \r\n\r\n.navbar { \r\n overflow: hidden; \r\n display: inline-block;\r\n } \r\n\r\n .navbar a { \r\n float: left; \r\n display: block; \r\n font-size: 5px;\r\n color: #f2f2f2; \r\n text-align: center; \r\n line-height: 3vh;\r\n padding: 2vh 3vh;\r\n text-decoration: none; \r\n border-bottom: 0.5vh solid transparent; /* 初始状态不显示下边框 */ \r\n } \r\n\r\n .navbar a:hover { \r\n padding-bottom: 2.5vh;\r\n border-bottom: #fff 0.5vh solid;\r\n } \r\n\r\n main {\r\n flex: 1;\r\n margin:5% 10%;\r\n background-color: #fff;\r\n border: #ebe8e8 1px solid;\r\n }\r\n\r\nmain .details {\r\nwidth: 100%;\r\n\r\n}\r\n.container { \r\n display: flex; \r\n max-width: 1200px; \r\n padding: 20px; \r\n} \r\n\r\n.product-image { \r\n width: 80%;\r\n border: 1px solid #ccc;\r\n border-radius: 5px;\r\n flex: 0 0 50%; /* 图片占容器宽度的40% */ \r\n margin-right: 30px; /* 图片与价格之间的间距 */ \r\n} \r\n.product-image img {\r\n width: 50%;\r\n height: 50%;\r\n padding: 18% 25%;\r\n}\r\n.product-info { \r\n flex: 1; /* 价格占容器剩余宽度的部分 */ \r\n} \r\n\r\n.product-title { \r\n font-size: 3vw; \r\n margin-bottom: 5px; \r\n} \r\n\r\n.product-price { \r\n font-size: 2vw; \r\n font-weight: bold; \r\n color: red;\r\n} \r\n\r\n.product-pay {\r\n margin-top: 25%;\r\n background-color: #03629c; /* 设置按钮背景颜色 */ \r\n color: white; /* 设置按钮文字颜色 */ \r\n padding: 3vh 5vh; /* 设置按钮内边距 */ \r\n text-align: center; /* 设置按钮内文字居中对齐 */ \r\n text-decoration: none; /* 去掉按钮文字下划线 */ \r\n display: inline-block; /* 设置按钮为行内块级元素 */ \r\n font-size: 2vw; /* 设置按钮文字字体大小 */ \r\n cursor: pointer; /* 设置鼠标悬停时的样式为手型 */\r\n border-radius: 1vh;\r\n\r\n}\r\n.product-info1, .product-details { \r\n /* cursor: pointer; */\r\n margin: 10px 20px;\r\n} \r\n.product-info1 {\r\n cursor: default;\r\n} \r\n\r\n.product-details { \r\n padding: 5px 10px; \r\n border: 1px solid #ccc; \r\n background-color: #f5f5f5; \r\n \r\n} \r\n.product-details p { \r\n padding: 5px 0; \r\n \r\n}\r\n.icon-jiantou1 { \r\n margin-right: 1vh; \r\n display: inline-block;\r\n font-size: 3vh;\r\n font-weight: 700;\r\n transform: rotate(90deg); \r\n} \r\n.sp {\r\n font-size: 3vh;\r\n display: inline-block;\r\n\r\n}\r\nfooter { \r\n background: linear-gradient(90deg, #E3271C 0%, #FF5B27 100%); \r\n color: #fff; \r\n padding: 2vh; \r\n font-size: 4px; \r\n text-align: center;\r\n height: auto;\r\n\r\n} \r\n/* 响应式媒体查询 */ \r\n@media (max-width: 768px) { \r\nhtml, body {\r\n height: 100%;\r\n}\r\nheader {\r\n padding: 0 50px; \r\n }\r\n .container { \r\n flex-direction: column; /* 在小屏幕上垂直堆叠 */ \r\n } \r\n .navbar a {\r\n font-size:18px;\r\n } \r\n main {\r\n width: 100%;\r\n margin:0;\r\n background-color: #fff;\r\n box-shadow: none;\r\n}\r\n .product-image { \r\n width: 100%;\r\n margin-right: 0; \r\n margin-bottom: 20px; /* 图片与价格之间的垂直间距 */ \r\n } \r\n .product-title { \r\n font-size: 25px; \r\n font-weight: 700; \r\n} \r\n\r\n.product-price { \r\n font-size: 16px !important; \r\n font-weight: bold; \r\n color: red;\r\n} \r\n .product-pay {\r\n font-size: 18px;\r\n margin-top: 5vh;\r\n padding: 2vh 4vh !important;\r\n}\r\n\r\nfooter {\r\n font-size: 14px !important;\r\n}\r\n} \r\n\r\n</style> "]}]} |