clay
/
ceramic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

邓洁 : 产品展示区, 工程案例区及部分关于我们样式初步完成

This commit is contained in:
邓洁 2023-05-05 00:00:53 +08:00
parent 1049c92106
commit 5c61997edf
15 changed files with 588 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/banner/banner1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 234 KiB

BIN
src/assets/banner/banner2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 371 KiB

BIN
src/assets/banner/banner3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 532 KiB

BIN
src/assets/footer/elogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/footer/qr.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
src/assets/header/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

224
src/components/AboutUs.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div class="aboutUs">
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="about_title">
<h2>关于我们</h2>
<h3>—— ABOUT US ——</h3>
</div>
<div class="about_text">
{{ aboutContent }}
</div>
<el-row :gutter="20" style="padding: 0 4% ">
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
<p>
<b>{{ 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">
<div class="imgAndText">
<a :href="imgTextItem.href">
<span class="pic">
<img :src="imgTextItem.src" alt=""/>
</span>
<div class="img_box">
<div class="img_innerBox">
<div class="about_en">
<span>{{ imgTextItem.boldText }}</span>
<span>{{ imgTextItem.enText }}</span>
</div>
<span class="line"></span>
<span class="about_cn">{{ imgTextItem.cnTitle }}</span>
</div>
</div>
</a>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "AboutUs",
data() {
return {
aboutContent: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
numList: [
{
num: '2000',
units: '亩',
title: '拥有近两千亩的三大基地'
},
{
num: '7000',
units: '多人',
title: '员工人数超过7000人'
},
{
num: '4',
units: '大种类',
title: '4大种类，数百款产品'
},
{
num: '60',
units: '多个',
title: '产品远销多个国家'
}
],
imgTextList: [
{
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446921627711241s.jpg',
boldText: 'Brand',
enText: 'culture',
cnTitle: '品牌文化'
}, {
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446922829529890s.jpg',
boldText: 'Enterprise',
enText: 'viewpoint',
cnTitle: '企业观点'
}, {
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446925925108442s.jpg',
boldText: 'corporate',
enText: 'culture',
cnTitle: '企业文化'
}
]
}
}
}
</script>
<style scoped lang="scss">
.aboutUs {
margin-bottom: 50px;
.about_title {
display: inline;
width: 100%;
float: left;
margin: 0 0 20px 0;
text-align: center;
h2 {
color: #000;
line-height: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
h3 {
color: #9b9b9b;
font-size: 16px;
text-align: center;
font-weight: 500;
line-height: 28.8px;
}
}
.about_text {
color: #666;
width: 80%;
float: left;
padding: 0 10% 50px;
font-size: 15px;
text-align: center;
line-height: 28.8px;
}
b {
color: #444;
line-height: 46px;
margin: 0 4px 0 0;
font-size: 40px;
font-family: arial;
font-weight: normal;
}
.num_title {
font-size: 14px;
color: #666666;
border-right: 1px solid #e5e5e5;
text-align: center;
p:last-child {
line-height: 25.2px;
}
}
.imgAndText {
display: block;
margin: 0 15px;
padding: 12px;
border: 1px solid #e9e9e9;
background-color: #201f25;
> a {
position: relative;
display: inline-block;
width: 100%;
.pic {
display: inline-block;
width: 100%;
overflow: hidden;
img {
width: 100%;
transition: all 0.6s;
}
}
.img_box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(32, 31, 37, 0.5);
.img_innerBox {
width: 100%;
display: inline-block;
padding: 20px 30px;
.about_en{
color: #e0c9aa;
font-size: 22px;
float: left;
text-transform: uppercase;
font-family: arial;
span:first-child{
font-weight: bold;
margin-right: 10px;
}
}
.line{
clear: both;
width: 50px;
height: 1px;
float: left;
margin: 3px 0;
background-color: #e2c9ab;
}
.about_cn{
color: #e0c9aa;
clear: both;
float: left;
font-size: 18px;
}
}
}
}
}
}
</style>

6
src/components/Carousel.vue
View File

@ -21,12 +21,12 @@ export default {
return {
bannerDate: [
{
imgurl: require('@/assets/banner/banner1.jpg')
imgurl: 'http://www.yipengtaoci.com/upfiles/images/20201228/16091375066005613.jpg'
}, {
imgurl: require('@/assets/banner/banner2.jpg')
imgurl: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448444195967573.jpg'
},
{
imgurl: require('@/assets/banner/banner3.jpg')
imgurl: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448438651669858.jpg'
}
]
}

1
src/components/FastFindProducts.vue
View File

@ -264,6 +264,7 @@ export default {
padding: 15px 0;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e9e9e9;
#bok_1 {
display: none;

71
src/components/ProductsClassify.vue
View File

@ -20,10 +20,10 @@
<ul>
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
<a :href="picItem.href">
<span >
<span>
<img :src="picItem.src" alt=""/>
</span>
<span class="info">{{picItem.name}}</span>
<span class="info">{{ picItem.name }}</span>
</a>
</li>
</ul>
@ -37,28 +37,28 @@
<script>
export default {
name: "ProductsClassify",
data(){
return{
pics:[
data() {
return {
pics: [
{
href:'',
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
name:'瓷抛大理石'
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
name: '瓷抛大理石'
},
{
href:'',
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
name:'通体大理石'
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
name: '通体大理石'
},
{
href:'',
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
name:'中板通体大理石'
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
name: '中板通体大理石'
},
{
href:'',
src:'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
name:'大板通体大理石'
href: '',
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
name: '大板通体大理石'
}
]
}
@ -83,17 +83,16 @@ export default {
position: relative;
display: inline-block;
transition: all 0.6s;
a {
.pic {
img {
width: 440px;
z-index: 9;
//z-index: 9;
}
}
span:last-child {
color: #fff;
position: absolute;
@ -108,11 +107,12 @@ export default {
text-align: center;
background-color: #de832f;
border-radius: 100px 100px 100px 100px;
z-index: 999;
//z-index: 999;
}
}
}
.info{
.info {
color: #fff;
position: absolute;
top: 42%;
@ -126,30 +126,41 @@ export default {
z-index: 999;
}
.grid_right{
//float: right;
ul{
.grid_right {
float: right;
ul {
display: flex;
flex-wrap: wrap;
li{
li {
margin-top: -5px;
padding: 5px;
span:first-child{
span:first-child {
width: 100%;
filter: alpha(opacity=94);
-moz-opacity: 0.94;
opacity: 0.94;
transition: all 0.6s;
}
a{
a {
height: 296px;
position: relative;
display: inline-block;
img{
background-color: #066090;
overflow: hidden;
img {
width: 440px;
height: 296px;
overflow: hidden;
transition: all 0.6s;
}
img:hover{
filter: brightness(85%);
opacity: 1;
}
}
}

137
src/components/ProductsShow.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="product_show">
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="show_title">
<h2>产品展示</h2>
<h3>—— PRODUCTS ——</h3>
<a href="">查看所有</a>
</div>
</el-col>
</el-row>
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16" class="tagRow">
<div>
<el-tag
v-for="item in tagItems"
:key="item.title"
effect="plain">
<a :href="item.href">{{ item.title }}</a>
</el-tag>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "ProductsShow",
data(){
return{
tagItems:[
{
href: '',
title: '瓷抛大理石'
},
{
href: '',
title: '通体大理石'
}, {
href: '',
title: '中板通体大理石'
}, {
href: '',
title: '大板通体大理石'
}, {
href: '',
title: '银河系大板'
}, {
href: '',
title: '仿古砖600x600'
}, {
href: '',
title: '金刚大理石'
}, {
href: '',
title: '岩板'
}, {
href: '',
title: '微水泥'
}
]
}
}
}
</script>
<style scoped lang="scss">
.el-tag:hover{
background-color: #333;
a{
color: #fff;
}
}
.el-tag:first-child{
background-color: #333;
a{
color: #fff;
}
}
.el-tag {
border: none;
margin-right: 10px;
padding: 0 12px;
font-size: 15px;
height: 37px;
line-height: 37px;
a{
color: #333;
}
}
.product_show {
padding: 60px 0 60px 0;
border-top: 1px solid #e9e9e9;
background-color: #f1f1f1;
.show_title {
display: inline;
width: 100%;
float: left;
margin: 0 0 20px 0;
text-align: center;
h2 {
color: #000;
line-height: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
h3 {
color: #9b9b9b;
font-size: 16px;
text-align: center;
font-weight: 500;
line-height: 28.8px;
}
a {
color: #333;
font-size: 14px;
}
a:hover {
text-decoration: underline;
}
}
.tagRow{
text-align: center;
}
}
</style>

169
src/components/ProjectCase.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<div class="projectCase">
<div class="case_bg">
<el-row>
<div class="cases_title">
<h2>工程案例</h2>
<h3>—— Engineering Case ——</h3>
<div class="case_more">
<a href="">查看所有</a>
</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>
</div>
</div>
</template>
<script>
export default {
name: "Projects",
data() {
return {
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: '金湖花园'
},
]
}
},
methods:{
handleOpenImage(){
}
}
}
</script>
<style scoped lang="scss">
.projectCase {
height: 970px;
.case_bg {
margin: 0 60px;
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
background-size: cover;
height: 540px;
.cases_title {
position: relative;
display: block;
width: 100%;
float: left;
padding: 100px 0 80px;
text-align: center;
h2 {
color: #fff;
line-height: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
h3 {
color: #9b9b9b;
font-size: 16px;
text-align: center;
height: 28.8px;
line-height: 28.8px;
}
.case_more {
margin: 20px 0 0;
text-align: center;
a {
color: #e2c8ab;
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #201e25;
font-size: 14px;
}
}
}
.case_example {
width: 1360px;
margin: 0 auto;
background-color: #fff;
padding: 20px 10px;
ul {
li:last-child {
margin-right: 0;
}
li:nth-child(4) {
margin-right: 0;
}
li {
display: inline-block;
margin-right: 17px;
.pics {
overflow: hidden;
margin: 0 0 5px 0;
img {
height: 245px;
object-fit: cover;
transition: all 0.6s;
cursor: pointer;
}
img:hover {
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>

4
src/views/footer/index.vue
View File

@ -7,7 +7,7 @@
<div class="up_left">
<el-image
style="margin-bottom: 15px"
:src="require('@/assets/footer/elogo.png')"></el-image>
src="http://www.yipengtaoci.com/images/elogo.png"></el-image>
<div>
广东祥睿陶瓷有限公司
</div>
@ -25,7 +25,7 @@
<div class="up_right">
<el-image
style="width: 100px; height: 100px"
:src="require('@/assets/footer/qr.jpg')"></el-image>
src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
</div>
</el-col>
</el-row>

2
src/views/header/index.vue
View File

@ -19,7 +19,7 @@
<div class="down_left">
<a href="/">
<el-image
:src="require('@/assets/header/logo.png')"></el-image>
src="http://www.yipengtaoci.com/images/logo.png"></el-image>
</a>
</div>
<div class="down_right">

14
src/views/index/index.vue
View File

@ -1,8 +1,11 @@
<template>
<div>
<Carousel/>
<FastFindProducts/>
<ProductsClassify/>
<Carousel/>
<FastFindProducts/>
<ProductsClassify/>
<ProductsShow/>
<ProjectCase/>
<AboutUs/>
</div>
</template>
@ -10,10 +13,13 @@
import Carousel from "@/components/Carousel";
import FastFindProducts from "@/components/FastFindProducts";
import ProductsClassify from "@/components/ProductsClassify";
import ProductsShow from "@/components/ProductsShow";
import ProjectCase from "@/components/ProjectCase";
import AboutUs from "@/components/AboutUs";
export default {
name: "index",
components: {ProductsClassify, FastFindProducts, Carousel}
components: {AboutUs, ProjectCase, ProductsShow, ProductsClassify, FastFindProducts, Carousel}
}
</script>