wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

风暴

Browse Source
dev
shuxiaoquan 1 year ago
parent b8a76e2d9a
commit 6810cd2028
8 changed files with 865 additions and 13 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 418
      news/activity/intimate.vue
  2. 38
      pages.json
  3. 418
      pages/activity/intimate.vue
  4. 2
      pages/order/refund/refundDetail.vue
  5. 2
      pages/order/refund/refundDetail1.vue
  6. BIN
      static/news/Group-279.png
  7. BIN
      static/news/refund-bg1.png
  8. BIN
      static/news/新人首单礼_07.png

418
news/activity/intimate.vue
Unescape View File

@ -0,0 +1,418 @@
<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>

38
pages.json
Unescape View File

@ -528,17 +528,33 @@
}
}
,{
"path" : "pages/activity/newsshop",
"style" :
{
"navigationBarTitleText": "新年换新",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
],
"subPackages": [
{
"root": "pages/activity/",
"pages": [
{
"path" : "intimate",
"style" :
{
"navigationBarTitleText": "贴心服务",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path" : "newsshop",
"style" :
{
"navigationBarTitleText": "新年换新",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
]
}
],
"globalStyle": {
// #ifdef H5
// "navigationStyle": "custom",

418
pages/activity/intimate.vue
Unescape View File

@ -0,0 +1,418 @@
<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>

2
pages/order/refund/refundDetail.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view class="refund">
<view class="refund-navbar">
<u-navbar title="退货退款详情" :background="background"></u-navbar>
<u-navbar title="退货退款详情" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="refund-hd">
<view class="l">

2
pages/order/refund/refundDetail1.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view class="refund">
<view class="refund-navbar">
<u-navbar title="退货退款详情" :background="background"></u-navbar>
<u-navbar title="退货退款详情" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="refund-hd">
<view class="l">

BIN
static/news/Group-279.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
static/news/refund-bg1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
static/news/新人首单礼_07.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

Write Preview
Loading…
Cancel
Save