2020-1-capstone-design1 / PKH_Project1

Go to a project
Toggle navigation Toggle navigation pinning
Yoonjunhyeon
2dbd220b 1 parent 75841bd5

vue 파일들 추가

Inline Side-by-side
Showing 5 changed files with 64 additions and 15 deletions
...@@ -16,13 +16,15 @@ ...@@ -16,13 +16,15 @@
16 <v-dialog v-model="clickInfo" max-width="600" class="pa-2"> 16 <v-dialog v-model="clickInfo" max-width="600" class="pa-2">
17 <v-card elevation="0" outlined class="pa-4"> 17 <v-card elevation="0" outlined class="pa-4">
18 <v-row justify="center" class="mx-0 mb-8 mt-2"> 18 <v-row justify="center" class="mx-0 mb-8 mt-2">
19 - <v-icon color="lightblue">mdi-power-on</v-icon> 19 + <v-icon color="primary">mdi-power-on</v-icon>
20 <div 20 <div
21 style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;" 21 style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40;"
22 >Information of This Service</div> 22 >Information of This Service</div>
23 - <v-icon color="lightblue">mdi-power-on</v-icon> 23 + <v-icon color="primary">mdi-power-on</v-icon>
24 </v-row> 24 </v-row>
25 - <div>Used Opensource</div> 25 + <v-btn color="primary" class="mt-2" block>Description of service</v-btn>
26 + <v-btn color="primary" class="my-2" block>Term of this service</v-btn>
27 + <v-btn color="primary" block>Used Opensource</v-btn>
26 </v-card> 28 </v-card>
27 </v-dialog> 29 </v-dialog>
28 <v-content> 30 <v-content>
......
1 +<template>
2 + <div></div>
3 +</template>
4 +
5 +<script>
6 +export default {
7 +
8 +};
9 +</script>
10 +
11 +<style>
12 +
13 +</style>
1 +<template>
2 + <div></div>
3 +</template>
4 +
5 +<script>
6 +export default {
7 +
8 +};
9 +</script>
10 +
11 +<style>
12 +
13 +</style>
1 +<template>
2 + <div></div>
3 +</template>
4 +
5 +<script>
6 +export default {
7 +
8 +};
9 +</script>
10 +
11 +<style>
12 +
13 +</style>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <div style="font-size: 34px; font-weight: 500; color: #343a40;">WELCOME</div> 12 <div style="font-size: 34px; font-weight: 500; color: #343a40;">WELCOME</div>
13 </v-row> 13 </v-row>
14 <v-card elevation="0"> 14 <v-card elevation="0">
15 - <!-- file upload --> 15 + <!-- 데스크톱 화면 설명 요약 -->
16 <v-row justify="center" class="mx-0 mt-12" v-if="$vuetify.breakpoint.mdAndUp"> 16 <v-row justify="center" class="mx-0 mt-12" v-if="$vuetify.breakpoint.mdAndUp">
17 <v-flex md7 class="mt-1"> 17 <v-flex md7 class="mt-1">
18 <div 18 <div
...@@ -34,6 +34,8 @@ ...@@ -34,6 +34,8 @@
34 </v-card> 34 </v-card>
35 </v-flex> 35 </v-flex>
36 </v-row> 36 </v-row>
37 +
38 + <!-- 모바일 화면 설명 요약 -->
37 <v-card elevation="0" class="mt-8" v-else> 39 <v-card elevation="0" class="mt-8" v-else>
38 <div 40 <div
39 style="font-size: 20px; font-weight: 300; color: #888; text-align: center" 41 style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
...@@ -51,13 +53,25 @@ ...@@ -51,13 +53,25 @@
51 ></v-img> 53 ></v-img>
52 </v-card> 54 </v-card>
53 55
56 + <!-- Set Threshold -->
54 <div 57 <div
55 class="mt-10" 58 class="mt-10"
56 style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;" 59 style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
57 >How To start this service</div> 60 >How To start this service</div>
58 <div 61 <div
62 + style="font-size: 20px; font-weight: 300; color: #888; text-align: center; margin-bottom: 5px"
63 + >
64 + <div>Set up Threshold of</div>
65 + <div>Recommended Youtube link</div>
66 + </div>
67 + <v-row style="max-width: 300px; margin: auto">
68 + <v-slider v-model="threshold" :thumb-size="20" thumb-label="always" :min="2" :max="15"></v-slider>
69 + </v-row>
70 +
71 + <!-- Upload Video -->
72 + <div
59 style="font-size: 20px; font-weight: 300; color: #888; text-align: center" 73 style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
60 - >Just Upload your Video</div> 74 + >Then, Just Upload your Video</div>
61 <v-row justify="center" class="mx-0 mt-2"> 75 <v-row justify="center" class="mx-0 mt-2">
62 <v-card 76 <v-card
63 max-width="500" 77 max-width="500"
...@@ -78,15 +92,8 @@ ...@@ -78,15 +92,8 @@
78 <input ref="fileInput" style="display: none" type="file" @change="onFileChange" /> 92 <input ref="fileInput" style="display: none" type="file" @change="onFileChange" />
79 </v-card> 93 </v-card>
80 </v-row> 94 </v-row>
81 - <div 95 +
82 - style="font-size: 20px; font-weight: 300; color: #888; text-align: center; margin-top: 20px; margin-bottom: 18px" 96 + <!-- 결과 화면 -->
83 - >
84 - <div>And Set up Threshold of</div>
85 - <div>recommended Youtube link</div>
86 - </div>
87 - <v-row justify="center" class="mx-12">
88 - <v-slider v-model="threshold" :thumb-size="20" thumb-label="always" :min="20" :max="80" ></v-slider>
89 - </v-row>
90 <div 97 <div
91 style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;" 98 style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
92 class="mt-10" 99 class="mt-10"
...@@ -118,6 +125,7 @@ ...@@ -118,6 +125,7 @@
118 style="font-size: 20px; font-weight: 300; color: #888; text-align: center" 125 style="font-size: 20px; font-weight: 300; color: #888; text-align: center"
119 >Result Show up in each of Boxes!</div> 126 >Result Show up in each of Boxes!</div>
120 </v-card> 127 </v-card>
128 +
121 </v-flex> 129 </v-flex>
122 </v-layout> 130 </v-layout>
123 </v-sheet> 131 </v-sheet>
...@@ -130,7 +138,7 @@ export default { ...@@ -130,7 +138,7 @@ export default {
130 videoFile: '', 138 videoFile: '',
131 YoutubeUrl: [], 139 YoutubeUrl: [],
132 generatedTag: [], 140 generatedTag: [],
133 - threshold: 20, 141 + threshold: 5,
134 successDialog: false, 142 successDialog: false,
135 errorDialog: false, 143 errorDialog: false,
136 loadingProcess: false, 144 loadingProcess: false,
......