You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
9.4 KiB
418 lines
9.4 KiB
<template>
|
|
<view class="intimate">
|
|
<view class="intimate-navbar">
|
|
<u-navbar title="贴心服务" :border-bottom="false" :background="background"></u-navbar>
|
|
</view>
|
|
<view class="intimate-hd">
|
|
<image src="@/static/home/phone.jpg"></image>
|
|
<view class="a">大白兔维修<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon></view>
|
|
<view class="b">上门服务 细心周到</view>
|
|
</view>
|
|
<scroll-view scroll-x class="intimate-menu">
|
|
<view class="item" @click="tabItem1(i)" v-for="i in 10" :key="i" :class="tabIndex1==i?'item-on':''">
|
|
<image src="@/static/home/phone.jpg"></image>
|
|
<view class="p">手机</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="intimate-bd">
|
|
<scroll-view scroll-y class="a">
|
|
<view class="item" @click="tabItem(0)" :class="tabIndex==0?'item-on':''">全部商品</view>
|
|
<view class="item" @click="tabItem(1)" :class="tabIndex==1?'item-on':''">TCL</view>
|
|
<view class="item" @click="tabItem(2)" :class="tabIndex==2?'item-on':''">创维</view>
|
|
<view class="item" @click="tabItem(3)" :class="tabIndex==3?'item-on':''">海尔</view>
|
|
<view class="item" @click="tabItem(4)" :class="tabIndex==4?'item-on':''">长虹</view>
|
|
<view class="item" @click="tabItem(5)" :class="tabIndex==5?'item-on':''">小米</view>
|
|
<view class="item" @click="tabItem(6)" :class="tabIndex==6?'item-on':''">东芝</view>
|
|
<view class="item" @click="tabItem(7)" :class="tabIndex==7?'item-on':''">华为</view>
|
|
<view class="item" @click="tabItem(8)" :class="tabIndex==8?'item-on':''">雷鸟</view>
|
|
</scroll-view>
|
|
<view class="b">
|
|
<view class="t">
|
|
<view class="item" @click="tabFilter(0)" :class="filterIndex==0?'item-on':''">价格</view>
|
|
<view class="item" @click="tabFilter(1)" :class="filterIndex==1?'item-on':''">折扣</view>
|
|
<view class="item" @click="tabFilter(2)" :class="filterIndex==2?'item-on':''">销量</view>
|
|
<view class="item" @click="tabFilter(3)" :class="filterIndex==3?'item-on':''">综合</view>
|
|
</view>
|
|
<scroll-view scroll-y class="l">
|
|
<view class="item" v-for="i in 10" :key="i" @click="tabFilter(0)">
|
|
<image src="@/static/home/phone.jpg"></image>
|
|
<view class="title">
|
|
<text>自营</text>iphone13 绿色 128GB
|
|
</view>
|
|
<view class="price">
|
|
<view class="n">￥<text>7595</text>到手价</view>
|
|
<view class="o">￥7595</view>
|
|
</view>
|
|
<view class="desc">
|
|
200+条评论 99%好评率
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/static/news/refund-bg1.png"
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
background: 'transparent',
|
|
backgroundSize: '100%',
|
|
},
|
|
isShow: true,
|
|
tabIndex1: 1,
|
|
tabIndex: 0,
|
|
filterIndex: 0,
|
|
keyword: "",
|
|
list: [{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
|
},
|
|
{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|
},
|
|
{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
|
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
tabItem(index){
|
|
this.tabIndex = index;
|
|
},
|
|
tabItem1(index){
|
|
this.tabIndex1 = index;
|
|
},
|
|
tabFilter(index){
|
|
this.filterIndex = index;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.intimate{
|
|
background: url(@/static/news/refund-bg1.png) center top no-repeat;
|
|
background-size: 100% auto;
|
|
&-hd{
|
|
width: 686rpx;
|
|
height: 170rpx;
|
|
background: rgba(255,255,255,0.86);
|
|
border-radius: 12rpx;
|
|
margin: 0 auto;
|
|
padding-top: 40rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
image{
|
|
position: absolute;
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
border-radius: 162rpx;
|
|
left: 18rpx;
|
|
top: -20rpx;
|
|
}
|
|
.a{
|
|
font-size: 32rpx;
|
|
color: #212121;
|
|
margin-left: 220rpx;
|
|
}
|
|
.b{
|
|
margin-left: 220rpx;
|
|
font-size: 28rpx;
|
|
color: #646464;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
&-menu{
|
|
height: 180rpx;
|
|
white-space: nowrap;
|
|
margin-top: 30rpx;
|
|
padding: 0 20rpx;
|
|
.item{
|
|
width: 150rpx;
|
|
height: 180rpx;
|
|
background: #FFFFFF;
|
|
display: inline-block;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFFFFF;
|
|
text-align: center;
|
|
margin-left: 12rpx;
|
|
border-radius: 8rpx;
|
|
image{
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
.p{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
}
|
|
&-on{
|
|
border: 1px solid #F21A1C;
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding: 30rpx 0 0;
|
|
display: flex;
|
|
height: calc(100vh - 700rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.a{
|
|
width: 150rpx;
|
|
height: 100%;
|
|
.item{
|
|
padding: 20rpx 35rpx;
|
|
border-left: 3px solid #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
box-sizing: border-box;
|
|
&-on{
|
|
background-color: #FFFFFF;
|
|
border-left-color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
.b{
|
|
width: 600rpx;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
.t{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3F3F3F;
|
|
line-height: 100rpx;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
&-on{
|
|
color: #F34A40;
|
|
}
|
|
}
|
|
}
|
|
.l{
|
|
height: calc(100% - 120rpx);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 270rpx;
|
|
height: 389rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 15rpx;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
image{
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.title{
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text{
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
.n{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
text{
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
.o{
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
.desc{
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-share{
|
|
width: 548rpx;
|
|
height: 810rpx;
|
|
overflow: hidden;
|
|
.l{
|
|
width: 548rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.a{
|
|
width: 490rpx;
|
|
height: 243rpx;
|
|
margin: 0 auto;
|
|
padding-top: 24rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.b{
|
|
padding: 20rpx 20rpx;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 220rpx;
|
|
height: 369rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 7rpx;
|
|
opacity: 1;
|
|
border: 1px solid #ECECEC;
|
|
padding: 10rpx 0;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
image{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.title{
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E1E1E;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text{
|
|
background-color: #F34A40;
|
|
font-size: 20rpx;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0 5rpx;
|
|
.n{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #F21A1C;
|
|
text{
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
.o{
|
|
font-size: 12px;
|
|
color: #949494;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
.desc{
|
|
padding: 0 5rpx;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
color: #949494;
|
|
white-space: nowrap;
|
|
margin-top: 10rpx;overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
.c{
|
|
background-color: #F1F1F1;
|
|
height: 150rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
image{
|
|
width: 140rpx;
|
|
height: 122rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width: 640rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #F34A40;
|
|
position: fixed;
|
|
left: 50%;
|
|
margin-left: -320rpx;
|
|
top: 50%;
|
|
z-index: 2;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-top: 450rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.goods .uni-scroll-view .uni-scroll-view{
|
|
overflow: auto!important;
|
|
}
|
|
</style> |