|
|
@@ -1,85 +1,23 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="alarm-example">示例样式</div>
|
|
|
- <el-tabs v-model="activeName" class="alarm-example-tabs" @tab-click="handleTabClick">
|
|
|
+ <el-tabs v-model="activeName" class="alarm-example-tabs">
|
|
|
<el-tab-pane label="平台侧" :name="0">
|
|
|
- <div style="width: 450px">
|
|
|
- <div class="alarm-example-title"> <div class="alarm-example-block"></div>卡片页</div>
|
|
|
- <div class="alarm-example-card">
|
|
|
- <div class="alarm-example-card-head">
|
|
|
- <div class="alarm-example-card-head-title">报警信息</div>
|
|
|
- <div style="display: flex; justify-content: center">
|
|
|
- <div class="alarm-example-card-head-btn">去查看</div>
|
|
|
- <img src="@/assets/icons/arrow-right.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="alarm-example-card-content">
|
|
|
- <img src="@/assets/images/alarm-example.png" alt="" />
|
|
|
- <div class="alarm-example-card-content-time">2024年6月25日 16:45:06:342</div>
|
|
|
- <div class="alarm-example-card-content-tips"
|
|
|
- >您好，智能检测到该区域发现员工【安全帽违规】的情况，请及时关注！</div
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="alarm-example-title"><div class="alarm-example-block"></div>详情页</div>
|
|
|
- <div class="alarm-example-detail">
|
|
|
- <table>
|
|
|
- <tr v-for="it in ExampleData">
|
|
|
- <th>{{ it.th }}</th>
|
|
|
- <td>{{ it.td }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <th>问题照片</th>
|
|
|
- <td>
|
|
|
- <img src="@/assets/images/alarm-example-photo.png" alt="" />
|
|
|
- <img src="@/assets/images/alarm-example-photo.png" alt="" />
|
|
|
- <img src="@/assets/images/alarm-example-photo.png" alt="" />
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <AlarmExamplePlatform />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="蓝信侧" :name="1">
|
|
|
+ <AlarmExampleMobile />
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="蓝信侧" :name="1"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+ import AlarmExamplePlatform from './AlarmExamplePlatform.vue';
|
|
|
+ import AlarmExampleMobile from './AlarmExampleMobile.vue';
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
const activeName = ref<number>(0);
|
|
|
-
|
|
|
- const handleTabClick = (tab: any) => {
|
|
|
- console.log(tab);
|
|
|
- };
|
|
|
-
|
|
|
- const ExampleData = [
|
|
|
- {
|
|
|
- th: '问题分类',
|
|
|
- td: '安全帽违规',
|
|
|
- },
|
|
|
- {
|
|
|
- th: '问题描述',
|
|
|
- td: '关于问题类型的描述，大概300字以内',
|
|
|
- },
|
|
|
- {
|
|
|
- th: '地点',
|
|
|
- td: 'B26胶接车间-固化区',
|
|
|
- },
|
|
|
- {
|
|
|
- th: '危险点负责人',
|
|
|
- td: '李四',
|
|
|
- },
|
|
|
- {
|
|
|
- th: '上报人',
|
|
|
- td: '张三三',
|
|
|
- },
|
|
|
- {
|
|
|
- th: '上报时间',
|
|
|
- td: '20240315 12:00',
|
|
|
- },
|
|
|
- ];
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -94,97 +32,4 @@
|
|
|
:deep(.el-tabs__nav-scroll) {
|
|
|
padding: 0 20px 0;
|
|
|
}
|
|
|
- .alarm-example-title {
|
|
|
- padding-left: 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 20px;
|
|
|
- .alarm-example-block {
|
|
|
- margin-right: 20px;
|
|
|
- width: 4px;
|
|
|
- height: 12px;
|
|
|
- background: #1777ff;
|
|
|
- border-radius: 3px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .alarm-example-card {
|
|
|
- padding: 10px 0;
|
|
|
- margin: 10px 20px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
-
|
|
|
- .alarm-example-card-head {
|
|
|
- padding: 0 20px 10px;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .alarm-example-card-head-title {
|
|
|
- display: inline-block;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #646566;
|
|
|
- }
|
|
|
- .alarm-example-card-head-btn {
|
|
|
- display: inline-block;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #1777ff;
|
|
|
- }
|
|
|
- img {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- width: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- .alarm-example-card-content {
|
|
|
- padding: 3px 20px 10px;
|
|
|
- .alarm-example-card-content-time {
|
|
|
- padding: 10px 0;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #969799;
|
|
|
- }
|
|
|
- .alarm-example-card-content-tips {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- color: #646566;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .alarm-example-detail {
|
|
|
- table {
|
|
|
- border-collapse: separate; /* 分开边框 */
|
|
|
- border-spacing: 0; /* 消除边框间距 */
|
|
|
-
|
|
|
- th,
|
|
|
- td {
|
|
|
- border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- border-left: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- padding: 8px; /* 内边距 */
|
|
|
- text-align: left; /* 文字对齐方式 */
|
|
|
- }
|
|
|
-
|
|
|
- td {
|
|
|
- border-right: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- }
|
|
|
-
|
|
|
- tr:first-child th {
|
|
|
- border-top-left-radius: 8px; /* 左上角圆角 */
|
|
|
- }
|
|
|
- tr:first-child td {
|
|
|
- border-top-right-radius: 8px; /* 右上角圆角 */
|
|
|
- }
|
|
|
- tr:last-child th {
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- border-bottom-left-radius: 8px; /* 左下角圆角 */
|
|
|
- }
|
|
|
- tr:last-child td {
|
|
|
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
- border-bottom-right-radius: 8px; /* 右下角圆角 */
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
wyf
