zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

替换图片并删掉本地图片，代码分包

Browse Source
This commit is contained in:
zhouyanli
2026-04-21 15:48:52 +08:00
parent b0d90c27db
commit 65e6e5bf30
70 changed files with 316 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
property-uniapp-project/pageSubPack/visitor/qrcode-page.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<view class="qrcode-page">
<view class="qrcode-wrap">
<view class="qrcode-box">
<!-- 调用uqrcode组件 -->
<uqrcode
:value="qrcodeValue"
:size="400"
:logo="'http://47.104.199.163:9090/images/logo.png'"
:logoSize="0.2"
canvasId="visitor-qrcode"
@success="onQrcodeSuccess"
></uqrcode>
<!-- 二维码边框装饰 -->
<view class="qrcode-border border-top"></view>
<view class="qrcode-border border-right"></view>
<view class="qrcode-border border-bottom"></view>
<view class="qrcode-border border-left"></view>
</view>
<text class="qrcode-desc">桂花园（别墅）东门通行二维码</text>
<text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
</view>
<view class="btn-wrap">
<button class="send-btn" @click="sendToFriend">发送给好友</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
// import { navigateBack, showToast, share } from '@dcloudio/uni-app';
// 引入本地uqrcode组件
import uqrcode from '@/components/uqrcode/uqrcode.vue';
// 二维码内容（替换为实际的通行链接）
const qrcodeValue = ref('https://your-domain.com/visitor/123456');
// 生成的二维码临时图片地址
const qrcodeImage = ref('');
// 二维码生成成功回调
const onQrcodeSuccess = (tempFilePath) => {
qrcodeImage.value = tempFilePath;
uni.showToast({ title: '二维码生成成功', icon: 'success' });
};
// 分享给好友
const sendToFriend = () => {
if (!qrcodeImage.value) {
uni.showToast({ title: '二维码生成中...', icon: 'none' });
return;
}
uni.share({
provider: 'weixin',
type: 0,
title: '访客通行二维码',
imageUrl: qrcodeImage.value,
success: () => uni.showToast({ title: '分享成功' }),
fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
});
};
</script>
<style scoped>
.qrcode-page {
/* background-color: #f8f8f8; */
min-height: 100vh;
}
.qrcode-wrap {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60rpx;
}
.qrcode-box {
position: relative;
width: 400rpx;
height: 400rpx;
}
/* 二维码边框样式 */
.qrcode-border {
position: absolute;
width: 40rpx;
height: 40rpx;
border: 4rpx solid #007aff;
}
.border-top { top: 0; left: 0; border-right: none; border-bottom: none; }
.border-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.border-bottom { bottom: 0; right: 0; border-left: none; border-top: none; }
.border-left { bottom: 0; left: 0; border-right: none; border-top: none; }
/* 文字样式 */
.qrcode-desc {
font-size: 32rpx;
font-weight: 600;
margin-top: 30rpx;
color: #333;
}
.qrcode-tips {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
/* 按钮样式 */
.btn-wrap {
margin: 80rpx 20rpx 20rpx;
}
.send-btn {
background-color: #007aff;
color: #fff;
border-radius: 8rpx;
height: 88rpx;
font-size: 32rpx;
}
</style>

495
property-uniapp-project/pageSubPack/visitor/visitor-add.vue Normal file
View File

@@ -0,0 +1,495 @@
<template>
<view class="visitor-invite">
<!-- 顶部导航 -->
<!-- <view class="nav-bar">
<uni-icons type="left" size="20" color="#000" @click="navigateBack"></uni-icons>
<view class="nav-title">访客邀请</view>
</view> -->
<!-- 标签切换：车辆来访/人员来访 -->
<view class="tab-wrap">
<view
class="tab-item"
:class="{ active: activeTab === 'car' }"
@click="switchTab('car')"
>
车辆来访
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'person' }"
@click="switchTab('person')"
>
人员来访
</view>
</view>
<!-- 表单区域 -->
<view class="form-wrap">
<!-- 房屋信息 -->
<view class="form-section">
<view class="section-title">房屋信息</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>来访地址
</view>
<view class="value" @click="openAddressModal">
{{ form.address }}
<uni-icons type="right" size="16" color="#999"></uni-icons>
</view>
</view>
</view>
<!-- 访客信息 -->
<view class="form-section">
<view class="section-title">访客信息</view>
<view class="form-item">
<view class="label">访客姓名</view>
<input
class="input"
placeholder="请输入访客姓名"
v-model="form.name"
/>
</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>访客性别
</view>
<view class="value" @click="openGenderModal">
{{ form.gender }}
<uni-icons type="right" size="16" color="#999"></uni-icons>
</view>
</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>访客联系方式
</view>
<input
class="input"
placeholder="请输入联系方式"
v-model="form.phone"
type="number"
/>
</view>
<!-- 车牌号：仅车辆来访显示 -->
<view class="form-item" v-if="activeTab === 'car'">
<view class="label">
<text class="required">*</text>车牌号
</view>
<view class="car-number-wrap">
<input
class="car-input"
v-for="(item, index) in 8"
:key="index"
v-model="form.carNumber[index]"
maxlength="1"
type="text"
/>
</view>
</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>随行人数
</view>
<input
class="input"
placeholder="请输入随行人数"
v-model="form.peopleNum"
type="number"
/>
</view>
</view>
<!-- 有效期 -->
<view class="form-section">
<view class="section-title">有效期</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>来访时间
</view>
<view class="value">
<uni-datetime-picker type="datetime" v-model="visitTime" @change="changeLog" :border="false"/>
</view>
</view>
<view class="form-item">
<view class="label">
<text class="required">*</text>离开时间
</view>
<view class="value">
<uni-datetime-picker type="datetime" v-model="leaveTime" @change="changeLog" :border="false"/>
</view>
</view>
<view class="tips">预计来访时间和预计离开时间间隔不能超过24小时</view>
<view class="tips">车辆停留请勿超出有效期，需及时驶出小区</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="btn-wrap">
<button
class="submit-btn"
@click="submitForm"
>
{{ activeTab === 'car' ? '确认邀请' : '生成通行二维码' }}
</button>
</view>
<!-- 地址选择弹窗 -->
<uni-popup ref="addressModalRef" type="bottom" :mask-click="false">
<view class="modal-wrap">
<view class="modal-title">选择来访地址</view>
<view class="address-list">
<view
class="address-item"
:class="{ active: item === form.address }"
v-for="item in addressList"
:key="item"
@click="selectAddress(item)"
>
{{ item }}
</view>
</view>
<uni-icons
type="closeempty"
size="20"
class="modal-close"
@click="closeAddressModal"
></uni-icons>
</view>
</uni-popup>
<!-- 性别选择弹窗 -->
<uni-popup ref="genderModalRef" type="bottom" :mask-click="false">
<view class="modal-wrap">
<view class="gender-list">
<view
class="gender-item"
:class="{ active: item === form.gender }"
v-for="item in genderList"
:key="item"
@click="selectGender(item)"
>
{{ item }}
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { ref, reactive} from 'vue';
import{onLoad } from "@dcloudio/uni-app"
// 标签激活状态
const activeTab = ref('car');
// 表单数据
const form = reactive({
address: '桂花园（别墅）2号楼2层', // 来访地址默认值
name: '', // 访客姓名
gender: '男', // 性别默认值
phone: '', // 联系方式
carNumber: ['', '', '', '', '', '', ''], // 车牌号（7位）
peopleNum: '', // 随行人数
visitTime: '', // 来访时间默认值
leaveTime: '' // 离开时间
});
// 地址列表（模拟数据）
const addressList = ref([
'桂花园（别墅）1号楼1层',
'桂花园（别墅）2号楼2层'
]);
// 性别列表
const genderList = ref(['男', '女']);
// 弹窗/选择器实例
const addressModalRef = ref(null);
const genderModalRef = ref(null);
const timePickerRef = ref(null);
// 标记当前选择的是来访/离开时间
const currentTimeType = ref('');
// 页面初始化
onLoad(() => {
// 可在这里请求接口获取地址/默认时间等数据
});
// 切换tab
const switchTab = (tab) => {
activeTab.value = tab;
// 切换Tab后重置表单
resetForm();
// nextTick(() =>{
// })
};
// 返回上一页
const navigateBack = () => {
uni.navigateBack();
};
// 打开地址弹窗
const openAddressModal = () => {
addressModalRef.value.open();
};
// 关闭地址弹窗
const closeAddressModal = () => {
addressModalRef.value.close();
};
// 选择地址
const selectAddress = (item) => {
form.address = item;
closeAddressModal();
};
// 打开性别弹窗
const openGenderModal = () => {
genderModalRef.value.open();
};
// 选择性别
const selectGender = (item) => {
form.gender = item;
genderModalRef.value.close();
};
// 打开时间选择器
// const openTimePicker = (type) => {
// currentTimeType.value = type;
// timePickerRef.value.open();
// };
// 校验来访/离开时间间隔
const checkTimeInterval = () => {
if (!form.visitTime || !form.leaveTime) return;
const visitTime = new Date(form.visitTime).getTime();
const leaveTime = new Date(form.leaveTime).getTime();
const diffHours = (leaveTime - visitTime) / (1000 * 60 * 60);
if (diffHours > 24) {
uni.showToast({
title: '时间间隔不能超过24小时',
icon: 'none'
});
form.leaveTime = '';
}
};
// 表单提交
const submitForm = () => {
// 必填项校验
if (!form.phone) {
uni.showToast({ title: '请输入访客联系方式', icon: 'none' });
return;
}
if (!/^1[3-9]\d{9}$/.test(form.phone)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
if (activeTab === 'car' && form.carNumber.join('').length < 8) {
uni.showToast({ title: '请填写完整车牌号', icon: 'none' });
return;
}
if (!form.peopleNum || form.peopleNum < 0) {
uni.showToast({ title: '请输入正确的随行人数', icon: 'none' });
return;
}
if (!form.leaveTime) {
uni.showToast({ title: '请选择离开时间', icon: 'none' });
return;
}
checkTimeInterval();
if (!form.leaveTime) return; // 时间校验失败则终止提交
// 提交逻辑（替换为实际接口请求）
uni.showLoading({ title: '提交中...' });
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: activeTab === 'car' ? '邀请成功' : '二维码生成成功',
icon: 'success'
});
}, 1000);
};
// 重置表单
const resetForm = () => {
form.address = '';
form.name = '';
form.gender = '';
form.phone = '';
form.carNumber = '';
form.escortNum = '';
form.visitTime = '';
form.leaveTime = '';
form.carNumber = ['', '', '', '', '', '', '']; // 重置车牌号输入
};
</script>
<style scoped>
.visitor-invite {
background-color: #f5f5f5;
min-height: 100vh;
}
/* 导航栏 */
.nav-bar {
display: flex;
align-items: center;
padding: 20rpx;
background-color: #fff;
}
.nav-title {
font-size: 36rpx;
font-weight: 500;
margin-left: 20rpx;
}
/* 标签切换 */
.tab-wrap {
display: flex;
background-color: #fff;
border-bottom: 1rpx solid #eee;
}
.tab-item {
/* flex: 1; */
display: flex;
padding: 30rpx;
text-align: center;
font-size: 32rpx;
color: #333;
}
.tab-item.active {
color: #007aff;
/* border-bottom: 4rpx solid #007aff; */
}
/* 表单区域 */
.form-wrap {
padding: 10rpx;
}
.form-section {
background-color: #fff;
margin-bottom: 10rpx;
padding: 20rpx 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
.form-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.form-item:last-child {
border-bottom: none;
}
.label {
width: 200rpx;
font-size: 30rpx;
color: #333;
}
.required {
color: red;
margin-right: 4rpx;
}
.value {
flex: 1;
font-size: 30rpx;
color: #666;
display: flex;
justify-content: flex-end;
align-items: center;
}
.input {
flex: 1;
font-size: 30rpx;
color: #666;
text-align: right;
}
/* 车牌号输入 */
.car-number-wrap {
flex: 1;
display: flex;
justify-content: space-between;
}
.car-input {
width: 52rpx;
height: 60rpx;
border: 1rpx solid #eee;
text-align: center;
font-size: 30rpx;
}
/* 提示文字 */
.tips {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
text-align: center;
}
/* 底部按钮 */
.btn-wrap {
padding: 20rpx;
}
.submit-btn {
background-color: #007aff;
color: #fff;
font-size: 32rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 8rpx;
}
/* 弹窗样式 */
.modal-wrap {
background-color: #fff;
padding: 30rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
position: relative;
}
.modal-title {
font-size: 32rpx;
text-align: center;
margin-bottom: 30rpx;
}
.modal-close {
position: absolute;
top: 20rpx;
right: 20rpx;
color: #999;
}
.address-list, .gender-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.address-item, .gender-item {
padding: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
text-align: center;
font-size: 30rpx;
}
.address-item.active, .gender-item.active {
background-color: #007aff;
color: #fff;
}
</style>

172
property-uniapp-project/pageSubPack/visitor/visitor-detail.vue Normal file
View File

@@ -0,0 +1,172 @@
<template>
<view class="visitor-detail-page">
<!-- 访客信息卡片 -->
<view class="info-card">
<view class="info-header">
<text class="title">来访者：{{ visitorInfo.name }}</text>
<text class="status {{ visitorInfo.status === 'visited' ? 'visited' : 'waiting' }}">
{{ visitorInfo.status === 'visited' ? '已到访' : '等待来访' }}
</text>
</view>
<uni-divider margin="10rpx 0"></uni-divider>
<view class="info-list">
<view class="info-item">
<text class="label">来访地址：</text>
<text class="value">{{ visitorInfo.address }}</text>
</view>
<view class="info-item">
<text class="label">联系方式：</text>
<text class="value">{{ visitorInfo.phone }}</text>
</view>
<!-- 车牌号可选显示 -->
<view class="info-item" v-if="visitorInfo.carNumber">
<text class="label">车牌号：</text>
<text class="value">{{ visitorInfo.carNumber }}</text>
</view>
<view class="info-item">
<text class="label">随行人数：</text>
<text class="value">{{ visitorInfo.escortNum }}人</text>
</view>
<view class="info-item">
<text class="label">有效期：</text>
<text class="value">{{ visitorInfo.validTime }}</text>
</view>
<view class="info-item">
<text class="label">邀请时间：</text>
<text class="value">{{ visitorInfo.inviteTime }}</text>
</view>
<!-- 已到访状态显示到访时间 -->
<view class="info-item" v-if="visitorInfo.status === 'visited'">
<text class="label">到访时间：</text>
<text class="value">{{ visitorInfo.visitTime }}</text>
</view>
</view>
</view>
<!-- 提示文字 -->
<view class="tips-text">
<view>预计来访时间盒预计离开时间间隔不能超过24小时</view>
车辆停留请勿超出有效期，需及时驶出小区
</view>
<!-- 分享二维码按钮（仅等待来访状态显示） -->
<view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
<button class="share-btn" @click="goToQrcode">分享通行二维码</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
// 访客信息（实际项目中从接口获取）
// const visitorInfo = ref({})
const visitorInfo = ref({
name: '张三',
status: 'waiting', // waiting:等待来访，visited:已到访
address: '桂花园（别墅）2号楼2层',
phone: '13866666666',
carNumber: '京A88888', // 可传空隐藏
escortNum: 0,
validTime: '2023.06.30 10:00至2023.06.30 23:00',
inviteTime: '2023年06月30日 09:35',
visitTime: '2023年06月30日 14:32' // 已到访时显示
});
onLoad((option) =>{
const infoStr = decodeURIComponent(JSON.stringify(option))
// console.log('infoStr',infoStr)
visitorInfo.value = infoStr.item
})
// 跳转到二维码页面
const goToQrcode = () => {
uni.navigateTo({
url: '/pageSubPack/visitor/qrcode-page'
});
};
</script>
<style scoped>
.visitor-detail-page {
background-color: #f8f8f8;
min-height: 100vh;
}
.info-card {
background: #fff;
margin: 20rpx;
padding: 20rpx;
border-radius: 12rpx;
}
.info-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
}
.title {
font-size: 32rpx;
font-weight: 600;
}
.status {
font-size: 28rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx;
}
.waiting {
color: #007aff;
background: #e8f4ff;
}
.visited {
color: #34c759;
background: #e6fffa;
}
.info-list {
margin-top: 20rpx;
}
.info-item {
display: flex;
margin-bottom: 16rpx;
font-size: 28rpx;
}
.label {
color: #666;
width: 160rpx;
}
.value {
color: #333;
flex: 1;
}
.tips-text {
margin: 0 20rpx;
font-size: 24rpx;
color: #999;
line-height: 1.6;
}
.btn-wrap {
margin: 40rpx 20rpx;
}
.share-btn {
background-color: #007aff;
color: #fff;
border-radius: 8rpx;
height: 88rpx;
font-size: 32rpx;
}
</style>

