使用vue编写一个前台展示大屏功能的页面

YCY866

已于 2024-03-16 22:58:26 修改

阅读量1.1k

点赞数 23

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-03-16 22:56:49 首次发布

本文链接：https://blog.csdn.net/2301_76478257/article/details/136772000

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用Vue.js创建一个包含时间显示、值班人员信息和信息展示的前台页面，提供了HTML、CSS和JavaScript代码示例，以及如何调整样式和内容以满足实际需求。

摘要由CSDN通过智能技术生成

使用vue编写一个前台展示大屏功能的页面，创建一个包含时间显示、值班人员信息和信息展示页面，可以按照以下步骤进行：

样式如图：

设置页面的基本结构。
在页面的左上角添加时间显示。
在页面的左下部分添加值班人员的信息。
在页面的右侧创建信息展示面板。

下面是一个简单的Vue.js示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Display</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
            font-family: 'Arial', sans-serif;
        }
        #app {
            display: flex;
            width: 100%;
            height: 100%;
        }
        .time-display {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        .duty-info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 300px;
        }
        .duty-info div {
            margin-bottom: 10px;
        }
        .info-panel {
            flex-grow: 1;
            margin-left: 350px; /* Adjust this value based on the width of the duty-info section */
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto; /* Enable scrolling if content overflows */
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="time-display">{{ currentTime }}</div>
        <div class="duty-info">
            <div v-for="person in dutyLeaders" :key="person.name">
                <strong>{{ person.title }}: </strong>{{ person.name }}
                <span>{{ person.phone }}</span>
            </div>
        </div>
        <div class="info-panel">
            <h2>信息展板</h2>
            <p>这里是展示信息内容!</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                currentTime: '',
                dutyLeaders: [
                    { title: '值班人员', name: '李xx', phone: 'xxxxxxxxxx' },
                    { title: '值班人员', name: '王xx', phone: 'xxxxxxxxxx' },
                    { title: '值班人员', name: '黄xx', phone: 'xxxxxxxxxx' }
                ]
            },
            created() {
                setInterval(() => {
                    this.currentTime = new Date().toLocaleTimeString();
                }, 1000);
            }
        });
    </script>
</body>
</html>

在上面这个示例中，我们首先定义了一个Vue实例，其中包含了当前时间、值班领导的信息列表。我们使用v-for指令来循环渲染每个值班领导的信息，包括姓名、职称和电话号码。

页面的左侧顶部显示当前时间，这个时间会每秒更新一次。左侧底部显示值班人员的信息，每个人员的信息都在一个div块中，并且通过v-for循环渲染。右侧是信息展示面板，这里可以放置动态更新的数据、图表或其他内容。

根据你的实际需求调整样式和内容。这个示例提供了一个基础的布局和功能，你可以根据你的需要进一步的对实例进行修改。

YCY866

关注

23
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
使用vue编写一个前台展示大屏功能的页面

实现的功能：页面的左侧顶部显示当前时间，这个时间会每秒更新一次。左侧底部显示值班领导的信息，每个领导的信息都在一个。在上面这个示例中，我们首先定义了一个Vue实例，其中包含了当前时间、值班人员的信息列表。右侧是信息展示面板，这里可以放置动态更新的数据、图表或其他内容。指令来循环渲染每个值班领导的信息，包括姓名、职称和电话号码。
复制链接

扫一扫

专栏目录