Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 accf23df 作者: 吴佳伟
操作

fix: 打开APP时，服务协议和隐私政策弹窗风格与APP内弹窗风格保持一致；

上级 8e39ceea
正在显示 包含 165 行增加 和 51 行删除
src/pages/login/login.vue
...@@ -196,13 +196,14 @@ ...@@ -196,13 +196,14 @@
model.show = false model.show = false
}) })
function onReadConfirm(val) { function handleConfirm() {
if (val.index === 0) {
model.form.data.read = false
} else {
model.form.data.read = true model.form.data.read = true
login() login()
readConfirmShow.value = false
} }
function handleCancel() {
model.form.data.read = false
readConfirmShow.value = false readConfirmShow.value = false
} }
</script> </script>
...@@ -240,8 +241,7 @@ ...@@ -240,8 +241,7 @@
backgroundColor="transparent" backgroundColor="transparent"
borderColor="transparent" borderColor="transparent"
maxlength="11" maxlength="11"
> />
</fui-input>
</view> </view>
<view class="user_phone mt50"> <view class="user_phone mt50">
<image class="user_phone_img" src="/static/images/register/sms.png" /> <image class="user_phone_img" src="/static/images/register/sms.png" />
...@@ -283,7 +283,6 @@ ...@@ -283,7 +283,6 @@
:loading="model.loading" :loading="model.loading"
/> />
</view> </view>
</view> </view>
</fui-form> </fui-form>
...@@ -303,14 +302,14 @@ ...@@ -303,14 +302,14 @@
@change="(e) => (model.form.data.read = e.checked)" @change="(e) => (model.form.data.read = e.checked)"
style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx" style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx"
/> />
<text style="color: #999;;font-size:28rpx;">已阅读并同意</text> <text style="color: #999; font-size: 28rpx">已阅读并同意</text>
</fui-label> </fui-label>
<fui-text <fui-text
@tap="Link.to(Link.services, '服务协议')" @tap="Link.to(Link.services, '服务协议')"
size="28rpx" size="28rpx"
text="《服务协议》" text="《服务协议》"
color="#4da25b" color="#4da25b"
/><text style="color: #999;;font-size:28rpx;">与</text> /><text style="color: #999; font-size: 28rpx">与</text>
<fui-text <fui-text
@tap="Link.to(Link.privacy, '隐私政策')" @tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx" size="28rpx"
...@@ -324,26 +323,41 @@ ...@@ -324,26 +323,41 @@
<fui-safe-area /> <fui-safe-area />
</view> </view>
</fui-checkbox-group> </fui-checkbox-group>
<fui-modal <view class="confirm-dialog-overlay" v-show="readConfirmShow">
:show="readConfirmShow" <view class="confirm-dialog-container">
title="服务协议及隐私保护" <!-- 标题 -->
:buttons="[ <view class="dialog-title">服务协议及隐私保护</view>
{ text: '不同意', plain: true },
{ text: '同意', plain: false, color: '#fff' }, <!-- 内容 -->
]" <view class="dialog-content">
@click="onReadConfirm"
>
<text class="fui-descr"> <text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text> <text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text <fui-text
@tap="Link.to(Link.services, '服务协议')" @tap="Link.to(Link.services, '服务协议')"
size="28rpx" size="28rpx"
text="《服务协议》" text="《服务协议》"
color="#1890FF" color="#4da25b"
/>和 />和
<fui-text @tap="Link.to(Link.privacy, '隐私政策')" size="28rpx" text="《隐私政策》" color="#1890FF" /> <fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</text> </text>
</fui-modal> </view>
<!-- 按钮组 -->
<view class="dialog-buttons">
<view class="cancel-btn" @click="handleCancel">
<text class="cancel-text">不同意</text>
</view>
<view class="confirm-btn" @click="handleConfirm">
<text class="confirm-text">同意</text>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
...@@ -366,36 +380,36 @@ ...@@ -366,36 +380,36 @@
block-size: 100% 100%; block-size: 100% 100%;
background-color: #fafefc; background-color: #fafefc;
.login_top_bg{ .login_top_bg {
width:750rpx; width: 750rpx;
height:1324rpx; height: 1324rpx;
position:absolute; position: absolute;
left:0rpx; left: 0rpx;
top:0rpx; top: 0rpx;
} }
.login_top_warp{ .login_top_warp {
width:750rpx; width: 750rpx;
height:482rpx; height: 482rpx;
position: relative; position: relative;
.login_hello{ .login_hello {
position: absolute; position: absolute;
left: 50rpx; left: 50rpx;
top: 226rpx; top: 226rpx;
color: rgb(51 51 51 / 100%); color: rgb(51 51 51 / 100%);
.text_hello{ .text_hello {
font-size: 32rpx; font-size: 32rpx;
font-weight: 400; font-weight: 400;
letter-spacing: 0rpx; letter-spacing: 0rpx;
line-height: 40rpx; line-height: 40rpx;
} }
.login_server_name{ .login_server_name {
margin-top:32rpx; margin-top: 32rpx;
.text_server_name{ .text_server_name {
font-size: 40rpx; font-size: 40rpx;
font-weight: 500; font-weight: 500;
letter-spacing: 0rpx; letter-spacing: 0rpx;
...@@ -405,31 +419,31 @@ ...@@ -405,31 +419,31 @@
} }
} }
.login_content{ .login_content {
display:flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap:wrap; flex-wrap: wrap;
position: relative; position: relative;
.login-input-area{ .login-input-area {
width: 650rpx; width: 650rpx;
// border:1rpx red solid; // border:1rpx red solid;
.user_phone{ .user_phone {
display:flex; display: flex;
align-items: center; align-items: center;
.user_phone_img{ .user_phone_img {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
} }
.user_text_view{ .user_text_view {
margin-left:12rpx; margin-left: 12rpx;
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
.view_text{ .view_text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
letter-spacing: 0rpx; letter-spacing: 0rpx;
...@@ -437,19 +451,19 @@ ...@@ -437,19 +451,19 @@
} }
} }
.input-bottom-border{ .input-bottom-border {
border-bottom: 2rpx #eee solid; border-bottom: 2rpx #eee solid;
} }
.mt50{ .mt50 {
margin-top:50rpx; margin-top: 50rpx;
} }
} }
} }
.submit_btn_view{ .submit_btn_view {
margin-top:120rpx; margin-top: 120rpx;
width:650rpx; width: 650rpx;
} }
.fui-descr { .fui-descr {
...@@ -505,4 +519,104 @@ ...@@ -505,4 +519,104 @@
color: cadetblue; color: cadetblue;
} }
} }
.confirm-dialog-overlay {
position: fixed;
inset: 0;
background-color: rgb(0 0 0 / 50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.confirm-dialog-container {
position: relative;
width: 600rpx;
background: linear-gradient(180deg, #e8f5e9 0%, #fff 30%);
border-radius: 32rpx;
padding: 60rpx 48rpx 48rpx;
box-shadow: 0 8rpx 32rpx rgb(0 0 0 / 10%);
}
.close-btn {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.close-icon {
font-size: 36rpx;
color: #999;
font-weight: 300;
}
.dialog-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 32rpx;
}
.dialog-content {
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 40rpx;
margin-bottom: 48rpx;
}
.dialog-buttons {
display: flex;
gap: 24rpx;
}
.cancel-btn,
.confirm-btn {
flex: 1;
height: 80rpx;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cancel-btn {
background-color: #fff;
border: 2rpx solid #5db66f;
}
.cancel-text {
font-size: 28rpx;
color: #5db66f;
font-weight: 500;
}
.confirm-btn {
background: linear-gradient(135deg, #5db66f 0%, #4caf50 100%);
box-shadow: 0 4rpx 12rpx rgb(93 182 111 / 30%);
}
.confirm-text {
font-size: 28rpx;
color: #fff;
font-weight: 500;
}
.cancel-btn:active {
opacity: 0.8;
}
.confirm-btn:active {
opacity: 0.9;
transform: scale(0.98);
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论