砂糖
a24e369ebb
1. 新增钢卷详情、扫码页面与设备巡检组件 2. 调整首页跳转逻辑至扫码页面，更新tabBar配置 3. 隐藏旧的分条、其他操作模块，替换钢卷详情弹窗为页面跳转 4. 复用巡检组件到扫码页面与设备巡检页
105 lines
1.8 KiB
Vue
105 lines
1.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- Tab 切换栏 -->
|
|
<view class="tabs-bar">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ 'tab-active': currentTab === 'coil' }"
|
|
@click="currentTab = 'coil'"
|
|
>
|
|
<text class="tab-text">钢卷操作</text>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ 'tab-active': currentTab === 'inspect' }"
|
|
@click="currentTab = 'inspect'"
|
|
>
|
|
<text class="tab-text">设备巡检</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tab 内容 -->
|
|
<view class="tab-content">
|
|
<view v-show="currentTab === 'coil'" class="tab-panel">
|
|
<scan-coil ref="scanCoil" />
|
|
</view>
|
|
<view v-show="currentTab === 'inspect'" class="tab-panel">
|
|
<scan-inspect ref="scanInspect" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ScanCoil from '@/components/scan-coil/scan-coil.vue'
|
|
import ScanInspect from '@/components/scan-inspect/scan-inspect.vue'
|
|
|
|
export default {
|
|
components: { ScanCoil, ScanInspect },
|
|
data() {
|
|
return {
|
|
currentTab: 'coil'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// ========== Tab 栏 ==========
|
|
.tabs-bar {
|
|
display: flex;
|
|
background: #fff;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 24rpx 0;
|
|
position: relative;
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
&.tab-active {
|
|
.tab-text {
|
|
color: #1a73e8;
|
|
font-weight: 600;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 20%;
|
|
right: 20%;
|
|
height: 4rpx;
|
|
background: #1a73e8;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ========== Tab 内容 ==========
|
|
.tab-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-panel {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 15rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |