xinyilu/nurseWeChatAppletUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2023-02-20 16:22:42 +08:00
parent 1f105b7655
commit ab71538770
15 changed files with 389 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/Healthknowledge/index.js Normal file
View File

@ -0,0 +1,8 @@
import request from "../request.js"
export function getHeathHousingList(pageNum, pageSize) {
return request({
url: `/nurseApplet/nearbyNursingStation/getHeathHousingList?pageNum=${pageNum}&pageSize=${pageSize}&informationCategoryType=HEALTH_NOUS`,
method: 'get',
})
}

4
api/homepage/index.js
View File

@ -1,8 +1,8 @@
import request from "../request.js"
export function informationCategoryList() {
export function getPoserInfoListByType() {
return request({
url: `/nurseApplet/nearbyNursingStation/informationCategoryList?moduleType=HOME_PAGE_MODULE&&jumpType=HOME_PAGE&&informationCategoryType=HEALTH_NOUS`,
url: `/nurseApplet/nearbyNursingStation/getPoserInfoListByType?moduleType=HOME_PAGE_MODULE`,
method: 'GET'
})
}

29
pages.json
View File

@ -52,13 +52,6 @@
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
}, {
"path": "pages/Bodysatelliteintegration/Bodysatelliteintegration",
"style": {
"navigationBarTitleText": "体卫融合",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff" //背景颜色
}
},
{
"path": "pages/modify/modify",
@ -142,7 +135,6 @@
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
// "navigationStyle": "custom"
"enablePullDownRefresh": false
}
},
@ -215,9 +207,10 @@
"path": "pages/homepage/homepage",
"style": {
"navigationBarTitleText": "泉医到家",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle": "custom"
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
}
},
{
@ -250,7 +243,6 @@
"path": "pages/ProductList/ProductList", //商品列表
"style": {
"navigationBarTitleText": "医路优品",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff",
"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
"enablePullDownRefresh": true //设置参数为true
@ -318,6 +310,21 @@
// "enablePullDownRefresh": true //设置参数为true
}
}, {
"path": "pages/Healthknowledge/Healthknowledge",
"style": {
"navigationBarTitleText": "健康常识",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#ffffff"
}
}, {
"path": "pages/Healthitem/Healthitem",
"style": {
"navigationBarTitleText": "健康常识",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {

90
pages/Bodysatelliteintegration/Bodysatelliteintegration.vue
View File

@ -1,90 +0,0 @@
<template>
<view class="app">
<view class="concent">
<view class="background">
<image src="/static/logo.png" mode=""></image>
<view>
<view class="detailed">
<view>
“体卫融合”是推进我国全民健身与全民健康深度融合的重要途径，在发挥全民健身提高人民身体素质和健康水平、促进人的全面发展方面具有不可替代作用。“体卫融合”可引导广大居民践行“掌握一项体育技能、享受一生健康生活”的健康活动方式，树立“健康在我、预防为先、科学健身、贵在坚持”等生活理念，使全面健康新理念深入人心。
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
.app {
padding-top: 10rpx;
.concent {
width: 701rpx;
height: 850rpx;
background: #4C7BC9;
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
margin: 5% auto 20px;
.background {
position: relative;
width: 657rpx;
height: 800rpx;
background: #FFFFFF;
border-radius: 25rpx;
background-color: white;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
image {
width: 178rpx;
height: 84rpx;
background: #FFFFFF;
border-radius: 25px;
margin-left: 68%;
margin-top: 5%;
}
}
}
}
.detailed {
width: 657rpx;
padding: 0 42rpx;
line-height: 56rpx;
}
.detailed view {
text-indent: 2em;
}
</style>

1
pages/CommodityDetails/CommodityDetails.vue
View File

@ -410,6 +410,7 @@
// 查询商品详细信息
goodsDetailsinfo(goodsInfoId) {
let that = this
this.info = []
goodsDetails(goodsInfoId).then(res => {
uni.removeStorageSync('Refresh');
if (res.data.goodsRemark) {

50
pages/Healthitem/Healthitem.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view class="app">
<view class="title">
{{item.informationTitle}}
</view>
<view class="text" v-html="item.informationContent">
</view>
</view>
</template>
<script>
export default {
data() {
return {
item: null,
};
},
onLoad(options) { //获取传值
this.item = JSON.parse(decodeURIComponent(options.item))
this.item.informationContent = this.item.informationContent.replace(/\<img/gi,
"<br/> <img class='richPic'")
},
onReady() { //更改导航栏文字
},
}
</script>
<style lang="scss">
.title {
padding-left: 3%;
font-size: 38rpx;
font-weight: bold;
white-space: normal;
word-break: break-all;
margin-bottom: 20rpx;
}
.text {
width: 96%;
margin: 0 auto;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
/deep/ .richPic {
width: 100% !important;
height: 100% !important;
}
</style>

147
pages/Healthknowledge/Healthknowledge.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<view class="app">
<u-tabs :list="tabList" :current="tabcurrent" @change="change"></u-tabs>
<view class="Healthknowledge">
<!-- <view class="title">
健康常识
</view> -->
<view class="list">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
@tap='gohealthitem(item)'>
<view class="text">
{{item.informationTitle}}
</view>
<view class="author"></view>
<image :src="item.leadThumbnailUrl" mode=""></image>
</view>
</view>
</view>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
getHeathHousingList
} from '@/api/Healthknowledge/index.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
tabcurrent: 0,
tabList: [{
name: '健康常识'
}],
pageNum: 1,
pageSize: 10,
informationCategoryVOList: [],
total: 0,
scrollTop: 0,
};
},
onShow() {
this.getHeathHousing();
},
methods: {
//跳转健康咨询item
gohealthitem(item) {
uni.navigateTo({
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
getHeathHousing() {
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
this.informationCategoryVOList = res.rows
this.total = res.total
})
},
change() {
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onReachBottom() { //下滑加载
if (this.informationCategoryVOList.length >= this.total) {} else {
this.pageNum++
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
this.informationCategoryVOList.push(e)
})
}
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
this.getHeathHousing();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style lang="scss">
.app {
padding: 0;
.Healthknowledge {
width: 94%;
margin: 20rpx auto;
padding: 0 50rpx 50rpx;
background-color: #fff;
position: relative;
line-height: 46rpx;
.list {
width: 100%;
margin: 20rpx auto 0;
.item {
width: 100%;
height: 200rpx;
position: relative;
border-bottom: 2rpx solid #CDC9C9;
image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 253rpx;
height: 164rpx;
border-radius: 10rpx;
}
.author {
position: absolute;
bottom: 20rpx;
left: 0;
font-size: 20rpx;
color: #969494;
}
.text {
position: absolute;
top: 20rpx;
left: 0;
width: 50%;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.title {
font-size: 38rpx;
font-weight: bold;
}
}
}
</style>

9
pages/ProjectDetails/ProjectDetails.vue
View File

@ -145,6 +145,7 @@
},
// 信息
getlist(stationId, stationItemId, stationItemPriceId) {
this.lbinfo = []
getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
if (res.data.nurseItemContent) {
res.data.nurseItemContent = res.data.nurseItemContent.replace(/\<img/gi,
@ -152,13 +153,11 @@
}
if (res.data.poserInfoList.length >= 1) {
res.data.poserInfoList.forEach(e => {
e.posterPictureUrl = baseurl + e.posterPictureUrl
var obj = {
image: e.posterPictureUrl
}
this.lbinfo.push(obj)
e.image = baseurl + e.posterPictureUrl
})
this.lbinfo = res.data.poserInfoList
} else {
this.lbinfo = []
var obj = {
image: this.baseurl + res.data.itemPictureUrl
}

3
pages/appointmenttime/appointmenttime.scss
View File

@ -133,16 +133,17 @@
display: flex;
justify-content:space-around;
height: 50rpx;
font-size: 30rpx;
color: #000000;
line-height: 27rpx;
margin-bottom: 30rpx;
text-align: center;
.Soonerorlater{
width: 200rpx;
font-size: 36rpx;
height: 50rpx;
}
.Soonerorlaterclass{
font-size: 36rpx;
color: #F44B2F;
width: 200rpx;
height: 50rpx;

5
pages/appointmenttime/appointmenttime.vue
View File

@ -15,9 +15,9 @@
</view>
<view class="item" style="border: 0;">
<span>上门时间：</span>
<span class='addition'>请您选择希望护理员到达的时间区间</span>
<span class='addition'>请您选择希望护理员到达的时间</span>
</view>
<tabs :list="orderlist.appointmentTimeList" :is-scroll="false" :current="timecurrent" @change="timechange">
<tabs :list="orderlist.appointmentTimeList" :current="timecurrent" @change="timechange">
</tabs>
<view class="timeyear">
<view class="toptext">
@ -259,6 +259,7 @@
this.orderlist.afternoonOpenStartTime = this.orderlist.afternoonOpenStartTime.slice(0, 5)
this.orderlist.morningOpenEndTime = this.orderlist.morningOpenEndTime.slice(0, 5)
this.orderlist.morningOpenStartTime = this.orderlist.morningOpenStartTime.slice(0, 5)
this.orderlist.patientId = this.patientId
submitAppointment(this.orderlist).then(res => {
if (res.code == 500) {
that.$refs.uToast.show({

88
pages/homepage/homepage.vue
View File

@ -29,14 +29,15 @@
<view class="title">
健康常识
</view>
<view class="more">
<view class="more" @tap='gohealth'>
<view class="title">
查看更多
</view>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
<view class="list">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
@tap='gohealthitem(item)'>
<view class="text">
{{item.informationTitle}}
</view>
@ -46,13 +47,17 @@
</view>
</view>
<u-toast ref="uToast" />
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
informationCategoryList
getPoserInfoListByType
} from '@/api/homepage/index.js'
import {
getHeathHousingList
} from '@/api/Healthknowledge/index.js'
import baseurl from '../../api/baseurl';
export default {
data() {
@ -60,26 +65,45 @@
swiperImgUrls: [],
currentIndex: 0,
informationCategoryVOList: [], //咨询信息
informationCategorytotal: 0,
pageNum: 1,
pageSize: 10,
scrollTop: 0,
};
},
onShow() {
this.informationCategoryinfo()
this.getPoserInfo();
this.getHeathHousing();
},
methods: {
informationCategoryinfo() {
informationCategoryList().then(res => {
if (res.code == 200) {
res.data.informationCategoryVOList.forEach(e => {
//跳转健康咨询item
gohealthitem(item) {
uni.navigateTo({
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
//健康咨询
getHeathHousing() {
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
})
this.informationCategoryVOList = res.data.informationCategoryVOList
res.data.poserInfoList.forEach(e => {
e.posterPictureUrl = baseurl + e.posterPictureUrl
var obj = {
image: e.posterPictureUrl
}
this.swiperImgUrls.push(obj)
})
}
this.informationCategoryVOList = res.rows
this.informationCategorytotal = res.total
})
},
//海报
getPoserInfo() {
getPoserInfoListByType().then(res => {
if (res.code == 200) {
if (res.data.poserInfoList) {
res.data.poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
})
this.swiperImgUrls = res.data.poserInfoList
}
}
})
},
@ -104,6 +128,32 @@
url: '/pages/site/site'
})
},
//健康常识
gohealth() {
uni.navigateTo({
url: '/pages/Healthknowledge/Healthknowledge'
})
},
},
onReachBottom() { //下滑加载
if (this.informationCategoryVOList.length >= this.informationCategorytotal) {} else {
this.pageNum++
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
this.informationCategoryVOList.push(e)
})
}
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
this.getHeathHousing();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
//1.分享给朋友
onShareAppMessage(res) {
@ -123,6 +173,9 @@
path: url,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>
@ -200,6 +253,9 @@
left: 0;
width: 50%;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

18
pages/nursestation/nursestation.scss
View File

@ -53,8 +53,8 @@
margin-top: -80rpx;
z-index: 999;
::v-deep .u-tabs{
background-color: #F4F5F7 !important;
padding-bottom: 10rpx;
border-radius: 20rpx;
}
.tive {
width: 94%;
@ -147,12 +147,13 @@
}
.tab-box {
display: flex;
font-weight: 600;
.tab-item {
flex-shrink: 0;
padding: 3%;
position: relative;
transition: all 0.2s linear;
font-size: 31rpx;
font-size: 36rpx;
&::after {
transition: all 0.2s linear;
transform: translateX(-50%) scaleX(0);
@ -161,10 +162,10 @@
position: absolute;
left: 50%;
bottom: 10rpx;
border-bottom: 6rpx solid #D43953;
border-radius: 4rpx;
}
&.active {
color: #2979ff;
&::after {
content: '';
width: 50%;
@ -172,7 +173,6 @@
left: 50%;
transform: translateX(-50%) scaleX(1);
bottom: 10rpx;
border-bottom: 6rpx solid red;
}
}
}
@ -268,13 +268,15 @@
// white-space: nowrap;
position: relative;
.distance{
position: absolute;
right:30rpx;
top:50%;
transform: translateY(-50%);
// position: absolute;
// right:30rpx;
// top:50%;
float: right;
display: inline-block;
}
.text{
padding-left: 40rpx;
display: inline-block;
}
image{
position: absolute;

75
pages/nursestation/nursestation.vue
View File

@ -40,7 +40,13 @@
</view>
</view>
<view class="address" v-else>
暂无
<image src="../../static/locatinsmall.png" mode=""></image>
<view class="text">
暂无
</view>
<view class="distance">
{{distance}}KM
</view>
</view>
<view class="address" v-if="list.dutyPhone" style="margin: 20rpx 0 0 33rpx;" @tap='gophone'>
<image src="../../static/phone.png" mode=""></image>
@ -48,19 +54,22 @@
{{list.dutyPhone}}
</view>
</view>
<view class="address" v-else style="margin: 0 0 0 30rpx;">
暂无
<view class="address" v-else style="margin: 20rpx 0 0 33rpx">
<image src="../../static/phone.png" mode=""></image>
<view class="text">
暂无
</view>
</view>
</view>
<view class="tive">
<!-- <view class="tab-box">
<view class="tab-item" @tap="testTabClick(index)" v-for="(item,index) in tabList" :key="index"
<view class="tab-box">
<view class="tab-item" @tap="testTabClick(item)" v-for="(item,index) in tabLists" :key="index"
:class="tabIndex == index?'active':''">
{{item.classifyName}}
{{item.name}}
</view>
</view> -->
<u-tabs :list="tabList" :current="classifycurrent" @change="change"></u-tabs>
<view class="" v-if="servelist.length>0&&choicetab==false">
</view>
<u-tabs v-if="choicetab==false" :list="tabList" :current="classifycurrent" @change="change"></u-tabs>
<view class="" v-if="servelist.length>0&&choicetab==false" style="margin:0">
<view class="item" v-for="item in servelist" :key="" v-show='choicetab==false'
@click.stop='goProjectDetails(item)'>
<image :src="item.itemPictureUrl"></image>
@ -70,7 +79,7 @@
<u-rate :count="5" value="2"></u-rate>
</view> -->
<!-- <view class="servicetime">服务时长:{{item.serveDurationUnit?item.serveDurationUnit:'0'}}</view> -->
<view class="appointment" @tap.stop='goappointments(item)'>预约</view>
<view class="appointment" @click.stop='goappointments(item)'>预约</view>
<view class="price">￥{{item.nurseItemPrice==null?'0':item.nurseItemPrice}}</view>
</view>
</view>
@ -114,6 +123,7 @@
</view>
</u-mask>
<u-toast ref="uToast" />
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
@ -130,7 +140,7 @@
export default {
data() {
return {
baseurl:'',
baseurl: '',
lbinfo: [], //轮播list
usershow: false, //完善信息开关
choicetab: false, //切换
@ -150,9 +160,20 @@
name: '全部',
id: ''
}], //分类标题
tabIndex: 0,
tabLists: [{
name: '服务项目',
id: 0,
},
{
name: '产品',
id: 1,
}
],
classifycurrent: 0, //分类下标
distance: null, //距离
nurseClassifyInfoId: '', //分类id
scrollTop: 0,
}
},
onShow() {
@ -165,17 +186,21 @@
this.distance = options.distance
},
methods: {
testTabClick(item) {
this.tabIndex = item.id
if (item.id == 0) {
this.choicetab = false
} else {
this.choicetab = true
}
},
//点击分类标题
change(index) {
this.classifycurrent = index;
this.nurseClassifyInfoId = this.tabList[index].id
this.serveinfo()
if (this.tabList[index].name == '产品') {
this.choicetab = true
} else {
this.choicetab = false
}
},
//预约
goappointments(item) {
let that = this
try {
@ -246,20 +271,15 @@
e.name = e.classifyName
this.tabList.push(e)
})
var obj = {
name: '产品'
}
this.tabList.push(obj)
this.list = res.data
if (res.data.poserInfoList.length >= 1) {
res.data.poserInfoList.forEach(e => {
e.posterPictureUrl = baseurl + e.posterPictureUrl
var obj = {
image: e.posterPictureUrl
}
this.lbinfo.push(obj)
e.image = baseurl + e.posterPictureUrl
})
this.lbinfo = res.data.poserInfoList
} else {
this.lbinfo = []
var obj = {
image: res.data.stationPictureUrl
}
@ -345,7 +365,7 @@
if (!this.choicetab) {
if (this.servelist.length >= this.servetotal) {} else {
this.pageNum++
itemList(this.nurseStationId, this.pageSize, this.pageNum).then(res => {
itemList(this.nurseStationId, this.pageSize, this.pageNum, this.nurseClassifyInfoId).then(res => {
res.rows.forEach(e => {
e.itemPictureUrl = baseurl + e.itemPictureUrl
this.servelist.push(e)
@ -403,6 +423,9 @@
path: url,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>

36
pages/site/site.vue
View File

@ -62,6 +62,7 @@
</view>
</view>
</view>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
@ -89,6 +90,7 @@
nurseClassId: '', //护理站分类id
itemClassId: '', //护理项目分类id
searchName: '', //通用名称
scrollTop: 0,
}
},
methods: {
@ -116,11 +118,9 @@
e.classifyPictureUrl = baseurl + e.classifyPictureUrl
})
res.data.poserInfoList.forEach(e => {
var obj = {
image: baseurl + e.posterPictureUrl
}
this.lbinfo.push(obj)
e.image = baseurl + e.posterPictureUrl
})
this.lbinfo = res.data.poserInfoList
this.nurseItemClassifyInfoList = res.data.nurseItemClassifyInfoList.slice(0, 7)
})
},
@ -178,17 +178,17 @@
onReachBottom() { //上滑加载
if (this.nursestationlist.length >= this.total) {} else {
this.pageNum++;
// nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
// this.searchName)
// .then(res => {
// res.rows.forEach(e => {
// e.stationPictureUrl = baseurl + e.stationPictureUrl
// if (e.classifyInfoList.length >= 1) {
// e.classifyInfoList = e.classifyInfoList.slice(0, 2)
// }
// this.nursestationlist.push(e)
// })
// })
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseClassId, this.itemClassId,
this.searchName)
.then(res => {
res.rows.forEach(e => {
e.stationPictureUrl = baseurl + e.stationPictureUrl
if (e.classifyInfoList.length >= 1) {
e.classifyInfoList = e.classifyInfoList.slice(0, 2)
}
this.nursestationlist.push(e)
})
})
}
},
onPullDownRefresh() { //下拉刷新
@ -200,6 +200,9 @@
},
watch: {
searchName() {
this.itemClassId = ''
this.nurseClassId = ''
this.conNewcurrent = 0
this.requestinfo()
},
},
@ -270,6 +273,9 @@
path: url,
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
}
</script>
<style lang="scss">

4
pages/utabs/u-tabs.vue
View File

@ -77,7 +77,7 @@
// 字体大小
fontSize: {
type: [String, Number],
default: 24
default: 28
},
// 过渡动画时长, 单位ms
duration: {
@ -217,7 +217,7 @@
return (index) => {
let style = {
height: this.height + 'rpx',
'line-height': '28rpx',
'line-height': '33rpx',
'font-size': this.fontSize + 'rpx',
'transition-duration': `${this.duration}s`,
padding: this.isScroll ? `0 ${this.gutter}rpx` : '',