diff --git a/App.vue b/App.vue index 7c86708..69f1c1c 100644 --- a/App.vue +++ b/App.vue @@ -1,4 +1,5 @@ @@ -95,7 +219,7 @@ export default { } } -.share { +.share-img { animation: jello-horizontal 3.2s both infinite; position: fixed; @@ -196,4 +320,128 @@ export default { } } } + +.share_cover { + background: rgba(0, 0, 0, 0.8); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100vh; + width: 100vw; + z-index: 100000; + + .share_cover_word { + color: #FFFFFF; + font-size: 48rpx; + width: 60%; + margin: 400rpx auto; + text-align: center; + line-height: 40px; + + } + + .share_cover_arrow { + position: absolute; + right: 0; + top: 0; + width: 300rpx; + height: 400rpx; + } +} +.share { + min-height: 100vh; + overflow-y: scroll; + + padding: 278rpx 0; + z-index: 2; + position: fixed; + top: 0; + left: 0; + right: 0; + + &-mask { + background: rgba(0, 0, 0, 0.4); + + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + &-page { + width: fit-content; + overflow: scroll; + + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + right: 0; + + &>image { + width: 520rpx; + height: auto; + display: block; + border: 6rpx solid #F8E3CF; + box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(19, 1, 2, 0.71); + + margin: auto; + } + + &__btn { + display: flex; + justify-content: center; + + padding-top: 52rpx; + + &>view { + width: 230rpx; + height: 66rpx; + background: linear-gradient(0deg, #EFC495, #E9BC8A); + border-radius: 34rpx; + text-align: center; + font-weight: 400; + line-height: 66rpx; + font-size: 26rpx; + letter-spacing: 8rpx; + color: #C93E31; + } + + &--share { + + margin-right: 60rpx; + } + } + } +} +.fade-in { + animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fade-out { + animation: fade-out .8s ease-out both; +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/static/toShare.png b/static/toShare.png new file mode 100644 index 0000000..034b062 Binary files /dev/null and b/static/toShare.png differ