邓洁 : 首页响应式处理
This commit is contained in:
邓洁
parent
ab8db3aa4d
commit
7b7ddf729b
|
|
@ -42,7 +42,7 @@ export default {
|
||||||
*{
|
*{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
|
//font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
|
||||||
}
|
}
|
||||||
a{
|
a{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="aboutUs">
|
<div class="aboutUs">
|
||||||
<el-row type="flex">
|
<el-row style="">
|
||||||
<el-col :span="4">
|
<el-row>
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<div class="about_title">
|
<div class="about_title">
|
||||||
<h2>关于我们</h2>
|
<h2>关于我们</h2>
|
||||||
<h3>—— ABOUT US ——</h3>
|
<h3>—— ABOUT US ——</h3>
|
||||||
|
|
@ -11,24 +9,25 @@
|
||||||
<div class="about_text">
|
<div class="about_text">
|
||||||
{{ aboutContent }}
|
{{ aboutContent }}
|
||||||
</div>
|
</div>
|
||||||
<el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
|
</el-row>
|
||||||
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
|
<el-row style="margin: 0 60px">
|
||||||
<p>
|
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
|
||||||
<b class="num_bold">{{ numItem.num }}</b>
|
<p>
|
||||||
<span>{{ numItem.units }}</span>
|
<b class="num_bold">{{ numItem.num }}</b>
|
||||||
</p>
|
<span>{{ numItem.units }}</span>
|
||||||
<p>{{ numItem.title }}</p>
|
</p>
|
||||||
</el-col>
|
<p>{{ numItem.title }}</p>
|
||||||
</el-row>
|
</el-col>
|
||||||
<el-row :gutter="10" style="padding: 0 5% ">
|
</el-row>
|
||||||
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
<el-row :gutter="10" style="padding: 0 5% ">
|
||||||
:class="'culture_'+imgTextIndex">
|
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
||||||
<div class="imgAndText">
|
:class="'culture_'+imgTextIndex">
|
||||||
<a :href="imgTextItem.href">
|
<div class="imgAndText">
|
||||||
<span class="pic">
|
<a :href="imgTextItem.href">
|
||||||
<img :src="imgTextItem.src" alt=""/>
|
<span class="pic">
|
||||||
</span>
|
<img :src="imgTextItem.src" alt=""/>
|
||||||
<span class="img_box">
|
</span>
|
||||||
|
<span class="img_box">
|
||||||
<span class="img_innerBox">
|
<span class="img_innerBox">
|
||||||
<span class="its">
|
<span class="its">
|
||||||
<span class="about_en">
|
<span class="about_en">
|
||||||
|
|
@ -40,11 +39,10 @@
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -104,9 +102,22 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
*{
|
||||||
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1660px) {
|
||||||
|
.aboutUs {
|
||||||
|
width: 1200px !important;
|
||||||
|
}
|
||||||
|
.img_innerBox {
|
||||||
|
padding: 20px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.aboutUs {
|
.aboutUs {
|
||||||
min-width: 1300px;
|
min-width: 1300px;
|
||||||
margin-bottom: 50px;
|
width: 1360px;
|
||||||
|
margin: 0 auto 50px auto;
|
||||||
|
|
||||||
.about_title {
|
.about_title {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -142,26 +153,30 @@ export default {
|
||||||
line-height: 28.8px;
|
line-height: 28.8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num_bold {
|
|
||||||
color: #444;
|
|
||||||
line-height: 46px;
|
|
||||||
margin: 0 4px 0 0;
|
|
||||||
font-size: 40px;
|
|
||||||
font-family: arial;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.num_title:last-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.num_title {
|
.num_title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
border-right: 1px solid #e5e5e5;
|
border-right: 1px solid #e5e5e5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
.num_bold {
|
||||||
|
color: #444;
|
||||||
|
line-height: 46px;
|
||||||
|
margin: 0 4px 0 0;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: arial;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
p:last-child {
|
p:last-child {
|
||||||
line-height: 25.2px;
|
line-height: 25.2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.num_title:last-child {
|
||||||
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.culture_1 {
|
.culture_1 {
|
||||||
|
|
@ -195,6 +210,7 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: all 0.6s;
|
transition: all 0.6s;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="slideshow">
|
<div class="slideshow">
|
||||||
<el-carousel trigger="click" height="36.2vw">
|
<el-carousel trigger="click" height="36.2vw" style="min-width: 1300px;">
|
||||||
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
||||||
<div>
|
<img :src="item.imgurl" alt="">
|
||||||
<img :src="item.imgurl" alt="">
|
</el-carousel-item>
|
||||||
</div>
|
</el-carousel>
|
||||||
</el-carousel-item>
|
</div>
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -26,18 +24,28 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
<style scoped>
|
@media screen and (max-width: 1320px) {
|
||||||
.slideshow {
|
/deep/.el-carousel__container{
|
||||||
width: 100%;
|
height: 44vh!important;
|
||||||
min-width: 1300px;
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
/deep/.el-carousel__container{
|
||||||
|
height: 58vh!important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slideshow {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
/*.carousel_img {*/
|
||||||
|
/* width: 100%;*/
|
||||||
|
/*}*/
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -192,6 +192,9 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
*{
|
||||||
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
}
|
||||||
@media screen and (max-width: 1660px) {
|
@media screen and (max-width: 1660px) {
|
||||||
.fastFind {
|
.fastFind {
|
||||||
width: 1230px !important;
|
width: 1230px !important;
|
||||||
|
|
|
||||||
|
|
@ -2,54 +2,54 @@
|
||||||
<div class="newsCenter">
|
<div class="newsCenter">
|
||||||
<div class="news_bg">
|
<div class="news_bg">
|
||||||
</div>
|
</div>
|
||||||
<el-row type="flex">
|
<!-- <el-row type="flex" >-->
|
||||||
<el-col :span="4"></el-col>
|
<!-- <el-col :span="4"></el-col>-->
|
||||||
<el-col :span="16">
|
<!-- <el-col :span="16">-->
|
||||||
<div>
|
<div class="newsWidth">
|
||||||
<div class="news_left">
|
<div class="news_left">
|
||||||
<div class="items">
|
<div class="items">
|
||||||
<h2>新闻资讯</h2>
|
<h2>新闻资讯</h2>
|
||||||
<div class="en_title">
|
<div class="en_title">
|
||||||
<span>NEWS</span>
|
<span>NEWS</span>
|
||||||
CENTER
|
CENTER
|
||||||
</div>
|
|
||||||
<div class="line"></div>
|
|
||||||
<div class="summary">{{ news_summary }}</div>
|
|
||||||
<div class="line2"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="news_right">
|
<div class="line"></div>
|
||||||
<div class="classify">
|
<div class="summary">{{ news_summary }}</div>
|
||||||
<ul>
|
<div class="line2"></div>
|
||||||
<li v-for="(item,index) in classifyList" :key="index">
|
</div>
|
||||||
<a :href="item.href">{{ item.title }}</a>
|
</div>
|
||||||
</li>
|
<div class="news_right">
|
||||||
</ul>
|
<div class="classify">
|
||||||
</div>
|
<ul>
|
||||||
<div class="news_content">
|
<li v-for="(item,index) in classifyList" :key="index">
|
||||||
<div class="news_items">
|
<a :href="item.href">{{ item.title }}</a>
|
||||||
<ul>
|
</li>
|
||||||
<li v-for="(item,index) in itemList" :key="index">
|
</ul>
|
||||||
<div class="pics">
|
</div>
|
||||||
<a :href="item.href">
|
<div class="news_content">
|
||||||
<img :src="item.src" alt=""/>
|
<div class="news_items">
|
||||||
</a>
|
<ul>
|
||||||
</div>
|
<li v-for="(item,index) in itemList" :key="index">
|
||||||
<div class="info">
|
<div class="pics">
|
||||||
<div class="title">
|
<a :href="item.href">
|
||||||
<a :href="item.href">{{ item.title }}</a>
|
<img :src="item.src" alt=""/>
|
||||||
</div>
|
</a>
|
||||||
<div class="smy">{{ item.smy }}</div>
|
</div>
|
||||||
<div class="dates">发布时间：{{ item.dates }}</div>
|
<div class="info">
|
||||||
</div>
|
<div class="title">
|
||||||
</li>
|
<a :href="item.href">{{ item.title }}</a>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div class="smy">{{ item.smy }}</div>
|
||||||
</div>
|
<div class="dates">发布时间：{{ item.dates }}</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</div>
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- </el-row>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -99,143 +99,168 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@media screen and (max-width: 1660px) {
|
||||||
|
.newsWidth {
|
||||||
|
width: 1230px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1480px) {
|
||||||
|
.newsWidth {
|
||||||
|
width: 1100px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.newsCenter {
|
.newsCenter {
|
||||||
min-width: 1300px;
|
min-width: 1300px;
|
||||||
|
|
||||||
.news_bg {
|
.news_bg {
|
||||||
//min-width: 1300px;
|
|
||||||
background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
|
background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 380px;
|
height: 380px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news_left {
|
.newsWidth {
|
||||||
width: 30%;
|
width: 1360px;
|
||||||
float: left;
|
margin: 0 auto;
|
||||||
padding: 90px 0;
|
|
||||||
background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
|
|
||||||
|
|
||||||
.items {
|
.news_left {
|
||||||
display: block;
|
width: 30%;
|
||||||
padding: 35px;
|
float: left;
|
||||||
|
padding: 90px 0;
|
||||||
|
background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
|
||||||
|
|
||||||
h2 {
|
.items {
|
||||||
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;
|
display: block;
|
||||||
padding: 0 0 0 30px;
|
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 {
|
ul {
|
||||||
display: inline-block;
|
float: right;
|
||||||
width: 100%;
|
|
||||||
margin: 10px 0 0;
|
li {
|
||||||
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;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 0;
|
margin: 10px 0 0;
|
||||||
border-bottom: 1px solid #e9e9e9;
|
|
||||||
.pics{
|
li {
|
||||||
width: 175px;
|
display: inline-block;
|
||||||
float: left;
|
width: 100%;
|
||||||
margin-right: 15px;
|
padding: 20px 0;
|
||||||
img{
|
border-bottom: 1px solid #e9e9e9;
|
||||||
width: 100%;
|
|
||||||
}
|
.pics {
|
||||||
}
|
width: 175px;
|
||||||
.info{
|
float: left;
|
||||||
.title{
|
margin-right: 15px;
|
||||||
line-height: 28.8px;
|
|
||||||
font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
img {
|
||||||
a{
|
width: 100%;
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
a:hover{
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.smy{
|
|
||||||
color: #777;
|
.info {
|
||||||
padding: 6px 0;
|
.title {
|
||||||
}
|
line-height: 28.8px;
|
||||||
.dates{
|
font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
color: #777;
|
|
||||||
font-size: 12px;
|
a {
|
||||||
line-height: 21.6px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<el-row type="flex">
|
<div class="grid_box">
|
||||||
<el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
|
<div class="grid_left">
|
||||||
</el-col>
|
<a href="">
|
||||||
<el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="16">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<div class="grid_left">
|
|
||||||
<a href="">
|
|
||||||
<span class="pic">
|
<span class="pic">
|
||||||
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
|
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
|
||||||
</span>
|
</span>
|
||||||
<span class="info">产品分类</span>
|
<span class="info">产品分类</span>
|
||||||
<span>了解更多</span>
|
<span>了解更多</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
<div class="grid_right">
|
||||||
<el-col :span="16">
|
<ul>
|
||||||
<div class="grid_right">
|
<li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
|
||||||
<ul>
|
<a :href="picItem.href">
|
||||||
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
|
<span class="pics">
|
||||||
<a :href="picItem.href">
|
<img :src="picItem.src" alt=""/>
|
||||||
<span>
|
</span>
|
||||||
<img :src="picItem.src" alt=""/>
|
<span class="info">{{ picItem.name }}</span>
|
||||||
</span>
|
</a>
|
||||||
<span class="info">{{ picItem.name }}</span>
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -69,95 +59,151 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.grid {
|
@media screen and (max-width: 1660px) {
|
||||||
padding: 50px 0 60px 0;
|
.grid_box {
|
||||||
background-color: #f9f9f9;
|
width: 1230px !important;
|
||||||
|
|
||||||
.grid_left:hover {
|
|
||||||
filter: brightness(85%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
.pic{
|
||||||
.grid_left {
|
img{
|
||||||
position: relative;
|
width: 400px !important;
|
||||||
display: inline-block;
|
}
|
||||||
transition: all 0.6s;
|
}
|
||||||
|
.grid_right {
|
||||||
a {
|
ul {
|
||||||
.pic {
|
li {
|
||||||
img {
|
a {
|
||||||
width: 440px;
|
width:360px !important;
|
||||||
|
height: 267px!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span:last-child {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 160px;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
margin: 20px 0 0 -80px;
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #de832f;
|
|
||||||
border-radius: 100px 100px 100px 100px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.info {
|
@media screen and (max-width: 1480px) {
|
||||||
color: #fff;
|
.grid_box {
|
||||||
position: absolute;
|
width: 1100px !important;
|
||||||
top: 42%;
|
}
|
||||||
left: 0;
|
.pic{
|
||||||
width: 100%;
|
img{
|
||||||
font-size: 34px;
|
width: 385px !important;
|
||||||
font-weight: bold;
|
}
|
||||||
letter-spacing: 2px;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 999;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid_right {
|
.grid_right {
|
||||||
float: right;
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-top: -5px;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
span:first-child {
|
|
||||||
width: 100%;
|
|
||||||
filter: alpha(opacity=94);
|
|
||||||
-moz-opacity: 0.94;
|
|
||||||
opacity: 0.94;
|
|
||||||
transition: all 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
height: 296px;
|
width:341px !important;
|
||||||
position: relative;
|
height: 258px!important;
|
||||||
display: inline-block;
|
}
|
||||||
background-color: #066090;
|
}
|
||||||
overflow: hidden;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50px 0 60px 0;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
position: relative;
|
||||||
|
min-width: 1270px;
|
||||||
|
display: flex;
|
||||||
|
.grid_box {
|
||||||
|
width: 1360px;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.grid_left:hover {
|
||||||
|
filter: brightness(85%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid_left {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.6s;
|
||||||
|
display: block;
|
||||||
|
padding: 6px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #000;
|
||||||
|
|
||||||
|
.pic {
|
||||||
|
transition: all 0.6s;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 440px;
|
width: 440px;
|
||||||
height: 296px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.6s;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img:hover {
|
span:last-child {
|
||||||
filter: brightness(85%);
|
color: #fff;
|
||||||
opacity: 1;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 160px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
margin: 20px 0 0 -80px;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #de832f;
|
||||||
|
border-radius: 100px 100px 100px 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 42%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid_right {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 444px;
|
||||||
|
height: 295px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #066090;
|
||||||
|
|
||||||
|
span:first-child {
|
||||||
|
width: 100%;
|
||||||
|
filter: alpha(opacity=94);
|
||||||
|
-moz-opacity: 0.94;
|
||||||
|
opacity: 0.94;
|
||||||
|
transition: all 0.6s;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:hover {
|
||||||
|
filter: brightness(85%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" style="width: 987px;margin: 0 auto">
|
<el-row type="flex" style="justify-content: center">
|
||||||
<!-- <el-col :span="4">-->
|
<!-- <el-col :span="4">-->
|
||||||
<!-- </el-col>-->
|
<!-- </el-col>-->
|
||||||
<!-- <el-col :span="16" class="tagRow">-->
|
<!-- <el-col :span="16" class="tagRow">-->
|
||||||
|
|
@ -70,6 +70,9 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
*{
|
||||||
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
}
|
||||||
.el-tag:hover{
|
.el-tag:hover{
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
a{
|
a{
|
||||||
|
|
@ -87,7 +90,6 @@ export default {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.el-tag {
|
.el-tag {
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
|
|
|
||||||
|
|
@ -10,16 +10,27 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div class="case_example">
|
<el-row type="flex">
|
||||||
<ul>
|
<el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
|
||||||
<li v-for="item in projectList" :key="item.src" @click="handleOpenImage">
|
<el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
|
||||||
<div class="pics">
|
<el-row type="flex">
|
||||||
<img :src="item.src" alt=""/>
|
<el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
|
||||||
</div>
|
<ul>
|
||||||
<div class="case_info">{{ item.projectName }}</div>
|
<li>
|
||||||
</li>
|
<div class="pics">
|
||||||
</ul>
|
<el-image
|
||||||
</div>
|
class="img"
|
||||||
|
:src="item.src"
|
||||||
|
:preview-src-list="imgBigList">
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
<div class="case_info">{{ item.projectName }}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -44,7 +55,8 @@ export default {
|
||||||
}, {
|
}, {
|
||||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||||
projectName: '财政局大厦'
|
projectName: '财政局大厦'
|
||||||
}, {
|
}
|
||||||
|
, {
|
||||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||||
projectName: '西安市雅盛大厦'
|
projectName: '西安市雅盛大厦'
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -58,41 +70,35 @@ export default {
|
||||||
projectName: '金湖花园'
|
projectName: '金湖花园'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
imgBigList:[
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg',
|
||||||
|
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg',
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
handleOpenImage(){
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
//@media screen and (max-width: 1660px) {
|
.el-row--flex {
|
||||||
// .pics {
|
display: flex;
|
||||||
// img {
|
flex-wrap: wrap;
|
||||||
// height: 221px!important;
|
}
|
||||||
// }
|
|
||||||
// }
|
* {
|
||||||
// .case_example {
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
// width: 1230px !important;
|
}
|
||||||
// }
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//@media screen and (max-width: 1480px) {
|
|
||||||
// .pics {
|
|
||||||
// img {
|
|
||||||
// height: 196px!important;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .case_example {
|
|
||||||
// width: 1100px !important;
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
.projectCase {
|
.projectCase {
|
||||||
height: 970px;
|
min-height: 900px;
|
||||||
|
|
||||||
.case_bg {
|
.case_bg {
|
||||||
min-width: 1300px;
|
min-width: 1300px;
|
||||||
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
|
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
|
||||||
|
|
@ -127,6 +133,10 @@ export default {
|
||||||
margin: 20px 0 0;
|
margin: 20px 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #e2c8ab;
|
color: #e2c8ab;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -140,10 +150,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.case_example {
|
.case_example {
|
||||||
width: 1360px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px 10px;
|
padding: 10px 10px 0 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
li:last-child {
|
li:last-child {
|
||||||
|
|
@ -156,35 +164,37 @@ export default {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 17px;
|
margin-right: 9px;
|
||||||
|
|
||||||
.pics {
|
.pics {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 0 5px 0;
|
margin: 0 0 5px 0;
|
||||||
img {
|
|
||||||
height: 245px;
|
.img {
|
||||||
object-fit: cover;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
transition: all 0.6s;
|
transition: all 0.6s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
img:hover {
|
|
||||||
|
.img:hover {
|
||||||
|
filter: brightness(85%);
|
||||||
|
opacity: 1;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.case_info {
|
.case_info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 28.8px;
|
line-height: 28.8px;
|
||||||
margin: 0 0 5px 0;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -193,6 +193,9 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
*{
|
||||||
|
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||||
|
}
|
||||||
@media screen and (max-width: 1660px) {
|
@media screen and (max-width: 1660px) {
|
||||||
.down_header {
|
.down_header {
|
||||||
width: 1230px!important;
|
width: 1230px!important;
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,312 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="news">
|
||||||
新闻
|
<!-- 顶部图片 -->
|
||||||
</div>
|
<div class="ui-h">
|
||||||
|
<div class="said">
|
||||||
|
<p class="tit2"></p>
|
||||||
|
<p>新闻资讯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--标签栏 -->
|
||||||
|
<div class="pt-top">
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :span="1"></el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<div class="list">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in tagList" :key="index"
|
||||||
|
>
|
||||||
|
<a class="oncname">{{ item.tag }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="classname" v-model="tagList">新闻资讯</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<!--图片栏-->
|
||||||
|
<div class="pt-list">
|
||||||
|
<div class="list2">
|
||||||
|
<ul>
|
||||||
|
<el-row type="flex" justify="space-around">
|
||||||
|
<el-col :span="1"></el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<li v-for="(item,index) in imageAndWord"
|
||||||
|
:key="index">
|
||||||
|
<div class="item">
|
||||||
|
<a>
|
||||||
|
<div class="pic">
|
||||||
|
<img :src="item.imgUrl" alt="">
|
||||||
|
</div>
|
||||||
|
<span class="inf">{{ item.word }}</span>
|
||||||
|
<span class="dates">{{ item.date }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--页码-->
|
||||||
|
<!-- <el-pagination-->
|
||||||
|
<!-- background-->
|
||||||
|
<!-- layout="prev, pager, next"-->
|
||||||
|
<!-- :total="1000">-->
|
||||||
|
<!-- </el-pagination>-->
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "index"
|
name: "index",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imageAndWord: [
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||||
|
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||||
|
date: "2022.7.28"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||||
|
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||||
|
date: "2022.7.28"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||||
|
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||||
|
date: "2022.7.28"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||||
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
|
date: "2022.7.7"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tagList: [
|
||||||
|
{
|
||||||
|
tag: '全部'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: '公司新闻'
|
||||||
|
}, {
|
||||||
|
tag: '行业动态'
|
||||||
|
}, {
|
||||||
|
tag: '瓷砖百科'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.news{
|
||||||
|
height: 1200px;
|
||||||
|
}
|
||||||
|
.ui-h {
|
||||||
|
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
float: left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-h .said {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
padding: 10px 60px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-color: rgba(254, 254, 254, 0.9);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-h .said p.tit2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-h .said p {
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
float: left;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pt-top .list {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top .list ul li {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
height: 54px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top .list ul li {
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-left: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top .list ul li:last-child {
|
||||||
|
border-right: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top .list ul li a.oncname {
|
||||||
|
color: #333;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
line-height: 55px;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.pt-top .list ul li a .oncname:hover{
|
||||||
|
text-decoration: 1px solid #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-top .classname {
|
||||||
|
color: #333;
|
||||||
|
height: 55px;
|
||||||
|
line-height: 55px;
|
||||||
|
float: left;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list {
|
||||||
|
/*width: 1140px;*/
|
||||||
|
float: left;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 {
|
||||||
|
/*width: 1265px;*/
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul {
|
||||||
|
width: 100%;
|
||||||
|
/*display: flex;*/
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li {
|
||||||
|
width: 347px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item {
|
||||||
|
display: block;
|
||||||
|
padding: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a .pic {
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 6px;
|
||||||
|
/*border: 1px solid #e9e9e9;*/
|
||||||
|
/*background-color: #000;*/
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a .pic img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a:hover .pic img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0.8;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a span.inf {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt-list .list2 ul li .item a span.dates {
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue