Index: vue/package.json
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/package.json	(.../package.json)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/package.json	(.../package.json)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -14,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@popperjs/core": "^2.11.5",
+    "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
     "bootstrap-icons": "^1.9.1",
     "bootstrap-icons-vue": "^1.8.1",
@@ -23,6 +24,7 @@
     "swiper": "^8.3.2",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vuejs-tree": "^3.0.2",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
Index: vue/src/assets/scss/common.scss
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/assets/scss/common.scss	(.../common.scss)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/assets/scss/common.scss	(.../common.scss)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -97,7 +97,7 @@
     width: 970px;
   }
 }
-@media (min-width: 375px) and (max-width: 991px) {
+@media (min-width: 280px) and (max-width: 991px) {
   .container {
     width: 750px;
   }
Index: vue/src/components/DevOps/common/HeaderLogo.vue
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/components/DevOps/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/components/DevOps/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -3,47 +3,89 @@
     <h1 id="logo">
       <router-link to="/">atlassian-<strong>RMS</strong></router-link>
     </h1>
-    <button type="button" class="menu-bar"><i class="fa-solid fa-bars"></i></button>
+    <button
+      type="button"
+      class="menu-bar toggle"
+      @click="$emit('openMobileMenu')"
+      v-bind:class="{ active: btnActive }"
+    >
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
   </header>
 </template>
 <script>
 export default {
   name: 'HeaderLogo',
-  mounted() {
-    const menuBtn = document.querySelector('.menu-bar');
-    menuBtn.addEventListener('click', () => {
-      document.querySelector('.mobile-sidebar').style.transform = 'translateX(0)';
-    });
-  },
+  props: { btnActive: Boolean },
 };
 </script>
 
 <style lang="scss" scoped>
 header {
   display: flex;
   justify-content: space-between;
+  position: relative;
   #logo {
     margin: 30px 0 0 35px;
     a {
       display: block;
-      font-size: 17px;
+      font-size: 1.05rem;
       strong {
         font-weight: 500;
       }
     }
   }
   .menu-bar {
+    position: absolute;
+    z-index: 120;
+    top: 10px;
+    right: 10px;
     border: none;
     background: none;
     color: #fff;
     font-size: 20px;
     padding: 20px;
     display: none;
     cursor: pointer;
+    &.active span {
+      transition: 0.25s margin, 0.25s transform 0.25s;
+      &:nth-child(1) {
+        margin-top: 4px;
+        margin-bottom: -2px;
+        transform: rotate(45deg);
+      }
+      &:nth-child(2) {
+        transform: rotate(45deg);
+      }
+      &:nth-child(3) {
+        margin-top: -4px;
+        transform: rotate(135deg);
+      }
+    }
+    span {
+      display: block;
+      background: #fff;
+      width: 25px;
+      height: 3px;
+      border-radius: 20px;
+      transition: 0.25s margin 0.25s, 0.25s transform;
+      &:nth-child(1) {
+        margin-bottom: 4px;
+      }
+      &:nth-child(3) {
+        margin-top: 4px;
+      }
+    }
   }
 }
-@media (min-width: 375px) and (max-width: 991px) {
+
+@media (min-width: 280px) and (max-width: 991px) {
   header {
+    #logo {
+      margin: 30px 0 0 20px;
+    }
     .menu-bar {
       display: block;
     }
Index: vue/src/components/DevOps/common/MobileNav.vue
===================================================================
diff -u -r4727584dc9b1b024c878f502ee748432ef40993c -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/components/DevOps/common/MobileNav.vue	(.../MobileNav.vue)	(revision 4727584dc9b1b024c878f502ee748432ef40993c)
+++ vue/src/components/DevOps/common/MobileNav.vue	(.../MobileNav.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -117,29 +117,18 @@
         </ul>
       </li>
     </ul>
-    <button type="button" class="close-btn"><i class="fa-solid fa-xmark"></i></button>
   </nav>
 </template>
 <script>
 export default {
   name: 'MobileNav',
-  components: {},
-  data() {
-    return {
-      sampleData: '',
-    };
-  },
   mounted() {
     const link = document.querySelectorAll('.mobile-menu-list');
-    const closeBtn = document.querySelector('.close-btn');
     link.forEach(list => {
       list.addEventListener('click', () => {
-        document.querySelector('.mobile-sidebar ').style.transform = 'translateX(100%)';
+        this.$emit('openMobileMenu');
       });
     });
-    closeBtn.addEventListener('click', () => {
-      document.querySelector('.mobile-sidebar ').style.transform = 'translateX(100%)';
-    });
   },
 };
 </script>
@@ -153,8 +142,12 @@
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 100;
-  transition: 0.5s all;
-  transform: translateX(100%);
+  /*transition: 0.5s all;
+  transform: translateX(100%);*/
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   .close-btn {
     position: absolute;
     top: 20px;
@@ -165,19 +158,22 @@
     font-size: 39px;
   }
   .mobile-sidebar-menu {
-    padding: 96px 0 60px 20%;
+    width: 100%;
+    padding: 6rem 0 0 15%;
     li {
-      font-size: 20px;
+      font-size: 1.5rem;
       .mobile-treeview-menu-title {
-        margin-bottom: 8px;
+        margin-bottom: 20px;
       }
       &.mobile-category {
-        margin-bottom: 20px;
+        margin-bottom: 2rem;
+        color: lightblue;
       }
       .mobile-detail-menu {
-        margin-left: 5%;
-        margin-bottom: 8px;
-        font-size: 16px;
+        margin-left: 20px;
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+        color: #fff;
       }
     }
   }
Index: vue/src/components/DevOps/common/NavBar.vue
===================================================================
diff -u -r4727584dc9b1b024c878f502ee748432ef40993c -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/components/DevOps/common/NavBar.vue	(.../NavBar.vue)	(revision 4727584dc9b1b024c878f502ee748432ef40993c)
+++ vue/src/components/DevOps/common/NavBar.vue	(.../NavBar.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -183,16 +183,8 @@
         self.activeCategory = list.parentNode.parentNode.dataset.index;
         addActiveColor(Number(self.activeCategory));
       };
-      const activeClickedMobileMenu = idx => {
-        idx === 0
-          ? (self.activeCategory = 0)
-          : (self.activeCategory = list.parentNode.parentNode.dataset.index);
-        activeClickedPCMenu();
-        toggleOpenSideMenu(Number(self.activeCategory));
-      };
 
       list.addEventListener('click', () => activeClickedPCMenu());
-      mobileMenu[idx].addEventListener('click', () => activeClickedMobileMenu(idx));
     });
 
     //메뉴 오픈시 다른 메뉴들은 닫기
@@ -287,7 +279,7 @@
     }
   }
 }
-@media (min-width: 375px) and (max-width: 991px) {
+@media (min-width: 280px) and (max-width: 991px) {
   .sidebar {
     transform: translateX(-2000px);
     transition: 0.5s all;
Index: vue/src/components/DevOps/contents/JSTFDownload.vue
===================================================================
diff -u -r3d5be60615f6363d5369ab7d77f35813f9f27da7 -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/components/DevOps/contents/JSTFDownload.vue	(.../JSTFDownload.vue)	(revision 3d5be60615f6363d5369ab7d77f35813f9f27da7)
+++ vue/src/components/DevOps/contents/JSTFDownload.vue	(.../JSTFDownload.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -1,216 +1,67 @@
-<div class="col-lg-4">
-    <section class="widget">
-        <header>
-            <h4>
-                <span class="font13" style="font-weight: bold;">
-                    <i class="fa fa-sort-amount-asc"></i> 제품(서비스) 조회
-                </span>
-            </h4>
-            <div class="actions">
-                <button class="btn btn-transparent btn-xs" onclick="$('#demo').jstree('open_all');">Show All
-                    <i class="fa fa-arrow-down"></i>
-                </button>
-            </div>
-        </header>
-        <div class="body">
-            <div class="wrapper">
-                <div id="mmenu" style="padding-bottom: 5px;">
-                    <form class="form-search no-margin" role="form">
-                        <div class="input-group">
-                            <input type="search" id="text" class="form-control searchDarkBack" style="color: #f8f8f8;" placeholder="찾을 노드 이름 입력" data-tooltip="Press Enter To Node To Search">
-                            <span class="input-group-btn">
-                                <button type="button" id="search" title="Search" class="btn btn-default btn-sm">
-                                    Search
-                                </button>
-                            </span>
-                        </div>
-                    </form>
-                </div>
-                <div id="demo" style="padding-top: 5px;" class="darkBack"></div>
-                <div style="margin-top: 10px;" class="darkBack">
-                    설명
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
+<template>
+  <div class="conainer">
+    <ContentHeader
+      subTitle="jsTree Service Framework<sup>TSF</sup> 소스
+            다운로드"
+    />
+    <div class="content-section">
+      <h3>jsTree Service Framework<sup>TSF</sup> 소스 다운로드</h3>
+      <ul>
+        <li>
+          Apache Maven Resources Plugin 3.1.0은 소스 형식으로 배포됩니다. Apache Maven
+          Resources Plugin을 직접 빌드하려면 소스 아카이브를 사용하십시오. 그렇지 않으면
+          중앙 저장소에서 준비된 2 진 아티팩트를 사용하기 만하면됩니다.
+        </li>
+        <li>
+          TSF는 소스 코드 형식으로 배포됩니다. TSF를 직접 빌드하려면 소스 아카이브를
+          사용하십시오.
+        </li>
+        <li>그렇지 않으면 중앙 저장소에서 준비된 2진 아티팩트를 사용 할 수 있습니다.</li>
+        <li>
+          또한, 클라우드 환경을 위한 도커 이미지를 Docker Hub 또는 빌드 이미지로 생성 할
+          수 있습니다.
+        </li>
+      </ul>
 
-<div class="col-lg-8">
-    <section class="widget">
-        <header>
-            <h4>
-                <span class="font13" style="font-weight: bold;">
-                    <i class="fa fa-edit"></i> 제품(서비스) 등록 / 변경
-                </span>
-            </h4>
-            <div class="widget-controls">
-                <a title="Options" href="#"><i class="glyphicon glyphicon-cog"></i></a>
-                <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
-                <a data-widgster="collapse" title="Collapse" href="#"><i
-                        class="glyphicon glyphicon-chevron-down"></i></a>
-                <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
-            </div>
-        </header>
-        <div class="body">
-            <div class="box box-primary" style="border-top-color: #bbbbbb; border-top-width: 0px; margin-bottom: 35px !important;">
-                <div class="box-body">
-                    <div class="form-group" style="padding-top: 10px;">
-                        <div class="control-group">
-                            <label class="control-label" for="prepended-input">제품(서비스) 등록 모드 &nbsp;</label>
-                            <div class="controls form-group" style="margin-bottom: 10px;">
-                                <div class="input-group col-sm-8" style="text-align: left;">
-                                    <span class="input-group-addon"><i class="fa fa-sliders"></i></span>
-                                    <div class="btn-group" data-toggle="buttons">
-                                        <label class="btn btn-transparent btn-sm newmode active">
-                                            <input type="radio"> 신규 등록 모드
-                                        </label>
-                                        <label class="btn btn-transparent btn-sm updatemode">
-                                            <input type="radio"> 업데이트 모드
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="prepended-input">제품(서비스) 이름 &nbsp;</label>
-                            <div class="controls form-group" style="margin-bottom: 10px;">
-                                <div class="input-group col-sm-8">
-                                    <span class="input-group-addon"><i class="glyphicon glyphicon-gift"></i></span>
-                                    <input id="prepended-input" class="form-control font13 darkBack" style="color: #f8f8f8;" size="16" type="text" placeholder="제품(서비스)명을 입력해 주세요">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="prepended-input">제품(서비스) 오너 &nbsp;</label>
-                            <div class="controls form-group" style="margin-bottom: 10px;">
-                                <div class="input-group col-sm-8">
-                                    <span class="input-group-addon"><i class="fa fa-users"></i></span>
-                                    <select id="owner_select2" class="js-example-basic-multiple-limit js-states form-control font13 darkBack" multiple=""></select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="prepended-input">제품(서비스) 리뷰어 &nbsp;</label>
-                            <div class="controls form-group" style="margin-bottom: 10px;">
-                                <div class="input-group col-sm-8">
-                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
-                                    <select id="reviewer_select2"  class="js-data-example-ajax form-control font13 darkBack" placeholder="제품(서비스)의 관리자를 등록해 주세요"></select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="editor" class="darkBack">
-                        <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
-                    </div>
-                </div>
-                <div class="body-middle">
-                    <form id="fileupload" action="server/php" method="POST" enctype="multipart/form-data">
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div id="dropzone" class="dropzone">
-                                    <i class="fa fa-cloud-upload"></i>
-                                    Drop files here
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-md-12 fileupload-progress fade font12">
-                                <!-- The global progress bar -->
-                                <div class="progress progress-success progress-striped active font12" role="progressbar" aria-valuemin="0" aria-valuemax="100">
-                                    <div class="bar" style="width:0%;"></div>
-                                </div>
-                                <!-- The extended global progress information -->
-                                <div class="progress-extended font12">&nbsp;</div>
-                            </div>
-                        </div>
-                        <div class="form-actions fileupload-buttonbar no-margin">
-                            <span class="btn btn-sm btn-inverse fileinput-button">
-                                    <i class="fa fa-plus"></i>
-                                    <span>Add files...</span>
-                                    <input type="file" name="files[]" multiple="">
-                                </span>
-                            <button type="submit" class="btn btn-inverse btn-sm start">
-                                <i class="fa fa-upload"></i>
-                                <span>Start upload</span>
-                            </button>
-                            <button type="reset" class="btn btn-inverse btn-sm cancel">
-                                <i class="fa fa-ban"></i>
-                                <span>Cancel upload</span>
-                            </button>
-                        </div>
-                        <div class="fileupload-loading"><i class="fa fa-spin fa-spinner"></i></div>
-                        <!-- The table listing the files available for upload/download -->
-                        <table role="presentation" class="table table-striped" style="margin-bottom: 5px;">
-                            <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
-                        </table>
-                    </form>
-                </div>
-                <p class="pull-right" style="padding-top: 10px;"><button class="btn btn-info" id="show-info-message">제품(서비스) 등록</button></p>
-                <p class="pull-right" style="padding-top: 10px; padding-right: 10px;">
-                    <button type="button" class="btn btn-success" id="modalPopupId"
-                            data-toggle="modal" data-target="#myModal2">새창으로 편집</button>
-                </p>
-                <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
-                    <div class="modal-dialog" style="width: 90%; height: 90%">
-                        <div class="modal-content darkBack">
+      <br />
+      <h3>jsTree Service Framework<sup>TSF</sup> 미러</h3>
+      <p>
+        현재 선택된 미러는 http://www.313.co.kr/nexus 입니다. 이 모든 미러가 실패 할 경우
+        사용할 수 있어야하는 백업 미러 (미러 목록 끝에 있음)가 있습니다.
+      </p>
+      <p>https://github.com/jstree/jsTree-Service-Framework-Backend-App/releases</p>
 
-                            <div class="modal-header" style="padding: 0px; border-bottom: 0px">
-                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style=" color: #ffffff; font-size: 20px; opacity: 0.8; padding: 5px;">×</button>
-                                <h4 class="modal-title font14" id="myModalLabel2" style="color: #f8f8f8;text-align: left; padding: 5px;">
-                                    <span class="font13" style="font-weight: bold;">
-                                        <i class="fa fa-edit"></i> 제품(서비스) 신규 등록 팝업
-                                    </span>
-                                    <section class="search-result" style="border-left: 5px solid #e5603b;">
-                                        <p style="font-size: 13px; margin: 5px 0px 0px 0px; padding-left: 5px;"> 입력한 내용은 부모창과 동기화 됩니다. 부모창에서 등록하기를 진행해야 저장됩니다.</p>
-                                    </section>
-                                </h4>
-                            </div>
-                            <div class="modal-body" style="padding: 5px;">
-                                <div id="modal-editor" class="darkBack">
-                                    <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
-                                </div>
-                            </div>
-                            <div class="modal-footer" style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px;">
-                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                                <button type="button" class="btn btn-primary">Save changes</button>
-                            </div>
+      <br />
+      <h3>jsTree Service Framework<sup>TSF</sup> 컨테이너</h3>
+      <p>
+        현재 선택된 서버 컨테이너는
+        https://hub.docker.com/r/313devgrp/jstree-service-framework-backend-app/ 입니다.
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import ContentHeader from '@/components/DevOps/common/ContentHeader.vue';
 
-                        </div><!-- /.modal-content -->
-                    </div><!-- /.modal-dialog -->
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
-
-<!-- page specific application css/js -->
-<style type="text/css">
-.btn-transparent.active {
-    color: white;
-    background: rgba(51, 51, 51, 0.55);
-    color: #ffffff;
-    background-color: #e5603b;
-    border-color: rgba(0, 0, 0, 0.15);
+export default {
+  name: 'JSTFDownload',
+  components: {
+    ContentHeader,
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content-section {
+  h3 {
+    font-weight: 600;
+    color: lightblue;
+  }
+  ul {
+    margin: 20px;
+    li {
+      margin-bottom: 10px;
+      list-style-type: circle;
+    }
+  }
 }
-.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
-    outline: 0px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-.select2-search__field::-webkit-input-placeholder,
-.select2-search__field::placeholder {
-    color: #999 !important;
-    padding-left: 6px;
-}
 </style>
-<script type="text/javascript" charset="utf-8">
-    //<![CDATA[
-
-    // 초기 개발 및 확인 용도
-    $(function () {
-
-    });
-
-    //]]>
-</script>
-<script src="../reference/light-blue/js/fileupload.js"></script>
-<script type="text/javascript" src='js/pdServiceRegist.js' charset="utf-8"></script>
\ No newline at end of file
FishEye: Tag d2133460ec003f42375d401a6329c35714b65209 refers to a dead (removed) revision in file `vue/src/components/DevOps/contents/JSTFShv.vue'.
FishEye: No comparison available.  Pass `N' to diff?
Index: vue/src/views/DevOpsView.vue
===================================================================
diff -u -r4727584dc9b1b024c878f502ee748432ef40993c -rc36d6a1edaefb3b4c0919906e90941504b46242c
--- vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision 4727584dc9b1b024c878f502ee748432ef40993c)
+++ vue/src/views/DevOpsView.vue	(.../DevOpsView.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
@@ -1,7 +1,13 @@
 <template>
-  <Header />
-  <Navbar />
-  <MobileNav />
+  <Header
+    @openMobileMenu="openMobileMenu = !openMobileMenu"
+    :btnActive="openMobileMenu"
+  />
+  <Navbar v-if="openMobileMenu == false" />
+  <transition name="fade">
+    <MobileNav v-if="openMobileMenu" @openMobileMenu="openMobileMenu = !openMobileMenu" />
+  </transition>
+
   <div class="content-wrap">
     <WelcomeDevops v-if="$route.params.path == pathName.welcome" />
     <AlmDevops v-if="$route.params.path == pathName.DevSupport.alm" />
@@ -12,13 +18,14 @@
     <JSTFUsage v-if="$route.params.path == pathName.JSTF.usage" />
     <JSTFFAQ v-if="$route.params.path == pathName.JSTF.faq" />
     <JSTFLicense v-if="$route.params.path == pathName.JSTF.license" />
+    <JSTFDownload v-if="$route.params.path == pathName.JSTF.JSTFDownload" />
     <ContentFooter />
     <CopyRight />
     <TopBtn />
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import Header from '@/components/DevOps/common/HeaderLogo.vue';
 import Navbar from '@/components/DevOps/common/NavBar.vue';
 import CopyRight from '@/components/DevOps/common/CopyRight.vue';
@@ -35,6 +42,7 @@
 import JSTFUsage from '@/components/DevOps/contents/JSTFUsage.vue';
 import JSTFFAQ from '@/components/DevOps/contents/JSTFFaq.vue';
 import JSTFLicense from '@/components/DevOps/contents/JSTFLicense.vue';
+import JSTFDownload from '@/components/DevOps/contents/JSTFDownload.vue';
 
 export default {
   name: 'DevOps',
@@ -54,9 +62,11 @@
     JSTFUsage,
     JSTFFAQ,
     JSTFLicense,
+    JSTFDownload,
   },
   data() {
     return {
+      openMobileMenu: false,
       pathName: {
         welcome: 'welcome',
         DevSupport: {
@@ -85,4 +95,17 @@
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateX(100%);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.6s;
+}
+.fade-enter-to,
+.fade-leave-from {
+  transform: translateX(0);
+}
+</style>