74 lines
1.7 KiB
Vue
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> |