84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<template>
|
|
<!-- 新闻列表 -->
|
|
<section class="news-list">
|
|
<nuxt-link
|
|
class="news-item box_shadow row mt-4"
|
|
to="/news/123123"
|
|
v-for="item in 6"
|
|
:key="item"
|
|
>
|
|
<b-img
|
|
class="col-md-4"
|
|
src="~assets/image/banner/home-pord1.png"
|
|
alt="Responsive image"
|
|
>
|
|
</b-img>
|
|
<article class="col-md-8">
|
|
<h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
|
|
<p class="news-content text-ellipsis ">
|
|
When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
|
|
</p>
|
|
<div>
|
|
<span>- Aug 19, 2022-</span>
|
|
<img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
|
|
</div>
|
|
</article>
|
|
</nuxt-link>
|
|
|
|
<SeoPagination class="mt-4" />
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'news-list',
|
|
data() {
|
|
return {
|
|
bannerTopOptions: {
|
|
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.news-list {
|
|
box-sizing: border-box;
|
|
.news-item {
|
|
margin: 0;
|
|
height: min-content;
|
|
min-height: 12.875rem;
|
|
border: 1px solid #e6e8ec;
|
|
article {
|
|
padding: 1.125rem;
|
|
font-size: .875rem;
|
|
.title {
|
|
margin-top: .9375rem;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
.news-content {
|
|
margin: 1.25rem 0;
|
|
height: 5rem;
|
|
color: #878b90;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
>div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #878b90;
|
|
img {
|
|
width: 1.6875rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |