1 line
8.7 KiB
JSON
1 line
8.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\\cbjHtml.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\办公文件\\前端\\src\\components\\cbjHtml.vue","mtime":1709876428000},{"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/cbjHtml.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\">￥5175.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>出租车司机承租车辆后需向公司支付的承包金费用，用于租赁车辆和经营服务。通常情况下，出租车司机不直接拥有车辆，而是通过支付承包金来租赁车辆并获得经营权。承包金可以视为一种租金，司机需要定期支付给公司，以换取使用车辆的权利，并从中获取收入。</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: 10px; \r\n border: 1px solid #ccc; \r\n background-color: #f5f5f5; \r\n \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":"AA+CAA,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":[]}]} |