336
property-uniapp-project/pageSubPack/visitor/visitor-list.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<view class="visitor-page">
<view class="status_bar"></view>
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-left" @tap="goBack">
<image src="http://47.104.199.163:9090/images/home/arr-left.png" style="width: 48rpx; height: 48rpx;"></image>
</view>
<view class="nav-title">访客邀请</view>
<view class="nav-right"></view>
</view>
<!-- 标签切换栏 -->
<view class="tab-bar">
<view
class="tab-item"
:class="{ active: activeTab === 'waiting' }"
@click="activeTab = 'waiting'"
>
等待来访
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'visited' }"
@click="activeTab = 'visited'"
>
已到访
</view>
</view>
<!-- 访客列表 -->
<scroll-view class="list-container" scroll-y>
<!-- 列表项：根据标签切换显示对应数据 -->
<view
class="visitor-item"
v-for="(item, index) in filterdList"
:key="index"
>
<!-- 访客基本信息 -->
<view class="item-header">
<text class="visitor-name" :class="item.status">来访者：{{ item.name }}</text>
<text class="status-tag" :class="item.status">{{ item.statusText }}</text>
</view>
<!-- 有效期/到访时间 -->
<view class="item-row">
<text class="label" :class="item.status">{{ item.status === 'waiting' ? '有效期' : '到访时间' }}：</text>
<text class="value" :class="item.status">{{ item.timeRange }}</text>
</view>
<!-- 联系方式 -->
<view class="item-row">
<text class="label" :class="item.status">联系方式：</text>
<text class="value" :class="item.status">{{ item.phone }}</text>
</view>
<!-- 车牌号 -->
<view class="item-row" v-if="item.carNumber">
<text class="label" :class="item.status">车牌号：</text>
<text class="value" :class="item.status">{{ item.carNumber }}</text>
</view>
<!-- 时间+查看详情 -->
<view class="item-footer">
<text class="time-text">时间：{{ item.createTime }}</text>
<view class="detail-btn" @click="viewDetail(item)">
<text>查看详情</text>
<uni-icons type="arrowright" size="14"></uni-icons>
</view>
</view>
</view>
</scroll-view>
<!-- 新增邀请按钮 -->
<view class="add-btn" @click="addInvitation">
<uni-icons type="plus" size="18" color="#fff"></uni-icons>
<text class="add-text">新增邀请</text>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
// import { uniNavigateTo, uniShowToast } from '@dcloudio/uni-app'
// 激活的标签（waiting=等待来访，visited=已到访）
const activeTab = ref('waiting')
// 模拟访客数据（可替换为接口请求数据）
const visitorList = ref([
{
name: '张三',
status: 'waiting', // waiting/visited
statusText: '等待来访',
timeRange: '2023.06.30 10:00至2023.06.30 23:00',
phone: '13866666666',
carNumber: '京A88888',
createTime: '2023年06月30日 09:35'
},
{
name: '张三',
status: 'visited',
statusText: '已到访',
timeRange: '2023.06.30 16:32:28',
phone: '13866666666',
carNumber: '京A88888',
createTime: '2023年06月30日 09:35'
},
{
name: '张三',
status: 'waiting',
statusText: '等待来访',
timeRange: '2023.06.30 10:00至2023.06.30 23:00',
phone: '13866666666',
carNumber: '',
createTime: '2023年06月30日 09:35'
}
])
// 根据标签筛选列表
const filterdList = computed(() => {
return visitorList.value.filter(item => item.status === activeTab.value)
})
// 返回上一页
const goBack = () => {
if(uni.getStorageSync('sourcePage') === "index"){
uni.switchTab({
url:"/pages/index/index"
})
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
uni.switchTab({
url:"/pages/serviceIndex/serviceIndex"
})
}
uni.removeStorageSync('sourcePage')
}
// 查看详情
const viewDetail = (item) => {
const itemStr = encodeURIComponent(JSON.stringify(item))
console.log('eeeee',itemStr)
uni.navigateTo({
url: `/pageSubPack/visitor/visitor-detail?item=${itemStr}` // 传参到详情页
})
}
// 新增邀请
const addInvitation = () => {
uni.navigateTo({
url: '/pageSubPack/visitor/visitor-add'
})
}
</script>
<style scoped>
/* 页面整体样式 */
.visitor-page {
background: linear-gradient(to bottom left, #E2F0FF 0%, #f9f9f9 50%);
min-height: 100vh;
padding: 0 40rpx;
}
.status_bar {
height: 32px;
width: 100%;
}
/* 顶部导航栏 */
.nav-bar {
height: 90rpx;
display: flex;
align-items: center;
/* padding: 0 30rpx; */
color: #fff;
position: sticky;
top: 44px;
z-index: 100;
margin-bottom: 20px;
}
.nav-left {
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 32rpx;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 20rpx;
color: #000;
}
.nav-right {
width: 60rpx;
}
/* 标签切换栏 */
.tab-bar {
display: flex;
}
.tab-item {
/* flex: 1; */
display: flex;
text-align: left;
padding: 20px 40px 0px 0px;
font-size: 16px;
color: #666;
position: relative;
}
.tab-item.active {
color: #007aff;
font-weight: 500;
}
/* 激活标签下划线 */
.tab-item.active::after {
content: '';
position: absolute;
bottom: -7px;
left: 33%;
transform: translateX(-50%);
width: 64px;
height: 4px;
border-radius: 6rpx;
background-color: #2F77FD;
/* background-color: linear-gradient(to bottom, #2F77FD, #CEDFFF); */
}
/* 列表容器 */
.list-container {
height: calc(100vh - 150px); /* 预留导航、标签、按钮高度 */
}
/* 访客列表项 */
.visitor-item {
background-color: #fff;
margin: 25px 0px;
padding: 15px;
border-radius: 8px;
}
/* 列表项头部（姓名+状态） */
.item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.visitor-name {
font-size: 16px;
color: #333;
font-weight: 500;
}
.visitor-name.visited{
color: #999;
}
.status-tag {
font-size: 14px;
padding: 2px 8px;
border-radius: 12px;
}
.status-tag.waiting {
color: #2F77FD;
/* background-color: #fff8e6; */
}
.status-tag.visited {
color: #999999;
/* background-color: #e6fffa; */
}
/* 列表项行数据 */
.item-row {
display: flex;
margin-bottom: 8px;
font-size: 14px;
}
.label {
color: #222;
min-width: 80px;
}
.value {
color: #333;
flex: 1;
}
.label.visited{
color: #999;
}
.value.visited{
color: #999;
}
/* 列表项底部（时间+查看详情） */
.item-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f5f5f5;
}
.time-text {
font-size: 12px;
color: #666;
}
.detail-btn {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
}
/* 新增邀请按钮 */
.add-btn {
position: fixed;
bottom: 20px;
left: 15px;
right: 15px;
height: 44px;
line-height: 44px;
background-color: #007aff;
color: #fff;
border-radius: 8px;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.add-text {
margin-left: 5px;
}
</style>