170 lines
4.0 KiB
Vue
170 lines
4.0 KiB
Vue
<template>
|
|
<!-- 新闻详情 -->
|
|
<div class="news-info">
|
|
<div class="info-top">
|
|
<h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2>
|
|
<p class="news-date">- Oct 25, 2024-</p>
|
|
</div>
|
|
|
|
<div class="news-content">
|
|
<div></div>
|
|
<ContactFooter />
|
|
<div class="guide">
|
|
<nuxt-link to="/">
|
|
Previous: How To Maintain The Chassis Of A Truck?
|
|
</nuxt-link>
|
|
|
|
<nuxt-link to="/">
|
|
Next: Flatbed Trailer Buying Guide
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-news mb-4">
|
|
<div class="pretty-header">
|
|
<h2>{{ $t('news.relatedNews') }}</h2>
|
|
</div>
|
|
<nuxt-link
|
|
class="news-related-item box_shadow"
|
|
to="/"
|
|
v-for="item in 6"
|
|
:key="item"
|
|
>
|
|
<p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
|
|
<span>- Oct 25, 2024-</span>
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
<div class="related-products">
|
|
<div class="pretty-header">
|
|
<h2>{{ $t('news.relatedProducts') }}</h2>
|
|
</div>
|
|
<b-carousel
|
|
class="mt-3"
|
|
id="carousel-1"
|
|
:interval="4000"
|
|
controls
|
|
indicators
|
|
>
|
|
<b-carousel-slide v-for="item in 3" :key="item">
|
|
<template v-slot:img>
|
|
<ul class="row justify-content-around pl-0">
|
|
<li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
|
|
<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>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>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</b-carousel-slide>
|
|
</b-carousel>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'news-info',
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.news-info {
|
|
.info-top {
|
|
padding-bottom: .5rem;
|
|
border-bottom: 1px solid #d8dde1;
|
|
.news-title {
|
|
margin: 1.5625rem 0;
|
|
margin-bottom: .9375rem;
|
|
color: #444444;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
.news-date {
|
|
color: #9e9e9e;
|
|
text-align: center;
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
.news-content {
|
|
margin-bottom: 2.6875rem;
|
|
.guide {
|
|
padding-top: .625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #515760;
|
|
border-top: 1px solid #d8dde1;
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
.related-news {
|
|
.news-related-item {
|
|
padding: 1.125rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #d8dde1;
|
|
font-size: .875rem;
|
|
p {
|
|
flex: 1;
|
|
color: #444444;
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
span {
|
|
color: #9e9e9e;
|
|
}
|
|
}
|
|
}
|
|
.related-products {
|
|
#carousel-1 {
|
|
@mixin controls {
|
|
width: 2.875rem;
|
|
height: 2.875rem;
|
|
background-color: #7f7f7f;
|
|
background-size: 1.25rem;
|
|
}
|
|
::v-deep .carousel-control-prev-icon {
|
|
@include controls;
|
|
}
|
|
::v-deep .carousel-control-next-icon {
|
|
@include controls;
|
|
}
|
|
}
|
|
.product-card {
|
|
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;
|
|
font-size: .875rem;
|
|
}
|
|
p {
|
|
color: #878b90;
|
|
}
|
|
.view-details {
|
|
margin: 0 auto;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |