dl_site_nuxt/pages/products/index.vue
2025-07-06 16:16:34 +08:00

74 lines
1.7 KiB
Vue

<template>
<!-- 产品列表 -->
<section class="products-list">
<ul class="row pl-0">
<li class="col-12 col-md-4" v-for="item in 6" :key="item">
<nuxt-link
class="products-item box_shadow mt-2"
to="/products/123123"
>
<article class="product-card box_shadow">
<b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
<div class="product-card-content">
<h4 class="text-ellipsis">SINOTRUK HOWO Tractor Truck Head</h4>
<p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
<p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
<p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
</div>
</article>
</nuxt-link>
</li>
</ul>
<SeoPagination class="mt-4" />
</section>
</template>
<script>
export default {
name: 'products-list',
data() {
return {
bannerTopOptions: {
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.products-list {
box-sizing: border-box;
ul {
margin: 0;
li {
padding: 0 .3125rem;
.products-item {
border: 1px solid #e6e8ec;
.product-card-content {
padding: 1.125rem 1rem;
border-top: .0625rem solid #e6e8ec;
font-size: .875rem;
h4 {
margin-bottom: .8125rem;
color: #212222;
-webkit-line-clamp: 1;
font-size: .875rem;
}
p {
color: #878b90;
}
.view-details {
margin: 0 auto;
margin-top: 2rem;
}
}
}
}
}
}
</style>