add cluster pwd

heyujie

2022-07-15 a0b5604fcefa0c7900ecc50830b718f77bba8f39

 src/views/product/components/productCard.vue

@@ -1,21 +1,26 @@
<template>
  <div class="productCard">
    <div class="image">
      <img
        v-if="data.pics[0]"
        :src="'/httpImage/' + data.pics[0].url"
        class="cursor-pointer"
      />
      <ImageShow v-if="data.pics[0]" :src="data.pics[0].url"></ImageShow>
    </div>

    <div class="info">
      <img :src="'/httpImage/' + data.logoUrl" alt />
      <ImageShow v-if="data.pics[0]" :src="data.logoUrl"></ImageShow>
      <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>
@@ -43,6 +48,18 @@
          name: this.data.productName,
        },
      });
    },
    getColor(name) {
      switch (name) {
        case "算法":
          return "red";
        case "应用":
          return "orange";
        case "云服务":
          return "lightBlue";
        case "边缘计算设备":
          return "blue";
      }
    },
  },
};
@@ -95,6 +112,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;
          }
        }
      }
    }