6 changed files with 241 additions and 39 deletions
-
11src/assets/scss/global.scss
-
4src/router/index.js
-
10src/views/common/login.vue
-
60src/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