联调app

components/Cn-device-card/Cn-device-card.vue

@@ -12,13 +12,20 @@
             <view class="uni-card__header" @click="jump(device)">
                 <view class="uni-card__header-box">
                     <view class="uni-card__header-avatar">
-                        <view class="event-icon">
+                        <view
+                            class="event-icon"
+                            :style="{ backgroundColor: getColor(device.runStatus, device.devType) }"
+                        >
                             <!-- 动态图标：根据类型切换 -->
                             <uni-icons
                                 custom-prefix="iconfont"
-                                :type="device.devType == 'Direct_Connected_Device' ? 'icon-shebei2' : 'icon-shebei1'"
-                                :color="device.runStatus == 1 ? '#ff3b30' : '#67c23a'"
-                                size="45"
+                                :type="
+                                    device.devType == 'Direct_Connected_Device'
+                                        ? 'icon-zaixianjianceshebei'
+                                        : 'icon-shebei1'
+                                "
+                                :color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
+                                :size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
                             ></uni-icons>
                         </view>
                     </view>
@@ -66,6 +73,7 @@
                 <text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
             </view>
         </view>
+        <view class="pinToTop" v-if="device.isTop == 1"> 置顶 </view>
     </uni-card>
 </template>
 <script>
@@ -133,16 +141,26 @@ export default {
                 })
             }
         },
+        getColor(status, type) {
+            if (status == 1) {
+                return '#ff3b3020'
+            } else {
+                return '#10b98120' //type == 'Direct_Connected_Device' ? '#10b98120' : ''
+            }
+        },
     },
 }
 </script>
 <style lang="scss">
 .device-body {
-    padding: 20rpx;
+    padding: 10rpx 20rpx 20rpx;
 
     .device-body-item {
         display: flex;
         justify-content: space-between;
+        font-size: 26rpx;
+        color: #666666;
+        line-height: 1.2;
     }
 }
 .uni-card {
@@ -158,18 +176,19 @@ export default {
         border-bottom: 2rpx #ebeef5 solid;
         flex-direction: row;
         align-items: center;
-        padding: 20rpx;
+        padding: 20rpx 20rpx 10rpx 0;
         overflow: hidden;
     }
 }
 .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
-    font-size: 15px;
+    font-size: 28rpx;
     color: #3a3a3a;
+    font-weight: 700;
 }
 .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
     font-size: 12px;
     // margin-top: 5px;
-    color: #909399;
+    color: #666666;
 }
 .uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
     width: 40px;
@@ -191,8 +210,8 @@ export default {
 }
 .event-icon {
     position: relative;
-    // width: 120rpx;
-    height: 120rpx;
+    width: 100rpx;
+    height: 100rpx;
     border-radius: 12rpx;
     display: flex;
     justify-content: center;
@@ -232,4 +251,23 @@ export default {
     background-color: #36cfc920;
     color: #36cfc9;
 }
+.pinToTop {
+    background-color: $uni-theme-color;
+    width: 100rpx;
+    height: 60rpx;
+    line-height: 90rpx;
+    text-align: center;
+    color: #fff;
+    font-size: 20rpx;
+    position: absolute;
+    top: 0rpx;
+    right: 0rpx;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    /* 核心：旋转成斜三角效果 */
+    transform: rotate(45deg) translate(50rpx, -10rpx);
+    transform-origin: top right;
+}
 </style>