5 changed files with 139 additions and 13 deletions
-
8src/pages.json
-
16src/pages/site/confirm/confirm.vue
-
111src/pages/site/occupy_share/occupy_share.vue
-
17src/pages/site/occupy_success/occupy_success.vue
-
BINsrc/static/images/icon/share_arrow_cff.png
@ -0,0 +1,111 @@ |
|||||
|
<template> |
||||
|
<view class="occupy-share"> |
||||
|
<view class="os-address"> |
||||
|
<view class="oa-name"> |
||||
|
<image></image> |
||||
|
<view>欧轩智能场馆(羽毛球馆永泰店)</view> |
||||
|
</view> |
||||
|
<view class="oa-info"> |
||||
|
<view>地址:</view> |
||||
|
<view>广州市白云区永平街道学山塘街世联空间D2座5楼</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="os-section"> |
||||
|
<view class="os-des"> |
||||
|
<view>①<text>截图</text>该页面后,发此图给朋友 </view> |
||||
|
<view>② 朋友<text>长按此图</text>识别下面的二维码<text>关注公众号</text> </view> |
||||
|
<view>③ 接收微信消息,<text>领取入场码</text></view> |
||||
|
<view>④ 领取成功后<text>仅限本人使用</text></view> |
||||
|
</view> |
||||
|
<image class="os-code-img"></image> |
||||
|
<view class="os-tip">注:此码非入场码</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
page{ |
||||
|
background-color: $themeColor; |
||||
|
} |
||||
|
.occupy-share{ |
||||
|
padding-top: 32upx; |
||||
|
padding-left: 24upx; |
||||
|
padding-right: 24upx; |
||||
|
|
||||
|
} |
||||
|
.os-address{ |
||||
|
margin-bottom: 36upx; |
||||
|
.oa-name{ |
||||
|
margin-bottom: 20upx; |
||||
|
@include centerFlex(flex-start); |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
>view{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #fff; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
.oa-info{ |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
>view{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #fff; |
||||
|
&:first-child{ |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
&+view{ |
||||
|
flex-grow: 1; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.os-section{ |
||||
|
padding: 30upx 60upx 0; |
||||
|
height: 640upx; |
||||
|
overflow: hidden; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
flex-direction: column; |
||||
|
.os-des{ |
||||
|
margin-bottom: 16upx; |
||||
|
>view{ |
||||
|
line-height: 52upx; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
>text{ |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.os-code-img{ |
||||
|
margin-bottom: 12upx; |
||||
|
width: 300upx; |
||||
|
height: 300upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.os-tip{ |
||||
|
font-size: 24upx; |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
</style> |
After Width: 68 | Height: 72 | Size: 705 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue