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

Merge pull request '邓洁 : 部分区域响应式处理' (#8) from dj into master 

Reviewed-on: #8
This commit is contained in:
odjbin 2023-05-05 17:09:09 +00:00
parent 3d08b47ed1 ab8db3aa4d
commit 2faacc412e
10 changed files with 222 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -42,6 +42,7 @@ export default {
*{
padding: 0;
margin: 0;
font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
}
a{
width: 100%;

1
src/components/AboutUs.vue
View File

@ -105,6 +105,7 @@ export default {
<style scoped lang="scss">
.aboutUs {
min-width: 1300px;
margin-bottom: 50px;
.about_title {

23
src/components/Carousel.vue
View File

@ -1,17 +1,13 @@
<template>
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="slideshow">
<el-carousel trigger="click" height="36.2vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div>
<img :src="item.imgurl" alt="">
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
<div class="slideshow">
<el-carousel trigger="click" height="36.2vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div>
<img :src="item.imgurl" alt="">
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
@ -37,6 +33,7 @@ export default {
<style scoped>
.slideshow {
width: 100%;
min-width: 1300px;
}
img {

101
src/components/FastFindProducts.vue
View File

@ -1,49 +1,41 @@
<template>
<div>
<div class="fastFind">
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="fast_left">
<p>
快速查找产品
</p>
<p>
可以快速地找到合适你的产品
</p>
</div>
<div class="fast_right">
<ul>
<li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
@mouseenter="changeFinds(moduleIndex)">
<a :href="moduleItem.href">
<div style="min-width: 1300px">
<div style=" border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;">
<el-row class="fastFind">
<div class="fast_left">
<p>
快速查找产品
</p>
<p>
可以快速地找到合适你的产品
</p>
</div>
<div class="fast_right">
<ul>
<li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
@mouseenter="changeFinds(moduleIndex)">
<a :href="moduleItem.href">
<span>
<img :src="moduleItem.src" alt=""/>
</span>
<span>{{ moduleItem.name }}</span>
</a>
</li>
</ul>
</div>
</el-col>
<span>{{ moduleItem.name }}</span>
</a>
</li>
</ul>
</div>
</el-row>
</div>
<div class="classify">
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
<ul>
<li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
<a :href="childrenItem.href" class="">
{{ childrenItem.title }}
</a>
</li>
</ul>
</div>
</el-col>
<div style="border-bottom: 1px solid #e9e9e9;">
<el-row class="classify">
<div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
<ul>
<li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
<a :href="childrenItem.href" class="">
{{ childrenItem.title }}
</a>
</li>
</ul>
</div>
</el-row>
</div>
</div>
@ -200,13 +192,32 @@ export default {
</script>
<style scoped lang="scss">
@media screen and (max-width: 1660px) {
.fastFind {
width: 1230px !important;
}
.classify {
width: 1230px !important;
}
}
@media screen and (max-width: 1480px) {
.fastFind {
width: 1100px !important;
}
.classify {
width: 1100px !important;
}
}
.current {
background: #eeeeee;
}
.fastFind {
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
width: 1360px;
margin: 0 auto;
background-color: #ffffff;
.fast_left {
@ -261,10 +272,9 @@ export default {
}
.classify {
width: 1360px;
margin: 0 auto;
padding: 15px 0;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e9e9e9;
#bok_1 {
display: none;
@ -283,6 +293,7 @@ export default {
color: #333;
margin-right: 25px;
}
> a:hover {
text-decoration: underline;
}

3
src/components/NewsCenter.vue
View File

@ -100,8 +100,9 @@ export default {
<style scoped lang="scss">
.newsCenter {
min-width: 1300px;
.news_bg {
margin: 0 60px;
//min-width: 1300px;
background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
background-size: cover;
height: 380px;

55
src/components/ProductsClassify.vue
View File

@ -1,34 +1,36 @@
<template>
<div class="grid">
<el-row type="flex">
<el-col :span="4">
<el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
</el-col>
<el-col :span="16">
<el-col :span="8">
<div class="grid_left">
<a href="">
<el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="16">
<el-row>
<el-col :span="8">
<div class="grid_left">
<a href="">
<span class="pic">
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
</span>
<span class="info">产品分类</span>
<span>了解更多</span>
</a>
</div>
</el-col>
<el-col :span="16">
<div class="grid_right">
<ul>
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
<a :href="picItem.href">
<span class="info">产品分类</span>
<span>了解更多</span>
</a>
</div>
</el-col>
<el-col :span="16">
<div class="grid_right">
<ul>
<li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
<a :href="picItem.href">
<span>
<img :src="picItem.src" alt=""/>
</span>
<span class="info">{{ picItem.name }}</span>
</a>
</li>
</ul>
</div>
</el-col>
<span class="info">{{ picItem.name }}</span>
</a>
</li>
</ul>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
@ -76,23 +78,18 @@ export default {
opacity: 1;
}
//.grid_left:hover span:nth-child(2) {
// //background-color: red;
//}
.grid_left {
position: relative;
display: inline-block;
transition: all 0.6s;
a {
.pic {
img {
width: 440px;
//z-index: 9;
}
}
span:last-child {
color: #fff;
position: absolute;
@ -107,7 +104,6 @@ export default {
text-align: center;
background-color: #de832f;
border-radius: 100px 100px 100px 100px;
//z-index: 999;
}
}
}
@ -158,7 +154,8 @@ export default {
overflow: hidden;
transition: all 0.6s;
}
img:hover{
img:hover {
filter: brightness(85%);
opacity: 1;
}

17
src/components/ProductsShow.vue
View File

@ -11,10 +11,10 @@
</div>
</el-col>
</el-row>
<el-row type="flex">
<el-col :span="4">
</el-col>
<el-col :span="16" class="tagRow">
<el-row type="flex" style="width: 987px;margin: 0 auto">
<!-- <el-col :span="4">-->
<!-- </el-col>-->
<!-- <el-col :span="16" class="tagRow">-->
<div>
<el-tag
v-for="item in tagItems"
@ -23,9 +23,8 @@
<a :href="item.href">{{ item.title }}</a>
</el-tag>
</div>
</el-col>
<!-- </el-col>-->
</el-row>
</div>
</template>
@ -81,9 +80,14 @@ export default {
background-color: #333;
a{
color: #fff;
}
}
.el-tag:last-child{
margin-right: 0;
}
.el-tag {
border: none;
margin-right: 10px;
padding: 0 12px;
@ -95,6 +99,7 @@ export default {
}
}
.product_show {
min-width: 1300px;
padding: 60px 0 60px 0;
border-top: 1px solid #e9e9e9;
background-color: #f1f1f1;

23
src/components/ProjectCase.vue
View File

@ -70,10 +70,31 @@ export default {
</script>
<style scoped lang="scss">
//@media screen and (max-width: 1660px) {
// .pics {
// img {
// height: 221px!important;
// }
// }
// .case_example {
// width: 1230px !important;
// }
//}
//
//@media screen and (max-width: 1480px) {
// .pics {
// img {
// height: 196px!important;
// }
// }
// .case_example {
// width: 1100px !important;
// }
//}
.projectCase {
height: 970px;
.case_bg {
margin: 0 60px;
min-width: 1300px;
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
background-size: cover;
height: 540px;

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

@ -1,9 +1,6 @@
<template>
<div class="footer_bg">
<el-row type="flex" class="up_footer">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="up_left">
<el-image
style="margin-bottom: 15px"
@ -27,7 +24,6 @@
style="width: 100px; height: 100px"
src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
</div>
</el-col>
</el-row>
<el-row type="flex" class="down_footer">
<el-col :span="3">
@ -115,16 +111,27 @@ export default {
</script>
<style scoped lang="scss">
@media screen and (max-width: 1660px) {
.up_footer {
width: 1230px!important;
}
}
@media screen and (max-width: 1480px) {
.up_footer {
width: 1100px!important;
}
}
.footer_bg {
height: 276px;
width: 100%;
background-color: #111;
color: #fff;
min-width: 1300px;
.up_footer {
position: relative;
width: 1360px;
margin: 0 auto;
color: #fff;
width: 100%;
float: left;
padding: 50px 0 50px;
font-size: 12px;
@ -180,7 +187,8 @@ export default {
}
.up_right {
float: right;
position: absolute;
right: 0;
}
}

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

@ -1,46 +1,40 @@
<template>
<div>
<div style="min-width: 1300px">
<div class="header_bg" id="header_bg">
<el-row type="flex" class="up_header">
<el-col :span="4">
</el-col>
<el-col :span="16" style="z-index: 400;">
<div class="upHeaderBox">
<div class="up_header">
<span class="up_left">
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
</span>
<span class="up_right">
广东祥睿陶瓷有限公司
</span>
</el-col>
</el-row>
<el-row type="flex" class="down_header">
<el-col :span="4">
</el-col>
<el-col :span="16">
<div class="down_left">
<a href="/">
<el-image
src="http://www.yipengtaoci.com/images/logo.png"></el-image>
</a>
</div>
<div class="down_right">
<ul>
<li v-for="(item,index) in navList" :key="index" class="nav">
<a :href="item.href" class="nav_item">
{{ item.title }}
</a>
<ul class="subNav" v-if="item.children">
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
<a :href="childrenItem.href">
{{ childrenItem.title }}
</a>
</li>
</ul>
</li>
</ul>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="down_header">
<div class="down_left">
<a href="/">
<el-image
src="http://www.yipengtaoci.com/images/logo.png"></el-image>
</a>
</div>
<div class="down_right">
<ul>
<li v-for="(item,index) in navList" :key="index" class="nav">
<a :href="item.href" class="nav_item">
{{ item.title }}
</a>
<ul class="subNav" v-if="item.children">
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
<a :href="childrenItem.href">
{{ childrenItem.title }}
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="search_header" id="search_header">
<div class="headerItems">
@ -199,6 +193,28 @@ export default {
</script>
<style scoped lang="scss">
@media screen and (max-width: 1660px) {
.down_header {
width: 1230px!important;
}
.up_header {
width: 1230px!important;
}
.headerItems {
width: 1230px!important;
}
}
@media screen and (max-width: 1480px) {
.down_header {
width: 1100px!important;
}
.up_header {
width: 1100px!important;
}
.headerItems {
width: 1100px!important;
}
}
.header_bg {
transition: all 0.6s;
height: 130px;
@ -206,32 +222,38 @@ export default {
background-color: #111;
color: #fff;
.up_header {
.upHeaderBox {
width: 100%;
border-bottom: 1px solid #333;
height: 36px;
.up_left {
color: #fff;
display: inline;
line-height: 36px;
float: left;
margin-left: 90px;
font-size: 12px;
}
.up_header {
width: 1360px;
margin: 0 auto;
height: 36px;
.up_right {
color: #ccc;
display: inline;
float: right;
line-height: 35px;
font-size: 12px;
.up_left {
color: #fff;
display: inline;
line-height: 36px;
float: left;
margin-left: 90px;
font-size: 12px;
}
.up_right {
color: #ccc;
display: inline;
float: right;
line-height: 35px;
font-size: 12px;
}
}
}
.down_header {
width: 1360px;
margin: 0 auto;
position: relative;
width: 100%;
float: left;
padding: 4px 0;
z-index: 30;
@ -321,13 +343,13 @@ export default {
.headerItems {
position: relative;
padding: 8px 0;
width: 66%;
width: 1360px;
margin: 0 auto;
ul {
display: flex;
width: 100%;
padding-left: 100px;
padding-left: 50px;
li {
position: relative;