<template>
  <view class="choosesizeCardesc">
    <view class="desc">
      <view class="problem">
        <view class="desc1">
          <view class="icon">问</view>
          <text class="zi">{{problem}}</text>
        </view>
        <view class="desc1 answer">
          <view class="icon icon1">答</view>
          <text class="zi">{{answer}}</text>
        </view>
      </view>

      <view class="line"></view>
      <img  :src="shoppic" alt class="shop" />
    </view>
  </view>
</template>

<script>
export default {
    name:'choosesizeCardesc',
    props:{
        problem:{
            type:String
        },
        answer:{
            type:String
        },
        shoppic:{
            type:String
        }
    }
};
// problem 问题  answer 答案  shoppic  商品图片 
</script>

<style lang="scss">
.choosesizeCardesc {
  width: 706upx;
  height: 787upx;
  background-color: white;
  .desc {
    width: 659upx;
    height: 112upx;
    margin: 0 auto;
    .problem {
      padding-top: 41upx;
      .desc1 {
        height: 29upx;
        display: flex;
        line-height: 29upx;
        .icon {
          width: 29upx;
          height: 29upx;
          background-color: #c7513f;
          color: white;
          font-size: 21upx;
          text-align: center;
        }
        .zi {
          color: #5c5c5c;
          font-size: 24upx;
          margin-left: 9upx;
        }
        .icon1 {
          background-color: #4bb20c;
        }
      }
    }

    .answer {
      margin-top: 24upx;
      margin-bottom: 32upx;
    }
    .line {
      width: 657upx;
      height: 1upx;
      background-color: #dadada;
      margin-bottom: 16upx;
    }
    .shop {
      width: 632upx;
      height: 562upx;
      margin: 0 auto;
      margin-bottom: 23upx;
    }
  }
}
</style>