✨ feat:

pyt

2025-03-31 11c860b7a02821807d87740ea0c4865272b298ac

✨ feat:

 src/layouts/index.vue

@@ -1,5 +1,5 @@
<template>

    <div class="sticky top0">

    <div class="sticky top0 layout">

        <div class="header relative pointer">

            <div @click="$router.push('/home')" class="title">

                <img src="@/assets/logo.png" alt="">

@@ -36,7 +36,9 @@
                </div>

            </div>

        </div>

        <router-view></router-view>

        <div class="main">

            <router-view></router-view>

        </div>

    </div>

</template>



@@ -64,6 +66,15 @@
</script>



<style lang="less" scoped>

.layout {

    display: flex;

    flex-direction: column;

    height: 100%;

    .main {

        flex: 1;

        overflow: auto;

    }

}

.bgColor1 {

    background-color: #0E6EFD;

}


 src/router/router.js

@@ -80,6 +80,14 @@
                    icon: 'car',

                    hide: true

                }

            },

            {

                path: '/car-playback',

                component: () => import('@/view/playback'),

                meta: {

                    title: '车辆回放',

                    hide: true

                }

            }

        ]

    },


 src/view/login/index.vue

@@ -16,7 +16,7 @@
        </div>
        <div class="mt--20 flex a-center code_box">
          <div class="flex1">
            <el-input type="number" placeholder="请输入验证码" v-model="code" />
            <el-input  placeholder="请输入验证码" v-model="code" />
          </div>
          <div @click="resetCodeStr" class="fs--18 lh--40 border1 pointer">{{ codeStr }}</div>
        </div>

 src/view/playback/index.vue

New file
@@ -0,0 +1,128 @@
<template>
    <div class="mainer">
        <el-row>
            <el-col :span="4">
                <div class="">
                    <ul class="info-list">
                        <li class="flex">
                            <span class="label">公司名称：</span>
                            <span class="content">射洪宏达出租车</span>
                        </li>
                        <li class="flex">
                            <span class="label">车牌号码：</span>
                            <span class="content">川J6F675F</span>
                        </li>
                        <li class="flex">
                            <span class="label">车牌颜色：</span>
                            <span class="content">颜色</span>
                        </li>
                        <li class="flex">
                            <span class="label">车辆营运类型：</span>
                            <span class="content">网约车</span>
                        </li>
                        <li class="flex">
                            <span class="label">经营区域：</span>
                            <span class="content">射洪市</span>
                        </li>
                        <li class="flex">
                            <span class="label">所属车主：</span>
                            <span class="content">王志强</span>
                        </li>
                        <li class="flex">
                            <span class="label">联系电话：</span>
                            <span class="content">18888888888</span>
                        </li>
                    </ul>
                    <hr />
                    <div class="mt--20 ml--20 mr--20">
                        <div class="section-title mb--20">查看视频录像</div>
                        <el-form class="form-container" label-position="left">
                            <el-form-item label="开始时间" label-width="80px">
                                <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间" label-width="80px">
                                <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="w100">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content">2</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            video: null,
            startTime: '',
            endTime: ''
        }
    },
    mounted() {

    }
}
</script>

<style scoped lang="less">
.mainer {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.info-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;

    li {
        margin-bottom: 12px;
        font-size: 16px;

        .label {
            width: 130px;
            text-align: right;
            margin-right: 12px;
            color: #606266;
        }

        .content {
            flex: 1;
        }
    }
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
}

.el-row {
    flex: 1;
    display: flex;
}

.el-col {
    display: flex;
    flex-direction: column;
}

.form-container {
    .el-form-item {
        margin-bottom: 20px;
    }
}
.grid-content {
    background: #000;
    flex: 1;
}
</style>