2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
57a98f27 1 parent c3c4ef1b

front-end-skeleton

Inline Side-by-side
Showing 28 changed files with 1699 additions and 0 deletions
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
This diff could not be displayed because it is too large.
{
"name": "dropbox_proto",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuetify": "^2.2.11",
"vuex": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-router": "~4.3.0",
"@vue/cli-plugin-vuex": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<tool-view></tool-view>
</template>
<script>
import ToolView from './views/ToolView'
export default {
data() {
return {
}
},
components: {
ToolView,
}
}
</script>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
<template>
<v-card
max-width="98%"
class="mx-auto"
>
<v-toolbar
color="light-blue"
dark
>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
</script>
<template lang="html">
<v-card>
<v-toolbar flat>
<v-toolbar-title>피드백
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-divider></v-divider>
<v-form>
<v-textarea
name="input-7-1"
filled
label="아쉬웠던 점을 말씀해주세요. 칭찬도 당연히 환영입니다!"
auto-grow
></v-textarea>
<v-btn large color="primary">SUBMIT</v-btn>
</v-form>
</v-card>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style lang="css" scoped>
</style>
<template>
<v-card
max-width="98%"
class="mx-auto"
>
<v-toolbar
color="light-blue"
dark
>
<v-toolbar-title>파일</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
:class="[item.iconClass]"
v-text="item.icon"
></v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
</script>
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>파일
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="파일 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-subheader inset>Folders</v-subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
>{{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-divider inset></v-divider>
<v-subheader inset>Files</v-subheader>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-file-input
v-model="files"
color="deep-purple accent-4"
counter
label="업로드"
multiple
placeholder="파일을 화면으로 드래그앤 드롭 하거나, 이곳을 클릭하세요."
prepend-icon="mdi-paperclip"
outlined
:show-size="1000"
>
<template v-slot:selection="{ index, text }">
<v-chip
v-if="index < 2"
color="deep-purple accent-4"
dark
label
small
>
{{ text }}
</v-chip>
<span
v-else-if="index === 2"
class="overline grey--text text--darken-3 mx-2"
>
+{{ files.length - 2 }} File(s)
</span>
</template>
</v-file-input>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
</script>
<template>
<v-container fluid>
<v-card-title>
연락처
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="연락처 검색"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</v-container>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Phone', value: 'Phone' },
{ text: 'E-mail', value: 'Email' },
{ text: 'Added date', value: 'date' }
],
desserts: [
{
name: 'Frozen Yogurt',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Ice cream sandwich',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Eclair',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Cupcake',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Gingerbread',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Jelly bean',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Lollipop',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Honeycomb',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Donut',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'KitKat',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
],
}
},
}
</script>
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
});
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Main from '../views/Main.vue'
import Contact from '../views/Contact.vue'
import File from '../views/File.vue'
import FavList from '../views/FavList.vue'
import QuickList from '../views/QuickList.vue'
import Feedback from '../views/Feedback.vue'
import ToolView from '../views/ToolView'
import RegistUser from '../views/RegistUser'
Vue.use(VueRouter);
export default new VueRouter ({
mode: 'history',
base: process.env.BASE_URL,
routes : [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/main',
name:'Main',
component: Main
},
{
path: '/contact',
name:'Contact',
component: Contact
},
{
path: '/RegistUser',
name: 'RegistUser',
component: RegistUser
},
{
path: '/login',
name: 'Login',
component:Login,
},
{
path:'/file',
name:'File',
component: File
},
{
path:'/fav',
name:'Fav',
component: FavList
},
{
path:'/quick',
name:'Quick',
component : QuickList
},
{
path:'/feedback',
name:'Feedback',
component: Feedback
}
]
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
<template lang="html">
<contact></contact>
</template>
<script>
import contact from '@/components/make_contact.vue'
export default {
components:{
contact
}
}
</script>
<style lang="css" scoped>
</style>
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>즐겨찾기</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="즐겨찾기 검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
>{{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
</script>
<template lang="html">
<v-app>
<feedback></feedback>
</v-app>
</template>
<script>
import feedback from '@/components/Feedback.vue'
export default {
components:{
feedback
}
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<v-container fluid>
<FileList></FileList>
</v-container>
</template>
<script>
import FileList from '@/components/FileList'
import Favlist from '@/components/Fav_list'
export default {
components:{
FileList,
Favlist
},
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
</script>
<template lang="html">
<v-container>
<div>
<h2>안녕하세요!</h2>
<br><br>
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex xs6>
<v-flex>
<h1>파일</h1>
<v-data-table
:headers="headers"
:items="desserts"
:expand-icon="home"
:items-per-page="5"
class="elevation-1"
></v-data-table>
<v-spacer></v-spacer>
</v-flex>
<v-flex><br><v-divider></v-divider><br></v-flex>
<v-flex>
<h1>빠른액세스</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</v-flex>
<v-flex><br><v-divider></v-divider><br></v-flex>
<v-flex xs6>
<h1>즐겨찾기</h1>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
</script>
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>KhuLoud</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
type="text"
></v-text-field>
<v-text-field
id="password"
label="Password"
name="password"
type="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn>
<v-btn color="primary" router :to="{name: 'Main'}" exact>Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
}
</script>
<template lang="html">
<v-container>
<div>
<h2>안녕하세요!</h2>
<br><br>
</div>
<v-layout column>
<v-flex>
<v-layout row wrap>
<v-flex lg6>
<v-flex>
<Filecard></Filecard>
</v-flex>
<v-flex><br><br></v-flex>
</v-flex>
<v-flex><br><br></v-flex>
<v-flex lg6>
<Favlist></Favlist>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout column>
<v-flex>
<v-toolbar flat>
<v-toolbar-title>빠른 액세스</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in favorite" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-divider></v-divider>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import FileList from '@/components/FileList'
import Favlist from '@/components/Fav_list'
import Filecard from '@/components/FileCardlist.vue'
export default {
components:{
FileList,
Favlist,
Filecard
},
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
format : 'dir'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
format: 'pdf'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
format: 'file'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
format : 'dir'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
format : 'pdf'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
format:'file'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
format:'dir'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
foramt:'file'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
foramt:'pdf'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
foramt:'dir'
},
],
favorite:[
{
name: 'KitKat',
date: '20.05.17'
},
{
name: 'Vuetify',
date: '20.05.17'
}
],
}
},
}
</script>
<template>
<div>
<v-toolbar flat>
<v-toolbar-title>빠른액세스</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="검색"
single-line
hide-details
></v-text-field>
</v-toolbar>
<v-list two-line subheader>
<v-list-item
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon
>{{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item
v-for="item in items2"
:key="item.title"
@click=""
>
<v-list-item-avatar>
<v-icon> {{item.iconClass}}</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">mdi-information</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Photos', subtitle: 'Jan 9, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Recipes', subtitle: 'Jan 17, 2014' },
{ icon: 'folder', iconClass: 'mdi-folder', title: 'Work', subtitle: 'Jan 28, 2014' },
],
items2: [
{ icon: 'assignment', iconClass: 'mdi-file', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
{ icon: 'call_to_action', iconClass: 'mdi-PdfBox', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
],
}),
}
</script>
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>KhuLoud</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="ID"
v-model="Id"
name="ID"
type="text"
></v-text-field>
<v-text-field
v-model="Password"
label="Password"
name="password"
type="password"
></v-text-field>
<v-text-field
label="Name"
v-model="Name"
name="name"
type="name"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
name="Email"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click = "$router.push({name: 'Login'})">Regist</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
}
</script>
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
:clipped="$vuetify.breakpoint.lgAndUp"
app
>
<v-list dense>
<v-list-item router :to="{name: 'Main'}" exact>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>홈</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'File'}" exact>
<v-list-item-action>
<v-icon>mdi-file</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>파일</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Fav'}" exact>
<v-list-item-action>
<v-icon>mdi-heart</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>즐겨찾기</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Quick'}" exact>
<v-list-item-action>
<v-icon>mdi-history</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>빠른 액세스</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Contact'}" exact>
<v-list-item-action>
<v-icon>mdi-contacts</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>연락처</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Main'}" exact>
<v-list-item-action>
<v-icon>mdi-settings</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>설정</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-icon>mdi-delete</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>휴지통</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Feedback'}" exact>
<v-list-item-action>
<v-icon>mdi-message</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>피드백</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item router :to="{name: 'Main'}" exact>
<v-list-item-action>
<v-icon>mdi-help-circle</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>도움말</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app
color="blue darken-3"
dark
>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title
style="width: 300px"
class="ml-0 pl-4"
>
<span class="hidden-sm-and-down">KhuLoud</span>
</v-toolbar-title>
<v-text-field
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field>
<v-spacer></v-spacer>
<v-btn icon @click = "$router.push({name: 'Login'})">
<v-icon>mdi-login</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-bell</v-icon>
</v-btn>
</v-app-bar>
<v-content>
<v-container
>
<router-view></router-view>
</v-container>
</v-content>
<v-btn
bottom
color="pink"
dark
fab
fixed
right
@click="dialog = !dialog"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-dialog
v-model="dialog"
width="800px"
>
<v-card>
<v-card-title class="grey darken-2">
Create contact
</v-card-title>
<v-container>
<v-row class="mx-2">
<v-col
class="align-center justify-space-between"
cols="12"
>
<v-row
align="center"
class="mr-0"
>
<v-avatar
size="40px"
class="mx-3"
>
<img
src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
alt=""
>
</v-avatar>
<v-text-field
placeholder="Name"
></v-text-field>
</v-row>
</v-col>
<v-col cols="6">
<v-text-field
prepend-icon="mdi-account-card-details-outline"
placeholder="Company"
></v-text-field>
</v-col>
<v-col cols="6">
<v-text-field
placeholder="Job title"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
prepend-icon="mdi-mail"
placeholder="Email"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
type="tel"
prepend-icon="mdi-phone"
placeholder="(000) 000 - 0000"
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
prepend-icon="mdi-text"
placeholder="Notes"
></v-text-field>
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-btn
text
color="primary"
>More</v-btn>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="dialog = false"
>Cancel</v-btn>
<v-btn
text
@click="dialog = false"
>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
dialog: false,
drawer: null,
items: [
{ icon: 'mdi-home', text: '홈' },
{ icon: 'mdi-file', text: '파일' },
{ icon: 'mdi-heart', text: '즐겨찾기' },
{ icon: 'mdi-history', text: '빠른 액세스'},
{ icon: 'mdi-contacts', text: '연락처' },
{ icon: 'mdi-settings', text: '설정' },
{ icon: 'mdi-message', text: '피드백' },
{ icon: 'mdi-help-circle', text: '도움말' },
],
}),
}
</script>
<style>
</style>
\ No newline at end of file
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
\ No newline at end of file