Commit afcbe3a4 authored by chenqikuai's avatar chenqikuai

vue2-》vue3

parent c05acccb
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
] ]
} }
...@@ -1161,12 +1161,45 @@ ...@@ -1161,12 +1161,45 @@
"glob-to-regexp": "^0.3.0" "glob-to-regexp": "^0.3.0"
} }
}, },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
"dev": true,
"requires": {
"@nodelib/fs.stat": "2.0.5",
"run-parallel": "^1.1.9"
},
"dependencies": {
"@nodelib/fs.stat": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
"dev": true
}
}
},
"@nodelib/fs.stat": { "@nodelib/fs.stat": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz?cache=0&sync_timestamp=1622792616417&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-1.1.3.tgz", "resolved": "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz?cache=0&sync_timestamp=1622792616417&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.stat%2Fdownload%2F%40nodelib%2Ffs.stat-1.1.3.tgz",
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=", "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
"dev": true "dev": true
}, },
"@nodelib/fs.walk": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
"dev": true,
"requires": {
"@nodelib/fs.scandir": "2.1.5",
"fastq": "^1.6.0"
}
},
"@popperjs/core": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
"integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ=="
},
"@soda/friendly-errors-webpack-plugin": { "@soda/friendly-errors-webpack-plugin": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz", "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz",
...@@ -1313,8 +1346,7 @@ ...@@ -1313,8 +1346,7 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.nlark.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz", "resolved": "https://registry.nlark.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz",
"integrity": "sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=", "integrity": "sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=",
"dev": true, "dev": true
"optional": true
}, },
"@types/q": { "@types/q": {
"version": "1.5.5", "version": "1.5.5",
...@@ -1433,6 +1465,29 @@ ...@@ -1433,6 +1465,29 @@
} }
} }
}, },
"@vant/icons": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.0.tgz",
"integrity": "sha512-sqKvtYcSgSd6+AU1nBPaZARn2Nzf8hi0ErLhfXVR6f+Y7R0gojGZVoxuB83yUI6+0LwbitW5IfN3E6qzEsu21Q=="
},
"@vant/lazyload": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@vant/lazyload/-/lazyload-1.2.0.tgz",
"integrity": "sha512-QsqNm8nNat4z9TdrTI4YkDXZXgg3dbGhHf7tC4mhel+gJ0u2WZcoMYKWkzQXvO+vo395cByT5iUE5a72360B2Q=="
},
"@vant/popperjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
"integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
"requires": {
"@popperjs/core": "^2.9.2"
}
},
"@vant/use": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vant/use/-/use-1.3.0.tgz",
"integrity": "sha512-VJ9/4i7Ta4HKoM1ytf/r2EW/A/PzEHjqMM2eJW8cf8+SMfe1bnusREFYNpIcWgNHsfJrL24oEH174kVHDHrBBA=="
},
"@vue/babel-helper-vue-jsx-merge-props": { "@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.nlark.com/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz", "resolved": "https://registry.nlark.com/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
...@@ -2179,6 +2234,25 @@ ...@@ -2179,6 +2234,25 @@
"integrity": "sha1-NYZv1xBSjpLeEM8GAWSY5H454eY=", "integrity": "sha1-NYZv1xBSjpLeEM8GAWSY5H454eY=",
"dev": true "dev": true
}, },
"acorn-node": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
"dev": true,
"requires": {
"acorn": "^7.0.0",
"acorn-walk": "^7.0.0",
"xtend": "^4.0.2"
},
"dependencies": {
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true
}
}
},
"acorn-walk": { "acorn-walk": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-7.2.0.tgz", "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-7.2.0.tgz",
...@@ -2276,6 +2350,12 @@ ...@@ -2276,6 +2350,12 @@
"integrity": "sha1-G8R4GPMFdk8jqzMGsL/AhsWinRE=", "integrity": "sha1-G8R4GPMFdk8jqzMGsL/AhsWinRE=",
"dev": true "dev": true
}, },
"arg": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
"integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
"dev": true
},
"argparse": { "argparse": {
"version": "1.0.10", "version": "1.0.10",
"resolved": "https://registry.nlark.com/argparse/download/argparse-1.0.10.tgz", "resolved": "https://registry.nlark.com/argparse/download/argparse-1.0.10.tgz",
...@@ -2465,6 +2545,14 @@ ...@@ -2465,6 +2545,14 @@
"integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=", "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
"dev": true "dev": true
}, },
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
...@@ -2545,6 +2633,16 @@ ...@@ -2545,6 +2633,16 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"babel-plugin-import": {
"version": "1.13.3",
"resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
"integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/runtime": "^7.0.0"
}
},
"babel-plugin-polyfill-corejs2": { "babel-plugin-polyfill-corejs2": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.nlark.com/babel-plugin-polyfill-corejs2/download/babel-plugin-polyfill-corejs2-0.2.2.tgz?cache=0&sync_timestamp=1622023904181&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-plugin-polyfill-corejs2%2Fdownload%2Fbabel-plugin-polyfill-corejs2-0.2.2.tgz", "resolved": "https://registry.nlark.com/babel-plugin-polyfill-corejs2/download/babel-plugin-polyfill-corejs2-0.2.2.tgz?cache=0&sync_timestamp=1622023904181&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-plugin-polyfill-corejs2%2Fdownload%2Fbabel-plugin-polyfill-corejs2-0.2.2.tgz",
...@@ -3075,8 +3173,7 @@ ...@@ -3075,8 +3173,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.nlark.com/callsites/download/callsites-3.1.0.tgz", "resolved": "https://registry.nlark.com/callsites/download/callsites-3.1.0.tgz",
"integrity": "sha1-s2MKvYlDQy9Us/BRkjjjPNffL3M=", "integrity": "sha1-s2MKvYlDQy9Us/BRkjjjPNffL3M=",
"dev": true, "dev": true
"optional": true
}, },
"camel-case": { "camel-case": {
"version": "3.0.0", "version": "3.0.0",
...@@ -3094,6 +3191,12 @@ ...@@ -3094,6 +3191,12 @@
"integrity": "sha1-kkr4gcnVJaydh/QNlk5c6pgqGAk=", "integrity": "sha1-kkr4gcnVJaydh/QNlk5c6pgqGAk=",
"dev": true "dev": true
}, },
"camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true
},
"caniuse-api": { "caniuse-api": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/caniuse-api/download/caniuse-api-3.0.0.tgz", "resolved": "https://registry.npm.taobao.org/caniuse-api/download/caniuse-api-3.0.0.tgz",
...@@ -4046,6 +4149,12 @@ ...@@ -4046,6 +4149,12 @@
} }
} }
}, },
"css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
"dev": true
},
"css-what": { "css-what": {
"version": "3.4.2", "version": "3.4.2",
"resolved": "https://registry.nlark.com/css-what/download/css-what-3.4.2.tgz", "resolved": "https://registry.nlark.com/css-what/download/css-what-3.4.2.tgz",
...@@ -4444,6 +4553,12 @@ ...@@ -4444,6 +4553,12 @@
} }
} }
}, },
"defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
"dev": true
},
"del": { "del": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/del/download/del-4.1.1.tgz", "resolved": "https://registry.npm.taobao.org/del/download/del-4.1.1.tgz",
...@@ -4516,6 +4631,23 @@ ...@@ -4516,6 +4631,23 @@
"integrity": "sha1-yccHdaScPQO8LAbZpzvlUPl4+LE=", "integrity": "sha1-yccHdaScPQO8LAbZpzvlUPl4+LE=",
"dev": true "dev": true
}, },
"detective": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
"dev": true,
"requires": {
"acorn-node": "^1.6.1",
"defined": "^1.0.0",
"minimist": "^1.1.1"
}
},
"didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true
},
"diff": { "diff": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/diff/download/diff-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdiff%2Fdownload%2Fdiff-4.0.2.tgz", "resolved": "https://registry.npm.taobao.org/diff/download/diff-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdiff%2Fdownload%2Fdiff-4.0.2.tgz",
...@@ -4567,6 +4699,12 @@ ...@@ -4567,6 +4699,12 @@
} }
} }
}, },
"dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true
},
"dns-equal": { "dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/dns-equal/download/dns-equal-1.0.0.tgz", "resolved": "https://registry.npm.taobao.org/dns-equal/download/dns-equal-1.0.0.tgz",
...@@ -5257,6 +5395,15 @@ ...@@ -5257,6 +5395,15 @@
"integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=", "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
"dev": true "dev": true
}, },
"fastq": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
"integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
"dev": true,
"requires": {
"reusify": "^1.0.4"
}
},
"faye-websocket": { "faye-websocket": {
"version": "0.11.4", "version": "0.11.4",
"resolved": "https://registry.nlark.com/faye-websocket/download/faye-websocket-0.11.4.tgz", "resolved": "https://registry.nlark.com/faye-websocket/download/faye-websocket-0.11.4.tgz",
...@@ -5384,8 +5531,7 @@ ...@@ -5384,8 +5531,7 @@
"follow-redirects": { "follow-redirects": {
"version": "1.14.1", "version": "1.14.1",
"resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz", "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz",
"integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=", "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
"dev": true
}, },
"for-in": { "for-in": {
"version": "1.0.2", "version": "1.0.2",
...@@ -6295,7 +6441,6 @@ ...@@ -6295,7 +6441,6 @@
"resolved": "https://registry.npm.taobao.org/import-fresh/download/import-fresh-3.3.0.tgz?cache=0&sync_timestamp=1608469579940&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-3.3.0.tgz", "resolved": "https://registry.npm.taobao.org/import-fresh/download/import-fresh-3.3.0.tgz?cache=0&sync_timestamp=1608469579940&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-3.3.0.tgz",
"integrity": "sha1-NxYsJfy566oublPVtNiM4X2eDCs=", "integrity": "sha1-NxYsJfy566oublPVtNiM4X2eDCs=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"parent-module": "^1.0.0", "parent-module": "^1.0.0",
"resolve-from": "^4.0.0" "resolve-from": "^4.0.0"
...@@ -6833,6 +6978,12 @@ ...@@ -6833,6 +6978,12 @@
"integrity": "sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=", "integrity": "sha1-J8dlOb4U2L0Sghmi1zGwkzeQTnk=",
"dev": true "dev": true
}, },
"js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
"dev": true
},
"js-message": { "js-message": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz?cache=0&sync_timestamp=1605129209185&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-message%2Fdownload%2Fjs-message-1.0.7.tgz", "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz?cache=0&sync_timestamp=1605129209185&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-message%2Fdownload%2Fjs-message-1.0.7.tgz",
...@@ -6926,7 +7077,6 @@ ...@@ -6926,7 +7077,6 @@
"resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161876665&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz", "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161876665&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
"integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=", "integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"graceful-fs": "^4.1.6", "graceful-fs": "^4.1.6",
"universalify": "^2.0.0" "universalify": "^2.0.0"
...@@ -7045,6 +7195,12 @@ ...@@ -7045,6 +7195,12 @@
} }
} }
}, },
"lilconfig": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
"integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
"dev": true
},
"lines-and-columns": { "lines-and-columns": {
"version": "1.1.6", "version": "1.1.6",
"resolved": "https://registry.nlark.com/lines-and-columns/download/lines-and-columns-1.1.6.tgz", "resolved": "https://registry.nlark.com/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
...@@ -7130,6 +7286,12 @@ ...@@ -7130,6 +7286,12 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true "dev": true
}, },
"lodash.topath": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
"integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
"dev": true
},
"lodash.transform": { "lodash.transform": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.nlark.com/lodash.transform/download/lodash.transform-4.6.0.tgz", "resolved": "https://registry.nlark.com/lodash.transform/download/lodash.transform-4.6.0.tgz",
...@@ -7490,6 +7652,12 @@ ...@@ -7490,6 +7652,12 @@
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"modern-normalize": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
"integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
"dev": true
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "https://registry.nlark.com/move-concurrently/download/move-concurrently-1.0.1.tgz",
...@@ -7603,6 +7771,15 @@ ...@@ -7603,6 +7771,15 @@
"lower-case": "^1.1.1" "lower-case": "^1.1.1"
} }
}, },
"node-emoji": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
"integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
"dev": true,
"requires": {
"lodash": "^4.17.21"
}
},
"node-forge": { "node-forge": {
"version": "0.10.0", "version": "0.10.0",
"resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz?cache=0&sync_timestamp=1599010726129&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-forge%2Fdownload%2Fnode-forge-0.10.0.tgz", "resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz?cache=0&sync_timestamp=1599010726129&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-forge%2Fdownload%2Fnode-forge-0.10.0.tgz",
...@@ -7770,6 +7947,12 @@ ...@@ -7770,6 +7947,12 @@
} }
} }
}, },
"object-hash": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
"integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
"dev": true
},
"object-inspect": { "object-inspect": {
"version": "1.11.0", "version": "1.11.0",
"resolved": "https://registry.nlark.com/object-inspect/download/object-inspect-1.11.0.tgz", "resolved": "https://registry.nlark.com/object-inspect/download/object-inspect-1.11.0.tgz",
...@@ -8023,7 +8206,6 @@ ...@@ -8023,7 +8206,6 @@
"resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
"integrity": "sha1-aR0nCeeMefrjoVZiJFLQB2LKqqI=", "integrity": "sha1-aR0nCeeMefrjoVZiJFLQB2LKqqI=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"callsites": "^3.0.0" "callsites": "^3.0.0"
} }
...@@ -8140,8 +8322,7 @@ ...@@ -8140,8 +8322,7 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.nlark.com/path-type/download/path-type-4.0.0.tgz", "resolved": "https://registry.nlark.com/path-type/download/path-type-4.0.0.tgz",
"integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=", "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=",
"dev": true, "dev": true
"optional": true
}, },
"pbkdf2": { "pbkdf2": {
"version": "3.1.2", "version": "3.1.2",
...@@ -8349,6 +8530,53 @@ ...@@ -8349,6 +8530,53 @@
"postcss": "^7.0.0" "postcss": "^7.0.0"
} }
}, },
"postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
"dev": true,
"requires": {
"glob": "^7.1.2",
"object-assign": "^4.1.1",
"postcss": "^6.0.9",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"postcss-js": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
"integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
"dev": true,
"requires": {
"camelcase-css": "^2.0.1",
"postcss": "^7.0.18"
}
},
"postcss-load-config": { "postcss-load-config": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.nlark.com/postcss-load-config/download/postcss-load-config-2.1.2.tgz", "resolved": "https://registry.nlark.com/postcss-load-config/download/postcss-load-config-2.1.2.tgz",
...@@ -8656,6 +8884,16 @@ ...@@ -8656,6 +8884,16 @@
"postcss": "^7.0.6" "postcss": "^7.0.6"
} }
}, },
"postcss-nested": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
"dev": true,
"requires": {
"postcss": "^7.0.32",
"postcss-selector-parser": "^6.0.2"
}
},
"postcss-normalize-charset": { "postcss-normalize-charset": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-4.0.1.tgz?cache=0&sync_timestamp=1621449593655&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-normalize-charset%2Fdownload%2Fpostcss-normalize-charset-4.0.1.tgz", "resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-4.0.1.tgz?cache=0&sync_timestamp=1621449593655&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-normalize-charset%2Fdownload%2Fpostcss-normalize-charset-4.0.1.tgz",
...@@ -8838,6 +9076,87 @@ ...@@ -8838,6 +9076,87 @@
} }
} }
}, },
"postcss-px-to-viewport-opt": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/postcss-px-to-viewport-opt/-/postcss-px-to-viewport-opt-0.0.4.tgz",
"integrity": "sha512-pn8fOrZ/qgiP7fNiYxoIL/iZhijy8f9pm+YUXvUTABY0H1mC5WzH7n1BkfCmRHANzSdZj2ipLOrwgomro3RNcA==",
"dev": true,
"requires": {
"object-assign": "^4.0.1",
"postcss": "^5.0.2"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"dependencies": {
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"has-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
"dev": true
},
"postcss": {
"version": "5.2.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"requires": {
"chalk": "^1.1.3",
"js-base64": "^2.1.9",
"source-map": "^0.5.6",
"supports-color": "^3.2.3"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
"has-flag": "^1.0.0"
}
}
}
},
"postcss-reduce-initial": { "postcss-reduce-initial": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.nlark.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz?cache=0&sync_timestamp=1621449599206&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-reduce-initial%2Fdownload%2Fpostcss-reduce-initial-4.0.3.tgz", "resolved": "https://registry.nlark.com/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz?cache=0&sync_timestamp=1621449599206&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-reduce-initial%2Fdownload%2Fpostcss-reduce-initial-4.0.3.tgz",
...@@ -8916,6 +9235,86 @@ ...@@ -8916,6 +9235,86 @@
"integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=", "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
"dev": true "dev": true
}, },
"postcss-viewport-units": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/postcss-viewport-units/-/postcss-viewport-units-0.1.6.tgz",
"integrity": "sha512-uddXE6gtmuPwMICbZGSA4HijOGrUkUNacvCktXPB9lsM/bSq8aBkWUxfuPGDFLhdJYZTtCANzeQ/65fAfq+6Tw==",
"dev": true,
"requires": {
"postcss": "^5.2.8"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"dependencies": {
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"has-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
"dev": true
},
"postcss": {
"version": "5.2.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"requires": {
"chalk": "^1.1.3",
"js-base64": "^2.1.9",
"source-map": "^0.5.6",
"supports-color": "^3.2.3"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
"has-flag": "^1.0.0"
}
}
}
},
"prepend-http": { "prepend-http": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.nlark.com/prepend-http/download/prepend-http-1.0.4.tgz", "resolved": "https://registry.nlark.com/prepend-http/download/prepend-http-1.0.4.tgz",
...@@ -8939,6 +9338,12 @@ ...@@ -8939,6 +9338,12 @@
"renderkid": "^2.0.4" "renderkid": "^2.0.4"
} }
}, },
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
"process": { "process": {
"version": "0.11.10", "version": "0.11.10",
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz", "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
...@@ -9046,6 +9451,37 @@ ...@@ -9046,6 +9451,37 @@
"integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=", "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
"dev": true "dev": true
}, },
"purgecss": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
"integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
"dev": true,
"requires": {
"commander": "^6.0.0",
"glob": "^7.0.0",
"postcss": "^8.2.1",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"dev": true
},
"postcss": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
"integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
"dev": true,
"requires": {
"colorette": "^1.2.2",
"nanoid": "^3.1.23",
"source-map-js": "^0.6.2"
}
}
}
},
"q": { "q": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.nlark.com/q/download/q-1.5.1.tgz", "resolved": "https://registry.nlark.com/q/download/q-1.5.1.tgz",
...@@ -9086,6 +9522,18 @@ ...@@ -9086,6 +9522,18 @@
"integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=", "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
"dev": true "dev": true
}, },
"queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true
},
"quick-lru": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
"dev": true
},
"randombytes": { "randombytes": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.nlark.com/randombytes/download/randombytes-2.1.0.tgz", "resolved": "https://registry.nlark.com/randombytes/download/randombytes-2.1.0.tgz",
...@@ -9159,6 +9607,24 @@ ...@@ -9159,6 +9607,24 @@
"picomatch": "^2.2.1" "picomatch": "^2.2.1"
} }
}, },
"reduce-css-calc": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
"integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
"dev": true,
"requires": {
"css-unit-converter": "^1.1.1",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
}
}
},
"regenerate": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.nlark.com/regenerate/download/regenerate-1.4.2.tgz", "resolved": "https://registry.nlark.com/regenerate/download/regenerate-1.4.2.tgz",
...@@ -9433,8 +9899,7 @@ ...@@ -9433,8 +9899,7 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/resolve-from/download/resolve-from-4.0.0.tgz", "resolved": "https://registry.npm.taobao.org/resolve-from/download/resolve-from-4.0.0.tgz",
"integrity": "sha1-SrzYUq0y3Xuqv+m0DgCjbbXzkuY=", "integrity": "sha1-SrzYUq0y3Xuqv+m0DgCjbbXzkuY=",
"dev": true, "dev": true
"optional": true
}, },
"resolve-url": { "resolve-url": {
"version": "0.2.1", "version": "0.2.1",
...@@ -9464,6 +9929,12 @@ ...@@ -9464,6 +9929,12 @@
"integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=", "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
"dev": true "dev": true
}, },
"reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
"dev": true
},
"rgb-regex": { "rgb-regex": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/rgb-regex/download/rgb-regex-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/rgb-regex/download/rgb-regex-1.0.1.tgz",
...@@ -9495,6 +9966,15 @@ ...@@ -9495,6 +9966,15 @@
"inherits": "^2.0.1" "inherits": "^2.0.1"
} }
}, },
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
"dev": true,
"requires": {
"queue-microtask": "^1.2.2"
}
},
"run-queue": { "run-queue": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz", "resolved": "https://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
...@@ -10394,6 +10874,240 @@ ...@@ -10394,6 +10874,240 @@
"util.promisify": "~1.0.0" "util.promisify": "~1.0.0"
} }
}, },
"tailwindcss": {
"version": "npm:@tailwindcss/postcss7-compat@2.2.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.7.tgz",
"integrity": "sha512-1QkWUEeLV1AoNipMCE6IlL7XYScGb+DAzaXy35ooMDvl0G8kCMHBNqGxyVAnTcK8gyJNUzkKXExkUnbjAndd/g==",
"dev": true,
"requires": {
"arg": "^5.0.0",
"autoprefixer": "^9",
"bytes": "^3.0.0",
"chalk": "^4.1.1",
"chokidar": "^3.5.2",
"color": "^3.2.0",
"cosmiconfig": "^7.0.0",
"detective": "^5.2.0",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.2.7",
"fs-extra": "^10.0.0",
"glob-parent": "^6.0.0",
"html-tags": "^3.1.0",
"is-glob": "^4.0.1",
"lodash": "^4.17.21",
"lodash.topath": "^4.5.2",
"modern-normalize": "^1.1.0",
"node-emoji": "^1.8.1",
"normalize-path": "^3.0.0",
"object-hash": "^2.2.0",
"postcss": "^7",
"postcss-functions": "^3",
"postcss-js": "^2",
"postcss-load-config": "^3.1.0",
"postcss-nested": "^4",
"postcss-selector-parser": "^6.0.6",
"postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3",
"purgecss": "^4.0.3",
"quick-lru": "^5.1.1",
"reduce-css-calc": "^2.1.8",
"resolve": "^1.20.0",
"tmp": "^0.2.1"
},
"dependencies": {
"@nodelib/fs.stat": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"cosmiconfig": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
"integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
"dev": true,
"requires": {
"@types/parse-json": "^4.0.0",
"import-fresh": "^3.2.1",
"parse-json": "^5.0.0",
"path-type": "^4.0.0",
"yaml": "^1.10.0"
}
},
"fast-glob": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dev": true,
"requires": {
"@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.2",
"merge2": "^1.3.0",
"micromatch": "^4.0.4"
},
"dependencies": {
"glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
}
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"fs-extra": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
"integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^2.0.0"
}
},
"glob-parent": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.1.tgz",
"integrity": "sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
"integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
"dev": true,
"requires": {
"import-from": "^3.0.0"
}
},
"import-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
"integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
"dev": true,
"requires": {
"resolve-from": "^5.0.0"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"micromatch": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
"dev": true,
"requires": {
"braces": "^3.0.1",
"picomatch": "^2.2.3"
}
},
"postcss-load-config": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
"integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
"dev": true,
"requires": {
"import-cwd": "^3.0.0",
"lilconfig": "^2.0.3",
"yaml": "^1.10.2"
}
},
"resolve-from": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
"dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
}
}
},
"tapable": { "tapable": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.nlark.com/tapable/download/tapable-1.1.3.tgz", "resolved": "https://registry.nlark.com/tapable/download/tapable-1.1.3.tgz",
...@@ -10585,6 +11299,26 @@ ...@@ -10585,6 +11299,26 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true "dev": true
}, },
"tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
"integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
"dev": true,
"requires": {
"rimraf": "^3.0.0"
},
"dependencies": {
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dev": true,
"requires": {
"glob": "^7.1.3"
}
}
}
},
"to-arraybuffer": { "to-arraybuffer": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/to-arraybuffer/download/to-arraybuffer-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/to-arraybuffer/download/to-arraybuffer-1.0.1.tgz",
...@@ -10933,8 +11667,7 @@ ...@@ -10933,8 +11667,7 @@
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603180004159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz", "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603180004159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz",
"integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=", "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=",
"dev": true, "dev": true
"optional": true
}, },
"unpipe": { "unpipe": {
"version": "1.0.0", "version": "1.0.0",
...@@ -11123,6 +11856,17 @@ ...@@ -11123,6 +11856,17 @@
"spdx-expression-parse": "^3.0.0" "spdx-expression-parse": "^3.0.0"
} }
}, },
"vant": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/vant/-/vant-3.2.0.tgz",
"integrity": "sha512-byPCnTs+0/oxeKOVrGsNyzDnmLyNzv5hvGB7IA6Y+1LWKSbtf0Ll83ViO8dy/Qv0lpBJq2A2EcR3Swn5UweIvA==",
"requires": {
"@vant/icons": "^1.7.0",
"@vant/lazyload": "^1.2.0",
"@vant/popperjs": "^1.1.0",
"@vant/use": "^1.3.0"
}
},
"vary": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.nlark.com/vary/download/vary-1.1.2.tgz", "resolved": "https://registry.nlark.com/vary/download/vary-1.1.2.tgz",
...@@ -12107,8 +12851,7 @@ ...@@ -12107,8 +12851,7 @@
"version": "1.10.2", "version": "1.10.2",
"resolved": "https://registry.nlark.com/yaml/download/yaml-1.10.2.tgz", "resolved": "https://registry.nlark.com/yaml/download/yaml-1.10.2.tgz",
"integrity": "sha1-IwHF/78StGfejaIzOkWeKeeSDks=", "integrity": "sha1-IwHF/78StGfejaIzOkWeKeeSDks=",
"dev": true, "dev": true
"optional": true
}, },
"yargs": { "yargs": {
"version": "16.2.0", "version": "16.2.0",
......
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vant": "^3.2.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
...@@ -16,11 +18,17 @@ ...@@ -16,11 +18,17 @@
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0",
"babel-plugin-import": "^1.13.3",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"typescript": "~4.1.5" "typescript": "~4.1.5",
"autoprefixer": "^9.8.6",
"postcss-px-to-viewport-opt": "0.0.4",
"postcss-viewport-units": "^0.1.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
} }
} }
// postcss.config.js
module.exports = {
plugins: {
"postcss-px-to-viewport-opt": {
"viewportWidth": 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
"viewportHeight": 1336, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
"unitPrecision": 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
"viewportUnit": "vw", // 指定需要转换成的视窗单位,建议使用vw
"selectorBlackList": [".ignore", ".hairlines"], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
"minPixelValue": 2, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
"mediaQuery": false, // 允许在媒体查询中转换`px`
"exclude": /(\/|\\)(node_modules)(\/|\\)/
},
"postcss-viewport-units": {
filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
},
tailwindcss: {},
autoprefixer: {},
}
}
\ No newline at end of file
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<script
src="https://at.alicdn.com/t/font_2711356_80n431prnyh.js?spm=a313x.7781069.1998910419.63&file=font_2711356_80n431prnyh.js"></script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
<template> <template>
<div id="nav"> <div id="nav">
<router-link to="/">Home</router-link> | <router-view />
<router-link to="/about">About</router-link>
</div> </div>
<router-view/>
</template> </template>
<style lang="less"> <style lang="less">
#app { .fade-enter-active,
font-family: Avenir, Helvetica, Arial, sans-serif; .fade-leave-active {
-webkit-font-smoothing: antialiased; transition: opacity 0.5s;
-moz-osx-font-smoothing: grayscale; }
text-align: center; .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
color: #2c3e50; opacity: 0;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
} }
#nav { .flex-col {
padding: 30px; display: flex;
flex-direction: column;
a { }
font-weight: bold; .flex-row {
color: #2c3e50; display: flex;
flex-direction: row;
&.router-link-exact-active {
color: #42b983;
}
}
} }
</style> </style>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1624608078382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="809" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M57.690141 515.605634a461.521127 461.521127 0 1 0 923.042253 0 461.521127 461.521127 0 1 0-923.042253 0Z" fill="#FFFFFF" p-id="810"></path><path d="M489.04293 51.290141c-15.95493 0.886986-37.927662 2.906141-39.975662 3.670535-0.847324 0.31369-5.920451 1.211493-11.274817 1.993916-5.357972 0.782423-12.738704 2.087662-16.402028 2.902535-3.663324 0.811268-9.890254 2.185014-13.838423 3.050366-3.948169 0.865352-9.713577 2.264338-12.814423 3.104451-3.100845 0.840113-9.252056 2.498704-13.668957 3.681352-7.936 2.127324-29.248901 9.536901-32.699493 11.368563-0.980732 0.519211-2.271549 0.94107-2.87369 0.941071-0.605746 0-3.263099 0.959099-5.909634 2.127324-7.178817 3.165746-10.57893 4.622423-14.491042 6.194478-3.547944 1.427831-31.300507 14.772282-35.775099 17.198874-2.743887 1.492732-4.150085-0.129803 31.585352 36.496225a3127.140958 3127.140958 0 0 1 27.723718 28.75493c11.343324 12.021183 11.401014 12.064451 14.512676 10.773633 6.093521-2.527549 40.90231-12.727887 49.534198-14.516281 32.515606-6.735324 54.704676-9.237634 96.328112-10.867381 22.921014-0.894197 69.992563 3.162141 96.382197 8.307381 16.218141 3.158535 18.504113 3.64169 22.04124 4.654873 1.972282 0.562479 8.199211 2.174197 13.838422 3.580394 5.635606 1.402592 15.320338 4.182535 21.518423 6.176451 6.198085 1.993915 11.343324 3.627268 11.43707 3.627268 0.093746 0 4.694535-5.419268 10.225578-12.046423a1766.270197 1766.270197 0 0 1 13.676169-16.225352c1.99031-2.300394 5.927662-6.912 8.743662-10.250817 7.08507-8.386704 23.833239-26.548282 30.135887-32.681465 2.877296-2.797972 5.228169-5.563493 5.224564-6.151211-0.010817-1.254761-17.252958-9.792901-40.484057-20.036507-9.472-4.175324-11.815662-5.116394-12.771155-5.116394-0.602141 0-1.896563-0.436282-2.87369-0.973522-7.59707-4.157296-53.399437-17.195268-76.096901-21.659042-38.219718-7.517746-80.452507-10.337352-120.958197-8.080225m411.222535 196.561127c-0.634592 2.091268-2.978254 11.18107-5.210141 20.202366-4.438535 17.938028-7.82062 30.391887-12.518761 46.126873-1.683831 5.635606-4.005859 13.477859-5.163267 17.426028-1.153803 3.944563-5.058704 16.052282-8.678761 26.90524l-6.580281 19.730028 1.921802 3.843605c1.056451 2.116507 5.880789 11.46231 10.71955 20.764846 16.459718 31.657465 28.542197 62.683944 35.043155 90.000225 1.435042 6.02862 3.043155 12.580056 3.573183 14.552338 6.706479 24.979831 11.307268 66.841239 11.429859 104.044169 0.036056 11.274817-0.407437 22.805634-0.991549 25.625239-2.592451 12.558423-3.320789 15.349183-5.826705 22.322479a331.584901 331.584901 0 0 0-3.602028 10.477972c-2.336451 7.633127-14.786704 30.921915-23.01476 43.054873-13.622085 20.090592-18.287775 25.978592-34.920564 44.075268a1597.432789 1597.432789 0 0 0-10.351774 11.336113c-6.54062 7.384338-37.581521 33.975887-50.046198 42.86738-38.08631 27.179268-73.262873 47.478986-111.27707 64.219944-13.153352 5.794254-43.473127 17.397183-45.45262 17.397183-0.450704 0-2.271549 0.649014-4.049127 1.442253-4.01307 1.792-16.928451 5.732958-18.792563 5.732958-0.757183 0-2.181408 0.421859-3.158535 0.937465-1.662197 0.876169-9.410704 2.761915-27.918423 6.793014-4.229408 0.923042-10.485183 2.325634-13.903324 3.122479-3.418141 0.796845-7.802592 1.449465-9.738817 1.45307-1.936225 0.003606-8.13431 0.721127-13.773521 1.590085-29.050592 4.485408-70.06107 0.915831-109.167774-9.500846-8.375887-2.231887-28.909972-8.523718-31.264451-9.580169-1.128563-0.504789-4.355606-1.67662-7.175211-2.599661-26.45093-8.675155-87.072451-37.029859-107.354141-50.208451-2.102085-1.366535-4.085183-2.484282-4.413296-2.484282-0.324507 0-4.088789-2.307606-8.361465-5.127211-4.276282-2.816-7.910761-5.123606-8.076619-5.123606-2.159775 0-36.900056-24.922141-52.717972-37.819493-30.864225-25.163718-42.214761-36.077972-67.180169-64.573296-4.380845-5.00462-15.846761-20.216789-15.846761-21.028056 0-0.266817-2.112901-3.565972-4.694535-7.337465-2.585239-3.771493-4.964958-7.607887-5.29307-8.523718-0.328113-0.915831-1.424225-2.859268-2.433803-4.319549-18.230085-26.357183-22.102535-52.977577-16.308282-112.149634 1.683831-17.195268 8.083831-54.84169 11.235155-66.116507 5.541859-19.809352 10.997183-38.093521 12.378141-41.515268 0.457915-1.128563 1.59369-4.532282 2.523943-7.561014 2.203042-7.178817 11.729127-31.451944 15.936902-40.617465 1.813634-3.944563 6.035831-13.074028 9.385465-20.285295 7.964845-17.144789 7.972056-18.096676 0.385803-38.656-8.101859-21.943887-14.08-40.170366-16.982536-51.762479-0.421859-1.691042-1.795606-6.767775-3.050366-11.278423-3.973408-14.271099-7.157183-27.676845-9.435944-39.755718-1.409803-7.474479-1.305239-7.532169-10.056112 5.783437-14.090817 21.442704-29.49769 49.671211-37.282254 68.315943a484.308732 484.308732 0 0 1-4.745014 10.816902c-1.550423 3.414535-3.140507 7.676394-3.533521 9.472-0.39662 1.792-1.142986 3.522704-1.662197 3.847211-0.522817 0.320901-0.948282 1.294423-0.948282 2.16338 0 0.865352-0.645408 3.032338-1.435042 4.80631-3.760676 8.458817-9.760451 29.677972-16.560676 58.584338-4.719775 20.065352-8.098254 48.632789-10.348169 87.490704-0.980732 16.982535 2.902535 62.496451 7.359098 86.257578 2.794366 14.876845 6.760563 32.508394 9.226817 40.999662 7.467268 25.71538 9.003268 30.359437 13.438198 40.64631 0.768 1.777577 1.39538 3.742648 1.39538 4.370028 0 0.62738 0.447099 1.939831 0.995155 2.920563 0.544451 0.977127 2.902535 6.392789 5.23538 12.028394 23.263549 56.215437 66.823211 116.743211 115.921127 161.074479 18.280563 16.506592 27.05307 23.389746 53.644619 42.088564 6.34231 4.460169 21.622986 13.76631 33.316057 20.296112 6.955268 3.883268 41.709972 21.017239 42.633014 21.01724 0.475944 0 2.678986 0.933859 13.232676 5.610366 6.097127 2.704225 27.107155 9.771268 45.614873 15.349183 76.587268 23.068845 176.896 23.699831 255.751211 1.600902 4.510648-1.265577 9.738817-2.664563 11.617353-3.115268a61.602254 61.602254 0 0 0 6.151211-1.853296c1.503549-0.56969 6.190873-2.066028 10.420282-3.324394 4.229408-1.254761 8.379493-2.632113 9.223211-3.057578 0.847324-0.42907 3.847211-1.568451 6.663211-2.53476a142.134085 142.134085 0 0 0 8.202817-3.090028 1598.233239 1598.233239 0 0 1 12.298817-5.188507c46.613634-19.481239 95.462761-50.962028 133.217352-85.853747 18.460845-17.058254 27.727324-26.638423 44.197859-45.686986 3.486648-4.031099 18.655549-24.172169 26.746592-35.511887 26.851155-37.628394 51.913915-92.855887 65.557633-144.448902 16.182085-61.194817 18.511324-146.424789 5.54186-202.961126-0.519211-2.253521-1.943437-8.711211-3.169352-14.350423-1.225915-5.635606-2.844845-12.324056-3.598423-14.862422-6.421634-21.659042-7.968451-26.656451-9.345803-30.240451-0.865352-2.253521-2.181408-5.71493-2.920563-7.687211-8.642704-23.079662-20.591775-49.519775-29.187606-64.576902-10.791662-18.900732-20.656676-34.70062-26.696113-42.752l-4.770253-6.363943-1.150197 3.800338m-139.325296 189.55538c1.550423 0.237972 4.088789 0.237972 5.639211 0 1.550423-0.234366 0.281239-0.425465-2.819605-0.425465s-4.370028 0.191099-2.819606 0.425465m-114.806986 102.479324c0.987944 0.259606 2.603268 0.259606 3.587606 0 0.987944-0.259606 0.180282-0.468732-1.792-0.468733-1.975887 0-2.779944 0.209127-1.795606 0.468733" fill="#F30504" p-id="811"></path><path d="M139.300056 24.388507c-17.930817 11.822873-29.890704 71.860282-24.406535 122.512225 0.562479 5.181296 1.471099 15.18693 2.022761 22.232338 1.719887 21.947493 4.510648 43.509183 7.770141 59.965296 0.778817 3.948169 1.730704 10.175099 2.112901 13.838423 0.382197 3.66693 1.027606 6.893972 1.438648 7.175211 0.407437 0.284845 1.243944 3.050366 1.856901 6.151211a514.487887 514.487887 0 0 0 9.41431 39.463662c1.254761 4.510648 2.628507 9.58738 3.050366 11.278423 2.902535 11.592113 8.880676 29.818592 16.982536 51.762479 7.586254 20.559324 7.579042 21.511211-0.385803 38.656-3.349634 7.211268-7.571831 16.340732-9.385465 20.285295-4.207775 9.165521-13.733859 33.438648-15.936902 40.617465-0.930254 3.028732-2.066028 6.432451-2.523943 7.561014-1.380958 3.421746-6.836282 21.705915-12.378141 41.515268-1.723493 6.172845-6.00338 28.859493-8.700394 46.126873-2.24631 14.411718-5.967324 54.286423-5.141634 55.112113 0.205521 0.205521 3.767887-0.144225 7.91076-0.778817 15.457352-2.372507 24.514704-2.953014 46.487437-2.971042 25.188958-0.021634 37.282254 1.193465 59.125183 5.934873 37.77262 8.202817 82.244507 34.015549 113.047437 65.615324 6.281014 6.443268 5.754592 6.511775 9.241239-1.186254 29.360676-64.814873 63.85938-102.500958 112.777014-123.19369 31.087775-13.149746 74.582535-15.298704 112.243381-5.545465 50.413972 13.056 93.090254 52.65307 115.823774 107.469522a387.017915 387.017915 0 0 0 4.150085 9.738816c0.530028 1.124958 2.152563 5.257014 3.609239 9.179944 1.45307 3.926535 2.888113 7.532169 3.18738 8.015324 0.299268 0.483155 3.609239-2.044394 7.359099-5.617577 24.002704-22.877746 45.932169-37.170479 80.398423-52.404282 2.134535-0.944676 4.370028-1.716282 4.972169-1.716282 0.598535 0 2.545577-0.645408 4.319549-1.435042 9.508056-4.229408 27.70569-8.610254 48.333521-11.638986 19.495662-2.859268 76.439437-1.701859 85.078535 1.73431 2.743887 1.088901 1.914592-23.404169-1.957859-57.848789-1.838873-16.337127-4.853183-33.528789-7.824225-44.590873-0.530028-1.972282-2.138141-8.523718-3.573183-14.552338-6.500958-27.316282-18.583437-58.342761-35.043155-90.000225a2629.044282 2629.044282 0 0 1-10.71955-20.764846l-1.921802-3.843605 6.580281-19.730028c3.620056-10.852958 7.524958-22.960676 8.678761-26.90524 1.157408-3.948169 3.479437-11.790423 5.163267-17.426028 4.734197-15.853972 8.098254-28.264563 12.504338-46.126873 2.224676-9.021296 4.701746-18.478873 5.505803-21.013634 1.460282-4.611606 2.606873-9.569352 5.339944-23.065239 4.791887-23.649352 7.337465-38.464901 9.068169-52.790085l2.603268-21.525634c1.489127-12.367324 1.579268-58.861972 0.129802-67.656112-2.729465-16.553465-3.407324-19.708394-5.877183-27.269409-6.511775-19.946366-13.600451-31.506028-18.846648-30.727211-2.001127 0.295662-5.942085 0.829296-8.76169 1.186253-4.618817 0.580507-11.689465 2.289577-25.113239 6.064676-31.307718 8.808563-82.496901 41.392676-110.144902 70.115155-2.228282 2.314817-4.651268 4.207775-5.383211 4.207775a1.330479 1.330479 0 0 0-1.326873 1.319662c0 0.728338-2.354479 3.609239-5.231775 6.407211-6.302648 6.133183-23.050817 24.294761-30.135887 32.681465-2.816 3.338817-6.753352 7.950423-8.743662 10.250817-1.993915 2.300394-8.145127 9.601803-13.676169 16.225352-5.531042 6.627155-10.131831 12.046423-10.225578 12.046423-0.093746 0-5.238986-1.633352-11.43707-3.627268a404.177127 404.177127 0 0 0-21.518423-6.176451c-5.639211-1.406197-11.866141-3.017915-13.838422-3.580394-3.537127-1.013183-5.823099-1.496338-22.04124-4.654873-26.389634-5.145239-73.461183-9.201577-96.382197-8.307381-41.623437 1.629746-63.812507 4.132056-96.328112 10.867381-8.631887 1.788394-43.440676 11.988732-49.534198 14.516281-3.111662 1.290817-3.169352 1.247549-14.512676-10.773633a3127.140958 3127.140958 0 0 0-27.723718-28.75493c-29.515718-30.251268-33.846085-34.963831-33.034817-35.95538 0.425465-0.519211 0.353352-0.598535-0.165859-0.176676-0.519211 0.425465-3.998648-2.112901-7.730479-5.635606-37.606761-35.493859-65.150197-56.060394-91.774197-68.535887-19.401915-9.093408-42.560901-13.51031-48.899606-9.327775m355.140507 26.573521c1.557634 0.237972 3.865239 0.230761 5.123606-0.014422 1.261972-0.241577-0.014423-0.432676-2.834028-0.425465-2.816 0.007211-3.847211 0.205521-2.289578 0.439887m-152.251493 290.808789c30.680338 8.166761 52.577352 50.248113 33.654986 64.681465-10.524845 8.026141-47.908056 11.794028-75.909408 7.643943-24.085634-3.565972-27.464113-38.623549-5.650028-58.649239 14.112451-12.962254 31.715155-17.984901 47.90445-13.676169m366.379268 0.126197c32.840113 8.512901 49.750535 45.982648 29.952 66.368901-11.63538 11.977915-77.387718 9.216-89.340394-3.753464-4.575549-4.964958-7.207662-14.729014-5.311099-19.715606 0.540845-1.42062 0.984338-3.547944 0.984338-4.72338 0-3.84 5.397634-13.279549 11.141409-19.484845 15.965746-17.245746 33.748732-23.566423 52.573746-18.691606m62.121465 100.413296c2.87369 10.391437 3.230648 13.668958 3.273915 29.901521l0.046874 16.575099-6.919212 6.281014c-14.076394 12.774761-28.33307 20.638648-53.56169 29.537352-13.971831 4.928901-18.031775 6.06107-41.511662 11.55245-15.251831 3.569577-41.161915 5.181296-54.315267 3.378479l-4.885634-0.670648 0.638197-6.097126c1.45307-13.924958 13.910535-28.069859 39.600676-44.976676 28.012169-18.432 44.082479-27.370366 74.824113-41.616226 10.92507-5.06231 28.145577-9.396282 36.330366-9.143887l5.06231 0.155042 1.417014 5.123606m-482.556395-1.87493c8.649915 1.788394 14.757859 3.695775 21.525634 6.720902 11.527211 5.152451 28.232113 13.654535 39.975662 20.346591a1899.177465 1899.177465 0 0 0 18.309409 10.326535c35.908507 19.733634 57.502648 40.375887 57.535098 54.993127 0.054085 23.476282-117.936676-3.684958-154.259831-35.508281-11.166648-9.782085-13.301183-32.793239-4.907267-52.952339 3.136901-7.532169 3.800338-7.651155 21.821295-3.926535m-240.650816 12.637747c0 1.975887 0.212732 2.783549 0.468732 1.795605a8.361465 8.361465 0 0 0 0-3.587605c-0.256-0.987944-0.468732-0.180282-0.468732 1.792m939.995943 13.838422c0.010817 2.257127 0.223549 3.057577 0.468733 1.784789 0.245183-1.276394 0.234366-3.122479-0.021634-4.103211-0.256-0.977127-0.457915 0.064901-0.447099 2.318422m-944.095549 31.264451c0 1.975887 0.209127 2.779944 0.468732 1.795606a8.473239 8.473239 0 0 0 0-3.587606c-0.259606-0.987944-0.468732-0.180282-0.468732 1.792m946.280563 13.838423c0 6.767775 0.165859 9.399887 0.367775 5.855549 0.201915-3.547944 0.19831-9.082592-0.003606-12.302423-0.201915-3.219831-0.367775-0.317296-0.364169 6.446874m-946.280563 19.989633c0 1.972282 0.209127 2.779944 0.468732 1.792a8.473239 8.473239 0 0 0 0-3.587605c-0.259606-0.984338-0.468732-0.176676-0.468732 1.795605m944.095549 29.212845c0.010817 2.257127 0.223549 3.057577 0.468733 1.784789 0.245183-1.276394 0.234366-3.122479-0.021634-4.103211-0.256-0.977127-0.457915 0.064901-0.447099 2.318422m-62.507267 54.841691c0 2.538366 0.201915 3.573183 0.443493 2.307605a14.570366 14.570366 0 0 0 0-4.615211c-0.241577-1.265577-0.443493-0.230761-0.443493 2.307606m-738.318423 146.904338c0 0.176676 1.499944 1.67662 3.331606 3.331605l3.331605 3.010704-3.010704-3.331605c-2.808789-3.104451-3.652507-3.803944-3.652507-3.010704m648.282141 15.309521l-3.010704 3.331605 3.331605-3.010704c1.831662-1.654986 3.331606-3.15493 3.331606-3.331606 0-0.789634-0.843718-0.093746-3.652507 3.010705m-666.220169 49.974084c2.199437 2.253521 4.233014 4.099606 4.514253 4.099606 0.284845 0-1.287211-1.846085-3.490253-4.099606-2.203042-2.257127-4.233014-4.103211-4.517859-4.103211-0.281239 0 1.290817 1.846085 3.493859 4.103211m25.625239 25.62524c2.203042 2.253521 4.233014 4.099606 4.517859 4.099605 0.281239 0-1.290817-1.846085-3.493859-4.099605-2.199437-2.257127-4.233014-4.099606-4.514253-4.099606-0.281239 0 1.287211 1.842479 3.490253 4.099606m638.54693 5.379605l-3.010704 3.331606 3.331605-3.010704c1.831662-1.654986 3.331606-3.15493 3.331606-3.331606 0-0.789634-0.847324-0.093746-3.652507 3.010704m-317.436394 56.850028c1.276394 0.245183 3.118873 0.234366 4.099605-0.021633 0.980732-0.256-0.061296-0.457915-2.318422-0.447099-2.253521 0.010817-3.057577 0.223549-1.781183 0.468732m-25.124057 61.483268c0.984338 0.259606 2.599662 0.259606 3.587606 0 0.984338-0.256 0.176676-0.468732-1.795606-0.468732s-2.779944 0.212732-1.792 0.468732" fill="#FBA10B" p-id="812"></path><path d="M268.947831 439.014761c-5.509408 7.409577-9.270085 32.108169-6.486535 42.643831 0.537239 2.037183 1.22231 4.914479 1.521577 6.389183 1.146592 5.642817 16.488563 17.487324 34.293183 26.476169 35.537127 17.938028 105.493634 31.989183 122.656451 24.630084l4.838761-2.073239-0.566085-5.484169c-1.373746-13.337239-13.586028-26.295887-41.915493-44.482705-5.455324-3.497465-10.175099-6.363944-10.496-6.363943-0.320901 0-5.545465-2.934986-11.613746-6.522592-23.151775-13.694197-47.980169-26.133634-60.336676-30.229634-12.926197-4.283493-30.384676-7.012958-31.895437-4.982985m484.049127-0.65262c-19.290141 4.009465-45.459831 16.023437-78.909296 36.225803-43.264 26.130028-58.894423 41.284507-60.708056 58.869183l-0.569691 5.502197 11.887775 0.742761c46.444169 2.902535 113.649577-18.287775 142.90569-45.059606l6.407212-5.862761-0.046874-16.571493c-0.043268-15.882817-0.33893-18.688-3.151324-29.641915l-1.247549-4.867606-7.261746 0.118986c-3.991437 0.064901-8.181183 0.310085-9.306141 0.544451m-271.12924 164.928901c-13.575211 4.23662-19.463211 22.221521-15.421295 47.107606 3.104451 19.109859 26.162479 40.220845 53.604957 49.072676 1.604507 0.515606 1.795606 2.210254 1.795606 15.882817v15.309521l-3.465014 2.044394c-1.90738 1.121352-4.97938 4.283493-6.829071 7.020169-1.84969 2.736676-3.511887 5.156056-3.688563 5.376-1.604507 2.011944-39.261746 0.356958-54.185465-2.376112-8.220845-1.507155-32.393014-2.192225-33.633352-0.951888-0.360563 0.360563 0.71031 2.22107 2.38693 4.128451 4.366423 4.975775 6.641577 9.991211 8.628281 19.044958l1.745127 7.943211h4.052733c4.474592 0 4.514254 0.054085 7.59707 10.250817 2.084056 6.883155 8.029746 19.820169 10.625803 23.12293l1.90738 2.426591 1.93262-4.305127c1.70907-3.803944 1.914592-6.71369 1.770366-24.918535l-0.162254-20.609803 5.289465 0.429071c2.906141 0.234366 9.439549 0.865352 14.512676 1.398986 30.09262 3.172958 67.324394 3.172958 93.793352 0 4.225803-0.508394 11.235155-1.215099 15.569127-1.572057l7.881916-0.649014-0.194705 19.76969c-0.183887 18.702423-0.072113 20.000451 2.098479 24.056789 2.376113 4.442141 4.370028 6.446873 4.370028 4.384451 0-0.65262 0.670648-2.639324 1.489127-4.416902 0.822085-1.777577 3.544338-8.534535 6.057465-15.017464l4.564732-11.786817 5.422874-1.647775 5.422873-1.647775 3.234253-11.729126c1.773972-6.450479 3.551549-13.438197 3.940958-15.522254l0.713916-3.793127-15.168902 0.021634c-12.493521 0.018028-15.893634 0.353352-19.311774 1.903775-6.079099 2.765521-14.408113 3.483042-30.820958 2.664563l-14.606423-0.731943-4.662084-6.003381c-2.697014-3.475831-5.761803-6.28462-7.272564-6.663211l-2.610478-0.65262 0.284845-15.507831 0.281239-15.507831 4.099606-1.892957c31.444732-14.519887 40.81938-28.408789 40.93476-60.650367 0.086535-24.514704-2.999887-30.143099-19.052169-34.73307-7.972056-2.278761-77.668958-2.336451-84.923493-0.072113m2.596057 171.905803c0.959099 4.514254 2.765521 6.327887 8.96 8.992451l5.257014 2.264338 3.396507-3.706592c5.916845-6.454085 10.625803-4.589972 17.166422 6.803831 4.164507 7.25093 9.284507 5.862761 19.25769-5.213746 4.597183-5.109183 4.240225-5.083944 9.958761-0.749972l4.579155 3.472225 3.793127-2.725859c4.43493-3.18738 5.494986-4.69093 6.479324-9.169127l0.724732-3.299155h-80.279437l0.706705 3.331606" fill="#060505" p-id="813"></path></svg>
\ No newline at end of file
<template>
</template>
<script lang="ts">
import Vue from 'vue'
export default defineComponent({
})
</script>
\ No newline at end of file
<template>
<div class="main4 flex-col">
<div class="bd3 flex-col">
<span class="info4">建信现金添益A</span>
<div class="section1 flex-row">
<div class="bd4 flex-col"><span class="info5">活期爆款</span></div>
<div class="bd5 flex-col"><span class="info6">存取灵活</span></div>
<div class="bd6 flex-col"><span class="word14">中底风险</span></div>
</div>
<span class="info7">2.73%</span>
<span class="txt8">预计年化收益</span>
<button class="section2 flex-col">
<span class="word15">立即查看</span>
</button>
</div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({});
</script>
<style lang="less" scoped>
.main4 {
z-index: 5;
height: 231px;
border-radius: 20px;
background: linear-gradient(180deg, #c6d4f6 0%, #ffffff 100%);
box-shadow: 0px 2px 3px 0px rgba(255, 255, 255, 0.5);
width: 335px;
justify-content: center;
align-items: center;
.bd3 {
z-index: auto;
width: 275px;
height: 191px;
.info4 {
z-index: 21;
width: 107px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: center;
}
.section1 {
z-index: auto;
width: 220px;
height: 20px;
justify-content: space-between;
margin: 15px 0 0 28px;
.bd4 {
z-index: 13;
height: 20px;
border-radius: 5px;
background-color: rgba(211, 221, 244, 1);
width: 70px;
justify-content: center;
align-items: center;
.info5 {
z-index: 14;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 12px;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
.bd5 {
z-index: 15;
height: 20px;
border-radius: 5px;
background-color: rgba(211, 221, 244, 1);
width: 70px;
justify-content: center;
align-items: center;
.info6 {
z-index: 16;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 12px;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
.bd6 {
z-index: 17;
height: 20px;
border-radius: 5px;
background-color: rgba(211, 221, 244, 1);
width: 70px;
justify-content: center;
align-items: center;
.word14 {
z-index: 18;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 12px;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
}
.info7 {
z-index: 19;
width: 91px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 42px;
text-align: center;
align-self: flex-end;
margin: 16px 87px 0 0;
}
.txt8 {
z-index: 20;
width: 72px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: center;
margin-top: 9px;
}
.section2 {
z-index: 11;
height: 40px;
border-radius: 20px;
background-color: rgba(62, 79, 175, 1);
margin-top: 10px;
width: 275px;
justify-content: center;
align-items: center;
.word15 {
z-index: 12;
width: 64px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="outer5 flex-row relative">
<div class="main2 flex-col">
<div class="bd2 flex-row">
<div class="layer1 flex-col">
<span class="txt5 overflow-hidden overflow-ellipsis">3.10%</span>
<span class="word8 overflow-hidden overflow-ellipsis"
>七日年化收益</span
>
</div>
<div class="layer2 flex-col"></div>
<div class="layer3 flex-col">
<span class="txt6 overflow-hidden overflow-ellipsis"
>乾元-sdfsdfsdfsdfsdfsdfsdf</span
>
<div class="word9 overflow-hidden overflow-ellipsis">
货币市场基金
</div>
<span class="txt7 overflow-hidden overflow-ellipsis"
>万分收益&nbsp;0.7357</span
>
</div>
</div>
</div>
<div class="orange flex items-center justify-center">
<div class="word16">推荐</div>
</div>
<div class="triangle-orange"></div>
<!-- <div class="blue flex items-center justify-center">
<div class="word16">新发</div>
</div>
<div class="triangle-blue"></div> -->
</div>
</template>
<style lang="less" scoped>
.triangle-orange {
position: absolute;
z-index: 99;
right: 0;
width: 0px;
height: 0px;
border-top: 4px solid #9e5906;
border-bottom: 4px solid transparent;
border-left: 3px solid #9e5906;
border-right: 3px solid transparent;
margin-top: 41px;
}
.triangle-blue {
position: absolute;
z-index: 99;
right: 0;
width: 0px;
height: 0px;
border-top: 4px solid #283fa0;
border-bottom: 4px solid transparent;
border-left: 3px solid #283fa0;
border-right: 3px solid transparent;
margin-top: 41px;
}
.outer5 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 10px 0 0 20px;
.main2 {
z-index: 58;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
.bd2 {
z-index: auto;
width: 260px;
height: 78px;
justify-content: space-between;
.layer1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
.txt5 {
z-index: 63;
width: 58px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 4px;
}
.word8 {
z-index: 67;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
}
.layer2 {
z-index: 68;
width: 1px;
height: 78px;
border: 1px solid #eaf0ff;
}
.layer3 {
z-index: auto;
width: 167px;
height: 74px;
.txt6 {
z-index: 64;
width: 167px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word9 {
z-index: 65;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt7 {
z-index: 66;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
}
}
}
}
.orange {
position: absolute;
z-index: 70;
top: 11px;
right: 0;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(255, 145, 13, 1);
}
.blue {
position: absolute;
z-index: 70;
top: 11px;
right: 0;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: #3555dc;
}
.main6 {
z-index: 60;
left: 306px;
top: 579px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(53, 85, 220, 1);
}
.word16 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div class="wrap12 flex mx-5 items-center">
<span class="word8">{{ title }}</span>
<span v-if="subtitle" class="ml-3 info2">{{ subtitle }}</span>
<div class="flex-grow"></div>
<span class="word9" v-if="iconName === 'icon-gengduo'">更多</span>
<icon
v-if="iconName === 'icon-gengduo'"
name="icon-gengduo"
color="#979BB6"
size="10"
/>
<icon
v-else-if="iconName === 'icon-shaixuan'"
:name="iconName"
color="#979BB6"
size="16"
@click="clickFilter"
/>
<icon v-else :name="iconName" color="#979BB6" size="16" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "../common/Icon.vue";
export default defineComponent({
emits: ["filter"],
components: { Icon },
props: {
title: {
type: String,
},
subtitle: {
type: String,
},
iconName: {
type: String,
default: "icon-gengduo",
},
},
methods: {
clickFilter() {
this.$emit("filter");
},
},
});
</script>
<style scoped>
.word8 {
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
text-align: center;
}
.word9 {
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
text-align: left;
}
.info2 {
z-index: 80;
width: 102px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
text-align: center;
margin: 0 0 0 14px;
}
</style>
\ No newline at end of file
<template>
<div class="mx-5">
<div class="wrap22 flex items-center">
<div class="box1 flex-col flex-grow">
<span class="info8">建信银行为您量身定做打造良好的信贷体验</span>
<div class="layer4 flex-row">
<span class="info9">建信个人贷</span>
<span class="word24">2021-07-10</span>
</div>
</div>
<div class="box2 flex-col ml-4 flex-shrink-0">
<img
class="pic3"
referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2c0a67c1d16ceff7bcf9fba3660fffcbd22643881df43f966f78f68c95b4907"
/>
</div>
</div>
<div class="wrap23 flex-col"></div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({});
</script>
<style scoped>
.wrap22 {
height: 88px;
justify-content: space-between;
margin: 21px 0 0;
}
.box1 {
z-index: auto;
height: 88px;
}
.info8 {
z-index: 205;
height: 50px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangSC-Medium;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.layer4 {
z-index: auto;
height: 25px;
margin-top: 13px;
justify-content: space-between;
}
.info9 {
z-index: 206;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.word24 {
z-index: 207;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.box2 {
z-index: 209;
position: relative;
height: 80px;
border-radius: 20px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd7b6ced5c00064ccb38620d2a9de003cbd2e2688ac377f17fc74f6fba4dadd11) -1px
0px no-repeat;
margin-top: 3px;
}
.pic3 {
width: 80px;
height: 80px;
}
.wrap23 {
height: 1px;
border: 1px solid #e7e7e7;
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="wrap18 flex mx-5 overflow-hidden">
<div class="flex-shrink-0 block2 outer3" style="width: 44%">
<div class="flex-col">
<div class="flex-col">
<div class="group2 mt-2 ml-2 flex items-center justify-center">
<img
class="icon9 mr-1"
referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb67f1b6bfda58737e89dadee59bd68fad0b4964489b7942f9159db2c704f25e4"
/>
<span class="word26">正在直播</span>
</div>
</div>
</div>
</div>
<div class="flex flex-col justify-center items-center mx-2.5">
<p class="word18 overflow-ellipsis overflow-hidden">
知名财经专家现场精彩讲座
</p>
<p class="word19 overflow-ellipsis overflow-hidden">
建设银行财经专家分析
</p>
</div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Icon from "../common/Icon.vue";
export default defineComponent({ components: { Icon } });
</script>
<style scoped>
.wrap18 {
height: 110px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
}
.word18 {
z-index: 82;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
line-height: 22px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.word19 {
z-index: 94;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
.outer3 {
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7071930f7e4936335b32a1512a498654730fabf8a2a83c8137f07d12a7c2b4bd)
100% no-repeat;
background-size: cover;
}
.block2 {
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb5e34933d0e615000378ebf1491cce32e934e21b7f3de7cddbddd3f05e03ed7a)
100% no-repeat;
background-size: cover;
}
.group2 {
width: fit-content;
padding: 0 9px;
z-index: 86;
height: 20px;
border-radius: 10px;
background-color: rgba(237, 110, 80, 1);
}
.icon9 {
z-index: 88;
width: 11px;
height: 12px;
}
.word26 {
z-index: 87;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
}
</style>
\ No newline at end of file
<template>
<div class="wrap15 flex mx-5 items-center">
<div class="bd5 ml-4">
<p class="word14">1000<span class="unit"></span></p>
<p class="txt8">最高可借</p>
</div>
<div
class="bd6 flex flex-col flex-shrink overflow-hidden overflow-ellipsis"
>
<span class="word15">抵押贷</span>
<span class="txt10">在家有房即可办理</span>
<span class="word16">在线审批15分钟出结果</span>
</div>
<div class="flex-grow"></div>
<icon name="icon-gengduo" color="#979BB6" size="15" class="mr-6" />
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Icon from "../common/Icon.vue";
export default defineComponent({ components: { Icon } });
</script>
<style scoped>
.wrap15 {
z-index: 98;
height: 109px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
}
.wrap16 {
z-index: auto;
}
.bd5 {
z-index: auto;
}
.unit {
font-size: 12px;
font-family: PingFangHK-Regular, PingFangHK;
font-weight: 400;
color: #f03a30;
line-height: 17px;
}
.word14 {
z-index: 106;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
letter-spacing: 0.36000001430511475px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 35px;
}
.txt8 {
z-index: 108;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
align-self: flex-start;
margin: 5px 0 0 0px;
}
.txt9 {
z-index: 107;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 20px 0 0 5px;
}
.bd6 {
z-index: auto;
height: 69px;
margin-left: 19px;
}
.word15 {
z-index: 103;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: left;
align-self: flex-start;
}
.txt10 {
z-index: 104;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.word16 {
z-index: 105;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin-top: 3px;
}
.label9 {
z-index: 99;
height: 14px;
margin: 27px 0 0 69px;
}
</style>
\ No newline at end of file
<template>
<div class="navbar w-full">
<div
class="
h-full
theBar
flex
items-center
px-5
justify-center
relative
bg-app-bg
"
>
<div class="relative w-full flex items-center justify-center">
<icon
@click="$router.go(-1)"
name="icon-fanhui"
class="absolute left-0"
size="18"
color="#343640"
/>
<div>{{ title }}</div>
</div>
</div>
<div class="some-block"></div>
</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import Icon from "../common/Icon.vue";
export default defineComponent({
components: { Icon },
props: ["title"],
});
</script>
<style lang="less" scoped>
.navbar {
.theBar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: 46px;
}
.some-block {
height: 46px;
}
}
</style>
\ No newline at end of file
<template>
<Popup
v-model:show="visible"
position="right"
style="height: 100vh; width: 86%"
class="relative"
>
<div class="flex flex-col h-full">
<div class="mx-5 flex items-center justify-center relative mt-2.5">
<icon
color="#000000"
name="icon-a-shanchu1"
class="absolute left-0"
@click="clickClose"
/>
<div class="title">{{ title || "此处是标题" }}</div>
</div>
<div class="flex-grow overflow-hidden">
<div class="h-full overflow-auto px-5">
<slot />
</div>
</div>
<div class="flex">
<div
class="flex-grow btn flex justify-center items-center"
@click="leftBtnActive && $emit('clickLeft')"
:class="{
'btn-active': leftBtnActive,
}"
>
{{ leftBtnName }}
</div>
<div class="w-0.5"></div>
<div
@click="rightBtnActive && $emit('clickRight')"
class="flex-grow btn flex justify-center items-center"
:class="{
'btn-active': rightBtnActive,
}"
>
{{ rightBtnName }}
</div>
</div>
</div>
</Popup>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import { Popup } from "vant";
import Icon from "@/components/common/Icon.vue";
export default defineComponent({
components: {
Popup,
Icon,
},
props: {
leftBtnName: { type: String, default: "重置" },
rightBtnName: { type: String, default: "完成" },
leftBtnActive: {
type: Boolean,
default: true,
},
rightBtnActive: {
type: Boolean,
default: true,
},
title: String,
show: Boolean,
setShow: {
type: Function,
required: true,
},
},
methods: {
clickClose(): void {
this.setShow(false);
},
},
computed: {
visible: {
get(): boolean {
return this.show;
},
set(v: boolean): void {
this.setShow(false);
},
},
},
});
</script>
<style lang="less" scoped>
.btn {
height: 45px;
background: #e7e7e7;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
}
.btn-active {
font-weight: 600;
color: #ffffff;
background: #3e4faf;
}
.title {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1b1f37;
}
</style>
\ No newline at end of file
<template>
<div>
<div class="group-title mt-8">银行名称</div>
<SelectList
class="mt-5"
:list="bankList"
:selecteds="selectedBanks"
:setSelecteds="setBanks"
/>
<div class="group-title mt-8">利率 (%)</div>
<div class="section10 flex-row">
<div class="mod5 flex-col">
<div class="layer4 flex-row">
<div class="word24">
<input
v-model.number="min_"
type="number"
placeholder="最低利率"
class="bg-transparent w-full"
/>
</div>
<div class="word25">%</div>
</div>
</div>
<div class="mod6 flex-col"></div>
<div class="mod7 flex-col">
<div class="main12 flex-row">
<div class="txt12">
<input
type="number"
v-model.number="max_"
placeholder="最高利率"
class="bg-transparent w-full"
/>
</div>
<div class="word26">%</div>
</div>
</div>
</div>
<div class="group-title mt-8">期限</div>
<SelectList
class="mt-5"
:list="peridList"
:selecteds="selectedPerids"
:setSelecteds="setSelectedPerids"
/>
</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import SelectList from "@/components/SelectList/index.vue";
export default defineComponent({
components: {
SelectList,
},
props: {
bankList: Array,
selectedBanks: Array,
setBanks: Function,
peridList: Array,
selectedPerids: Array,
setSelectedPerids: Function,
min: [Number, String],
max: [Number, String],
setMin: {
type: Function,
required: true,
},
setMax: {
type: Function,
required: true,
},
},
computed: {
min_: {
get(): number | string | undefined {
return this.min;
},
set(v: number | string): void {
this.setMin(v);
},
},
max_: {
get(): number | string | undefined {
return this.max;
},
set(v: number | string): void {
this.setMax(v);
},
},
},
});
</script>
<style lang="less" scoped>
.group-title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1b1f37;
}
.section10 {
z-index: auto;
width: 282px;
height: 40px;
justify-content: space-between;
margin-top: 20px;
}
.mod5 {
z-index: 136;
height: 40px;
border-radius: 5px;
background-color: rgba(247, 247, 250, 1);
width: 116px;
justify-content: center;
align-items: flex-end;
padding-right: 10px;
}
.layer4 {
z-index: auto;
width: 82px;
height: 20px;
justify-content: space-between;
}
.word24 {
z-index: 140;
width: 56px;
display: block;
overflow-wrap: break-word;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
color: #1b1f37;
line-height: 20px;
text-align: left;
}
.word25 {
z-index: 138;
width: 14px;
display: block;
overflow-wrap: break-word;
font-size: 14px;
color: #1b1f37;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.mod6 {
z-index: 145;
width: 14px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0e9464c2bc2666ea94aaa969a4fbb2853a62a3a30b32f0a92310f37426eb2d6)
0px 0px no-repeat;
margin-top: 20px;
}
.mod7 {
z-index: 139;
height: 40px;
border-radius: 5px;
background-color: rgba(247, 247, 250, 1);
width: 116px;
justify-content: center;
align-items: flex-end;
padding-right: 10px;
}
.main12 {
z-index: auto;
width: 76px;
height: 20px;
justify-content: space-between;
}
.txt12 {
z-index: 143;
width: 56px;
display: block;
overflow-wrap: break-word;
color: #1b1f37;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.word26 {
z-index: 141;
width: 14px;
display: block;
overflow-wrap: break-word;
color: #1b1f37;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
</style>
\ No newline at end of file
<template>
<div
class="
item
overflow-hidden overflow-ellipsis
flex
items-center
justify-center
"
:class="{
active: active,
}"
>
{{ name }}
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({
props: ["name", "active"],
});
</script>
<style lang="less" scoped>
.item {
width: 131px;
height: 40px;
background: #f7f7fa;
border-radius: 5px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1b1f37;
}
.active {
background: #3e4faf;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<div class="flex flex-wrap justify-between">
<select-item
class="mb-2.5"
v-for="item in list"
:key="item.id"
:name="item.name"
@click="clickItem(item.id)"
:active="selecteds.includes(item.id)"
/>
</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import SelectItem from "./SelectItem.vue";
export default defineComponent({
props: ["list", "selecteds", "setSelecteds"],
components: { SelectItem },
methods: {
clickItem(id: any) {
if (this.selecteds.includes(id)) {
this.setSelecteds(this.selecteds.filter((i: any) => i !== id));
} else {
this.setSelecteds([...this.selecteds, id]);
}
},
},
});
</script>
\ No newline at end of file
<template>
<div
class="
text-xs
px-3
py-2
text-center
cursor-pointer
rounded
my-3
flex
items-center
justify-center
"
:class="[disabled ? 'filter grayscale' : '', loading ? ' opacity-75' : '']"
@click="eventEmit"
>
{{ text }} <slot name="icon-right"></slot>
<Loading type="spiner" size="16" class="ml-2" v-if="loading" />
</div>
</template>
<script lang="ts">
import { Loading } from "vant";
import Vue, {defineComponent} from "vue";
export default defineComponent({
components: {
Loading,
},
name: "AppIcon",
props: {
size: String,
disabled: {
type: Boolean,
default: false,
},
text: {
type: String,
required: true,
},
border: {
type: String,
default: "border border-app-dark-4",
},
loading: {
type: Boolean,
default: false,
},
},
methods: {
eventEmit(v: any) {
if (this.disabled || this.loading) {
return;
}
this.$emit("btnClicked", v);
},
},
});
</script>
<template>
<div class="flex items-center" @click="$emit('change', !checked)">
<img class="w-4 mr-1" :src="checked ? checkedIcon : notCheckedIcon" />
<span>
<slot />
</span>
</div>
</template>
<script>
import Vue, {defineComponent} from "vue";
import notCheckedIcon from '@/assets/icons/not_checked_2.png'
import checkedIcon from '@/assets/icons/checked.png'
// const notCheckedIcon = require("@/assets/icons/not_checked_2.png");
// const checkedIcon = require("@/assets/icons/checked.png");
export default defineComponent({
props: ["checked"],
data() {
return {
notCheckedIcon,
checkedIcon,
};
},
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="object-cover" @click="clickSelf">
<div v-show="type === 'png'">
<img src="@/assets/icons/shiba.png" class="object-cover object-center" />
</div>
<svg
v-show="type === 'svg'"
aria-hidden="true"
:height="size"
:width="size"
:fill="color"
>
<use :xlink:href="'#' + name"></use>
</svg>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
emits: ["click"],
props: {
type: {
type: String,
default: "svg",
},
size: {
type: String,
default: "14px",
},
color: {
type: String,
default: "#ffffff",
},
name: {
type: String,
default: "icon-anquanzhongxin89",
},
},
methods: {
clickSelf() {
this.$emit("click");
},
},
});
</script>
<template>
<Field
class="base-input text-font-white"
:label="label"
:placeholder="placeholder"
:value="value"
@input="handleChange"
:type="getInputType"
:maxlength="maxlength"
autocomplete="off"
>
<template #button>
<div class="flex items-center">
<img
src="@/assets/icons/close.png"
@click="handleClear"
v-if="clearable && value && value.length !== 0"
name="cross"
/>
<slot name="button"></slot>
<img
v-if="type === 'password' && showEye"
:src="showPwd ? eyeOpenIcon : eyeCloseIcon"
@click="handleClickEye"
name="cross"
class="ml-1 eyeIcon"
/>
</div>
</template>
</Field>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import { Field } from "vant";
import { tType } from "./types";
import eyeOpenIcon from "@/assets/icons/eye_open.png";
import eyeCloseIcon from "@/assets/icons/eye_close.png";
// const eyeOpenIcon = require("@/assets/icons/eye_open.png");
// const eyeCloseIcon = require("@/assets/icons/eye_close.png");
export default defineComponent({
components: {
Field,
// Icon,
},
props: {
type: {
type: String as PropType<tType>,
default: "text",
},
placeholder: String,
clearable: {
type: Boolean,
default: false,
},
value: String,
maxlength: Number,
label: {
type: String,
default: "",
},
showEye: {
type: Boolean,
default: true,
},
},
data() {
return {
showPwd: false,
eyeOpenIcon,
eyeCloseIcon,
};
},
computed: {
getInputType(): string {
if (this.type === "password") {
return this.showPwd ? "text" : "password";
} else {
return this.type;
}
},
},
methods: {
handleClickEye() {
this.showPwd = !this.showPwd;
},
handleChange(value: string) {
this.$emit("change", value);
},
handleClear() {
this.$emit("change", "");
},
},
});
</script>
<style scoped lang="less">
@color1: #68739c;
@caretColor: #8899b3;
@textColor: #eef1f6;
.base-input {
background-color: transparent;
// border-bottom: 1px solid @color1;
caret-color: @caretColor;
padding: 10px 0px;
/deep/ input {
color: @textColor;
}
.eyeIcon {
width: 14px;
}
}
.base-input::after {
left: 0;
right: 0;
border-bottom: 1px solid @color1;
}
</style>
\ No newline at end of file
export type tType = "password" | "number" | "text"
\ No newline at end of file
<template>
<div class="drag" ref="dragDiv">
<div class="drag_bg"></div>
<div class="drag_text">{{ confirmWords }}</div>
<div
ref="moveDiv"
@touchstart="mousedownFn($event)"
:class="{ handler_ok_bg: confirmSuccess }"
class="handler handler_bg"
style="position: absolute; top: 0px; left: 0px; bottom: 0px"
></div>
</div>
</template>
<script>
export default {
data() {
return {
beginClientX: 0 /*距离屏幕左端距离*/,
mouseMoveStata: false /*触发拖动状态 判断*/,
maxwidth: "" /*拖动最大宽度,依据滑块宽度算出来的*/,
confirmWords: "拖动滑块验证" /*滑块文字*/,
confirmSuccess: false /*验证成功判断*/,
};
},
methods: {
mousedownFn: function (e) {
if (!this.confirmSuccess) {
e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
this.mouseMoveStata = true;
this.beginClientX = e.changedTouches[0].clientX;
}
}, //mousedoen 事件
successFunction() {
this.confirmSuccess = true;
this.$emit("confirm", true);
this.confirmWords = "验证通过";
if (window.addEventListener) {
document
.getElementsByTagName("html")[0]
.removeEventListener("touchmove", this.mouseMoveFn);
document
.getElementsByTagName("html")[0]
.removeEventListener("touchend", this.moseUpFn);
} else {
document
.getElementsByTagName("html")[0]
.removeEventListener("touchend", () => {});
}
document.getElementsByClassName("drag_text")[0].style.color = "#fff";
document.getElementsByClassName("handler")[0].style.left =
this.maxwidth + "px";
document.getElementsByClassName("drag_bg")[0].style.width =
this.maxwidth + "px";
}, //验证成功函数
mouseMoveFn(e) {
if (this.mouseMoveStata) {
let width = e.changedTouches[0].clientX - this.beginClientX;
if (width > 0 && width <= this.maxwidth) {
document.getElementsByClassName("handler")[0].style.left =
width + "px";
document.getElementsByClassName("drag_bg")[0].style.width =
width + "px";
} else if (width > this.maxwidth) {
this.successFunction();
}
}
}, //mousemove事件
moseUpFn(e) {
this.mouseMoveStata = false;
var width = e.changedTouches[0].clientX - this.beginClientX;
if (width < this.maxwidth) {
document.getElementsByClassName("handler")[0].style.left = 0 + "px";
document.getElementsByClassName("drag_bg")[0].style.width = 0 + "px";
}
}, //mouseup事件
},
mounted() {
this.maxwidth =
this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
document
.getElementsByTagName("html")[0]
.addEventListener("touchmove", this.mouseMoveFn);
document
.getElementsByTagName("html")[0]
.addEventListener("touchend", this.moseUpFn);
},
beforeDestroy() {
document
.getElementsByTagName("html")[0]
.removeEventListener("touchmove", this.mouseMoveFn);
document
.getElementsByTagName("html")[0]
.removeEventListener("touchend", this.moseUpFn);
},
};
</script>
<style scoped>
.drag {
position: relative;
background-color: #e8e8e8;
width: 100%;
height: 34px;
line-height: 34px;
text-align: center;
}
.handler {
width: 40px;
border: 1px solid #ccc;
cursor: move;
}
.handler_bg {
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==")
no-repeat center;
}
.handler_ok_bg {
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==")
no-repeat center;
}
.drag_bg {
background-color: #7ac23c;
height: 34px;
width: 0px;
}
.drag_text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
</style>
\ No newline at end of file
declare module '*.png';
declare module '*.jpg';
\ No newline at end of file
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import 'tailwindcss/tailwind.css'
import store from './store' import store from './store'
import { NoticeBar, Swipe, SwipeItem } from 'vant'
createApp(App).use(store).use(router).mount('#app') createApp(App)
.use(store)
.use(router)
.use(NoticeBar)
.use(Swipe)
.use(SwipeItem)
.mount('#app')
...@@ -4,22 +4,74 @@ import Home from '../views/Home.vue' ...@@ -4,22 +4,74 @@ import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
path: '/', path: '/',
redirect: { name: 'Home' },
component: () =>
import(/* webpackChunkName: "withMenu" */ '@/views/withMenu/index.vue'),
children: [
{
path: '/home',
name: 'Home', name: 'Home',
component: Home component: () =>
import(
/* webpackChunkName: "Home" */ '@/views/withMenu/Home/index.vue'
),
},
{
path: '/mine',
name: 'Mine',
component: () =>
import(
/* webpackChunkName: "mine" */ '@/views/withMenu/Mine/index.vue'
),
}, },
{ {
path: '/about', path: '/financialManagement',
name: 'About', name: 'FinancialManagement',
// route level code-splitting component: () =>
// this generates a separate chunk (about.[hash].js) for this route import(
// which is lazy-loaded when the route is visited. /* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') ),
} },
{
path: '/loan',
name: 'Loan',
component: () =>
import(
/* webpackChunkName: "mine" */ '@/views/withMenu/Loan/index.vue'
),
},
],
},
{
path: '/fnsList',
name: 'FnsList',
component: () => import('@/views/FnsList/index.vue'),
},
// {
// path: '/auth',
// component: () => import('@/views/Auth/index.vue'),
// redirect: {
// name: 'Login',
// },
// children: [
// {
// path: '/auth/Login',
// name: 'Login',
// component: () => import('@/views/Auth/Login/index.vue'),
// },
// ],
// },
{
path: '/:pathMatch(.*)*',
redirect: {
name: 'Home',
},
},
] ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
routes routes,
}) })
export default router export default router
export interface iUserMsg {
token: string
userInfo: any
}
import { iUserMsg } from '@/types/userMsg'
const USER_MSG = 'USER_MSG'
export function setUserMsg(msg: iUserMsg) {
localStorage.setItem(USER_MSG, JSON.stringify(msg))
}
export function getUserMsg(): iUserMsg | undefined {
const value = localStorage.getItem(USER_MSG)
return (value && JSON.parse(value)) || undefined
}
export function deleteUserMsg() {
localStorage.removeItem(USER_MSG)
}
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="register pt-5">
<div class="flex justify-between items-center text-base">
<img src="@/assets/img/cmp_logo.png" class="h-12" alt="" />
<div class="text-font-white header-text">注册/登录</div>
</div>
<div class="title text-font-white mt-10 mb-16 title-text">{{ title }}</div>
<PhoneInput
:placeholder="phoneConfig.placeholder"
:maxlength="phoneConfig.maxLen"
:clearable="true"
:value="phone"
:type="phoneConfig.type"
@change="handlePhoneChange"
@selectItem="handleSelect"
>
</PhoneInput>
<transition name="fade" mode="out-in">
<CodeInput
v-if="loginWay === eLoginWay.CODE"
:placeholder="codeConfig.placeholder"
:maxlength="codeConfig.maxLen"
:value="code"
:type="codeConfig.type"
:handleChange="handleCodeChange"
:phone="phone"
:sendSmsFunc="sendSmsFunc"
:sendVoiceFunc="sendVoiceFunc"
:phoneValid="phoneValid"
>
</CodeInput>
<div v-else-if="loginWay === eLoginWay.PWD" class="relative">
<Input
:placeholder="pwdConfig.placeholder"
:maxlength="pwdConfig.maxLen"
:value="pwd"
:type="pwdConfig.type"
@change="handlePwdChange"
>
<template #button> </template>
</Input>
<div class="flex items-center justify-between mt-1">
<div>
<Check
:checked="rememberPwdChecked"
@change="handleRememberPwdChange"
class="text-font-gray text-sm"
>记住密码</Check
>
</div>
<div class="text-font-gray text-sm" @click="handleClickForgetPwd">
忘记密码
</div>
</div>
</div>
</transition>
<div class="flex items-center mt-16">
<div class="flex items-center" @click="handleClickRadio">
<transition name="fade" mode="out-in" :duration="50">
<img
:key="checkStatus"
class="w-4 mr-1 transition-all"
:src="checkStatus ? checkedIcon : notCheckedIcon"
/>
</transition>
<span class="text-font-white">我已阅读并同意</span>
</div>
<div class="underline text-font-blue" @click="handleClickUserAgreement">
用户协议
</div>
</div>
<transition name="fade" mode="out-in">
<SlideValidator
v-if="
accountType !== eAccountType.NULL &&
loginWay !== eLoginWay.NULL &&
accountType !== eAccountType.NO_REG
"
:key="randomNum"
@confirm="handleSlideConfirm"
class="my-3"
/>
</transition>
<transition name="fade" mode="out-in">
<div
v-if="accountType !== eAccountType.NULL && loginWay !== eLoginWay.NULL"
>
<div>
<div v-if="accountType === eAccountType.NO_REG">
<LoginButton
text="注册"
:disabled="getRegisterDisableStatus"
:loading="loading"
@click="handleClickRegister"
></LoginButton>
</div>
<div v-else>
<LoginButton
text="登录"
:disabled="getLoginBtnDisableStatus"
:loading="loading"
@click="handleClickLogin"
></LoginButton>
<div v-if="loginByPwdFunc">
<div
v-if="loginWay === eLoginWay.PWD"
@click="transferLoginWay(eLoginWay.CODE)"
class="text-center text-font-blue"
>
验证码登录
</div>
<div
class="text-center text-font-blue"
v-if="loginWay === eLoginWay.CODE"
@click="transferLoginWay(eLoginWay.PWD)"
>
密码登录
</div>
</div>
</div>
</div>
</div>
</transition>
<Overlay v-show="overlayShow" :lock-scroll="false">
<UserAgreement :setOverlayShow="setOverlayShow" />
</Overlay>
</div>
</template>
<script lang='ts'>
import Input from "@/components/common/Input/index.vue";
import CodeInput from "./components/CodeInput/index.vue";
import { Overlay, Dialog } from "vant";
import Vue, { PropType } from "vue";
import {
eAccountType,
eLoginWay,
iRememberPhonePwd,
tAccountStatusCheckFunc,
tLoginByCodeFunc,
tLoginByPwdFunc,
tRegisterFunc,
tSendSmsFunc,
tSendVoiceFunc,
} from "./types";
import { phoneConfig, codeConfig, pwdConfig } from "./const";
import LoginButton from "./components/LoginButton/index.vue";
import UserAgreement from "./UserAgreement.vue";
import Check from "@/components/common/Check/index.vue";
import PhoneInput from "./components/PhoneInput/index.vue";
import SlideValidator from "@/components/common/SlideValidator/index.vue";
import notCheckedIcon from "@/assets/icons/not_checked.png";
import checkedIcon from "@/assets/icons/checked.png";
import LoginSerivce from "./LoginService";
const accountType = eAccountType.NULL;
const loginWay = eLoginWay.NULL;
export default defineComponent({
props: {
title: {
type: String,
required: true,
},
accountStatusCheckFunc: {
type: Function as PropType<tAccountStatusCheckFunc>,
required: true,
},
registerFunc: {
type: Function as PropType<tRegisterFunc>,
required: true,
},
sendSmsFunc: {
type: Function as PropType<tSendSmsFunc>,
required: true,
},
sendVoiceFunc: {
type: Function as PropType<tSendVoiceFunc>,
required: false,
},
loginByCodeFunc: {
type: Function as PropType<tLoginByCodeFunc>,
required: true,
},
loginByPwdFunc: {
type: Function as PropType<tLoginByPwdFunc | null>,
},
},
components: {
Input,
CodeInput,
LoginButton,
Overlay,
UserAgreement,
Check,
PhoneInput,
SlideValidator,
},
data() {
return {
notCheckedIcon,
checkedIcon,
phoneConfig,
codeConfig,
pwdConfig,
eAccountType,
eLoginWay,
accountType: accountType,
loginWay: loginWay,
checkStatus: false,
phone: "",
code: "",
pwd: "",
overlayShow: false,
rememberPwdChecked: false,
slideConfirmed: false,
randomNum: Math.random(),
loading: false,
};
},
methods: {
handleSelect(item: iRememberPhonePwd) {
this.phone = item.phone;
this.pwd = item.pwd;
},
handleClickRadio() {
this.checkStatus = !this.checkStatus;
},
handlePhoneChange(value: string) {
this.phone = value;
},
handleCodeChange(v: string) {
this.code = v;
},
handleClickForgetPwd() {
this.$router.push({
name: "PwdFind",
});
},
handleSlideConfirm() {
this.slideConfirmed = true;
},
handlePwdChange(v: string) {
this.pwd = v;
},
async handleClickRegister() {
if (this.getRegisterDisableStatus) return;
const { phone, code } = this;
// 调用注册接口
this.loading = true;
try {
await this.registerFunc(phone, code);
} catch (err) {
console.log(err);
}
this.loading = false;
},
async handleClickLogin() {
const { phone, code, pwd } = this;
this.loading = true;
try {
if (this.loginWay === eLoginWay.PWD) {
// 调用登录接口
await (this.loginByPwdFunc as tLoginByCodeFunc)(phone, pwd);
const { rememberPwdChecked } = this;
if (rememberPwdChecked) {
LoginSerivce.getIntance().addPhoneWithPwdToStorage(
this.phone,
this.pwd
);
}
} else if (this.loginWay == eLoginWay.CODE) {
// 调用登录接口
await this.loginByCodeFunc(phone, code);
}
} catch (err) {
console.log(err);
}
this.loading = false;
this.randomNum = Math.random();
this.slideConfirmed = false;
},
handleClickUserAgreement() {
// 展示用户协议
this.overlayShow = true;
},
transferLoginWay(loginType: eLoginWay) {
if (
this.accountType === eAccountType.REG_NOPD &&
loginType === eLoginWay.PWD
) {
Dialog.confirm({
title: "提示",
message: "您还没有设置过登录密码,无法使用密码登录。",
cancelButtonText: "设置密码",
confirmButtonText: "验证码登录",
})
.then(() => {
this.transferLoginWay(eLoginWay.CODE);
})
.catch(() => {
this.$router.push({
name: "PwdSetting",
query: {
phone: this.phone,
},
});
});
return;
}
this.loginWay = loginType;
},
setOverlayShow(v: boolean) {
this.overlayShow = v;
},
handleRememberPwdChange(checked: boolean) {
return (this.rememberPwdChecked = checked);
},
sendSms() {
return this.sendSmsFunc(this.phone);
},
sendVoice() {
return this.sendVoiceFunc(this.phone);
},
},
computed: {
codeValid(): boolean {
return this.code.length === codeConfig.maxLen;
},
checkStatusValid(): boolean {
return this.checkStatus === true;
},
phoneValid(): boolean {
return this.phone.length === phoneConfig.maxLen;
},
pwdValid(): boolean {
return pwdConfig.validate(this.pwd);
},
getRegisterDisableStatus(): boolean {
return !(this.codeValid && this.checkStatusValid && this.phoneValid);
},
getLoginBtnDisableStatus(): boolean {
if (this.loginWay === eLoginWay.CODE) {
return (
!(this.codeValid && this.phoneValid && this.checkStatusValid) ||
!this.slideConfirmed
);
} else if (this.loginWay === eLoginWay.PWD) {
return (
!(this.pwdValid && this.phoneValid && this.checkStatusValid) ||
!this.slideConfirmed
);
}
return true;
},
},
watch: {
phone(newV: string) {
if (newV.length === phoneConfig.maxLen) {
// 调用方法,获取该手机号的账户信息
this.accountStatusCheckFunc(newV).then((result) => {
this.accountType = result;
this.loginWay = eLoginWay.CODE;
});
} else {
this.loginWay = eLoginWay.NULL;
}
},
},
});
</script>
<style scoped>
.header-text {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #eef1f6;
}
.title-text {
font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #eef1f6;
}
</style>
\ No newline at end of file
import { iRememberPhonePwd } from "./types";
const KEY_REMEMBER_PWD = 'KEY_REMEMBER_PWD'
export default class LoginService {
static instance: LoginService
static getIntance() {
if (!LoginService.instance) LoginService.instance = new LoginService();
return LoginService.instance;
}
addPhoneWithPwdToStorage(phone: string, pwd: string) {
const list = this.getRememberedPhonePwdList();
const index = list.findIndex(i => i.phone === phone)
if (index === -1) {
list.push({
phone,
pwd
})
} else {
list.splice(index, 1, { phone, pwd })
}
localStorage.setItem(KEY_REMEMBER_PWD, JSON.stringify(list))
}
getRememberedPhonePwdList(): iRememberPhonePwd[] {
const value = localStorage.getItem(KEY_REMEMBER_PWD)
const list = value && JSON.parse(value) || []
return list;
}
deletePhoneInStorage(phone: string) {
const list = this.getRememberedPhonePwdList()
const newList = list.filter(i => i.phone !== phone)
localStorage.setItem(KEY_REMEMBER_PWD, JSON.stringify(newList))
}
}
\ No newline at end of file
<template>
<div class="flex flex-col w-11/12 mx-auto py-5 text-font-white">
<div class="flex justify-between items-center">
<div class="w-3/12">
<app-icon name="icon-fanhui" @click="handleClickClose"></app-icon>
</div>
<div class="text-center w-6/12">乐映用户协议</div>
<div class="w-3/12"></div>
</div>
<div class="flex py-6 justify-center">
<img src="@/assets/img/cmp_logo.png" class="h-12" alt="" />
</div>
<div></div>
</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import closeIcon from "@/assets/icons/close_large.png";
export default defineComponent({
props: ["setOverlayShow"],
data() {
return {
closeIcon,
};
},
components: {
"app-icon": () => import("@/components/common/Icon.vue"),
},
methods: {
handleClick() {
console.log(123);
},
handleClickClose() {
this.setOverlayShow(false);
},
},
});
</script>
<style>
.userAgreement {
background: #131934;
}
</style>
\ No newline at end of file
<template>
<div class="">
<Input
:placeholder="placeholder"
:clearable="clearable"
:maxlength="maxlength"
:value="value"
:type="type"
@change="handleChange"
>
<template #button>
<div>
<div
v-if="smsCount === 60"
@click="handleClickSendSms"
class="text-font-blue"
:class="{ 'text-font-gray': !phoneValid || smsLock }"
>
获取验证码
</div>
<div v-else class="text-font-blue">已发送 {{ smsCount }} S</div>
</div>
</template>
</Input>
<div
class="mt-2 float-right text-sm text-font-blue"
v-if="voiceActive && sendVoiceFunc"
>
<div
v-if="voiceCount === 60 && !voiceHasSended60Ago"
class="flex items-center"
:class="{ 'text-font-gray': voiceLock }"
>
收不到验证码?试试
<span
class="text-font-blue"
@click="handleClickSendVoice"
:class="{ 'text-font-gray': voiceLock }"
>语音验证</span
>
</div>
<div
@click="handleClickSendVoice"
v-else-if="voiceCount === 60 && voiceHasSended60Ago"
:class="{ 'text-font-gray': voiceLock }"
>
获取语音验证
</div>
<div v-else>请注意接听语音验证电话 ({{ voiceCount }}) S</div>
</div>
<div class="clear-right"></div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Input from "@/components/common/Input/index.vue";
export default defineComponent({
components: {
Input,
},
props: {
placeholder: String,
clearable: Boolean,
value: String,
type: String,
handleChange: Function,
maxlength: Number,
phone: String,
sendSmsFunc: Function,
sendVoiceFunc: {
type: Function,
required: false,
},
phoneValid: Boolean,
sendSmsAuto: {
type: Boolean,
default: false,
},
},
data() {
return {
smsCount: 60,
voiceCount: 60,
voiceActive: false,
voiceHasSended60Ago: false,
smsLock: false,
voiceLock: false,
timerId1: 0,
timerId2: 0,
};
},
mounted() {
if (this.phoneValid && this.sendSmsAuto) {
this.handleClickSendSms();
}
},
methods: {
async handleClickSendSms() {
if (!this.phoneValid) return;
if (this.smsLock === true) return;
this.smsLock = true;
try {
await this.sendSmsFunc(this.phone);
} catch (err) {
this.smsLock = false;
return;
}
this.smsCount--;
this.timerId1 = window.setInterval(() => {
this.smsCount--;
if (this.smsCount === -1) {
this.smsCount = 60;
this.voiceActive = true;
this.smsLock = false;
window.clearInterval(this.timerId1);
}
}, 1000);
},
async handleClickSendVoice() {
if (!this.phoneValid) return;
if (this.voiceLock === true) return;
this.voiceLock = true;
await this.sendVoiceFunc(this.phone);
this.voiceCount--;
this.timerId2 = window.setInterval(() => {
this.voiceCount--;
if (this.voiceCount === -1) {
this.voiceCount = 60;
this.voiceLock = false;
this.voiceHasSended60Ago = true;
window.clearInterval(this.timerId2);
}
}, 1000);
},
},
beforeDestroy() {
clearInterval(this.timerId1);
clearInterval(this.timerId2);
},
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<transition name="fade" mode="out-in" :duration="100">
<Button
:key="disabled + text"
:text="text"
class="rounded-full h-8"
@btnClicked="handleCliCkBtn"
border="border-0"
:class="[
disabled ? 'text-font-white bg-font-blue filter grayscale' : 'bg-font-blue',
disabled ? 'text-font-white bg-font-blue filter grayscale' : ' text-white ',
loading ? 'opacity-75': '',
]"
>
<template #icon-right>
<div>
<div v-if="!loading">
<img
v-if="!disabled"
class="ml-2"
src="@/assets/icons/arrow-right.png"
alt="arrow-right"
/>
<img
v-else
class="ml-2"
src="@/assets/icons/arrow-right-dark.png"
alt="arrow-right"
/>
</div>
<div v-else>
<Loading class="w-4 ml-2" />
</div>
</div>
</template>
</Button>
</transition>
</template>
<script lang="ts">
import Button from "@/components/common/Btn.vue";
import { Loading } from "vant";
import Vue, {defineComponent} from "vue";
export default defineComponent({
components: {
Button,
Loading,
},
props: {
text: String,
disabled: Boolean,
loading: {
type: Boolean,
default: false,
},
},
methods: {
handleCliCkBtn(e: MouseEvent) {
if (this.disabled) return;
if (this.loading) return;
this.$emit("click", e);
},
},
});
</script>
<style>
.darkBtn {
background: #1d2649;
color: #8899b3;
}
</style>
<template>
<div class="w-full phoneInput" ref="phoneInput">
<Input
:placeholder="placeholder"
:maxlength="maxlength"
:clearable="true"
:value="value"
:type="type"
@change="handleChange"
>
<template #button>
<img
:src="arrowDownIcon"
alt=""
ref="arrowImg"
class="ml-2 transform transition-all"
:class="{ 'rotate-180': !arrowDown }"
@click="handleClickArrowIcon"
/>
</template>
</Input>
<div class="w-full relative mt-px">
<div
class="
absolute
left-0
right-0
overflow-auto
h-0
transition-all
z-10
text-font-white
bg-font-light-black
"
:class="{ 'h-24': !arrowDown }"
>
<div
v-for="(item, index) in phonePwdList"
:key="index"
class="
h-8
flex
items-center
justify-between
bg-font-light-black
hover:bg-font-black
"
@click="handleClickPhoneItem(item)"
>
<div class="ml-4">{{ item.phone }}</div>
<img
src="@/assets/icons/close.png"
@click="handleClickDelete(item.phone)"
class="mr-4 closeIcon"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Input from "@/components/common/Input/index.vue";
import LoginService from "../../LoginService";
import { iRememberPhonePwd } from "../../types";
import eyeOpenIcon from "@/assets/icons/eye_open.png";
import eyeCloseIcon from "@/assets/icons/eye_close.png";
import arrowDownIcon from "@/assets/icons/arrow_down.png";
let NotCloseList = [] as Element[];
export default defineComponent({
components: {
Input,
},
props: {
type: {
type: String,
default: "text",
},
placeholder: String,
clearable: {
type: Boolean,
default: false,
},
value: String,
maxlength: Number,
handlePhoneChange: Function,
},
data() {
return {
showPwd: false,
eyeOpenIcon,
eyeCloseIcon,
phonePwdList: [] as iRememberPhonePwd[],
arrowDownIcon,
arrowDown: true,
};
},
methods: {
handleClickPhoneItem(item: iRememberPhonePwd) {
this.$emit("selectItem", item);
},
handleChange(v: string) {
this.$emit("change", v);
},
handleClickArrowIcon() {
this.arrowDown = !this.arrowDown;
if (!this.arrowDown) {
this.fetchList();
this.$nextTick(() => {
this.initNotCloseList();
document.removeEventListener("click", this.callback);
document.addEventListener("click", this.callback);
});
}
},
callback(e: MouseEvent) {
const notClose = NotCloseList.some((el) => {
return el.contains(e.target as Node);
});
if (!notClose) {
this.arrowDown = true;
}
},
initNotCloseList() {
const phoneInputEle = this.$refs.phoneInput as Element;
const arrowImgEle = this.$refs.arrowImg as Element;
const closeIcons = Array.from(
phoneInputEle.querySelectorAll(".closeIcon")
);
NotCloseList = closeIcons;
NotCloseList.push(arrowImgEle);
},
fetchList() {
const list = LoginService.getIntance().getRememberedPhonePwdList();
this.phonePwdList = list;
},
handleClickDelete(phone: string) {
LoginService.getIntance().deletePhoneInStorage(phone);
this.fetchList();
},
},
});
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
export const phoneConfig = {
maxLen: 11,
placeholder: "请输入手机号",
type: 'number',
validate(value: string) {
return value.length === 11;
}
}
export const codeConfig = {
maxLen: 4,
placeholder: "请输入验证码",
type: 'number',
validate(value: string) {
return value.length === 4;
}
}
export const pwdConfig = {
maxLen: 30,
placeholder: "请输入密码(6-30个字符)",
placeholder2: "请设置新密码(6-30个字符)",
placeholder3: "请输入原密码",
type: 'password',
validate(value: string) {
return value.length >= 6 && value.length <= 30;
},
}
<template>
<div class="px-5">
<Login
title="欢迎来到一幕"
:accountStatusCheckFunc="accountStatusCheckFunc"
:sendSmsFunc="sendSmsFunc"
:registerFunc="registerFunc"
:loginByCodeFunc="loginByCodeFunc"
:loginByPwdFunc="loginByPwdFunc"
/>
</div>
</template>
<script lang="ts">
import Vue, { VueConstructor } from "vue";
import Login from "./Login.vue";
export default (
Vue as VueConstructor<
Vue & {
sendSmsFunc: any;
accountStatusCheckFunc: any;
registerFunc: any;
loginByCodeFunc: any;
loginByPwdFunc: any;
}
>
).extend({
components: { Login },
inject: {
sendSmsFunc: "sendSmsFunc",
accountStatusCheckFunc: "accountStatusCheckFunc",
registerFunc: "registerFunc",
loginByCodeFunc: "loginByCodeFunc",
loginByPwdFunc: "loginByPwdFunc",
},
methods: {},
});
</script>
<style>
</style>
\ No newline at end of file
/* eslint-disable */
export enum eAccountType {
NULL,
NO_REG, // 账号没注册
REG_NOPD, // 账号已注册 为设置密码
REG_PDSET, // 账号已注册 已设置密码
}
export enum eLoginWay {
NULL,
PWD, // 密码
CODE // 验证码
}
export interface iRememberPhonePwd {
phone: string;
pwd: string;
}
/* 检测账户状态 */
export type tAccountStatusCheckFunc = (phone: string) => Promise<eAccountType>
/* 发送验证码 */
export type tSendSmsFunc = (phone: string) => Promise<any>
/* 发送语音验证码 */
export type tSendVoiceFunc = (phone: string) => Promise<any>
/* 注册,请求成功后的后续操作需要写在本方法中,如保存token、路由转跳*/
export type tRegisterFunc = (phone: string, code: string) => Promise<boolean>
/* 登录 请求成功后的后续操作需要写在本方法, 如保存token、路由转跳*/
export type tLoginByCodeFunc = (phone: string, code: string) => Promise<any>
export type tLoginByPwdFunc = (phone: string, pwd: string) => Promise<any>
export interface iLoginCmpProps {
accountStatusCheckFunc: tAccountStatusCheckFunc;
registerFunc: tRegisterFunc;
loginByCodeFunc: tLoginByCodeFunc;
loginByPwdFunc: tLoginByPwdFunc;
sendSmsFunc: tSendSmsFunc,
sendVoiceFunc: tSendVoiceFunc,
}
<template>
<div class="">
<div class="text-font-white text-2xl mt-16">找回密码</div>
<PhoneInput
class="mt-8"
:placeholder="phoneConfig.placeholder"
:maxlength="phoneConfig.maxLen"
:clearable="true"
:value="phone"
:type="phoneConfig.type"
@change="handlePhoneChange"
>
</PhoneInput>
<CodeInput
:placeholder="codeConfig.placeholder"
:maxlength="codeConfig.maxLen"
:value="code"
:type="codeConfig.type"
:handleChange="handleCodeChange"
:phone="phone"
:sendSmsFunc="sendSmsFunc"
:sendVoiceFunc="sendVoiceFunc"
:phoneValid="phoneValid"
>
</CodeInput>
<Input
:placeholder="pwdConfig.placeholder2"
:maxlength="pwdConfig.maxLen"
:value="pwd"
:type="pwdConfig.type"
@change="handlePwdChange"
>
<template #button> </template>
</Input>
<LoginButton
class="mt-8"
text="确定"
:disabled="getConfirmDisabled"
@click="handleClickConfirm"
:loading="loading"
></LoginButton>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import PhoneInput from "../Login/components/PhoneInput/index.vue";
import { phoneConfig, codeConfig, pwdConfig } from "../Login/const";
import { tSendSmsFunc, tSendVoiceFunc } from "../Login/types";
import Input from "@/components/common/Input/index.vue";
import LoginButton from "../Login/components/LoginButton/index.vue";
import CodeInput from "../Login/components/CodeInput/index.vue";
import { tSetPwdFunc } from "../PwdSetting/types";
export default defineComponent({
components: {
PhoneInput,
Input,
LoginButton,
CodeInput,
},
props: {
sendSmsFunc: {
type: Function as PropType<tSendSmsFunc>,
required: true,
},
sendVoiceFunc: {
type: Function as PropType<tSendVoiceFunc>,
required: true,
},
setPwdFunc: {
type: Function as PropType<tSetPwdFunc>,
required: true,
},
},
data() {
return {
phoneConfig,
codeConfig,
pwdConfig,
phone: "",
code: "",
pwd: "",
loading: false,
};
},
methods: {
handlePhoneChange(value: string) {
this.phone = value;
},
handleCodeChange(v: string) {
this.code = v;
},
sendSms() {
return this.sendSmsFunc(this.phone);
},
sendVoice() {
return this.sendVoiceFunc(this.phone);
},
handlePwdChange(v: string) {
this.pwd = v;
},
handleClickConfirm() {},
},
computed: {
phoneValid(): boolean {
return phoneConfig.validate(this.phone);
},
getConfirmDisabled(): boolean {
return !(
phoneConfig.validate(this.phone) &&
codeConfig.validate(this.code) &&
pwdConfig.validate(this.pwd)
);
},
},
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="px-5">
<pwd-find
:sendSmsFunc="sendSmsFunc"
:sendVoiceFunc="sendVoiceFunc"
:setPwdFunc="setPwdFunc"
/>
</div>
</template>
<script lang="ts">
import Vue, { VueConstructor } from "vue";
import PwdFind from "./PwdFind.vue";
export default (
Vue as VueConstructor<
Vue & {
sendSmsFunc: any;
setPwdFunc: any;
sendVoiceFunc: any;
}
>
).extend({
components: { PwdFind },
inject: ["sendSmsFunc", "setPwdFunc", "sendVoiceFunc"],
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="text-font-white">
<div class="text-font-white text-2xl mt-16">修改登录密码</div>
<div class="mt-8 mb-9">正在为 {{ phone }} 修改登录密码</div>
<transition name="fade" mode="out-in">
<Input
v-if="modifyWay === eModifyWay.ORIGINAL_PWD"
key="1"
:placeholder="pwdConfig.placeholder3"
:maxlength="pwdConfig.maxLen"
:value="pwd"
:type="pwdConfig.type"
@change="handlePwdChange"
:showEye="false"
></Input>
<CodeInput
v-else-if="modifyWay === eModifyWay.CODE"
:placeholder="codeConfig.placeholder"
:maxlength="codeConfig.maxLen"
:value="code"
:type="codeConfig.type"
:handleChange="handleCodeChange"
:phone="phone"
:sendSmsFunc="sendSmsFunc"
:sendVoiceFunc="sendVoiceFunc"
:phoneValid="phoneValid"
>
</CodeInput>
</transition>
<Input
:placeholder="pwdConfig.placeholder2"
:maxlength="pwdConfig.maxLen"
:value="pwd2"
:type="pwdConfig.type"
@change="handlePwdChange2"
></Input>
<LoginButton
class="mt-20"
text="确定"
:disabled="getConfirmDisabled"
:loading="loading"
@click="handleClickConfirm"
></LoginButton>
<div class="mt-5 text-center text-font-blue text-sm">
<transition name="fade" mode="out-in">
<div
key="1"
v-if="modifyWay === eModifyWay.ORIGINAL_PWD"
@click="transterModifyWay(eModifyWay.CODE)"
>
验证码修改
</div>
<div key="2" v-else @click="transterModifyWay(eModifyWay.ORIGINAL_PWD)">
原密码修改
</div>
</transition>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import Input from "@/components/common/Input/index.vue";
import { pwdConfig, codeConfig, phoneConfig } from "../Login/const";
import LoginButton from "../Login/components/LoginButton/index.vue";
import { tModifyPwdFunc, eModifyWay } from "./types";
import { tSendSmsFunc, tSendVoiceFunc } from "../Login/types";
import CodeInput from "../Login/components/CodeInput/index.vue";
export default defineComponent({
props: {
phone: {
required: true,
type: String,
},
modifyPwdFunc: {
type: Function as PropType<tModifyPwdFunc>,
required: true,
},
sendSmsFunc: {
type: Function as PropType<tSendSmsFunc>,
required: true,
},
sendVoiceFunc: {
type: Function as PropType<tSendVoiceFunc>,
required: false,
},
},
components: {
Input,
LoginButton,
CodeInput,
},
data() {
return {
pwdConfig,
codeConfig,
pwd: "",
pwd2: "",
code: "",
loading: false,
eModifyWay,
modifyWay: eModifyWay.ORIGINAL_PWD,
};
},
computed: {
getConfirmDisabled(): boolean {
if (this.modifyWay === eModifyWay.ORIGINAL_PWD) {
return (
!(pwdConfig.validate(this.pwd) && pwdConfig.validate(this.pwd2)) ||
this.loading
);
} else if (this.modifyWay === eModifyWay.CODE) {
return (
!(pwdConfig.validate(this.pwd2) && codeConfig.validate(this.code)) ||
this.loading
);
} else {
return false;
}
},
phoneValid(): boolean {
return phoneConfig.validate(this.phone);
},
},
methods: {
handleCodeChange(v: string) {
this.code = v;
},
handlePwdChange(v: string) {
this.pwd = v;
},
transterModifyWay(way: eModifyWay) {
this.modifyWay = way;
},
handlePwdChange2(v: string) {
this.pwd2 = v;
},
async handleClickConfirm() {
const { pwd, pwd2 } = this;
this.loading = true;
// ??????
try {
if (this.modifyWay === eModifyWay.ORIGINAL_PWD) {
await this.modifyPwdFunc(this.phone, this.pwd, this.pwd2);
} else if (this.modifyWay === eModifyWay.CODE) {
}
} catch (err) {}
this.loading = false;
},
},
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="px-5">
<pwd-modify
:phone="$route.query.phone"
:modifyPwdFunc="modifyPwdFunc"
:sendSmsFunc="sendSmsFunc"
/>
</div>
</template>
<script lang="ts">
import Vue, { VueConstructor } from "vue";
import PwdModify from "./PwdModify.vue";
export default (
Vue as VueConstructor<
Vue & {
modifyPwdFunc: any;
sendVoiceFunc: any;
sendSmsFunc: any;
}
>
).extend({
components: { PwdModify },
inject: ["modifyPwdFunc", "sendSmsFunc"],
});
</script>
<style>
</style>
\ No newline at end of file
export type tModifyPwdFunc = (phone: string, originalPwd: string, newPwd: string) => Promise<any>
export enum eModifyWay {
ORIGINAL_PWD,
CODE
}
\ No newline at end of file
<template>
<div>
<div class="text-font-white text-2xl mt-16">设置密码</div>
<div class="text-font-white mt-8">验证码已发送至 +86 {{ phone }}</div>
<CodeInput
class="mt-8"
:placeholder="codeConfig.placeholder"
:maxlength="codeConfig.maxLen"
:value="code"
:type="codeConfig.type"
:handleChange="handleCodeChange"
:phone="phone"
:sendSmsFunc="sendSmsFunc"
:sendVoiceFunc="sendVoiceFunc"
:phoneValid="phoneValid"
:sendSmsAuto="true"
/>
<Input
:placeholder="pwdConfig.placeholder2"
:maxlength="pwdConfig.maxLen"
:value="pwd"
:type="pwdConfig.type"
@change="handlePwdChange"
>
<template #button> </template>
</Input>
<LoginButton
class="mt-20"
text="确定"
:loading="loading"
:disabled="getConfirmDisabled"
@click="handleClickConfirm"
></LoginButton>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import CodeInput from "../Login/components/CodeInput/index.vue";
import { codeConfig, phoneConfig, pwdConfig } from "../Login/const";
import { tSendSmsFunc, tSendVoiceFunc } from "../Login/types";
import Input from "@/components/common/Input/index.vue";
import LoginButton from "../Login/components/LoginButton/index.vue";
import { tSetPwdFunc } from "./types";
export default defineComponent({
components: { CodeInput, Input, LoginButton },
props: {
phone: {
type: String,
default: "",
},
sendSmsFunc: {
type: Function as PropType<tSendSmsFunc>,
required: true,
},
sendVoiceFunc: {
type: Function as PropType<tSendVoiceFunc>,
},
setPwdFunc: {
type: Function as PropType<tSetPwdFunc>,
required: true,
},
},
data() {
return {
codeConfig,
pwdConfig,
code: "",
pwd: "",
loading: false,
};
},
computed: {
getConfirmDisabled(): boolean {
return (
!(codeConfig.validate(this.code) && pwdConfig.validate(this.pwd)) ||
!this.phoneValid
);
},
phoneValid(): boolean {
return phoneConfig.validate(this.phone);
},
},
methods: {
async handleClickConfirm() {
const { phone, code, pwd } = this;
this.loading = true;
try {
await this.setPwdFunc(phone, code, pwd);
} catch (err) {}
this.loading = false;
},
handleCodeChange(v: string) {
this.code = v;
},
sendSms() {
return this.sendSmsFunc(this.phone);
},
sendVoice() {
return this.sendVoiceFunc(this.phone);
},
handlePwdChange(value: string) {
this.pwd = value;
},
},
});
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="px-5">
<pwd-setting
:phone="$route.query.phone"
:sendSmsFunc="sendSmsFunc"
:setPwdFunc="setPwdFunc"
/>
</div>
</template>
<script lang="ts">
import PwdSetting from "./PwdSetting.vue";
import Vue, { VueConstructor } from "vue";
export default (
Vue as VueConstructor<
Vue & {
sendSmsFunc: any;
setPwdFunc: any;
}
>
).extend({
components: { PwdSetting },
inject: ["sendSmsFunc", "setPwdFunc"],
methods: {},
});
</script>
/* 设置密码 */
export type tSetPwdFunc = (phone: string, code: string, pwd: string) => Promise<any>
\ No newline at end of file
<template>
<div class="bg-font-black">
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({
provide(): object {
return {
sendSmsFunc: this.sendSmsFunc,
accountStatusCheckFunc: this.accountStatusCheckFunc,
registerFunc: this.registerFunc,
loginByCodeFunc: this.loginByCodeFunc,
loginByPwdFunc: undefined,
setPwdFunc: this.setPwdFunc,
modifyPwdFunc: this.modifyPwdFunc,
};
},
methods: {
async sendSmsFunc(phone: string) {
// await this.$service.userService.getVerificationCode(phone, "1");
},
async accountStatusCheckFunc(phone: string) {
// const isRegisterd = await this.$service.userService.isRegisterd(phone);
// if (!isRegisterd) {
// return eAccountType.NO_REG;
// } else {
// const isPwdSet = await this.$service.userService.isPwdSet(phone);
// return isPwdSet ? eAccountType.REG_PDSET : eAccountType.REG_NOPD;
// }
},
async registerFunc(phone: string, code: string) {
// const ret = await this.$service.userService.loginAndSign({
// codetype: "sms",
// telephone: phone,
// verificationCode: code,
// });
// if (ret) {
// const { Authorization, user } = ret;
// token.setToken(Authorization);
// userMsg.setUserMsg(user);
// this.$router.push({
// name: "Home",
// });
// }
},
async loginByCodeFunc(phone: string, code: string) {
return this.registerFunc(phone, code);
},
async loginByPwdFunc(phone: string, pwd: string) {
console.log(phone, pwd);
},
async setPwdFunc(phone: string, code: string, pwd: string) {
console.log(phone, code, pwd);
this.$router.push({
name: "Home",
});
return 1;
},
async modifyPwdFunc(phone: string, originalPwd: string, newPwd: string) {
console.log(phone, originalPwd, newPwd);
},
},
});
</script>
<style lang="less">
</style>
<template></template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({});
</script>
\ No newline at end of file
<template>
<div class="page flex-col">
<NavBar title="精选理财" />
<div class="layer1 flex-col">
<GroupTitle
class="mt-4"
title="精选理财"
subtitle="安稳省心 爆款甄选"
iconName="icon-shaixuan"
@filter="showFilter"
/>
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
<FnsCard4 />
</div>
<PopUp
title="筛选"
:show="show"
:setShow="(v) => (show = v)"
@clickLeft="clickReset"
@clickRight="clickConfirm"
>
<FnsFilter
:bankList="bankList"
:selectedBanks="selectedBanks"
:setBanks="(v) => (selectedBanks = v)"
:peridList="peridList"
:selectedPerids="selectedPerids"
:setSelectedPerids="(v) => (selectedPerids = v)"
:min="min"
:max="max"
:setMin="(v) => (min = v)"
:setMax="(v) => (max = v)"
/>
</PopUp>
</div>
</template>
<script>
import NavBar from "@/components/NavBar/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import FnsCard4 from "@/components/FnsCard4/index.vue";
import PopUp from "@/components/PopUp/index.vue";
import FnsFilter from "@/components/PopUpContent/FnsFilter/index.vue";
import Vue, { defineComponent } from "vue";
export default defineComponent({
components: {
PopUp,
NavBar,
GroupTitle,
FnsFilter,
FnsCard4,
},
data() {
return {
show: true,
bankList: [
{
name: "zhongguo",
id: 1,
},
{
name: "df",
id: 12,
},
{
name: "43",
id: 13,
},
{
name: "zhongg3456uo",
id: 14,
},
{
name: "zhong345guo",
id: 15,
},
],
selectedBanks: [],
peridList: [
{ id: 1, name: "lsdkfj" },
{ id: 12, name: "lsdkfj" },
{ id: 31, name: "lsdkfj" },
{ id: 14, name: "lsdkfj" },
{ id: 15, name: "lsdkfj" },
],
selectedPerids: [],
min: undefined,
max: undefined,
reqParams: {
selectedBanks: [],
selectedPerids: [],
min: undefined,
max: undefined,
},
};
},
methods: {
showFilter() {
console.log("???");
this.show = true;
this.selectedBanks = this.reqParams.selectedBanks;
this.selectedPerids = this.reqParams.selectedPerids;
this.max = this.reqParams.max;
this.min = this.reqParams.min;
},
clickReset() {
this.selectedBanks = [];
this.selectedPerids = [];
this.min = undefined;
this.max = undefined;
},
clickConfirm() {
this.reqParams = {
...this.reqParams,
selectedBanks: this.selectedBanks,
selectedPerids: this.selectedPerids,
min: this.min,
max: this.max,
};
this.show = false;
},
},
});
</script>
<style lang="less" scoped>
.page {
z-index: 1;
position: relative;
background-color: rgba(247, 247, 250, 1);
justify-content: flex-start;
align-items: flex-start;
}
.layer1 {
z-index: auto;
width: 100%;
}
.layer2 {
z-index: auto;
width: 358px;
height: 18px;
}
.word1 {
z-index: 17;
width: 54px;
display: block;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 15px;
text-align: center;
}
.main1 {
z-index: 11;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.main2 {
z-index: 7;
width: 16px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
0px no-repeat;
margin: 5px 0 0 5px;
}
.label1 {
z-index: 4;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
.info1 {
z-index: 78;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word2 {
z-index: 79;
width: 102px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 3px 0 0 14px;
}
.label2 {
z-index: 80;
width: 16px;
height: 16px;
margin: 3px 0 0 133px;
}
.layer4 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 20px 0 0 17px;
}
.outer1 {
z-index: 23;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
}
.block1 {
z-index: auto;
width: 191px;
height: 78px;
justify-content: space-between;
}
.group1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt1 {
z-index: 28;
width: 61px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 3px;
}
.word3 {
z-index: 32;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.group2 {
z-index: 33;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.group3 {
z-index: auto;
width: 98px;
height: 74px;
}
.txt2 {
z-index: 29;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.txt3 {
z-index: 30;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.info2 {
z-index: 31;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
.outer2 {
z-index: 26;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng70c7ac37d37e44856a8b49947aa31eed8f33d7ab806cf2d9ff723d50672c3b9e)
0px 0px no-repeat;
margin-top: 41px;
}
.layer5 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 10px 0 0 17px;
}
.bd1 {
z-index: 35;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
}
.group4 {
z-index: auto;
width: 260px;
height: 78px;
justify-content: space-between;
}
.group5 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.info3 {
z-index: 40;
width: 58px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 4px;
}
.word4 {
z-index: 44;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.group6 {
z-index: 45;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.group7 {
z-index: auto;
width: 167px;
height: 74px;
}
.txt4 {
z-index: 41;
width: 167px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.info4 {
z-index: 42;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt5 {
z-index: 43;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
.bd2 {
z-index: 38;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43ebde3e0d3f341174c4a41153b4afdb2634d25c5cef2768a049679f755813a7)
0px 0px no-repeat;
margin-top: 41px;
}
.layer6 {
z-index: 47;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.section1 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.box1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.info5 {
z-index: 48;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.info6 {
z-index: 52;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.box2 {
z-index: 53;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.box3 {
z-index: auto;
width: 92px;
height: 74px;
}
.word5 {
z-index: 49;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.txt6 {
z-index: 50;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.word6 {
z-index: 51;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 10px;
}
.layer7 {
z-index: 55;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.section2 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.wrap1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt7 {
z-index: 56;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.info7 {
z-index: 60;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.wrap2 {
z-index: 61;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.wrap3 {
z-index: auto;
width: 92px;
height: 74px;
}
.txt8 {
z-index: 57;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.info8 {
z-index: 58;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt9 {
z-index: 59;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 10px;
}
.layer8 {
z-index: 63;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.main3 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.box4 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt10 {
z-index: 64;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.word7 {
z-index: 68;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.box5 {
z-index: 69;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.box6 {
z-index: auto;
width: 92px;
height: 74px;
}
.word8 {
z-index: 65;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.info9 {
z-index: 66;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt11 {
z-index: 67;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 10px;
}
.layer9 {
z-index: 19;
height: 28px;
align-items: center;
}
.main4 {
z-index: auto;
width: 201px;
height: 22px;
justify-content: space-between;
}
.bd3 {
z-index: 92;
width: 16px;
height: 16px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbd286f871df361d77a59e4d06a98bd81b81c3bf9b82240cabd0a2599ffc15392)
2px -1px no-repeat;
margin-top: 5px;
}
.info10 {
z-index: 20;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.layer10 {
z-index: 25;
position: absolute;
left: 306px;
top: 154px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(255, 145, 13, 1);
}
.word9 {
z-index: 27;
position: absolute;
left: 321px;
top: 158px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.layer11 {
z-index: 37;
position: absolute;
left: 306px;
top: 278px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(53, 85, 220, 1);
}
.txt12 {
z-index: 39;
position: absolute;
left: 321px;
top: 282px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.layer12 {
z-index: 71;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
left: 20px;
top: 763px;
padding: 0 0 16px 22px;
}
.layer13 {
z-index: auto;
width: 156px;
height: 78px;
}
.info11 {
z-index: 72;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
margin-top: 15px;
}
.bd4 {
z-index: 75;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfeebb919020bb7ef135b93939ebfdbb759f4f9d1c08e335e6a66571c347bff55) -1px
0px no-repeat;
margin-left: 19px;
}
.bd5 {
z-index: auto;
width: 65px;
height: 47px;
margin-left: 9px;
}
.txt13 {
z-index: 73;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word10 {
z-index: 74;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
</style>
<template>
<div class="flex items-center">
<div
class="h-9 flex-row flex items-center bg-white px-2.5"
style="border-radius: 9px"
v-if="active"
>
<Icon color="#4E61C9" :name="iconName" size="23" />
<span class="ml-2 tabText text-app-blue">{{ tabName }}</span>
</div>
<div v-else>
<Icon color="#A3ABE0" :name="iconName" size="23" />
</div>
</div>
</template>
<script>
import Icon from "@/components/common/Icon";
export default {
props: ["tabName", "iconName", "active"],
components: {
Icon,
},
};
</script>
<style>
.tabText {
font-size: 10px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3e4faf;
line-height: 14px;
}
</style>
\ No newline at end of file
<template>
<div
class="h-16 flex bg-app-blue items-center mx-2.5 overflow-hidden"
style="border-radius: 19px"
>
<div class="flex-row flex justify-around w-full h-full">
<div
v-for="item in list"
class="flex items-center justify-center"
:class="
activeTabRouteName === item.routeName ? 'little-grow' : 'flex-grow '
"
:key="item.name"
@click="clickTabItem(item)"
>
<TabItem
:tabName="item.name"
:iconName="item.icon"
:active="activeTabRouteName === item.routeName"
/>
</div>
</div>
</div>
</template>
<script lang="ts">
import Icon from "@/components/common/Icon.vue";
import TabItem from "./TabItem.vue";
import tabList from "../../tabList";
import { defineComponent } from "vue";
export default defineComponent({
components: {
Icon,
TabItem,
},
props: ["list", "activeTabRouteName"],
methods: {
clickTabItem(item: typeof tabList[0]) {
this.$router.push({
name: item.routeName,
});
},
},
});
</script>
<style scoped>
.wrap25 {
z-index: 39;
height: 60px;
align-self: center;
justify-content: center;
align-items: flex-start;
}
.box3 {
z-index: 40;
height: 35px;
border-radius: 9px;
background-color: rgba(255, 255, 255, 1);
width: 80px;
justify-content: center;
align-items: center;
}
.layer5 {
z-index: auto;
width: 54px;
height: 21px;
justify-content: space-between;
}
.label12 {
z-index: 68;
width: 22px;
height: 21px;
}
.little-grow {
flex-grow: 0.5;
}
.info12 {
z-index: 67;
width: 26px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 10px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 14px;
text-align: center;
margin-top: 4px;
}
.icon8 {
z-index: 59;
width: 25px;
height: 22px;
margin: 6px 0 0 51px;
}
.label13 {
z-index: 41;
width: 22px;
height: 23px;
margin: 6px 0 0 54px;
}
.label14 {
z-index: 48;
width: 22px;
height: 22px;
margin: 6px 0 0 58px;
}
</style>
\ No newline at end of file
<template>
<van-swipe class="my-swipe" indicator-color="#3E4FAF">
<van-swipe-item class="flex justify-center swpiItem"
><FnsCard3 />
</van-swipe-item>
<van-swipe-item class="flex justify-center swpiItem"
><FnsCard3
/></van-swipe-item>
<van-swipe-item class="flex justify-center swpiItem"
><FnsCard3
/></van-swipe-item>
</van-swipe>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import { Swipe, SwipeItem } from "vant";
import FnsCard3 from "@/components/FnsCard3/index.vue";
export default defineComponent({
components: {
"van-swipe": Swipe,
"van-swipe-item": SwipeItem,
FnsCard3,
},
});
</script>
<style lang="less" scoped>
.my-swipe /deep/ .van-swipe__indicator {
background-color: #e7e7e7;
opacity: 1;
}
.swpiItem {
height: 270px;
}
</style>
\ No newline at end of file
.page {
z-index: 1;
position: relative;
width: 375px;
background-color: rgba(247, 247, 250, 1);
overflow: hidden;
justify-content: flex-start;
padding-top: 0;
.main1 {
z-index: auto;
width: 375px;
.outer1 {
z-index: 2;
height: 240px;
background-color: rgba(62, 79, 175, 1);
width: 375px;
position: relative;
.box1 {
z-index: auto;
width: 358px;
height: 18px;
margin: 13px 0 0 3px;
.word1 {
z-index: 38;
width: 54px;
display: block;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 15px;
text-align: center;
}
.wrap1 {
z-index: 32;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.wrap2 {
z-index: 28;
width: 16px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
0px no-repeat;
margin: 5px 0 0 5px;
}
.icon1 {
z-index: 25;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
}
.box2 {
z-index: auto;
height: 20px;
margin-top: 74px;
margin-left: 20px;
margin-right: 20px;
.label1 {
z-index: 82;
width: 14px;
height: 14px;
margin-top: 3px;
}
.word2 {
z-index: 22;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 6px;
}
.label2 {
z-index: 86;
width: 14px;
height: 14px;
margin: 3px 0 0 42px;
}
.word3 {
z-index: 39;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 6px;
}
.icon2 {
z-index: 90;
}
.txt1 {
z-index: 40;
width: 84px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 6px;
}
}
.box3 {
z-index: 42;
height: 88px;
width: 375px;
justify-content: flex-end;
padding-bottom: 12px;
align-items: center;
position: absolute;
left: 0;
top: -29px;
.word4 {
z-index: 43;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
}
}
.outer2 {
z-index: 3;
width: 337px;
height: 121px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 1);
align-self: center;
}
.label3 {
z-index: 6;
width: 38px;
height: 6px;
align-self: center;
margin-top: 15px;
}
.outer3 {
z-index: auto;
width: 326px;
height: 22px;
margin: 20px 0 0 24px;
.info1 {
z-index: 79;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.txt2 {
z-index: 138;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 3px 0 0 110px;
}
.label4 {
z-index: 134;
width: 5px;
height: 10px;
margin: 7px 0 0 5px;
}
}
.outer4 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 20px 0 0 20px;
.mod1 {
z-index: 46;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
.bd1 {
z-index: auto;
width: 191px;
height: 78px;
justify-content: space-between;
.box4 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
.word5 {
z-index: 51;
width: 61px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 3px;
}
.word6 {
z-index: 55;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
}
.box5 {
z-index: 56;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b)
0px 0px no-repeat;
}
.box6 {
z-index: auto;
width: 98px;
height: 74px;
.txt3 {
z-index: 52;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word7 {
z-index: 53;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt4 {
z-index: 54;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
}
}
}
.mod2 {
z-index: 49;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng70c7ac37d37e44856a8b49947aa31eed8f33d7ab806cf2d9ff723d50672c3b9e)
0px 0px no-repeat;
margin-top: 41px;
}
}
.outer5 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 10px 0 0 20px;
.main2 {
z-index: 58;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
.bd2 {
z-index: auto;
width: 260px;
height: 78px;
justify-content: space-between;
.layer1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
.txt5 {
z-index: 63;
width: 58px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 4px;
}
.word8 {
z-index: 67;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
}
.layer2 {
z-index: 68;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b)
0px 0px no-repeat;
}
.layer3 {
z-index: auto;
width: 167px;
height: 74px;
.txt6 {
z-index: 64;
width: 167px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word9 {
z-index: 65;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt7 {
z-index: 66;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin-top: 10px;
}
}
}
}
.main3 {
z-index: 61;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43ebde3e0d3f341174c4a41153b4afdb2634d25c5cef2768a049679f755813a7)
0px 0px no-repeat;
margin-top: 41px;
}
}
.pic1 {
z-index: 120;
width: 134px;
height: 5px;
align-self: center;
margin-top: 42px;
}
}
.main5 {
z-index: 48;
position: absolute;
left: 306px;
top: 455px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(255, 145, 13, 1);
}
.txt9 {
z-index: 50;
position: absolute;
left: 321px;
top: 459px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.main6 {
z-index: 60;
position: absolute;
left: 306px;
top: 579px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(53, 85, 220, 1);
}
.word16 {
z-index: 62;
position: absolute;
left: 321px;
top: 583px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.label5 {
z-index: 118;
position: absolute;
left: 335px;
top: 773px;
width: 16px;
height: 16px;
}
.main7 {
z-index: 95;
height: 60px;
border-radius: 19px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4a651d032b0546c8735611d8b700e26b3a7851302defe35e7b30105daf7e1c88)
100% no-repeat;
width: 355px;
justify-content: center;
align-items: center;
position: absolute;
left: 10px;
top: 780px;
.layer4 {
z-index: auto;
width: 308px;
height: 35px;
.icon3 {
z-index: 110;
width: 22px;
height: 23px;
margin-top: 6px;
}
.bd7 {
z-index: 117;
height: 35px;
border-radius: 9px;
background-color: rgba(255, 255, 255, 1);
margin-left: 53px;
width: 80px;
justify-content: center;
align-items: center;
.box7 {
z-index: auto;
width: 58px;
height: 24px;
justify-content: space-between;
.icon4 {
z-index: 122;
width: 26px;
height: 24px;
}
.word17 {
z-index: 132;
width: 26px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 10px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 14px;
text-align: center;
margin-top: 5px;
}
}
}
.icon5 {
z-index: 96;
width: 22px;
height: 23px;
margin: 6px 0 0 51px;
}
.label6 {
z-index: 103;
width: 22px;
height: 22px;
margin: 6px 0 0 58px;
}
}
}
}
<template>
<div class="page flex-col">
<div class="main1 flex-col">
<div class="outer1 flex-col">
<div class="box2 flex-row justify-between">
<div class="flex items-center">
<icon
class="icon2"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="word2">中低风险</span>
</div>
<div class="flex items-center">
<icon
class="icon2"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="word3">风格稳健</span>
</div>
<div class="flex items-center">
<icon
class="icon2"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="txt1">长期持有增值</span>
</div>
</div>
<div class="box3 flex-col"><span class="word4">精选理财</span></div>
</div>
<MainFnsSwip class="relative z-10 mainfnsswip" />
<GroupTitle title="精选理财" subtitle="安稳省心 爆款甄选" />
<FnsCard4 v-for="n in 3" :key="n" :data="n" />
</div>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Icon from "@/components/common/Icon.vue";
import FnsCard3 from "@/components/FnsCard3/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import MainFnsSwip from "./Components/MainFnsSwip/index.vue";
import FnsCard4 from "@/components/FnsCard4/index.vue";
export default defineComponent({
components: {
Icon,
FnsCard3,
MainFnsSwip,
GroupTitle,
FnsCard4,
},
data() {
return {
constants: {},
};
},
methods: {},
});
</script>
<style lang="less" scoped>
@import "./index.less";
.mainfnsswip {
margin-top: -130px;
}
</style>
\ No newline at end of file
<template>
<div class="flex flex-wrap justify-between">
<div v-for="app in appList" :key="app.name" class="w-1/4 mb-5 text-center">
<div
class="
w-16
h-16
bg-white
app-container
mx-auto
flex
items-center
justify-center
"
>
<Icon :name="app.icon" :color="app.color" size="25" />
</div>
<div class="mt-2.5 app-name">{{ app.name }}</div>
</div>
</div>
</template>
<script lang="ts">
import Icon from "@/components/common/Icon.vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { Icon },
props: ["appList"],
});
</script>
<style scoped>
.app-container {
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
border-radius: 20px;
}
.app-name {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1b1f37;
}
</style>
\ No newline at end of file
<template>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(image, index) in bannerUrls" :key="index">
<vantImage fit="contain" class="h-36 w-full" :src="image" />
</van-swipe-item>
</van-swipe>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Image } from "vant";
export default defineComponent({
components: {
vantImage: Image,
},
props: {
bannerUrls: {
type: Array,
default() {
return [
"https://img01.yzcdn.cn/vant/apple-1.jpg",
"https://img01.yzcdn.cn/vant/apple-2.jpg",
];
},
},
},
});
</script>
<style scoped lang="less">
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 100px;
text-align: center;
background-color: #818c92;
}
</style>
<template>
<div class="bd4 overflow-hidden block1" style="width: 31%">
<p class="txt6 overflow-ellipsis overflow-hidden" style="margin-top: 30px">
{{ item.lanhutext0 }}
</p>
<p class="word10 overflow-ellipsis overflow-hidden">
{{ item.lanhutext1 }}
</p>
<p class="word11 overflow-ellipsis overflow-hidden">
{{ item.lanhutext2 }}
</p>
<p class="txt7 overflow-ellipsis overflow-hidden">{{ item.lanhutext3 }}</p>
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({
props: ["item"],
});
</script>
<style scoped>
.bd4 {
z-index: auto;
height: 110px;
}
.block1 {
height: 160px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
width: 105px;
justify-content: flex-end;
padding-bottom: 20px;
align-items: center;
}
.txt6 {
z-index: 121;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: center;
}
.word10 {
z-index: 122;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 5px;
}
.word11 {
z-index: 119;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
letter-spacing: 0.23999999463558197px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: center;
margin-top: 20px;
}
.txt7 {
z-index: 120;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: center;
margin-top: 3px;
}
</style>
\ No newline at end of file
<template>
<van-notice-bar
left-icon="volume-o"
:scrollable="false"
background="white"
style="border-radius: 24px"
color="#1B1F37"
class="mx-3.5 wrap11"
>
<template #left-icon>
<Icon name="icon-tongzhi" color="#1B1F37" class="mr-2" />
</template>
<van-swipe
vertical
class="notice-swipe"
:autoplay="3000"
:show-indicators="false"
>
<!-- <van-swipe-item>内容 1</van-swipe-item> -->
<!-- <van-swipe-item>内容 2</van-swipe-item> -->
<van-swipe-item class="overflow-ellipsis overflow-hidden"
>内容
3asdflkkllllllllllllllllllllllllllllllllllll3asdflkkllllllllllllllllllllllllllllllllllll3asdflkkllllllllllllllllllllllllllllllllllll</van-swipe-item
>
</van-swipe>
</van-notice-bar>
</template>
<script lang="ts">
import Icon from "@/components/common/Icon.vue";
import Vue, {defineComponent} from "vue";
import { NoticeBar, Swipe, SwipeItem } from "vant";
export default defineComponent({
components: {
Icon,
"van-swipe": Swipe,
"van-swipe-item": SwipeItem,
},
});
</script>
<style>
.notice-swipe {
height: 40px;
line-height: 40px;
}
.layer3 {
z-index: auto;
height: 17px;
justify-content: space-between;
}
.wrap11 {
height: 35px;
border-radius: 17.5px 17.5px 17.5px 17.5px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
justify-content: center;
padding: 0 14px;
}
.label7 {
z-index: 12;
width: 16px;
height: 14px;
margin-top: 2px;
}
.word7 {
z-index: 11;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
}
</style>
\ No newline at end of file
export default [
{
name: '贷款服务',
icon: 'icon-daikuan',
color: '#44D392',
},
{
name: '理财产品',
icon: 'icon-licaichanpin',
color: '#FF9534',
},
{
name: '精彩活动',
icon: 'icon-jingcaihuodong',
color: '#D886ED',
},
{
name: '网点服务',
icon: 'icon-wangdianfuwu',
color: '#00CEF7',
},
{
name: '政策支持',
icon: 'icon-zhengcezhichi',
color: '#D886ED',
},
{
name: '新闻动态',
icon: 'icon-xinwendongtai',
color: '#00CEF7',
},
{
name: '精彩直播',
icon: 'icon-jingcaizhibo',
color: '#0FCBA5',
},
{
name: '消息中心',
icon: 'icon-xiaoxizhongxin',
color: '#FF9566',
},
]
<template>
<div class="page flex-col">
<div class="outer1 flex-col">
<Banner class="w-full overflow-hidden" />
<AppList :appList="appList" class="mt-7" />
<Notify class="mt-2.5" />
<group-title class="mt-7" title="精选理财" />
<div class="mx-5 flex justify-between mt-5">
<FnsCard v-for="(item, index) in loopData0" :item="item" :key="index" />
</div>
<group-title class="mt-7" title="热门贷款" />
<LoanCard class="mt-5" />
<group-title class="mt-7" title="精彩直播" />
<LiveCard class="mt-4" />
<group-title class="mt-7" title="精彩活动" />
<img
class="mx-5 mt-5"
src="https://alipic.lanhuapp.com/SketchPng94bbf087d5f40926bfd40b724cb11350e55eec2bd48ad126dcc60c87d685ff2d"
alt=""
/>
<group-title class="mt-7" title="热门资讯" />
<HotNews v-for="n in 2" :key="n" />
<!-- <div class="wrap24 flex-row">
<div class="bd7 flex-col">
<span class="info10">建信银行为您量身定做打造良好的信贷体验</span>
<div class="section1 flex-row">
<span class="word25">建信个人贷</span>
<span class="info11">2021-07-10</span>
</div>
</div>
<div class="bd8 flex-col">
<img
class="img1"
referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3cfe1683e7037e9adb65b1ebc163f4c5bd44f4dfa15c56ce2636f4d22fe8eba7"
/>
</div>
</div> -->
</div>
</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from "vue";
import Banner from "./Banner/Banner.vue";
import AppList from "./AppList/index.vue";
import appList from "./appList";
import Icon from "@/components/common/Icon.vue";
import Notify from "./Notify/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import FnsCard from "./FnsCard/index.vue";
import LoanCard from "@/components/LoanCard/index.vue";
import LiveCard from "@/components/LiveCard/index.vue";
import HotNews from "@/components/HotNews/index.vue";
export default defineComponent({
components: {
Banner,
AppList,
Icon,
Notify,
GroupTitle,
FnsCard,
LoanCard,
LiveCard,
HotNews,
},
data() {
return {
appList,
loopData0: [
{
lanhutext0: "货币市场基金",
lanhutext1: "乾元-日鑫月遗…",
lanhutext2: "4.05%",
lanhutext3: "预计年化",
},
{
lanhutext0: "期限158天",
lanhutext1: "乾元-私享202…",
lanhutext2: "3.10%",
lanhutext3: "预计年化",
},
{
lanhutext0: "债券基金",
lanhutext1: "建信增利",
lanhutext2: "2.73%",
lanhutext3: "预计年化",
},
],
constants: {},
};
},
});
</script>
<style scoped>
.page {
background-color: rgba(247, 247, 250, 1);
}
.wrap13 {
z-index: auto;
width: 335px;
height: 159px;
justify-content: space-between;
margin: 21px 0 0 20px;
}
.wrap14 {
z-index: auto;
width: 330px;
height: 22px;
margin: 31px 0 0 20px;
}
.word12 {
z-index: 96;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word13 {
z-index: 251;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 3px 0 0 230px;
}
.icon4 {
z-index: 247;
width: 5px;
height: 10px;
margin: 7px 0 0 5px;
}
.wrap17 {
z-index: auto;
width: 330px;
height: 22px;
margin: 30px 0 0 20px;
}
.word17 {
z-index: 73;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.txt11 {
z-index: 79;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 2px 0 0 230px;
}
.icon5 {
z-index: 75;
width: 5px;
height: 10px;
margin: 6px 0 0 5px;
}
.wrap19 {
z-index: auto;
width: 330px;
height: 22px;
margin: 30px 0 0 20px;
}
.info5 {
z-index: 200;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.info6 {
z-index: 239;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 3px 0 0 230px;
}
.label10 {
z-index: 235;
width: 5px;
height: 10px;
margin: 7px 0 0 5px;
}
.wrap20 {
z-index: 224;
position: relative;
height: 90px;
border-radius: 10px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31633e386bbda59e950e5c032acc54d940fe3128b4f063d83a161084f4bbd79f)
100% no-repeat;
align-self: center;
}
.pic1 {
z-index: 226;
position: absolute;
left: 97px;
top: 0;
width: 96px;
height: 45px;
}
.info7 {
z-index: 228;
position: absolute;
left: 23px;
top: 17px;
width: 91px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
letter-spacing: 0.2160000056028366px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 25px;
text-align: center;
}
.word20 {
z-index: 230;
position: absolute;
left: 122px;
top: 17px;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
letter-spacing: 0.2160000056028366px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 25px;
text-align: center;
}
.word21 {
z-index: 229;
position: absolute;
left: 24px;
top: 41px;
width: 116px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 10px;
letter-spacing: 0.11999999731779099px;
white-space: nowrap;
line-height: 14px;
text-align: center;
}
.pic2 {
z-index: 225;
position: absolute;
left: 199px;
top: 17px;
width: 136px;
height: 73px;
}
.mod1 {
z-index: 232;
height: 18px;
border-radius: 9px;
background-color: rgba(237, 110, 80, 1);
width: 80px;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 24px;
top: 60px;
}
.txt12 {
z-index: 233;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.icon6 {
z-index: 227;
position: absolute;
left: 0;
top: 59px;
width: 41px;
height: 31px;
}
.wrap21 {
z-index: auto;
width: 330px;
height: 22px;
margin: 30px 0 0 20px;
}
.word22 {
z-index: 211;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word23 {
z-index: 245;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 1px 0 0 230px;
}
.icon7 {
z-index: 241;
width: 5px;
height: 10px;
margin: 5px 0 0 5px;
}
.wrap24 {
z-index: auto;
width: 335px;
height: 88px;
justify-content: space-between;
margin: 9px 0 0 20px;
}
.bd7 {
z-index: auto;
width: 225px;
height: 88px;
}
.info10 {
z-index: 213;
width: 225px;
height: 50px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangSC-Medium;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.section1 {
z-index: auto;
width: 149px;
height: 25px;
margin-top: 13px;
justify-content: space-between;
}
.word25 {
z-index: 214;
width: 68px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.info11 {
z-index: 215;
width: 71px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.bd8 {
z-index: 217;
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4b4358c351d14ce6d863cadb963d00b4ab6a161c196afa98cf1a9c4a6e640ec5)
100% no-repeat;
margin-top: 3px;
}
.img1 {
z-index: 218;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
}
.label11 {
z-index: 55;
width: 16px;
height: 16px;
align-self: flex-end;
margin: 6px 24px 0 0;
}
.wrap25 {
z-index: 39;
height: 60px;
border-radius: 19px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4a651d032b0546c8735611d8b700e26b3a7851302defe35e7b30105daf7e1c88)
100% no-repeat;
align-self: center;
margin-top: 4px;
width: 355px;
justify-content: center;
align-items: flex-start;
padding-left: 20px;
}
.outer2 {
z-index: auto;
width: 312px;
height: 35px;
}
.box3 {
z-index: 40;
height: 35px;
border-radius: 9px;
background-color: rgba(255, 255, 255, 1);
width: 80px;
justify-content: center;
align-items: center;
}
.layer5 {
z-index: auto;
width: 54px;
height: 21px;
justify-content: space-between;
}
.label12 {
z-index: 68;
width: 22px;
height: 21px;
}
.info12 {
z-index: 67;
width: 26px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 10px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 14px;
text-align: center;
margin-top: 4px;
}
.icon8 {
z-index: 59;
width: 25px;
height: 22px;
margin: 6px 0 0 51px;
}
.label13 {
z-index: 41;
width: 22px;
height: 23px;
margin: 6px 0 0 54px;
}
.label14 {
z-index: 48;
width: 22px;
height: 22px;
margin: 6px 0 0 58px;
}
.pic4 {
z-index: 57;
width: 134px;
height: 5px;
align-self: center;
margin-top: 8px;
}
</style>
\ No newline at end of file
<template> <template>
<div class="home"> <div>
<img alt="Vue logo" src="../assets/logo.png"> <div class="home" v-for="n in 1000" :key="n">adsfads</div>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import Vue, {defineComponent} from "vue";
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({ export default defineComponent({
name: 'Home', components: {},
components: {
HelloWorld,
},
}); });
</script> </script>
<template>
<div class="mine">
mine
</div>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({
components: {},
});
</script>
<template>
<div class="h-screen bg-app-bg flex flex-col overflow-hidden">
<div class="flex-grow overflow-auto">
<router-view />
</div>
<TabBar
:list="tabList"
:activeTabRouteName="activeTabRouteName"
class="mt-1 flex-shrink-0"
/>
<div class="h-4 flex-shrink-0"></div>
</div>
</template>
<script>
import Vue, { defineComponent } from "vue";
import TabBar from "./Components/TabBar/index.vue";
import tabList from "./tabList";
export default defineComponent({
components: {
TabBar,
},
data() {
return {
tabList,
};
},
mounted() {},
computed: {
activeTabRouteName() {
return this.$route.name;
},
},
});
</script>
<style>
</style>
\ No newline at end of file
export default [
{
name: '首页',
routeName: 'Home',
icon: 'icon-shouye-tab-xuanze1',
},
{
name: '理财',
routeName: 'FinancialManagement',
icon: 'icon-licai-tabxuanze',
},
{
name: '贷款',
routeName: 'Loan',
icon: 'icon-daikuan-tab-xuanze',
},
{
name: '我的',
routeName: 'Mine',
icon: 'icon-wode-tabdianji',
},
]
const colors = require('tailwindcss/colors')
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
colors: {
"transparent": "transparent",
"app-blue": "#3E4FAF",
"app-red": "#F03A30",
"app-white": "#F9FBFF",
"app-bg": "#F7F7FA",
"app-line": "#EAEAEB",
"app-main-txt": "#516379",
"app-minor-txt": "#EAEAEB",
black: colors.black,
white: colors.white,
gray: colors.coolGray,
red: colors.red,
yellow: colors.amber,
green: colors.emerald,
blue: colors.blue,
indigo: colors.indigo,
purple: colors.violet,
pink: colors.pink,
},
fontFamily: {
"pf-r": ["PingFangSC-Regular", "PingFang SC"],
}
},
variants: {
extend: {},
},
plugins: [],
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment