<template>
  <view :class="ensurepic=='../../static/img/pintuanensure.png'?'shopdetailEnsure1':'shopdetailEnsure'">
    <view class="left">
        <view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
              <img :src="ensurepic" alt  class="ensure1"/>
              <text>{{ensurearr[0]}}</text>
        </view>
           <view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
              <img :src="ensurepic" alt  class="ensure1"/>
              <text>{{ensurearr[1]}}</text>
        </view>
            <view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
              <img :src="ensurepic" alt  class="ensure1"/>
              <text>{{ensurearr[2]}}</text>
        </view>
            <view :class="ensurepic=='../../static/img/pintuanensure.png'?'ensure2':'ensure'">
              <img :src="ensurepic" alt  class="ensure1"/>
              <text>{{ensurearr[3]}}</text>
        </view>
    </view>
    <view class="right" @click="more" v-if="ensurepic!='../../static/img/pintuanensure.png'">
      <img src="../../static/img/more.png" alt class="more" />
    </view>
  </view>
</template>

<script>
export default {
  name: "shopdetailEnsure",
  data(){
      return {
          ensurearr:[],
          ensure:"ensure",
          shopdetailEnsure:'shopdetailEnsure'
      }
  },
  mounted(){
    
  },
  props:{
      ensures:{
          type:String
      },
      ensurepic:{
        type:String
      }
  },
  mounted(){
      this.ensurearr=this.ensures.split(',')
  },
  methods:{
    more(){
      this.$emit("more",true)
    }
  }
};
</script>

<style lang="scss">
.shopdetailEnsure {
  height: 78upx;
  width: 100%;
  background-color: #f0f3fa;
  display: flex;
  justify-content: space-between;

}
.shopdetailEnsure1 {
  height: 78upx;
  width: 100%;
  background-color:white;
  display: flex;
  justify-content: space-between;

}
  .left {
    width: 531upx;
    height: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 78upx;
    .ensure{
        color: #4F95E4;
        font-size: 22upx;
        margin-left: 11upx;
        font-weight:500;
       
    }
     .ensure1{
            width:22upx;
            height: 22upx;
            margin-right: 11upx

        }
        .ensure2{
              color: #D81E50;
        font-size: 22upx;
        margin-left: 11upx;
        font-weight:500;
        }
  }
  .right {
    .more {
      width: 33upx;
      height: 9upx;
      margin-right: 31upx;
      line-height:78upx;
    }
  }
</style>