diff --git a/build/webpack.base.js b/build/webpack.base.js index 6c7988a..8ffc28b 100644 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -5,9 +5,9 @@ const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin"); -// const AutoImport = require('unplugin-auto-import/webpack') -// const Components = require('unplugin-vue-components/webpack') -// const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') +const AutoImport = require('unplugin-auto-import/webpack') +const Components = require('unplugin-vue-components/webpack') +const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = { entry: path.join(__dirname, '../src/main.ts'), // 入口文件 @@ -39,16 +39,10 @@ module.exports = { }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, - type: 'asset/resource', - // 使用file-loader或url-loader，选择其一 - // loader: 'file-loader', loader: 'file-loader', - generator:{ - filename: 'static/images/[name].[contenthash:8][ext]' - }, options: { - // 如果使用url-loader，可以设置limit选项来控制是否内联图片 - // limit: 10 * 1024, // 小于10kb的图片会被转成base64格式 + name: 'img/[name].[ext]', + esModule: false, }, }, ] @@ -69,23 +63,23 @@ module.exports = { // __VUE_PROD_DEVTOOLS__: 'false', // __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false', // }), - // AutoImport({ - // imports: ["vue", "vue-router"], - // dirs: [ - // path.resolve(__dirname, "../src"), - // ], - // resolvers: [ElementPlusResolver()], - // dts: path.resolve(__dirname, "../src/auto-imports.d.ts"), - // // eslintrc: { - // // enabled: true, - // // filepath: path.resolve(__dirname, "./.eslintrc-auto-import.json"), - // // globalsPropValue: true, - // // }, - // }), - // Components({ - // resolvers: [ElementPlusResolver()], - // dts: path.resolve(__dirname, "../src/components.d.ts"), - // }), + AutoImport({ + imports: ["vue", "vue-router"], + dirs: [ + path.resolve(__dirname, "../src"), + ], + resolvers: [ElementPlusResolver()], + dts: path.resolve(__dirname, "../src/auto-imports.d.ts"), + // eslintrc: { + // enabled: true, + // filepath: path.resolve(__dirname, "./.eslintrc-auto-import.json"), + // globalsPropValue: true, + // }, + }), + Components({ + resolvers: [ElementPlusResolver()], + dts: path.resolve(__dirname, "../src/components.d.ts"), + }), ], optimization: { minimize: true, diff --git a/package-lock.json b/package-lock.json index 64cc4b0..e5084fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "core-js": "^3.8.3", + "element-plus": "^2.2.19", "vue": "^3.2.13", "vue-router": "^4.0.3" }, @@ -42,6 +43,9 @@ "terser-webpack-plugin": "^5.3.10", "thread-loader": "^4.0.2", "typescript": "~4.5.5", + "unplugin-auto-import": "^0.11.4", + "unplugin-element-plus": "^0.7.0", + "unplugin-vue-components": "^0.22.9", "url-loader": "^4.1.1", "vue-class-component": "^8.0.0-0", "vue-loader": "^17.4.2", @@ -80,6 +84,15 @@ "node": ">=6.0.0" } }, + "node_modules/@antfu/utils": { + "version": "0.7.10", + "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.10.tgz", + "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/@babel/code-frame": { "version": "7.24.7", "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.24.7.tgz", @@ -133,9 +146,9 @@ } }, "node_modules/@babel/generator": { - "version": "7.25.4", - "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.25.4.tgz", - "integrity": "sha512-NFtZmZsyzDPJnk9Zg3BbTfKKc9UlHYzD0E//p2Z3B9nCwwtJW9T0gVbCz8+fBngnn4zf1Dr3IK8PHQQHq0lDQw==", + "version": "7.25.5", + "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.25.5.tgz", + "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==", "dev": true, "dependencies": { "@babel/types": "^7.25.4", @@ -1870,6 +1883,14 @@ "node": ">=6.9.0" } }, + "node_modules/@ctrl/tinycolor": { + "version": "3.6.1", + "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", + "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==", + "engines": { + "node": ">=10" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -1879,6 +1900,14 @@ "node": ">=10.0.0" } }, + "node_modules/@element-plus/icons-vue": { + "version": "2.3.1", + "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz", + "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==", + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -1959,6 +1988,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -2371,6 +2422,38 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, + "node_modules/@popperjs/core": { + "name": "@sxzz/popperjs-es", + "version": "2.11.7", + "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz", + "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz", @@ -2627,6 +2710,19 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==" + }, + "node_modules/@types/lodash-es": { + "version": "4.17.12", + "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz", + "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz", @@ -2732,6 +2828,11 @@ "@types/node": "*" } }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.16", + "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", + "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==" + }, "node_modules/@types/webpack-env": { "version": "1.18.5", "resolved": "https://registry.npmmirror.com/@types/webpack-env/-/webpack-env-1.18.5.tgz", @@ -4518,6 +4619,89 @@ "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==", "dev": true }, + "node_modules/@vueuse/core": { + "version": "9.13.0", + "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz", + "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==", + "dependencies": { + "@types/web-bluetooth": "^0.0.16", + "@vueuse/metadata": "9.13.0", + "@vueuse/shared": "9.13.0", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "9.13.0", + "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz", + "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "9.13.0", + "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz", + "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==", + "dependencies": { + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -4980,6 +5164,11 @@ "lodash": "^4.17.14" } }, + "node_modules/async-validator": { + "version": "4.2.5", + "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz", + "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==" + }, "node_modules/at-least-node": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz", @@ -5396,9 +5585,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001651", - "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", - "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", + "version": "1.0.30001653", + "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz", + "integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==", "dev": true, "funding": [ { @@ -5798,6 +5987,12 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/confbox": { + "version": "0.1.7", + "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.7.tgz", + "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==", + "dev": true + }, "node_modules/connect-history-api-fallback": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz", @@ -6902,6 +7097,11 @@ "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "node_modules/de-indent": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz", @@ -7292,6 +7492,31 @@ "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==", "dev": true }, + "node_modules/element-plus": { + "version": "2.8.1", + "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.1.tgz", + "integrity": "sha512-p11/6w/O0+hGvPhiN3jrcgh+XG+eg5jZlLdQVYvcPHZYhhCh3J3YeZWW1JO/REPES1vevkboT6VAi+9wHA8Dsg==", + "dependencies": { + "@ctrl/tinycolor": "^3.4.1", + "@element-plus/icons-vue": "^2.3.1", + "@floating-ui/dom": "^1.0.1", + "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7", + "@types/lodash": "^4.14.182", + "@types/lodash-es": "^4.17.6", + "@vueuse/core": "^9.1.0", + "async-validator": "^4.2.5", + "dayjs": "^1.11.3", + "escape-html": "^1.0.3", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "lodash-unified": "^1.0.2", + "memoize-one": "^6.0.0", + "normalize-wheel-es": "^1.2.0" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -7449,8 +7674,7 @@ "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz", - "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", - "dev": true + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" }, "node_modules/escape-string-regexp": { "version": "1.0.5", @@ -10002,6 +10226,18 @@ "json5": "lib/cli.js" } }, + "node_modules/local-pkg": { + "version": "0.4.3", + "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz", + "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/locate-path": { "version": "7.2.0", "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-7.2.0.tgz", @@ -10020,8 +10256,22 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, + "node_modules/lodash-unified": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz", + "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==", + "peerDependencies": { + "@types/lodash-es": "*", + "lodash": "*", + "lodash-es": "*" + } }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -10341,6 +10591,11 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -10381,9 +10636,9 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { "braces": "^3.0.3", @@ -10521,6 +10776,18 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/mlly": { + "version": "1.7.1", + "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.7.1.tgz", + "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==", + "dev": true, + "dependencies": { + "acorn": "^8.11.3", + "pathe": "^1.1.2", + "pkg-types": "^1.1.1", + "ufo": "^1.5.3" + } + }, "node_modules/module-alias": { "version": "2.2.3", "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz", @@ -10712,6 +10979,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/normalize-wheel-es": { + "version": "1.2.0", + "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz", + "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==" + }, "node_modules/npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -11210,6 +11482,12 @@ "node": ">=8" } }, + "node_modules/pathe": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz", + "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==", + "dev": true + }, "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz", @@ -11242,6 +11520,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pkg-types": { + "version": "1.2.0", + "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.2.0.tgz", + "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==", + "dev": true, + "dependencies": { + "confbox": "^0.1.7", + "mlly": "^1.7.1", + "pathe": "^1.1.2" + } + }, "node_modules/portfinder": { "version": "1.0.32", "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz", @@ -12610,6 +12899,12 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "node_modules/scule": { + "version": "1.3.0", + "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz", + "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==", + "dev": true + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz", @@ -12985,6 +13280,13 @@ "source-map": "^0.6.0" } }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "deprecated": "Please use @jridgewell/sourcemap-codec instead", + "dev": true + }, "node_modules/spdx-correct": { "version": "3.2.0", "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz", @@ -13189,6 +13491,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-literal": { + "version": "1.3.0", + "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz", + "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==", + "dev": true, + "dependencies": { + "acorn": "^8.10.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz", @@ -13665,9 +13979,9 @@ } }, "node_modules/tslib": { - "version": "2.6.3", - "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz", - "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", + "version": "2.7.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", "dev": true }, "node_modules/tsutils": { @@ -13738,6 +14052,12 @@ "node": ">=4.2.0" } }, + "node_modules/ufo": { + "version": "1.5.4", + "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.4.tgz", + "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==", + "dev": true + }, "node_modules/undici-types": { "version": "6.19.8", "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.19.8.tgz", @@ -13784,6 +14104,49 @@ "node": ">=4" } }, + "node_modules/unimport": { + "version": "1.3.0", + "resolved": "https://registry.npmmirror.com/unimport/-/unimport-1.3.0.tgz", + "integrity": "sha512-fOkrdxglsHd428yegH0wPH/6IfaSdDeMXtdRGn6en/ccyzc2aaoxiUTMrJyc6Bu+xoa18RJRPMfLUHEzjz8atw==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.2", + "escape-string-regexp": "^5.0.0", + "fast-glob": "^3.2.12", + "local-pkg": "^0.4.3", + "magic-string": "^0.27.0", + "mlly": "^1.1.0", + "pathe": "^1.0.0", + "pkg-types": "^1.0.1", + "scule": "^1.0.0", + "strip-literal": "^1.0.0", + "unplugin": "^1.0.1" + } + }, + "node_modules/unimport/node_modules/escape-string-regexp": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", + "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/unimport/node_modules/magic-string": { + "version": "0.27.0", + "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz", @@ -13802,6 +14165,148 @@ "node": ">= 0.8" } }, + "node_modules/unplugin": { + "version": "1.12.2", + "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.12.2.tgz", + "integrity": "sha512-bEqQxeC7rxtxPZ3M5V4Djcc4lQqKPgGe3mAWZvxcSmX5jhGxll19NliaRzQSQPrk4xJZSGniK3puLWpRuZN7VQ==", + "dev": true, + "dependencies": { + "acorn": "^8.12.1", + "chokidar": "^3.6.0", + "webpack-sources": "^3.2.3", + "webpack-virtual-modules": "^0.6.2" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/unplugin-auto-import": { + "version": "0.11.5", + "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.11.5.tgz", + "integrity": "sha512-nvbL2AQwLRR8wbHpJ6L1EBVNmjN045RSedTa4NtsGRkSQFXkI1iKHs4dTqJwcKZsnFrZOAKtLPiN1/oQTObLZw==", + "dev": true, + "dependencies": { + "@antfu/utils": "^0.7.0", + "@rollup/pluginutils": "^5.0.2", + "local-pkg": "^0.4.2", + "magic-string": "^0.26.7", + "unimport": "^1.0.1", + "unplugin": "^1.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vueuse/core": "*" + }, + "peerDependenciesMeta": { + "@vueuse/core": { + "optional": true + } + } + }, + "node_modules/unplugin-auto-import/node_modules/magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/unplugin-element-plus": { + "version": "0.7.2", + "resolved": "https://registry.npmmirror.com/unplugin-element-plus/-/unplugin-element-plus-0.7.2.tgz", + "integrity": "sha512-A73dCu0fIMRodx1OoAZ4JruyAoenzTVFWMdukq3q7xR+vtcAy3B9uO1g3+WJMA1A9hWxo7iO5tVRGaD2lFNlWA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.2", + "es-module-lexer": "^1.3.0", + "magic-string": "^0.30.1", + "unplugin": "^1.3.2" + }, + "engines": { + "node": ">=14.19.0" + } + }, + "node_modules/unplugin-vue-components": { + "version": "0.22.12", + "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.22.12.tgz", + "integrity": "sha512-FxyzsuBvMCYPIk+8cgscGBQ345tvwVu+qY5IhE++eorkyvA4Z1TiD/HCiim+Kbqozl10i4K+z+NCa2WO2jexRA==", + "dev": true, + "dependencies": { + "@antfu/utils": "^0.7.2", + "@rollup/pluginutils": "^5.0.2", + "chokidar": "^3.5.3", + "debug": "^4.3.4", + "fast-glob": "^3.2.12", + "local-pkg": "^0.4.2", + "magic-string": "^0.27.0", + "minimatch": "^5.1.1", + "resolve": "^1.22.1", + "unplugin": "^1.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@babel/parser": "^7.15.8", + "vue": "2 || 3" + }, + "peerDependenciesMeta": { + "@babel/parser": { + "optional": true + } + } + }, + "node_modules/unplugin-vue-components/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/unplugin-vue-components/node_modules/magic-string": { + "version": "0.27.0", + "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/unplugin-vue-components/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/unplugin/node_modules/webpack-virtual-modules": { + "version": "0.6.2", + "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", + "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", + "dev": true + }, "node_modules/update-browserslist-db": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", diff --git a/package.json b/package.json index 3ec0228..5d5bdc8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "core-js": "^3.8.3", + "element-plus": "^2.2.19", "vue": "^3.2.13", "vue-router": "^4.0.3" }, @@ -51,6 +52,9 @@ "webpack": "^5.93.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4", - "webpack-merge": "^6.0.1" + "webpack-merge": "^6.0.1", + "unplugin-auto-import": "^0.11.4", + "unplugin-element-plus": "^0.7.0", + "unplugin-vue-components": "^0.22.9" } } diff --git a/src/router/index.ts b/src/router/index.ts index 93e4823..db769b2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,18 +3,22 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router const routes = [ { path: '/', + name: 'home', component: () => import('../views/cmsList/index.vue') }, { path: '/list', + name: 'list', component: () => import('../views/cmsList/index.vue') }, { path: '/detail', + name: 'detail', component: () => import('../views/cmsDetail/index.vue') }, { path: '/comProduct', + name: 'comProduct', component: () => import('../views/comProduct/index.vue') }, { diff --git a/src/views/comProduct/img/btnImg3_1.png b/src/views/comProduct/img/btnImg3_1.png new file mode 100644 index 0000000..2667b8a Binary files /dev/null and b/src/views/comProduct/img/btnImg3_1.png differ diff --git a/src/views/comProduct/img/btnImg3_2.png b/src/views/comProduct/img/btnImg3_2.png new file mode 100644 index 0000000..badf25e Binary files /dev/null and b/src/views/comProduct/img/btnImg3_2.png differ diff --git a/src/views/comProduct/img/btnImg3_3.png b/src/views/comProduct/img/btnImg3_3.png new file mode 100644 index 0000000..d121a2e Binary files /dev/null and b/src/views/comProduct/img/btnImg3_3.png differ diff --git a/src/views/comProduct/img/imgIcon1.png b/src/views/comProduct/img/imgIcon1.png new file mode 100644 index 0000000..8639a29 Binary files /dev/null and b/src/views/comProduct/img/imgIcon1.png differ diff --git a/src/views/comProduct/img/imgIcon2.png b/src/views/comProduct/img/imgIcon2.png new file mode 100644 index 0000000..b0b0b32 Binary files /dev/null and b/src/views/comProduct/img/imgIcon2.png differ diff --git a/src/views/comProduct/img/imgIcon3_1.png b/src/views/comProduct/img/imgIcon3_1.png new file mode 100644 index 0000000..fd1f027 Binary files /dev/null and b/src/views/comProduct/img/imgIcon3_1.png differ diff --git a/src/views/comProduct/img/imgIcon3_2.png b/src/views/comProduct/img/imgIcon3_2.png new file mode 100644 index 0000000..04b20fa Binary files /dev/null and b/src/views/comProduct/img/imgIcon3_2.png differ diff --git a/src/views/comProduct/img/imgIcon3_3.png b/src/views/comProduct/img/imgIcon3_3.png new file mode 100644 index 0000000..3d39593 Binary files /dev/null and b/src/views/comProduct/img/imgIcon3_3.png differ diff --git a/src/views/comProduct/img/textIcon3_1.png b/src/views/comProduct/img/textIcon3_1.png new file mode 100644 index 0000000..67329e3 Binary files /dev/null and b/src/views/comProduct/img/textIcon3_1.png differ diff --git a/src/views/comProduct/img/textIcon3_2.png b/src/views/comProduct/img/textIcon3_2.png new file mode 100644 index 0000000..fd055e9 Binary files /dev/null and b/src/views/comProduct/img/textIcon3_2.png differ diff --git a/src/views/comProduct/img/textIcon3_3.png b/src/views/comProduct/img/textIcon3_3.png new file mode 100644 index 0000000..9a1c048 Binary files /dev/null and b/src/views/comProduct/img/textIcon3_3.png differ diff --git a/src/views/comProduct/img/textImg1.png b/src/views/comProduct/img/textImg1.png new file mode 100644 index 0000000..6f613cd Binary files /dev/null and b/src/views/comProduct/img/textImg1.png differ diff --git a/src/views/comProduct/img/textImg2.png b/src/views/comProduct/img/textImg2.png new file mode 100644 index 0000000..14deb62 Binary files /dev/null and b/src/views/comProduct/img/textImg2.png differ diff --git a/src/views/comProduct/img/textImg3_1.png b/src/views/comProduct/img/textImg3_1.png new file mode 100644 index 0000000..6b2cec3 Binary files /dev/null and b/src/views/comProduct/img/textImg3_1.png differ diff --git a/src/views/comProduct/img/textImg3_2.png b/src/views/comProduct/img/textImg3_2.png new file mode 100644 index 0000000..d467053 Binary files /dev/null and b/src/views/comProduct/img/textImg3_2.png differ diff --git a/src/views/comProduct/img/textImg3_3.png b/src/views/comProduct/img/textImg3_3.png new file mode 100644 index 0000000..97515a6 Binary files /dev/null and b/src/views/comProduct/img/textImg3_3.png differ diff --git a/src/views/comProduct/index.vue b/src/views/comProduct/index.vue index 97349d7..8dd953c 100644 --- a/src/views/comProduct/index.vue +++ b/src/views/comProduct/index.vue @@ -2,34 +2,47 @@
@@ -41,57 +54,110 @@ export default { props: {}, data() { return { - listData: [], + detailType: 0, // 路由 push 详情 type + listData: [] as Array, + showData: [] as Array, // 区分 列表 和 详情 listCss: new Map([ [1, { text: '支付宝', - imgIcon: '', - textImg: '', + imgIcon: require('./img/imgIcon3_1.png'), + textImg: require('./img/textImg3_1.png'), + imgClass: 'imgClass3_1', btnTextColor: '#699DFF', - textIcon: '', + textColor: '#4494EA', + textIcon: require('./img/textIcon3_1.png'), infoBgc: '#ECF3FA', bgColorList: ['#DBE7FF', '#F8FAFF'], + btnColorList: ['#4888F4', '#82B0F5'], + btnImg: require('./img/btnImg3_1.png'), }], [2, { text: '微信', - imgIcon: '', - textImg: '', + imgIcon: require('./img/imgIcon3_2.png'), + textImg: require('./img/textImg3_2.png'), + imgClass: 'imgClass3_2', btnTextColor: '#7FBE7A', - textIcon: '', + textColor: '#51D14A', + textIcon: require('./img/textIcon3_2.png'), + infoBgc: '#ECFAEE', bgColorList: ['#DEFFDB', '#F8FFF9'], + btnColorList: ['#52E094', '#89F182'], + btnImg: require('./img/btnImg3_2.png'), }], - [3, { + [3, { // 云闪付 text: '优惠', - imgIcon: '', - textImg: '', + imgIcon: require('./img/imgIcon3_3.png'), + textImg: require('./img/textImg3_3.png'), + imgClass: 'imgClass3_3', btnTextColor: '#F75959', - textIcon: '', + textColor: '#E54E46', + textIcon: require('./img/textIcon3_3.png'), + infoBgc: '#FCF6ED', bgColorList: ['#FFDBDB', '#FFF8F8'], - }], // 云闪付 - [4, { - text: '优惠', - imgIcon: '', - textImg: '', + btnColorList: ['#E82E28', '#FD8237'], + btnImg: require('./img/btnImg3_3.png'), + }], + [4, { // 数字权益 + text: '', + imgIcon: require('./img/imgIcon2.png'), + textImg: require('./img/textImg2.png'), + imgClass: 'imgClass2', btnTextColor: '#699DFF', + textColor: '', textIcon: '', + infoBgc: '#ECF3FA', bgColorList: ['#DBE7FF', '#F8FAFF'], - }], // 数字权益 + btnColorList: ['#4888F4', '#82B0F5'], + btnImg: require('./img/btnImg3_1.png'), + }], [5, { text: '红包', - imgIcon: '', - textImg: '', + imgIcon: require('./img/imgIcon1.png'), + textImg: require('./img/textImg1.png'), + imgClass: 'imgClass1', btnTextColor: '#F75959', - textIcon: '', + textColor: '#E54E46', + textIcon: require('./img/textIcon3_3.png'), + infoBgc: '#FCF6ED', bgColorList: ['#FFDBDB', '#FFF8F8'], + btnColorList: ['#E82E28', '#FD8237'], + btnImg: require('./img/btnImg3_3.png'), }], ]), } }, created() { + console.log('---created---'); document.title = '组合商品'; + this.listData = [1, 2, 3, 4, 5]; + this.checkRoute(); + }, + watch: { + '$route': { + handler: 'checkRoute', + } }, methods: { - + toDetail(type: number) { + console.log('---to-detail---'); + const query = { type: type || '红包' }; + this.$router.push({ path: '/comProduct', query }); + }, + checkRoute() { + const query = this.$route.query; + const type = Number(query.type); + console.log('---query---', query, this.listData[type - 1]); + this.detailType = type || 0; + if (!type) { + this.showData = [ ...this.listData ]; + } else { + this.showData = [ this.listData[type - 1] ]; + } + }, + receiveAll (type: string, data: any) { + if (this.detailType && type === 'top') return; + console.log('---receiveAll---'); + } } } @@ -107,7 +173,6 @@ export default { margin: 18px auto; .typeContent { width: 100%; - height: 239px; box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.3), 0px 4px 10px 0px #F2F2F2; border-radius: 10px; margin-bottom: 16px; @@ -128,14 +193,13 @@ export default { } .textImg { display: block; - width: auto; + width: 122px; height: 24px; position: absolute; - top: 0; + top: 11px; left: 75px; } .topBtn { - width: 100%; height: 14px; font-family: Source Han Sans, Source Han Sans; font-weight: 400; @@ -143,6 +207,8 @@ export default { line-height: 14px; text-align: right; margin: 16px 0 17px 0; + padding-right: 10px; + float: right; } .listBox { .listContent { @@ -153,6 +219,8 @@ export default { margin-bottom: 10px; display: flex; align-items: center; + position: relative; + justify-content: space-between; &:last-child { margin-bottom: 16px; } @@ -160,34 +228,156 @@ export default { width: 51px; height: 47px; position: relative; - overflow: hidden; + margin: 0 11px; + border-radius: 4px; .infoIcon { position: absolute; - width: auto; + width: 35px; height: 16px; overflow: hidden; - .textIcon { - display: block; - width: 100px; - height: 16px; - } + left: 0; + top: -8px; + background-size: 100% 100%; + font-family: Source Han Sans, Source Han Sans; + font-weight: 400; + font-size: 9px; + color: #FFFFFF; + text-align: center; + line-height: 16px; } .amountInfo { height: 26px; font-family: D-DIN, D-DIN; font-weight: 400; - font-size: 24px; - color: #4494EA; + font-size: 14px; line-height: 26px; margin-top: 7px; - span { - font-size: 14px; - } + text-align: center; } + .amountTip { + height: 12px; + font-family: Source Han Sans, Source Han Sans; + font-weight: 350; + font-size: 8px; + color: #6F727A; + line-height: 12px; + text-align: center; + } + } + .listProImg { + display: block; + width: 47px; + height: 47px; + margin: 0 11px; + } + .contentInfo { + flex: auto; + .contentInfoTop { + height: 16px; + font-family: Source Han Sans, Source Han Sans; + font-weight: 400; + font-size: 14px; + color: #131313; + line-height: 16px; + } + .contentInfoBottom { + height: 16px; + font-family: Source Han Sans, Source Han Sans; + font-weight: 400; + font-size: 11px; + color: #939393; + line-height: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 129px; + margin-top: 5px; + } + } + .contentBtn { + width: 76px; + height: 29px; + border-radius: 15px; + font-family: Source Han Sans, Source Han Sans; + font-weight: 400; + font-size: 14px; + color: #FFFFFF; + line-height: 29px; + text-align: center; + margin-right: 8px; + } + .contentBtnDisable { + opacity: 0.8; } } } } + .detailClass { + height: 90vh; + } + .imgClass3_1 {} + .imgClass3_2 { + .imgIcon { + width: 55px; + height: 54px; + top: 3px; + left: 14px; + } + .textImg { + width: 102px; + } + .infoIcon { + width: 26px !important; + } + } + .imgClass3_3 { + .imgIcon { + width: 58px; + height: 58px; + top: 4px; + left: 11px; + } + .textImg { + width: 122px; + } + .infoIcon { + width: 26px !important; + } + } + .imgClass2 { + .imgIcon { + width: 55px; + height: 55px; + top: 0; + left: 14px; + } + .textImg { + width: 81px; + } + } + .imgClass1 { + .imgIcon { + width: 67px; + height: 67px; + top: -7px; + left: 10px; + } + .textImg { + width: 81px; + } + } + .bottomBtn { + width: 320px; + height: 44px; + margin: 30px auto; + background-size: 100% 100%; + font-family: Source Han Sans, Source Han Sans; + font-weight: 500; + font-size: 18px; + color: #FFFFFF; + line-height: 44px; + text-align: center; + } } } \ No newline at end of file