6 changed files with 241 additions and 39 deletions
-
11src/assets/scss/global.scss
-
4src/router/index.js
-
10src/views/common/login.vue
-
42src/views/main.vue
-
188src/views/modules/recv/po-recv.vue
-
7src/views/modules/recv/recv.vue
@ -0,0 +1,188 @@ |
|||
|
|||
<template> |
|||
<div class="pda-container"> |
|||
<!-- 状态栏 --> |
|||
<div class="status-bar"> |
|||
<div class="time">{{ currentTime }}</div> |
|||
<div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div> |
|||
</div> |
|||
|
|||
<!-- 可滚动按钮区 --> |
|||
<div class="button-scroll-container"> |
|||
<div class="button-grid"> |
|||
<button |
|||
v-for="(btn, index) in buttons" |
|||
:key="index" |
|||
class="pda-button" |
|||
:style="{ |
|||
'background': btn.color, |
|||
'transform': activeIndex === index ? 'scale(0.95)' : 'none' |
|||
}" |
|||
@touchstart.passive="setActive(index)" |
|||
@touchend.passive="clearActive()" |
|||
@touchcancel.passive="clearActive()"> |
|||
<router-link class="pda-button" :style="{ |
|||
'background': ';#4CAF50',}" :to="btn.to"> |
|||
<span class="button-icon">{{ btn.icon }}</span> |
|||
<span class="button-label">{{ btn.label }}</span> |
|||
</router-link> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentTime: new Date().toTimeString().substr(0, 5), |
|||
batteryLevel: 78, |
|||
activeIndex: null, |
|||
buttons: [ |
|||
{ icon: '📦', label: '采购订单接收', color: '#FF9800', action: 'stockIn',to:'recv' }, |
|||
{ icon: '📄', label: '登记检验结果', color: '#2196F3', action: 'stockOut',to:'recv' }, |
|||
{ icon: '✅', label: '检验合格入库', color: '#4CAF50', action: 'search' ,to:'recv' }, |
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.updateTime(); |
|||
window.addEventListener('resize', this.adjustLayout); |
|||
this.$nextTick(this.adjustLayout); |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.timeInterval); |
|||
window.removeEventListener('resize', this.adjustLayout); |
|||
}, |
|||
methods: { |
|||
updateTime() { |
|||
this.timeInterval = setInterval(() => { |
|||
this.currentTime = new Date().toTimeString().substr(0, 5); |
|||
}, 60000); |
|||
}, |
|||
adjustLayout() { |
|||
const container = document.querySelector('.button-grid'); |
|||
if (container) { |
|||
const width = container.clientWidth; |
|||
const columns = Math.max(3, Math.floor(width / 120)); |
|||
document.documentElement.style.setProperty('--columns', columns); |
|||
} |
|||
}, |
|||
handleClick(action) { |
|||
console.log('执行操作:', action); |
|||
}, |
|||
setActive(index) { |
|||
this.activeIndex = index; |
|||
}, |
|||
clearActive() { |
|||
this.activeIndex = null; |
|||
}, |
|||
// 退出 |
|||
logoutHandle() { |
|||
this.$confirm('确定进行[退出]操作?', '提示', { |
|||
confirmButtonText: '确认', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$http({ |
|||
url: this.$http.adornUrl('/sys/logout'), |
|||
method: 'post', |
|||
data: this.$http.adornData() |
|||
}).then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
//clearLoginInfo() |
|||
this.$router.push({name: 'login'}) |
|||
} |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
:root { |
|||
--columns: 4; |
|||
--button-size: calc(100vw / var(--columns) - 20px); |
|||
} |
|||
|
|||
.pda-container { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f5f5f5; |
|||
font-family: 'Arial', sans-serif; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
.button-scroll-container { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 10px; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
.button-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(var(--button-size), 1fr)); |
|||
gap: 14px; |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
.pda-button { |
|||
position: relative; |
|||
width: 100%; |
|||
aspect-ratio: 1; |
|||
border: none; |
|||
border-radius: 12px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
transition: transform 0.1s ease; |
|||
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
} |
|||
|
|||
.button-icon { |
|||
font-size: 28px; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.button-label { |
|||
font-size: 18px; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.button-badge { |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
background: #ff4757; |
|||
color: white; |
|||
width: 18px; |
|||
height: 18px; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 10px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@media (max-width: 480px) { |
|||
.button-icon { |
|||
font-size: 30px; |
|||
} |
|||
.button-label { |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue