<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 16:24:00
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-22 16:50:12
 * @FilePath: \mcep-h5\src\components\common\Tatle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <div> -->
  <div class="d-tattle">
    <div class="litterParam" v-for="(item, index) in litterParam" :key="index" >
      <van-row class="vanrow" @click="litterParamClick(item)">
        <van-col span="20" class="priductName">
          <svg class="icon" aria-hidden="true">
            <!--图片传入进来-->>
            <use :xlink:href="item.img"></use>
          </svg>
          {{ item.productname }}
        </van-col>
        <van-col span="4" class="imglittle">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-xiayiye24x24px"></use>
          </svg>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "LittleCard",
})
export default class LittleCard extends Vue {
  @Prop({ default: "" }) litterParam: any | [] //列表信息

  //点击事件
  litterParamClick(item:any){
    this.$emit("litterParamClick",item);
  }
}
</script>
<style scoped lang="scss">
.d-tattle {
  margin-top: 34%;
}
.priductName{
   padding-top: 2%;
}

.imglittle{
 padding-top: 2%;
}
.litterParam {
  width: 90%;
  margin: 0px auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 4px;
  -moz-box-shadow: 0px 0px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 40px;

}

.vanrow {
  margin-top: 3%;
  margin-left: 2%;
}

.tatle {
  width: 100%;
  height: 100%;
}

.icon {
  width: 20px;
  height: 20px;
}
</style>