style:样式调整

pages/analysis/sample/components/task-item.vue

@@ -0,0 +1,79 @@
+<!-- components/TaskItem.vue -->
+<template>
+  <view class="u-tab-item" :class="{ 'u-tab-item-active': active }" @tap.stop="handleClick">
+    <u-row class="full-width">
+      <u-col span="2" class="text-center" style="position: relative">
+        <u-icon :color="taskStyle(task)" name="tags-fill" size="34"></u-icon>
+        <text class="seq">{{ seq }}</text>
+      </u-col>
+      <u-col span="10">
+        <view class="fs18">{{ task.taskNo }}</view>
+        <view class="mt3 mb3">{{ task.taskName }}{{ task.assayOper }}</view>
+        <view class="x-f">
+          <u-icon name="clock"></u-icon>
+          <text class="ml5">{{ task.taskOperTime }}</text>
+        </view>
+      </u-col>
+    </u-row>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  task: {
+    type: Object,
+    required: true
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  seq: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const handleClick = () => {
+  emit('click')
+}
+
+// 与原逻辑一致的 taskStyle 方法
+const taskStyle = task => {
+  if ((task.weightTaskStatus === 0 || task.weightTaskStatus === 1) && task.reviewCount > 0) return 'red'
+  if (task.weightTaskStatus === 2 && task.reviewCount > 0) return 'green'
+  return ''
+}
+</script>
+
+<style lang="scss" scoped>
+.u-tab-item {
+  padding: 3px;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #444;
+  border-bottom: 2px dotted;
+}
+
+.u-tab-item-active {
+  position: relative;
+  color: #0055a2;
+  font-weight: 600;
+  background: #fff;
+}
+.seq {
+  position: absolute;
+  top: 9px;
+  left: 12px;
+  color: #fff;
+  font-size: 11px;
+}
+</style>