Skip to content

Commit

Permalink
50%首页
Browse files Browse the repository at this point in the history
  • Loading branch information
lovinglili committed Nov 8, 2018
1 parent 072ee28 commit c194291
Show file tree
Hide file tree
Showing 10 changed files with 351 additions and 124 deletions.
8 changes: 1 addition & 7 deletions src/components/commons/home/BannerDown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,10 @@ export default {
},
props:["imgNavs"],
created() {
// console.log(this.imgNavs,"imgNavs")
// this.$http({
// url: "/ycmain/2.0/api/AppView/Index/New2?_=1541592295622"
// }).then(result => {
// this.imgNavs = result.data.Body.CustomMenus.Menus;
this.imgNavs.forEach((item, index) => {
item["categories"] = this.categories[index];
});
// });
},
methods:{
goToList(categories){
Expand Down
14 changes: 2 additions & 12 deletions src/components/commons/home/HomeBanner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,14 @@ export default {
};
},
props:["billboards"],
// created() {
// this.$http({
// url: "/ycmain/2.0/api/AppView/Index/New2?_=1541592295622"
// }).then(result => {
// this.billboards = result.data.Body.Banners.Banners;
// });
// },
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// var $that=this;
// console.log(this)
// console.log(billboards,"billboards")
}
};
</script>
Expand Down
105 changes: 105 additions & 0 deletions src/components/layout/FooterNav.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<ul class="footer-nav">
<li v-for ="(footerData,index) in footerDatas" :key="index" @click="isShow(index)">
<strong>{{footerData.title}}</strong>

<span>+</span>
<transition
name="fade"
>
<div v-if="footerData.isShow" class="items">
<a v-for ="(datas,index) in footerData.words" :key="index">{{datas}}</a>
</div>
</transition>
</li>
</ul>
</template>

<script>
export default {
data() {
return {
footerDatas: [
{
title: "YWART.com",
words: ["精选", "原创艺术", "藏艺术", "艺居生活"],
isShow: false
},
{
title: "YWART.com",
words: ["精选", "原创艺术", "藏艺术", "艺居生活"],
isShow: false
},
{
title: "YWART.com",
words: ["精选", "原创艺术", "藏艺术", "艺居生活"],
isShow: false
},
{
title: "YWART.com",
words: ["精选", "原创艺术", "藏艺术", "艺居生活"],
isShow: false
}
]
};
},
methods: {
isShow(indexs) {
if (this.footerDatas[indexs].isShow) {
this.footerDatas[indexs].isShow = false;
return;
}
this.footerDatas.forEach((item, index) => {
if (item.isShow) {
item.isShow = false;
}
if (index == indexs) {
item.isShow = true;
}
});
}
}
};
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s ease;
}
.fade-enter,
.fade-leave-to {
transform: translateY(10px);
opacity: 0;
}
.footer-nav {
li:last-of-type {
border-bottom: 0.026667rem solid #eee;
}
li {
box-sizing: border-box;
border-top: 0.026667rem solid #eee;
line-height: 1.013333rem;
padding: 0 0.266667rem;
strong {
color: #676767;
font-size: 0.373333rem;
font-weight: normal;
}
span {
float: right;
}
.items {
padding: 0 0 0.266667rem 0.266667rem;
a {
display: block;
color: #333;
font-size: 0.32rem;
line-height: 0.746667rem;
}
}
}
}
</style>
87 changes: 87 additions & 0 deletions src/components/layout/HomeFooter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<footer>
<section class="appdownload">
<div class="logo"><img src="https://cdn.ywart.com/content/image/appicon.png"></div>
<div class="info">
<p class="p1">有艺网,你的App圈更具艺术范儿</p>
<p class="p2">海量作品 购买便捷 实景体验</p>

</div>
<div class="apple">
<a href="https://itunes.apple.com/us/app/yi-wang/id1142923429?mt=8"><img src="https://cdn.ywart.com/content/image/IOSBlackDL.png" alt=""></a>
</div>
<div class="android">
<a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.ywart.android"><img src="https://cdn.ywart.com/content/image/AndroidBlackDL.png" alt=""></a>
</div>
</section>
<div class="footer-nav">
<footer-nav>
</footer-nav>
</div>
</footer>
</template>

