This commit is contained in:
2023-09-26 16:54:38 +08:00
parent 4eb53058ca
commit 47af2611c1
7 changed files with 244 additions and 366 deletions

View File

@@ -1,148 +1,18 @@
/* 返回上一页 */
.navigation{
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 90rpx;
background-color: transparent;
transition: .2s;
}
.navigation.active {
background-color: transparent;
}
.navigation-arrow {
width: 44rpx;
height: 44rpx;
margin: 20rpx 15rpx 0 20rpx;
}
/* 二维码 */
.code {
width: 100vw;
height: 100vh;
position: relative;
}
.code-back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.code-cont {
width: 400rpx;
position: absolute;
z-index: 9;
text-align: center;
left: 0;
bottom: 30%;
}
.code-img{
margin: 0 auto 20rpx;
overflow: hidden;
width: 260rpx;
height: 260rpx;
border: 4rpx solid #144592;
background-color: #ffffff;
padding: 10rpx;
box-sizing: border-box;
}
.code-img image {
width: 100%;
}
.code-text {
color: #144592;
font-size: 28rpx;
font-weight: 600;
}
.code-share {
position: absolute;
z-index: 10;
left: 0;
bottom: 13%;
background: linear-gradient(to right, #3f7fff, #568fff);
width: 50rpx;
text-align: center;
border-radius: 0 26rpx 26rpx 0;
padding: 30rpx 15rpx 30rpx 12rpx;
box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .2);
}
.code-share-name {
writing-mode:vertical-rl;
font-size: 30rpx;
padding-left: 4rpx;
color: #fff;
}
.code-share image {
width: 36rpx;
height: 36rpx;
margin-bottom: 5rpx;
}
.sharePop {
position: fixed;
width: 100%;
z-index: 99;
left: 0;
bottom: 0;
background-color: #0a1930;
display: none;
}
.sharePop.active {
display: block;
}
.shareCont-label image {
width: 60rpx;
height: 60rpx;
display: block;
margin: 0 auto 10rpx;
}
.shareCancel {
border-top: 2rpx solid #0e2c58;
color: #ffffff;
width: 100%;
text-align: center;
line-height: 100rpx;
}
.shareCont{
display: flex;
padding: 30rpx 0;
}
.shareCont-label {
color: #ffffff;
flex: 2;
text-align: center;
font-size: 28rpx;
}
.codeShare-button {
background-color: transparent;
padding: 0;
font-weight: normal;
}
/* canvas */
.canvas-img {
position: fixed;
left: -10000%;
top: 0;
z-index: 99;
}
.content{ display: flex; align-items: center; flex-direction: column; justify-content: center; background: white; box-shadow: brown; min-height: 100vh;}
/* 海报预览 */
.poster{ width: 550rpx; height: 900rpx; background: white; box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .05); border-radius: 20rpx; overflow: hidden; }
.poster-item{ width: 550rpx; height: 900rpx; background-position: center; background-size: cover; position: relative; }
.poster-qrocde{ position: absolute; background-color: white; padding: 10rpx; border-radius: 50%;}
/* 分享功能 */
.tool{ display: flex; align-items: center; justify-content: space-around; width: 70vw; margin-top: 80rpx; }
.tool-item{ text-align: center; }
.tool-item[size="mini"]{ padding: 0; margin: 0; background-color: transparent; }
.tool-icon{ background: #f7f8f9; width: 88rpx; height: 88rpx; border-radius: 50%; vertical-align: top; }
.tool-text{ color: gray; font-size: 30rpx; line-height: 40rpx; margin-top: 10rpx; font-weight: normal;}
/* canvas */
.canvas{ background: #ddd; position: absolute; top: 0; left:-200%; }