210历史记录页面

This commit is contained in:
fengerli
2025-08-09 10:40:47 +08:00
parent c6babaa262
commit 0ef9dc7934
2 changed files with 87 additions and 5 deletions

View File

@ -1,8 +1,74 @@
<template>
<view class="histyRecords">
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index"
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
{{tab.name}}
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [{
name: '开机',
},
{
name: '报警',
},
],
activeTab: 0,
}
},
methods: {
// tab切换页
switchTab(tab, index) {
this.activeTab = index
},
}
}
</script>
<style>
.histyRecords {
width: 100%;
height: 100vh;
background: rgba(18, 18, 18, 1);
padding: 30rpx;
}
.tab-bar {
width: 100%;
color: rgb(255, 255, 255);
white-space: nowrap;
overflow: hidden;
position: relative;
}
.tab-container {
display: flex;
cursor: pointer;
margin-bottom: 40rpx;
justify-content: space-between;
}
.tab-item {
font-size: 28rpx;
padding: 0 30rpx;
text-align: center;
}
.active {
color: rgba(187, 230, 0, 1);
border-bottom: 6rpx solid rgba(187, 230, 0, 1);
height: 60rpx;
}
</style>

View File

@ -136,19 +136,23 @@
<button class="send-btn1" @click="sendPersonnelInfo">发送</button>
<view class="form-row">
<text class="form-label">单位</text>
<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName" />
<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">姓名</text>
<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name" />
<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">职位</text>
<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position" />
<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position"
:maxlength="15" />
</view>
<view class="form-row">
<text class="form-label">ID</text>
<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code" />
<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code"
:maxlength="15" />
</view>
</view>
</view>
@ -160,7 +164,8 @@
</view>
<view class="form-row">
<input class="form-input1" maxlength="20" placeholder="请输入文字" v-model="messageToSend" />
<input class="form-input1" maxlength="20" placeholder="请输入文字" v-model="messageToSend"
@input="filterChinese" />
</view>
</view>
<!-- 产品信息 -->
@ -359,6 +364,15 @@
}
},
methods: {
filterChinese(e) {
const value = e.detail.value;
// 允许中文和常见中文标点
this.messageToSend = value.replace(/[^\u4e00-\u9fa5“”【】《》…—]/g, '');
// 修复某些平台输入法兼容性问题
this.$nextTick(() => {
e.target.value = this.messageToSend;
});
},
// 点击弹框外的区域关闭
closePopup() {
this.lightModeA = false;
@ -1321,6 +1335,7 @@
.form-label {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
white-space: nowrap;
}
.form-input {
@ -1328,6 +1343,7 @@
border: 1rpx solid transparent;
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
width: 100%;
}
.form-input1 {