1 line
		
	
	
		
			10 KiB
		
	
	
	
		
			JSON
		
	
	
	
	
	
			
		
		
	
	
			1 line
		
	
	
		
			10 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\\byfHtml.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\办公文件\\前端\\src\\components\\byfHtml.vue","mtime":1709881764000},{"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/byfHtml.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\">¥130.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                            <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  \r\n.product-details p {\r\n    padding: 5px 0;\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":"AAsDAA,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":[]}]} | 
