DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app的ui修改

Browse Source
This commit is contained in:
86156
2025-10-29 15:38:20 +08:00
parent 76c98b8ede
commit 181309e553
14 changed files with 667 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/hand-factory/components/klp-collapse-panel/klp-collapse-panel.vue
View File

@@ -86,7 +86,7 @@ export default {
justify-content: space-between;
align-items: center;
padding: 24rpx;
background-color: #2bf;
background-color: #1a73e8;
color: white;
transition: background-color 0.2s;

83
apps/hand-factory/components/klp-product-statistic/klp-product-statistic.vue
View File

@@ -86,7 +86,7 @@
:autoplay="false"
:circular="false"
:indicator-dots="true"
indicator-active-color="#2bf"
indicator-active-color="#1a73e8"
indicator-color="#e5e5e5"
>
<swiper-item v-for="(item, index) in chanLiangChartConfig" :key="index">
@@ -108,7 +108,7 @@
:autoplay="false"
:circular="false"
:indicator-dots="true"
indicator-active-color="#2bf"
indicator-active-color="#1a73e8"
indicator-color="#e5e5e5"
>
<swiper-item v-for="(item, index) in summaryChartConfig" :key="index">
@@ -372,37 +372,57 @@ export default {
<style scoped>
.container {
/* padding: 20rpx; */
padding: 20rpx;
}
/* 简洁Tab容器 */
.tab-container {
display: flex;
box-sizing: border-box;
padding: 20rpx 0;
justify-content: space-evenly;
background-color: #2bf; /* 修正原代码笔误（2bf → #2bf） */
margin-bottom: 30rpx;
background: #fff;
margin-bottom: 20rpx;
border-radius: 12rpx;
overflow: hidden;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 20rpx;
color: white;
transition: all 0.3s;
border: 2rpx solid transparent;
padding: 24rpx 20rpx;
color: #666;
font-size: 28rpx;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
&:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1rpx;
height: 40rpx;
background: #e8e8e8;
}
}
.tab-item.active {
color: white;
border-color: white;
border-radius: 20rpx;
color: #fff;
background: #1a73e8;
font-weight: 600;
}
/* 日期选择器 */
.date-picker {
padding: 15rpx;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.date-range {
@@ -415,28 +435,31 @@ export default {
}
.picker-text {
padding: 15rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
color: #666;
padding: 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
color: #333;
font-size: 28rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
/* 图表轮播容器样式 */
/* 图表容器 */
.chart-container {
margin: 30rpx 0;
margin-bottom: 20rpx;
background: #fff;
border-radius: 16rpx;
padding: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
padding: 30rpx;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.chart-swiper {
height: 500rpx;
box-sizing: border-box;
}
/* 图表项标题样式（原代码未生效，保留备用） */
.chart-item-title {
font-weight: 900;
}
</style>

64
apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue
View File

@@ -387,34 +387,55 @@ export default {
</script>
<style scoped>
/* 简洁Tab容器 */
.tab-container {
display: flex;
box-sizing: border-box;
padding: 20rpx 0;
justify-content: space-evenly;
background-color: #2bf; /* 原代码笔误“2bf”，修正为“#2bf” */
margin-bottom: 30rpx;
background: #fff;
margin: 20rpx;
margin-bottom: 20rpx;
border-radius: 12rpx;
overflow: hidden;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 20rpx;
color: white;
transition: all 0.3s;
border: 2rpx solid transparent;
padding: 24rpx 20rpx;
color: #666;
font-size: 28rpx;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
&:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1rpx;
height: 40rpx;
background: #e8e8e8;
}
}
.tab-item.active {
color: white;
border-color: white;
border-radius: 20rpx;
color: #fff;
background: #1a73e8;
font-weight: 600;
}
/* 日期选择器 */
.date-picker {
padding: 15rpx;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin: 0 20rpx 20rpx;
background: #fff;
border-radius: 12rpx;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.date-range {
@@ -427,9 +448,16 @@ export default {
}
.picker-text {
padding: 15rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
color: #666;
padding: 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
color: #333;
font-size: 28rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
</style>

46
apps/hand-factory/components/klp-team-performance/klp-team-performance.vue
View File

@@ -141,6 +141,7 @@ export default {
</script>
<style scoped>
/* 月份选择器 */
.month-picker {
padding: 20rpx;
}
@@ -148,10 +149,11 @@ export default {
.picker-content {
display: flex;
align-items: center;
padding: 20rpx;
background-color: #f8f8f8;
border-radius: 8rpx;
border: 1rpx solid #eee;
padding: 24rpx 20rpx;
background: #fff;
border-radius: 12rpx;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.month-display {
@@ -162,20 +164,22 @@ export default {
}
.arrow {
padding: 0 20rpx;
font-size: 28rpx;
color: #2bf;
padding: 0 24rpx;
font-size: 32rpx;
color: #1a73e8;
cursor: pointer;
transition: opacity 0.3s;
}
.arrow:active {
opacity: 0.7;
}
.arrow.disabled {
color: #ccc;
pointer-events: none;
transition: all 0.2s ease;
font-weight: 600;
&:active {
opacity: 0.7;
transform: scale(0.9);
}
&.disabled {
color: #ccc;
pointer-events: none;
}
}
.label {
@@ -184,15 +188,15 @@ export default {
}
.month-text {
color: #333;
font-weight: bold;
margin: 0 15rpx;
color: #1a73e8;
font-weight: 600;
font-size: 30rpx;
margin: 0 20rpx;
}
.icon {
color: #999;
font-size: 24rpx;
transform: scale(0.8);
margin-left: 20rpx;
}
</style>

28
apps/hand-factory/components/klp-ui/k-collapse-panel/k-collapse-panel.vue
View File

@@ -74,29 +74,33 @@ export default {
</script>
<style lang="scss" scoped>
/* 简洁折叠面板 */
.collapse-panel {
margin: 16rpx 0;
border-radius: 8rpx;
border-radius: 16rpx;
overflow: hidden;
border: 1rpx solid #eee;
background: #ffffff;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid #e8e8e8;
transition: all 0.3s ease;
.collapse-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
background-color: #2bf;
padding: 24rpx 30rpx;
background: #1a73e8;
color: white;
transition: background-color 0.2s;
transition: all 0.2s ease;
&:active {
background-color: #f1f3f5;
opacity: 0.9;
}
.title {
font-size: 32rpx;
font-weight: 500;
color: white;
font-weight: 600;
color: #ffffff;
display: flex;
align-items: center;
gap: 12rpx;
@@ -116,6 +120,9 @@ export default {
.arrow {
transition: transform 0.3s ease;
color: white;
display: flex;
align-items: center;
justify-content: center;
&-open {
transform: rotate(90deg);
@@ -125,10 +132,9 @@ export default {
.collapse-content {
overflow: hidden;
padding: 0 24rpx;
background-color: #fff;
padding: 0;
background: #fff;
// 展开动画
&-enter-active,
&-leave-active {
transition: all 0.3s ease;

47
apps/hand-factory/components/klp-ui/k-info-card/k-info-card.vue
View File

@@ -56,62 +56,83 @@ export default {
</script>
<style scoped>
/* 卡片容器 */
/* 简洁信息卡片容器 */
.card-container {
overflow: hidden;
background: #fff;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
background: #ffffff;
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}
}
/* 头部样式 */
/* 简洁头部样式 */
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
padding: 24rpx 30rpx;
background: #1a73e8;
}
.header-title {
font-size: 32rpx;
color: #333;
color: #ffffff;
font-weight: 600;
}
.header-value {
font-size: 36rpx;
color: #2a7ae9;
font-weight: 500;
color: #ffffff;
font-weight: 700;
}
/* 信息容器 */
.info-container {
padding: 20rpx;
padding: 30rpx;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
justify-content: space-between;
gap: 20rpx;
background: #fff;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 24rpx;
margin-bottom: 20rpx;
}
/* 信息项 */
.info-item {
display: flex;
align-items: baseline;
flex: 0 0 calc(50% - 10rpx);
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all;
}

28
apps/hand-factory/components/klp-ui/k-metric-card/k-metric-card.vue
View File

@@ -27,42 +27,54 @@ export default {
</script>
<style scoped>
/* 简洁指标卡片容器 */
.metric-container {
display: grid;
gap: 20rpx;
padding: 20rpx;
padding: 30rpx;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
background: #fff;
}
/* 单个指标项 */
.metric-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20rpx;
padding: 30rpx 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
/* 指标数值 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
color: #1a73e8;
}
/* 单位 */
.metric-unit {
font-size: 0.7em;
color: #999;
margin-left: 8rpx;
}
/* 指标标签 */
.metric-label {
font-size: 28rpx;
font-size: 26rpx;
color: #666;
letter-spacing: 2rpx;
letter-spacing: 1rpx;
text-align: center;
line-height: 1.4;
line-height: 1.5;
}
</style>

124
apps/hand-factory/components/lines/acidity.vue
View File

@@ -1,13 +1,17 @@
<template>
<view>
<view class="tab">
<!-- <uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox> -->
<head-tabs-vue v-model="currentTab" />
<!-- 简洁标签栏 -->
<view class="tab-container">
<view
v-for="item in tabData"
:key="item.value"
@click="currentTab = item.value"
class="tab-item"
:class="{ 'tab-active': currentTab === item.value }"
>
<text class="tab-label">{{ item.text }}</text>
<view class="tab-indicator" v-if="currentTab === item.value"></view>
</view>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
@@ -105,6 +109,12 @@ export default {
data() {
return {
currentTab: 1,
tabData: [
{ text: "实时监控", value: 1 },
{ text: "生产统计", value: 2 },
{ text: "停机统计", value: 3 },
{ text: "班组绩效", value: 4 }
],
chartData: {},
webStatus: [
{ label: '网络状态', value: '正常' },
@@ -215,26 +225,60 @@ export default {
</script>
<style scoped lang="scss">
view-scroll {
gap: 30rpx;
}
.tab {
margin: auto;
/* 简洁标签栏 */
.tab-container {
display: flex;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 30rpx 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 88rpx;
z-index: 999;
background-color: #fff;
transition: all 0.3s ease;
.tab-label {
font-size: 28rpx;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
}
&.tab-active {
.tab-label {
color: #1a73e8;
font-weight: 600;
}
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background: #1a73e8;
border-radius: 2rpx;
}
}
/* 内容卡片 */
.content-card {
background-color: white;
background: #fff;
margin-bottom: 20rpx;
}
/** */
/* 信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
@@ -251,33 +295,49 @@ view-scroll {
}
}
/* 信息项 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔 */
flex: 0 0 48%;
display: flex;
align-items: baseline; /* 文字基线对齐 */
align-items: baseline;
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行 */
word-break: break-all;
}
/* 过滤按钮 */
.filter-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
border-radius: 20rpx;
transition: all 0.2s ease;
&:active {
background: rgba(255, 255, 255, 0.3);
}
.filter-text {
font-size: 24rpx;
@@ -285,8 +345,9 @@ view-scroll {
}
}
/* 弹出层样式 */
.popup-content {
background-color: #fff;
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding: 32rpx;
@@ -298,11 +359,16 @@ view-scroll {
.popup-title {
font-size: 32rpx;
font-weight: 500;
font-weight: 600;
color: #333;
}
.popup-close {
padding: 8rpx;
&:active {
opacity: 0.6;
}
}
}

113
apps/hand-factory/components/lines/paint.vue
View File

@@ -1,12 +1,17 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
<!-- 简洁标签栏 -->
<view class="tab-container">
<view
v-for="item in tabData"
:key="item.value"
@click="currentTab = item.value"
class="tab-item"
:class="{ 'tab-active': currentTab === item.value }"
>
<text class="tab-label">{{ item.text }}</text>
<view class="tab-indicator" v-if="currentTab === item.value"></view>
</view>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
@@ -152,6 +157,12 @@ export default {
data() {
return {
currentTab: 1, // 当前选中的标签页
tabData: [
{ text: "实时监控", value: 1 },
{ text: "生产统计", value: 2 },
{ text: "停机统计", value: 3 },
{ text: "班组绩效", value: 4 }
],
status: [ // 状态指标数据（供 k-metric-card 使用）
{ label: '网络状态', value: '正常' },
{ label: '当前班组', value: '乙 / 中' }
@@ -190,36 +201,74 @@ page {
overflow: auto;
}
view-scroll {
gap: 30rpx;
}
.tab {
margin: auto;
/* 简洁标签栏 */
.tab-container {
display: flex;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 30rpx 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 88rpx;
z-index: 999;
background-color: #fff;
transition: all 0.3s ease;
.tab-label {
font-size: 28rpx;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
}
&.tab-active {
.tab-label {
color: #1a73e8;
font-weight: 600;
}
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background: #1a73e8;
border-radius: 2rpx;
}
}
/* 内容卡片 */
.content-card {
background-color: white;
background: #fff;
margin-bottom: 20rpx;
}
/* 指标容器 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
background: #fff;
padding: 0;
}
/* 指标项 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
transition: all 0.2s;
}
.metric-value {
@@ -232,10 +281,10 @@ view-scroll {
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
letter-spacing: 1rpx;
}
/** 机组跟踪信息容器样式 */
/* 信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
@@ -252,23 +301,33 @@ view-scroll {
}
}
/* 信息项 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
flex: 0 0 48%;
display: flex;
align-items: baseline; /* 文字基线对齐，保证排版整齐 */
align-items: baseline;
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
word-break: break-all;
}
</style>

191
apps/hand-factory/components/lines/zinc1.vue
View File

@@ -1,12 +1,17 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
<!-- 简洁标签栏 -->
<view class="tab-container">
<view
v-for="item in tabData"
:key="item.value"
@click="currentTab = item.value"
class="tab-item"
:class="{ 'tab-active': currentTab === item.value }"
>
<text class="tab-label">{{ item.text }}</text>
<view class="tab-indicator" v-if="currentTab === item.value"></view>
</view>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
@@ -48,16 +53,18 @@
<view class="content-card">
<klp-collapse-panel title="机组跟踪">
<view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
<text>轧机</text>
<text>6390000</text>
<view style="padding: 30rpx; display: flex; flex-direction: column; gap: 20rpx;">
<view class="device-card">
<view class="device-header">
<text class="device-name">轧机</text>
<text class="device-value">6390000</text>
</view>
</view>
<view style="border-radius: 10rpx; overflow: hidden;">
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
<text>圆剪盘</text>
<text>6390000</text>
<view class="device-card">
<view class="device-header">
<text class="device-name">圆剪盘</text>
<text class="device-value">6390000</text>
</view>
<view class="info-container">
<view class="info-row">
@@ -84,15 +91,17 @@
</view>
</view>
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
<text>酸洗</text>
<text>6390000</text>
<view class="device-card">
<view class="device-header">
<text class="device-name">酸洗</text>
<text class="device-value">6390000</text>
</view>
</view>
<view style="border-radius: 10rpx; overflow: hidden;">
<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
<text>入口活套</text>
<text>6390000</text>
<view class="device-card">
<view class="device-header">
<text class="device-name">入口活套</text>
<text class="device-value">6390000</text>
</view>
<view class="info-container">
<view class="info-row">
@@ -204,80 +213,96 @@ export default {
</script>
<style scoped lang="scss">
page {
background-color: #b2b2b2;
height: 100vh;
overflow: auto;
/* 简洁标签栏 */
.tab-container {
display: flex !important;
width: 100%;
background: #ffffff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
min-height: 88rpx;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
.tab-item {
flex: 1;
text-align: center;
padding: 30rpx 10rpx;
position: relative;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
transition: all 0.3s ease;
cursor: pointer;
}
/* 内容卡片样式 */
.tab-label {
font-size: 28rpx;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
}
.tab-item.tab-active .tab-label {
color: #1a73e8;
font-weight: 600;
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background: #1a73e8;
border-radius: 2rpx;
}
/* 内容卡片 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
background: #fff;
margin-bottom: 20rpx;
}
/* 指标容器样式 */
/* 指标容器 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
background: #fff;
padding: 0;
}
/* 单个指标项样式 */
/* 指标项 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
transition: all 0.2s;
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
letter-spacing: 1rpx;
}
/* 机组跟踪信息容器 */
/* 信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
@@ -288,26 +313,62 @@ view-scroll {
}
}
/* 单个信息项样式 */
/* 信息项 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
flex: 0 0 48%;
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
align-items: baseline;
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
word-break: break-all;
}
/* 设备卡片 */
.device-card {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
border: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.device-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 24rpx;
background: #1a73e8;
.device-name {
font-size: 28rpx;
color: #fff;
font-weight: 600;
}
.device-value {
font-size: 28rpx;
color: #fff;
font-weight: 600;
}
}
</style>

126
apps/hand-factory/components/lines/zinc2.vue
View File

@@ -1,12 +1,17 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
<!-- 简洁标签栏 -->
<view class="tab-container">
<view
v-for="item in tabData"
:key="item.value"
@click="currentTab = item.value"
class="tab-item"
:class="{ 'tab-active': currentTab === item.value }"
>
<text class="tab-label">{{ item.text }}</text>
<view class="tab-indicator" v-if="currentTab === item.value"></view>
</view>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
@@ -210,74 +215,96 @@ page {
overflow: auto;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
/* 简洁标签栏 */
.tab-container {
display: flex;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 30rpx 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
transition: all 0.3s ease;
.tab-label {
font-size: 28rpx;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
}
&.tab-active {
.tab-label {
color: #1a73e8;
font-weight: 600;
}
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background: #1a73e8;
border-radius: 2rpx;
}
}
/* 内容卡片样式 */
/* 内容卡片 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
background: #fff;
margin-bottom: 20rpx;
}
/* 指标容器样式 */
/* 指标容器 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
background: #fff;
padding: 0;
}
/* 单个指标项样式 */
/* 指标项 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
transition: all 0.2s;
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
letter-spacing: 1rpx;
}
/* 机组跟踪信息容器 */
/* 信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
@@ -288,26 +315,33 @@ view-scroll {
}
}
/* 单个信息项样式 */
/* 信息项 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
flex: 0 0 48%;
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
align-items: baseline;
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
word-break: break-all;
}
</style>

126
apps/hand-factory/components/lines/zinc3.vue
View File

@@ -1,12 +1,17 @@
<template>
<view>
<view class="tab">
<uni-data-checkbox
mode="tag"
selectedColor="#2bf"
v-model="currentTab"
:localdata="tabData"
></uni-data-checkbox>
<!-- 简洁标签栏 -->
<view class="tab-container">
<view
v-for="item in tabData"
:key="item.value"
@click="currentTab = item.value"
class="tab-item"
:class="{ 'tab-active': currentTab === item.value }"
>
<text class="tab-label">{{ item.text }}</text>
<view class="tab-indicator" v-if="currentTab === item.value"></view>
</view>
</view>
<scroll-view scroll-y v-if="currentTab === 1">
@@ -210,74 +215,96 @@ page {
overflow: auto;
}
/* 滚动视图间隙（原代码选择器可能笔误，保留原逻辑） */
view-scroll {
gap: 30rpx;
}
/* 标签页容器样式 */
.tab {
margin: auto;
/* 简洁标签栏 */
.tab-container {
display: flex;
box-sizing: border-box;
width: 100%;
background: #fff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.tab-item {
flex: 1;
text-align: center;
padding: 30rpx 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 88rpx; /* 需配合 position: sticky 生效，原代码未加，可根据需求补充 */
position: sticky; /* 补充粘性定位，确保标签页滚动时固定在顶部 */
z-index: 999;
background-color: #fff;
padding: 10rpx 0; /* 补充内边距，优化点击体验 */
transition: all 0.3s ease;
.tab-label {
font-size: 28rpx;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
}
&.tab-active {
.tab-label {
color: #1a73e8;
font-weight: 600;
}
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background: #1a73e8;
border-radius: 2rpx;
}
}
/* 内容卡片样式 */
/* 内容卡片 */
.content-card {
border-radius: 16rpx; /* 补充圆角，与设计风格统一 */
overflow: hidden; /* 防止内部内容溢出卡片 */
background: #fff;
margin-bottom: 20rpx;
}
/* 指标容器样式 */
/* 指标容器 */
.metric-container {
display: flex;
justify-content: space-around;
background-color: white;
padding: 20rpx 0;
background: #fff;
padding: 0;
}
/* 单个指标项样式 */
/* 指标项 */
.metric-item {
flex: 1;
text-align: center;
padding: 32rpx;
border-radius: 12rpx;
transition: all 0.3s;
margin: 0 10rpx; /* 补充左右间距，避免指标过挤 */
background-color: #f8f9fa; /* 补充背景色，区分指标区域 */
transition: all 0.2s;
}
/* 指标数值样式 */
.metric-value {
font-size: 48rpx;
font-weight: 600;
margin-bottom: 16rpx;
line-height: 1.2;
color: #333;
}
/* 指标标签样式 */
.metric-label {
font-size: 28rpx;
color: #666;
letter-spacing: 2rpx;
letter-spacing: 1rpx;
}
/* 机组跟踪信息容器 */
/* 信息容器 */
.info-container {
padding: 20rpx;
background: #fff;
border-radius: 12rpx;
border-top: 1px solid #eee; /* 补充上边框，区分标题与内容 */
}
/* 信息行样式 */
.info-row {
display: flex;
justify-content: space-between;
@@ -288,26 +315,33 @@ view-scroll {
}
}
/* 单个信息项样式 */
/* 信息项 */
.info-item {
flex: 0 0 48%; /* 留出4%的间隔，避免内容溢出 */
flex: 0 0 48%;
display: flex;
align-items: baseline; /* 文字基线对齐，排版更整齐 */
align-items: baseline;
padding: 16rpx 20rpx;
background: #f8f9fa;
border-radius: 10rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.2s ease;
&:active {
background: #f0f2f5;
}
}
/* 信息标签样式 */
.info-label {
color: #666;
font-size: 28rpx;
font-size: 26rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
/* 信息数值样式 */
.info-value {
color: #333;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 500;
word-break: break-all; /* 长文本自动换行，防止超出容器 */
word-break: break-all;
}
</style>

2
apps/hand-factory/components/panels/klp-tabs/klp-tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<uni-data-checkbox mode="tag" selectedColor="#2bf" v-model="currentTab" :localdata="tabData"></uni-data-checkbox>
<uni-data-checkbox mode="tag" selectedColor="#1a73e8" v-model="currentTab" :localdata="tabData"></uni-data-checkbox>
</template>
<script>