邓洁 : 首页响应式处理 #9
|
|
@ -42,7 +42,7 @@ export default {
|
|||
*{
|
||||
padding: 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{
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div class="aboutUs">
|
||||
<el-row type="flex">
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row style="">
|
||||
<el-row>
|
||||
<div class="about_title">
|
||||
<h2>关于我们</h2>
|
||||
<h3>—— ABOUT US ——</h3>
|
||||
|
|
@ -11,24 +9,25 @@
|
|||
<div class="about_text">
|
||||
{{ aboutContent }}
|
||||
</div>
|
||||
<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">
|
||||
<p>
|
||||
<b class="num_bold">{{ numItem.num }}</b>
|
||||
<span>{{ numItem.units }}</span>
|
||||
</p>
|
||||
<p>{{ numItem.title }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" style="padding: 0 5% ">
|
||||
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
||||
:class="'culture_'+imgTextIndex">
|
||||
<div class="imgAndText">
|
||||
<a :href="imgTextItem.href">
|
||||
<span class="pic">
|
||||
<img :src="imgTextItem.src" alt=""/>
|
||||
</span>
|
||||
<span class="img_box">
|
||||
</el-row>
|
||||
<el-row style="margin: 0 60px">
|
||||
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
|
||||
<p>
|
||||
<b class="num_bold">{{ numItem.num }}</b>
|
||||
<span>{{ numItem.units }}</span>
|
||||
</p>
|
||||
<p>{{ numItem.title }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" style="padding: 0 5% ">
|
||||
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
||||
:class="'culture_'+imgTextIndex">
|
||||
<div class="imgAndText">
|
||||
<a :href="imgTextItem.href">
|
||||
<span class="pic">
|
||||
<img :src="imgTextItem.src" alt=""/>
|
||||
</span>
|
||||
<span class="img_box">
|
||||
<span class="img_innerBox">
|
||||
<span class="its">
|
||||
<span class="about_en">
|
||||
|
|
@ -40,11 +39,10 @@
|
|||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -104,9 +102,22 @@ export default {
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
min-width: 1300px;
|
||||
margin-bottom: 50px;
|
||||
width: 1360px;
|
||||
margin: 0 auto 50px auto;
|
||||
|
||||
.about_title {
|
||||
display: inline;
|
||||
|
|
@ -142,26 +153,30 @@ export default {
|
|||
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 {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
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 {
|
||||
line-height: 25.2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.num_title:last-child {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.culture_1 {
|
||||
|
|
@ -195,6 +210,7 @@ export default {
|
|||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<template>
|
||||
<div class="slideshow">
|
||||
<el-carousel trigger="click" height="36.2vw">
|
||||
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
||||
<div>
|
||||
<img :src="item.imgurl" alt="">
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="slideshow">
|
||||
<el-carousel trigger="click" height="36.2vw" style="min-width: 1300px;">
|
||||
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
|
||||
<img :src="item.imgurl" alt="">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -26,18 +24,28 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slideshow {
|
||||
width: 100%;
|
||||
min-width: 1300px;
|
||||
<style scoped lang="scss">
|
||||
@media screen and (max-width: 1320px) {
|
||||
/deep/.el-carousel__container{
|
||||
height: 44vh!important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
/deep/.el-carousel__container{
|
||||
height: 58vh!important;
|
||||
}
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
width:100%;
|
||||
}
|
||||
/*.carousel_img {*/
|
||||
/* width: 100%;*/
|
||||
/*}*/
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -192,6 +192,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<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) {
|
||||
.fastFind {
|
||||
width: 1230px !important;
|
||||
|
|
|
|||
|
|
@ -2,54 +2,54 @@
|
|||
<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>
|
||||
<!-- <el-row type="flex" >-->
|
||||
<!-- <el-col :span="4"></el-col>-->
|
||||
<!-- <el-col :span="16">-->
|
||||
<div class="newsWidth">
|
||||
<div class="news_left">
|
||||
<div class="items">
|
||||
<h2>新闻资讯</h2>
|
||||
<div class="en_title">
|
||||
<span>NEWS</span>
|
||||
CENTER
|
||||
</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 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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -99,143 +99,168 @@ export default {
|
|||
</script>
|
||||
|
||||
<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 {
|
||||
min-width: 1300px;
|
||||
|
||||
.news_bg {
|
||||
//min-width: 1300px;
|
||||
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;
|
||||
.newsWidth {
|
||||
width: 1360px;
|
||||
margin: 0 auto;
|
||||
|
||||
.items {
|
||||
display: block;
|
||||
padding: 35px;
|
||||
.news_left {
|
||||
width: 30%;
|
||||
float: left;
|
||||
padding: 90px 0;
|
||||
background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
|
||||
|
||||
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 {
|
||||
.items {
|
||||
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 {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 10px 0 0;
|
||||
li{
|
||||
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%;
|
||||
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;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
.smy{
|
||||
color: #777;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.dates{
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
line-height: 21.6px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,28 @@
|
|||
<template>
|
||||
<div class="grid">
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
|
||||
</el-col>
|
||||
<el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="16">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid_left">
|
||||
<a href="">
|
||||
<div class="grid_box">
|
||||
<div class="grid_left">
|
||||
<a href="">
|
||||
<span class="pic">
|
||||
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
|
||||
</span>
|
||||
<span class="info">产品分类</span>
|
||||
<span>了解更多</span>
|
||||
</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="grid_right">
|
||||
<ul>
|
||||
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
|
||||
<a :href="picItem.href">
|
||||
<span>
|
||||
<img :src="picItem.src" alt=""/>
|
||||
</span>
|
||||
<span class="info">{{ picItem.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span class="info">产品分类</span>
|
||||
<span>了解更多</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid_right">
|
||||
<ul>
|
||||
<li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
|
||||
<a :href="picItem.href">
|
||||
<span class="pics">
|
||||
<img :src="picItem.src" alt=""/>
|
||||
</span>
|
||||
<span class="info">{{ picItem.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -69,95 +59,151 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid {
|
||||
padding: 50px 0 60px 0;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.grid_left:hover {
|
||||
filter: brightness(85%);
|
||||
opacity: 1;
|
||||
@media screen and (max-width: 1660px) {
|
||||
.grid_box {
|
||||
width: 1230px !important;
|
||||
}
|
||||
|
||||
.grid_left {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: all 0.6s;
|
||||
|
||||
a {
|
||||
.pic {
|
||||
img {
|
||||
width: 440px;
|
||||
.pic{
|
||||
img{
|
||||
width: 400px !important;
|
||||
}
|
||||
}
|
||||
.grid_right {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
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 {
|
||||
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;
|
||||
@media screen and (max-width: 1480px) {
|
||||
.grid_box {
|
||||
width: 1100px !important;
|
||||
}
|
||||
.pic{
|
||||
img{
|
||||
width: 385px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_right {
|
||||
float: right;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
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 {
|
||||
height: 296px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #066090;
|
||||
overflow: hidden;
|
||||
width:341px !important;
|
||||
height: 258px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 440px;
|
||||
height: 296px;
|
||||
overflow: hidden;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
img:hover {
|
||||
filter: brightness(85%);
|
||||
opacity: 1;
|
||||
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 {
|
||||
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>
|
||||
</el-col>
|
||||
</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>-->
|
||||
<!-- <el-col :span="16" class="tagRow">-->
|
||||
|
|
@ -70,6 +70,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
*{
|
||||
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||
}
|
||||
.el-tag:hover{
|
||||
background-color: #333;
|
||||
a{
|
||||
|
|
@ -87,7 +90,6 @@ export default {
|
|||
margin-right: 0;
|
||||
}
|
||||
.el-tag {
|
||||
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
padding: 0 12px;
|
||||
|
|
|
|||
|
|
@ -10,16 +10,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="case_example">
|
||||
<ul>
|
||||
<li v-for="item in projectList" :key="item.src" @click="handleOpenImage">
|
||||
<div class="pics">
|
||||
<img :src="item.src" alt=""/>
|
||||
</div>
|
||||
<div class="case_info">{{ item.projectName }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
|
||||
<el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
|
||||
<el-row type="flex">
|
||||
<el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="pics">
|
||||
<el-image
|
||||
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>
|
||||
</template>
|
||||
|
|
@ -44,7 +55,8 @@ export default {
|
|||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
projectName: '财政局大厦'
|
||||
}, {
|
||||
}
|
||||
, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
projectName: '西安市雅盛大厦'
|
||||
}, {
|
||||
|
|
@ -58,41 +70,35 @@ export default {
|
|||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
//@media screen and (max-width: 1660px) {
|
||||
// .pics {
|
||||
// img {
|
||||
// height: 221px!important;
|
||||
// }
|
||||
// }
|
||||
// .case_example {
|
||||
// width: 1230px !important;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media screen and (max-width: 1480px) {
|
||||
// .pics {
|
||||
// img {
|
||||
// height: 196px!important;
|
||||
// }
|
||||
// }
|
||||
// .case_example {
|
||||
// width: 1100px !important;
|
||||
// }
|
||||
//}
|
||||
.el-row--flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
* {
|
||||
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||
}
|
||||
|
||||
.projectCase {
|
||||
height: 970px;
|
||||
min-height: 900px;
|
||||
|
||||
.case_bg {
|
||||
min-width: 1300px;
|
||||
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
|
||||
|
|
@ -127,6 +133,10 @@ export default {
|
|||
margin: 20px 0 0;
|
||||
text-align: center;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #e2c8ab;
|
||||
display: inline-block;
|
||||
|
|
@ -140,10 +150,8 @@ export default {
|
|||
}
|
||||
|
||||
.case_example {
|
||||
width: 1360px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 20px 10px;
|
||||
padding: 10px 10px 0 10px;
|
||||
|
||||
ul {
|
||||
li:last-child {
|
||||
|
|
@ -156,35 +164,37 @@ export default {
|
|||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 17px;
|
||||
margin-right: 9px;
|
||||
|
||||
.pics {
|
||||
overflow: hidden;
|
||||
margin: 0 0 5px 0;
|
||||
img {
|
||||
height: 245px;
|
||||
object-fit: cover;
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
transition: all 0.6s;
|
||||
cursor: pointer;
|
||||
}
|
||||
img:hover {
|
||||
|
||||
.img:hover {
|
||||
filter: brightness(85%);
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.case_info {
|
||||
width: 100%;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 28.8px;
|
||||
margin: 0 0 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -193,6 +193,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<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) {
|
||||
.down_header {
|
||||
width: 1230px!important;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,312 @@
|
|||
<template>
|
||||
<div>
|
||||
新闻
|
||||
</div>
|
||||
<div class="news">
|
||||
<!-- 顶部图片 -->
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue