7 changed files with 169 additions and 0 deletions
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<view class="wrapper"> |
|||
<view class="nav_area"> |
|||
<image src="../../static/pay/left.png" mode="" style="width: 50rpx;height: 50rpx;"></image> |
|||
<image src="../../static/pay/help.png" mode="" style="width: 40rpx;height: 40rpx;"></image> |
|||
</view> |
|||
<view class="icon_area"> |
|||
<image src="../../static/pay/success.png" mode="" class="success_icon"></image> |
|||
<view class="success_txt">支付成功</view> |
|||
</view> |
|||
<view class="content_area"> |
|||
<view class=""> |
|||
<view class="title">请根据指引下载安装</view> |
|||
<view class="subtitle">请根据指引步骤进行国家文化专网网络入网应用安装</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="s_title">1.应用下载</view> |
|||
<view class="down_area"> |
|||
<view class="down_item"> |
|||
<view class="left_icon"></view> |
|||
<view class="down_link">国家文化专网网络应用入口</view> |
|||
<view class="right_icon" @click="download(1)"></view> |
|||
</view> |
|||
<view class="down_item"> |
|||
<view class="left_icon"></view> |
|||
<view class="down_link">手机绑定关联程序</view> |
|||
<view class="right_icon" @click="download(2)"></view> |
|||
</view> |
|||
</view> |
|||
<view class="s_title">2.输入设备安装码</view> |
|||
<view class=""> |
|||
<input type="text" v-model="installationCode" placeholder="请输入" placeholder-style="color: #B7B7B7;" class="input_box"> |
|||
</view> |
|||
<view class="s_title">3.交易中心账号绑定</view> |
|||
<view class=""> |
|||
<input type="text" v-model="account" placeholder="默认为注册手机号" placeholder-style="color: #B7B7B7;" class="input_box"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="footer_area"> |
|||
<button class="btn" @click="submit()">提交</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
installationCode: '', |
|||
account: '', |
|||
} |
|||
}, |
|||
methods: { |
|||
download(type){ |
|||
|
|||
}, |
|||
submit(){ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.wrapper{ |
|||
color: #101010; |
|||
padding-bottom: 160rpx; |
|||
} |
|||
.nav_area{ |
|||
height: 94rpx; |
|||
padding: 0px 50rpx; |
|||
padding-top: var(--status-bar-height); |
|||
margin-bottom: 24rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.icon_area{ |
|||
text-align: center; |
|||
} |
|||
.success_icon{ |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
} |
|||
.success_txt{ |
|||
font-size: 20px; |
|||
margin: 20px 0px 35px; |
|||
} |
|||
.content_area{ |
|||
padding: 0px 50rpx; |
|||
} |
|||
.title{ |
|||
font-size: 26px; |
|||
font-weight: bold; |
|||
line-height: 50px; |
|||
} |
|||
.subtitle{ |
|||
color: #999; |
|||
font-size: 13px; |
|||
margin-bottom: 26px; |
|||
} |
|||
.s_title{ |
|||
font-size: 16px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.down_area{ |
|||
margin-bottom: 10px; |
|||
} |
|||
.down_item{ |
|||
height: 70rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.left_icon{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-image: url("../../static/pay/install.png"); |
|||
background-size: cover; |
|||
} |
|||
.down_link{ |
|||
font-size: 12px; |
|||
flex: 1; |
|||
margin: 0px 40rpx; |
|||
} |
|||
.right_icon{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-image: url("../../static/pay/download.png"); |
|||
background-size: cover; |
|||
} |
|||
.input_box{ |
|||
width: 640rpx; |
|||
height: 90rpx; |
|||
padding: 0px 40rpx; |
|||
box-sizing: border-box; |
|||
background-color: #f8f8f8; |
|||
font-size: 14px; |
|||
margin-bottom: 26px; |
|||
} |
|||
.footer_area{ |
|||
width: 100vw; |
|||
height: 100rpx; |
|||
position: fixed; |
|||
bottom: 60rpx; |
|||
left: 0px; |
|||
} |
|||
.footer_area .btn{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
color: #fff; |
|||
background-color: #10476E; |
|||
border-radius: 0px; |
|||
line-height: 100rpx; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 818 B |
|
After Width: | Height: | Size: 810 B |
|
After Width: | Height: | Size: 365 B |
|
After Width: | Height: | Size: 238 B |
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Reference in new issue