邓洁 : 新闻和形象展示页面样式初步完成 #10
|
|
@ -24,6 +24,11 @@ const routes = [
|
||||||
name: 'news',
|
name: 'news',
|
||||||
component: () => import('../views/news/index')
|
component: () => import('../views/news/index')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/image_display',
|
||||||
|
name: 'image_display',
|
||||||
|
component: () => import('../views/ImageDisplay/index')
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,288 @@
|
||||||
|
<template>
|
||||||
|
<div class="image_display">
|
||||||
|
<!-- 顶部图片 -->
|
||||||
|
<div class="imageDisplay_bg">
|
||||||
|
</div>
|
||||||
|
<!--标签栏 -->
|
||||||
|
<div class="imageDisplay_border">
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||||
|
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="资质荣誉" name="first">资质荣誉</el-tab-pane>
|
||||||
|
<el-tab-pane label="工程案例" name="second">工程案例</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<!--资质荣誉-->
|
||||||
|
<div class="honor_list" id="honor_list">
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||||
|
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in imageAndWord"
|
||||||
|
:key="index">
|
||||||
|
<div class="item">
|
||||||
|
<a>
|
||||||
|
<span class="pic">
|
||||||
|
<img :src="item.imgUrl" alt="">
|
||||||
|
</span>
|
||||||
|
<span class="inf">{{ item.word }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--工程案例-->
|
||||||
|
<div id="project_list" class="project_list honor_list">
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||||
|
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in projectList"
|
||||||
|
:key="index">
|
||||||
|
<div class="item">
|
||||||
|
<a>
|
||||||
|
<span class="pic">
|
||||||
|
<img :src="item.src" alt="">
|
||||||
|
</span>
|
||||||
|
<span class="inf">{{ item.projectName }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeName: 'first',
|
||||||
|
imageAndWord: [
|
||||||
|
{
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
|
||||||
|
word: "国家权威检测合格质量信得过产品"
|
||||||
|
}, {
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987sss.jpg",
|
||||||
|
word: "全国产品质量消费者满意品牌"
|
||||||
|
}, {
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898sss.jpg",
|
||||||
|
word: "中国工程建设推荐产品"
|
||||||
|
}, {
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413sss.jpg",
|
||||||
|
word: "中国陶瓷行业十大品牌"
|
||||||
|
}, {
|
||||||
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082sss.jpg",
|
||||||
|
word: "中国政府采购重点推荐产品"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
projectList: [
|
||||||
|
{
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||||
|
projectName: '大学城新校区教学楼'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||||
|
projectName: '嘉兴中山名都'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||||
|
projectName: '蒲田公安局'
|
||||||
|
}, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||||
|
projectName: '财政局大厦'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||||
|
projectName: '西安市雅盛大厦'
|
||||||
|
}, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||||
|
projectName: '武汉市金晖大厦'
|
||||||
|
}, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||||
|
projectName: '杭州市风情小区'
|
||||||
|
}, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||||
|
projectName: '金湖花园'
|
||||||
|
}, {
|
||||||
|
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
|
||||||
|
projectName: '碧桂园'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab) {
|
||||||
|
const honor_list = document.getElementById('honor_list');
|
||||||
|
const project_list = document.getElementById('project_list');
|
||||||
|
if (tab.index == 0) {
|
||||||
|
honor_list.style.display = "block"
|
||||||
|
project_list.style.display = "none"
|
||||||
|
} else if (tab.index == 1) {
|
||||||
|
project_list.style.display = "block"
|
||||||
|
honor_list.style.display = "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
* {
|
||||||
|
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs {
|
||||||
|
position: relative;
|
||||||
|
line-height: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__nav {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__header {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__item {
|
||||||
|
height: 55px;
|
||||||
|
line-height: 55px;
|
||||||
|
border-left: 1px solid #f1f1f1;
|
||||||
|
padding: 0 20px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__item.is-active {
|
||||||
|
color: #000;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__item:hover {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||||
|
border-right: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__active-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tab-pane {
|
||||||
|
color: #333;
|
||||||
|
height: 55px;
|
||||||
|
line-height: 55px;
|
||||||
|
float: left;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1660px) {
|
||||||
|
.honor_list ul li {
|
||||||
|
width: 33.2% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1480px) {
|
||||||
|
.honor_list ul li {
|
||||||
|
width: 33.2% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_display {
|
||||||
|
min-width: 1260px;
|
||||||
|
|
||||||
|
.imageDisplay_bg {
|
||||||
|
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageDisplay_border {
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.honor_list {
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 25%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
.pic {
|
||||||
|
img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0.8;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
.pic {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
background-color: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.inf {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#project_list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -133,7 +133,7 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
href: '',
|
href: '/image_display',
|
||||||
title: '形象展示',
|
title: '形象展示',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="news">
|
<div class="news">
|
||||||
<!-- 顶部图片 -->
|
<!-- 顶部图片 -->
|
||||||
<div class="ui-h">
|
<div class="news_bg">
|
||||||
<div class="said">
|
|
||||||
<p class="tit2"></p>
|
|
||||||
<p>新闻资讯</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!--标签栏 -->
|
<!--标签栏 -->
|
||||||
<div class="pt-top">
|
<div class="news_border">
|
||||||
<el-row type="flex">
|
<el-row type="flex">
|
||||||
<el-col :span="1"></el-col>
|
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||||
<el-col :span="22">
|
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||||
<div class="list">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
<ul>
|
<el-tab-pane label="公司新闻" name="first">公司新闻</el-tab-pane>
|
||||||
<li v-for="(item,index) in tagList" :key="index"
|
<el-tab-pane label="行业动态" name="second">行业动态</el-tab-pane>
|
||||||
>
|
<el-tab-pane label="瓷砖百科" name="third">瓷砖百科</el-tab-pane>
|
||||||
<a class="oncname">{{ item.tag }}</a>
|
</el-tabs>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="classname" v-model="tagList">新闻资讯</div>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1"></el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<!--图片栏-->
|
<!--图片栏-->
|
||||||
<div class="pt-list">
|
<div class="list2">
|
||||||
<div class="list2">
|
<el-row type="flex">
|
||||||
<ul>
|
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||||
<el-row type="flex" justify="space-around">
|
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||||
<el-col :span="1"></el-col>
|
<ul>
|
||||||
<el-col :span="22">
|
<li v-for="(item,index) in imageAndWord"
|
||||||
<li v-for="(item,index) in imageAndWord"
|
:key="index">
|
||||||
:key="index">
|
<div class="item">
|
||||||
<div class="item">
|
<a>
|
||||||
<a>
|
<span class="pic">
|
||||||
<div class="pic">
|
|
||||||
<img :src="item.imgUrl" alt="">
|
<img :src="item.imgUrl" alt="">
|
||||||
</div>
|
</span>
|
||||||
<span class="inf">{{ item.word }}</span>
|
<span class="inf">{{ item.word }}</span>
|
||||||
<span class="dates">{{ item.date }}</span>
|
<span class="dates">{{ item.date }}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</el-col>
|
</ul>
|
||||||
<el-col :span="1"></el-col>
|
<!--页码-->
|
||||||
</el-row>
|
<div class="pagination">
|
||||||
</ul>
|
<table style="margin: 0 auto">
|
||||||
</div>
|
<tbody>
|
||||||
|
<tr style="width: auto">
|
||||||
|
<td class="prev">
|
||||||
|
<a href="">上一页</a>
|
||||||
|
</td>
|
||||||
|
<td class="prev">
|
||||||
|
<a href="">1</a>
|
||||||
|
</td>
|
||||||
|
<td class="prev">
|
||||||
|
<a href="">2</a>
|
||||||
|
</td>
|
||||||
|
<td class="prev">
|
||||||
|
<a href="">下一页</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<!--页码-->
|
|
||||||
<!-- <el-pagination-->
|
|
||||||
<!-- background-->
|
|
||||||
<!-- layout="prev, pager, next"-->
|
|
||||||
<!-- :total="1000">-->
|
|
||||||
<!-- </el-pagination>-->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
activeName: 'first',
|
||||||
imageAndWord: [
|
imageAndWord: [
|
||||||
{
|
{
|
||||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||||
|
|
@ -126,106 +131,72 @@ export default {
|
||||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||||
date: "2022.7.7"
|
date: "2022.7.7"
|
||||||
}
|
}
|
||||||
],
|
|
||||||
tagList: [
|
|
||||||
{
|
|
||||||
tag: '全部'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: '公司新闻'
|
|
||||||
}, {
|
|
||||||
tag: '行业动态'
|
|
||||||
}, {
|
|
||||||
tag: '瓷砖百科'
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.news{
|
* {
|
||||||
height: 1200px;
|
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||||
}
|
|
||||||
.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 {
|
/deep/ .el-tabs {
|
||||||
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;
|
position: relative;
|
||||||
top: 1px;
|
line-height: 55px;
|
||||||
height: 54px;
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__nav {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__header {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__item {
|
||||||
|
height: 55px;
|
||||||
|
line-height: 55px;
|
||||||
|
border-left: 1px solid #f1f1f1;
|
||||||
|
padding: 0 20px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tabs__item.is-active {
|
||||||
|
color: #000;
|
||||||
border-bottom: 1px solid #333;
|
border-bottom: 1px solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-top .list ul li {
|
/deep/ .el-tabs__item:hover {
|
||||||
display: inline;
|
color: #000;
|
||||||
float: left;
|
text-decoration: underline;
|
||||||
padding: 0 20px;
|
|
||||||
border-left: 1px solid #f1f1f1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-top .list ul li:last-child {
|
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||||
border-right: 1px solid #f1f1f1;
|
border-right: 1px solid #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-top .list ul li a.oncname {
|
/deep/ .el-tabs__active-bar {
|
||||||
color: #333;
|
display: none;
|
||||||
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 {
|
/deep/ .el-tabs__nav-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-tab-pane {
|
||||||
color: #333;
|
color: #333;
|
||||||
height: 55px;
|
height: 55px;
|
||||||
line-height: 55px;
|
line-height: 55px;
|
||||||
|
|
@ -233,67 +204,75 @@ export default {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list {
|
@media only screen and (max-width: 1660px) {
|
||||||
/*width: 1140px;*/
|
.list2 ul li {
|
||||||
float: left;
|
width: 33.2% !important;
|
||||||
margin: 0 auto;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 {
|
@media only screen and (max-width: 1480px) {
|
||||||
/*width: 1265px;*/
|
.list2 ul li {
|
||||||
|
width: 33.2% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news {
|
||||||
|
min-width: 1260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_bg {
|
||||||
|
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_border {
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list2 {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul {
|
.list2 ul {
|
||||||
width: 100%;
|
display: flex;
|
||||||
/*display: flex;*/
|
flex-wrap: wrap;
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
list-style: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li {
|
.list2 ul li {
|
||||||
width: 347px;
|
width: 25%;
|
||||||
float: left;
|
|
||||||
margin-right: 35px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li:last-child {
|
.list2 ul li .item {
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt-list .list2 ul li .item {
|
|
||||||
display: block;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a {
|
.list2 ul li .item a .pic {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
border: 1px solid #e9e9e9;
|
||||||
}
|
background-color: #000;
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a .pic {
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 6px;
|
|
||||||
/*border: 1px solid #e9e9e9;*/
|
|
||||||
/*background-color: #000;*/
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a .pic img {
|
.list2 ul li .item a .pic img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 0.4s;
|
transition: all 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a:hover .pic img {
|
.list2 ul li .item a:hover .pic img {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a span.inf {
|
.list2 ul li .item a span.inf {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -302,11 +281,34 @@ export default {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-list .list2 ul li .item a span.dates {
|
.list2 ul li .item a span.dates {
|
||||||
color: #666;
|
color: #666;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*页码*/
|
||||||
|
.pagination {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .prev a {
|
||||||
|
line-height: 34px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .prev a:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination .prev:nth-child(2) a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue