updated 10/08/2019

Author: AmberWow123

src/App.vue

@@ -2,20 +2,26 @@
   <div id="app">
     <img src="./assets/logo.png">
     <div>
+      <!--
       <p>
         If Element is successfully added to this project, you'll see an
         <code v-text="'<el-button>'"></code>
         below
       </p>
       <el-button>el-button</el-button>
+      <div style = "font-size: 30px;">Heading: FHDATime</div>
+      -->
     </div>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+
+    <HelloWorld msg="FHDATime"/>
+
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
 
+
 export default {
   name: 'app',
   components: {

src/components/HelloWorld.vue

@@ -1,32 +1,54 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
+
+    <el-row>
+      
+      Select quarter:
+      <el-button>Fall</el-button>
+      <el-button>Winter</el-button>
+      <el-button>Spring</el-button>
+      <el-button>Summer</el-button>
+      
+    </el-row>
+
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    Select department:
+      <el-select v-model="value" placeholder="Select">
+        <el-option-group
+          v-for="group in departmentOptions"
+          :key="group.label"
+          :label="group.label">
+          <el-option
+            v-for="item in group.departmentOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-option-group>
+      </el-select>
     </p>
+
+    
+    <el-button type="primary" icon="el-icon-search">Search</el-button>
+
+
+    <!--
     <h3>Installed CLI Plugins</h3>
     <ul>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
     </ul>
     <h3>Essential Links</h3>
     <ul>
       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+      
     </ul>
     <h3>Ecosystem</h3>
     <ul>
       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+      
     </ul>
+    -->
   </div>
 </template>
 
@@ -35,6 +57,79 @@ export default {
   name: 'HelloWorld',
   props: {
     msg: String
+  },
+  data() {
+    return {
+      quarterOptions: [{
+        valueQ: '选项1',
+        labelQ: 'Fall'
+      }, {
+        valueQ: '选项2',
+        labelQ: 'Winter'
+      }, {
+        valueQ: '选项3',
+        labelQ: 'Spring'
+      }, {
+        valueQ: '选项4',
+        labelQ: 'Summer'
+      }],
+      departmentOptions: [{
+        label: 'A',
+        departmentOptions: [{
+          value: 'ACCT',
+          label: 'Accounting'
+        }, {
+          value: 'ADMJ',
+          label: 'Administration of Justice'
+        }, {
+          value: 'ANTH',
+          label: 'Anthropology'
+        }, {
+          value: 'APRN',
+          label: 'Automotive Apprenticeship'
+        }, {
+          value: 'ARTS',
+          label: 'Art'
+        }, {
+          value: 'ASTR',
+          label: 'Astronomy'
+        }, {
+          value: 'AUTO',
+          label: 'Automotive Technology'
+        }]
+      }, {
+        label: 'B',
+        departmentOptions: [{
+          value: 'BIOL',
+          label: 'Biology'
+        }, {
+          value: 'BUS',
+          label: 'Business'
+        }]
+      }, {
+        label: 'C',
+        departmentOptions: [{
+          value: 'CD',
+          label: 'Child Development'
+        }, {
+          value: 'CHEM',
+          label: 'Chemistry'
+        }, {
+          value: 'CIS',
+          label: 'Computer Information Systems'
+        }, {
+          value: 'CLP',
+          label: 'Career Life Planning'
+        }, {
+          value: 'COMM',
+          label: 'Communication Studies'
+        }, {
+          value: 'COUN',
+          label: 'Counseling'
+        }]
+      }],
+      value: ''
+    }
   }
 }
 </script>
@@ -55,4 +150,13 @@ li {
 a {
   color: #42b983;
 }
+
+.el-header, .el-footer {
+  line-height: 60px;
+}
+
+.el-main {
+  line-height: 100px;
+}
+
 </style>