<!-- * @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>