Commit @9062faf8a5b427bc48a01eba6e096493c651acbd

류윤주 2023-10-24

231024 류윤주 사용자 관리 커밋

@9062faf8a5b427bc48a01eba6e096493c651acbd

8fd00e9

9062faf

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


     align-items: center;
 }
 
+.main-wrap > div{
+    height: 100%;
+}
 
 .content-box {
     width: 100%;
-    padding: 15px;
+    height: 100%;
+    padding: 30px;
     background-color: #fff;
     height: 100%;
 }
 
-.content-head {
-    width: 100%;
-    border-bottom: 1px solid #eee;
-    padding: 15px 0;
-}
-
-.content-subtitle {
-    color: #aaa;
-    margin-bottom: 15px;
-}
-
-.content-body {
-    padding: 30px 0;
-}
-
-.content-simple{
-    font-size: 1.4rem;
-    font-weight: 700;
-    margin-bottom: 15px;
-    line-height: 160%;
-}
-
-.item-box li {
-    background-color: #fff;
-    padding: 30px;
-    border: 1px solid #ddd;
+.main-title{
+    padding: 10px 0;
 }
 
 /* btn */

     margin-left: 5px;
 }
 
-
-/*  토글 */
-.toggle_box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.custom_input {
-    display: none;
-}
-
-.custom_input+label.toggle_btn_label {
-    position: relative;
-    width: 100px;
-    height: 30px;
-}
-
-.custom_input+label.toggle_btn_label>span {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: all .4s;
-
-}
-
-.custom_input+label.toggle_btn_label>span:before {
-    display: flex;
-    position: absolute;
-    height: 30px;
-    width: fit-content;
-    padding: 0 15px;
-    left: 0;
-    bottom: 0;
-    background-color: #5cb85c;
-    color: #fff;
-    content: "ON";
-    align-items: center;
-    font-weight: bold;
-    color: rgb(29, 29, 29);
-    -webkit-transition: all .4s;
-    transition: all .4s;
-}
-
-.custom_input:checked+label.toggle_btn_label>span {
-    background-color: black;
-}
-
-.custom_input:checked+label.toggle_btn_label>span:before {
-    -webkit-transform: translateX(calc(10rem - 100%));
-    -ms-transform: translateX(calc(10rem - 100%));
-    transform: translateX(calc(10rem - 100%));
-    right: 0;
-    bottom: 0;
-    content: "OFF";
-    background-color: #f8f8f8;
-}
-
-.custom_input:disabled+label.toggle_btn_label {
-    display: none;
-}
-
-.toggle_box>span {
-    font-size: 1.2rem;
-    margin-right: 10px;
-}
-
-/* input */
-
-.input-half {
-    width: 45%;
-    height: 35px;
-    padding: 12px;
-    border-radius: 4px;
-    border: 1.5px solid lightgrey;
-    outline: none;
-    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-    box-shadow: 0px 0px 20px -18px;
-}
-
-.input-full {
-    width: 100%;
-    height: 35px;
-    padding: 12px;
-    border-radius: 4px;
-    border: 1.5px solid lightgrey;
-    outline: none;
-    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-    box-shadow: 0px 0px 20px -18px;
-}
-
-.input-full:hover,
-.input-half:hover {
-    border: 2px solid lightgrey;
-    box-shadow: 0px 0px 20px -17px;
-}
-
-.input-full:active,
-.input-half:active {
-    transform: scale(0.95);
-}
-
-.input-full:focus,
-.input-half:focus {
-    border: 2px solid grey;
-}
-
-
-/* icon */
-
-.icon span {
-    border-radius: 50px;
-    border: 1px solid #333;
-    padding: 4px 7px;
-    margin-left: 5px;
-}
-
-.icon-red span {
-    border: 1px solid red;
-}
-
-.icon-red span i {
-    color: red;
-}
-
-input[type="checkbox"],
-input[type="radio"]{
-    margin-right: 5px;
-}
-
-.check-box{
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-}

8fd00e9

9062faf

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


         <meta name="description" content="Node Vue Web">
         <link rel="stylesheet" href="/client/resources/css/reset.css">
         <link rel="stylesheet" href="/client/resources/css/common.css">
