by/SmartParks_visitore
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面调整

Browse Source
This commit is contained in:
merak1237
2025-08-26 16:07:25 +08:00
parent f259275adb
commit 0e673b853d
6 changed files with 1278 additions and 1241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
pages/sys/login/index.vue
View File

@@ -2,19 +2,18 @@
<view class="login-container">
<!-- 顶部渐变背景和标题 -->
<view class="login-header">
<image class="login-bg-img" src="/static/ic_login_topbg.png" mode="widthFix" />
<view class="login-title">登录注册</view>
<view class="login-subtitle">欢迎使用数智南川</view>
</view>
<!-- 表单区域 -->
<view class="login-form">
<view class="input-row">
<image class="iconfont" src="/static/ic_login_phone.png" />
<image class="iconfont" src="/static/aidex/login/ic_login_user.png" />
<input class="login-input" type="text" placeholder="输入账号" v-model="username" />
</view>
<view class="input-row">
<image class="iconfont2" src="/static/ic_login_code.png" />
<input class="login-input" type="text" v-model="password" placeholder="请输入密码" />
<image class="iconfont2" src="/static/aidex/login/ic_login_pwd.png" />
<input class="login-input" type="password" v-model="password" placeholder="请输入密码" />
</view>
<view class="protocol-row">
<label class="custom-checkbox-label">
@@ -185,168 +184,186 @@
</script>
<style scoped>
.login-container {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
min-height: 100vh;
background: #fafbfc;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px;
}
.login-container {
width: 100%;
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(46, 108, 246, 0.15);
transition: all 0.3s ease;
}
/* 响应式调整 */
@media (max-width: 600px) {
.login-container {
border-radius: 16px;
max-width: 90%;
}
}
@media (max-width: 400px) {
.login-container {
max-width: 95%;
}
}
.login-header {
width: 100%;
position: relative;
height: 35vh;
min-height: 30vh;
max-height: 35vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
color: white;
padding: 20px;
}
.login-bg-img {
.login-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 0;
height: 100%;
background: linear-gradient(135deg, #2e6cf9 0%, #4fc3f7 100%);
z-index: 1;
border-radius: 24px 24px 0 0;
}
.login-title,
.login-subtitle {
.login-title, .login-subtitle {
position: relative;
top: 164rpx;
z-index: 2;
text-align: center;
}
.login-title {
color: #fff;
font-size: 48rpx;
font-weight: bold;
margin-top: 40rpx;
font-size: clamp(28px, 5vw, 36px);
font-weight: 700;
margin-bottom: 8px;
}
.login-subtitle {
color: #fff;
font-size: 24rpx;
margin-top: 10rpx;
font-size: clamp(14px, 3vw, 18px);
font-weight: 400;
opacity: 0.9;
}
.login-form {
width: 80%;
margin-top: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
background: white;
padding: clamp(20px, 5vw, 30px);
border-radius: 0 0 24px 24px;
position: relative;
z-index: 10;
}
.input-row {
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
margin-bottom: 30rpx;
padding-bottom: 10rpx;
border-bottom: 1px solid #eaeaea;
margin-bottom: clamp(15px, 4vw, 25px);
padding-bottom: 10px;
}
.iconfont {
font-size: 32rpx;
margin-right: 16rpx;
width: 27rpx;
height: 43rpx;
.input-row:focus-within {
border-bottom-color: #2e6cf6;
}
.iconfont2 {
font-size: 32rpx;
margin-right: 16rpx;
width: 31rpx;
height: 35rpx;
.iconfont, .iconfont2 {
width: clamp(20px, 4vw, 24px);
height: clamp(20px, 4vw, 24px);
margin-right: 12px;
flex-shrink: 0;
}
.login-input {
flex: 1;
border: none;
background: transparent;
font-size: 28rpx;
padding: 10rpx 0;
margin-right: 10rpx;
outline: none;
font-size: clamp(14px, 4vw, 16px);
color: #333;
min-width: 0; /* 防止flex项目溢出 */
}
.code-btn {
background: none;
color: #2e6cf6;
border: none;
font-size: 26rpx;
padding: 0 10rpx;
.login-input::placeholder {
color: #aaa;
}
.protocol-row {
width: 100%;
display: flex;
align-items: center;
margin: 20rpx 0 40rpx 0;
font-size: 24rpx;
}
.protocol-checkbox {
margin-right: 8rpx;
}
.protocol-link {
color: #2e6cf6;
margin: 0 4rpx;
}
.login-btn {
width: 100%;
height: 80rpx;
background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
color: #fff;
font-size: 32rpx;
border: none;
border-radius: 40rpx;
margin-top: 268rpx;
margin: clamp(15px, 4vw, 20px) 0 clamp(20px, 5vw, 30px);
font-size: clamp(12px, 3vw, 14px);
color: #666;
flex-wrap: wrap;
}
.custom-checkbox-label {
display: flex;
align-items: center;
margin-right: 8rpx;
margin-right: 6px;
cursor: pointer;
flex-shrink: 0;
}
.custom-checkbox-input {
display: none;
}
.custom-checkbox-span {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
border: 2rpx solid #2e6cf6;
background: #fff;
display: inline-block;
position: relative;
transition: border-color 0.2s;
}
.custom-checkbox-span.checked {
background: #2e6cf6;
border-color: #2e6cf6;
}
.custom-checkbox-span.checked::after {
content: '';
position: absolute;
left: 7rpx;
top: 7rpx;
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
}
.custom-checkbox-img {
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
width: clamp(18px, 4vw, 20px);
height: clamp(18px, 4vw, 20px);
margin-right: 6px;
cursor: pointer;
flex-shrink: 0;
}
.protocol-link {
color: #2e6cf6;
margin: 0 2px;
cursor: pointer;
white-space: nowrap;
}
.login-btn {
width: 100%;
height: clamp(45px, 10vw, 50px);
background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
color: white;
border: none;
border-radius: clamp(20px, 8vw, 25px);
font-size: clamp(14px, 4vw, 16px);
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(46, 108, 246, 0.3);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(46, 108, 246, 0.4);
}
.login-btn:active {
transform: translateY(0);
}
</style>

71
pages/sys/qrpage/qrpage.vue
View File

@@ -13,17 +13,22 @@
<!-- 主内容区 -->
<view class="main-content">
<!-- 状态提示 -->
<view class="status-indicator" :class="qrCodeStatus">
<text class="status-text">{{ getStatusText() }}</text>
</view>
<!-- 二维码容器 -->
<view class="qr-container">
<view class="qr-card">
<view class="qr-wrapper" :class="{ 'fade-out': isClosing, 'fade-in': isGenerating }">
<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx"></uv-qrcode>
<!-- 状态提示 -->
<view class="status-indicator" :class="qrCodeStatus">
<text class="status-text">{{ getStatusText() }}</text>
</view>
<view class="qr-wrapper" :class="{ 'fade-out': isClosing, 'fade-in': isGenerating }">
<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="500rpx"></uv-qrcode>
</view>
<button class="action-btn primary" @click="manualRefresh" :disabled="isLoading">
<i class="fa fa-refresh" :class="{ 'fa-spin': isLoading }"></i>
<text class="btn-text">刷新二维码</text>
</button>
<view class="qr-expiry" v-if="qrCodeStatus === 'active'">
<text>有效时长: {{ formatCountdown(remainingTime) }}</text>
</view>
@@ -58,10 +63,7 @@
<!-- 底部操作区 -->
<view class="bottom-bar">
<button class="action-btn primary" @click="manualRefresh" :disabled="isLoading">
<i class="fa fa-refresh" :class="{ 'fa-spin': isLoading }"></i>
<text class="btn-text">刷新二维码</text>
</button>
<!-- <button class="action-btn secondary" @click="resetConnection" :disabled="isLoading">
<i class="fa fa-sync-alt"></i>
<text class="btn-text">重置连接</text>
@@ -99,8 +101,8 @@
},
value: '12345', // 二维码内容
qrCodeTimestamp: 0, // 生成时间戳
expiryTime: 300000, // 5分钟有效期(ms)
remainingTime: 300000,
expiryTime: 600000, // 10分钟有效期(ms)
remainingTime: 600000,
countdownInterval: null,
// 状态管理
@@ -113,7 +115,6 @@
clientId: "dab457a1ea14411787c240db05bb0832",
// 弹窗相关
showPopup: false,
popupMessage: '',
@@ -253,7 +254,6 @@
this.isLoading = true;
this.qrCodeStatus = 'generating';
this.isGenerating = true;
// 调用接口生成二维码
this.$u.api.getcode(this.info)
.then(res => {
@@ -261,11 +261,11 @@
this.qrCodeId = res.msg;
this.value = "http://183.230.235.66:11010/visitore?code=" + res.msg; // 更新二维码内容
this.qrCodeTimestamp = Date.now(); // 记录生成时间
// this.remainingTime = this.expiryTime; // 重置倒计时
this.remainingTime = this.expiryTime; // 重置倒计时
// 更新状态
this.qrCodeStatus = 'active';
// this.startCountdown(); // 启动倒计时
this.startCountdown(); // 启动倒计时
})
.catch(err => {
console.error("二维码生成失败", err);
@@ -281,28 +281,27 @@
/**
* 启动倒计时
*/
// startCountdown() {
// this.clearCountdown(); // 先清除现有定时器
startCountdown() {
this.clearCountdown(); // 先清除现有定时器
this.countdownInterval = setInterval(() => {
this.remainingTime -= 1000;
// this.countdownInterval = setInterval(() => {
// this.remainingTime -= 1000;
// if (this.remainingTime <= 0) {
// this.showPopupMessage('二维码已过期，正在生成新码', 'warning', 'fa-exclamation-triangle');
// this.closeCurrentQrCode();
// }
// }, 1000);
// },
if (this.remainingTime <= 0) {
this.showPopupMessage('二维码已过期，正在生成新码', 'warning', 'fa-exclamation-triangle');
this.closeCurrentQrCode();
}
}, 1000);
},
/**
* 清除倒计时
*/
// clearCountdown() {
// if (this.countdownInterval) {
// clearInterval(this.countdownInterval);
// this.countdownInterval = null;
// }
// },
clearCountdown() {
if (this.countdownInterval) {
clearInterval(this.countdownInterval);
this.countdownInterval = null;
}
},
/**
* 关闭当前二维码并生成新的
@@ -312,7 +311,7 @@
this.qrCodeStatus = 'closing';
this.isClosing = true;
// this.clearCountdown(); // 停止倒计时
this.clearCountdown(); // 停止倒计时
console.log(`关闭二维码: ${this.info.qrCodeId}`);
@@ -515,6 +514,7 @@
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
@@ -555,7 +555,7 @@
.qr-container {
margin-bottom: 28px;
width: 100%;
max-width: 360px;
max-width: 300px;
}
.qr-card {
@@ -712,6 +712,7 @@
font-size: 16px;
border: none;
font-weight: 500;
height: 50px;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

44
pages/sys/user/index.vue
View File

@@ -7,31 +7,31 @@
<u-avatar size="100" src="/static/aidex/images/user01.png"></u-avatar>
</view>
<view class="info" style="display: flex;justify-content: space-between;">
<view>
<view class="username">管理员</view>
<view class="usercode">普通会员</view>
</view>
<!-- <view>-->
<!-- <view class="username">管理员</view>-->
<!-- <view class="usercode">普通会员</view>-->
<!-- </view>-->
<view class="sign-in-images"><image src="/static/aidex/images/sign-in.png"></image></view>
</view>
</view>
<u-row class="userinfo-topbox" gutter="16" justify="center">
<u-col span="4" text-align="center">
<view class="number">9,999<em>元</em></view>
<view>余额</view>
</u-col>
<u-col span="4" text-align="center" @click="navTo('/pages/sys/application/recharge')">
<view><u-icon size="28px" color="#ffffff" name="rmb-circle"></u-icon></view>
<view>充值</view>
</u-col>
<u-col span="4" text-align="center" @click="navTo('/pages/sys/application/balance-details')">
<view>
<view class="iconfont icon-faan" style="font-size: 24px;color:#ffffff;"></view>
<!-- <u-row class="userinfo-topbox" gutter="16" justify="center">-->
<!-- <u-col span="4" text-align="center">-->
<!-- <view class="number">9,999<em>元</em></view>-->
<!-- <view>余额</view>-->
<!-- </u-col>-->
<!-- <u-col span="4" text-align="center" @click="navTo('/pages/sys/application/recharge')">-->
<!-- <view><u-icon size="28px" color="#ffffff" name="rmb-circle"></u-icon></view>-->
<!-- <view>充值</view>-->
<!-- </u-col>-->
<!-- <u-col span="4" text-align="center" @click="navTo('/pages/sys/application/balance-details')">-->
<!-- <view>-->
<!-- <view class="iconfont icon-faan" style="font-size: 24px;color:#ffffff;"></view>-->
<!-- </view>-->
<!-- <view>余额明细</view>-->
<!-- </u-col>-->
<!-- </u-row>-->
</view>
<view>余额明细</view>
</u-col>
</u-row>
</view>
<view class="list">
<!-- <view class="list">
<view>
<u-cell-group class="personal-list">
<u-gap height="20" bg-color="#f5f5f5"></u-gap>
@@ -45,7 +45,7 @@
<u-cell-item icon="setting" :iconStyle="{ color: '#2767dc' }" title="系统设置" @click="navTo('setting')"></u-cell-item>
</u-cell-group>
</view>
</view>
</view> -->
<view class="button-wrapper">
<button class="logout-btn" @click="logout">退出登录</button>
</view>

37
pages/sys/work/work.vue
View File

@@ -5,11 +5,11 @@
<input v-model="searchParams.visitorName" class="search-input" placeholder="访客姓名"/>
<input v-model="searchParams.visitedPerson" class="search-input" placeholder="被访人"/>
<input v-model="searchParams.visitedUnit" class="search-input" placeholder="被访单位"/>
<picker mode="selector" :range="statusOptions" @change="onStatusChange">
<!-- <picker mode="selector" :range="statusOptions" @change="onStatusChange">
<view class="picker-view">
{{ searchParams.bookStatus || '预约状态' }}
</view>
</picker>
</picker> -->
<input v-model="searchParams.phoneSuffix" class="search-input" placeholder="手机号后四位"/>
<button class="search-btn" @click="handleSearch">搜索</button>
<button class="reset-btn" @click="handleReset">重置</button>
@@ -27,10 +27,10 @@
<view class="table-cell">被访单位</view>
<view class="table-cell">拜访事由</view>
<view class="table-cell">拜访时间</view>
<view class="table-cell">是否预约车位</view>
<view class="table-cell">预约状态</view>
<!-- <view class="table-cell">是否预约车位</view>
<view class="table-cell">预约状态</view> -->
<view class="table-cell">提交时间</view>
<view class="table-cell">操作</view>
<!-- <view class="table-cell">操作</view> -->
</view>
<view v-for="(item, index) in filteredList" :key="index" class="table-row">
<view class="table-cell">{{ index + 1 }}</view>
@@ -42,15 +42,15 @@
<view class="table-cell">{{ item.interviewedUnit || '无' }}</view>
<view class="table-cell">{{ item.visitingReason }}</view>
<view class="table-cell">{{ item.visitingBeginTime }}</view>
<view class="table-cell">{{ item.bookingParkingSpace === 1 ? '是' : '否' }}</view>
<!-- <view class="table-cell">{{ item.bookingParkingSpace === 1 ? '是' : '否' }}</view>
<view class="table-cell" :class="{'status-confirm': item.serveStatus === 1, 'status-wait': item.serveStatus === 0}">
{{ item.serveStatus === 1 ? '已确认' : '待确认' }}
</view>
</view> -->
<view class="table-cell">{{ item.createTime }}</view>
<view class="table-cell operation-cell">
<!-- <view class="table-cell operation-cell">
<button class="operation-btn" @click="handleDetail(item)">详情</button>
<button class="operation-btn" @click="handleAudit(item)">确认</button>
</view>
</view> -->
</view>
</view>
<VisitorDetailModal
@@ -65,6 +65,7 @@
<script>
import VisitorDetailModal from '@/components/VisitorDetailModal.vue';
export default {
components: {
VisitorDetailModal
@@ -169,12 +170,14 @@ export default {
.container {
padding: 10px;
}
.search-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.search-input {
flex: 1;
min-width: 120px;
@@ -182,6 +185,7 @@ export default {
border: 1px solid #ddd;
border-radius: 4px;
}
.picker-view {
padding: 8px;
border: 1px solid #ddd;
@@ -189,34 +193,44 @@ export default {
min-width: 120px;
text-align: center;
}
.search-btn,
.reset-btn {
padding: 8px 15px;
border-radius: 4px;
color: #fff;
height: 40px;
text-align: center;
line-height: 24px;
}
.search-btn {
background-color: #007aff;
border: none;
}
.reset-btn {
background-color: #f0f0f0;
color: #333;
border: none;
}
.table-wrap {
overflow-x: auto;
}
.table-header,
.table-row {
display: flex;
flex-direction: row;
border: 1px solid #eee;
}
.table-header {
background-color: #f8f8f8;
font-weight: bold;
}
.table-cell {
flex: 1;
text-align: center;
@@ -226,22 +240,27 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.table-cell:last-child {
border-right: none;
}
.operation-cell {
display: flex;
justify-content: space-around;
flex: 2;
}
.operation-btn {
margin: 0 5px;
padding: 5px 10px;
font-size: 12px;
}
.status-confirm {
color: #52c41a;
}
.status-wait {
color: #fa8c16;
}

BIN
static/aidex/login/ic_login_pwd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/aidex/login/ic_login_user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB