master

分支 (1)

管理

管理

master

t5
/
inCar.html

<!doctype html>
<html lang="en">
  <head>
    <title>停车场</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="vue.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div id="app">
        <n-nav></n-nav>
        <n-jum id="" class="" :info="show"></n-jum>
        <div class="col offset-sm-0 col-lg-12 col-sm-12">
            <!-- 展示所有收费信息 -->
            <table class="table table-hover">
              <tbody class="text-center">
                <tr>
                    <th>车牌号</th>
                    <th>入口</th>
                    <th>入场时间</th>
                </tr>
                <tr v-for="(item, index) in list" :key="index">
                    <th>{{item.card}}</th>
                    <th>{{item.in}}</th>
                    <th>{{item.time}}</th>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
    <script>
        Vue.component('n-nav',{
            data(){
                return{
                    title:'首页',
                    link:'车主信息',
                    links:'车位信息',

                }
            },
            methods: {

            },
            template:`
            <nav class="navbar navbar-expand-sm navbar-dark" style=" background-color: #0dccea;">
                <a class="navbar-brand" style="color:black;" href="index.html">{{title}}</a>
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                    aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active" >
                                <a class="nav-link" href="owner.html"> <span style="color: black;">{{link}}</span><span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item active" >
                                <a class="nav-link" href="park.html"> <span style="color: black;">{{links}}</span><span class="sr-only">(current)</span></a>
                            </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="dropdownId" style="color:black;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">车辆出入信息</a>
                            <div class="dropdown-menu" aria-labelledby="dropdownId" style="color:black;">
                                <a class="dropdown-item" href="inCar.html">车辆入场信息</a>
                                <a class="dropdown-item" href="outCar.html">车辆出场信息</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>

            `
        });
        // 自定义的另一个组件
        Vue.component('n-jum', {
            // 属性，从外部传入数据
            props: ['info'],
            // 组件的成员变量，内部
            data() {
                return {

                }
            },
            template: `
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                        <h1 class="display-3">{{info}}</h1>

                    </div>
                </div>
            `
        });
        //创建Vue实例
        new Vue({
            el:'#app',
            data:{
                show:'停车场',
                list:[
                    {
                        card:'湘A66666',
                        in:'C',
                        time:'2023-03-11',
                    },
                    {
                        card:'湘C88888',
                        in:'A',
                        time:'2023-02-12',
                    },
                    {
                        card:'鄂A44444',
                        in:'D',
                        time:'2023-01-03',
                    },
                    {
                        card:'粤A77777',
                        in:'B',
                        time:'2023-02-24',
                    },
                ],
            },
            methods:{

            },
        });
  </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>