932 lines
22 KiB
Vue
932 lines
22 KiB
Vue
<template>
|
|
<view>
|
|
<view class="serve-header">
|
|
<image class="serve-bj" src="@/static/images/home/serve_bj.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
|
|
<view class="serve-title">
|
|
<image class="serve-title-car" src="@/static/images/home/serve_car.png" mode=""></image>
|
|
<image class="serve-title-tit" src="@/static/images/home/serve_title.png" mode=""></image>
|
|
</view>
|
|
<view class="serve-search flex justify-between align-center"
|
|
@click="$tab.navigateTo('/pages/search/serve_search')">
|
|
<view class="serve-search-left flex align-center">
|
|
<image class="serve-search-image" src="@/static/images/app/icon/search.png" mode="">
|
|
</image>
|
|
<view class="">搜索想要的商品</view>
|
|
</view>
|
|
<view class="serve-search-butt">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
<view class="swiper-box">
|
|
<u-swiper keyName="image" :list="branner" height="360rpx" @click="brannerClick"></u-swiper>
|
|
</view>
|
|
<view class="serve-assistance">
|
|
<image class="serve-assistance-bj" src="@/static/images/home/serve_assistance.png" mode=""></image>
|
|
<view class="serve-assistance-all" @click="toMyActivityListPage">
|
|
<view class="up_r_txt">更多</view>
|
|
<u-icon name="arrow-right" color="#ffffff" size="10"></u-icon>
|
|
</view>
|
|
<image class="serve-assistance-serve-ass" src="@/static/images/home/serve_ass.png" mode=""></image>
|
|
<view class="serve-assistance-swiper">
|
|
<swiper class="swiper" circular previousMargin='0rpx' nextMargin="0rpx" :indicator-dots="false"
|
|
:autoplay="false" interval="4000" duration="500" @change="actTrimChengFn">
|
|
<swiper-item v-for="(item,index) in couponList3" :key="index">
|
|
<view id="showimage1" class="swiper-item flex" @click="toHotPages('help', item)">
|
|
<image class="swiper-item-image" :src="item.cover" mode="aspectFill"></image>
|
|
<view class="swiper-item-cont flex flex-column justify-between">
|
|
<view class="swiper-item-cont-name">{{item.name}}</view>
|
|
<view class="swiper-item-cont-num flex justify-between align-center">
|
|
<view>已助力<text class="cont-num">{{item.helpNum}}人</text></view>
|
|
<view>仅差<text class="cont-num">{{(item.joinNum - item.helpNum)<0?0:(item.joinNum - item.helpNum)}}人</text></view>
|
|
</view>
|
|
<view class="swiper-item-cont-schedule">
|
|
<view class="schedule-num" :style="{width:item.widthNum+'rpx' }"></view>
|
|
</view>
|
|
<view class="swiper-item-cont-down flex justify-center align-center">
|
|
<count-down :type="1" :stopTime="item.stopTime"></count-down>
|
|
</view>
|
|
<view class="flex align-center justify-center" >
|
|
<view v-if="(item.joinNum - item.helpNum)>0" @click.stop="toHotPages('help', item)" class="swiper-item-cont-butt">立即助力</view>
|
|
<view v-else @click.stop="navActivity" class="swiper-item-cont-butt">助力完成</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 指示器 -->
|
|
<view class="swiper-line-list flex justify-center align-center">
|
|
<view class="swiper-line-box">
|
|
<view v-if="couponList3.length==1" class="swiper-line-s"></view>
|
|
<view v-else class="swiper-line"
|
|
:style="`transform: translateX(${96 / (couponList3.length-1) * colorIndex}rpx);transition: transform 0.5s;`" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 限时秒杀 -->
|
|
<view class="serve-seckill">
|
|
<view class="serve-seckill-hea">
|
|
<image src="@/static/images/home/serve_seckill.png" mode=""></image>
|
|
<image class="serve-seckill-logo" src="@/static/images/home/serve_seckill_logo.png" mode=""></image>
|
|
<view class="up_r" @click="toCouponsPages(1)">
|
|
<view class="up_r_txt">查看更多</view>
|
|
<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="serve-seckill-bj">
|
|
<image class="serve-seckill-bj-img" src="@/static/images/home/serve_seckill_bj.png"></image>
|
|
<view class="serve-seckill-list flex" v-for="(item,index) in couponList2" :key="index">
|
|
<image style="width: 200rpx;height: 200rpx;border-radius: 16rpx;" :src="item.cover"
|
|
mode="aspectFill"></image>
|
|
<view class="serve-seckill-list-cont">
|
|
<view class="serve-seckill-list-cont-name">{{item.name}}</view>
|
|
<view class="serve-seckill-list-cont-describe">{{item.intro}}</view>
|
|
<view class="flex align-center justify-between" style="margin-top: 12rpx;">
|
|
<view class="serve-seckill-list-cont-time ">
|
|
<view style="margin-bottom: 6rpx;">距结束还剩</view>
|
|
<count-down :stopTime="item.stopTime" :type="2"></count-down>
|
|
</view>
|
|
<view class="serve-seckill-list-butt flex align-center justify-center"
|
|
@click="toDetailPages(item)">
|
|
<text class="f-24">￥</text>
|
|
<text class="f-32">{{item.price*1}}</text>
|
|
<text class="f-36" style="margin-left: 9rpx;">抢</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 积分商城 -->
|
|
<view class="serve-integral">
|
|
<view class="serve-integral-header flex justify-between align-center">
|
|
<image class="serve-integral-logo" src="@/static/images/home/serve_integral_logo.png" mode=""></image>
|
|
<view class="flex justify-center align-center" style="width: 160rpx;" @click="navRightsInterestsFn">
|
|
<view class="f-28 c666">查看更多</view>
|
|
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="integral-list flex">
|
|
<view class="flex flex-column" style="margin-left: 23rpx;" v-for="(item,index) in integralList">
|
|
<view class="integral-list-image">
|
|
<image style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="item.image"
|
|
mode="aspectFill"></image>
|
|
</view>
|
|
<view class="integral-list-butt " @click="navParticularsFn(item)">
|
|
<text class="f-20 fff">￥{{item.price*1}}</text>
|
|
<text class="f-24 fff ml-2">{{item.integralNum}}积分</text>
|
|
</view>
|
|
<view class="integral-list-name c666 f-28"> {{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 热销中心 -->
|
|
<view class="serve-hot-sales">
|
|
<view class="serve-hot-list flex align-center justify-between">
|
|
<view class="flex align-center">
|
|
<view v-for="(item,index) in couponHotList" class="mr-24" :key="index" @click="toDetailPages(item)">
|
|
<image :src="item.cover" class="serve-hot-list-image" mode=""></image>
|
|
<view class="f-28 serve-hot-list-name">{{item.name}}</view>
|
|
<view class="serve-hot-list-butt fff">
|
|
<text style="margin-left: 16rpx;">￥{{item.price*1}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-28 c666 to-hot-pages" @click="toHotPages('hot')">
|
|
查看更多
|
|
</view>
|
|
</view>
|
|
<!-- 互动中心 -->
|
|
<view class="serve-welfare">
|
|
<view class="serve-welfare-header flex justify-between align-center">
|
|
<image class="serve-welfare-logo" src="@/static/images/home/serve_welfare_logo.png" mode=""></image>
|
|
<view class="flex justify-center align-center" style="width: 160rpx;" @click="navActivityListFn">
|
|
<view class="f-28 c666">查看更多</view>
|
|
<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="serve-welfare-list flex flex-wrap justify-between" style="margin-top: 24rpx;">
|
|
<view class="welfare-item mb-2" v-for="(item,index) in welfareList" :key="index"
|
|
@click="navActivityFn(item)">
|
|
<image class="welfare-item-image" :src="item.backImage" mode=""></image>
|
|
<view class="welfare-tjitle line-two">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 140rpx;" />
|
|
<!-- <tabbar-driver current="/pages/driver/serve/index"></tabbar-driver> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
userCenterPersonalInfo
|
|
} from "@/api/system/user.js"
|
|
import CountDown from "@/components/count-down.vue"
|
|
import {
|
|
brannerList
|
|
} from '@/api/system/config';
|
|
import config from '@/config';
|
|
import {
|
|
getCardProductListAPI
|
|
} from '@/api/serve/coupons'
|
|
import {
|
|
getActivityListUnderwayAPI,
|
|
} from '@/api/serve/index'
|
|
import {
|
|
getCardHelpList,
|
|
} from "@/api/user/index.js"
|
|
import {
|
|
getFrontIntegralList,
|
|
getTopicList
|
|
} from "@/api/welfare/welfare.js"
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['citySave'])
|
|
},
|
|
components: {
|
|
CountDown
|
|
},
|
|
data() {
|
|
return {
|
|
colorIndex: 0,
|
|
timeData: {},
|
|
price: 198,
|
|
config,
|
|
branner: [], // 轮播图列表
|
|
keyword: '',
|
|
couponData2: {
|
|
limit: 3,
|
|
page: 1,
|
|
type: 2,
|
|
isShowOver: false
|
|
},
|
|
couponData3: {
|
|
limit: 3,
|
|
page: 1,
|
|
type: 0
|
|
},
|
|
couponHot: {
|
|
limit: 2,
|
|
page: 1,
|
|
isHot: true
|
|
},
|
|
couponList2: [],
|
|
couponList3: [],
|
|
couponHotList: [],
|
|
//消息未读 数量
|
|
// unreadNum: 0,
|
|
//积分商品列表
|
|
integralList: [],
|
|
//话题列表
|
|
welfareList: [],
|
|
//当前位置
|
|
city:''
|
|
};
|
|
},
|
|
onShow() {
|
|
this.city = uni.getStorageSync('current_city');
|
|
this.getBranner()
|
|
userCenterPersonalInfo().then(res => {
|
|
uni.setStorageSync('userInfo', res.data)
|
|
})
|
|
},
|
|
onLoad() {
|
|
},
|
|
methods: {
|
|
//监听选择
|
|
actTrimChengFn(e) {
|
|
this.colorIndex = e.detail.current
|
|
},
|
|
//倒计时
|
|
onChange(e) {
|
|
// console.log(e);
|
|
this.timeData = e
|
|
// console.log(this.timeData);
|
|
},
|
|
onChange2(e) {
|
|
// this.timeData = e
|
|
// console.log(e);
|
|
},
|
|
getBranner() {
|
|
// 获取轮播图
|
|
brannerList({
|
|
type: 9
|
|
}).then(res => {
|
|
// console.log('轮播图', res.data.list);
|
|
this.branner = res.data.list
|
|
})
|
|
// 2秒杀 // isHot=>true 热销
|
|
this.couponData2.city=this.city
|
|
getCardProductListAPI(this.couponData2).then(res => {
|
|
res.data.list.forEach(item => {
|
|
const timestamp1 = new Date().getTime();
|
|
const timestamp = new Date(item.stopTime).getTime();
|
|
item.stopTime = timestamp - timestamp1
|
|
})
|
|
console.log('秒杀 ', res.data.list);
|
|
this.couponList2 = res.data.list
|
|
})
|
|
// 热销
|
|
this.couponHot.city=this.city
|
|
getCardProductListAPI(this.couponHot).then(res => {
|
|
console.log('热销', res.data.list);
|
|
this.couponHotList = res.data.list
|
|
})
|
|
// 助力
|
|
// getCardHelpList(this.couponData3).then(res => {
|
|
getActivityListUnderwayAPI(this.couponData3).then(res => {
|
|
console.log('助力列表', res.data.list);
|
|
//计算当前百分百
|
|
res.data.list.forEach(item => {
|
|
item.widthNum = (309 / item.joinNum) * item.helpNum
|
|
const timestamp1 = new Date().getTime();
|
|
const timestamp = new Date(item.stopTime).getTime();
|
|
item.stopTime = timestamp - timestamp1
|
|
})
|
|
this.couponList3 = res.data.list
|
|
})
|
|
//积分商品
|
|
getFrontIntegralList({
|
|
page: 1,
|
|
limit: 3
|
|
}).then(res => {
|
|
this.integralList = res.data.list
|
|
})
|
|
//话题列表
|
|
getTopicList({
|
|
page: 1,
|
|
limit: 4
|
|
}).then(res => {
|
|
this.welfareList = res.data.list
|
|
})
|
|
},
|
|
//话题列表
|
|
navActivityListFn() {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/welfare/welfare`
|
|
})
|
|
},
|
|
//话题活动详情
|
|
navActivityFn(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/welfare/activity_x/activity_x?id=${item.id}`
|
|
})
|
|
},
|
|
// 去热销列表
|
|
toHotPages(type, item) {
|
|
if (type == 'hot') {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/hot_list?type=${type}&id=${item && item.id}&name=${item && item.name}`
|
|
})
|
|
} else {
|
|
//助力
|
|
uni.navigateTo({
|
|
url: `/pages/driver/mine/my_activity/detail?id=${item.productId}&helpGenre=${item.helpType}&activityId=${item.id}&isMould=${item.isMould}`
|
|
})
|
|
}
|
|
},
|
|
//积分商品详情
|
|
navParticularsFn(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/welfare/rightsInterests/rightsInterests_particulars?id=${item.id}`
|
|
})
|
|
},
|
|
//积分权益
|
|
navRightsInterestsFn() {
|
|
uni.navigateTo({
|
|
url: '/pages/driver/welfare/rightsInterests/rightsInterests'
|
|
})
|
|
},
|
|
// 活动列表
|
|
toMyActivityListPage() {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/activity_list`
|
|
})
|
|
},
|
|
|
|
// 去详情
|
|
toDetailPages(item) {
|
|
this.$store.dispatch('CardId', item.id)
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/cou_detail?id=${item.id}`
|
|
})
|
|
},
|
|
// 卡券
|
|
toCouponsPages(num) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/coupons?num=${num}`
|
|
})
|
|
},
|
|
// 维修
|
|
toRepairPages() {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/repair/repair`
|
|
})
|
|
},
|
|
// 消息 (两个)
|
|
toMessagePages() {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/message/message`
|
|
})
|
|
},
|
|
//我的活动
|
|
navActivity(){
|
|
uni.navigateTo({
|
|
url:'/pages/driver/mine/my_activity/my_activity'
|
|
})
|
|
},
|
|
// 点击轮播图
|
|
brannerClick(e) {
|
|
console.log(this.branner[e]);
|
|
if (this.branner[e].linkType == 0 || this.branner[e].linkType == 2 || this.branner[e].linkType == 3) {
|
|
let linkObj = this.branner[e].linkUrl
|
|
uni.navigateTo({
|
|
url: linkObj
|
|
})
|
|
} else if (this.branner[e].linkType == 1) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/rebate/rebate_web?contract=${this.branner[e].linkUrl}`
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.serve-hot-sales {
|
|
width: 690rpx;
|
|
height: 303rpx;
|
|
background-image: url('@/static/images/home/serve_hot_sales.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 30rpx;
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
|
|
.to-hot-pages {
|
|
position: absolute;
|
|
left: 94rpx;
|
|
bottom: 20rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.serve-hot-list {
|
|
height: 303rpx;
|
|
padding-left: 310rpx;
|
|
|
|
.serve-hot-list-image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 16rpx;
|
|
|
|
}
|
|
|
|
.serve-hot-list-name {
|
|
width: 160rpx;
|
|
margin: 8rpx 0;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.serve-hot-list-butt {
|
|
width: 141rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
background-image: url('@/static/images/home/serve_price.png');
|
|
background-size: 100%;
|
|
padding-right: 18rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serve-welfare {
|
|
width: 690rpx;
|
|
// height: 854rpx;
|
|
background-image: url('@/static/images/home/serve_welfare_bj.png');
|
|
background-size: 100%;
|
|
margin-top: 30rpx;
|
|
margin-left: 30rpx;
|
|
padding: 30rpx;
|
|
|
|
.serve-welfare-list {}
|
|
|
|
.serve-welfare-header {
|
|
width: 630rpx;
|
|
padding: 0rpx 0rpx 19rpx 0rpx;
|
|
|
|
.serve-welfare-logo {
|
|
width: 143rpx;
|
|
height: 35rpx;
|
|
}
|
|
}
|
|
|
|
.welfare-item {
|
|
width: 300rpx;
|
|
|
|
.welfare-item-image {
|
|
width: 300rpx;
|
|
height: 236rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.welfare-tjitle {
|
|
width: 300rpx;
|
|
height: 80rpx;
|
|
color: #222222;
|
|
font-size: 34rpx;
|
|
font-weight: 400;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.serve-integral {
|
|
width: 690rpx;
|
|
height: 396rpx;
|
|
margin-left: 30rpx;
|
|
margin-top: 30rpx;
|
|
border-radius: 16rpx;
|
|
background-image: url('@/static/images/home/serve_integral_bj.png');
|
|
background-size: 100%;
|
|
|
|
.integral-list {
|
|
.integral-list-image {
|
|
width: 200rpx;
|
|
height: 210rpx;
|
|
background: #ffffff;
|
|
padding: 20rpx 20rpx 30rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.integral-list-butt {
|
|
margin: -22rpx auto 0;
|
|
width: 162rpx;
|
|
height: 44rpx;
|
|
border-radius: 22rpx;
|
|
text-align: center;
|
|
line-height: 44rpx;
|
|
background: linear-gradient(to right, #FF5A00, #FF803A);
|
|
}
|
|
|
|
.integral-list-name {
|
|
width: 162rpx;
|
|
margin: 21rpx auto 0;
|
|
text-align: center;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.serve-integral-header {
|
|
width: 690rpx;
|
|
padding: 24rpx 28rpx 19rpx 22rpx;
|
|
|
|
.serve-integral-logo {
|
|
width: 143rpx;
|
|
height: 35rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serve-seckill {
|
|
margin-top: 30rpx;
|
|
width: 690rpx;
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
height: 920rpx;
|
|
|
|
.serve-seckill-hea {
|
|
width: 690rpx;
|
|
height: 113rpx;
|
|
position: absolute;
|
|
z-index: 99;
|
|
}
|
|
|
|
.serve-seckill-bj {
|
|
width: 690rpx;
|
|
height: 863rpx;
|
|
position: absolute;
|
|
top: 56rpx;
|
|
padding: 83rpx 25rpx 8rpx 25rpx;
|
|
|
|
.serve-seckill-list {
|
|
background: #fff;
|
|
padding: 20rpx 11rpx 20rpx 18rpx;
|
|
width: 639rpx;
|
|
height: 240rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.serve-seckill-list-cont {
|
|
width: 400rpx;
|
|
height: 200rpx;
|
|
margin-left: 20rpx;
|
|
|
|
.serve-seckill-list-cont-name {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.serve-seckill-list-cont-describe {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-top: 16rpx;
|
|
height: 60rpx;
|
|
line-height: 30rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.serve-seckill-list-cont-time {
|
|
width: 249rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
|
|
.serve-seckill-item {
|
|
color: #333;
|
|
font-size: 22rpx;
|
|
|
|
.swiper-item-cont {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
line-height: 34rpx;
|
|
color: #FF5400;
|
|
background: rgba(255, 129, 62, 0.3);
|
|
}
|
|
|
|
.swiper-item-text {
|
|
margin: 0 9rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.serve-seckill-list-butt {
|
|
width: 170rpx;
|
|
height: 59rpx;
|
|
background-image: url('@/static/images/home/serve_seckill_but.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
color: #fff;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.serve-seckill-bj-img {
|
|
position: absolute;
|
|
width: 690rpx;
|
|
height: 863rpx;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.serve-seckill-logo {
|
|
width: 196rpx;
|
|
height: 49rpx;
|
|
top: 32rpx;
|
|
left: 57rpx;
|
|
position: absolute;
|
|
z-index: 199;
|
|
}
|
|
|
|
.up_r {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.up_r_txt {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
font-weight: 400;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.swiper-box {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.serve-assistance {
|
|
width: 690rpx;
|
|
height: 443rpx;
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
|
|
.swiper-line-list {
|
|
position: absolute;
|
|
bottom: 23rpx;
|
|
width: 690rpx;
|
|
}
|
|
|
|
.swiper-line-box {
|
|
width: 128rpx;
|
|
height: 6rpx;
|
|
background: #ffffff;
|
|
border-radius: 3rpx;
|
|
|
|
.swiper-line {
|
|
width: 32rpx;
|
|
height: 6rpx;
|
|
background: #FE781C;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
.swiper-line-s {
|
|
width: 128rpx;
|
|
height: 6rpx;
|
|
background: #FE781C;
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
|
|
.serve-assistance-bj {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 690rpx;
|
|
height: 443rpx;
|
|
}
|
|
|
|
.serve-assistance-swiper {
|
|
width: 630rpx;
|
|
height: 283rpx;
|
|
border-radius: 20rpx;
|
|
margin-top: 18rpx;
|
|
margin-left: 30rpx;
|
|
|
|
.swiper-item {
|
|
background: #ffffff;
|
|
width: 630rpx;
|
|
// height: 283rpx;
|
|
border-radius: 20rpx;
|
|
padding: 19rpx 26rpx 18rpx 21rpx;
|
|
|
|
.swiper-item-cont {
|
|
width: 311rpx;
|
|
height: 246rpx;
|
|
margin-left: 26rpx;
|
|
|
|
.swiper-item-cont-name {
|
|
width: 311rpx;
|
|
font-size: 36rpx;
|
|
color: #FF4614;
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.swiper-item-cont-schedule {
|
|
width: 309rpx;
|
|
height: 20rpx;
|
|
background: #FFE5A3;
|
|
border-radius: 10rpx;
|
|
// margin-top: 16rpx;
|
|
position: relative;
|
|
|
|
.schedule-num {
|
|
height: 20rpx;
|
|
border-radius: 10rpx;
|
|
background: linear-gradient(to bottom, #FF3A09, #FFAC7A);
|
|
}
|
|
}
|
|
|
|
.swiper-item-cont-num {
|
|
// margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
|
|
.cont-num {
|
|
color: #EE3737;
|
|
}
|
|
}
|
|
|
|
.swiper-item-cont-down {
|
|
// margin-top: 6rpx;
|
|
}
|
|
|
|
.swiper-item-cont-butt {
|
|
width: 310rpx;
|
|
height: 54rpx;
|
|
background: linear-gradient(to bottom, #FF3605, #FFB07E);
|
|
color: #fff;
|
|
font-size: 34rpx;
|
|
text-align: center;
|
|
line-height: 54rpx;
|
|
border-radius: 27rpx;
|
|
// margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-item-image {
|
|
border-radius: 20rpx;
|
|
width: 246rpx;
|
|
height: 246rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serve-assistance-serve-ass {
|
|
width: 344rpx;
|
|
height: 55rpx;
|
|
margin-left: 30rpx;
|
|
margin-top: 27rpx;
|
|
}
|
|
|
|
.serve-assistance-all {
|
|
position: absolute;
|
|
top: 35rpx;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 28rpx;
|
|
|
|
.up_r_txt {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serve-search {
|
|
width: 688rpx;
|
|
height: 84rpx;
|
|
border: 2rpx solid #F81900;
|
|
padding: 10rpx;
|
|
background: #fff;
|
|
position: relative;
|
|
border-radius: 42rpx;
|
|
margin-left: 30rpx;
|
|
|
|
.serve-search-left {
|
|
width: 500rpx;
|
|
|
|
.serve-search-image {
|
|
margin: 0 12rpx;
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
|
|
.serve-search-butt {
|
|
width: 153rpx;
|
|
height: 65rpx;
|
|
background: #FA4319;
|
|
color: #fff;
|
|
line-height: 65rpx;
|
|
text-align: center;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
|
|
.serve-title {
|
|
width: 750rpx;
|
|
height: 83rpx;
|
|
margin-top: 32rpx;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
.serve-title-car {
|
|
width: 187rpx;
|
|
height: 73rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 44rpx;
|
|
}
|
|
|
|
.serve-title-tit {
|
|
width: 163rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
|
|
.serve-header {
|
|
width: 750rpx;
|
|
position: relative;
|
|
height: 1rpx;
|
|
|
|
.serve-bj {
|
|
width: 750rpx;
|
|
height: 1163rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.example-body-item {
|
|
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 15rpx;
|
|
padding: 15rpx;
|
|
height: 60rpx;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
padding: 0 15rpx;
|
|
/* #endif */
|
|
flex: 1;
|
|
border-color: #e5e5e5;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.example-body-item-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
</style> |