Compare commits
No commits in common. "0fda619b430bc0f873c0e5019e16bb6f1a2a8f70" and "d7a13106fc91448f0c512542f0ce6d3d7c34ba96" have entirely different histories.
0fda619b43
...
d7a13106fc
220
package-lock.json
generated
220
package-lock.json
generated
@ -8,16 +8,16 @@
|
||||
"name": "angular-demo",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.0.8",
|
||||
"@angular/cdk": "^17.0.4",
|
||||
"@angular/common": "^17.0.8",
|
||||
"@angular/compiler": "^17.0.8",
|
||||
"@angular/core": "^17.0.8",
|
||||
"@angular/forms": "^17.0.8",
|
||||
"@angular/material": "^17.0.4",
|
||||
"@angular/platform-browser": "^17.0.8",
|
||||
"@angular/platform-browser-dynamic": "^17.0.8",
|
||||
"@angular/router": "^17.0.8",
|
||||
"@angular/animations": "^17.0.0",
|
||||
"@angular/cdk": "^17.0.3",
|
||||
"@angular/common": "^17.0.0",
|
||||
"@angular/compiler": "^17.0.0",
|
||||
"@angular/core": "^17.0.0",
|
||||
"@angular/forms": "^17.0.0",
|
||||
"@angular/material": "^17.0.3",
|
||||
"@angular/platform-browser": "^17.0.0",
|
||||
"@angular/platform-browser-dynamic": "^17.0.0",
|
||||
"@angular/router": "^17.0.0",
|
||||
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.2",
|
||||
@ -26,10 +26,10 @@
|
||||
"zone.js": "~0.14.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.0.7",
|
||||
"@angular/cli": "^17.0.7",
|
||||
"@angular/compiler-cli": "^17.0.8",
|
||||
"@angular/localize": "^17.0.8",
|
||||
"@angular-devkit/build-angular": "^17.0.5",
|
||||
"@angular/cli": "^17.0.5",
|
||||
"@angular/compiler-cli": "^17.0.0",
|
||||
"@angular/localize": "^17.0.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"jasmine-core": "~5.1.0",
|
||||
@ -68,12 +68,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/architect": {
|
||||
"version": "0.1700.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1700.7.tgz",
|
||||
"integrity": "sha512-32uitQKsYLGXAKoXBsmOnPsTt9pS+b9cnFI9ZvBFVhJ31I2EOM7vGcMFalhTxdB/DkVHk4TyO78efV0V26DwCA==",
|
||||
"version": "0.1700.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1700.6.tgz",
|
||||
"integrity": "sha512-zVpz736cBZHXcv0v2bRLfJLcykanUyEMVQXkGwZp2eygjNK1Ls9s/74o1dXd6nGdvjh6AnkzOU/vouj2dqA41g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/core": "17.0.7",
|
||||
"@angular-devkit/core": "17.0.6",
|
||||
"rxjs": "7.8.1"
|
||||
},
|
||||
"engines": {
|
||||
@ -83,15 +83,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/build-angular": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.0.7.tgz",
|
||||
"integrity": "sha512-AtEzLk6n6BXqQzk0Bsupe6GV0IgUe7RbpBfqROi+NZqMA7OUAHCX3xA6M68Qu+5KxBtW7T5lHeZZ7iP/y39wtQ==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.0.6.tgz",
|
||||
"integrity": "sha512-gYxmbvq5/nk7aVJ6JxIIW0//RM7859kMPJGPKekcCGSWkkObjqG6P5cDgJJNAjMl/IfCsG7B+xGYjr4zN8QV9g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "2.2.1",
|
||||
"@angular-devkit/architect": "0.1700.7",
|
||||
"@angular-devkit/build-webpack": "0.1700.7",
|
||||
"@angular-devkit/core": "17.0.7",
|
||||
"@angular-devkit/architect": "0.1700.6",
|
||||
"@angular-devkit/build-webpack": "0.1700.6",
|
||||
"@angular-devkit/core": "17.0.6",
|
||||
"@babel/core": "7.23.2",
|
||||
"@babel/generator": "7.23.0",
|
||||
"@babel/helper-annotate-as-pure": "7.22.5",
|
||||
@ -102,7 +102,7 @@
|
||||
"@babel/preset-env": "7.23.2",
|
||||
"@babel/runtime": "7.23.2",
|
||||
"@discoveryjs/json-ext": "0.5.7",
|
||||
"@ngtools/webpack": "17.0.7",
|
||||
"@ngtools/webpack": "17.0.6",
|
||||
"@vitejs/plugin-basic-ssl": "1.0.1",
|
||||
"ansi-colors": "4.1.3",
|
||||
"autoprefixer": "10.4.16",
|
||||
@ -234,12 +234,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/build-webpack": {
|
||||
"version": "0.1700.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1700.7.tgz",
|
||||
"integrity": "sha512-B9Mg/qYDpE5my8PJ3VPQyRSUV0Oq1bFUzU8s0ZpqEZl1URKc04pm0LtLmebrMIcUZgDiGk0RHaD+O1E9IV/bdQ==",
|
||||
"version": "0.1700.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1700.6.tgz",
|
||||
"integrity": "sha512-xT5LL92rScVjvGZO7but/YbTQ12PNilosyjDouephl+HIf2V6rwDovTsEfpLYgcrqgodh+R0X0ZCOk95+MmSBA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/architect": "0.1700.7",
|
||||
"@angular-devkit/architect": "0.1700.6",
|
||||
"rxjs": "7.8.1"
|
||||
},
|
||||
"engines": {
|
||||
@ -253,9 +253,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/core": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.7.tgz",
|
||||
"integrity": "sha512-vATobHo5O5tJba424hJfQWLb40GzvZPNsI74dcgSUTgrDph8ksmk5xB9OvEvf0INorQZ2IMphj/VIWj4/+JqSA==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.6.tgz",
|
||||
"integrity": "sha512-+h9VnFHof7rKzBJ5FWrbPXWzbag31QKbUGJ/mV5BYgj39vjzPNUXBW8AaScZAlATi8+tElYXjRMvM49GnuyRLg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ajv": "8.12.0",
|
||||
@ -280,12 +280,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular-devkit/schematics": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.7.tgz",
|
||||
"integrity": "sha512-BY11OkJkM3xyXcvyD7x5kGY/c8Ufd4AfPvI0D9imhVxbns45Q48b1DlvCQvSnCJ/s+OwnkrYb/Efa70ZiaGu8A==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.6.tgz",
|
||||
"integrity": "sha512-2g769MpazA1aOzJOm2MNGosra3kxw8CbdIQQOKkvycIzroRNgN06yHcRTDC03GADgP/CkDJ6kxwJQNG+wNFL2A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/core": "17.0.7",
|
||||
"@angular-devkit/core": "17.0.6",
|
||||
"jsonc-parser": "3.2.0",
|
||||
"magic-string": "0.30.5",
|
||||
"ora": "5.4.1",
|
||||
@ -298,9 +298,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/animations": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.8.tgz",
|
||||
"integrity": "sha512-iKJ2s4ZqVoGS9tSRBuuwYEWTV+Rw6b4zDY1rqiXvbZrpNRxfzYr6s+aYsLQQEindZ4hzxgp9j60FJ8aE/g4w6A==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.6.tgz",
|
||||
"integrity": "sha512-fic61LjLHry79c5H9UGM8Ff311MJnf9an7EukLj2aLJ3J0uadL/H9de7dDp8PaIT10DX9g+aRTIKOmF3PmmXIQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -308,13 +308,13 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "17.0.8"
|
||||
"@angular/core": "17.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk": {
|
||||
"version": "17.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.0.4.tgz",
|
||||
"integrity": "sha512-mh/EuIR0NPfpNqAXBSZWuJeBMXUvUDYdKhiFWZet5NLO1bDgFe1MGLBjtW4us95k4BZsMLbCKNxJgc+4JqwUvg==",
|
||||
"version": "17.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.0.3.tgz",
|
||||
"integrity": "sha512-Qd5uvC09B3+uk2uX1JxmiWrD7wueMHSxNBoCbDEmnrsdDVUta0wN/jj/CtATljxUM8ZqvEvkqgxJCig1od9oyQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -328,15 +328,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cli": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.7.tgz",
|
||||
"integrity": "sha512-oSa0GVAQNA7wFbLJYeaO3kV4iUcbKEqXDLxcIE8s1GfHddBOlXH2P1T4fXonCBl5qvV+joP0G0+fs7I0w2utZQ==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.6.tgz",
|
||||
"integrity": "sha512-BLA2wDeqZManC/7MI6WvRRV+VhrwjxxB7FawLyp4xYlo0CTSOFOfeKPVRMLEnA/Ou4R5d47B+BqJTlep62pHwg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/architect": "0.1700.7",
|
||||
"@angular-devkit/core": "17.0.7",
|
||||
"@angular-devkit/schematics": "17.0.7",
|
||||
"@schematics/angular": "17.0.7",
|
||||
"@angular-devkit/architect": "0.1700.6",
|
||||
"@angular-devkit/core": "17.0.6",
|
||||
"@angular-devkit/schematics": "17.0.6",
|
||||
"@schematics/angular": "17.0.6",
|
||||
"@yarnpkg/lockfile": "1.1.0",
|
||||
"ansi-colors": "4.1.3",
|
||||
"ini": "4.1.1",
|
||||
@ -362,9 +362,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/common": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-17.0.8.tgz",
|
||||
"integrity": "sha512-fFfwtdg7H+OkqnvV/ENu8F8KGfgIiH16DDbQqYY5KQyyQB+SMsoVW29F1fGx6Y30s7ZlsLOy6cHhgrw74itkSw==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-17.0.6.tgz",
|
||||
"integrity": "sha512-FZtf8ol8W2V21ZDgFtcxmJ6JJKUO97QZ+wr/bosyYEryWMmn6VGrbOARhfW7BlrEgn14NdFkLb72KKtqoqRjrg==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -372,14 +372,14 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "17.0.8",
|
||||
"@angular/core": "17.0.6",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/compiler": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.0.8.tgz",
|
||||
"integrity": "sha512-48jWypuhBGTrUUbkz1vB9gjbKKZ3hpuJ2DUUncd331Yw4tqkqZQbBa/E3ei4IHiCxEvW2uX3lI4AwlhuozmUtA==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.0.6.tgz",
|
||||
"integrity": "sha512-PaCNnlPcL0rvByKCBUUyLWkKJYXOrcfKlYYvcacjOzEUgZeEpekG81hMRb9u/Pz+A+M4HJSTmdgzwGP35zo8qw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -387,7 +387,7 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "17.0.8"
|
||||
"@angular/core": "17.0.6"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/core": {
|
||||
@ -396,9 +396,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/compiler-cli": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.0.8.tgz",
|
||||
"integrity": "sha512-ny2SMVgl+icjMuU5ZM57yFGUrhjR0hNxfCn0otAD3jUFliz/Onu9l6EPRKA5Cr8MZx3mg3rTLSBMD17YT8rsOg==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.0.6.tgz",
|
||||
"integrity": "sha512-C1Gfh9kbjYZezEMOwxnvUTHuPXa+6pk7mAfSj8e5oAO6E+wfo2dTxv1J5zxa3KYzxPYMNfF8OFvLuMKsw7lXjA==",
|
||||
"dependencies": {
|
||||
"@babel/core": "7.23.2",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14",
|
||||
@ -418,14 +418,14 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/compiler": "17.0.8",
|
||||
"@angular/compiler": "17.0.6",
|
||||
"typescript": ">=5.2 <5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/core": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-17.0.8.tgz",
|
||||
"integrity": "sha512-tzYsK24LdkNuKNJK6efF4XOqspvF/qOe9j/n1Y61a6mNvFwsJFGbcmdZMby4hI/YRm6oIDoIIFjSep8ycp6Pbw==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-17.0.6.tgz",
|
||||
"integrity": "sha512-QzfKRTDNgGOY9D5VxenUUz20cvPVC+uVw9xiqkDuHgGfLYVFlCAK9ymFYkdUCLTcVzJPxckP+spMpPX8nc4Aqw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -438,9 +438,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/forms": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.0.8.tgz",
|
||||
"integrity": "sha512-WZBHbMQjaSovAzOMhKqZN+m7eUPGfOzh9rKFKvj6UQLIJ9qSpEpqlvL0omU1z/47s3XXeLiBzomMiRfQISJvvw==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.0.6.tgz",
|
||||
"integrity": "sha512-n/trsMtQHUBGiWz5lFaggMcMOuw0gH+96TCtHxQiUYJOdrbOemkFdGrNh3B4fGHmogWuOYJVF5FAm97WRES2XA==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -448,16 +448,16 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "17.0.8",
|
||||
"@angular/core": "17.0.8",
|
||||
"@angular/platform-browser": "17.0.8",
|
||||
"@angular/common": "17.0.6",
|
||||
"@angular/core": "17.0.6",
|
||||
"@angular/platform-browser": "17.0.6",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/localize": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-17.0.8.tgz",
|
||||
"integrity": "sha512-1zW8qWKNMH3r/x4KpwzzUmVY+iN76vYdhjA6gzZDnpJxpon9eyljNEildj9+zSWeNUr2LgJ6HnkIX9q1f3mXfA==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/localize/-/localize-17.0.6.tgz",
|
||||
"integrity": "sha512-LHLadqRQ4lnM0VxWZld2JLO50t3URi7on0YhZp6p/xhY6cQLcTG3GDNGC/k8dg8JW/7aXJU0hmJEMcop9ELM7g==",
|
||||
"dependencies": {
|
||||
"@babel/core": "7.23.2",
|
||||
"fast-glob": "3.3.1",
|
||||
@ -472,14 +472,14 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/compiler": "17.0.8",
|
||||
"@angular/compiler-cli": "17.0.8"
|
||||
"@angular/compiler": "17.0.6",
|
||||
"@angular/compiler-cli": "17.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/material": {
|
||||
"version": "17.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-17.0.4.tgz",
|
||||
"integrity": "sha512-IKkys4EavE1TMHApPMbFLvJU4pP8S8XNfY2eS7/kFwW7eyTcz0zV/IKeBbxkpej19MaouozU+KWeRJtxHg6x8g==",
|
||||
"version": "17.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-17.0.3.tgz",
|
||||
"integrity": "sha512-a7l5hMMCMobULAjwPK8HVQmOsbd3pOwju1QdBVhec0XwNGj2pK4ooKWdUmQcwsUA9DaZaOwAgEISHEADXJfKpQ==",
|
||||
"dependencies": {
|
||||
"@material/animation": "15.0.0-canary.a246a4439.0",
|
||||
"@material/auto-init": "15.0.0-canary.a246a4439.0",
|
||||
@ -532,7 +532,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/animations": "^17.0.0 || ^18.0.0",
|
||||
"@angular/cdk": "17.0.4",
|
||||
"@angular/cdk": "17.0.3",
|
||||
"@angular/common": "^17.0.0 || ^18.0.0",
|
||||
"@angular/core": "^17.0.0 || ^18.0.0",
|
||||
"@angular/forms": "^17.0.0 || ^18.0.0",
|
||||
@ -541,9 +541,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.8.tgz",
|
||||
"integrity": "sha512-XaI+p2AxQaIHzR761lhPUf4OcOp46WDW0IfbvOzaezHE+8r81joZyVSDQPgXSa/aRfI58YhcfUavuGqyU3PphA==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.6.tgz",
|
||||
"integrity": "sha512-nBhWH1MKT2WswgRNIoMnmNAt0n5/fG59BanJtodW71//Aj5aIE+BuVoFgK3wmO8IMoeP4i4GXRInBXs6lUMOJw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -551,9 +551,9 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/animations": "17.0.8",
|
||||
"@angular/common": "17.0.8",
|
||||
"@angular/core": "17.0.8"
|
||||
"@angular/animations": "17.0.6",
|
||||
"@angular/common": "17.0.6",
|
||||
"@angular/core": "17.0.6"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/animations": {
|
||||
@ -562,9 +562,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser-dynamic": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.0.8.tgz",
|
||||
"integrity": "sha512-BIXNKnfBZb8sdluQ7WIhIXFuVnsJJ0SV+aiMKzQ7B6XhWoAXZQnlvON2thydjIIVuCvaF3YmWTbILI2K8YZ2jQ==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.0.6.tgz",
|
||||
"integrity": "sha512-5ZEmBtBkqamTaWjUXCls7G1f3xyK/ykXE7hnUV9CgGqXKrNkxblmbtOhoWdsbuIYjjdxQcAk1qtg/Rg21wcc4w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -572,16 +572,16 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "17.0.8",
|
||||
"@angular/compiler": "17.0.8",
|
||||
"@angular/core": "17.0.8",
|
||||
"@angular/platform-browser": "17.0.8"
|
||||
"@angular/common": "17.0.6",
|
||||
"@angular/compiler": "17.0.6",
|
||||
"@angular/core": "17.0.6",
|
||||
"@angular/platform-browser": "17.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/router": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-17.0.8.tgz",
|
||||
"integrity": "sha512-ptphcRe1RG/mIS60R7ZPilkkrxautqB0sOhds3h5VP3g628G1a2HWzvnmvjEfpJWDMFivV32VJMMBtTLqGr+0Q==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-17.0.6.tgz",
|
||||
"integrity": "sha512-xW6yDxREpBOB9MoODSfIw5HwkwLK+OgK34Q6sGYs0ft9UryMoFwft+pHGAaDz2nzhA72n+Ht9B2eai78UE9jGQ==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
@ -589,9 +589,9 @@
|
||||
"node": "^18.13.0 || >=20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "17.0.8",
|
||||
"@angular/core": "17.0.8",
|
||||
"@angular/platform-browser": "17.0.8",
|
||||
"@angular/common": "17.0.6",
|
||||
"@angular/core": "17.0.6",
|
||||
"@angular/platform-browser": "17.0.6",
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
@ -3649,9 +3649,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngtools/webpack": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.7.tgz",
|
||||
"integrity": "sha512-gwhUhpwXn0trwwKdSu9WlJbEcLt+s/2fPwoD9lZ0y3wXfrOogsfcNBJKeO5BZf1h+A3AWt7ePmgrZXSJM+865Q==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.6.tgz",
|
||||
"integrity": "sha512-9Us20rqGhi8PmQBwQu6Qtww3WVV/gf2s2DbzcLclsiDtSBobzT64Z6F6E9OpAYD+c5PxlUaOghL6NXdnSNdByA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^18.13.0 || >=20.9.0",
|
||||
@ -3906,13 +3906,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@schematics/angular": {
|
||||
"version": "17.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.7.tgz",
|
||||
"integrity": "sha512-d7QKmcKrM4owb/2bR7Ipf23roiNbvbD/x7reNhQAtKAPLSHJ3Ulkf1+Yv+dj+9f+K7y9SBviEUSrD27BQ9WaxQ==",
|
||||
"version": "17.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.6.tgz",
|
||||
"integrity": "sha512-AyC7Bk3Omy6PfADThhq5ci+zzdTTi2N1oZI35gw4tMK5ZxVwIACx2Zyhaz399m5c2RCDi9Hz4A2BOFq9f0j/dg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@angular-devkit/core": "17.0.7",
|
||||
"@angular-devkit/schematics": "17.0.7",
|
||||
"@angular-devkit/core": "17.0.6",
|
||||
"@angular-devkit/schematics": "17.0.6",
|
||||
"jsonc-parser": "3.2.0"
|
||||
},
|
||||
"engines": {
|
||||
@ -13736,9 +13736,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-dev-server/node_modules/ws": {
|
||||
"version": "8.15.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz",
|
||||
"integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==",
|
||||
"version": "8.14.2",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
|
||||
"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
|
28
package.json
28
package.json
@ -10,16 +10,16 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.0.8",
|
||||
"@angular/cdk": "^17.0.4",
|
||||
"@angular/common": "^17.0.8",
|
||||
"@angular/compiler": "^17.0.8",
|
||||
"@angular/core": "^17.0.8",
|
||||
"@angular/forms": "^17.0.8",
|
||||
"@angular/material": "^17.0.4",
|
||||
"@angular/platform-browser": "^17.0.8",
|
||||
"@angular/platform-browser-dynamic": "^17.0.8",
|
||||
"@angular/router": "^17.0.8",
|
||||
"@angular/animations": "^17.0.0",
|
||||
"@angular/cdk": "^17.0.3",
|
||||
"@angular/common": "^17.0.0",
|
||||
"@angular/compiler": "^17.0.0",
|
||||
"@angular/core": "^17.0.0",
|
||||
"@angular/forms": "^17.0.0",
|
||||
"@angular/material": "^17.0.3",
|
||||
"@angular/platform-browser": "^17.0.0",
|
||||
"@angular/platform-browser-dynamic": "^17.0.0",
|
||||
"@angular/router": "^17.0.0",
|
||||
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.2",
|
||||
@ -28,10 +28,10 @@
|
||||
"zone.js": "~0.14.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.0.7",
|
||||
"@angular/cli": "^17.0.7",
|
||||
"@angular/compiler-cli": "^17.0.8",
|
||||
"@angular/localize": "^17.0.8",
|
||||
"@angular-devkit/build-angular": "^17.0.5",
|
||||
"@angular/cli": "^17.0.5",
|
||||
"@angular/compiler-cli": "^17.0.0",
|
||||
"@angular/localize": "^17.0.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"jasmine-core": "~5.1.0",
|
||||
|
@ -3,15 +3,8 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ngbd-carousel-pause></ngbd-carousel-pause>
|
||||
<app-img-show></app-img-show>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<app-body></app-body>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<app-foot></app-foot>
|
||||
</div>
|
||||
|
||||
<router-outlet></router-outlet>
|
@ -2,21 +2,12 @@ import {Component} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {RouterOutlet} from '@angular/router';
|
||||
import {TopBarComponent} from "./top-bar/top-bar.component";
|
||||
import {NgbdCarouselPause} from "./carousel-pause/carousel-pause.component";
|
||||
import {FootComponent} from "./foot/foot.component";
|
||||
import {BodyComponent} from "./body/body.component";
|
||||
import {ImgShowComponent} from "./img-show/img-show.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterOutlet,
|
||||
TopBarComponent,
|
||||
NgbdCarouselPause,
|
||||
FootComponent,
|
||||
BodyComponent
|
||||
],
|
||||
imports: [CommonModule, RouterOutlet, TopBarComponent, ImgShowComponent],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
|
@ -2,7 +2,7 @@ import {ApplicationConfig} from '@angular/core';
|
||||
import {provideRouter} from '@angular/router';
|
||||
|
||||
import {routes} from './app.routes';
|
||||
import {provideAnimations} from '@angular/platform-browser/animations';
|
||||
import { provideAnimations } from '@angular/platform-browser/animations';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes), provideAnimations()]
|
||||
|
@ -1,3 +1,5 @@
|
||||
import {Routes} from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
export const routes: Routes = [
|
||||
|
||||
];
|
||||
|
@ -19,7 +19,7 @@
|
||||
<li class="hover:text-blue-400">就把电话拔下来给他了</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-nowrap">
|
||||
<div class="ml-4 mr-1 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold">
|
||||
@ -35,7 +35,7 @@
|
||||
<li class="hover:text-blue-400">他按键的速度非常快,但是只按0,1两个键</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mr-4 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||
<div class="h-auto">
|
||||
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold flex-nowrap">
|
||||
@ -45,37 +45,37 @@
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||
我渐渐的有些困,我问他这东西要搞多久
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
|
||||
<img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||
他说要几个小时
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
|
||||
<img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||
我给他倒了杯茶,就一个人去隔壁睡觉了
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
|
||||
<img class="h-16 w-32" src="../assets/img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-2/5 flex-grow mb-4">
|
||||
<div class="h-full my-4 mr-4 shadow-lg rounded-lg border-2">
|
||||
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
|
||||
@ -103,13 +103,13 @@
|
||||
|
||||
<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
|
||||
<ul class="li-img clearfix">
|
||||
<li><img ngSrc="/assets/img/anyuse2.png" alt="" height="720" width="1280"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse3.png" alt="" height="800" width="1280"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse4.png" alt="" height="678" width="1280"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse5.png" alt="" height="960" width="1280"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse6.png" alt="" height="1080" width="1920"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse7.png" alt="" height="1080" width="1920"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse8.png" alt="" height="1080" width="1920"/></li>
|
||||
<li><img ngSrc="/assets/img/anyuse9.png" alt="" height="1080" width="1920"/></li>
|
||||
<li><img src="../assets/img/anyuse2.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse3.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse4.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse5.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse6.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse7.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse8.png" alt=""/></li>
|
||||
<li><img src="../assets/img/anyuse9.png" alt=""/></li>
|
||||
</ul>
|
||||
</div>
|
@ -3,28 +3,28 @@
|
||||
@tailwind components;
|
||||
|
||||
.li-img li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 25%; /*四列图片排列*/
|
||||
height: 175px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 25%; /*四列图片排列*/
|
||||
height: 175px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.li-img li img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%; /*li高度的一半*/
|
||||
transform: translateY(-50%); /*再向上移动自身的50%*/
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%; /*li高度的一半*/
|
||||
transform: translateY(-50%); /*再向上移动自身的50%*/
|
||||
}
|
||||
|
||||
/*清除浮动*/
|
||||
.clearfix:after {
|
||||
position: relative;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
position: relative;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
@ -1,16 +0,0 @@
|
||||
import {Component} from "@angular/core";
|
||||
import {NgOptimizedImage} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'app-body',
|
||||
templateUrl: './body.component.html',
|
||||
styleUrls: ['./body.component.scss'],
|
||||
imports: [
|
||||
NgOptimizedImage
|
||||
]
|
||||
})
|
||||
|
||||
export class BodyComponent {
|
||||
|
||||
}
|
@ -1,42 +0,0 @@
|
||||
<ngb-carousel
|
||||
#carousel
|
||||
[interval]="1000"
|
||||
[pauseOnHover]="pauseOnHover"
|
||||
[pauseOnFocus]="pauseOnFocus"
|
||||
(slide)="onSlide($event)"
|
||||
>
|
||||
@for (img of images; track img; let i = $index) {
|
||||
<ng-template ngbSlide>
|
||||
<div class="carousel-caption">
|
||||
<h3>My slide {{ i + 1 }} title</h3>
|
||||
</div>
|
||||
<a href="https://www.google.fr/?q=Number+{{ i + 1 }}" target="_blank" rel="nofollow noopener noreferrer">
|
||||
<div class="picsum-img-wrapper">
|
||||
<img [src]="img" alt="My image {{ i + 1 }} description"/>
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
}
|
||||
</ngb-carousel>
|
||||
|
||||
<hr/>
|
||||
|
||||
<!--<div class="form-check">-->
|
||||
<!-- <input type="checkbox" class="form-check-input" id="pauseOnHover" [(ngModel)]="pauseOnHover"/>-->
|
||||
<!-- <label class="form-check-label" for="pauseOnHover">Pause on hover</label>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="form-check">-->
|
||||
<!-- <input type="checkbox" class="form-check-input" id="pauseOnFocus" [(ngModel)]="pauseOnFocus"/>-->
|
||||
<!-- <label class="form-check-label" for="pauseOnFocus">Pause on focus</label>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="form-check">-->
|
||||
<!-- <input type="checkbox" class="form-check-input" id="unpauseOnArrow" [(ngModel)]="unpauseOnArrow"/>-->
|
||||
<!-- <label class="form-check-label" for="unpauseOnArrow">Unpause when clicking on arrows</label>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="form-check">-->
|
||||
<!-- <input type="checkbox" class="form-check-input" id="pauseOnIndicator" [(ngModel)]="pauseOnIndicator"/>-->
|
||||
<!-- <label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>-->
|
||||
<!--</div>-->
|
||||
<!--<button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">-->
|
||||
<!-- {{ paused ? 'Cycle' : 'Pause' }}-->
|
||||
<!--</button>-->
|
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
@ -1,44 +0,0 @@
|
||||
import {Component, ViewChild} from '@angular/core';
|
||||
import {NgbCarousel, NgbCarouselModule, NgbSlideEvent, NgbSlideEventSource} from '@ng-bootstrap/ng-bootstrap';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {NgOptimizedImage} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'ngbd-carousel-pause',
|
||||
standalone: true,
|
||||
imports: [NgbCarouselModule, FormsModule, NgOptimizedImage],
|
||||
templateUrl: './carousel-pause.component.html',
|
||||
})
|
||||
export class NgbdCarouselPause {
|
||||
images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/1920/1080`);
|
||||
|
||||
paused = false;
|
||||
unpauseOnArrow = false;
|
||||
pauseOnIndicator = false;
|
||||
pauseOnHover = true;
|
||||
pauseOnFocus = true;
|
||||
|
||||
@ViewChild('carousel', {static: true}) carousel: NgbCarousel = {} as NgbCarousel;
|
||||
|
||||
togglePaused() {
|
||||
if (this.paused) {
|
||||
this.carousel.cycle();
|
||||
} else {
|
||||
this.carousel.pause();
|
||||
}
|
||||
this.paused = !this.paused;
|
||||
}
|
||||
|
||||
onSlide(slideEvent: NgbSlideEvent) {
|
||||
if (
|
||||
this.unpauseOnArrow &&
|
||||
slideEvent.paused &&
|
||||
(slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)
|
||||
) {
|
||||
this.togglePaused();
|
||||
}
|
||||
if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
|
||||
this.togglePaused();
|
||||
}
|
||||
}
|
||||
}
|
@ -3,7 +3,7 @@
|
||||
<p>云南大学软件学院 版权所有</p>
|
||||
<p>地址:昆明市呈贡区大学城东外环南路云南大学呈贡校区软件学院楼</p>
|
||||
<p>邮编:650504</p>
|
||||
<p>Copyright@ 2002-2018 School of Software</p>
|
||||
<p>Copyright@ 2002-2018 School of Software</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
@ -1,15 +0,0 @@
|
||||
import {Component} from "@angular/core";
|
||||
import {RouterOutlet} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-foot',
|
||||
standalone: true,
|
||||
templateUrl: './foot.component.html',
|
||||
imports: [
|
||||
RouterOutlet
|
||||
],
|
||||
styleUrls: ['./foot.component.scss']
|
||||
})
|
||||
export class FootComponent {
|
||||
|
||||
}
|
13
src/app/img-show/img-show.component.html
Normal file
13
src/app/img-show/img-show.component.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!--图片轮播实现-->
|
||||
|
||||
<!-- 轮播图容器 -->
|
||||
<div id="carousel">
|
||||
<img src="assets/img/anyuse0.png" alt="anyuse6">
|
||||
<img src="/assets/img/anyuse7.png" alt="anyuse7">
|
||||
<img src="/assets/img/anyuse9.png" alt="anyuse9">
|
||||
<img src="/assets/img/anyuse8.png" alt="anyuse8">
|
||||
<!-- 按钮组 -->
|
||||
<div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
|
||||
<div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
|
||||
<div id="sliderBtn"></div> <!-- 切换按钮组 -->
|
||||
</div>
|
68
src/app/img-show/img-show.component.scss
Normal file
68
src/app/img-show/img-show.component.scss
Normal file
@ -0,0 +1,68 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
#carousel {
|
||||
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
|
||||
}
|
||||
|
||||
#carousel img {
|
||||
position: absolute; /* 绝对定位 使图片堆叠 */
|
||||
width: auto; /* 设定大小 按比例缩放 */
|
||||
height: auto; /* 设定大小 按比例缩放 */
|
||||
transition: all .6s; /* 动画 */
|
||||
opacity: 0; /* 隐藏 */
|
||||
}
|
||||
|
||||
.imgActive {
|
||||
opacity: 1 !important; /* 显示图片 最高优先级 */
|
||||
}
|
||||
|
||||
/* 控制按钮的样式 */
|
||||
#leftArrow,
|
||||
#rightArrow {
|
||||
//position: absolute;
|
||||
//left: 5px;
|
||||
//top: 50%;
|
||||
//width: 25px;
|
||||
//height: 30px;
|
||||
//background-color: #eee;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
//opacity: 0.7;
|
||||
//font-size: 20px;
|
||||
//cursor: pointer;
|
||||
//z-index: 1000;
|
||||
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
|
||||
}
|
||||
|
||||
#rightArrow {
|
||||
//left: auto;
|
||||
//right: 5px;
|
||||
@apply left-auto right-5;
|
||||
}
|
||||
|
||||
#sliderBtn {
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//bottom: 0;
|
||||
//display: flex;
|
||||
//justify-content: flex-end;
|
||||
//z-index: 1000;
|
||||
@apply absolute w-full bottom-0 flex justify-end z-10;
|
||||
}
|
||||
|
||||
.unitBtn {
|
||||
//width: 10px;
|
||||
//height: 10px;
|
||||
//background-color: #eee;
|
||||
//border-radius: 10px;
|
||||
//margin: 10px;
|
||||
//cursor: pointer;
|
||||
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
|
||||
}
|
||||
|
||||
.btnActive {
|
||||
background-color: #4C98F7;
|
||||
}
|
13
src/app/img-show/img-show.component.ts
Normal file
13
src/app/img-show/img-show.component.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import {Component} from "@angular/core";
|
||||
import {RouterLink} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'app-img-show',
|
||||
templateUrl: './img-show.component.html',
|
||||
styleUrls: ['./img-show.component.scss'],
|
||||
imports: [RouterLink],
|
||||
})
|
||||
|
||||
export class ImgShowComponent {
|
||||
}
|
@ -10,6 +10,6 @@
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,5 +1,3 @@
|
||||
/// <reference types="@angular/localize" />
|
||||
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
@ -1,3 +1,4 @@
|
||||
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
@ -20,11 +21,11 @@ $AngularDemo-warn: mat.define-palette(mat.$red-palette);
|
||||
// Create the theme object. A theme consists of configurations for individual
|
||||
// theming systems such as "color" or "typography".
|
||||
$AngularDemo-theme: mat.define-light-theme((
|
||||
color: (
|
||||
primary: $AngularDemo-primary,
|
||||
accent: $AngularDemo-accent,
|
||||
warn: $AngularDemo-warn,
|
||||
)
|
||||
color: (
|
||||
primary: $AngularDemo-primary,
|
||||
accent: $AngularDemo-accent,
|
||||
warn: $AngularDemo-warn,
|
||||
)
|
||||
));
|
||||
|
||||
// Include theme styles for core and each component used in your app.
|
||||
@ -37,14 +38,5 @@ $AngularDemo-theme: mat.define-light-theme((
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
/* Importing Bootstrap SCSS file. */
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
Loading…
Reference in New Issue
Block a user