|
|
@@ -1,359 +1,363 @@
|
|
|
-<template name="hotProduct">
|
|
|
- <view>
|
|
|
- <view class="container clearfix">
|
|
|
- <view class="title-header">推荐专区</view>
|
|
|
- <view class="recommend-list">
|
|
|
- <swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
|
|
|
- <swiper-item v-for="(product,index) in hotProductList" :key="index">
|
|
|
- <view class="floor-item clearfix" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item.id)">
|
|
|
- <image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
|
|
|
- <image class="item-icon-type" :src="iconNew" mode="" v-if="item.actType === 2"></image>
|
|
|
- <image class="item-icon-type" :src="iconHot" mode="" v-if="item.actType === 1"></image>
|
|
|
- <view class="floor-item-content">
|
|
|
- <view class="title tui-skeleton-rect">
|
|
|
- <text class="mclap">{{item.name}}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-item-act">
|
|
|
- <template v-if="userIdentity === 3">
|
|
|
- <template v-if="item.actStatus===1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}
|
|
|
- <text v-if="hasLogin && item.priceFlag != 1 && item.supplierId == shopId">:￥{{item.price | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
- </template>
|
|
|
- <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <template v-if="item.actStatus===1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}
|
|
|
- <text v-if="hasLogin && item.priceFlag != 1">:￥{{item.price | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
- </template>
|
|
|
- <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-if="hasLogin">
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <template v-if="item.supplierId == shopId">
|
|
|
- <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
- <text class="p big">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- <text class="p sm">￥</text>
|
|
|
- <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="no-price">
|
|
|
- <view class="p-stars">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else-if="userIdentity ===4">
|
|
|
- <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
- <text class="p big">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="title-none" v-if="item.priceFlag === '2'">
|
|
|
- <text class="p big">￥价格仅会员可见</text>
|
|
|
- </view>
|
|
|
- <view class="price tui-skeleton-rect" v-if="item.priceFlag === '0'" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- <text class="p sm">￥</text>
|
|
|
- <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
- <text class="p big">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- <text class="p sm">￥</text>
|
|
|
- <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else class="no-price">
|
|
|
- <view class="p-stars">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__recommenddots-box" v-if="hotProductList.length > 1">
|
|
|
- <view v-for="(item,idx) in hotProductList"
|
|
|
- :key="idx"
|
|
|
- :class="[idx===swiperCurrent?'swiper__dots-long':'none']"
|
|
|
- :data-index="swiperCurrent" class="swiper__dots-item">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+<template name="hotProduct">
|
|
|
+ <view>
|
|
|
+ <view class="container clearfix">
|
|
|
+ <view class="title-header">推荐专区</view>
|
|
|
+ <view class="recommend-list">
|
|
|
+ <swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
|
|
|
+ <swiper-item v-for="(product,index) in hotProductList" :key="index">
|
|
|
+ <view class="floor-item clearfix" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item.id)">
|
|
|
+ <image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
|
|
|
+ <image class="item-icon-type" :src="iconNew" mode="" v-if="item.actType === 2"></image>
|
|
|
+ <image class="item-icon-type" :src="iconHot" mode="" v-if="item.actType === 1"></image>
|
|
|
+ <view class="floor-item-content">
|
|
|
+ <view class="title tui-skeleton-rect">
|
|
|
+ <text class="mclap">{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <template v-if="userIdentity === 3">
|
|
|
+ <template v-if="item.actStatus===1">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
+ {{item.promotions.name}}
|
|
|
+ <text v-if="hasLogin && item.priceFlag != 1 && item.supplierId == shopId">:￥{{item.price | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="item.actStatus===1">
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
+ {{item.promotions.name}}
|
|
|
+ <text v-if="hasLogin && item.priceFlag != 1">:￥{{item.price | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view v-if="hasLogin">
|
|
|
+ <template v-if="userIdentity == 3">
|
|
|
+ <template v-if="item.supplierId == shopId">
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
+ <text class="p big">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
+ <text class="p sm">￥</text>
|
|
|
+ <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="no-price">
|
|
|
+ <view class="p-stars">
|
|
|
+ <text class="p-no">￥</text>
|
|
|
+ <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="userIdentity ===4">
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
+ <text class="p big">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '2'">
|
|
|
+ <text class="p big">￥价格仅会员可见</text>
|
|
|
+ </view>
|
|
|
+ <view class="price tui-skeleton-rect" v-if="item.priceFlag === '0'" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
+ <text class="p sm">￥</text>
|
|
|
+ <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
+ <text class="p big">￥未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
+ <text class="p sm">￥</text>
|
|
|
+ <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view v-else class="no-price">
|
|
|
+ <view class="p-stars">
|
|
|
+ <text class="p-no">￥</text>
|
|
|
+ <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="swiper__recommenddots-box" v-if="hotProductList.length > 1">
|
|
|
+ <view v-for="(item,idx) in hotProductList"
|
|
|
+ :key="idx"
|
|
|
+ :class="[idx===swiperCurrent?'swiper__dots-long':'none']"
|
|
|
+ :data-index="swiperCurrent" class="swiper__dots-item">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import { mapState,mapMutations} from 'vuex';
|
|
|
- import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
- export default{
|
|
|
- name:"hotProduct",
|
|
|
- components:{
|
|
|
- uniGrader
|
|
|
- },
|
|
|
- props:{
|
|
|
- list:{
|
|
|
- type:Array
|
|
|
- },
|
|
|
- userIdentity:{
|
|
|
- type:Number
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return{
|
|
|
- current:100,
|
|
|
- swiperCurrent:0,
|
|
|
- hotProductList:[],
|
|
|
- pageSize:4,
|
|
|
- shopId:0,
|
|
|
- iconNew:'http://static-b.caimei365.com/app/img/icon/icon-new.png',
|
|
|
- iconHot:'http://static-b.caimei365.com/app/img/icon/icon-hot.png',
|
|
|
- }
|
|
|
- },
|
|
|
- filters: {
NumFormat:function(text) {//处理金额
return Number(text).toFixed(2);
},
},
|
|
|
- created(){
|
|
|
- this.initData(this.list)
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo','isActivity'])
|
|
|
- },
|
|
|
- methods:{
|
|
|
- initData(res){
|
|
|
- this.$api.getStorage().then((resolve) =>{
|
|
|
- this.shopId = resolve.shopID
|
|
|
- })
|
|
|
- if(res.length>0){
|
|
|
- for (var i = 0, j = res.length; i < j; i += this.pageSize) {
|
|
|
- this.hotProductList.push(res.slice(i, i + this.pageSize));
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- tabClick(index) {//轮播图切换
|
|
|
- this.current = index;
|
|
|
- },
|
|
|
- swiperChange(e) {//轮播切换
|
|
|
- const index = e.detail.current;
|
|
|
- this.swiperCurrent = index;
|
|
|
- },
|
|
|
- navToDetailPage(id) {//跳转商品详情页
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
- }
|
|
|
- }
|
|
|
+<script>
|
|
|
+ import { mapState,mapMutations} from 'vuex';
|
|
|
+ import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
+ export default{
|
|
|
+ name:"hotProduct",
|
|
|
+ components:{
|
|
|
+ uniGrader
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ list:{
|
|
|
+ type:Array
|
|
|
+ },
|
|
|
+ userIdentity:{
|
|
|
+ type:Number
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ current:100,
|
|
|
+ swiperCurrent:0,
|
|
|
+ hotProductList:[],
|
|
|
+ pageSize:4,
|
|
|
+ shopId:0,
|
|
|
+ iconNew:'https://static.caimei365.com/app/img/icon/icon-new.png',
|
|
|
+ iconHot:'https://static.caimei365.com/app/img/icon/icon-hot.png',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat:function(text) {//处理金额
|
|
|
+ return Number(text).toFixed(2);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.initData(this.list)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','userInfo','isActivity'])
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initData(res){
|
|
|
+ this.$api.getStorage().then((resolve) =>{
|
|
|
+ this.shopId = resolve.shopID
|
|
|
+ })
|
|
|
+ if(res.length>0){
|
|
|
+ for (var i = 0, j = res.length; i < j; i += this.pageSize) {
|
|
|
+ this.hotProductList.push(res.slice(i, i + this.pageSize));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
+ if(promo!=null){
|
|
|
+ if(promo.type == 1 && promo.mode == 1){
|
|
|
+ return true
|
|
|
+ }else{
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ tabClick(index) {//轮播图切换
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ swiperChange(e) {//轮播切换
|
|
|
+ const index = e.detail.current;
|
|
|
+ this.swiperCurrent = index;
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {//跳转商品详情页
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
- .container{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- .title-header{
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: left;
|
|
|
- font-weight: bold;
|
|
|
- font-size: $font-size-34;
|
|
|
- color: $text-color;
|
|
|
- padding: 0 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .recommend-list{
|
|
|
- width: 100%;
|
|
|
- height: 1140rpx;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- .tui-banner-swiper {
|
|
|
- width: 702rpx;
|
|
|
- margin: 0 auto;
|
|
|
- background: #F7F7F7;
|
|
|
- padding: 0 24rpx 0 24rpx;
|
|
|
- height: 1140rpx;
|
|
|
- overflow: hidden;
|
|
|
- transform: translateY(0);
|
|
|
- .floor-item{
|
|
|
- width: 341rpx;
|
|
|
- height: auto;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- background: #FFFFFF;
|
|
|
- line-height: 36rpx;
|
|
|
- border-radius: 2rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 10rpx;
|
|
|
- position: relative;
|
|
|
- &:nth-child(2n){
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .item-icon-type{
|
|
|
- width: 48rpx;
|
|
|
- height: 62rpx;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- }
|
|
|
- .item-img{
|
|
|
- width: 341rpx;
|
|
|
- height: 341rpx;
|
|
|
- border-radius: 2rpx 2rpx 0 0;
|
|
|
- display: block;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- .floor-item-content{
|
|
|
- width: 311rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- }
|
|
|
- .floor-item-act{
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .floor-tags{
|
|
|
- height: 28rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- line-height: 28rpx;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 16rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- border: 1px solid #E15616;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .title-none{
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #FF2A2A;
|
|
|
- line-height: 70rpx;
|
|
|
- .btn{
|
|
|
- display: inline-block;
|
|
|
- float: right;
|
|
|
- width: 112rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- border-radius: 22rpx;
|
|
|
- margin-top: 17rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .title{
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- display: flex;
|
|
|
- line-height: 36rpx;
|
|
|
- flex-direction: column;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- padding: 0;
|
|
|
- .mclap{
|
|
|
- width: 100%;
|
|
|
- line-height:40rpx;
|
|
|
- text-overflow:ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .no-price{
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- .p-no{
|
|
|
- font-size: $font-size-30;
|
|
|
- color: $text-color;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .p-stars{
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .price{
|
|
|
- color: #FF2A2A;
|
|
|
- line-height:54rpx;
|
|
|
- &.none{
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .sm{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .big{
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper__recommenddots-box{
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 60rpx;
|
|
|
- .swiper__dots-item{
|
|
|
- width: 8rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 100%;
|
|
|
- margin-left: 6px;
|
|
|
- background-color:rgba(225,86,22,.3);
|
|
|
- }
|
|
|
- .swiper__dots-long{
|
|
|
- width: 32rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- background-color: #e15616;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
- }
|
|
|
+<style lang="scss">
|
|
|
+ .container{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title-header{
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: $text-color;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .recommend-list{
|
|
|
+ width: 100%;
|
|
|
+ height: 1140rpx;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .tui-banner-swiper {
|
|
|
+ width: 702rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #F7F7F7;
|
|
|
+ padding: 0 24rpx 0 24rpx;
|
|
|
+ height: 1140rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ transform: translateY(0);
|
|
|
+ .floor-item{
|
|
|
+ width: 341rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $text-color;
|
|
|
+ background: #FFFFFF;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ &:nth-child(2n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .item-icon-type{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ }
|
|
|
+ .item-img{
|
|
|
+ width: 341rpx;
|
|
|
+ height: 341rpx;
|
|
|
+ border-radius: 2rpx 2rpx 0 0;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .floor-item-content{
|
|
|
+ width: 311rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+ .floor-item-act{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .floor-tags{
|
|
|
+ height: 28rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ padding:0 16rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border: 1px solid #E15616;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .title-none{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #FF2A2A;
|
|
|
+ line-height: 70rpx;
|
|
|
+ .btn{
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ width: 112rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ margin-top: 17rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ display: flex;
|
|
|
+ line-height: 36rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ padding: 0;
|
|
|
+ .mclap{
|
|
|
+ width: 100%;
|
|
|
+ line-height:40rpx;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-price{
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .p-no{
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: $text-color;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .p-stars{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color: #FF2A2A;
|
|
|
+ line-height:54rpx;
|
|
|
+ &.none{
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .sm{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ .big{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper__recommenddots-box{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 60rpx;
|
|
|
+ .swiper__dots-item{
|
|
|
+ width: 8rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-left: 6px;
|
|
|
+ background-color:rgba(225,86,22,.3);
|
|
|
+ }
|
|
|
+ .swiper__dots-long{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background-color: #e15616;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
