<template>
  <view>
    <view class="indexicon" v-if="choosecolor==1">
      <view>
        <view class="icon">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
    <view class="indexicon" v-if="choosecolor==2">
      <view>
        <view class="icon1">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
       <view class="indexicon" v-if="choosecolor==3">
      <view>
        <view class="icon2">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
       <view class="indexicon" v-if="choosecolor==4">
      <view>
        <view class="icon3">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
       <view class="indexicon" v-if="choosecolor==5">
      <view>
        <view class="icon4">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
       <view class="indexicon" v-if="choosecolor==6">
      <view>
        <view class="icon5">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
       <view class="indexicon" v-if="choosecolor==7">
      <view>
        <view class="icon6">
          <img :src="imgurl" alt class="iconpic" />
        </view>
        <view class="desc">{{desc}}</view>
      </view>
    </view>
  </view>
  <!-- choosecolor:1 蓝色,  choosecolor:2黄色, choosecolor:3 绿色, choosecolor:4  蓝色1  choosecolor:5 粉色  choosecolor:6 红色 ， choosecolor:7 灰色-->
</template>
<script>
export default {
  name: "indexIcon",
  data() {
    return {
      blue1: "icon",
      gold: "icon1",
      green: "icon2",
      blue2: "icon3",
      pink: "icon4",
      red: "icon5",
      gray: "icon6"
    };
  },
  props: {
    imgurl: {
      type: String
    },
    desc: {
      type: String
    },
    choosecolor: {
      // type: Number
    }
  }
};
// imgurl 图片地址  desc 图标功能如：发动机维护      choosecolor 图标的背景色
</script>
<style lang="scss">
.indexicon {
  width: 123upx;
  height: 124upx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .icon {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      0deg,
      rgba(88, 152, 255, 1),
      rgba(124, 213, 248, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;
  }
  .icon1 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      180deg,
      rgba(254, 217, 132, 1),
      rgba(255, 152, 87, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .icon2 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      0deg,
      rgba(71, 196, 120, 1),
      rgba(154, 239, 227, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .icon3 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      180deg,
      rgba(112, 212, 255, 1),
      rgba(41, 155, 251, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .icon4 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      180deg,
      rgba(255, 132, 164, 1),
      rgba(253, 38, 108, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .icon5 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      0deg,
      rgba(234, 64, 61, 1),
      rgba(251, 138, 115, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .icon6 {
    width: 80upx;
    height: 80upx;
    background: linear-gradient(
      60deg,
      rgba(201, 199, 202, 1),
      rgba(139, 137, 140, 1)
    );
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 21upx;

  }
  .iconpic {
    width: 49upx;
    height: 39upx;
    margin: auto;
  }
  .desc {
    // width:150upx;
    color: #818181;
    font-size: 24upx;
    text-indent: 3upx;
    white-space: nowrap;
  }
}
</style>