yxt_group
/
mallplus
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-02-14

master
guoxing 2 years ago
parent
03eb3fd9e0
commit
4ac17b52d7
2 changed files with 157 additions and 316 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 463
      mallplusui-uniapp-app2/pages/index/index.vue
  2. 10
      mallplusui-uniapp-app2/pagesA/product/product.vue

463
mallplusui-uniapp-app2/pages/index/index.vue
View File

@ -187,74 +187,81 @@
</scroll-view> </scroll-view>
</view> </view>
<!-- 新品推荐 --> <!-- 新品推荐 -->
<view v-if='homeNewProductList && homeNewProductList.length>0' class="f-header m-t" <view v-if='homeNewProductList && homeNewProductList.length>0' class="f-header m-t"
@click="navToTabPage('../../pagesA/product/list')"> @click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image> <image src="/static/temp/h1.png"></image>
<view class="tit-box"> <view class="tit-box">
<text class="tit">新品推荐</text> <text class="tit">新品推荐</text>
</view>
<text class="yticon icon-you"></text>
</view> </view>
<text class="yticon icon-you"></text>
</view> <view class="guess-section">
<view v-for="(item, index) in homeNewProductList" :key="index" class="guess-item"
<view class="guess-section"> @click="navToDetailPage1(item)">
<view v-for="(item, index) in homeNewProductList" :key="index" class="guess-item" <view class="image-wrapper">
@click="navToDetailPage1(item)"> <image :src="item.pic" mode="aspectFill"></image>
<view class="image-wrapper"> </view>
<image :src="item.pic" mode="aspectFill"></image> <text class="title clamp">{{ item.productName }}</text>
<view>
<text class="price">惠农价￥{{ item.price }}</text>
<text class="m-price"> 县区商超价￥{{ item.price }}</text>
</view>
</view> </view>
<text class="title clamp">{{ item.productName }}</text>
<text class="price">￥{{ item.price }}</text>
</view> </view>
<!-- 人气推荐 -->
</view> <view v-if='homeRecommendProductList && homeRecommendProductList.length>0' class="f-header m-t"
<!-- 人气推荐 --> @click="navToTabPage('../../pagesA/product/list')">
<view v-if='homeRecommendProductList && homeRecommendProductList.length>0' class="f-header m-t" <image src="/static/temp/h1.png"></image>
@click="navToTabPage('../../pagesA/product/list')"> <view class="tit-box">
<image src="/static/temp/h1.png"></image> <text class="tit">人气推荐</text>
<view class="tit-box"> </view>
<text class="tit">人气推荐</text> <text class="yticon icon-you"></text>
</view> </view>
<text class="yticon icon-you"></text>
</view> <view class="guess-section">
<view v-for="(item, index) in homeRecommendProductList" :key="index" class="guess-item"
<view class="guess-section"> @click="navToDetailPage1(item)">
<view v-for="(item, index) in homeRecommendProductList" :key="index" class="guess-item" <view class="image-wrapper">
@click="navToDetailPage1(item)"> <image :src="item.pic" mode="aspectFill"></image>
<view class="image-wrapper"> </view>
<image :src="item.pic" mode="aspectFill"></image> <text class="title clamp">{{ item.name }}</text>
<view>
<text class="price">惠农价￥{{ item.price }}</text>
<text class="m-price">县区商超价￥{{ item.price }}</text>
</view>
</view> </view>
<text class="title clamp">{{ item.name }}</text>
<text class="price">￥{{ item.price }}</text>
</view> </view>
<!-- 新品上市 -->
</view> <view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')">
<!-- 新品上市 --> <image src="/static/temp/h1.png"></image>
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')"> <view class="tit-box">
<image src="/static/temp/h1.png"></image> <text class="tit">新品上市</text>
<view class="tit-box"> </view>
<text class="tit">新品上市</text> <text class="yticon icon-you"></text>
</view> </view>
<text class="yticon icon-you"></text>
</view> <view class="guess-section">
<view v-for="(item, index) in newProductList" :key="index" class="guess-item"
<view class="guess-section"> @click="navToDetailPage(item)">
<view v-for="(item, index) in newProductList" :key="index" class="guess-item" <view class="image-wrapper">
@click="navToDetailPage(item)"> <image :src="item.pic" mode="aspectFill"></image>
<view class="image-wrapper"> </view>
<image :src="item.pic" mode="aspectFill"></image> <text class="title clamp">{{ item.name }}</text>
<text class="label">【{{ item.storeName }}】</text>
<text class="price">惠农价￥{{ item.price }}</text>
</view> </view>
<text class="title clamp">{{ item.name }}</text> <uni-load-more :status="loadingType"></uni-load-more>
<text class="price">￥{{ item.price }}</text>
<text>【{{ item.storeName }}】</text>
</view> </view>
<uni-load-more :status="loadingType"></uni-load-more> <!-- <mallplusCopyright></mallplusCopyright> -->
</view> </view>
<!-- <mallplusCopyright></mallplusCopyright> -->
</view> </view>
</view>
</template> </template>
<script> <script>
@ -782,7 +789,7 @@
width: 100%; width: 100%;
z-index: 999; z-index: 999;
} }
.MP-search-input { .MP-search-input {
font-size: 28upx; font-size: 28upx;
background: #f5f5f5; background: #f5f5f5;
@ -791,7 +798,7 @@
border-radius: 50upx; border-radius: 50upx;
text-align: center; text-align: center;
} }
.mp-search-box { .mp-search-box {
position: absolute; position: absolute;
left: 0; left: 0;
@ -799,7 +806,7 @@
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
padding: 0 80upx; padding: 0 80upx;
.ser-input { .ser-input {
flex: 1; flex: 1;
height: 60upx; height: 60upx;
@ -811,7 +818,7 @@
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
} }
} }
page { page {
.cate-section { .cate-section {
position: relative; position: relative;
@ -819,47 +826,47 @@
border-radius: 16upx 16upx 0 0; border-radius: 16upx 16upx 0 0;
margin-top: -20upx; margin-top: -20upx;
} }
.carousel-section { .carousel-section {
padding: 0; padding: 0;
.titleNview-placing { .titleNview-placing {
padding-top: 0; padding-top: 0;
height: 0; height: 0;
} }
.carousel { .carousel {
.carousel-item { .carousel-item {
padding: 0; padding: 0;
} }
} }
.swiper-dots { .swiper-dots {
left: 45upx; left: 45upx;
bottom: 40upx; bottom: 40upx;
} }
} }
} }
page { page {
background: #f5f5f5; background: #f5f5f5;
} }
.m-t { .m-t {
margin-top: 20upx; margin-top: 20upx;
} }
/* 头部 轮播图 */ /* 头部 轮播图 */
.carousel-section { .carousel-section {
position: relative; position: relative;
padding-top: 10px; padding-top: 10px;
.titleNview-placing { .titleNview-placing {
height: var(--status-bar-height); height: var(--status-bar-height);
padding-top: 44px; padding-top: 44px;
box-sizing: content-box; box-sizing: content-box;
} }
.titleNview-background { .titleNview-background {
position: absolute; position: absolute;
top: 0; top: 0;
@ -869,25 +876,25 @@
transition: 0.4s; transition: 0.4s;
} }
} }
.carousel { .carousel {
width: 100%; width: 100%;
height: 350upx; height: 350upx;
.carousel-item { .carousel-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 28upx; padding: 0 28upx;
overflow: hidden; overflow: hidden;
} }
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10upx; border-radius: 10upx;
} }
} }
.swiper-dots { .swiper-dots {
display: flex; display: flex;
position: absolute; position: absolute;
@ -897,7 +904,7 @@
height: 36upx; height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%; background-size: 100% 100%;
.num { .num {
width: 36upx; width: 36upx;
height: 36upx; height: 36upx;
@ -907,7 +914,7 @@
text-align: center; text-align: center;
line-height: 36upx; line-height: 36upx;
} }
.sign { .sign {
position: absolute; position: absolute;
top: 0; top: 0;
@ -918,7 +925,7 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
/* 分类 */ /* 分类 */
.cate-section { .cate-section {
display: flex; display: flex;
@ -927,7 +934,7 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: 30upx 22upx; padding: 30upx 22upx;
background: #fff; background: #fff;
.cate-item { .cate-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -935,7 +942,7 @@
font-size: $font-sm + 2upx; font-size: $font-sm + 2upx;
color: $font-color-dark; color: $font-color-dark;
} }
/* 原图标颜色太深,不想改图了,所以加了透明度 */ /* 原图标颜色太深,不想改图了,所以加了透明度 */
image { image {
width: 88upx; width: 88upx;
@ -946,41 +953,41 @@
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3); box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
} }
} }
.ad-1 { .ad-1 {
width: 100%; width: 100%;
height: 210upx; height: 210upx;
padding: 10upx 0; padding: 10upx 0;
background: #fff; background: #fff;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
/* 秒杀专区 */ /* 秒杀专区 */
.seckill-section { .seckill-section {
padding: 0upx 20upx 20upx; padding: 0upx 20upx 20upx;
background: #fff; background: #fff;
.s-header { .s-header {
display: flex; display: flex;
align-items: center; align-items: center;
height: 90upx; height: 90upx;
line-height: 1; line-height: 1;
.s-img { .s-img {
width: 140upx; width: 140upx;
height: 30upx; height: 30upx;
} }
.tip { .tip {
font-size: $font-base; font-size: $font-base;
color: $font-color-light; color: $font-color-light;
// margin: 0 20upx 0 40upx; // margin: 0 20upx 0 40upx;
} }
.timer { .timer {
display: inline-block; display: inline-block;
width: 40upx; width: 40upx;
@ -993,7 +1000,7 @@
border-radius: 2px; border-radius: 2px;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
} }
.icon-you { .icon-you {
font-size: $font-lg; font-size: $font-lg;
color: $font-color-light; color: $font-color-light;
@ -1001,135 +1008,142 @@
text-align: right; text-align: right;
} }
} }
.floor-list { .floor-list {
white-space: nowrap; white-space: nowrap;
} }
.scoll-wrapper { .scoll-wrapper {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
.floor-item { .floor-item {
width: 150upx; width: 150upx;
margin-right: 20upx; margin-right: 20upx;
font-size: $font-sm + 2upx; font-size: $font-sm + 2upx;
color: $font-color-dark; color: $font-color-dark;
line-height: 1.8; line-height: 1.8;
image { image {
width: 150upx; width: 150upx;
height: 150upx; height: 150upx;
border-radius: 6upx; border-radius: 6upx;
} }
.price { .price {
color: $uni-color-primary; color: $uni-color-primary;
} }
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
} }
} }
.f-header { .f-header {
display: flex; display: flex;
align-items: center; align-items: center;
height: 140upx; height: 140upx;
padding: 0upx 20upx; padding: 0upx 20upx;
background: #fff; background: #fff;
image { image {
flex-shrink: 0; flex-shrink: 0;
width: 80upx; width: 80upx;
height: 80upx; height: 80upx;
margin-right: 20upx; margin-right: 20upx;
} }
.tit-box { .tit-box {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.tit { .tit {
font-size: $font-lg + 2upx; font-size: $font-lg + 2upx;
color: #font-color-dark; color: #font-color-dark;
line-height: 1.3; line-height: 1.3;
} }
.tit2 { .tit2 {
font-size: $font-sm; font-size: $font-sm;
color: $font-color-light; color: $font-color-light;
} }
.icon-you { .icon-you {
font-size: $font-lg + 2upx; font-size: $font-lg + 2upx;
color: $font-color-light; color: $font-color-light;
} }
} }
/* 团购楼层 */ /* 团购楼层 */
.group-section { .group-section {
background: #fff; background: #fff;
.g-swiper { .g-swiper {
height: 650upx; height: 650upx;
padding-bottom: 20upx; padding-bottom: 20upx;
} }
.g-swiper-item { .g-swiper-item {
width: 100%; width: 100%;
padding: 0 20upx; padding: 0 20upx;
display: flex; display: flex;
} }
image { image {
width: 100%; width: 100%;
height: 460upx; height: 460upx;
border-radius: 4px; border-radius: 4px;
} }
.g-item { .g-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.left { .left {
flex: 1.2; flex: 1.2;
// margin-right: 24upx; // margin-right: 24upx;
.t-box { .t-box {
padding-top: 20upx; padding-top: 20upx;
} }
} }
.right { .right {
flex: 0.8; flex: 0.8;
flex-direction: column-reverse; flex-direction: column-reverse;
.t-box { .t-box {
padding-bottom: 20upx; padding-bottom: 20upx;
} }
} }
.t-box { .t-box {
height: 160upx; height: 160upx;
font-size: $font-base + 2upx; font-size: $font-base + 2upx;
color: $font-color-dark; color: $font-color-dark;
line-height: 1.6; line-height: 1.6;
} }
.price { .price {
color: $uni-color-primary; color: $uni-color-primary;
} }
.m-price { .m-price {
font-size: $font-sm + 2upx; font-size: $font-sm + 2upx;
text-decoration: line-through; text-decoration: line-through;
color: $font-color-light; color: $font-color-light;
margin-left: 8upx; margin-left: 8upx;
} }
.pro-box { .pro-box {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1138,7 +1152,7 @@
color: $font-base; color: $font-base;
padding-right: 10upx; padding-right: 10upx;
} }
.progress-box { .progress-box {
flex: 1; flex: 1;
border-radius: 10px; border-radius: 10px;
@ -1146,248 +1160,75 @@
margin-right: 8upx; margin-right: 8upx;
} }
} }
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */ /* 猜你喜欢 */
.guess-section { .guess-section {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 30upx; padding: 0 30upx;
background: #fff; background: #fff;
.guess-item { .guess-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 48%; width: 48%;
padding-bottom: 40upx; padding-bottom: 40upx;
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
margin-right: 4%; margin-right: 4%;
} }
} }
.image-wrapper { .image-wrapper {
width: 100%; width: 100%;
height: 330upx; height: 330upx;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 1; opacity: 1;
} }
} }
.title { .title {
font-size: $font-lg; font-size: $font-lg;
color: $font-color-dark; color: $font-color-dark;
line-height: 80upx; line-height: 80upx;
} }
.label {
margin-top: -10upx;
font-size: 30upx;
margin-left: -13upx;
}
.price { .price {
font-size: $font-lg; font-size: 18px;
color: $uni-color-primary; color: $uni-color-primary;
line-height: 1; line-height: 1;
} }
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.coupon_box { .coupon_box {
width: 100%; width: 100%;
height: auto; height: auto;
display: table; display: table;
padding: 6upx 26upx 26upx 26upx; padding: 6upx 26upx 26upx 26upx;
} }
.other_type { .other_type {
width: 100%; width: 100%;
height: 90upx; height: 90upx;
padding-top: 50upx; padding-top: 50upx;
.text { .text {
width: 100%; width: 100%;
border-top: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
@ -1395,7 +1236,7 @@
text-align: center; text-align: center;
position: relative; position: relative;
} }
.text span { .text span {
width: 180upx; width: 180upx;
height: 40upx; height: 40upx;
@ -1412,7 +1253,7 @@
} }
} }
} }
.getPosition { .getPosition {
height: 100upx; height: 100upx;
display: flex; display: flex;

10
mallplusui-uniapp-app2/pagesA/product/product.vue
View File

@ -11,12 +11,12 @@
<view class="introduce-section"> <view class="introduce-section">
<text class="title">{{ goods.name }}</text> <text class="title">{{ goods.name }}</text>
<view class="price-box"> <view class="price-box">
<text class="price-tip">¥</text> <!-- <text class="price-tip">惠农价</text> -->
<text class="price" v-if="goods.vipPrice && goods.vipPrice > 0">{{ (goods.price * goods.memberRate) / 10 }}</text> <text class="price" v-if="goods.vipPrice && goods.vipPrice > 0">惠农价¥{{ (goods.price * goods.memberRate) / 10 }}</text>
<text class="price" v-else-if="!goods.vipPrice">{{ goods.price }}</text> <text class="price" v-else-if="!goods.vipPrice">惠农价¥{{ goods.price }}</text>
<text class="m-price" v-if="!goods.vipPrice">¥{{ goods.originalPrice }}</text> <text class="m-price" v-if="!goods.vipPrice">县区商超价{{ goods.originalPrice }}</text>
<text class="m-price" v-else-if="goods.vipPrice && goods.vipPrice > 0">¥{{ goods.price }}</text> <text class="m-price" v-else-if="goods.vipPrice && goods.vipPrice > 0">¥{{ goods.price }}</text>
<text class="price" v-if="goods.isFenxiao == 1 && goods.fenxiaoPrice > 0">佣金 ¥{{ goods.fenxiaoPrice }}</text> <text class="price">优惠¥{{ goods.originalPrice- goods.price }}</text>
<text class="coupon-tip" v-if="goods.memberRate && goods.memberRate != 10">会员折扣{{ goods.memberRate }}折</text> <text class="coupon-tip" v-if="goods.memberRate && goods.memberRate != 10">会员折扣{{ goods.memberRate }}折</text>
</view> </view>
<view class="bot-row"> <view class="bot-row">

Write Preview
Loading…
Cancel
Save