-        <link rel="stylesheet" href="/client/resources/css/main.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
         <script src="/client/resources/js/jquery-2.1.1.min.js"></script>
-        <title>웰라인 시스템</title>
+        <title>AI 디지털교과서 통합지원센터</title>
     </head>
 
     <body>

8fd00e9

9062faf

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue


 <template>
   <nav class="main-menu">
-    <div class="menu-head">
-      <div><i class="fa-solid fa-bars"></i></div>
-      <h1 class="logo"><router-link to="/">웰라인</router-link></h1>
+    <div class="logo-wrap">
+      <h1 class="logo"><router-link to="/">AI 디지털교과서 통합지원센터</router-link></h1>
     </div>
-    <ul class="menu-body">
-      <li class="menu-title">Dashboard</li>
-      <li><router-link to="/"><i class="fa-solid fa-layer-group"></i>Dashboard</router-link></li>
-      <li class="menu-title">DR자원관리</li>
-      <li><router-link to="/management.page"><i class="fa-solid fa-folder-open"></i>수요반응자원 관리</router-link></li>
-      <li><router-link to="/contract.page"><i class="fa-solid fa-copy"></i>참여고객 관리</router-link></li>
-      <li @click="toggleSubMenu('rrmse')">
-        <a class="flex"><span class="flex"><i class="fa-solid fa-flag"></i>RRMSE(제안용)</span><span><i
-              :class="{ 'fa-solid fa-chevron-up': !isRRMSESubMenuOpen, 'fa-solid fa-chevron-down': isRRMSESubMenuOpen }"></i></span>
-        </a>
-        <ul class="sub-menu" :style="{ 'max-height': isRRMSESubMenuOpen ? '200px' : '0' }">
-          <li @click="stopToggleSubMenuClick"><router-link to="/rrmsePropose.page">산출의뢰</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/rrmseCalculationLog.page">산출이력</router-link></li>
+    <ul>
+      <li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu)">
+        <router-link :to="menu.path">{{ menu.pathName }}<span v-html="menu.icon"></span></router-link>
+        <ul v-if="menu.subMenu" class="sub-menu" :style="{ 'max-height': menu.isOpen ? '200px' : '0' }">
+          <li v-for="(subMenu, subIndex) in menu.subMenu" :key="subIndex">
+            <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
+          </li>
         </ul>
       </li>
