zhaojiahui/wechatpay-enterprise-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
wechatpay-enterprise-web/node_modules/.cache/vue-loader/e98f3119df8cf91076749ee6f979e12a.json
jefferyzhao b9bdc8598b first commit
2025-07-31 17:44:12 +08:00

1 line
13 KiB
JSON
Raw Permalink Blame History

{"remainingRequest":"D:\\办公文件\\前端\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\办公文件\\前端\\src\\components\\indexHtml.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\办公文件\\前端\\src\\components\\indexHtml.vue","mtime":1709884674000},{"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:DQoNCg0KZXhwb3J0IGRlZmF1bHQgew0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBjdXJyZW50SW5kZXg6IDAsDQogICAgICBhdXRvUGxheUludGVydmFsOiBudWxsLA0KICAgIH07DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICB1cGRhdGVDYXJvdXNlbCgpIHsNCiAgICAgICAgdGhpcy4kcmVmcy5jYXJvdXNlbEltYWdlcy5zdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlWCgtJHt0aGlzLmN1cnJlbnRJbmRleCAqIDEwMH0lKWA7DQogICAgICAgIEFycmF5LmZyb20odGhpcy4kcmVmcy5jYXJvdXNlbEluZGljYXRvcnMucXVlcnlTZWxlY3RvckFsbCgnbGknKSkuZm9yRWFjaCgoaW5kaWNhdG9yLCBpbmRleCkgPT4gew0KICAgICAgICAgICAgaW5kaWNhdG9yLmNsYXNzTGlzdC50b2dnbGUoJ2FjdGl2ZScsIGluZGV4ID09PSB0aGlzLmN1cnJlbnRJbmRleCk7DQogICAgICAgIH0pOw0KICAgIH0sDQogICAgY2hhbmdlU2xpZGUoc3RlcCkgew0KICAgICAgdGhpcy5jdXJyZW50SW5kZXggKz0gc3RlcDsNCiAgICAgIGlmICh0aGlzLmN1cnJlbnRJbmRleCA8IDApIHsNCiAgICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSB0aGlzLiRyZWZzLmNhcm91c2VsSW1hZ2VzLmNoaWxkcmVuLmxlbmd0aCAtIDE7DQogICAgICB9IGVsc2UgaWYgKHRoaXMuY3VycmVudEluZGV4ID49IHRoaXMuJHJlZnMuY2Fyb3VzZWxJbWFnZXMuY2hpbGRyZW4ubGVuZ3RoKSB7DQogICAgICAgIHRoaXMuY3VycmVudEluZGV4ID0gMDsNCiAgICAgIH0NCiAgICAgIHRoaXMudXBkYXRlQ2Fyb3VzZWwoKTsNCiAgICB9LA0KICAgIHN0YXJ0QXV0b1BsYXkoKSB7DQogICAgDQogICAgICB0aGlzLmF1dG9QbGF5SW50ZXJ2YWwgPSBzZXRJbnRlcnZhbCgoKSA9PiB7DQogICAgICAgIHRoaXMuY2hhbmdlU2xpZGUoMSk7DQogICAgICB9LCA1MDAwKTsgLy8g6K6+572u6Ieq5Yqo5pKt5pS+6Ze06ZqU5pe26Ze077yM5Y2V5L2N5Li65q+r56eSDQogICAgfSwNCiAgICBzdG9wQXV0b1BsYXkoKSB7DQogICAgICBjbGVhckludGVydmFsKHRoaXMuYXV0b1BsYXlJbnRlcnZhbCk7DQogICAgfSwNCiAgfSwNCiAgbW91bnRlZCgpIHsNCiAgICB0aGlzLnN0YXJ0QXV0b1BsYXkoKTsgLy8g5byA5aeL6Ieq5Yqo5pKt5pS+DQogIH0sDQogIGJlZm9yZURlc3Ryb3koKSB7DQogICAgdGhpcy5zdG9wQXV0b1BsYXkoKTsgLy8g5YGc5q2i6Ieq5Yqo5pKt5pS+DQogIH0sDQp9DQoNCg=="},{"version":3,"sources":["indexHtml.vue"],"names":[],"mappings":";;;AAiEA;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;AACA;AACA;AACA;AACA;AACA","file":"indexHtml.vue","sourceRoot":"src/components","sourcesContent":["<template>\r\n <div>\r\n<html lang=\"zh-CN\"> \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 <!-- 引入jQuery库 -->\r\n <!-- <script src=\"https://cdn.jsdelivr.net/npm/jquery@3.6.0\"></script> -->\r\n \r\n</head> \r\n<body>\r\n <header> \r\n <div class=\"navbar\"> \r\n <a href=\"#home\">首页</a> \r\n </div> \r\n </header> \r\n <div class=\"carousel\">\r\n <div class=\"carousel-images\" ref=\"carouselImages\"> \r\n <img src=\"@/assets/images/1.png\" alt=\"图片1\">\r\n <img src=\"@/assets/images/2.png\" alt=\"图片2\">\r\n </div>\r\n <button class=\"carousel-control prev iconfont icon-jiantou-zuo\" v-on:click=\"changeSlide(-1)\"></button>\r\n <button class=\"carousel-control next iconfont icon-jiantou-you\" v-on:click=\"changeSlide(1)\"></button>\r\n <ul class=\"carousel-indicators\" ref=\"carouselIndicators\" id=\"carouselIndicators\">\r\n <li data-target=\"0\"></li>\r\n <li data-target=\"1\"></li>\r\n </ul>\r\n</div>\r\n\r\n <main>\r\n <div class=\"main_top\">\r\n <span class=\"iconfont icon-feiyongjiaona2\"></span>\r\n <span class=\"jn\">费用缴纳</span>\r\n </div>\r\n <div class=\"product-container\"> \r\n <!-- 商品项 --> \r\n <a href=\"/#/lease\" class=\"product-item\"> \r\n <img src=\"@/assets/images/承包金.png\" alt=\"\" class=\"product-image\"> \r\n <h3 class=\"product-title\">承包金</h3> \r\n </a> \r\n <a href=\"/#/dispatch\" class=\"product-item\"> \r\n <img src=\"@/assets/images/调度费.png\" alt=\"\" class=\"product-image\"> \r\n <h3 class=\"product-title\">调度费</h3> \r\n </a> \r\n <a href=\"/#/upkeep\" class=\"product-item\"> \r\n <img src=\"@/assets/images/保养费.png\" alt=\"\" class=\"product-image\"> \r\n <h3 class=\"product-title\">保养费</h3> \r\n </a> \r\n <!-- 更多商品项... --> \r\n \r\n </div> \r\n </main> \r\n \r\n <footer> \r\n <p>\t京ICP备10021178号-2 &copy; 2024 北京金银建科技发展有限公司</p> \r\n </footer> \r\n\r\n</body> \r\n</html>\r\n </div>\r\n</template>\r\n<script>\r\n\r\n\r\nexport default {\r\n data() {\r\n return {\r\n currentIndex: 0,\r\n autoPlayInterval: null,\r\n };\r\n },\r\n methods: {\r\n updateCarousel() {\r\n this.$refs.carouselImages.style.transform = `translateX(-${this.currentIndex * 100}%)`;\r\n Array.from(this.$refs.carouselIndicators.querySelectorAll('li')).forEach((indicator, index) => {\r\n indicator.classList.toggle('active', index === this.currentIndex);\r\n });\r\n },\r\n changeSlide(step) {\r\n this.currentIndex += step;\r\n if (this.currentIndex < 0) {\r\n this.currentIndex = this.$refs.carouselImages.children.length - 1;\r\n } else if (this.currentIndex >= this.$refs.carouselImages.children.length) {\r\n this.currentIndex = 0;\r\n }\r\n this.updateCarousel();\r\n },\r\n startAutoPlay() {\r\n \r\n this.autoPlayInterval = setInterval(() => {\r\n this.changeSlide(1);\r\n }, 5000); // 设置自动播放间隔时间，单位为毫秒\r\n },\r\n stopAutoPlay() {\r\n clearInterval(this.autoPlayInterval);\r\n },\r\n },\r\n mounted() {\r\n this.startAutoPlay(); // 开始自动播放\r\n },\r\n beforeDestroy() {\r\n this.stopAutoPlay(); // 停止自动播放\r\n },\r\n}\r\n\r\n</script> \r\n<style scoped> \r\n@import url('../assets/fonts/iconfont.css');\r\n/* 添加一些基本的样式 */ \r\n body { \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\n a {\r\n text-decoration: none;\r\n color: #333;\r\n }\r\n\r\n header { \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 .carousel { \r\n position: relative; \r\n max-width: 100%; \r\n overflow: hidden; \r\n } \r\n\r\n .carousel-inner { \r\n display: flex; \r\n transition: transform 0.5s ease-in-out; \r\n } \r\n\r\n .carousel-image { \r\n width: 100%; \r\n flex-shrink: 0; \r\n display: block; \r\n } \r\n\r\n\r\n\r\n .carousel-control { \r\n position: absolute; \r\n top: 50%; \r\n transform: translateY(-50%); \r\n background-color: rgba(219, 210, 210, 0.3); ; \r\n color: #fff; \r\n border: none; \r\n cursor: pointer; \r\n padding: 2vh ; \r\n transition: background-color 0.3s ease; \r\n } \r\n\r\n\r\n\r\n .carousel-control:hover { \r\n background-color: rgba(0, 0, 0, 0.8); \r\n } \r\n\r\n .prev { \r\n left: 0; \r\n } \r\n\r\n .next { \r\n right: 0; \r\n } \r\n\r\n .sr-only { \r\n position: absolute; \r\n width: 1px; \r\n height: 1px; \r\n padding: 0; \r\n margin: -1px; \r\n overflow: hidden; \r\n clip: rect(0, 0, 0, 0); \r\n white-space: nowrap; \r\n border: 0; \r\n } \r\n\r\n main {\r\n flex:1;\r\n margin:15vh 20vh;\r\n background-color: #fff;\r\n border-radius: 2vh;\r\n box-shadow: 0 0 8px 6px rgba(150, 143, 143, 0.5);\r\n }\r\n .main_top {\r\n position: relative;\r\n padding-left: 8vh;\r\n color: orangered;\r\n font-size: 18px !important;\r\n border-bottom: 1px solid rgba(204, 204, 204, 0.437);\r\n }\r\n\r\n .icon-feiyongjiaona2 {\r\n font-style: normal;\r\n font-size: 3vw !important;\r\n padding-right: 2vh;\r\n }\r\n\r\n .jn {\r\n position: absolute;\r\n top: 30%;\r\n font-size: 2vw !important;\r\n }\r\n\r\n .carousel {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .carousel-images {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n }\r\n\r\n .carousel-images img {\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .carousel-control {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background-color: rgba(179, 172, 172, 0.5);\r\n color: white;\r\n border: none;\r\n font-size: 2rem;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n\r\n }\r\n\r\n .iconfont {\r\n font-size: 4vw;\r\n font-weight: 700;\r\n }\r\n\r\n .carousel-indicators {\r\n position: absolute;\r\n bottom: 1rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n list-style: none;\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n\r\n .carousel-indicators li {\r\n width: 1rem;\r\n height: 1rem;\r\n background-color: #ccc;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n }\r\n\r\n .carousel-indicators li.active {\r\n background-color: #333;\r\n }\r\n\r\n\r\n /* 商品容器 */ \r\n .product-container { \r\n display: flex; \r\n flex-wrap: wrap; \r\n justify-content: space-between; \r\n padding: 0 5vh;\r\n } \r\n\r\n /* 商品项 */ \r\n .product-item { \r\n width: 30%; /* 对于PC端 */ \r\n margin: 3vh 0; \r\n text-align: center; \r\n border: 1px solid #ddd; \r\n border-radius: 1vh; \r\n box-sizing: border-box; \r\n transition: transform 0.3s ease; \r\n } \r\n\r\n /* 商品项:hover效果 */ \r\n .product-item:hover { \r\n transform: scale(1.05); \r\n /* border-color: #333; */\r\n box-shadow: 0 0 8px 6px rgba(150, 143, 143, 0.5);\r\n } \r\n\r\n /* 商品图片 */ \r\n .product-image { \r\n width: 30%;\r\n padding-top: 5vh; \r\n height: auto; \r\n margin-bottom: 5vh; \r\n } \r\n\r\n .product-title{\r\n margin-bottom: 5vh;\r\n font-weight: 400;\r\n }\r\n\r\n footer { \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 .images-loaded { \r\n display: block; \r\n } \r\n\r\n @media (max-width: 840px) { \r\n .navbar a {\r\n font-size:18px;\r\n }\r\n main {\r\n margin: 15vh 10vh;\r\n }\r\n }\r\n \r\n /* 添加响应式样式 */ \r\n @media (max-width: 650px) { \r\n header {\r\n padding: 0; \r\n }\r\n .carousel-images img{\r\n width: 100%;\r\n height: 25vh;\r\n }\r\n .navbar a {\r\n font-size:18px;\r\n }\r\n .carousel-control,.carousel-indicators {\r\n display: none;\r\n }\r\n .main_top {\r\n padding-left: 3vh;\r\n }\r\n .icon-feiyongjiaona2 {\r\n font-size: 10vw !important;\r\n }\r\n .jn {\r\n top:10% !important;\r\n font-size:100% !important;\r\n }\r\n\r\n .product-item { \r\n width: 95%; /* 对于手机端 */ \r\n } \r\n main {\r\n margin:20px 0;\r\n background-color: #fff;\r\n box-shadow: none;\r\n }\r\n .product-container { \r\n padding: 32px;\r\n /* margin-right: 10px; */\r\n } \r\n footer {\r\n font-size: 14px !important;\r\n }\r\n }\r\n /* @media (max-width: 735px) {\r\n .carousel-images img{\r\n width: 100%;\r\n height: 25vh;\r\n }\r\n } */\r\n</style> "]}]}
Reference in New Issue View Git Blame Copy Permalink