<template> <view> <view class="home_con_content_order u-m-t-30" v-for="item in tableData"> <image style="width: 100%;height: 160rpx;" src="../../../static/images/home/1@2x.png" mode=""></image> <view class="order_tit"> <view class="u-flex justify-between u-font-32"> <span class="color_DDA973 ov_hiden">加厚荷兰绒绒布布料备份加厚荷兰绒绒布布料备份</span> <span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span> </view> <view class="u-font-24 u-m-t-20 color_6F6F72"> <span class="u-m-r-10">针织</span> | <span class="u-m-l-10 u-m-r-10">180cm</span> | <span class="u-m-l-10">100%面备份面备份面备份面备份面备份面备份面备份面备份</span> </view> </view> </view> </view> </template> <script> export default { props: { tableData: { type: Array, default: [] } }, data() { return {}; } }; </script> <style scoped lang="scss"> @import '../index.css'; .home_con_content_order { position: relative; display: flex; align-items: center; justify-content: space-between; height: 160rpx; border-radius: 8rpx; overflow: hidden; .order_tit { position: absolute; width: 75%; right: 0; flex-direction: column; display: flex; justify-content: center; padding: 20rpx; flex: 1; height: 100%; background: rgba(17, 21, 30, 0.5); } } </style>