Files
czg_zysh_ointment_weapp/pages/index/components/flower/index.vue
2024-03-21 15:54:39 +08:00

100 lines
1.9 KiB
Vue

<template>
<view class="">
<view class="clothingmetals flex-between">
<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
@click="eeInfoseries(item)">
<image class="clothingmetalsitemimage" :src="item.img" mode="aspectFill"></image>
<view class="clothingmetalsitem_text flex-colum-start">
<text>{{item.title}}</text>
<text>{{item.english}}</text>
</view>
<view class="clothingmetalsitem_box flex-center">
<text>立即前往</text>
<u-icon name="arrow-right" color="##b1b1b1" size="8"></u-icon>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
props: {
list: {
type: Array,
default () {
return []
}
},
data: {
type: Number,
default: 0
},
},
methods: {
eeInfoseries(e) {
uni.pro.navigateTo('mall/series', {
id: e.id,
})
},
}
}
</script>
<style lang="scss">
.clothingmetals {
padding: 32rpx 28rpx 0rpx 28rpx;
.clothingmetalsitem {
position: relative;
width: 48%;
height: 194rpx;
.clothingmetalsitemimage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 194rpx;
}
.clothingmetalsitem_text {
position: absolute;
left: 20rpx;
top: 20rpx;
text:nth-child(1) {
font-size: 28rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
color: #679D96;
}
text:nth-child(2) {
margin-top: 2rpx;
font-size: 16rpx;
font-family: Roboto, Roboto;
font-weight: 400;
color: #333333;
}
}
.clothingmetalsitem_box{
position: absolute;
left: 20rpx;
text-align: center;
bottom: 20rpx;
width: 128rpx;
height: 40rpx;
background: #FFFFFF;
border-radius: 20rpx;
font-size: 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
color: #666666;
}
}
}
</style>