detail preview可以设置空颜色

This commit is contained in:
X1627315083
2025-05-08 14:09:12 +08:00
parent a4e040d0ff
commit 610e715ca7
30 changed files with 1323 additions and 6496 deletions

View File

@@ -1,7 +1,16 @@
<template>
<div class="loginPage">
<div class="left">
<Works :isScroll="true" :position="'login'"></Works>
<Works :isScroll="!isMask" :position="'login'"></Works>
<div class="mask" v-show="isMask" @click="()=>isMask = !isMask">
<div class="content">
<div class="userNum">
<div class="title">5 000 000 +</div>
<div>HAPPY USERS</div>
</div>
<div class="info">Millions trust AI products every day</div>
</div>
</div>
</div>
<div class="right">
<div class="Text" v-show="!loginType">
@@ -14,9 +23,9 @@
Continue with one of these:
</div>
<div class="typeList">
<div class="gallery_btn" @click="setLoginType('personal')">personal</div>
<div class="gallery_btn" @click="setLoginType('school')">school</div>
<div class="gallery_btn" @click="setLoginType('enterprise')">enterprise</div>
<div class="gallery_btn white" @click="setLoginType('personal')">personal</div>
<div class="gallery_btn white" @click="setLoginType('school')">school</div>
<div class="gallery_btn white" @click="setLoginType('enterprise')">enterprise</div>
</div>
</div>
<div class="login" v-show="loginType">
@@ -57,6 +66,7 @@ export default defineComponent({
const store = useStore();
const loginData = reactive({
loginType:'',
isMask:true,
})
const dataDom = reactive({
})
@@ -87,6 +97,42 @@ export default defineComponent({
> .left{
width: 60%;
background: #f7f8fa;
position: relative;
> .mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .8) 100%);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
> .content{
text-align: center;
padding: 15rem;
//黑色径向渐变
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
.userNum{
line-height: 1;
margin-bottom: 3rem;
> .title{
font-size: 8rem;
font-weight: 900;
}
> div{
font-size: 3rem;
font-weight: 500;
}
}
> .info{
font-size: 4rem;
font-weight: 500;
}
}
}
}
> .right{
display: flex;