first

pageDevice/qrc/components/hornCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="h-wrapper">
+    <image style="width: 90rpx; height: 90rpx" :src="imgList[flag ? 1 : 0]" mode="scaleToFill" />
+    <view class="h-info">
+      <view class="h-title">{{ title }} <view class="state" :style="{ backgroundColor: flag ? '#168FFF' : '#d9d9d9' }"></view></view>
+      <view class="h-code">{{ subTitle }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const props = defineProps({
+  title: { type: String }, //标题
+  subTitle: { type: String }, //副标题
+  flag: { type: Boolean }, //状态,
+})
+const imgList = reactive(['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'])
+</script>
+<style lang="scss" scoped>
+.h-wrapper {
+  display: flex;
+  align-items: center;
+  padding-left: 40rpx;
+  height: 170rpx;
+  .h-info {
+    flex: 1;
+    margin-left: 20rpx;
+    .h-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .state {
+        margin-right: 30rpx;
+        width: 20rpx;
+        height: 20rpx;
+        border-radius: 50%;
+      }
+      margin-bottom: 16rpx;
+      font-size: 30rpx;
+    }
+    .h-code {
+      font-size: 26rpx;
+      color: #999;
+    }
+  }
+}
+</style>