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