<script>
import FooterNav from "@c/layout/FooterNav"
export default {
components:{
FooterNav
}
}
</script>

<style lang="scss">
footer{
box-sizing: border-box;
width: 100%;
color: #333;
padding: 0 .266667rem 1.546667rem .266667rem;
margin-top: .266667rem;
background-color: #fff;
.footer-nav{
margin-bottom:.266667rem;
}
.appdownload{
height:10.4rem;
}
.logo{
height: 4.266667rem;
text-align: center;
padding: .8rem;
img{
height:100%;
}
}
.info{
text-align:center;
.p1{
font-size: .48rem;
letter-spacing: .053333rem;
color: #000000;
text-align: center;
}
.p2{
font-weight: bold;
}
}
.apple{
margin-top: 1.066667rem;
height: 1.066667rem;
text-align: center;
img{
height:100%;
}
}
.android{
margin-top: .533333rem;
height: 1.066667rem;
text-align: center;
img{
height:100%;
}
}
}
</style>
117 changes: 64 additions & 53 deletions src/components/layout/TopNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
</div>
<div class="headerTops">
<ul>
<li @click="type.which='jing-xuan'">精选</li>
<li @click="type.which='yuan-chuang'">原创</li>
<li>精选</li>
<li>精选</li>
<li>精选</li>
<router-link active-class="active" tag="li" v-for="type in types" :key="type.id" :to="type.path">
<a >{{type.title}}</a>
</router-link>

</ul>
</div>
</header>
Expand All @@ -20,10 +20,16 @@

<script>
export default {
data(){
},
props:["type"]
data() {
return {
types: [
{ id: "1", title: "精选", path: "jingxuan" },
{ id: "2", title: "原创艺术", path: "yuanchuang" },
{ id: "3", title: "造艺", path: "zaoyi" },
{ id: "4", title: "藏艺术", path: "cangyi" }
]
};
}
};
</script>

Expand All @@ -36,53 +42,58 @@ header {
background: rgba(0, 0, 0, 0.2);
z-index: 999;
height: 2.613333rem;
padding-top: .533333rem !important;
.headerTops{
height: 1.253333rem;
line-height: 1.253333rem;
ul{
width:80%;
margin:0 auto;
display:flex;
justify-content: space-between;
li{
flex-grow:1;
color:#fff;
text-align: center;
}
}
}
.headerTop{
display:flex;
justify-content: space-around;
height: .8rem;
.headerTop-left {
width:10%;
background: url(https://cdn.ywart.com/icon/headerKefuB.png) no-repeat center
center;
background-size: .693333rem !important;
padding-top: 0.533333rem !important;
.headerTops {
height: 1.253333rem;
line-height: 1.253333rem;
ul {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
li {
flex-grow: 1;
text-align: center;
height:100%;
a {
color: #fff;
}
&.active a {
padding-bottom: 0.213333rem;
border-bottom:2px solid #fff;
}
.headerTop-center{
width:80%;
input{
display: block;
width: 100%;
height: 100%;
outline: none;
border: 0;
background: #F2F2F2;
padding-left:.266667rem;
}
}
.headerTop-right{
width:10%;
background: url(https://cdn.ywart.com/icon/znx.png) no-repeat center center;
background-size: .693333rem !important;
}
}
.headerTop {
display: flex;
justify-content: space-around;
height: 0.8rem;
.headerTop-left {
width: 10%;
background: url(https://cdn.ywart.com/icon/headerKefuB.png) no-repeat
center center;
background-size: 0.693333rem !important;
}
.headerTop-center {
width: 80%;
input {
display: block;
width: 100%;
height: 100%;
outline: none;
border: 0;
background: #f2f2f2;
padding-left: 0.266667rem;
}
}
.headerTop-right {
width: 10%;
background: url(https://cdn.ywart.com/icon/znx.png) no-repeat center
center;
background-size: 0.693333rem !important;
}
}
}
</style>
Loading

0 comments on commit c194291

Please sign in to comment.