-      <li class="menu-title">DR이벤트관리</li>
-      <li><router-link to="/reduceState.page"><i class="fa-solid fa-chart-simple"></i>감축현황</router-link></li>
-      <li><router-link to="/reduceReport.page"><i class="fa-solid fa-print"></i>감축결과보고서</router-link></li>
-      <li class="menu-title">전력사용현황</li>
-      <li @click="toggleSubMenu('translate')">
-        <a class="flex"><span><i class="fa-solid fa-clock-rotate-left"></i>데이터송수신현황</span><span><i
-              :class="{ 'fa-solid fa-chevron-up': !isTranslateSubMenuOpen, 'fa-solid fa-chevron-down': isTranslateSubMenuOpen }"></i></span></a>
-        <ul class="sub-menu" :style="{ 'max-height': isTranslateSubMenuOpen ? '200px' : '0' }">
-          <li @click="stopToggleSubMenuClick"><router-link to="/translateDay.page">일별</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/translateContract.page">참여고객별</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/dataStatus.page">데이터수집현황</router-link></li>
-        </ul>
-      </li>
-      <li><router-link to="/analysis.page"><i class="fa-solid fa-chart-line"></i>전력사용량/CBL 통계</router-link></li>
-      <li><router-link to="/cblAnalysis.page"><i class="fa-solid fa-code-fork"></i>CBL분석</router-link></li>
-      <li><router-link to="/device.page"><i class="fa-solid fa-location-crosshairs"></i>5분검침기 현황</router-link></li>
-      <li class="menu-title">수요사업자관리</li>
-      <li @click="toggleSubMenu('sms')">
-        <a class="flex"><span><i class="fa-solid fa-comment"></i>SMS 발송관리</span><span><i
-              :class="{ 'fa-solid fa-chevron-up': !isSMSSubMenuOpen, 'fa-solid fa-chevron-down': isSMSSubMenuOpen }"></i></span></a>
-        <ul class="sub-menu" :style="{ 'max-height': isSMSSubMenuOpen ? '200px' : '0' }">
-          <li @click="stopToggleSubMenuClick"><router-link to="/smsAutoSend.page">자동발송설정</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/smsManualSend.page">수동발송</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/smsLog.page">발송이력</router-link></li>
-        </ul>
-      </li>
-      <li @click="toggleSubMenu('email')">
-        <a class="flex"><span><i class="fa-solid fa-envelope"></i>E-mail발송관리</span><span><i
-              :class="{ 'fa-solid fa-chevron-up': !isEmailSubMenuOpen, 'fa-solid fa-chevron-down': isEmailSubMenuOpen }"></i></span></a>
-        <ul class="sub-menu" :style="{ 'max-height': isEmailSubMenuOpen ? '200px' : '0' }">
-          <li @click="stopToggleSubMenuClick"><router-link to="/emailAutoSend.page">자동발송설정</router-link></li>
-          <li @click="stopToggleSubMenuClick"><router-link to="/emailLog.page">발송이력</router-link></li>
-        </ul>
-      </li>
-      <li class="menu-title">시스템관리</li>
-      <li><router-link to="/system.page"><i class="fa-solid fa-user"></i>회원관리</router-link></li>
     </ul>
   </nav>
 </template>

 export default {
   data() {
     return {
-      isRRMSESubMenuOpen: false,
-      isTranslateSubMenuOpen: false,
-      isEmailSubMenuOpen: false,
-      isSMSSubMenuOpen: false,
+      menuList: [
+        { path: "/main.page", pathName: "대시보드" },
+        { path: "/notice.page", pathName: "커뮤니티", subMenu: [{ path: "/notice.page", pathName: "공지사항" }, { path: "/new.page", pathName: "홍보/뉴스" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
+        { path: "/document.page", pathName: "자료실", subMenu: [{ path: "/document.page", pathName: "기술문서" }, { path: "/reference.page", pathName: "자료집" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
+        { path: "/statistics.page", pathName: "통계서비스" },
+        { path: "/corporatePR.page", pathName: "네트워킹", subMenu: [{ path: "/corporatePR.page", pathName: "기업홍보관" }], icon: "<i class='fa-solid fa-angle-right'></i>", isOpen: false },
+        { path: "/modal.page", pathName: "팝업관리" },
+        { path: "/email.page", pathName: "메일발송" },
+        { path: "/userSelectList.page", pathName: "사용자관리" },
+        { path: "/subscription .page", pathName: "구독서비스" },
+      ]
     };
   },
   methods: {
-    toggleSubMenu(menu) {
-      if (menu === 'rrmse') {
-        this.isRRMSESubMenuOpen = !this.isRRMSESubMenuOpen;
-      } else if (menu === 'translate') {
-        this.isTranslateSubMenuOpen = !this.isTranslateSubMenuOpen;
-      } else if (menu === 'email') {
-        this.isEmailSubMenuOpen = !this.isEmailSubMenuOpen;
-      } else if (menu === 'sms') {
-        this.isSMSSubMenuOpen = !this.isSMSSubMenuOpen;
+    //토글 메뉴
+    toggleMenu(menu) {
+      console.log(menu);
+      if (menu.hasOwnProperty('isOpen')) {
+        menu.isOpen = !menu.isOpen;
+        if (menu.isOpen) {
+          menu.icon = "<i class='fa-solid fa-angle-down'></i>";
+        } else {
+          menu.icon = "<i class='fa-solid fa-angle-right'></i>";
+        }
       }
     },
-
     // 하위메뉴 클릭 시 메뉴 닫힘 방지
     stopToggleSubMenuClick(event) {
       event.stopPropagation();

   box-shadow: inset 0px 0px 5px white;
 }
 
-.menu-head {
-  width: 100%;
-  padding: 15px 25px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.menu-head i {
-  font-size: 1.2rem;
-  color: #fff;
-  margin-right: 20px;
-}
-
-.menu-head .logo {
-  font-size: 2rem;
-  font-weight: 800;
-}
-
-.menu-head .logo a {
-  color: #fff;
-}
-
-.menu-body li.menu-title {
-  color: #6e82a5;
-  font-size: 1.3rem;
-  padding: 10px 15px;
-}
-
-.menu-body li a {
+.logo-wrap h1 a {
   display: block;
-  padding: 10px 15px;
-  color: #eee;
-  font-family: Nunito, sans-serif;
-  font-size: 1.3rem;
+  font-size: 2rem;
+  font-weight: 900;
+  color: #fff;
+  padding: 30px 15px;
 }
 
-.menu-body li a.router-link-active {
-  background-color: #F5F6FA;
-  color: #333;
-  border-radius: 50px 0 0 50px;
-}
-
-.menu-body li a.flex {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.menu-body {
+.main-menu>ul {
   padding: 30px 0;
 }
 
-.menu-body .fa-solid {
-  width: 20px;
-  font-size: 1.3rem;
+.main-menu>ul>li>a,
+.sub-menu>li>a {
+  display: block;
+  color: #fff;
+  padding: 10px 15px;
+}
+
+.main-menu>ul>li>a {
+  font-size: 1.6rem;
+  display: flex;
+  justify-content: space-between;
 }
 
 .sub-menu {
-  background-color: #1d2c3f;
-  max-height: 0;
+  background-color: #203248;
   overflow: hidden;
-  transition: max-height 0.3s ease;
+  transition: all 0.5s ease-in-out;
 }
 
-.sub-menu li a {
-  display: block;
-  padding: 10px 35px;
-}
-
-.menu-body .fa-solid.fa-chevron-up,
-.menu-body .fa-solid.fa-chevron-down {
-  font-size: 1.2rem;
-  display: inline-block;
-  text-align: right;
+.sub-menu>li>a {
+  font-size: 1.3rem;
+  padding: 10px 30px;
 }
 </style>

8fd00e9

9062faf

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


 }
 
 .main-wrap {
-   padding: 10px;
+   padding: 30px;
    grid-area: main;
 }
 </style>

8fd00e9

9062faf

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import { createWebHistory, createRouter } from "vue-router";
 
 import Main from "../pages/main/Main.vue";
-
 import Login from "../pages/login/Login.vue";
+import UserSelectList from "../pages/user/UserSelectList.vue";
+import UserSelectOne from "../pages/user/UserSelectOne.vue";
+
 
 const routes = [
   /* 메인화면 */
   { path: "/", name: "Main", component: Main },
   { path: "/login.page", name: "Login", component: Login },
+  { path: "/userSelectList.page", name: "UserSelectList", component: UserSelectList },
+  { path: "/userSelectOne.page", name: "UserSelectOne", component: UserSelectOne },
 ];
 
 const AppRouter = createRouter({

8fd00e9

9062faf

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


     mounted() { },
 };
 </script>
-
-.login-wrap,
-.login-wrap>div,
-.login-content,
-.img-content {
-    width: 100%;
-    height: 100%;
-}
-
-.login-content,
-.img-content {
-    flex: 0 0 50%;
-}
-
-
-.login-content {
-    background: #fff;
-    padding: 50px;
-}
-
-.login-content p{
-    font-size: 2rem;
-    font-weight: 800;
-}
-
-.login{
-    min-width: 50%;
-    max-width: 400px;
-    margin: 0 auto;
-    text-align: center;
-    padding: 150px 0;
-}
-
-.login h2 img{
-    width: 50%;
-    margin-bottom: 30px;
-}
-
-input[type="text"],
-input[type="password"]{
-    display: block;
-    margin-bottom: 10px;
-}
-</style>

8fd00e9

9062faf

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


     mounted() {}
 }
 </script>
-
-.grid {
-    display: grid;
-    grid-template-columns: 1.3fr 0.7fr;
-    grid-template-rows: 0.5fr 1fr;
-    gap: 10px;
-}
-
-.absorption {
-    grid-column: 1/3;
-}
-
-.content-head h2 {
-    flex: 0 0 65%;
-}
-
-.content-head .select-wrap {
-    flex: 0 0 35%;
-}
-
-select {
-    min-width: 33%;
-}
-
-.conten-sumarry p {
-    font-size: 1.4rem;
-    text-align: center;
-}
-
-.conten-sumarry p span {
-    font-size: 3rem;
-    font-weight: 800;
-    color: #006dd3;
-}
-
-.content-body .base {
-    font-size: 1.2rem;
-    text-align: right;
-    color: #aaa;
-    margin-bottom: 10px;
-}
-
-.content-body ul li{
-    margin-bottom: 20px;
-}
-
-.content-body ul li:last-child{
-    margin-bottom: 0;
-}
-
-.content-body table td {
-    padding: 5px;
-    font-size: 1.2rem;
-}
-
-.content-body table .topic td {
-    font-size: 1.4rem;
-    font-weight: 800;
-}
-</style>

9062faf

client/views/pages/user/UserInsert.vue (added)

+++ client/views/pages/user/UserInsert.vue

@@ -0,0 +1,0 @@

9062faf

client/views/pages/user/UserSelectList.vue (added)

+++ client/views/pages/user/UserSelectList.vue

...	...	@@ -0,0 +1,143 @@
	1	+<template>
	2	+ <div class="user-wrap">
	3	+ <div class="content-box">
	4	+ <div class="title-wrap">
	5	+ <h2 class="main-title">회원관리</h2>
	6	+ </div>
	7	+ <div class="content-wrap">
	8	+ <ul class="tab-menu">
	9	+ <li v-for="(tab, index) in tabMenu" :key="index">
	10	+ <a @click="currentTab = index" :class="{ active: currentTab === index }">{{ tab }}</a>
	11	+ </li>
	12	+ </ul>
	13	+ <div class="tab-content">
	14	+ <div v-show="currentTab == 0">
	15	+ <table>
	16	+ <thead>
	17	+ <tr>
	18	+ <th>아이디</th>
	19	+ <th>기업명</th>
	20	+ <th>담당자명</th>
	21	+ <th>이메일</th>
	22	+ </tr>
	23	+ </thead>
	24	+ <tbody>
	25	+ <tr v-for="(user,index) in user1" :key="index">
	26	+ <td>{{ user.id }}</td>
	27	+ <td>{{ user.company }}</td>
	28	+ <td>{{ user.name }}</td>
	29	+ <td>{{ user.email }}</td>
	30	+ </tr>
	31	+ </tbody>
	32	+ </table>
	33	+ </div>
	34	+ <div v-show="currentTab == 1">
	35	+ <table>
	36	+ <thead>
	37	+ <tr>
	38	+ <th>아이디</th>
	39	+ <th>기업명</th>
	40	+ <th>담당자명</th>
	41	+ <th>이메일</th>
	42	+ </tr>
	43	+ </thead>
	44	+ <tbody>
	45	+ <tr v-for="(user,index) in user2" :key="index">
	46	+ <td>{{ user.id }}</td>
	47	+ <td>{{ user.company }}</td>
	48	+ <td>{{ user.name }}</td>
	49	+ <td>{{ user.email }}</td>
	50	+ </tr>
	51	+ </tbody>
	52	+ </table>
	53	+ </div>
	54	+ <div v-show="currentTab == 2">
	55	+ <table>
	56	+ <thead>
	57	+ <tr>
	58	+ <th>아이디</th>
	59	+ <th>기업명</th>
	60	+ <th>담당자명</th>
	61	+ <th>이메일</th>
	62	+ </tr>
	63	+ </thead>
	64	+ <tbody>
	65	+ <tr v-for="(user,index) in user3" :key="index">
	66	+ <td>{{ user.id }}</td>
	67	+ <td>{{ user.company }}</td>
	68	+ <td>{{ user.name }}</td>
	69	+ <td>{{ user.email }}</td>
	70	+ </tr>
	71	+ </tbody>
	72	+ </table>
	73	+ <div class="btn-wrap">
	74	+ <button class="blue-btn">등록</button>
	75	+ </div>
	76	+ </div>
	77	+ </div>
	78	+ </div>
	79	+ </div>
	80	+
	81	+ </div>
	82	+</template>
	83	+<script>
	84	+export default {
	85	+ data() {
	86	+ return {
	87	+ currentTab: 0,
	88	+ tabMenu: ['일반회원', '기관회원', '관리자'],
	89	+ user1:[
	90	+ {id:"test1",company:"test1C",name:"user1",email:"[email protected]"},
	91	+ {id:"teste2",company:"test2C",name:"user2",email:"[email protected]"},
	92	+ {id:"test3",company:"test3C",name:"user3",email:"[email protected]"},
	93	+ ],
	94	+ user2:[
	95	+ {id:"test1",company:"test1C",name:"user1",email:"[email protected]"},
	96	+ {id:"teste2",company:"test2C",name:"user2",email:"[email protected]"},
	97	+ {id:"test3",company:"test3C",name:"user3",email:"[email protected]"},
	98	+ ],
	99	+ user3:[
	100	+ {id:"test1",company:"test1C",name:"user1",email:"[email protected]"},
	101	+ {id:"teste2",company:"test2C",name:"user2",email:"[email protected]"},
	102	+ {id:"test3",company:"test3C",name:"user3",email:"[email protected]"},
	103	+ ]
	104	+ };
	105	+ },
	106	+ methods: {},
	107	+ watch: {},
	108	+ computed: {},
	109	+ components: {},
	110	+ mounted() { },
	111	+};
	112	+</script>
	113	+<style scoped>
	114	+.tab-menu{
	115	+ display: flex;
	116	+ justify-content: flex-start;
	117	+ align-items: center;
	118	+}
	119	+.tab-menu li a{
	120	+ padding: 10px 15px;
	121	+ display: block;
	122	+ font-size: 1.6rem;
	123	+ border-radius: 5px 5px 0 0;
	124	+ cursor: pointer;
	125	+ border: 1px solid #ddd;
	126	+ border-bottom: 0;
	127	+}
	128	+
	129	+.tab-menu li a.active{
	130	+ background-color: #f8f8f8;
	131	+ color: #2b7cff;
	132	+ font-weight: 800;
	133	+ border: 0;
	134	+}
	135	+
	136	+.tab-content{
	137	+ width: 100%;
	138	+ height: 100%;
	139	+ background-color: #f8f8f8;
	140	+ padding: 15px;
	141	+
	142	+}
	143	+</style>

9062faf

client/views/pages/user/UserSelectOne.vue (added)

+++ client/views/pages/user/UserSelectOne.vue

...	...	@@ -0,0 +1,38 @@
	1	+<template>
	2	+ <div class="user-wrap">
	3	+ <div class="content-box">
	4	+ <div class="title-wrap">
	5	+ <h2 class="main-title">회원관리</h2>
	6	+ </div>
	7	+ <div class="content-wrap">
	8	+ <ul class="tab-menu">
	9	+ <li v-for="(tab, index) in tabMenu" :key="index" :class="{ active: currentTab === index }">
	10	+ <a href="#" v-on:click="currentTab = index">{{ tab }}</a>
	11	+ </li>
	12	+ </ul>
	13	+ <div class="tab-content">
	14	+ <div v-show="currentTab == 0">1</div>
	15	+ <div v-show="currentTab == 1">2</div>
	16	+ <div v-show="currentTab == 2">3</div>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+
	21	+ </div>
	22	+</template>
	23	+<script>
	24	+export default {
	25	+ data() {
	26	+ return {
	27	+ currentTab: 0,
	28	+ tabMenu: ['일반회원', '기관회원', '관리자']
	29	+ };
	30	+ },
	31	+ methods: {},
	32	+ watch: {},
	33	+ computed: {},
	34	+ components: {},
	35	+ mounted() { },
	36	+};
	37	+</script>
	38	+<style scoped></style>>

Add a comment

Open 0
Closed 0

List

...	...	@@ -18,40 +18,20 @@
18	18	align-items: center;
19	19	}
20	20
	21	+.main-wrap > div{
	22	+ height: 100%;
	23	+}
21	24
22	25	.content-box {
23	26	width: 100%;
24		- padding: 15px;
	27	+ height: 100%;
	28	+ padding: 30px;
25	29	background-color: #fff;
26	30	height: 100%;
27	31	}
28	32
29		-.content-head {
30		- width: 100%;
31		- border-bottom: 1px solid #eee;
32		- padding: 15px 0;
33		-}
34		-
35		-.content-subtitle {
36		- color: #aaa;
37		- margin-bottom: 15px;
38		-}
39		-
40		-.content-body {
41		- padding: 30px 0;
42		-}
43		-
44		-.content-simple{
45		- font-size: 1.4rem;
46		- font-weight: 700;
47		- margin-bottom: 15px;
48		- line-height: 160%;
49		-}
50		-
51		-.item-box li {
52		- background-color: #fff;
53		- padding: 30px;
54		- border: 1px solid #ddd;
	33	+.main-title{
	34	+ padding: 10px 0;
55	35	}
56	36
57	37	/* btn */
...	...	@@ -102,142 +82,3 @@
102	82	margin-left: 5px;
103	83	}
104	84
105		-
106		-/* 토글 */
107		-.toggle_box {
108		- display: flex;
109		- justify-content: center;
110		- align-items: center;
111		-}
112		-
113		-.custom_input {
114		- display: none;
115		-}
116		-
117		-.custom_input+label.toggle_btn_label {
118		- position: relative;
119		- width: 100px;
120		- height: 30px;
121		-}
122		-
123		-.custom_input+label.toggle_btn_label>span {
124		- position: absolute;
125		- cursor: pointer;
126		- top: 0;
127		- left: 0;
128		- right: 0;
129		- bottom: 0;
130		- background-color: #ccc;
131		- transition: all .4s;
132		-
133		-}
134		-
135		-.custom_input+label.toggle_btn_label>span:before {
136		- display: flex;
137		- position: absolute;
138		- height: 30px;
139		- width: fit-content;
140		- padding: 0 15px;
141		- left: 0;
142		- bottom: 0;
143		- background-color: #5cb85c;
144		- color: #fff;
145		- content: "ON";
146		- align-items: center;
147		- font-weight: bold;
148		- color: rgb(29, 29, 29);
149		- -webkit-transition: all .4s;
150		- transition: all .4s;
151		-}
152		-
153		-.custom_input:checked+label.toggle_btn_label>span {
154		- background-color: black;
155		-}
156		-
157		-.custom_input:checked+label.toggle_btn_label>span:before {
158		- -webkit-transform: translateX(calc(10rem - 100%));
159		- -ms-transform: translateX(calc(10rem - 100%));
160		- transform: translateX(calc(10rem - 100%));
161		- right: 0;
162		- bottom: 0;
163		- content: "OFF";
164		- background-color: #f8f8f8;
165		-}
166		-
167		-.custom_input:disabled+label.toggle_btn_label {
168		- display: none;
169		-}
170		-
171		-.toggle_box>span {
172		- font-size: 1.2rem;
173		- margin-right: 10px;
174		-}
175		-
176		-/* input */
177		-
178		-.input-half {
179		- width: 45%;
180		- height: 35px;
181		- padding: 12px;
182		- border-radius: 4px;
183		- border: 1.5px solid lightgrey;
184		- outline: none;
185		- transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
186		- box-shadow: 0px 0px 20px -18px;
187		-}
188		-
189		-.input-full {
190		- width: 100%;
191		- height: 35px;
192		- padding: 12px;
193		- border-radius: 4px;
194		- border: 1.5px solid lightgrey;
195		- outline: none;
196		- transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
197		- box-shadow: 0px 0px 20px -18px;
198		-}
199		-
200		-.input-full:hover,
201		-.input-half:hover {
202		- border: 2px solid lightgrey;
203		- box-shadow: 0px 0px 20px -17px;
204		-}
205		-
206		-.input-full:active,
207		-.input-half:active {
208		- transform: scale(0.95);
209		-}
210		-
211		-.input-full:focus,
212		-.input-half:focus {
213		- border: 2px solid grey;
214		-}
215		-
216		-
217		-/* icon */
218		-
219		-.icon span {
220		- border-radius: 50px;
221		- border: 1px solid #333;
222		- padding: 4px 7px;
223		- margin-left: 5px;
224		-}
225		-
226		-.icon-red span {
227		- border: 1px solid red;
228		-}
229		-
230		-.icon-red span i {
231		- color: red;
232		-}
233		-
234		-input[type="checkbox"],
235		-input[type="radio"]{
236		- margin-right: 5px;
237		-}
238		-
239		-.check-box{
240		- display: flex;
241		- align-items: center;
242		- margin-right: 10px;
243		-} (No newline at end of file)

...	...	@@ -7,10 +7,9 @@
7	7	<meta name="description" content="Node Vue Web">
8	8	<link rel="stylesheet" href="/client/resources/css/reset.css">
9	9	<link rel="stylesheet" href="/client/resources/css/common.css">
10		- <link rel="stylesheet" href="/client/resources/css/main.css">
11	10	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
12	11	<script src="/client/resources/js/jquery-2.1.1.min.js"></script>
13		- <title>웰라인 시스템</title>
	12	+ <title>AI 디지털교과서 통합지원센터</title>
14	13	</head>
15	14
16	15	<body>

...	...	@@ -59,7 +59,7 @@
59	59	}
60	60
61	61	.main-wrap {
62		- padding: 10px;
	62	+ padding: 30px;
63	63	grid-area: main;
64	64	}
65	65	</style> (No newline at end of file)

...	...	@@ -1,13 +1,17 @@
1	1	import { createWebHistory, createRouter } from "vue-router";
2	2
3	3	import Main from "../pages/main/Main.vue";
4		-
5	4	import Login from "../pages/login/Login.vue";
	5	+import UserSelectList from "../pages/user/UserSelectList.vue";
	6	+import UserSelectOne from "../pages/user/UserSelectOne.vue";
	7	+
6	8
7	9	const routes = [
8	10	/* 메인화면 */
9	11	{ path: "/", name: "Main", component: Main },
10	12	{ path: "/login.page", name: "Login", component: Login },
	13	+ { path: "/userSelectList.page", name: "UserSelectList", component: UserSelectList },
	14	+ { path: "/userSelectOne.page", name: "UserSelectOne", component: UserSelectOne },
11	15	];
12	16
13	17	const AppRouter = createRouter({

...	...	@@ -14,47 +14,3 @@
14	14	mounted() { },
15	15	};
16	16	</script>
17		-
18		-.login-wrap,
19		-.login-wrap>div,
20		-.login-content,
21		-.img-content {
22		- width: 100%;
23		- height: 100%;
24		-}
25		-
26		-.login-content,
27		-.img-content {
28		- flex: 0 0 50%;
29		-}
30		-
31		-
32		-.login-content {
33		- background: #fff;
34		- padding: 50px;
35		-}
36		-
37		-.login-content p{
38		- font-size: 2rem;
39		- font-weight: 800;
40		-}
41		-
42		-.login{
43		- min-width: 50%;
44		- max-width: 400px;
45		- margin: 0 auto;
46		- text-align: center;
47		- padding: 150px 0;
48		-}
49		-
50		-.login h2 img{
51		- width: 50%;
52		- margin-bottom: 30px;
53		-}
54		-
55		-input[type="text"],
56		-input[type="password"]{
57		- display: block;
58		- margin-bottom: 10px;
59		-}
60		-</style> (No newline at end of file)

...	...	@@ -17,63 +17,3 @@
17	17	mounted() {}
18	18	}
19	19	</script>
20		-
21		-.grid {
22		- display: grid;
23		- grid-template-columns: 1.3fr 0.7fr;
24		- grid-template-rows: 0.5fr 1fr;
25		- gap: 10px;
26		-}
27		-
28		-.absorption {
29		- grid-column: 1/3;
30		-}
31		-
32		-.content-head h2 {
33		- flex: 0 0 65%;
34		-}
35		-
36		-.content-head .select-wrap {
37		- flex: 0 0 35%;
38		-}
39		-
40		-select {
41		- min-width: 33%;
42		-}
43		-
44		-.conten-sumarry p {
45		- font-size: 1.4rem;
46		- text-align: center;
47		-}
48		-
49		-.conten-sumarry p span {
50		- font-size: 3rem;
51		- font-weight: 800;
52		- color: #006dd3;
53		-}
54		-
55		-.content-body .base {
56		- font-size: 1.2rem;
57		- text-align: right;
58		- color: #aaa;
59		- margin-bottom: 10px;
60		-}
61		-
62		-.content-body ul li{
63		- margin-bottom: 20px;
64		-}
65		-
66		-.content-body ul li:last-child{
67		- margin-bottom: 0;
68		-}
69		-
70		-.content-body table td {
71		- padding: 5px;
72		- font-size: 1.2rem;
73		-}
74		-
75		-.content-body table .topic td {
76		- font-size: 1.4rem;
77		- font-weight: 800;
78		-}
79		-</style> (No newline at end of file)

Delete comment