From c0c4e95cb0e69112fae004ae914219b3169dda49 Mon Sep 17 00:00:00 2001 From: Latsuj Date: Sat, 31 Oct 2020 00:53:57 +0800 Subject: [PATCH] [FEATURE] Adding the animation for the zoom on click --- dev/index.js | 12 ++++---- src/assets/less/home.less | 2 +- .../introduction/introduction_link.vue | 10 ++----- .../introduction/introduction_side.vue | 28 +++++++++++++++++-- src/pages/home.vue | 14 ++++++++-- 5 files changed, 46 insertions(+), 20 deletions(-) diff --git a/dev/index.js b/dev/index.js index c8ed9ef..99bdb3f 100644 --- a/dev/index.js +++ b/dev/index.js @@ -384,7 +384,7 @@ eval("\n\nvar bind = __webpack_require__(/*! ./helpers/bind */ \"./node_modules/ /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"#HOME {\\n perspective: 100px;\\n overflow: hidden;\\n height: 100%;\\n width: 100%;\\n}\\n#HOME > div {\\n transition: transform 0.5s cubic-bezier(0.8, 0, 0.25, 1);\\n perspective: 1000px;\\n height: 100%;\\n}\\n#HOME > div.active {\\n transform: translateZ(100px);\\n}\\n#HOME::before,\\n#HOME::after {\\n content: ' ';\\n position: absolute;\\n left: 0;\\n bottom: 0;\\n width: 100%;\\n z-index: 5;\\n height: 100%;\\n}\\n#HOME::before {\\n transition: all 1s cubic-bezier(0.87, 0.32, 0.81, 0.36);\\n opacity: 0.7;\\n background: #18181f;\\n}\\n#HOME::after {\\n transition: all 0.6s cubic-bezier(0.87, 0.32, 0.81, 0.36);\\n background: #1e1e27;\\n}\\n#HOME.mounted::before,\\n#HOME.mounted::after {\\n height: 0;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://Latsuj/./src/assets/less/home.less?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-3%5B0%5D.rules%5B0%5D.use%5B2%5D!./node_modules/less-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"#HOME {\\n perspective: 100px;\\n overflow: hidden;\\n height: 100%;\\n width: 100%;\\n}\\n#HOME > div {\\n transition: transform 0.5s cubic-bezier(0.8, 0, 0.25, 1) 0.08s;\\n perspective: 1000px;\\n height: 100%;\\n}\\n#HOME > div.active {\\n transform: translateZ(100px);\\n}\\n#HOME::before,\\n#HOME::after {\\n content: ' ';\\n position: absolute;\\n left: 0;\\n bottom: 0;\\n width: 100%;\\n z-index: 5;\\n height: 100%;\\n}\\n#HOME::before {\\n transition: all 1s cubic-bezier(0.87, 0.32, 0.81, 0.36);\\n opacity: 0.7;\\n background: #18181f;\\n}\\n#HOME::after {\\n transition: all 0.6s cubic-bezier(0.87, 0.32, 0.81, 0.36);\\n background: #1e1e27;\\n}\\n#HOME.mounted::before,\\n#HOME.mounted::after {\\n height: 0;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://Latsuj/./src/assets/less/home.less?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-3%5B0%5D.rules%5B0%5D.use%5B2%5D!./node_modules/less-loader/dist/cjs.js"); /***/ }), @@ -816,7 +816,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tprops: {\n\t\tprops_link: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t}\n\t},\n\tmethods: {\n\t\topen: function(direction) {\n\t\t\tthis.goPortfolio = true;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.goZoom = true;\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\treturn direction == 'portfolio' ? this.$router.push('portfolio') : this.$router.push('articles');\n\t\t\t\t}, 500);\n\t\t\t}, 500);\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_link.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tprops: {\n\t\tprops_link: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t}\n\t},\n\tmethods: {\n\t\topen: function(link) {\n\t\t\tthis.$emit(link);\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_link.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -846,7 +846,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _introduction__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./introduction */ \"./src/components/introduction/introduction.vue\");\n/* harmony import */ var _introduction_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./introduction_link */ \"./src/components/introduction/introduction_link.vue\");\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tcomponents: {\n\t\tcomponents_introduction: _introduction__WEBPACK_IMPORTED_MODULE_0__.default,\n\t\tcomponents_introduction_link: _introduction_link__WEBPACK_IMPORTED_MODULE_1__.default\n\t},\n\tprops: {\n\t\tprops_introduction: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t},\n\t\tprops_link: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_side.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _introduction__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./introduction */ \"./src/components/introduction/introduction.vue\");\n/* harmony import */ var _introduction_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./introduction_link */ \"./src/components/introduction/introduction_link.vue\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tcomponents: {\n\t\tcomponents_introduction: _introduction__WEBPACK_IMPORTED_MODULE_0__.default,\n\t\tcomponents_introduction_link: _introduction_link__WEBPACK_IMPORTED_MODULE_1__.default\n\t},\n\tprops: {\n\t\tprops_introduction: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t},\n\t\tprops_link: {\n\t\t\ttype: Object,\n\t\t\trequired: true\n\t\t},\n\t\tprops_go_open_door: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true\n\t\t}\n\t},\n\tmethods: {\n\t\tarticles() {\n\t\t\tthis.animation_door('articles');\n\t\t},\n\t\tportfolio() {\n\t\t\tthis.animation_door('portfolio');\n\t\t},\n\t\tanimation_door(link) {\n\t\t\tthis.$emit('zoom');\n\t\t\tthis.move_to_project(link, 1000);\n\t\t},\n\t\tmove_to_project(link, delay) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.$router.push(link);\n\t\t\t}, delay);\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_side.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -978,7 +978,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _components_introduction_introduction_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/introduction/introduction_side */ \"./src/components/introduction/introduction_side.vue\");\n/* harmony import */ var _services_api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api */ \"./src/services/api.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tcomponents: {\n\t\tcomponents_introduction_side: _components_introduction_introduction_side__WEBPACK_IMPORTED_MODULE_0__.default\n\t},\n\tdata: () => {\n\t\treturn {\n\t\t\tgoPortfolio: false,\n\t\t\tgoZoom: false,\n\t\t\tprops_introduction: {},\n\t\t\tprops_links: [\n\t\t\t\t{name: 'Lien 1', link: 'portfolio', side: 'left'},\n\t\t\t\t{name: 'Lien 2', link: 'articles', side: 'right'}\n\t\t\t]\n\t\t};\n\t},\n\tasync mounted() {\n\t\tawait this.get_my_identity();\n\t\tthis.add_class_to_element_delay('#HOME', 'mounted', 200);\n\t},\n\tmethods: {\n\t\tasync get_my_identity() {\n\t\t\tconst my_identity = await _services_api__WEBPACK_IMPORTED_MODULE_1__.default.get_my_identity();\n\t\t\tthis.update_introduction(my_identity.fullname, my_identity.email);\n\t\t},\n\t\tupdate_introduction(name, email) {\n\t\t\tthis.props_introduction = {name, email};\n\t\t},\n\t\tadd_class_to_element_delay(selector, newclass, delay) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.add_class_to_element(selector, newclass);\n\t\t\t}, delay);\n\t\t},\n\t\tadd_class_to_element(selector, newclass) {\n\t\t\tconst element = document.querySelector(selector);\n\t\t\telement.classList.add(newclass);\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/pages/home.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _components_introduction_introduction_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/introduction/introduction_side */ \"./src/components/introduction/introduction_side.vue\");\n/* harmony import */ var _services_api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api */ \"./src/services/api.js\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n\tcomponents: {\n\t\tcomponents_introduction_side: _components_introduction_introduction_side__WEBPACK_IMPORTED_MODULE_0__.default\n\t},\n\tdata: () => {\n\t\treturn {\n\t\t\tgo_open_door: false,\n\t\t\tgoZoom: false,\n\t\t\tprops_introduction: {},\n\t\t\tprops_links: [\n\t\t\t\t{name: 'Lien 1', link: 'portfolio', side: 'left'},\n\t\t\t\t{name: 'Lien 2', link: 'articles', side: 'right'}\n\t\t\t]\n\t\t};\n\t},\n\tasync mounted() {\n\t\tawait this.get_my_identity();\n\t\tthis.add_class_to_element_delay('#HOME', 'mounted', 200);\n\t},\n\tmethods: {\n\t\tzoom() {\n\t\t\tthis.goZoom = true;\n\t\t\tthis.go_open_door = true;\n\t\t},\n\t\tasync get_my_identity() {\n\t\t\tconst my_identity = await _services_api__WEBPACK_IMPORTED_MODULE_1__.default.get_my_identity();\n\t\t\tthis.update_introduction(my_identity.fullname, my_identity.email);\n\t\t},\n\t\tupdate_introduction(name, email) {\n\t\t\tthis.props_introduction = {name, email};\n\t\t},\n\t\tadd_class_to_element_delay(selector, newclass, delay) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.add_class_to_element(selector, newclass);\n\t\t\t}, delay);\n\t\t},\n\t\tadd_class_to_element(selector, newclass) {\n\t\t\tconst element = document.querySelector(selector);\n\t\t\telement.classList.add(newclass);\n\t\t}\n\t}\n});\n\n\n//# sourceURL=webpack://Latsuj/./src/pages/home.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -1483,7 +1483,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { staticClass: \"bloc\", class: _vm.props_link.side },\n [\n _c(\"components_introduction\", {\n attrs: { props_introduction: _vm.props_introduction }\n }),\n _vm._v(\" \"),\n _c(\"components_introduction_link\", {\n attrs: { props_link: _vm.props_link }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_side.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n {\n staticClass: \"bloc\",\n class: [_vm.props_link.side, { active: _vm.props_go_open_door }]\n },\n [\n _c(\"components_introduction\", {\n attrs: { props_introduction: _vm.props_introduction }\n }),\n _vm._v(\" \"),\n _c(\"components_introduction_link\", {\n attrs: { props_link: _vm.props_link },\n on: { articles: _vm.articles, portfolio: _vm.portfolio }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://Latsuj/./src/components/introduction/introduction_side.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -1563,7 +1563,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"HOME\" } }, [\n _c(\n \"div\",\n { class: { active: _vm.goZoom } },\n [\n _c(\"components_introduction_side\", {\n attrs: {\n props_link: _vm.props_links[0],\n props_introduction: _vm.props_introduction\n }\n }),\n _vm._v(\" \"),\n _c(\"components_introduction_side\", {\n attrs: {\n props_link: _vm.props_links[1],\n props_introduction: _vm.props_introduction\n }\n })\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://Latsuj/./src/pages/home.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": () => /* binding */ render,\n/* harmony export */ \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"HOME\" } }, [\n _c(\n \"div\",\n { class: { active: _vm.goZoom } },\n [\n _c(\"components_introduction_side\", {\n attrs: {\n props_link: _vm.props_links[0],\n props_introduction: _vm.props_introduction,\n props_go_open_door: _vm.go_open_door\n },\n on: { zoom: _vm.zoom }\n }),\n _vm._v(\" \"),\n _c(\"components_introduction_side\", {\n attrs: {\n props_link: _vm.props_links[1],\n props_introduction: _vm.props_introduction,\n props_go_open_door: _vm.go_open_door\n },\n on: { zoom: _vm.zoom }\n })\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://Latsuj/./src/pages/home.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/src/assets/less/home.less b/src/assets/less/home.less index a7e1c24..6340a31 100644 --- a/src/assets/less/home.less +++ b/src/assets/less/home.less @@ -7,7 +7,7 @@ .full(); & > div { - .transition(transform 0.5s cubic-bezier(0.8, 0, 0.25, 1)); + .transition(transform 0.5s cubic-bezier(0.8, 0, 0.25, 1) 0.08s); perspective: 1000px; height: 100%; diff --git a/src/components/introduction/introduction_link.vue b/src/components/introduction/introduction_link.vue index b003ae8..d484048 100644 --- a/src/components/introduction/introduction_link.vue +++ b/src/components/introduction/introduction_link.vue @@ -15,14 +15,8 @@ export default { } }, methods: { - open: function(direction) { - this.goPortfolio = true; - setTimeout(() => { - this.goZoom = true; - setTimeout(() => { - return direction == 'portfolio' ? this.$router.push('portfolio') : this.$router.push('articles'); - }, 500); - }, 500); + open: function(link) { + this.$emit(link); } } }; diff --git a/src/components/introduction/introduction_side.vue b/src/components/introduction/introduction_side.vue index e38e8fa..68bb2cc 100644 --- a/src/components/introduction/introduction_side.vue +++ b/src/components/introduction/introduction_side.vue @@ -1,9 +1,12 @@