dlh/shop_uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页样式

Browse Source
This commit is contained in:
wangxiaowei 2024-12-11 11:50:10 +08:00
parent 37133e11a3
commit 967cd89485
3 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/goods-column/goods-column.vue
View File

@ -1,13 +1,19 @@
<template>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
:up="upOption" :down="downOption" v-if="hasData">
<view class="">
<view class="flex row-center zx">
<text class="bold xxl">甄选</text>
<u-image :src="aliOSS + 'uniapp/jh.png'" width="110" height="100" mode="aspectFit"></u-image>
</view>
</view>
<view class="goods-column">
<scroll-view scroll-x="true">
<view class="column-wrap">
<view class="item flex-col m-r-50 muted" v-for="(item, index) in columnList" :key="index" @tap="changeActive(index)">
<view class="xxl normal title" :class="{bold: active == index}">{{item.name}}</view>
<view class="m-t-8 xs text-center" :class="{normal : active == index}">{{item.remark}}</view>
<view v-if="active == index" class="line br60"></view>
<view class="sm normal title" :class="{bold: active == index}">{{item.name}}</view>
<!-- <view class="m-t-8 xs text-center" :class="{normal : active == index}">{{item.remark}}</view>
<view v-if="active == index" class="line br60"></view> -->
</view>
</view>
</scroll-view>
@ -106,6 +112,12 @@
}
</script>
<style lang="scss" scoped>
.zx {
background-color: #fff;
margin: 0 30rpx;
border-radius: 40rpx;
}
.goods-column {
.column-wrap {
display: inline-block;
@ -119,15 +131,18 @@
.title {
position: relative;
z-index: 1;
background-color: #fff;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}
.line {
position: absolute;
top: 32rpx;
left: 0;
width: 144rpx;
height: 12rpx;
background: linear-gradient(90deg, #FF2C3C 0%, rgba(255, 44, 60, 0) 100%);
}
// .line {
// position: absolute;
// top: 32rpx;
// left: 0;
// width: 144rpx;
// height: 12rpx;
// background: linear-gradient(90deg, #FF2C3C 0%, rgba(255, 44, 60, 0) 100%);
// }
}
}
}

41
components/index-home/index-home.vue
View File

@ -33,11 +33,10 @@
<home-seckill :list="seckillGoods"></home-seckill>
</view> -->
<!-- <view class="container flex row-between"> -->
<view class="container flex">
<view class="container flex m-t-20">
<view class="section hot-sale">
<view class="header">
<u-image :src="aliOSS + 'uniapp/rxbd.png'" height="60" mode="aspectFit"></u-image>
<view class="header row-center">
<u-image :src="aliOSS + 'uniapp/rxbd.png'" width="160" height="80" mode="aspectFit"></u-image>
</view>
<view class="content">
<swiper class="swiper" :autoplay="true" :interval="3000" style="height: 500rpx;">
@ -73,13 +72,16 @@
</view>
<view class="section shop-news">
<view class="header row-between">
<view class="flex row-center">
<text class="bold m-r-5 lg">商城</text>
<u-image :src="aliOSS + 'uniapp/kx.png'" height="80" width="80" mode="aspectFit"></u-image>
<router-link to="/bundle_b/pages/mall_news/index">
<view class="header row-between">
<view class="flex row-center">
<text class="bold m-r-5 lg">商城</text>
<u-image :src="aliOSS + 'uniapp/kx.png'" height="80" width="80" mode="aspectFit"></u-image>
</view>
<u-icon name="arrow-right" size="28" color="#ccc"></u-icon>
</view>
<u-icon name="arrow-right" size="28" color="#ccc"></u-icon>
</view>
</router-link>
<view class="content">
<mall-news :list="mallNews"></mall-news>
</view>
@ -87,20 +89,6 @@
</view>
</view>
<!-- 好物直降 -->
<view class="m-t-20">
<panic-buying v-if="appConfig.group_buy_status" :list="panicList"></panic-buying>
</view>
<view class="seckill m-t-20" v-if="mallNews != ''">
<mall-news :list="mallNews"></mall-news>
</view>
<view class="m-t-20" v-if="appConfig.index_setting.host_show && hotGoods.length">
<active-area :list="hotListGoods" :price-type="priceType" type="hot" title="热销榜单"
url="/pages/active_list/active_list?type=hot"></active-area>
</view>
<view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopLists.length">
<shop-recommend type="shop-recommends" title="店铺推荐" :list="shopLists"></shop-recommend>
</view>
@ -331,17 +319,18 @@
.live-header {
padding: 28rpx 24rpx;
}
}
}
.container {
align-items: flex-start;
height: 618rpx;
overflow: hidden;
.hot-sale {
width: 46%;
height: 630rpx;
height: 618rpx;
}
.section {

20
components/mall-news/mall-news.vue
View File

@ -5,16 +5,16 @@
<swiper-item class="item bg-white flex" v-for="(item, index) in list" :key="index">
<view class="flex-1">
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" v-if="item.mall_type == 0">
<view v-if="item.files != ''">
<view v-if="item.files != ''" style="height: 120rpx;">
<view v-if="item.type == 0">
<u-image class="thumb" width="100%" height="100" :border-radius="10" :src="item.files[0].src"></u-image>
<u-image class="thumb" :height="width" :border-radius="10" :src="item.files[0].src"></u-image>
</view>
<view v-if="item.type == 1">
<video :src="item.files[0].src" class="thumb-video"></video>
</view>
</view>
<view class="goods-name line-2 bold sm">{{item.title}}</view>
<view class="goods-name line-2 bold sm m-t-20">{{item.title}}</view>
</router-link>
<view v-if="item.mall_type == 1">
@ -29,16 +29,12 @@
</view>
</scroll-view>
</view>
<view class="goods-name line-2 bold sm">{{item.title}}</view>
<view class="goods-name line-2 bold sm m-t-20">{{item.title}}</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- <router-link :to="'/bundle_b/pages/mall_news/index'">
<view class="xs flex row-center more">查看更多 <u-icon name="arrow-right"></u-icon>
</view>
</router-link> -->
</view>
</template>
@ -53,7 +49,7 @@
},
data() {
return {
width: '240rpx'
width: '120rpx'
};
},
methods: {
@ -106,7 +102,6 @@
}
.mall-block .item {
// padding: 20rpx;
.border-btn {
border: 1px solid $-color-primary;
color: $-color-primary;
@ -120,7 +115,6 @@
.thumb {
margin-right: 20rpx;
margin-top: 20rpx;
}
.thumb-video {
@ -138,5 +132,9 @@
.w-80 {
width: 80vw;
}
.goods-name {
height: 80rpx;
}
}
</style>