邓洁 : 基本样式初步完成以及部分代码封装
This commit is contained in:
邓洁
parent
3e13c59236
commit
898e38014b
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="image_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 imageList"
|
||||
:key="index" @click="type!==22?handleClickNews(index):''">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic" v-if="type!==22">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<el-image
|
||||
v-if="type===22"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
<span class="info" v-if="type===22">{{ item.word }}</span>
|
||||
<span class="inf" v-if="type!==22">{{ item.word }}</span>
|
||||
<span class="size" v-if="type!==22">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PicturesBox",
|
||||
props: {
|
||||
imageList: Array,
|
||||
/**
|
||||
* 11 是跳转到新闻详情
|
||||
* 22是封装图片放大的效果
|
||||
* 33是跳转到产品详情
|
||||
*/
|
||||
type: Number
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击图片进入详情页
|
||||
*/
|
||||
handleClickNews(index) {
|
||||
if(this.type==33){
|
||||
this.$router.push({
|
||||
path: '/products_detail', //跳转的路由
|
||||
// query:{ //跳转路由的参数
|
||||
// type:type //前面的type是参数的名称
|
||||
// //后面的type是点击产品时传过来的型号 这里也就是m320
|
||||
// }
|
||||
})
|
||||
}else {
|
||||
this.$parent.showDetail=true
|
||||
this.$parent.company_news=false
|
||||
this.$parent.industry_dynamics=false
|
||||
this.$parent.ceramic=false
|
||||
this.$parent.showPagination=false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@media only screen and (max-width: 1660px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1480px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image_list {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
|
||||
.item {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
.pic {
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span.inf {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span.size {
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover .pic img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -134,6 +134,7 @@ export default {
|
|||
transition: all 0.6s;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<!--标签栏 -->
|
||||
<el-row type="flex" class="center_border">
|
||||
<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-if="title===1" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
|
||||
关于我们
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs v-else v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
|
||||
{{ title === 0 ? '' : item.label }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TabsItem",
|
||||
props: {
|
||||
title: Number,
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: ()=>{
|
||||
return [
|
||||
{
|
||||
label: '全部',
|
||||
name: 'first'
|
||||
},
|
||||
{
|
||||
label: '瓷抛大理石',
|
||||
name: 'second'
|
||||
}, {
|
||||
label: '通体大理石',
|
||||
name: 'third'
|
||||
}, {
|
||||
label: '中板通体大理石',
|
||||
name: 'four'
|
||||
}, {
|
||||
label: '大板通体大理石',
|
||||
name: 'five'
|
||||
}, {
|
||||
label: '银河系大板',
|
||||
name: 'six'
|
||||
}, {
|
||||
label: '仿古砖600x600',
|
||||
name: 'seven'
|
||||
}, {
|
||||
label: '金刚大理石',
|
||||
name: 'eight'
|
||||
}, {
|
||||
label: '岩板',
|
||||
name: 'nine'
|
||||
}, {
|
||||
label: '微水泥',
|
||||
name: 'ten'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
fatherMethod:{
|
||||
type:Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab){
|
||||
if(this.fatherMethod){
|
||||
this.fatherMethod(tab)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.center_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
//i18n.js
|
||||
import Vue from 'vue'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import messages from './langs'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: localStorage.lang || 'cn',
|
||||
messages
|
||||
})
|
||||
|
||||
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
|
||||
|
||||
export default i18n
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
//cn.js
|
||||
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
|
||||
//{{ $t('message.news_ceter') }}
|
||||
const cn = {
|
||||
message: {
|
||||
'student': '学生',
|
||||
'staff': '教职工',
|
||||
'alumni': '校友',
|
||||
'examine': '考生',
|
||||
'services_portal': '服务门户',
|
||||
'switch': 'English',
|
||||
'home': '学院首页',
|
||||
'news_ceter': '新闻中心',
|
||||
'more': '更多',
|
||||
'research': '科学研究',
|
||||
'academic': '学术交流',
|
||||
'party': '党群工作',
|
||||
'party_education': '党史教育',
|
||||
'teaching_work': '教学工作',
|
||||
|
||||
'data_information': '数据中的信息',
|
||||
'notice': '通知公告',
|
||||
'scientific': '科学研究',
|
||||
'undergraduate_education': '本科教育',
|
||||
'postgraduate_education': '研究生教育',
|
||||
'employees': '职工人数',
|
||||
'number_students': '在校学生人数',
|
||||
'graduate_tutor': '研究生导师',
|
||||
'research_team': '科研团队',
|
||||
'high_level_talents': '省部级以上高层次人才',
|
||||
'major_projects': '国家级重大重点项目',
|
||||
'contact_us': '联系我们',
|
||||
'person': '人',
|
||||
'pics': '个',
|
||||
'adress': '犀浦校区地址:中国四川省成都市郫都区犀安路 999 号西南交通大学信息科学与技术学院',
|
||||
'code': '邮政编码:611756',
|
||||
'tel': '电话:+86 28 66366709(行政)',
|
||||
'copyright': '版权所有◎2015西南交通大学信息科学与技术学院. All rights reserved.意见反馈',
|
||||
'chinese_site': '西南交通大学(中文)',
|
||||
'english_site': '西南交通大学(ENGLISH)',
|
||||
'affairs_office': '西南交通大学国际合作与交流处',
|
||||
'scholarship': '国家留学基金管理委员会',
|
||||
'foreign': '中华人民共和国外交部',
|
||||
'education': '中华人民共和国教育部门户网站',
|
||||
'ieee': '电气和电子工程师协会(IEEE)',
|
||||
'search': '搜索',
|
||||
'placeholder': '请输入内容',
|
||||
},
|
||||
...zhLocale
|
||||
}
|
||||
|
||||
export default cn
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
//en.js
|
||||
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
const en = {
|
||||
message: {
|
||||
'student': 'Student',
|
||||
'staff': 'Staff',
|
||||
'alumni': 'Alumni',
|
||||
'examine': 'Examine',
|
||||
'services_portal': 'Services Portal',
|
||||
'switch': '简体中文',
|
||||
'home': 'Home',
|
||||
'news_ceter': 'News Center',
|
||||
'more': 'More',
|
||||
'research': 'Research',
|
||||
'academic': 'Academic',
|
||||
'party': 'Party',
|
||||
'party_education': 'Party Education',
|
||||
'teaching_work': 'Teaching work',
|
||||
|
||||
'data_information': 'DATA INFORMATION',
|
||||
'notice': 'Notice',
|
||||
'scientific': 'Scientific',
|
||||
'undergraduate_education': 'Undergraduate education',
|
||||
'postgraduate_education': 'Postgraduate education',
|
||||
'employees': 'Faculty Members',
|
||||
'number_students': 'Internal Students',
|
||||
'graduate_tutor': 'Tutors',
|
||||
'research_team': 'Scientific Research Team',
|
||||
'high_level_talents': 'Outstanding Talents',
|
||||
'major_projects': 'Major projects',
|
||||
'contact_us': '',
|
||||
'person': '',
|
||||
'pics': '',
|
||||
'adress': '',
|
||||
'code': '',
|
||||
'tel': '',
|
||||
'copyright': 'Copyright © 2014 School of Information Science and Technology, SWJTU. All rights reserved. Feedback',
|
||||
'chinese_site': 'Southwest Jiaotong University(中文)',
|
||||
'english_site': 'Southwest Jiaotong University(ENGLISH)',
|
||||
'affairs_office': 'SWJTU International Affairs Office',
|
||||
'scholarship': 'China Scholarship Counsil',
|
||||
'foreign': 'Ministry of Foreign Affairs',
|
||||
'education': 'Ministry of Education',
|
||||
'ieee': 'IEEE',
|
||||
'search': 'search',
|
||||
'placeholder': 'please input',
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
export default en
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import en from './en'
|
||||
import cn from './cn'
|
||||
export default {
|
||||
en,
|
||||
cn
|
||||
}
|
||||
|
|
@ -2,12 +2,9 @@ import Vue from 'vue'
|
|||
import Vuex from 'vuex'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import i18n from './i18n/i18n'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
import en from 'element-ui/lib/locale/lang/en'
|
||||
import cn from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
//要添加的代码
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
|
@ -20,9 +17,6 @@ router.beforeEach((to, from, next) => {
|
|||
next()
|
||||
})
|
||||
|
||||
i18n.mergeLocaleMessage('en', en)
|
||||
i18n.mergeLocaleMessage('zh', cn)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(Vuex)
|
||||
|
|
@ -51,7 +45,6 @@ const store = new Vuex.Store({
|
|||
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
router,
|
||||
store: store,
|
||||
render: h => h(App)
|
||||
|
|
|
|||
|
|
@ -47,6 +47,11 @@ const routes = [
|
|||
name: 'products_center',
|
||||
component: () => import('../views/productsCenter/index')
|
||||
},
|
||||
{
|
||||
path: '/products_detail',
|
||||
name: 'products_detail',
|
||||
component: () => import('../views/productsCenter/detail')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
|
|
|||
|
|
@ -3,20 +3,8 @@
|
|||
<!-- 顶部图片 -->
|
||||
<div class="about_us_bg"></div>
|
||||
<!--标签栏 -->
|
||||
<div class="contact_us_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-tab-pane label="企业观点" name="third">关于我们</el-tab-pane>
|
||||
<el-tab-pane label="企业文化" name="four">关于我们</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
|
||||
<!-- 关于我们的内容-->
|
||||
<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">
|
||||
|
|
@ -38,33 +26,14 @@
|
|||
<span>{{ item.text3 }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="culture" id="culture">
|
||||
<!-- <table>-->
|
||||
<!-- <tbody>-->
|
||||
<!-- <tr v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">-->
|
||||
<!-- <td class="culture_right">-->
|
||||
<!-- <!– <div >–>-->
|
||||
<!-- <span>{{ item.text1 }}</span>-->
|
||||
<!-- <span>{{ item.text2 }}</span>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- </td>-->
|
||||
<!-- <td class="culture_img">-->
|
||||
<!-- <img :src="item.src" alt=""/>-->
|
||||
<!-- </td>-->
|
||||
|
||||
<!-- </tr>-->
|
||||
<!-- </tbody>-->
|
||||
<!-- </table>-->
|
||||
<div id="culture_content" v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">
|
||||
<div id="culture_content" v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">
|
||||
<div class="culture_img">
|
||||
<img :src="item.src" alt=""/>
|
||||
</div>
|
||||
<div class="culture_right">
|
||||
<!-- <div >-->
|
||||
<span>{{ item.text1 }}</span>
|
||||
<span>{{ item.text2 }}</span>
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,11 +43,31 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
aboutTabs: [
|
||||
{
|
||||
label: '企业简介',
|
||||
name: 'first'
|
||||
},
|
||||
{
|
||||
label: '品牌文化',
|
||||
name: 'second'
|
||||
},
|
||||
{
|
||||
label: '企业观点',
|
||||
name: 'third'
|
||||
},
|
||||
{
|
||||
label: '企业文化',
|
||||
name: 'four'
|
||||
}
|
||||
],
|
||||
pList: [
|
||||
{
|
||||
text: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。'
|
||||
|
|
@ -212,62 +201,6 @@ export default {
|
|||
font: 16px/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;
|
||||
}
|
||||
|
||||
.about_us {
|
||||
min-width: 1300px;
|
||||
|
||||
|
|
@ -279,13 +212,6 @@ export default {
|
|||
background-position: center center;
|
||||
}
|
||||
|
||||
.contact_us_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
padding: 40px 0;
|
||||
font-size: 16px;
|
||||
|
|
@ -308,27 +234,29 @@ export default {
|
|||
.cul_1 {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.cul_3 {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#culture_content {
|
||||
display: flex;
|
||||
padding: 10px 10px 40px 10px;
|
||||
|
||||
.culture_img {
|
||||
padding: 10px;
|
||||
margin:0 30px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.culture_right {
|
||||
padding: 10px;
|
||||
|
||||
span:first-child {
|
||||
display: block;
|
||||
}
|
||||
span:last-child{
|
||||
|
||||
span:last-child {
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
|
|
|||
|
|
@ -4,17 +4,7 @@
|
|||
<div class="Attract_join_bg">
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<div class="Attract_join_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>
|
||||
<ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
|
||||
<!-- 支持策略 -->
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||
|
|
@ -23,25 +13,55 @@
|
|||
<div class="support_title">
|
||||
支持策略 / SUPPORT STRATEGY
|
||||
</div>
|
||||
<div style="font-size: 16px">
|
||||
<p v-for="(item,index) in supportList" :key="index" style="padding-bottom: 25px">
|
||||
{{item.text}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--加盟条件-->
|
||||
<div class="support" id="join">
|
||||
<div class="support_title">
|
||||
加盟条件 / FRANCHISE CONDITIONS
|
||||
</div>
|
||||
<div style="font-size: 16px">
|
||||
<p v-for="(item,index) in joinList" :key="index" style="padding-bottom: 25px">
|
||||
{{item.text}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components:{ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
joinTab: [
|
||||
{
|
||||
label: '支持策略',
|
||||
name: 'first'
|
||||
}, {
|
||||
label: '加盟条件',
|
||||
name: 'second'
|
||||
}
|
||||
],
|
||||
supportList:[
|
||||
{text:'艺鹏瓷砖对合作伙伴的支持策略：'},
|
||||
{text:'1、形象店的装修补贴支持'},
|
||||
{text:'有些经销商由于初期实力薄弱，进货以后也许没有多少钱可以装修店面，所以艺鹏瓷砖为您提供有力的形象店装修补贴支持，让您的漂亮店面从此可以昂首挺胸。：'}
|
||||
],
|
||||
joinList:[
|
||||
{text:'艺鹏瓷砖合作加盟条件：'},
|
||||
{text:'1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
|
||||
{text:'2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -64,62 +84,6 @@ export default {
|
|||
#join{
|
||||
display: none;
|
||||
}
|
||||
/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;
|
||||
}
|
||||
|
||||
.Attract_join {
|
||||
min-width: 1300px;
|
||||
|
|
@ -132,13 +96,6 @@ export default {
|
|||
background-position: center center;
|
||||
}
|
||||
|
||||
.Attract_join_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.support {
|
||||
padding: 70px 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,16 +4,7 @@
|
|||
<div class="contact_us_bg">
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<div class="contact_us_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">
|
||||
<el-tab-pane label="联系方式" name="first">联系我们</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<ProductsTabsItem :tab-list="contactTabs"/>
|
||||
|
||||
<div class="contact_content">
|
||||
<p class="title">
|
||||
|
|
@ -31,74 +22,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
contactTabs: [
|
||||
{
|
||||
label: '联系我们',
|
||||
name: 'first'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/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;
|
||||
}
|
||||
|
||||
.contact_us {
|
||||
min-width: 1300px;
|
||||
|
||||
|
|
@ -110,12 +52,6 @@ export default {
|
|||
background-position: center center;
|
||||
}
|
||||
|
||||
.contact_us_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.contact_content {
|
||||
padding: 40px 0;
|
||||
|
|
@ -136,7 +72,8 @@ export default {
|
|||
font-family: 微软雅黑, "Microsoft YaHei", Arial, sans-serif;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.phone{
|
||||
|
||||
.phone {
|
||||
font-size: 16px;
|
||||
line-height: 28.8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,78 +4,32 @@
|
|||
<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">
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
|
||||
<!--资质荣誉 22是封装图片放大的效果-->
|
||||
<PicturesBox id="honor_list" :image-list="imageAndWord" :type="22"/>
|
||||
<!--工程案例-->
|
||||
<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="">-->
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.src"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
</span>
|
||||
<span class="inf">{{ item.projectName }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<PicturesBox id="project_list" :image-list="projectList" :type="22"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {ProductsTabsItem,PicturesBox},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
imageDisplayTabs: [
|
||||
{
|
||||
label: '资质荣誉',
|
||||
name: 'first'
|
||||
},
|
||||
{
|
||||
label: '工程案例',
|
||||
name: 'second'
|
||||
}
|
||||
],
|
||||
imageAndWord: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
|
||||
|
|
@ -101,44 +55,44 @@ export default {
|
|||
],
|
||||
projectList: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
|
||||
projectName: '大学城新校区教学楼'
|
||||
word: '大学城新校区教学楼'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
|
||||
projectName: '嘉兴中山名都'
|
||||
word: '嘉兴中山名都'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
|
||||
projectName: '蒲田公安局'
|
||||
word: '蒲田公安局'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
|
||||
projectName: '财政局大厦'
|
||||
word: '财政局大厦'
|
||||
}
|
||||
, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
|
||||
projectName: '西安市雅盛大厦'
|
||||
word: '西安市雅盛大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
|
||||
projectName: '武汉市金晖大厦'
|
||||
word: '武汉市金晖大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
|
||||
projectName: '杭州市风情小区'
|
||||
word: '杭州市风情小区'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
|
||||
projectName: '金湖花园'
|
||||
word: '金湖花园'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
|
||||
projectName: '碧桂园'
|
||||
word: '碧桂园'
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -164,75 +118,6 @@ export default {
|
|||
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: 1300px;
|
||||
|
||||
|
|
@ -244,65 +129,6 @@ export default {
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<!--新闻详情 -->
|
||||
<div class="news_detail">
|
||||
<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">
|
||||
<div class="detail">
|
||||
<div class="detail_top">
|
||||
<div class="tabs">
|
||||
当前位置：
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ tabs_title }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="shares">
|
||||
分享到：
|
||||
<span @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="html_text" v-html="htmlStr"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "detail",
|
||||
data() {
|
||||
return {
|
||||
tabs_title: '公司新闻',
|
||||
htmlStr: '<h1>公司新闻公司新闻</h1>',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 分享到微博
|
||||
*/
|
||||
shareToMicroblog() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://service.weibo.com/share/share.php?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 分享到qq空间
|
||||
*/
|
||||
shareToQQRom() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo +
|
||||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/.el-breadcrumb {
|
||||
margin-top: 2px;
|
||||
}
|
||||
/deep/.el-breadcrumb__inner.is-link:hover {
|
||||
color: #333!important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.news_detail {
|
||||
padding: 40px 0;
|
||||
|
||||
.detail {
|
||||
.html_text{
|
||||
padding: 45px;
|
||||
}
|
||||
.detail_top {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 0 0 40px 0;
|
||||
padding: 0 0 15px 0;
|
||||
border-bottom: 3px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
//line-height: 35px;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,122 +4,47 @@
|
|||
<div class="news_bg">
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<div class="news_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-tab-pane label="瓷砖百科" name="third">瓷砖百科</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
|
||||
<!--图片栏-->
|
||||
<div class="list2">
|
||||
<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">
|
||||
<!-- 公司新闻-->
|
||||
<div id="company_news">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imageAndWord"
|
||||
:key="index" @click="handleClickNews(index)">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="20" :pageSize="10" />
|
||||
</div>
|
||||
<!-- 行业动态-->
|
||||
<div id="industry_dynamics">
|
||||
<ul>
|
||||
<li v-for="(item,index) in industryList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 瓷砖百科-->
|
||||
<div id="ceramic">
|
||||
<ul>
|
||||
<li v-for="(item,index) in ceramicList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<PicturesBox :image-list="imageAndWord" v-if="company_news"/>
|
||||
<PicturesBox :image-list="industryList" v-if="industry_dynamics"/>
|
||||
<PicturesBox :image-list="ceramicList" v-if="ceramic"/>
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="20" :pageSize="10" v-if="showPagination"/>
|
||||
|
||||
<!--新闻详情 -->
|
||||
<div class="news_detail" id="news_detail">
|
||||
<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">
|
||||
<div class="detail">
|
||||
<div class="detail_top">
|
||||
<div class="tabs">
|
||||
当前位置：
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{tabs_title}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="shares">
|
||||
分享到：
|
||||
<span class="hover-pointer" @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span class="qqIcon hover-pointer" @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <vue2-editor v-model="htmlStr"></vue2-editor>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--新闻详情-->
|
||||
<detail v-if="showDetail"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/components/Pagination";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import Detail from "@/views/news/detail";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Pagination},
|
||||
components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
tabs_title:'公司新闻',
|
||||
// htmlStr: '',
|
||||
activeName: 'first',
|
||||
showPagination:true,
|
||||
showDetail:false,
|
||||
company_news:true,
|
||||
industry_dynamics:false,
|
||||
ceramic:false,
|
||||
newsTab: [
|
||||
{
|
||||
label: '公司新闻',
|
||||
name: 'first'
|
||||
}, {
|
||||
label: '行业动态',
|
||||
name: 'second'
|
||||
}, {
|
||||
label: '瓷砖百科',
|
||||
name: 'third'
|
||||
},
|
||||
],
|
||||
imageAndWord: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||
|
|
@ -250,55 +175,38 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
const company_news = document.getElementById('company_news');
|
||||
const industry_dynamics = document.getElementById('industry_dynamics');
|
||||
const ceramic = document.getElementById('ceramic');
|
||||
// const company_news = document.getElementById('company_news');
|
||||
// const industry_dynamics = document.getElementById('industry_dynamics');
|
||||
// const ceramic = document.getElementById('ceramic');
|
||||
if (tab.index == 0) {
|
||||
company_news.style.display = "block"
|
||||
industry_dynamics.style.display = "none"
|
||||
ceramic.style.display = "none"
|
||||
this.company_news=true
|
||||
this.industry_dynamics=false
|
||||
this.ceramic=false
|
||||
this.showPagination=true
|
||||
// company_news.style.display = "block"
|
||||
// industry_dynamics.style.display = "none"
|
||||
// ceramic.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
company_news.style.display = "none"
|
||||
industry_dynamics.style.display = "block"
|
||||
ceramic.style.display = "none"
|
||||
this.company_news=false
|
||||
this.industry_dynamics=true
|
||||
this.ceramic=false
|
||||
this.showDetail=false
|
||||
this.showPagination=false
|
||||
// company_news.style.display = "none"
|
||||
// industry_dynamics.style.display = "block"
|
||||
// ceramic.style.display = "none"
|
||||
} else if (tab.index == 2) {
|
||||
company_news.style.display = "none"
|
||||
industry_dynamics.style.display = "none"
|
||||
ceramic.style.display = "block"
|
||||
this.company_news=false
|
||||
this.industry_dynamics=false
|
||||
this.ceramic=true
|
||||
this.showDetail=false
|
||||
this.showPagination=false
|
||||
// company_news.style.display = "none"
|
||||
// industry_dynamics.style.display = "none"
|
||||
// ceramic.style.display = "block"
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 分享到微博
|
||||
*/
|
||||
shareToMicroblog() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://service.weibo.com/share/share.php?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 分享到qq空间
|
||||
*/
|
||||
shareToQQRom() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo +
|
||||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 点击图片进入详情页
|
||||
*/
|
||||
handleClickNews(index){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -316,62 +224,6 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/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) {
|
||||
.list2 ul li {
|
||||
|
|
@ -389,20 +241,14 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
|
||||
.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_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;
|
||||
|
||||
|
|
@ -457,45 +303,16 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.news_detail {
|
||||
padding: 40px 0;
|
||||
display: none;
|
||||
.detail {
|
||||
.detail_top {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 0 0 40px 0;
|
||||
padding: 0 0 15px 0;
|
||||
border-bottom: 3px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
//line-height: 35px;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#industry_dynamics {
|
||||
.inf {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
#ceramic{
|
||||
|
||||
#ceramic {
|
||||
.inf {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 产品标签栏-->
|
||||
<ProductsTabsItem :title="0"/>
|
||||
<div class="img_text_bgc">
|
||||
<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">
|
||||
<div class="img_text_content">
|
||||
<div class="img_bgc">
|
||||
<img :src="mainSrc" alt=""/>
|
||||
</div>
|
||||
<div class="img_right">
|
||||
<div class="title">
|
||||
产品名称：WH715T038
|
||||
</div>
|
||||
<div class="space_style">
|
||||
<p>产品分类：750x1500MM大板时代</p>
|
||||
<p>适用空间：客厅瓷砖,书房瓷砖,卧室瓷砖,餐厅瓷砖,大厅瓷砖</p>
|
||||
<p>所属风格：简约风格,新中式风格,工业风格</p>
|
||||
</div>
|
||||
<div class="img_part">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imgList" :key="index" @click.stop="changeMainImg(index)">
|
||||
<img :src="item.src" alt=""/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="shares">
|
||||
分享到：
|
||||
<span @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="small">上一款产品</el-button>
|
||||
<el-button size="small">下一款产品</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
|
||||
export default {
|
||||
name: "detail",
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
mainSrc: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079.jpg',
|
||||
imgList: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712901631818s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712913084897s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712911963193s.jpg'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//点击小图切换主览图
|
||||
changeMainImg(index) {
|
||||
this.mainSrc = this.imgList[index].src
|
||||
},
|
||||
/**
|
||||
* 分享到微博
|
||||
*/
|
||||
shareToMicroblog() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://service.weibo.com/share/share.php?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 分享到qq空间
|
||||
*/
|
||||
shareToQQRom() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo +
|
||||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
/deep/ .el-button:focus, .el-button:hover {
|
||||
color: #333;
|
||||
border-color: #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .el-button:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.center_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.img_text_bgc {
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background-color: #f3f3f3;
|
||||
|
||||
.img_text_content {
|
||||
width: 1360px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
||||
.img_bgc {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
padding: 20px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
margin-right: 30px;
|
||||
|
||||
img {
|
||||
margin-top: 25%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img_right {
|
||||
float: right;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 25px 0 10px 0;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
.space_style {
|
||||
padding: 20px 0;
|
||||
|
||||
p {
|
||||
color: #000;
|
||||
margin: 5px 0 5px 0;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.img_part {
|
||||
padding: 10px 0 5px 0;
|
||||
border-top: 1px dotted #ddd;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
|
||||
ul {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #e5e5e5;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin-top: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
line-height: 35px;
|
||||
span{
|
||||
img{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,25 +1,7 @@
|
|||
<template>
|
||||
<div class="products_center">
|
||||
<!--标签栏 -->
|
||||
<div class="center_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">
|
||||
<el-tab-pane label="全部" name="first">产品中心</el-tab-pane>
|
||||
<el-tab-pane label="瓷抛大理石" name="second">瓷抛大理石</el-tab-pane>
|
||||
<el-tab-pane label="通体大理石" name="third">通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="中板通体大理石" name="four">中板通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="大板通体大理石" name="five">大板通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="银河系大板" name="six">银河系大板</el-tab-pane>
|
||||
<el-tab-pane label="仿古砖600x600" name="seven">仿古砖600x600</el-tab-pane>
|
||||
<el-tab-pane label="金刚大理石" name="eight">金刚大理石</el-tab-pane>
|
||||
<el-tab-pane label="岩板" name="nine">岩板</el-tab-pane>
|
||||
<el-tab-pane label="微水泥" name="ten">微水泥</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<ProductsTabsItem />
|
||||
<!-- 分类栏-->
|
||||
<div class="product_types">
|
||||
<el-row type="flex">
|
||||
|
|
@ -47,39 +29,21 @@
|
|||
</el-row>
|
||||
</div>
|
||||
<!--图片栏-->
|
||||
<div class="image_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 imageList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="size">{{ item.size }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Pagination :currentPage="1" :total="320" :pageSize="10" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<PicturesBox :image-list="imgList" :type="33"/>
|
||||
<Pagination :currentPage="1" :total="320" :pageSize="10"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Pagination},
|
||||
components: {PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
classifyList: [
|
||||
{
|
||||
title: '13MM瓷抛大理石'
|
||||
|
|
@ -129,66 +93,66 @@ export default {
|
|||
title: '工业风格'
|
||||
}
|
||||
],
|
||||
imageList: [
|
||||
imgList: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
date: "750x1500MM大板时代"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -197,20 +161,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;
|
||||
}
|
||||
|
||||
.products_center {
|
||||
min-width: 1300px;
|
||||
|
||||
.center_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.product_types {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
|
|
@ -233,137 +186,15 @@ export default {
|
|||
|
||||
li {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image_list {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
|
||||
.item {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
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;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span.size {
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover .pic img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1660px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1480px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue