210历史记录页面
This commit is contained in:
@ -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>
|
@ -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 {
|
||||
|
Reference in New Issue
Block a user