1 line
9.7 KiB
JSON
1 line
9.7 KiB
JSON
{"remainingRequest":"D:\\办公文件\\前端\\node_modules\\babel-loader\\lib\\index.js!D:\\办公文件\\前端\\node_modules\\cache-loader\\dist\\cjs.js??ref--1-0!D:\\办公文件\\前端\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\办公文件\\前端\\src\\components\\ddfHtml.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\办公文件\\前端\\src\\components\\ddfHtml.vue","mtime":1709881622000},{"path":"D:\\办公文件\\前端\\babel.config.js","mtime":1611135168000},{"path":"D:\\办公文件\\前端\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1711099308000},{"path":"D:\\办公文件\\前端\\node_modules\\babel-loader\\lib\\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:ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsIGZ1bmN0aW9uICgpIHsKICB2YXIgcHJvZHVjdEluZm8gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuaWNvbi1qaWFudG91MScpOwogIHZhciBwcm9kdWN0RGV0YWlscyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5wcm9kdWN0LWRldGFpbHMnKTsKICBwcm9kdWN0SW5mby5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIHByb2R1Y3REZXRhaWxzLnN0eWxlLmRpc3BsYXkgPSBwcm9kdWN0RGV0YWlscy5zdHlsZS5kaXNwbGF5ID09PSAnbm9uZScgPyAnYmxvY2snIDogJ25vbmUnOwogIH0pOwp9KTs="},{"version":3,"names":["document","addEventListener","productInfo","querySelector","productDetails","style","display"],"sources":["src/components/ddfHtml.vue"],"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> "],"mappings":"AAoDAA,QAAA,CAAAC,gBAAA;EACA,IAAAC,WAAA,GAAAF,QAAA,CAAAG,aAAA;EACA,IAAAC,cAAA,GAAAJ,QAAA,CAAAG,aAAA;EAEAD,WAAA,CAAAD,gBAAA;IACAG,cAAA,CAAAC,KAAA,CAAAC,OAAA,GAAAF,cAAA,CAAAC,KAAA,CAAAC,OAAA;EACA;AACA","ignoreList":[]}]} |