设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/product/components/productCard.vue

@@ -9,9 +9,18 @@
      <div class="right">
        <div class="name">{{ data.productName }}</div>
        <div class="tagList">
          <span class="tag" v-for="(name, index) in labels" :key="index">{{
            name
          }}</span>
          <span
            class="tag"
            v-for="(name, index) in labels"
            :key="index"
            :class="{
              red: name === '软件',
              orange: name === '应用',
              lightBlue: name === 'SDK',
              blue: name === '产品密钥',
            }"
            >{{ name }}</span
          >
        </div>
      </div>
    </div>
@@ -36,9 +45,21 @@
      this.$router.push({
        path: "/productDetail",
        query: {
          name: this.data.productName,
          id: this.data.id,
        },
      });
    },
    getColor(name) {
      switch (name) {
        case "算法":
          return "red";
        case "应用":
          return "orange";
        case "云服务":
          return "lightBlue";
        case "边缘计算设备":
          return "blue";
      }
    },
  },
};
@@ -71,12 +92,13 @@
    display: flex;

    img {
      margin: 0 10px;
      margin-left: 10px;
      width: 60px;
      height: 60px;
    }

    .right {
      margin-left: 10px;
      .name {
        margin-bottom: 10px;
        font-size: 16px;
@@ -91,6 +113,26 @@
          padding: 2px 5px;
          border: 1px solid #ff5033;
          color: #ff5033;

          &.red {
            color: #ff4f32;
            border-color: #ff4f32;
          }

          &.orange {
            color: #ff9500;
            border-color: #ff9500;
          }

          &.lightBlue {
            color: #00bee7;
            border-color: #00bee7;
          }

          &.blue {
            color: #0064ff;
            border-color: #0064ff;
          }
        }
      }
    }