调整在线录入列表查询框样式

src/pages/home/components/CardItem.vue

@@ -3,14 +3,18 @@
     <image class="card-image" :src="iconUrl" mode="aspectFit" />
     <view class="card-content">
       <text class="card-title">{{ card.title }}</text>
-      <text class="card-desc">您有{{ count }}{{ card.description }}</text>
+      <text class="card-desc">
+        您有
+        <text :class="{ 'red-color-text': count > 0 }">{{ count }}</text>
+        {{ card.description }}
+      </text>
     </view>
-    <view class="badge">
+    <!-- <view class="badge">
       <view v-if="count > 0" class="card-title-count-box">
         <text class="card-title-count">{{ count }}</text>
       </view>
       <image class="card-icon" :src="iconMap.ArrowRight" mode="aspectFit" />
-    </view>
+    </view> -->
   </view>
 </template>
 
@@ -47,7 +51,7 @@ const PADDING = 20 // 左右边距
 
 // 计算卡片宽度
 const cardWidth = computed(() => {
-  return ((props.width - PADDING * 2) - ((NUM - 1) * SPACE)) / NUM
+  return (props.width - PADDING * 2 - (NUM - 1) * SPACE) / NUM
 })
 
 const count = ref(0)
@@ -66,7 +70,7 @@ const getCount = async (userId: string) => {
 
 // 暴露方法给父组件
 defineExpose({
-  getCount
+  getCount,
 })
 
 // 处理点击
@@ -75,24 +79,28 @@ const handleClick = () => {
 }
 
 // 监听 userId 变化
-watch(() => props.userId, (newVal) => {
-  if (newVal) {
-    getCount(newVal)
-  }
-}, { immediate: true })
+watch(
+  () => props.userId,
+  (newVal) => {
+    if (newVal) {
+      getCount(newVal)
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <style lang="scss" scoped>
 .card {
   display: flex;
   flex-direction: row;
+  gap: 15px;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
   padding: 10px;
-  background-color: rgb(243, 249, 255);
   margin-bottom: 18px;
-  gap: 15px;
+  background-color: rgb(243, 249, 255);
+  border-radius: 6px;
 }
 
 .card-image {
@@ -101,45 +109,51 @@ watch(() => props.userId, (newVal) => {
 }
 
 .card-content {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: space-between;
   padding: 0 10px;
 }
 
 .card-title {
-  color: rgb(51, 51, 51);
   font-size: 17px;
   font-weight: 500;
+  color: rgb(51, 51, 51);
 }
 
 .card-desc {
-  color: rgb(154, 154, 154);
-  font-size: 10px;
   margin-top: 5px;
+  font-size: 10px;
+  color: rgb(154, 154, 154);
+}
+
+.red-color-text {
+  font-size: 12px;
+  font-weight: 700;
+  color: red;
 }
 
 .badge {
   display: flex;
   flex-direction: row;
-  align-items: center;
   gap: 5px;
+  align-items: center;
 }
 
 .card-title-count-box {
-  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 14px;
+  padding: 0 5px;
   background-color: rgb(248, 74, 35);
   border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .card-title-count {
-  color: rgb(253, 229, 225);
   font-size: 10px;
+  color: rgb(253, 229, 225);
 }
 
 .card-icon {

src/pages/home/index.vue

@@ -160,7 +160,7 @@ onMounted(() => {
   getWindowWidth()
   getUserId()
   checkNetworkStatus()
-  
+
   // 监听网络状态变化
   uni.onNetworkStatusChange(onNetworkStatusChange)
 })
@@ -504,29 +504,29 @@ const onRefresh = () => {
 
 .tab-item {
   display: flex;
+  flex: 1;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  flex: 1;
-  padding: 12px;
   max-width: calc(100vw / 3);
+  padding: 12px;
 }
 
 .tab-item-active {
+  background-color: #fff;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
-  background-color: #fff;
 }
 
 .tab-item-text-active {
-  color: rgb(59, 59, 59);
   font-size: 15px;
   font-weight: bold;
+  color: rgb(59, 59, 59);
 }
 
 .todo-title-box {
-  background-color: #fff;
   padding: 20px;
+  background-color: #fff;
 }
 
 .todo-title {
@@ -535,19 +535,19 @@ const onRefresh = () => {
 }
 
 .todo-cards {
-  margin-left: 20px;
-  margin-right: 20px;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin: 0 10px;
   background-color: #fff;
-  border-bottom-right-radius: 12px;
+  border-radius: 0 0 12px 12px;
 }
 
 .home-section {
-  margin: 10px;
   padding: 0 12px;
+  margin: 10px;
   background-color: #ffffff;
   border-radius: 6px;
 }
@@ -562,14 +562,14 @@ const onRefresh = () => {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 12px;
-  margin-top: 15px;
   padding: 0 8px 15px;
+  margin-top: 15px;
 }
 
 .section-item {
+  position: relative;
   flex: 1;
   padding: 20px 15px;
-  position: relative;
 }
 
 .cap-info {
@@ -577,38 +577,38 @@ const onRefresh = () => {
 }
 
 .cap-title {
-  font-size: 15px;
-  color: #333333;
+  display: block;
   margin-bottom: 4px;
+  font-size: 15px;
   font-weight: 500;
-  display: block;
+  color: #333333;
 }
 
 .cap-desc {
+  display: block;
   font-size: 12px;
   color: #666;
-  display: block;
 }
 
 .cap-section-image {
+  display: block;
   width: 100%;
   height: 50px;
-  display: block;
 }
 
 .network-toast {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
   padding: 15px 25px;
+  background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
-  z-index: 9999;
+  transform: translate(-50%, -50%);
 }
 
 .network-toast-text {
-  color: #fff;
   font-size: 14px;
+  color: #fff;
 }
 </style>

src/pages/login/login.vue

@@ -24,7 +24,7 @@
       <!-- 账号输入 -->
       <view class="input-group">
         <input
-          class="input"
+          class="login-input"
           :class="{ 'input-error': errors.username }"
           v-model="username"
           placeholder="请输入账号"
@@ -36,7 +36,7 @@
       <!-- 密码输入 -->
       <view class="input-group">
         <input
-          class="input"
+          class="login-input"
           :class="{ 'input-error': errors.password }"
           v-model="password"
           :type="showPassword ? 'text' : 'password'"
@@ -227,10 +227,10 @@ const fetchGetMemberByDeptApi = async (deptId: string) => {
 }
 
 .logo-text {
-  color: rgb(51, 51, 51);
+  margin-top: 16px;
   font-size: 23px;
   font-weight: bold;
-  margin-top: 16px;
+  color: rgb(51, 51, 51);
 }
 
 .form-section {
@@ -238,16 +238,17 @@ const fetchGetMemberByDeptApi = async (deptId: string) => {
 }
 
 .input-group {
-  margin-bottom: 30px;
   position: relative;
+  margin-bottom: 30px;
 }
 
-.input {
-  border-bottom-width: 1px;
-  border-bottom-color: rgb(234, 234, 234);
-  border-radius: 4px;
+.login-input {
+  padding: 0;
   font-size: 17px;
-  padding: 10px 0;
+  border-color: rgb(183, 177, 177);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-radius: 4px;
 }
 
 .input-error {
@@ -261,8 +262,8 @@ const fetchGetMemberByDeptApi = async (deptId: string) => {
 
 .eye-icon {
   position: absolute;
-  right: 0;
   top: 10px;
+  right: 0;
   width: 18px;
   height: 18px;
   padding: 10px;
@@ -275,30 +276,30 @@ const fetchGetMemberByDeptApi = async (deptId: string) => {
 }
 
 .login-type-btn {
-  height: 36px;
-  border-radius: 4px;
-  border-width: 1px;
-  border-color: rgb(228, 228, 228);
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 36px;
   padding: 0 10px;
   margin-right: 12px;
+  border-color: rgb(228, 228, 228);
+  border-width: 1px;
+  border-radius: 4px;
 }
 
 .submit-btn {
-  height: 47px;
-  background-color: #071F50;
-  margin-top: 100px;
-  border-radius: 4px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: 47px;
+  margin-top: 100px;
+  background-color: #071f50;
   border: none;
+  border-radius: 4px;
 }
 
 .submit-btn-text {
-  color: rgb(251, 253, 255);
   font-size: 16px;
+  color: rgb(251, 253, 255);
 }
 </style>

src/pages/taskOnlinePage/components/query/CheckDateCom.vue

@@ -70,28 +70,28 @@ uni.$on('DateRangeSelected', (data: any) => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 13px;
+  margin-bottom: 10px !important;
 }
 
 .title {
-  color: rgb(51, 51, 51);
-  font-size: 12px;
   width: 70px;
+  font-size: 12px;
+  color: rgb(51, 51, 51);
   text-align: right;
 }
 
 .date-input {
+  display: flex;
   flex: 1;
+  align-items: center;
   height: 30px;
+  padding: 0 5px;
   border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 0 5px;
-  display: flex;
-  align-items: center;
 }
 
 .date-text {
-  color: rgba(136, 136, 136, 1);
   font-size: 12px;
+  color: rgba(136, 136, 136, 1);
 }
 </style>

src/pages/taskOnlinePage/components/query/CheckNatureCom.vue

@@ -3,11 +3,7 @@
     <text class="title" :style="textStyle">检验性质：</text>
     <view class="nature-input" @click="showPicker">
       <text class="nature-text">{{ selectorChecked || '请选择' }}</text>
-      <image
-        class="arrow-icon"
-        :src="iconMap.ArrowDown"
-        :class="{ 'arrow-rotate': isOpen }"
-      />
+      <image class="arrow-icon" :src="iconMap.ArrowDown" :class="{ 'arrow-rotate': isOpen }" />
     </view>
   </view>
 </template>
@@ -65,31 +61,31 @@ const showPicker = () => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 13px;
+  margin-bottom: 10px !important;
 }
 
 .title {
-  color: rgb(51, 51, 51);
-  font-size: 12px;
   width: 70px;
+  font-size: 12px;
+  color: rgb(51, 51, 51);
   text-align: right;
 }
 
 .nature-input {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height: 30px;
+  padding: 0 5px;
   border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 0 5px;
 }
 
 .nature-text {
-  color: rgba(136, 136, 136, 1);
   font-size: 12px;
+  color: rgba(136, 136, 136, 1);
 }
 
 .arrow-icon {

src/pages/taskOnlinePage/components/query/CheckTaskStatusCom.vue

@@ -2,9 +2,24 @@
   <view class="check-task-status-box">
     <text class="title" :style="textStyle">任务状态：</text>
     <view class="status-input" @click="showMultiPicker">
-      <text class="status-text">
-        {{ selectedItems.length > 0 ? selectedItems.join('、') : '请选择' }}
-      </text>
+      <view class="status-tags">
+        <view v-if="selectedItems.length === 0" class="placeholder-tag">
+          <text class="placeholder-text">请选择</text>
+        </view>
+        <template v-else-if="isOverflow">
+          <view class="status-tag">
+            <text class="tag-text">{{ selectedItems[0] }}</text>
+          </view>
+          <view class="count-tag">
+            <text class="count-text">{{ selectedItems.length - 1 }}</text>
+          </view>
+        </template>
+        <template v-else>
+          <view v-for="(item, index) in selectedItems" :key="index" class="status-tag">
+            <text class="tag-text">{{ item }}</text>
+          </view>
+        </template>
+      </view>
       <image class="arrow-icon" :src="iconMap.ArrowDown" />
     </view>
 
@@ -36,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import iconMap from '@/utils/imagesMap'
 import { PressureCheckerMyTaskStatus } from '@/utils/dictMap'
 
@@ -73,6 +88,11 @@ if (props.defaultValue && props.defaultValue.length > 0) {
     .map((item) => item.label)
 }
 
+// 判断是否超出宽度（选中1个显示tag，2个及以上显示第一个tag+剩余数量）
+const isOverflow = computed(() => {
+  return selectedItems.value.length > 1
+})
+
 // 暴露方法
 defineExpose({
   reset: () => {
@@ -119,32 +139,77 @@ const confirmSelection = () => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 13px;
+  margin-bottom: 10px;
 }
 
 .title {
-  color: rgb(51, 51, 51);
-  font-size: 12px;
   width: 90px;
+  font-size: 12px;
+  color: rgb(51, 51, 51);
   text-align: right;
 }
 
 .status-input {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height: 30px;
+  padding: 0 5px;
   border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 0 5px;
 }
 
-.status-text {
-  color: rgba(136, 136, 136, 1);
-  font-size: 12px;
+.status-tags {
+  display: flex;
   flex: 1;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+}
+
+.count-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background-color: #2f8eff;
+  border-radius: 10px;
+}
+
+.count-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+}
+
+.status-tag {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  background-color: #e6f7ff;
+  border: 1px solid #b3d4ff;
+  border-radius: 4px;
+}
+
+.tag-text {
+  font-size: 12px;
+  color: #2f8eff;
+  white-space: nowrap;
+}
+
+.placeholder-tag {
+  display: flex;
+  align-items: center;
+}
+
+.placeholder-text {
+  font-size: 12px;
+  color: rgba(136, 136, 136, 1);
 }
 
 .arrow-icon {
@@ -155,22 +220,22 @@ const confirmSelection = () => {
 .popup-mask {
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  z-index: 999;
   display: flex;
-  justify-content: center;
   align-items: flex-end;
-  z-index: 999;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .popup-content {
   width: 100%;
   max-width: 500px;
+  overflow: hidden;
   background-color: #fff;
   border-radius: 10px 10px 0 0;
-  overflow: hidden;
 }
 
 .popup-header {
@@ -181,13 +246,13 @@ const confirmSelection = () => {
 
 .popup-title {
   font-size: 18px;
-  color: #333;
   font-weight: 500;
+  color: #333;
 }
 
 .popup-options {
-  padding: 15px;
   max-height: 300px;
+  padding: 15px;
   overflow-y: auto;
 }
 
@@ -204,14 +269,14 @@ const confirmSelection = () => {
 }
 
 .checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 20px;
   height: 20px;
-  border-radius: 3px;
-  border: 1px solid #bbb;
   margin-right: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  border: 1px solid #bbb;
+  border-radius: 3px;
 }
 
 .checkbox.checked {
@@ -233,25 +298,25 @@ const confirmSelection = () => {
 
 .cancel-btn,
 .confirm-btn {
-  flex: 1;
-  height: 40px;
-  border-radius: 4px;
   display: flex;
-  justify-content: center;
+  flex: 1;
   align-items: center;
+  justify-content: center;
+  height: 40px;
   font-size: 16px;
   border: none;
+  border-radius: 4px;
 }
 
 .cancel-btn {
-  background-color: #fff;
+  margin-right: 10px;
   color: #666;
+  background-color: #fff;
   border: 1px solid #ddd;
-  margin-right: 10px;
 }
 
 .confirm-btn {
-  background-color: #2f8eff;
   color: #fff;
+  background-color: #2f8eff;
 }
 </style>

src/pages/taskOnlinePage/components/query/InputCom.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="input-box" :style="style">
+  <view class="ic-input-box" :style="style">
     <text class="title" :style="textStyle">{{ title }}</text>
     <input
       ref="inputRef"
@@ -51,29 +51,29 @@ const handleInput = (e: any) => {
 </script>
 
 <style lang="scss" scoped>
-.input-box {
+.ic-input-box {
   display: flex;
   flex-direction: row;
-  align-items: center;
   flex-wrap: nowrap;
+  align-items: center;
+  margin-bottom: 10px;
   margin-left: 5px;
-  margin-bottom: 13px;
 }
 
 .title {
-  color: rgb(51, 51, 51);
-  font-size: 12px;
   width: 60px;
+  font-size: 12px;
+  color: rgb(51, 51, 51);
   text-align: right;
 }
 
 .input {
   flex: 1;
   height: 30px;
-  border: 1px solid #ccc;
-  color: rgba(136, 136, 136, 1);
+  padding: 0 5px;
   font-size: 12px;
+  color: rgba(136, 136, 136, 1);
+  border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 0 5px;
 }
 </style>

src/pages/taskOnlinePage/components/query/QueryView.vue

@@ -70,11 +70,7 @@
 
     <view class="query-toggle" @click="toggleFilter">
       <text class="query-toggle-text">查询</text>
-      <image
-        class="arrow-icon"
-        :src="iconMap.ArrowDown"
-        :class="{ 'arrow-rotate': isOpen }"
-      />
+      <image class="arrow-icon" :src="iconMap.ArrowDown" :class="{ 'arrow-rotate': isOpen }" />
     </view>
   </view>
 </template>
@@ -204,41 +200,41 @@ const query = () => {
 }
 
 .btn {
-  padding: 0 15px;
-  height: 30px;
-  margin-left: 5px;
-  border-radius: 3px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 15px;
+  margin-left: 20px;
   font-size: 15px;
   border: none;
+  border-radius: 3px;
 }
 
 .reset-btn {
-  background-color: #fff;
   color: rgb(47, 142, 255);
+  background-color: #fff;
   border: 1px solid rgb(47, 142, 255);
 }
 
 .query-btn {
-  background-color: rgb(47, 142, 255);
   color: rgb(222, 238, 255);
+  background-color: rgb(47, 142, 255);
 }
 
 .query-toggle {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 20px;
+  justify-content: space-between;
   height: 60px;
+  padding: 0 20px;
   border-top: 1px solid rgba(187, 187, 187, 0.8);
 }
 
 .query-toggle-text {
-  color: rgb(51, 51, 51);
   font-size: 16px;
+  color: rgb(51, 51, 51);
 }
 
 .arrow-icon {