zhangjing/xuan_wechat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[最新]

Browse Source
This commit is contained in:
张慢慢
2023-09-15 17:14:36 +08:00
parent 0dcf23bfde
commit a626d36591
22 changed files with 383 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/user/code/code.wxss
View File

@@ -1,31 +1,19 @@
/* 返回上一页 */
.navigation{ position: fixed; top: 0; left: 0; z-index: 9; 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: calc(50% - 200rpx); bottom: 8vh; }
.code-img{ margin: 0 auto 20rpx; overflow: hidden; width: 260rpx; height: 260rpx; border: 4rpx solid #ff4f64; background-color: #ffffff; padding: 10rpx; box-sizing: border-box; border-radius: 50%; }
.code-img image { width: 100%; }
.code-text { color: #ffffff; font-size: 30rpx; }
.content{ display: flex; align-items: center; flex-direction: column; justify-content: center; background: white; box-shadow: brown; min-height: 100vh;}
/* 海报分享 */
.code-share { position: absolute; right: 0; bottom: 15%; background: linear-gradient(to right, #fffafb, #ffd4dd); width: 50rpx; text-align: center; border-radius: 26rpx 0 0 26rpx; padding: 30rpx 10rpx 30rpx 15rpx; box-shadow: 0 0 0 6rpx rgba(249, 96, 116, .8); z-index: 9;
}
.code-share-name { writing-mode:vertical-rl; font-size: 30rpx; padding-left: 4rpx; color: #da2b54; }
.code-share image { width: 36rpx; height: 36rpx; margin-bottom: 5rpx; }
/* 海报预览 */
.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; border-radius: 50%; padding: 10rpx; }
.poster-name{ position: absolute; z-index: 999; text-align: center;}
/* 弹出层 */
.sharePop-lay{ background: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; right: 0; height: 100vh; width: 100vw; z-index: 9; display: none; }
.sharePop-lay.active{ display: block; }
.sharePop { position: fixed; width: 100%; z-index: 99; left: 0; bottom: 0; background-color: #ffffff; }
.shareCont-label image { width: 60rpx; height: 60rpx; display: block; margin: 0 auto 10rpx; }
.shareCancel { border-top: 2rpx solid #ebebeb; color: #000000; width: 100%; text-align: center; line-height: 100rpx; }
.shareCont{ display: flex; padding: 30rpx 0; }
.shareCont-label { color: #000000; flex: 2; text-align: center; font-size: 28rpx; }
.codeShare-button { background-color: transparent; padding: 0; font-weight: normal; }
/* 分享功能 */
.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; }
/* canvas */
.canvas-img { position: fixed; left: 0%; left: -100%; top: 0; z-index: -1; }
.canvas{ background: #ddd; position: absolute; top: 0; left:-200%; }