210历史记录页面

pages/210/historyRecords/index.vue

@@ -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>