clunt
/
dingdong-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、首页热门类目图样式修改 2、服务详情轮播图，详情图，详情介绍展示修改

This commit is contained in:
donqi 2022-08-25 00:11:43 +08:00
parent 48516938b1
commit ddb2560121
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/common-card/vertical-card.vue
View File

@ -8,18 +8,18 @@
<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in list" :key="index" @click="clickCard(item)"> <view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in list" :key="index" @click="clickCard(item)">
<view class="cu-item shadow"> <view class="cu-item shadow">
<view v-if="item.imgs && item.imgs.length > 2" class="flex justify-between align-center multi-pic-container"> <view v-if="item.imgs && item.imgs.length > 2" class="flex justify-between align-center multi-pic-container">
<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view> <view class="left-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
<view class="flex-column-between align-center right-view"> <view class="flex-column-between align-center right-view">
<image class="radius" :src="item.imgs[1]" mode="aspectFill"></image> <image class="radius-img" :src="item.imgs[1]" mode="aspectFill"></image>
<image class="radius" :src="item.imgs[2]" mode="aspectFill"></image> <image class="radius-img" :src="item.imgs[2]" mode="aspectFill"></image>
</view> </view>
</view> </view>
<view v-else-if="item.imgs && item.imgs.length > 1" class="flex justify-between align-center multi-pic-container"> <view v-else-if="item.imgs && item.imgs.length > 1" class="flex justify-between align-center multi-pic-container">
<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view> <view class="left-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
<view class="left-view"><image class="radius" :src="item.imgs[1]" mode="aspectFill"></image></view> <view class="left-view"><image class="radius-img" :src="item.imgs[1]" mode="aspectFill"></image></view>
</view> </view>
<view v-else-if="item.imgs && item.imgs.length" class="flex justify-between align-center multi-pic-container"> <view v-else-if="item.imgs && item.imgs.length" class="flex justify-between align-center multi-pic-container">
<view class="whole-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view> <view class="whole-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
</view> </view>
<view class="cu-item item-margin-custom"> <view class="cu-item item-margin-custom">
<view class="content flex-sub"> <view class="content flex-sub">
@ -67,7 +67,7 @@
} }
.multi-pic-container { .multi-pic-container {
height: 450rpx; height: 350rpx;
overflow: hidden; overflow: hidden;
} }
@ -82,7 +82,8 @@
} }
.multi-pic-container > .left-view { .multi-pic-container > .left-view {
width: calc(50% - 5rpx); width: calc(50% - 7rpx);
padding-left: 30rpx;
height: 100%; height: 100%;
} }
@ -92,12 +93,17 @@
} }
.multi-pic-container > .right-view { .multi-pic-container > .right-view {
width: calc(50% - 5rpx); width: calc(50% - 7rpx);
padding-right: 30rpx;
height: 100%; height: 100%;
} }
.multi-pic-container > .right-view > image { .multi-pic-container > .right-view > image {
height: calc(50% - 5rpx); height: calc(50% - 7rpx);
width: 100%; width: 100%;
}
.radius-img {
border-radius: 10rpx;
} }
</style> </style>

21
pages/product/product-detail.vue
View File

@ -9,7 +9,7 @@
</cu-custom> </cu-custom>
<!-- 导航栏 --> <!-- 导航栏 -->
<uni-transition class="fixed-top-bar" mode-class="fade" :show="showTopNav"> <uni-transition class="fixed-top-bar" mode-class="fade" :show="showTopNav">
<view class="grid text-center col-3 solid-top solid-bottom bg-white"> <view class="grid text-center col-2 solid-top solid-bottom bg-white">
<view class="padding" :class="curTopNav == 0 ? 'bg-blue' : ''" @click.stop="clickNav(0)">服务</view> <view class="padding" :class="curTopNav == 0 ? 'bg-blue' : ''" @click.stop="clickNav(0)">服务</view>
<!-- <view class="padding" :class="curTopNav == 1 ? 'bg-blue' : ''" @click.stop="clickNav(1)">评价</view> --> <!-- <view class="padding" :class="curTopNav == 1 ? 'bg-blue' : ''" @click.stop="clickNav(1)">评价</view> -->
<view class="padding" :class="curTopNav == 2 ? 'bg-blue' : ''" @click.stop="clickNav(2)">详情</view> <view class="padding" :class="curTopNav == 2 ? 'bg-blue' : ''" @click.stop="clickNav(2)">详情</view>
@ -61,7 +61,7 @@
<!-- 产品概要 --> <!-- 产品概要 -->
<view class="bg-white padding-sm"> <view class="bg-white padding-sm">
<view class="flex justify-between text-df align-center"> <view class="flex justify-between text-df align-center">
<view class="padding-right-sm text-left solid-right"> <view class="padding-right-sm text-left">
<view class="text-xl"> <view class="text-xl">
<view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ"> <view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ">
<text class="cuIcon-medal">金牌服务</text> <text class="cuIcon-medal">金牌服务</text>
@ -70,7 +70,7 @@
</view> </view>
<view class="text-sm text-gray margin-top-xs">{{productDetail.goodsDesc}}</view> <view class="text-sm text-gray margin-top-xs">{{productDetail.goodsDesc}}</view>
</view> </view>
<view class="text-xl text-right padding-lr"> <view class="text-xl text-right padding-lr solid-left">
<!-- <view class="margin-tb-xs"><text class="cuIcon-share"></text></view> --> <!-- <view class="margin-tb-xs"><text class="cuIcon-share"></text></view> -->
<view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text <view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text
class="cuIcon-friendfamous"></text></view> class="cuIcon-friendfamous"></text></view>
@ -105,7 +105,7 @@
<text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != productDetail.goodsAreaList.length - 1">,</text></text> <text class="margin-lr-xs text-sm">{{item.areaName}}<text v-if="index != productDetail.goodsAreaList.length - 1">,</text></text>
</text> </text>
</view> </view>
<view v-if="productDetail.remark"> <!-- <view v-if="productDetail.remark">
<view class="cu-capsule margin-tb-xs"> <view class="cu-capsule margin-tb-xs">
<view class='cu-tag bg-main-color'> <view class='cu-tag bg-main-color'>
<text class="cuIcon-commentfill"></text> <text class="cuIcon-commentfill"></text>
@ -115,7 +115,7 @@
</view> </view>
</view> </view>
<text class="margin-lr-xs text-sm">{{productDetail.remark}}</text> <text class="margin-lr-xs text-sm">{{productDetail.remark}}</text>
</view> </view> -->
<view class="solid-top text-lg padding-tb-sm"> <view class="solid-top text-lg padding-tb-sm">
<text class="text-black">选择品类</text> <text class="text-black">选择品类</text>
</view> </view>
@ -151,9 +151,12 @@
<view class="text-sm" @click="showShopDetail(shopInfo)">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view> <view class="text-sm" @click="showShopDetail(shopInfo)">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
</view> </view>
</view> </view>
<!-- 服务详情 --> <!-- 服务详情 -->
<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image"> <view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar ">
<image v-for="(item,index) in detailPicList" :src="item.imgUrl" mode="widthFix" style="width: 100%;"></image> <view class="text-center padding-xl">{{productDetail.remark}}</view>
<view class="image">
<image v-for="(item,index) in detailPicList" :src="item.imgUrl" mode="widthFix" style="width: 100%;"></image>
</view>
</view> </view>
<!-- 底部操作条 --> <!-- 底部操作条 -->
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar"> <view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
@ -402,7 +405,7 @@
} }
.lg-screen-swiper { .lg-screen-swiper {
height: 150vw; height: 130vw;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
</style> </style>