跟新代码

pages.json

@@ -40,6 +40,18 @@
 			"style": {
 				"navigationBarTitleText": "事件详情"
 			}
+		},
+		{
+			"path": "pages/security/index",
+			"style": {
+				"navigationBarTitleText": "安保人员"
+			}
+		},
+		{
+			"path": "pages/security/personnelDetails",
+			"style": {
+				"navigationBarTitleText": "安保人员"
+			}
 		}
 	],
 	"tabBar": {
@@ -53,6 +65,12 @@
 			"text": "首页",
 			"iconPath": "/static/uni.png",
 			"selectedIconPath": "/static/uni.png"
+		},
+		{
+			"pagePath": "pages/security/index",
+			"text": "安保",
+			"iconPath": "/static/uni.png",
+			"selectedIconPath": "/static/uni.png"
 		}
 		// {
 		// 	"pagePath": "pages/my/index",

pages/index/index.vue

@@ -90,7 +90,6 @@ const toPoleList = () => {
 
 
 const toVisualControl = () => {
-	console.log(1112)
 	uni.navigateTo({
 		url:"/pages/VisualControl/index"
 	})

pages/security/index.vue

@@ -0,0 +1,181 @@
+<template>
+	<view class="container">
+		<!-- 列表区域 -->
+		<scroll-view class="scroll-container" scroll-y refresher-enabled @refresherrefresh="onRefresh"
+			:refresher-triggered="isRefreshing">
+			<view class="security-list">
+				<view v-for="(item, index) in securityList" :key="index" class="security-card">
+					<view class="card-left">
+						<image class="avatar" :src="item.avatar" mode="aspectFill" />
+					</view>
+					<view class="card-middle">
+						<text class="name">{{ item.name }}</text>
+						<text class="phone">{{ item.phone }}</text>
+						<text class="position">{{ item.position }}</text>
+					</view>
+					<view class="card-right">
+						<view class="action-buttons">
+							<button size="mini" type="primary" class="action-btn"
+								@tap.stop="onCardTap(item)">查看详情</button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue';
+
+	interface SecurityPerson {
+		id : number;
+		name : string;
+		phone : string;
+		position : string;
+		status : string;
+		avatar : string;
+	}
+
+	const isRefreshing = ref(false);
+
+	const securityList = ref<SecurityPerson[]>([
+		{
+			id: 1,
+			name: '张明',
+			phone: '13800138000',
+			position: '安保主管',
+			status: '在岗',
+			avatar: 'https://ai-public.mastergo.com/ai/img_res/0e24afc38826cc6acd7c21f9423bfff1.jpg'
+		},
+		{
+			id: 2,
+			name: '李强',
+			phone: '13800138001',
+			position: '安保队长',
+			status: '休息',
+			avatar: 'https://ai-public.mastergo.com/ai/img_res/5c69aa860f81bf5bcf6592deb7391099.jpg'
+		},
+		{
+			id: 3,
+			name: '王华',
+			phone: '13800138002',
+			position: '安保员',
+			status: '在岗',
+			avatar: 'https://ai-public.mastergo.com/ai/img_res/4b109fb7399df8f30756530cac9e9004.jpg'
+		}
+	]);
+
+	const onRefresh = () => {
+		isRefreshing.value = true;
+		setTimeout(() => {
+			isRefreshing.value = false;
+		}, 1000);
+	};
+
+	const onCardTap = (item : SecurityPerson) => {
+		uni.navigateTo({
+			url: `/pages/security/personnelDetails?name=${item.name}`
+		})
+	};
+</script>
+
+<style>
+	page {
+		height: 100%;
+	}
+
+	.container {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #f5f5f5;
+	}
+
+	.scroll-container {
+		flex: 1;
+		overflow: auto;
+	}
+
+	.security-list {
+		padding: 20rpx;
+	}
+
+	.security-card {
+		display: flex;
+		align-items: center;
+		padding: 30rpx;
+		background-color: #ffffff;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.card-left {
+		margin-right: 30rpx;
+		flex-shrink: 0;
+	}
+
+	.avatar {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 60rpx;
+	}
+
+	.card-middle {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.name {
+		font-size: 16px;
+		font-weight: 600;
+		color: #333333;
+		margin-bottom: 8rpx;
+	}
+
+	.phone {
+		font-size: 14px;
+		color: #666666;
+		margin-bottom: 8rpx;
+	}
+
+	.position {
+		font-size: 14px;
+		color: #999999;
+	}
+
+	.card-right {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		flex-shrink: 0;
+	}
+
+	.status-tag {
+		padding: 4rpx 16rpx;
+		border-radius: 4rpx;
+		font-size: 12px;
+		margin-bottom: 16rpx;
+	}
+
+	.status-active {
+		background-color: #e6f7ff;
+		color: #1890ff;
+	}
+
+	.status-inactive {
+		background-color: #fff1f0;
+		color: #ff4d4f;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: 16rpx;
+	}
+
+	.action-btn {
+		font-size: 12px;
+		padding: 0 20rpx;
+	}
+</style>

pages/security/personnelDetails.vue

@@ -0,0 +1,327 @@
+<template>
+	<view class="container">
+		<scroll-view class="scroll-container" scroll-y>
+			<!-- 顶部个人信息区 -->
+			<view class="header">
+				<view class="avatar-section">
+					<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
+					<view class="name-info">
+						<text class="name">{{name}}</text>
+						<text class="job-number">工号：SP20230001</text>
+						<view class="status-tag">
+							<text>在岗</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 基本信息卡片 -->
+			<view class="info-card">
+				<view class="card-title">
+					<uni-icons type="person" size="16" color="#333333"></uni-icons>
+					<text>基本信息</text>
+				</view>
+				<view class="info-list">
+					<view class="info-item">
+						<text class="label">性别</text>
+						<text class="content">男</text>
+					</view>
+					<view class="info-item">
+						<text class="label">年龄</text>
+						<text class="content">35岁</text>
+					</view>
+					<view class="info-item">
+						<text class="label">联系电话</text>
+						<text class="content">138****8888</text>
+					</view>
+					<view class="info-item">
+						<text class="label">身份证号</text>
+						<text class="content">330************1234</text>
+					</view>
+					<view class="info-item">
+						<text class="label">所属部门</text>
+						<text class="content">安保一部</text>
+					</view>
+					<view class="info-item">
+						<text class="label">职位级别</text>
+						<text class="content">高级安保员</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 入职信息卡片 -->
+			<view class="info-card">
+				<view class="card-title">
+					<uni-icons type="staff" size="16" color="#333333"></uni-icons>
+					<text>入职信息</text>
+				</view>
+				<view class="info-list">
+					<view class="info-item">
+						<text class="label">入职时间</text>
+						<text class="content">2023-01-15</text>
+					</view>
+					<view class="info-item">
+						<text class="label">合同期限</text>
+						<text class="content">3年</text>
+					</view>
+					<view class="info-item">
+						<text class="label">试用期状态</text>
+						<text class="content">已转正</text>
+					</view>
+					<view class="info-item">
+						<text class="label">直属领导</text>
+						<text class="content">李主管</text>
+					</view>
+					<view class="info-item">
+						<text class="label">工作地点</text>
+						<text class="content">总部大楼B区</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 资质证书区域 -->
+			<view class="info-card">
+				<view class="card-title">
+					<uni-icons type="medal" size="16" color="#333333"></uni-icons>
+					<text>资质证书</text>
+				</view>
+				<view class="cert-list">
+					<view class="cert-item" v-for="(cert, index) in certificates" :key="index">
+						<view class="cert-header">
+							<text class="cert-name">{{ cert.name }}</text>
+							<text class="cert-status">{{ cert.status }}</text>
+						</view>
+						<view class="cert-info">
+							<text class="cert-date">获得时间：{{ cert.date }}</text>
+							<text class="cert-validity">有效期至：{{ cert.validity }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<!-- 底部功能区 -->
+		<view class="bottom-actions">
+			<button class="action-btn call-btn">
+				<uni-icons type="phone" size="16" color="#FFFFFF"></uni-icons>
+				<text>拨打电话</text>
+			</button>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app';
+	
+	let name = ref();
+	const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/ae0bc4decca03b83ac852cefebc20813.jpg';
+	onLoad((Option) => {
+		console.log('接收到的参数:', Option);
+		name = Option.name
+	})
+	const certificates = ref([
+		{
+			name: '安保人员资格证',
+			status: '有效',
+			date: '2022-12-01',
+			validity: '2025-12-01'
+		},
+		{
+			name: '消防安全培训证书',
+			status: '有效',
+			date: '2023-03-15',
+			validity: '2024-03-15'
+		},
+		{
+			name: '急救技能证书',
+			status: '有效',
+			date: '2023-05-20',
+			validity: '2024-05-20'
+		}
+	]);
+</script>
+
+<style>
+	page {
+		height: 100%;
+	}
+
+	.container {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: #F5F6F7;
+	}
+
+	.scroll-container {
+		flex: 1;
+		overflow: auto;
+	}
+
+	.header {
+		position: relative;
+		padding: 40rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+
+	.avatar-section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 40rpx;
+	}
+
+	.avatar {
+		width: 160rpx;
+		height: 160rpx;
+		border-radius: 80rpx;
+		border: 4rpx solid #FFFFFF;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	}
+
+	.name-info {
+		margin-top: 20rpx;
+		text-align: center;
+	}
+
+	.name {
+		display: block;
+		font-size: 18px;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 8rpx;
+	}
+
+	.job-number {
+		display: block;
+		font-size: 14px;
+		color: #666666;
+		margin-bottom: 16rpx;
+	}
+
+	.status-tag {
+		display: inline-block;
+		padding: 4rpx 20rpx;
+		background-color: #E6F7FF;
+		border-radius: 4px;
+	}
+
+	.status-tag text {
+		font-size: 12px;
+		color: #1890FF;
+	}
+
+	.info-card {
+		margin: 20rpx 30rpx;
+		padding: 30rpx;
+		background-color: #FFFFFF;
+		border-radius: 12px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+	}
+
+	.card-title {
+		display: flex;
+		align-items: center;
+		margin-bottom: 30rpx;
+	}
+
+	.card-title text {
+		margin-left: 12rpx;
+		font-size: 16px;
+		font-weight: bold;
+		color: #333333;
+	}
+
+	.info-list {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.info-item {
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx 0;
+		border-bottom: 1px solid #F0F0F0;
+	}
+
+	.info-item:last-child {
+		border-bottom: none;
+	}
+
+	.label {
+		font-size: 14px;
+		color: #666666;
+	}
+
+	.content {
+		font-size: 14px;
+		color: #333333;
+	}
+
+	.cert-list {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+	}
+
+	.cert-item {
+		padding: 20rpx;
+		background-color: #F8F9FA;
+		border-radius: 8px;
+	}
+
+	.cert-header {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 16rpx;
+	}
+
+	.cert-name {
+		font-size: 14px;
+		color: #333333;
+		font-weight: bold;
+	}
+
+	.cert-status {
+		font-size: 12px;
+		color: #52C41A;
+	}
+
+	.cert-info {
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+	}
+
+	.cert-date,
+	.cert-validity {
+		font-size: 12px;
+		color: #999999;
+	}
+
+	.bottom-actions {
+		display: flex;
+		padding: 20rpx 30rpx;
+		gap: 20rpx;
+		background-color: #FFFFFF;
+		border-top: 1px solid #F0F0F0;
+	}
+
+	.action-btn {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+	}
+
+	.action-btn text {
+		margin-left: 8rpx;
+		font-size: 14px;
+	}
+
+	.call-btn {
+		background-color: #52C41A;
+	}
+</style>

uni_modules/uni-scss/variables.scss

@@ -11,7 +11,7 @@ $uni-primary-light: mix(#fff,$uni-primary,80%);
 
 // 辅助色
 // 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
-$uni-success: #18bc37;
+$uni-success: #18bc37; 
 $uni-success-disable:mix(#fff,$uni-success,50%);
 $uni-success-light: mix(#fff,$uni-success,80%);