diff --git a/package-lock.json b/package-lock.json index 28ee6d8..3367e17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "node-polyfill-webpack-plugin": "^3.0.0", "qs": "^6.11.2", "vue": "^2.6.14", + "vue-iframe": "^0.0.0", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, @@ -16193,6 +16194,11 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "node_modules/vue-iframe": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/vue-iframe/-/vue-iframe-0.0.0.tgz", + "integrity": "sha512-gH791EBUqJrsa5SuGhxeujyK4NFngJnuvpSJN0p5W5VoHmYkW35ZekOLlCZTN658VsXUYNGCPHlk9bzLtRyd7Q==" + }, "node_modules/vue-loader": { "version": "17.3.1", "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz", @@ -29712,6 +29718,11 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "vue-iframe": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/vue-iframe/-/vue-iframe-0.0.0.tgz", + "integrity": "sha512-gH791EBUqJrsa5SuGhxeujyK4NFngJnuvpSJN0p5W5VoHmYkW35ZekOLlCZTN658VsXUYNGCPHlk9bzLtRyd7Q==" + }, "vue-loader": { "version": "17.3.1", "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz", diff --git a/package.json b/package.json index 4e22d1a..14dfd3c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "node-polyfill-webpack-plugin": "^3.0.0", "qs": "^6.11.2", "vue": "^2.6.14", + "vue-iframe": "^0.0.0", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css index 8e5a30c..d00dae6 100644 --- a/src/assets/css/home-style.css +++ b/src/assets/css/home-style.css @@ -7,6 +7,9 @@ :root { + --table-bg-color: rgba(16, 18, 27, 0.39); + --table-bg-color-hover: rgb(16, 18, 27); + --table-border : #f6f6f6; --font-bg-theme-reverse:rgb(255 255 255 / 31%); --font-border: rgb(213, 79, 27); --theme-comment-color: rgba(178, 188, 250, 0.4); @@ -29,10 +32,13 @@ } .light-mode { + --table-border : #b9b9b9; --font-bg-theme-reverse:rgba(16 18 27 / 40%); --font-border: rgb(108, 155, 255); --theme-comment-color: rgba(201, 217, 255, 0.4); --theme-bg-color: rgb(255 255 255 / 31%); + --table-bg-color: rgba(174, 207, 255, 0.31); + --table-bg-color-hover: rgb(149, 189, 255); --theme-bg-color-deep: rgb(255 255 255 / 51%); --theme-color: #3c3a3a; --inactive-color: #333333; @@ -1053,6 +1059,21 @@ body.light-mode .video-bg:before { flex-direction:column; } +.ButtonBlock{ + display: flex; + flex-wrap:nowrap; + flex-direction:row; + justify-content:space-around; + } + +.MyButton{ + +} +.MyButton:hover{ + transform:scale(1.08); + cursor: pointer; +} + diff --git a/src/assets/img/DeleteButton.svg b/src/assets/img/DeleteButton.svg new file mode 100644 index 0000000..bb7c8eb --- /dev/null +++ b/src/assets/img/DeleteButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/EditButton.svg b/src/assets/img/EditButton.svg new file mode 100644 index 0000000..f4c66ab --- /dev/null +++ b/src/assets/img/EditButton.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue index 1b97a42..10fe88e 100644 --- a/src/components/detail/NavDetail.vue +++ b/src/components/detail/NavDetail.vue @@ -6,9 +6,13 @@
-
- +
+ + + +
@@ -39,7 +43,7 @@
-