大屏车辆展示静态页面

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>

src/components/HelloWorld.vue

@@ -1,40 +1,57 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <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>.
-    </p>
-    <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-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</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 class="title">{{msg}}</div>
+    <!-- 天气 -->
+    <div class="tianqi">
+      <span>2022-09-13</span>
+      <span class="tianqi_list">星期二</span>
+      <span class="tianqi_list">晴</span>
+      <span class="tianqi_list">14:39:43</span>
+      <span class="tianqi_list">气温：24℃</span>
+    </div>
+    <!-- 车辆列表信息 -->
+    <div class="car_list">
+      <div class="car_item" v-for="(item,index) in car_list" :key="index">
+        <span class="car_card">
+          <div class="car_card_bg"></div>
+          <span class="car_card_txt">赣</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">A</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">1</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">2</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">3</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">4</span>
+          <div class="car_card_bg" style="margin-left: 15px;"></div>
+          <span class="car_card_txt">5</span>
+        </span>
+        <span class="car_type" :class="{'green': item.car_type == '包月车', 'blue': item.car_type == '预约车', 'yellow': item.car_type == '免费车'}">{{item.car_type}}</span>
+        <span class="car_warn">{{item.car_warn}}</span>
+      </div>
+    </div>
+    <!-- 页尾 -->
+    <div class="last">共有<span class="green">17</span>辆车，当前显示<span class="green">6</span>辆</div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'HelloWorld',
+  data() {
+    return {
+      car_list:[
+        {id:1,car_card:'赣A12345',car_type:'临时车',car_warn:'临时车辆不可进入！'},
+        {id:2,car_card:'赣A12345',car_type:'临时车',car_warn:'临时车辆不可进入！'},
+        {id:3,car_card:'赣A12345',car_type:'包月车',car_warn:'9月30到期请续费！'},
+        {id:4,car_card:'赣A12345',car_type:'预约车',car_warn:'时间为9月13-9月20'},
+        {id:5,car_card:'赣A12345',car_type:'包月车',car_warn:'9月20到期请续费！'},
+        {id:6,car_card:'赣A12345',car_type:'免费车',car_warn:''},
+      ],
+    }
+  },
   props: {
     msg: String
   }
@@ -42,19 +59,97 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
+<style scoped>
+.hello{
+  
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  background-size: 100% 100%;
+  background-color: black;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
+.title{
+  color: aliceblue;
+  font-size: 50px;
+  font-style: italic;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 50px;
 }
-li {
+/* 天气 */
+.tianqi{
+  width: 1340px;
+  float: right;
+  margin-top: 60px;
+  color: aliceblue;
+  text-align: left;
+  font-size: 14px;
+  font-weight: 200;
+}
+.tianqi_list{
+  margin-left: 10px;
+}
+/* 车辆列表信息 */
+.car_list{
+  width: 1340px;
+  height: 600px;
+  float: right;
+  margin-top: 30px;
+  text-align: left;
+}
+.car_item{
+  margin-top: 15px;
+  display: flex;
+  line-height: 60px;
+}
+.car_card_bg{
   display: inline-block;
-  margin: 0 10px;
+  z-index: 0;
+  width: 50px;
+  height: 60px;
+  background-size: 100% 100%;
+  border-radius: 8px;
+  background-color:rgba(254, 253, 253, 0.1);
+}
+.car_card_txt{
+  z-index: 2;
+  width: 50px;
+  height: 60px;
+  position: absolute;
+  text-align: center;
+  margin-left: -50px;
+  font-size: 40px;
+  color: white;
+}
+.car_type{
+  margin-left: 50px;
+  color: #f8751f;
+  font-size: 28px;
+  font-weight: 600;
+}
+.green{
+  color: #29e122;
+}
+.blue{
+  color: #3388f9;
+}
+.yellow{
+  color: #f8ce35;
+}
+.car_warn{
+  margin-left: 50px;
+  color: #e92731;
+  font-size: 16px;
+  font-weight: 200;
 }
-a {
-  color: #42b983;
+/* 天气 */
+.last{
+  width: 1340px;
+  float: right;
+  margin-top: 20px;
+  color: aliceblue;
+  text-align: left;
+  font-size: 16px;
+  font-weight: 200;
 }
 </style>

src/router/index.js

@@ -10,14 +10,14 @@ const routes = [
     name: 'Home',
     component: Home
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
 ]
 
 const router = new VueRouter({

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloWorld msg="南昌交通学院欢迎您！"/>
   </div>
 </template>