Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化首页样式

master
邓平艺 4 years ago
parent
e8353b1423
commit
110e5d4f3d
6 changed files with 122 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      components/index-banner/index-banner.vue
  2. 31
      components/lf-indexFind/lf-indexFind.vue
  3. 104
      components/lf-indexShopMatrix/lf-indexShopMatrix.vue
  4. 11
      components/lf-multiColumnAd/lf-multiColumnAd.vue
  5. 8
      components/lf-seckill/lf-seckill.vue
  6. 29
      pages/index/index/index.vue

1
components/index-banner/index-banner.vue
View File

@ -143,7 +143,6 @@ export default {
height: 100% !important;
object-fit: cover;
vertical-align: middle !important;
border-radius: 0 0 30rpx 30rpx;
}
}

31
components/lf-indexFind/lf-indexFind.vue
View File

@ -1,13 +1,16 @@
<template>
<scroll-view class="find-scroll" :scroll-x="true">
<view class="find-content">
<view class="find-item" :class="{'max-item': index == 0}" v-for="(item, index) in 5" :key="index">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="lf-line-2 info">南边开，风儿吹，北边放，花儿开，西边来，春归去，东边来，北边跑</view>
<view class="centent">
<view class="title">精选发现好物</view>
<scroll-view class="find-scroll" :scroll-x="true">
<view class="find-content">
<view class="find-item" :class="{'max-item': index == 0}" v-for="(item, index) in 5" :key="index">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="lf-line-2 info">南边开，风儿吹，北边放，花儿开，西边来，春归去，东边来，北边跑</view>
</view>
</view>
</view>
<view style="height: 10rpx;"></view>
</scroll-view>
<view style="height: 10rpx;"></view>
</scroll-view>
</view>
</template>
<script>
@ -27,8 +30,18 @@
</script>
<style lang="scss" scoped="scoped">
.centent{
padding-top: 60rpx;
}
.title{
font-size: 36rpx;
font-weight: bold;
text-align: center;
color: #222222;
margin-bottom: 30rpx;
}
.find-scroll{
padding: 30rpx 32rpx;
padding: 0rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;

104
components/lf-indexShopMatrix/lf-indexShopMatrix.vue
View File

@ -1,10 +1,13 @@
<template>
<view class="content">
<view class="item" v-for="(item, index) in 16" :key="index">
<image class="bg-img" src="https://picsum.photos/200/300"></image>
<view class="shop">
<image src="../../static/recommend-r.png"></image>
<view class="lf-line-1">DIOR迪奥</view>
<view class="title">大牌不停推</view>
<view class="flex-box">
<view class="item" v-for="(item, index) in 16" :key="index">
<image class="bg-img" src="https://picsum.photos/200/300"></image>
<view class="shop">
<image src="../../static/recommend-r.png"></image>
<view class="lf-line-1">DIOR迪奥</view>
</view>
</view>
</view>
</view>
@ -31,50 +34,59 @@
width: 750rpx;
height: max-content;
box-sizing: border-box;
padding: 30rpx 32rpx;
display: flex;
flex-wrap: wrap;
.item{
width: 165rpx;
height: 165rpx;
border: 1rpx solid #979797;
margin-right: 9rpx;
position: relative;
&:nth-child(4n){
margin-right: 0rpx;
}
&:nth-child(n+5){
margin-top: 8rpx;
}
.bg-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.shop{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60rpx 32rpx 0;
.title{
font-size: 36rpx;
font-weight: bold;
text-align: center;
color: #222222;
margin-bottom: 30rpx;
}
.flex-box{
display: flex;
flex-wrap: wrap;
.item{
width: 165rpx;
height: 165rpx;
border: 1rpx solid #979797;
margin-right: 9rpx;
position: relative;
z-index: 2;
&>image{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background-color: #FFFFFF;
&:nth-child(4n){
margin-right: 0rpx;
}
&:nth-child(n+5){
margin-top: 8rpx;
}
.bg-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&>view{
font-size: 24rpx;
color: #FFFFFF;
margin-top: 4rpx;
.shop{
width: 100%;
text-align: center;
height: 100%;
background-color: rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
&>image{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background-color: #FFFFFF;
}
&>view{
font-size: 24rpx;
color: #FFFFFF;
margin-top: 4rpx;
width: 100%;
text-align: center;
}
}
}
}

11
components/lf-multiColumnAd/lf-multiColumnAd.vue
View File

@ -35,7 +35,7 @@
width: 750rpx;
height: max-content;
box-sizing: border-box;
padding: 30rpx 32rpx;
padding: 60rpx 32rpx 0rpx;
display: flex;
justify-content: space-between;
.left{
@ -45,6 +45,7 @@
width: 100%;
height: 100%;
background: #D8D8D8;
border-radius: 20rpx 0rpx 0rpx 20rpx;
}
}
.right{
@ -54,8 +55,16 @@
width: 228rpx;
height: 208rpx;
background: #D8D8D8;
&:nth-child(1n){
border-radius: 0rpx 20rpx 0rpx 0rpx;
}
&:nth-child(2n){
margin-top: 20rpx;
border-radius: 0rpx 0rpx 20rpx 0rpx;
}
&>image{
width: 100%;
height: 100%;
}
}
}

8
components/lf-seckill/lf-seckill.vue
View File

@ -1,5 +1,6 @@
<template>
<view class="content">
<view class="title">剁手不心疼</view>
<view class="card">
<view class="title">秒杀购</view>
<view class="desc">低价不等人，快来秒杀啦～</view>
@ -41,6 +42,13 @@
width: 750rpx;
height: max-content;
box-sizing: border-box;
.title{
font-size: 36rpx;
font-weight: bold;
text-align: center;
color: #222222;
margin-bottom: 30rpx;
}
.card{
width: 686rpx;
height: 471rpx;

29
pages/index/index/index.vue
View File

@ -78,12 +78,13 @@
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<indexNav :nav-data="item.value" :meta="item.meta"></indexNav>
</view>
<!-- 服务升级 TODO 暂时借用快捷导航字段判断 -->
<!-- 今日头条 TODO 暂时借用快捷导航字段判断 -->
<view class="fuwu-tips" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<view class="fuwu-tips-title">服务升级</view>
<view class="fuwu-tips-title">今日头条</view>
<view>
<text class="fuwu-tips-desc1">线上商城全场限时包邮</text>
<text class="fuwu-tips-desc2">(部分品牌满额包邮)</text>
<text class="fuwu-tips-desc1">来自太阳的宝石-8月生辰石</text>
<!-- <text class="fuwu-tips-desc1">线上商城全场限时包邮</text>
<text class="fuwu-tips-desc2">(部分品牌满额包邮)</text> -->
</view>
</view>
<!-- 活动页入口 TODO -->
@ -108,6 +109,7 @@
</view>
<!-- TODO 店铺商品展示模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<view class="lf-module-title">好物种草间</view>
<lf-shop-goods-card v-for="(d_item,d_index) in 2" :key="d_index"></lf-shop-goods-card>
</view>
<!--图片魔方-->
@ -124,6 +126,7 @@
</view>
<!-- TODO 为你推荐模块 -->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<view class="lf-module-title">为你推荐</view>
<lf-waterfall :list="recommend_list"></lf-waterfall>
</view>
</view>
@ -368,6 +371,8 @@
</view>
<!-- ad广告弹出组件 TODO 暂时先注释 -->
<!-- <lf-ad-modal :value.sync="show_ad"></lf-ad-modal> -->
<!-- 回到顶部组件 -->
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
<!-- tabbar组件 -->
<lf-tabbar />
</block>
@ -1139,7 +1144,7 @@
background-color: #eff6f7;
margin: 60rpx auto 0;
display: flex;
justify-content: space-between;
// justify-content: space-between;
box-sizing: border-box;
align-items: center;
padding: 0 30rpx;
@ -1147,9 +1152,13 @@
.fuwu-tips-title{
font-size: 36rpx;
color: #186c6b;
margin-right: 15rpx;
font-weight: bold;
font-family: '华文行楷';
}
.fuwu-tips-desc1{
font-size: 28rpx;
color: #222222;
}
.fuwu-tips-desc2{
font-size: 22rpx;
@ -1160,9 +1169,19 @@
width: 686rpx;
height: 350rpx;
margin: 60rpx auto 0;
border-radius: 10rpx;
overflow: hidden;
&>image{
width: 100%;
height: 100%;
}
}
.lf-module-title{
font-size: 36rpx;
font-weight: bold;
text-align: center;
color: #222222;
margin-bottom: 30rpx;
margin-top: 60rpx;
}
</style>
Write Preview
Loading…
Cancel
Save