dj #6
|
|
@ -11,32 +11,35 @@
|
||||||
<div class="about_text">
|
<div class="about_text">
|
||||||
{{ aboutContent }}
|
{{ aboutContent }}
|
||||||
</div>
|
</div>
|
||||||
<el-row :gutter="20" style="padding: 0 4% ">
|
<el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
|
||||||
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
|
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
|
||||||
<p>
|
<p>
|
||||||
<b>{{ numItem.num }}</b>
|
<b class="num_bold">{{ numItem.num }}</b>
|
||||||
<span>{{ numItem.units }}</span>
|
<span>{{ numItem.units }}</span>
|
||||||
</p>
|
</p>
|
||||||
<p>{{ numItem.title }}</p>
|
<p>{{ numItem.title }}</p>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="10" style="padding: 0 5% ">
|
<el-row :gutter="10" style="padding: 0 5% ">
|
||||||
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex">
|
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
||||||
|
:class="'culture_'+imgTextIndex">
|
||||||
<div class="imgAndText">
|
<div class="imgAndText">
|
||||||
<a :href="imgTextItem.href">
|
<a :href="imgTextItem.href">
|
||||||
<span class="pic">
|
<span class="pic">
|
||||||
<img :src="imgTextItem.src" alt=""/>
|
<img :src="imgTextItem.src" alt=""/>
|
||||||
</span>
|
</span>
|
||||||
<div class="img_box">
|
<span class="img_box">
|
||||||
<div class="img_innerBox">
|
<span class="img_innerBox">
|
||||||
<div class="about_en">
|
<span class="its">
|
||||||
|
<span class="about_en">
|
||||||
<span>{{ imgTextItem.boldText }}</span>
|
<span>{{ imgTextItem.boldText }}</span>
|
||||||
<span>{{ imgTextItem.enText }}</span>
|
<span>{{ imgTextItem.enText }}</span>
|
||||||
</div>
|
</span>
|
||||||
<span class="line"></span>
|
<span class="line"></span>
|
||||||
<span class="about_cn">{{ imgTextItem.cnTitle }}</span>
|
<span class="about_cn">{{ imgTextItem.cnTitle }}</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -138,7 +141,7 @@ export default {
|
||||||
line-height: 28.8px;
|
line-height: 28.8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
b {
|
.num_bold {
|
||||||
color: #444;
|
color: #444;
|
||||||
line-height: 46px;
|
line-height: 46px;
|
||||||
margin: 0 4px 0 0;
|
margin: 0 4px 0 0;
|
||||||
|
|
@ -146,7 +149,9 @@ export default {
|
||||||
font-family: arial;
|
font-family: arial;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
.num_title:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
.num_title {
|
.num_title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
|
@ -158,6 +163,20 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.culture_1 {
|
||||||
|
.img_box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: auto !important;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgAndText:hover {
|
||||||
|
img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.imgAndText {
|
.imgAndText {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
|
|
@ -172,7 +191,6 @@ export default {
|
||||||
|
|
||||||
.pic {
|
.pic {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
@ -187,34 +205,45 @@ export default {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgba(32, 31, 37, 0.5);
|
background-color: rgba(32, 31, 37, 0.5);
|
||||||
|
|
||||||
.img_innerBox {
|
.img_innerBox {
|
||||||
width: 100%;
|
display: block;
|
||||||
display: inline-block;
|
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
.about_en{
|
|
||||||
color: #e0c9aa;
|
.its {
|
||||||
font-size: 22px;
|
display: inline-block;
|
||||||
float: left;
|
width: 100%;
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: arial;
|
.about_en {
|
||||||
span:first-child{
|
color: #e0c9aa;
|
||||||
font-weight: bold;
|
font-size: 22px;
|
||||||
margin-right: 10px;
|
float: left;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 39.6px;
|
||||||
|
font-family: arial;
|
||||||
|
|
||||||
|
span:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
clear: both;
|
||||||
|
width: 50px;
|
||||||
|
height: 1px;
|
||||||
|
float: left;
|
||||||
|
margin: 3px 0;
|
||||||
|
background-color: #e2c9ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_cn {
|
||||||
|
color: #e0c9aa;
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.line{
|
|
||||||
clear: both;
|
|
||||||
width: 50px;
|
|
||||||
height: 1px;
|
|
||||||
float: left;
|
|
||||||
margin: 3px 0;
|
|
||||||
background-color: #e2c9ab;
|
|
||||||
}
|
|
||||||
.about_cn{
|
|
||||||
color: #e0c9aa;
|
|
||||||
clear: both;
|
|
||||||
float: left;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
<template>
|
||||||
|
<div class="newsCenter">
|
||||||
|
<div class="news_bg">
|
||||||
|
</div>
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :span="4"></el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<div>
|
||||||
|
<div class="news_left">
|
||||||
|
<div class="items">
|
||||||
|
<h2>新闻资讯</h2>
|
||||||
|
<div class="en_title">
|
||||||
|
<span>NEWS</span>
|
||||||
|
CENTER
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="summary">{{ news_summary }}</div>
|
||||||
|
<div class="line2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news_right">
|
||||||
|
<div class="classify">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in classifyList" :key="index">
|
||||||
|
<a :href="item.href">{{ item.title }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="news_content">
|
||||||
|
<div class="news_items">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in itemList" :key="index">
|
||||||
|
<div class="pics">
|
||||||
|
<a :href="item.href">
|
||||||
|
<img :src="item.src" alt=""/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">
|
||||||
|
<a :href="item.href">{{ item.title }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="smy">{{ item.smy }}</div>
|
||||||
|
<div class="dates">发布时间：{{ item.dates }}</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "NewsCenter",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
news_summary: '坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。',
|
||||||
|
classifyList: [
|
||||||
|
{
|
||||||
|
href: '',
|
||||||
|
title: '公司新闻'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '',
|
||||||
|
title: '行业动态'
|
||||||
|
}, {
|
||||||
|
href: '',
|
||||||
|
title: '瓷砖百科'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
itemList: [
|
||||||
|
{
|
||||||
|
href: '',
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367sss.jpg',
|
||||||
|
title: '【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间。',
|
||||||
|
smy: '...',
|
||||||
|
dates: '2022-7-28'
|
||||||
|
}, {
|
||||||
|
href: '',
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960sss.jpg',
|
||||||
|
title: 'EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。',
|
||||||
|
smy: '...',
|
||||||
|
dates: '2022-7-7'
|
||||||
|
}, {
|
||||||
|
href: '',
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20220706/16570891341430082sss.jpg',
|
||||||
|
title: '艺鹏·科普 | 为什么微水泥瓷砖那么火爆？让我们一探究竟！',
|
||||||
|
smy: '...',
|
||||||
|
dates: '2022-7-6'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.newsCenter {
|
||||||
|
.news_bg {
|
||||||
|
margin: 0 60px;
|
||||||
|
background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
|
||||||
|
background-size: cover;
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_left {
|
||||||
|
width: 30%;
|
||||||
|
float: left;
|
||||||
|
padding: 90px 0;
|
||||||
|
background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
display: block;
|
||||||
|
padding: 35px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.en_title {
|
||||||
|
line-height: 25px;
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #a1182c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 30px;
|
||||||
|
height: 3px;
|
||||||
|
margin: 0 0 0 3px;
|
||||||
|
font-size: 0;
|
||||||
|
background-color: #a1182c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
color: #666;
|
||||||
|
padding: 60px 0;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line2 {
|
||||||
|
width: 2px;
|
||||||
|
height: 120px;
|
||||||
|
float: left;
|
||||||
|
font-size: 0px;
|
||||||
|
background-color: #a1182c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_right {
|
||||||
|
.classify {
|
||||||
|
width: 70%;
|
||||||
|
float: right;
|
||||||
|
padding: 40px 0 0 0;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
li {
|
||||||
|
float: right;
|
||||||
|
margin: 0 0 0 15px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 8px 14px;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #a21a2c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_content {
|
||||||
|
width: 70%;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.news_items {
|
||||||
|
display: block;
|
||||||
|
padding: 0 0 0 30px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0 0;
|
||||||
|
li{
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
.pics{
|
||||||
|
width: 175px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 15px;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
.title{
|
||||||
|
line-height: 28.8px;
|
||||||
|
font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
a{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.smy{
|
||||||
|
color: #777;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
.dates{
|
||||||
|
color: #777;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 21.6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<ProductsShow/>
|
<ProductsShow/>
|
||||||
<ProjectCase/>
|
<ProjectCase/>
|
||||||
<AboutUs/>
|
<AboutUs/>
|
||||||
|
<NewsCenter/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -16,10 +17,11 @@ import ProductsClassify from "@/components/ProductsClassify";
|
||||||
import ProductsShow from "@/components/ProductsShow";
|
import ProductsShow from "@/components/ProductsShow";
|
||||||
import ProjectCase from "@/components/ProjectCase";
|
import ProjectCase from "@/components/ProjectCase";
|
||||||
import AboutUs from "@/components/AboutUs";
|
import AboutUs from "@/components/AboutUs";
|
||||||
|
import NewsCenter from "@/components/NewsCenter";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
components: {AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
|
components: {NewsCenter, AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue