修复算法配置的字段内容

zhangzengfei

2022-08-23 e37e45cfe1123928dba5d9c5a427b0ee497b7ad6

 src/views/product/components/productCard.vue

@@ -1,27 +1,32 @@
<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>
    <div class="des">{{ data.description }}</div>
    <Price :priceNew="data.priceBase"></Price>
    <div class="button" @click="buyProduct">立即购买</div>
    <div class="button" @click="buyProduct">立即安装</div>
  </div>
</template>

@@ -40,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";
      }
    },
  },
};
@@ -75,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;
@@ -95,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;
          }
        }
      }
    }