绘制完成新闻列表页面；新闻详情页面 30%
This commit is contained in:
hejin
parent
bec7be472f
commit
a0d500969b
BIN
assets/image/banner/header-top-line.png
Normal file
BIN
assets/image/banner/header-top-line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -1,12 +1,38 @@
|
||||
<template>
|
||||
<aside class="aside-tree">
|
||||
<h3 class="aside-header">{{ headerTitle }}</h3>
|
||||
<nav class="tree-box">
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
/>
|
||||
</nav>
|
||||
<div>
|
||||
<h3 class="aside-header">{{ headerTitle }}</h3>
|
||||
<nav class="tree-box">
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="contact-us">{{ $t('contactUs.contactUs') }}</h3>
|
||||
<div class="contact-details">
|
||||
<h4 class="mt-3 mb-3">{{ $t('index.corporateName') }}</h4>
|
||||
<p class="mb-2">
|
||||
<label class="mb-0">{{ $t('common.addressLabel') }}:</label>
|
||||
<span>{{ $t('aboutUs.address') }}</span>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<label class="mb-0">{{ $t('common.tel') }}:</label>
|
||||
<span>+86-531-69985132</span>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<label class="mb-0">{{ $t('common.Mob/Whatsapp/Wechat') }}:</label>
|
||||
<span>0086 182 5311 2969</span>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<label class="mb-0">{{ $t('common.E-mail') }}:</label>
|
||||
<span>alicesales@scdtrailer.com</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@ -85,7 +111,7 @@ export default {
|
||||
@import "element-ui/lib/theme-chalk/scrollbar.css";
|
||||
.aside-tree {
|
||||
padding: 0;
|
||||
.aside-header {
|
||||
@mixin header {
|
||||
margin: 0;
|
||||
padding: 1.5rem 0;
|
||||
text-indent: 2.125rem;
|
||||
@ -94,10 +120,33 @@ export default {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.aside-header {
|
||||
@include header;
|
||||
}
|
||||
.tree-box {
|
||||
padding: .625rem .625rem;
|
||||
background-color: #f5f7f9;
|
||||
border: .0625rem solid #d9dde0;
|
||||
::v-deep .is-current {
|
||||
> .el-tree-node__content {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-us {
|
||||
@include header;
|
||||
}
|
||||
.contact-details {
|
||||
padding: .625rem 1.25rem;
|
||||
border: .0625rem solid #d9dde0;
|
||||
background-color: #f5f7f9;
|
||||
font-size: .875rem;
|
||||
h4 {
|
||||
color: #302d2d;
|
||||
font-size: .875rem;
|
||||
}
|
||||
label {
|
||||
color: #77778b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
96
components/seo-pagination.vue
Normal file
96
components/seo-pagination.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="container-custom">
|
||||
<div class="wrapper_1260">
|
||||
<div class="pagination_box">
|
||||
<b-pagination-nav
|
||||
size="lg"
|
||||
v-model="currentPage"
|
||||
:link-gen="linkGen"
|
||||
:number-of-pages="numberOfPages"
|
||||
use-router>
|
||||
</b-pagination-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "seo-pagination",
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
queryStr: ''
|
||||
};
|
||||
},
|
||||
props: {
|
||||
total: {
|
||||
default: 99
|
||||
},
|
||||
page: {
|
||||
default: 1
|
||||
},
|
||||
rows: {
|
||||
default: 10
|
||||
},
|
||||
pageKey: {
|
||||
type: String,
|
||||
default: 'page'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route': {
|
||||
handler(val) {
|
||||
this.currentPage = val.query[this.pageKey] || 1
|
||||
for (let key in val.query) {
|
||||
if (key!==this.pageKey) {
|
||||
this.queryStr = `${this.queryStr}&${key}=${val.query[key]}`
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
numberOfPages() {
|
||||
if (!this.total) {
|
||||
return 1
|
||||
}
|
||||
return Math.ceil(this.total / this.rows)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkGen(pageNum) {
|
||||
return `?${this.pageKey}=${pageNum}${this.queryStr || ''}`
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container-custom {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.pagination_box {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.total_box {
|
||||
margin-right: 15px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
>nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
::v-deep .el-input {
|
||||
width: 70px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
pages/news.vue
Normal file
72
pages/news.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!-- 新闻 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
|
||||
<section class="container pt-4 pb-4">
|
||||
<div class="row">
|
||||
<AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('news.allNews')"/>
|
||||
<main class="col-md-9">
|
||||
<div class="header">
|
||||
<h2>Low Bed Trailer</h2>
|
||||
</div>
|
||||
<nuxt-child />
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('news.news'),
|
||||
subTitle: this.$t('news.newsCenter'),
|
||||
img: require('../assets/image/banner/news-banner.png')
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
main {
|
||||
.header {
|
||||
height: 59px;
|
||||
color: #ffffff;
|
||||
text-indent: 1.375rem;
|
||||
background: linear-gradient( 180deg, rgba(33,119,244,0.04) 0%, rgba(1,95,232,0.14) 100%);
|
||||
border-bottom: 2px solid #0663ea;
|
||||
h2 {
|
||||
max-width: 19.125rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
line-height: 3.6875rem;
|
||||
background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
|
||||
font-size: 1rem;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 5.875rem;
|
||||
height: 3.6875rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5.8125rem;
|
||||
background: url('~assets/image/banner/header-top-line.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
24
pages/news/_id.vue
Normal file
24
pages/news/_id.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<!-- 新闻详情 -->
|
||||
<div class="news-info">
|
||||
泪飙
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news-info',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,23 +1,41 @@
|
||||
<template>
|
||||
<!-- 新闻 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
<!-- 新闻列表 -->
|
||||
<section class="news-list">
|
||||
<nuxt-link
|
||||
class="news-item row mt-4"
|
||||
to="/"
|
||||
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>
|
||||
|
||||
<section class="container pt-4 pb-4">
|
||||
<AsideTree class="col-md-3" :headerTitle="$t('news.allNews')"/>
|
||||
</section>
|
||||
</div>
|
||||
<seoPagination class="mt-4" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'abou-us',
|
||||
name: 'news-list',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('news.news'),
|
||||
subTitle: this.$t('news.newsCenter'),
|
||||
img: require('../../assets/image/banner/news-banner.png')
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -28,9 +46,39 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.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>
|
||||
@ -1,6 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
import bannerTop from '@/components/banner-top.vue';
|
||||
import asideTree from '@/components/aside-tree.vue';
|
||||
import seoPagination from '@/components/seo-pagination.vue';
|
||||
|
||||
Vue.component('AsideTree', asideTree);
|
||||
Vue.component('BannerTop', bannerTop);
|
||||
Vue.component('BannerTop', bannerTop);
|
||||
Vue.component('seoPagination', seoPagination);
|
||||
Loading…
Reference in New Issue
Block a user