提交 efe8df63 authored 作者: 羊富学's avatar 羊富学

丰谷页面调整

上级 a1371ca1
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
"pages/upload/upload", "pages/upload/upload",
"pages/anti/anti", "pages/anti/anti",
"pages/fenggu/AICheck/AICheck", "pages/fenggu/AICheck/AICheck",
"pages/fenggu/takephoto/takephoto" "pages/fenggu/takephoto/takephoto",
"pages/fenggu/success/success"
], ],
"window": { "window": {
"backgroundTextStyle": "light", "backgroundTextStyle": "light",
......
assets/fenggu/开始认证.png

4.8 KB | W: | H:

assets/fenggu/开始认证.png

4.6 KB | W: | H:

assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -5,7 +5,7 @@ Page({ ...@@ -5,7 +5,7 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
showMask:true
}, },
/** /**
...@@ -15,6 +15,18 @@ Page({ ...@@ -15,6 +15,18 @@ Page({
}, },
// 关闭遮罩层
closeMask() {
this.setData({
showMask:false
})
},
// 联系客服
handleServe(){
console.log(999)
},
/** /**
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面初次渲染完成
*/ */
......
<view class="AICheck"> <view class="AICheck">
<image src="/assets/fenggu/ai认证背景.jpg" class="bgImage" /> <image src="/assets/fenggu/ai认证背景.jpg" class="bgImage" />
<view class="content-box"> <view class="content-box">
<image src="/assets/fenggu/logo.png" mode="widthFix" class="logo-img"/> <image src="/assets/fenggu/logo.png" mode="widthFix" class="logo-img" />
<image src="/assets/fenggu/AI.png" mode="widthFix" class="ai-img"/> <image src="/assets/fenggu/AI.png" mode="widthFix" class="ai-img" />
<image src="/assets/fenggu/开始认证.png" mode="widthFix" style="width: 400rpx;"/> <image src="/assets/fenggu/开始认证.png" mode="widthFix" style="width: 400rpx;" />
</view>
<!-- 验证不同遮罩层 -->
<view wx:if="{{showMask}}" class="mask">
<!-- 未通过 -->
<view class="fali mask-card" wx:if="{{false}}">
<image src="/assets/fenggu/未通过卡片.png" mode="widthFix" />
<view class="content">
<view class="top">
<view class="reason">
<text>未通过</text>
<text>请重新认证!</text>
</view>
<image bind:tap="closeMask" src="/assets/fenggu/关闭.png" mode="widthFix" style="width: 50rpx;" />
</view>
<view class="text">
请保证相机稳定,检查标签码<text style="font-weight: 700;">是否有破损,并前往光照适宜的环境进行验证。</text>
</view>
<view class="btn-box">
<text class="link">验证流程有疑问?点击跳转</text>
<view class="btn" style="background-color: #FFB44C;">重新验证</view>
</view>
</view>
</view>
<!-- 不是标签 -->
<view class="fali mask-card" wx:if="{{true}}" >
<image src="/assets/fenggu/不是标签卡片.png" mode="widthFix" />
<view class="content">
<view class="top">
<view class="reason">
<text>请注意此标签</text>
<text>可能存在问题!</text>
</view>
<image bind:tap="closeMask" src="/assets/fenggu/关闭.png" mode="widthFix" style="width: 50rpx;" />
</view>
<view class="text">
请确认标签<text style="font-weight: 700;">是否在电子设备上进行识别</text>,可结合标签物理触感进行二次验证,<text bind:tap="handleServe" style="color: #1340E7;text-decoration: underline;">可点击联系客服</text>必要时处理。
</view>
<view class="btn-box">
<text class="link">验证流程有疑问?点击跳转</text>
<view class="btn" style="background-color: #FF7E7E;">重新验证</view>
</view>
</view>
</view>
</view> </view>
</view> </view>
\ No newline at end of file
...@@ -32,3 +32,79 @@ ...@@ -32,3 +32,79 @@
margin: 100rpx 0; margin: 100rpx 0;
width: 450rpx; width: 450rpx;
} }
.AICheck .mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.6);
box-sizing: border-box;
}
.mask-card {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
}
.mask-card image {
width: 100%;
}
.mask-card .content {
position: absolute;
top: 0;
left: 0;
padding: 50rpx;
width: 100%;
height: 100%;
z-index: 99999;
box-sizing: border-box;
}
.mask-card .content .top {
display: flex;
justify-content:space-between;
}
.mask-card .content .reason {
display: flex;
flex-direction: column;
font-size: 40rpx;
}
.mask-card .content .text {
margin: 80rpx 0;
line-height: 48rpx;
}
.mask-card .content .btn-box {
text-align: center;
}
.mask-card .content .btn-box {
display: flex;
flex-direction: column;
align-items: center;
}
.mask-card .content .btn-box .link {
font-size: 26rpx;
text-decoration: underline;
}
.mask-card .content .btn-box .btn {
margin: 20rpx;
font-size: 36rpx;
font-weight: 700;
width: 80%;
height: 80rpx;
line-height: 80rpx;
border-radius: 80rpx;
background-color: #FFB44C;
}
\ No newline at end of file
// pages/fenggu/success/success.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<view class="successPage">
<image src="/assets/fenggu/认证成功背景.jpg" style="height: 100%;width: 100%;"/>
<view class="content-box">
<view class="logo">
<image src="/assets/fenggu/logo.png" mode="widthFix" style="width: 280rpx;"/>
</view>
<view class="info">
<image src="/assets/fenggu/打勾.png" mode="widthFix" style="margin: 20rpx 0;width: 100rpx;"/>
<view class="text">
<view class="title tshadow">认证成功</view>
<view class="success-info">
<text class="tshadow" style="font-size: 34rpx;">该产品为丰谷酒业正品标识,请放心使用!</text>
<text style="font-size: 22rpx;">本次认证时间:2024年1月19日14:31:06 本次认证耗时:0.388S</text>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
.successPage {
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.content-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.logo {
padding: 40rpx 0 0 40rpx;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #FBBF30;
}
.info .text .title {
font-size: 50rpx;
}
.tshadow {
text-shadow: -10rpx 0 10rpx #333;
}
.info .text .success-info {
margin: 20rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论