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 @@
model.show = false
})
function onReadConfirm(val) {
if (val.index === 0) {
model.form.data.read = false
} else {
function handleConfirm() {
model.form.data.read = true
login()
readConfirmShow.value = false
}
function handleCancel() {
model.form.data.read = false
readConfirmShow.value = false
}
</script>
......@@ -240,8 +241,7 @@
backgroundColor="transparent"
borderColor="transparent"
maxlength="11"
>
</fui-input>
/>
</view>
<view class="user_phone mt50">
<image class="user_phone_img" src="/static/images/register/sms.png" />
......@@ -283,7 +283,6 @@
:loading="model.loading"
/>
</view>
</view>
</fui-form>
......@@ -303,14 +302,14 @@
@change="(e) => (model.form.data.read = e.checked)"
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-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/><text style="color: #999;;font-size:28rpx;">与</text>
/><text style="color: #999; font-size: 28rpx">与</text>
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
......@@ -324,26 +323,41 @@
<fui-safe-area />
</view>
</fui-checkbox-group>
<fui-modal
:show="readConfirmShow"
title="服务协议及隐私保护"
:buttons="[
{ text: '不同意', plain: true },
{ text: '同意', plain: false, color: '#fff' },
]"
@click="onReadConfirm"
>
<view class="confirm-dialog-overlay" v-show="readConfirmShow">
<view class="confirm-dialog-container">
<!-- 标题 -->
<view class="dialog-title">服务协议及隐私保护</view>
<!-- 内容 -->
<view class="dialog-content">
<text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
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>
</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>
</template>
......@@ -366,36 +380,36 @@
block-size: 100% 100%;
background-color: #fafefc;
.login_top_bg{
width:750rpx;
height:1324rpx;
position:absolute;
left:0rpx;
top:0rpx;
.login_top_bg {
width: 750rpx;
height: 1324rpx;
position: absolute;
left: 0rpx;
top: 0rpx;
}
.login_top_warp{
width:750rpx;
height:482rpx;
.login_top_warp {
width: 750rpx;
height: 482rpx;
position: relative;
.login_hello{
.login_hello {
position: absolute;
left: 50rpx;
top: 226rpx;
color: rgb(51 51 51 / 100%);
.text_hello{
.text_hello {
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
}
.login_server_name{
margin-top:32rpx;
.login_server_name {
margin-top: 32rpx;
.text_server_name{
.text_server_name {
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0rpx;
......@@ -405,31 +419,31 @@
}
}
.login_content{
display:flex;
.login_content {
display: flex;
justify-content: center;
flex-wrap:wrap;
flex-wrap: wrap;
position: relative;
.login-input-area{
.login-input-area {
width: 650rpx;
// border:1rpx red solid;
.user_phone{
display:flex;
.user_phone {
display: flex;
align-items: center;
.user_phone_img{
.user_phone_img {
width: 40rpx;
height: 40rpx;
}
}
.user_text_view{
margin-left:12rpx;
.user_text_view {
margin-left: 12rpx;
height: 40rpx;
line-height: 40rpx;
.view_text{
.view_text {
font-size: 30rpx;
font-weight: 500;
letter-spacing: 0rpx;
......@@ -437,19 +451,19 @@
}
}
.input-bottom-border{
.input-bottom-border {
border-bottom: 2rpx #eee solid;
}
.mt50{
margin-top:50rpx;
.mt50 {
margin-top: 50rpx;
}
}
}
.submit_btn_view{
margin-top:120rpx;
width:650rpx;
.submit_btn_view {
margin-top: 120rpx;
width: 650rpx;
}
.fui-descr {
......@@ -505,4 +519,104 @@
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论