20 changed files with 1456 additions and 56 deletions
@ -0,0 +1,20 @@
|
||||
import request from "@/utils/request.js"; |
||||
import {host} from "@/config/host.js"; |
||||
|
||||
|
||||
export function cardList(data) { |
||||
|
||||
return request({ |
||||
url: `${host}/user/card-list`, |
||||
method: "post", |
||||
data |
||||
}); |
||||
} |
||||
export function cardDetail(data) { |
||||
|
||||
return request({ |
||||
url: `${host}/user/card-info`, |
||||
method: "post", |
||||
data |
||||
}); |
||||
} |
||||
@ -0,0 +1,188 @@
|
||||
.app-wallpaper{ |
||||
position: relative; |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
}; |
||||
//padding-left:20rpx; |
||||
//padding-right:20rpx; |
||||
.draw-container{ |
||||
padding:{ |
||||
left:20rpx; |
||||
right:20rpx; |
||||
top:50rpx; |
||||
bottom:60rpx; |
||||
} |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
position: center center; |
||||
} |
||||
.draw-content{ |
||||
|
||||
box-sizing: border-box; |
||||
.draw-item{ |
||||
box-sizing: border-box; |
||||
//padding:5rpx; |
||||
padding:10rpx; |
||||
.draw-item-container{ |
||||
padding:5rpx; |
||||
box-sizing: border-box; |
||||
.img{ |
||||
width:95rpx; |
||||
height:95rpx; |
||||
} |
||||
|
||||
border-radius: 20rpx; |
||||
&.start-draw{ |
||||
|
||||
border-radius: 50%; |
||||
padding:5rpx; |
||||
background:{ |
||||
color:#4DC3B8; |
||||
} |
||||
.draw-item-content{ |
||||
border-radius: 50%; |
||||
border:1rpx solid #D9FFFA; |
||||
|
||||
color:#fff; |
||||
} |
||||
&.disabled{ |
||||
background:{ |
||||
color:#dedede; |
||||
} |
||||
.draw-item-content{ |
||||
border-radius: 50%; |
||||
border:1rpx solid #f5f5f5; |
||||
|
||||
color:#fff; |
||||
} |
||||
} |
||||
} |
||||
background:{ |
||||
color:#E2FFFB; |
||||
} |
||||
} |
||||
.draw-item-content{ |
||||
font-size:24rpx; |
||||
font-weight: 400; |
||||
border:1rpx dashed #4DC3B8; |
||||
padding:{ |
||||
top:35rpx; |
||||
bottom:30rpx; |
||||
} |
||||
text-align: center; |
||||
|
||||
border-radius: 20rpx; |
||||
box-sizing: border-box; |
||||
color:#539188; |
||||
} |
||||
&.active{ |
||||
.draw-item-container{ |
||||
background:{ |
||||
color:#FF8859; |
||||
} |
||||
.draw-item-content{ |
||||
border:1rpx dashed #FFFFFF; |
||||
color:#FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.draw-info-container{ |
||||
box-sizing: border-box; |
||||
padding:{ |
||||
top:30rpx; |
||||
bottom:70rpx; |
||||
left:40rpx; |
||||
right:40rpx; |
||||
}; |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
}; |
||||
.draw-title-group{ |
||||
position: relative; |
||||
.draw-gun{ |
||||
width:100%; |
||||
position: absolute; |
||||
top:-90rpx; |
||||
left:0; |
||||
text-align: center; |
||||
.img{ |
||||
height:85rpx; |
||||
} |
||||
} |
||||
.draw-image{ |
||||
.img{ |
||||
width:65rpx; |
||||
} |
||||
margin-bottom:22rpx; |
||||
margin-top:10rpx; |
||||
} |
||||
.draw-title{ |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
color: #151515; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.draw-shadow{ |
||||
position: fixed; |
||||
top:0; |
||||
left:0; |
||||
z-index: 9999; |
||||
width:100%; |
||||
height:100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
background:{ |
||||
color:rgba(0,0,0,0.7) |
||||
} |
||||
.draw-shadow-container{ |
||||
position: relative; |
||||
background-color:#fff; |
||||
box-sizing: border-box; |
||||
border-radius: 30rpx; |
||||
padding: { |
||||
top:160rpx; |
||||
bottom:60rpx; |
||||
left:60rpx; |
||||
right:60rpx; |
||||
}; |
||||
.draw-shadow-image{ |
||||
text-align: center; |
||||
position: absolute; |
||||
width:100%; |
||||
top:-90rpx; |
||||
left:0; |
||||
.img{ |
||||
width:240rpx; |
||||
} |
||||
} |
||||
.draw-shadow-title{ |
||||
text-align: center; |
||||
margin-bottom:20rpx; |
||||
.img{ |
||||
width:200rpx; |
||||
} |
||||
} |
||||
.draw-shadow-content{ |
||||
max-width:440rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #131313; |
||||
line-height: 40rpx; |
||||
margin-bottom:60rpx; |
||||
} |
||||
.draw-shadow-button{ |
||||
justify-content: center; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,216 @@
|
||||
<template> |
||||
<HeaderNav title="惊喜抽抽抽" :is-back="true"></HeaderNav> |
||||
<view class="body-background" :style="{ |
||||
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
||||
}"></view> |
||||
<view class="app-wallpaper"> |
||||
<view class="draw-container" :style="{backgroundImage:'url('+staticImage.drawBackground+')'}"> |
||||
<view class="draw-content row"> |
||||
<view class="draw-item col-4" :class="{active:(checked == index)}" v-for="(item,index) in drawList"> |
||||
<view class="draw-item-container" v-if="index != 4"> |
||||
<view class="draw-item-content"> |
||||
<image class="img" mode="aspectFill" :src="item.img"/> |
||||
<view class="draw-title ">{{item.title}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="draw-item-container start-draw" :class="{disabled:!drawButton}" v-else> |
||||
<view class="draw-item-content " @click="drawAni()"> |
||||
<image class="img" mode="aspectFill" :src="item.img"/> |
||||
<view class="draw-title">{{item.title}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="draw-info-container" :style="{backgroundImage:'url('+staticImage.drawInfoBackground+')'}"> |
||||
<view class="draw-title-group"> |
||||
<view class="draw-gun"> |
||||
<image class="img" :src="staticImage.drawInfoGun" mode="heightFix"/> |
||||
</view> |
||||
<view class="draw-image"> |
||||
<image class="img" :src="staticImage.drawInfoTitle" mode="widthFix"/> |
||||
</view> |
||||
<view class="draw-title"> |
||||
1、每人每次限参加一次抽奖活动<br> |
||||
2、实物请到门店进行兑换<br> |
||||
3、优惠券自动发送到中奖账户<br> |
||||
4、优惠券不代表实际金额进行店内消费 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="draw-shadow" v-show="drawShadow"> |
||||
<view class="draw-shadow-container"> |
||||
<view class="draw-shadow-image"> |
||||
<image class="img" :src="staticImage.drawInfoWZImg" mode="widthFix" v-show="!drawStatus"/> |
||||
<image class="img" :src="staticImage.drawInfoZJImg" mode="widthFix" v-show="drawStatus"/> |
||||
</view> |
||||
<view class="draw-shadow-title"> |
||||
<image class="img" :src="staticImage.drawInfoWZTitle" mode="widthFix" v-show="!drawStatus"/> |
||||
<image class="img" :src="staticImage.drawInfoZJTitle" mode="widthFix" v-show="drawStatus"/> |
||||
</view> |
||||
<view class="draw-shadow-content"> |
||||
<!-- 恭喜小主获得XX奖励，客服将会1个 工作日内联系您--> |
||||
恭喜小主获得一匹大马，客服将会1个 工作日内联系您 |
||||
</view> |
||||
<view class="draw-shadow-button row" @click="closeDrawShadow"> |
||||
<MzButton |
||||
title="好的" |
||||
button-color="#4DC3B8" |
||||
font-color="#ffffff" |
||||
button-width="250rpx" |
||||
> |
||||
</MzButton> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <RightNav></RightNav> --> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
||||
import FooterNav from '@/components/FooterNav/Index.vue'; |
||||
import RightNav from '@/components/RightNav/Index.vue'; |
||||
import MzButton from '../../components/MzButton/Index.vue'; |
||||
|
||||
export default { |
||||
components: { |
||||
HeaderNav, |
||||
FooterNav, |
||||
RightNav, |
||||
MzButton |
||||
}, |
||||
data() { |
||||
return { |
||||
drawButton:true, |
||||
drawShadow:false, |
||||
drawStatus:false, |
||||
checked:0, |
||||
drawOrder:[], |
||||
drawId:7, |
||||
drawOrderDefault:[0,1,2,5,8,7,6,3], |
||||
title: 'Hello', |
||||
loading: true, |
||||
staticImage: { |
||||
screenActiveImg: imghost + '/static/image/screen-active.png', |
||||
wallpaperBgImage: imghost + '/static/image/card-background.png', |
||||
dogImage: imghost + '/static/image/index-user-title-dog.png', |
||||
drawBackground: imghost + '/static/image/draw-background.png', |
||||
drawInfoBackground: imghost + '/static/image/draw-info-background.png', |
||||
drawInfoTitle: imghost + '/static/image/draw-info-title.png', |
||||
drawInfoGun: imghost + '/static/image/draw-info-gun.png', |
||||
drawInfoZJImg: imghost + '/static/image/draw-Zj-img.png', |
||||
drawInfoWZImg: imghost + '/static/image/draw-Wz-img.png', |
||||
drawInfoZJTitle: imghost + '/static/image/draw-Zj-title.png', |
||||
drawInfoWZTitle: imghost + '/static/image/draw-Wz-title.png', |
||||
}, |
||||
indexBanner: [{ |
||||
image: imghost + '/static/image/banner.png', |
||||
url: '', |
||||
}], |
||||
user: { |
||||
avatar: imghost + '/static/image/banner.png', |
||||
nickname: '清晨的风', |
||||
coupons: 221, |
||||
id: 88685 |
||||
}, |
||||
isTop: false, |
||||
pagePadding: 100, |
||||
petImage: imghost + '/static/image/pet_avatar1.jpeg', |
||||
drawList: [ |
||||
{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'开始抽奖' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
},{ |
||||
img:imghost+'/static/image/banner.png', |
||||
title:'优惠券' |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
methods: { |
||||
navTo(url) { |
||||
wx.navigateTo({ |
||||
url: url |
||||
}) |
||||
}, |
||||
drawAni(){ |
||||
let that = this; |
||||
if(that.drawButton === false){ |
||||
return; |
||||
} |
||||
that.drawButton = false; |
||||
that.drawOrder = []; |
||||
for(let i=2;i<=3;i++){ |
||||
for(let index in that.drawOrderDefault){ |
||||
if(i===3 && that.drawId === that.drawOrderDefault[index]){ |
||||
break; |
||||
}else{ |
||||
that.drawOrder.push(that.drawOrderDefault[index]) |
||||
} |
||||
} |
||||
} |
||||
console.log(that.drawOrder) |
||||
let index = 0; |
||||
let ani = setInterval(()=>{ |
||||
that.checked = that.drawOrder[index] |
||||
index++; |
||||
if(index>=that.drawOrder.length){ |
||||
clearInterval(ani); |
||||
that.drawButton = true; |
||||
that.drawShadow = true; |
||||
} |
||||
},200) |
||||
}, |
||||
closeDrawShadow(){ |
||||
this.drawShadow = false; |
||||
} |
||||
}, |
||||
onPageScroll(res) { |
||||
if (res.scrollTop <= 20) { |
||||
uni.$emit('isTop', true); |
||||
} else { |
||||
uni.$emit('isTop', false); |
||||
} |
||||
}, |
||||
created() { |
||||
// this.pagePadding = (api.navHeight().navPaddingTop + |
||||
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
||||
}, |
||||
mounted() { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/index.scss'; |
||||
</style> |
||||
@ -0,0 +1,428 @@
|
||||
.app-wallpaper{ |
||||
position: relative; |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
}; |
||||
.order-capsule-container{ |
||||
position: sticky; |
||||
|
||||
box-sizing: border-box; |
||||
width:100%; |
||||
padding:10rpx; |
||||
border:2rpx solid #262626; |
||||
border-radius: 45rpx; |
||||
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24); |
||||
background-color: #F8FAFA; |
||||
.order-capsule{ |
||||
box-sizing: border-box; |
||||
padding:20rpx; |
||||
text-align: center; |
||||
font: { |
||||
size:30rpx; |
||||
weight:500; |
||||
} |
||||
line-height:30rpx; |
||||
border:2rpx solid rgba(0,0,0,0); |
||||
&.active{ |
||||
background:{ |
||||
color:#4DC3B8; |
||||
} |
||||
color:#FFFFFF; |
||||
border:2rpx solid #262626; |
||||
border-radius:35rpx; |
||||
} |
||||
} |
||||
} |
||||
.order-screen-container{ |
||||
.order-screen{ |
||||
padding:40rpx 0 20rpx 0; |
||||
padding-right: 66rpx; |
||||
font-size: 28rpx; |
||||
line-height: 53rpx; |
||||
color:#646464; |
||||
font-weight: 400; |
||||
&.active{ |
||||
color:#000000; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
.order-screen-active{ |
||||
display:flex; |
||||
} |
||||
} |
||||
.order-screen-active{ |
||||
display: none; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.img{ |
||||
width:37rpx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
.order-screen-time-container{ |
||||
flex:1; |
||||
margin-left:auto; |
||||
justify-content: flex-end; |
||||
.order-screen{ |
||||
// padding-right:0; |
||||
} |
||||
} |
||||
.order-screen-time-title{ |
||||
color:#B5B5B5; |
||||
font-size:26rpx; |
||||
font-weight: 400; |
||||
line-height:53rpx; |
||||
padding-right: 16rpx; |
||||
} |
||||
.order-screen-time-buttton-container{ |
||||
padding-right: 0; |
||||
} |
||||
.order-screen-time-buttton{ |
||||
padding:8rpx 19rpx; |
||||
color:#4EC2B7; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
background-color:#ffffff; |
||||
border:1px solid #4EC2B7; |
||||
border-radius: 10rpx; |
||||
line-height: 28rpx; |
||||
box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2); |
||||
} |
||||
} |
||||
.order-list-container{ |
||||
width:100%; |
||||
max-height: 1000rpx; |
||||
height: 100%; |
||||
overflow: auto; |
||||
box-sizing: border-box; |
||||
|
||||
.order-list-item{ |
||||
position: relative; |
||||
.pet-gun{ |
||||
background:{ |
||||
size: 80% 100%; |
||||
repeat: no-repeat; |
||||
position: center center; |
||||
} |
||||
height:90rpx; |
||||
width:100%; |
||||
position: absolute; |
||||
top:-60rpx; |
||||
z-index: 1; |
||||
} |
||||
margin-bottom:30rpx; |
||||
width:100%; |
||||
box-sizing: border-box; |
||||
.order-card-container{ |
||||
width:100%; |
||||
box-sizing: border-box; |
||||
padding:10rpx 10rpx; |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
.order-card-container-background{ |
||||
|
||||
width:100%; |
||||
height:90%; |
||||
position: absolute; |
||||
left:0rpx; |
||||
z-index: -1; |
||||
bottom:0rpx; |
||||
border: 3rpx solid #262626; |
||||
box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3); |
||||
border-radius: 26rpx; |
||||
background: { |
||||
color:#EED9AD; |
||||
}; |
||||
} |
||||
.order-card-container-background-main{ |
||||
|
||||
width:100%; |
||||
background:{ |
||||
color:#FFFFFF; |
||||
} |
||||
border-radius: 26rpx; |
||||
border: 3rpx solid #262626; |
||||
padding:7rpx; |
||||
box-sizing:border-box; |
||||
.order-card-col{ |
||||
width:100%; |
||||
box-sizing: border-box; |
||||
padding:20rpx; |
||||
background:{ |
||||
size:100% 100%; |
||||
position: center center; |
||||
repeat:no-repeat; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.order-card-left{ |
||||
align-items: center; |
||||
.left-background{ |
||||
box-sizing: border-box; |
||||
width:135rpx; |
||||
height:135rpx; |
||||
border-radius: 50%; |
||||
align-items: center; |
||||
justify-content: center; |
||||
display: flex; |
||||
background:{ |
||||
color:#EED9AD; |
||||
} |
||||
} |
||||
|
||||
//height:auto; |
||||
margin-right: 25rpx; |
||||
.img{ |
||||
width:110rpx; |
||||
height:110rpx; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
.order-card-right{ |
||||
border-radius: 30rpx; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background:{ |
||||
color:#FBF5E7; |
||||
} |
||||
text-align: center; |
||||
padding:30rpx; |
||||
padding-left:20rpx; |
||||
.order-card-title{ |
||||
padding-top:5px; |
||||
font-size:32rpx; |
||||
font-weight: 500; |
||||
line-height: 30rpx; |
||||
color:#131313; |
||||
} |
||||
.order-card-tag-container{ |
||||
padding-top:18rpx; |
||||
.order-card-tag{ |
||||
padding:9rpx 20rpx; |
||||
background:{ |
||||
color:#E9FBF7; |
||||
} |
||||
color:#4DC3B8; |
||||
font-size:26rpx; |
||||
font-weight:400; |
||||
line-height:1; |
||||
border-radius:6rpx; |
||||
&+.order-card-tag{ |
||||
margin-left:9rpx; |
||||
} |
||||
} |
||||
} |
||||
.order-card-day{ |
||||
|
||||
} |
||||
.order-card-pay-time{ |
||||
|
||||
} |
||||
.order-card-day,.order-card-pay-time{ |
||||
padding-top:20rpx; |
||||
font-size:28rpx; |
||||
font-weight:400; |
||||
line-height:30rpx; |
||||
color:#767676; |
||||
.card-label{ |
||||
color:#1B1B1B; |
||||
} |
||||
} |
||||
} |
||||
.order-card-bottom{ |
||||
padding-top:30rpx; |
||||
justify-content: center; |
||||
} |
||||
.card-button{ |
||||
&:nth-child(1){ |
||||
padding-right:23rpx; |
||||
} |
||||
&:nth-child(2){ |
||||
padding-left:23rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.pet-detail-bottom-container{ |
||||
padding:15rpx; |
||||
.pet-detail-container{ |
||||
.pet-detail-gun{ |
||||
width:100%; |
||||
text-align: center; |
||||
.img{ |
||||
height:90rpx; |
||||
} |
||||
|
||||
position: absolute; |
||||
top:-70rpx; |
||||
left:0; |
||||
} |
||||
position: relative; |
||||
.pet-detail-content{ |
||||
padding:50rpx 0; |
||||
border: 3rpx solid #262626; |
||||
background:{ |
||||
color:#FFFFFF; |
||||
} |
||||
border-radius: 26rpx; |
||||
.content-item{ |
||||
align-items: center; |
||||
padding:15rpx 30rpx; |
||||
.item-icon{ |
||||
width:32rpx; |
||||
height:32rpx; |
||||
.img{ |
||||
width:32rpx; |
||||
height:32rpx; |
||||
} |
||||
} |
||||
.item-title{ |
||||
font-size: 30rpx; |
||||
font-weight: 500; |
||||
color: #111111; |
||||
margin-left:3rpx; |
||||
} |
||||
.item-content { |
||||
font-size: 30rpx; |
||||
font-weight: 400; |
||||
color: #4D4D4D; |
||||
margin-left:10rpx; |
||||
&.item-textarea{ |
||||
width:100%; |
||||
padding:30rpx; |
||||
background:{ |
||||
color:#F2F8F8; |
||||
} |
||||
margin-left:0; |
||||
margin-top:20rpx; |
||||
min-height:100rpx; |
||||
} |
||||
} |
||||
|
||||
&.pet-detail-video-group{ |
||||
.video-title{ |
||||
.img{ |
||||
height:35rpx; |
||||
} |
||||
} |
||||
.video-content{ |
||||
padding:10rpx; |
||||
position: relative; |
||||
.video-content-container{ |
||||
height:250rpx; |
||||
background-color:rgba(0,0,0,1); |
||||
border-radius: 16rpx; |
||||
position: relative; |
||||
z-index: 2; |
||||
.img{ |
||||
height:250rpx; |
||||
} |
||||
} |
||||
.video-content-background{ |
||||
width:100%; |
||||
height:75%; |
||||
position: absolute; |
||||
bottom:0; |
||||
left:0; |
||||
z-index: 1; |
||||
border:1rpx solid #000; |
||||
border-radius: 16rpx; |
||||
} |
||||
} |
||||
} |
||||
&.pet-detail-photo-group{ |
||||
box-sizing: border-box; |
||||
.video-content{ |
||||
box-sizing: border-box; |
||||
} |
||||
.video-title{ |
||||
.img{ |
||||
height:35rpx; |
||||
} |
||||
} |
||||
.photo-item{ |
||||
|
||||
box-sizing: border-box; |
||||
padding:10rpx; |
||||
.photo-item-container{ |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
.photo-content{ |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
border:1rpx solid #000; |
||||
border-radius: 20rpx; |
||||
z-index: 2; |
||||
|
||||
} |
||||
.photo-background{ |
||||
box-sizing: border-box; |
||||
position: absolute; |
||||
top:10rpx; |
||||
left:0; |
||||
z-index: 1; |
||||
width:100%; |
||||
height:100%; |
||||
border:1rpx solid #000; |
||||
border-radius: 20rpx; |
||||
} |
||||
} |
||||
|
||||
.img{ |
||||
width:100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.pet-detail-background{ |
||||
position: absolute; |
||||
width:100%; |
||||
height:100%; |
||||
top:0; |
||||
left:0; |
||||
z-index: -1; |
||||
border-radius: 26rpx; |
||||
transform: rotateZ(1.5grad); |
||||
background:{ |
||||
color:#4DC3B8; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.right-nav{ |
||||
width:132rpx; |
||||
position: fixed; |
||||
right:-25rpx; |
||||
bottom:160rpx; |
||||
.right-nav-button{ |
||||
height:127rpx; |
||||
background:{ |
||||
size:100% 100%; |
||||
repeat:no-repeat; |
||||
} |
||||
} |
||||
} |
||||
.footer-menu{ |
||||
padding:30rpx; |
||||
position: fixed; |
||||
bottom:0; |
||||
left:0; |
||||
width: 100%; |
||||
z-index: 9999; |
||||
background: #FFFFFF; |
||||
border: 2rpx solid #262626; |
||||
box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06); |
||||
border-radius: 26rpx 26rpx 0rpx 0rpx; |
||||
text-align: center; |
||||
.footer-button{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
@ -0,0 +1,304 @@
|
||||
<template> |
||||
<HeaderNav title="萌宠详情" :is-back="true"></HeaderNav> |
||||
<view class="app-wallpaper" :style="{ |
||||
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
||||
}"> |
||||
|
||||
<view class="order-screen-container row"> |
||||
<view class="order-list-container"> |
||||
<view class="order-list-item"> |
||||
<view v-show="false" class="pet-gun" :style="{ |
||||
backgroundImage:'url('+staticImage.petGun+')' |
||||
}"></view> |
||||
<view class="order-card-container row"> |
||||
<view class="order-card-container-background col-12"></view> |
||||
<view class="order-card-container-background-main row"> |
||||
<view class="order-card-col row"> |
||||
<view class="order-card-left"> |
||||
<view class="left-background"> |
||||
<image class="img" :src="petImage" mode="aspectFill" /> |
||||
</view> |
||||
</view> |
||||
<view class="order-card-right col row"> |
||||
<view class="col"> |
||||
<view class="name ">靓仔</view> |
||||
<view class="old">2岁</view> |
||||
</view> |
||||
<view class="col"> |
||||
<view class="type">英短</view> |
||||
<view class="weight">8kg</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="pet-detail-bottom-container"> |
||||
<view class="pet-detail-container"> |
||||
<view class="pet-detail-gun col"> |
||||
<image class="img" mode="heightFix" :src="staticImage.petGun"/> |
||||
</view> |
||||
<view class="pet-detail-content"> |
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petName"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
宝贝名字： |
||||
</view> |
||||
<view class="item-content"> |
||||
靓仔 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petType"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
宝贝品种： |
||||
</view> |
||||
<view class="item-content"> |
||||
美国英短 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petBirth"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
出生日期： |
||||
</view> |
||||
<view class="item-content"> |
||||
2020年6月 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petSex"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
宝贝性别： |
||||
</view> |
||||
<view class="item-content"> |
||||
弟弟 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petYm"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
最近疫苗时间： |
||||
</view> |
||||
<view class="item-content"> |
||||
2020/5/23 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petQc"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
最近驱虫时间 |
||||
</view> |
||||
<view class="item-content"> |
||||
2020/5/23 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petHome"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
宝贝户口（犬证）： |
||||
</view> |
||||
<view class="item-content"> |
||||
有 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item row"> |
||||
<view class="item-icon"> |
||||
<image class="img" mode="widthFix" :src="staticImage.petBs"/> |
||||
</view> |
||||
<view class="item-title"> |
||||
过往病史： |
||||
</view> |
||||
<view class="item-content item-textarea"> |
||||
病使信息，文字占位 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="content-item pet-detail-video-group"> |
||||
<view class="video-title"> |
||||
<image class="img" mode="heightFix" :src="staticImage.petVideoTitle"/> |
||||
</view> |
||||
<view class="video-content"> |
||||
<view class="video-content-container"> |
||||
<image class="img" mode="aspectFill" :src="staticImage.wallpaperBgImage"/> |
||||
</view> |
||||
<view class="video-content-background"></view> |
||||
</view> |
||||
</view> |
||||
<view class="content-item pet-detail-photo-group"> |
||||
<view class="video-title"> |
||||
<image class="img" mode="heightFix" :src="staticImage.petPhotoTitle"/> |
||||
</view> |
||||
<view class="video-content row"> |
||||
<view class="photo-item col-4"> |
||||
<view class="photo-item-container"> |
||||
<view class="photo-content"> |
||||
<image class="img" mode="widthFix" :src="staticImage.wallpaperBgImage"/> |
||||
|
||||
</view> |
||||
<view class="photo-background"></view> |
||||
</view> |
||||
</view> |
||||
<view class="photo-item col-4"> |
||||
<view class="photo-item-container"> |
||||
<view class="photo-content"> |
||||
<image class="img" mode="widthFix" :src="staticImage.wallpaperBgImage"/> |
||||
|
||||
</view> |
||||
<view class="photo-background"></view> |
||||
</view> |
||||
</view> |
||||
<view class="photo-item col-4"> |
||||
<view class="photo-item-container"> |
||||
<view class="photo-content"> |
||||
<image class="img" mode="widthFix" :src="staticImage.wallpaperBgImage"/> |
||||
|
||||
</view> |
||||
<view class="photo-background"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="pet-detail-background"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="footer-menu row"> |
||||
<view class="footer-button col-6"> |
||||
<MzButton |
||||
title="删除" |
||||
button-color="#ffffff" |
||||
font-color="##262626" |
||||
button-width="250rpx" |
||||
> |
||||
</MzButton> |
||||
</view> |
||||
<view class="footer-button col-6" |
||||
@click="navTo('/pages/AddrDetail/index')"> |
||||
<MzButton |
||||
title="修改" |
||||
button-color="#4DC3B8" |
||||
font-color="#FFFFFF" |
||||
button-width="250rpx" |
||||
|
||||
> |
||||
</MzButton> |
||||
</view> |
||||
</view> |
||||
<!-- <RightNav></RightNav> --> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
||||
import FooterNav from '@/components/FooterNav/Index.vue'; |
||||
import RightNav from '@/components/RightNav/Index.vue'; |
||||
import MzButton from '@/components/MzButton/Index.vue'; |
||||
import api from '@/utils/functions.js'; |
||||
export default { |
||||
components: { |
||||
HeaderNav, |
||||
FooterNav, |
||||
RightNav, |
||||
MzButton |
||||
}, |
||||
data() { |
||||
return { |
||||
title: 'Hello', |
||||
loading: true, |
||||
staticImage: { |
||||
screenActiveImg: imghost + '/static/image/order-screen-active.png', |
||||
orderCardBackground: imghost + '/static/image/order-card-background.png', |
||||
wallpaperBgImage:imghost +'/static/image/background.png', |
||||
petGun:imghost +'/static/image/pet_gun.png', |
||||
petName:imghost +'/static/image/pet-detail-name.png', |
||||
petType:imghost +'/static/image/pet-detail-type.png', |
||||
petBirth:imghost +'/static/image/pet-detail-birthday.png', |
||||
petSex:imghost +'/static/image/pet-detail-sex.png', |
||||
petYm:imghost +'/static/image/pet-detail-ym.png', |
||||
petQc:imghost +'/static/image/pet-detail-qc.png', |
||||
petHome:imghost +'/static/image/pet-detail-home.png', |
||||
petBs:imghost +'/static/image/pet-detail-bs.png', |
||||
petVideoTitle:imghost +'/static/image/pet-detail-video-title.png', |
||||
petPhotoTitle:imghost +'/static/image/pet-detail-photo-title.png', |
||||
}, |
||||
indexBanner: [{ |
||||
image: imghost + '/static/image/banner.png', |
||||
url: '', |
||||
}], |
||||
user: { |
||||
avatar: imghost + '/static/image/banner.png', |
||||
nickname: '清晨的风', |
||||
coupons: 221, |
||||
id: 88685 |
||||
}, |
||||
isTop: false, |
||||
pagePadding: 100, |
||||
petImage: imghost + '/static/image/pet_avatar1.jpeg', |
||||
orderCardList:[ |
||||
{ |
||||
title:'成都市武侯区丰德国际4栋...', |
||||
tags:['刷毛','洗澡'], |
||||
do_time:'2023/05/03 15—17时', |
||||
create_time:'2023/03/03 15:23:22', |
||||
}, |
||||
{ |
||||
title:'成都市武侯区丰德国际4栋...', |
||||
tags:['刷毛','洗澡'], |
||||
do_time:'2023/05/03 15—17时', |
||||
create_time:'2023/03/03 15:23:22', |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
onLoad() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
onPageScroll(res) { |
||||
if(res.scrollTop <= 20){ |
||||
uni.$emit('isTop', true); |
||||
}else{ |
||||
uni.$emit('isTop', false); |
||||
} |
||||
}, |
||||
created() { |
||||
this.pagePadding = (api.navHeight().navPaddingTop + |
||||
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/index.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue