|
|
@@ -12,11 +12,11 @@
|
|
|
<template v-if="ready">
|
|
|
<div class="box-tool d-flex align-center justify-center">
|
|
|
<div class="item" @click="handleTake">
|
|
|
- <v-icon color="#000" size="36">mdi mdi-camera</v-icon>
|
|
|
+ <v-icon color="#FFF" size="36">mdi mdi-camera</v-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="close" @click="$emit('close')">
|
|
|
- <v-icon color="#000" size="36">mdi mdi-close-circle</v-icon>
|
|
|
+ <v-icon color="#FFF" size="36">mdi mdi-close-circle</v-icon>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -26,12 +26,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <v-overlay :value="loading" opacity="0">
|
|
|
+ <!-- <v-overlay :value="loading" opacity="0">
|
|
|
<div class="loader">
|
|
|
<svg viewBox="0 0 80 80">
|
|
|
<rect height="64" width="64" y="8" x="8"></rect>
|
|
|
</svg>
|
|
|
</div>
|
|
|
+ </v-overlay> -->
|
|
|
+ <v-overlay :value="loading" opacity="0">
|
|
|
+ <div class="cover">
|
|
|
+ <div class="cover-move"></div>
|
|
|
+ </div>
|
|
|
</v-overlay>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -46,7 +51,7 @@ export default {
|
|
|
videoStream: null,
|
|
|
animationId: null,
|
|
|
src: '',
|
|
|
- loading: true,
|
|
|
+ loading: false,
|
|
|
ready: false,
|
|
|
faceShape: '',
|
|
|
showImg: false,
|
|
|
@@ -205,27 +210,57 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.cover {
|
|
|
+ @width: 300px;
|
|
|
+ @height: 350px;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ margin: 0 auto;
|
|
|
+ @color: #FFF;
|
|
|
+ background: linear-gradient(@color, @color) left top,
|
|
|
+ linear-gradient(@color, @color) left top,
|
|
|
+ linear-gradient(@color, @color) right top,
|
|
|
+ linear-gradient(@color, @color) right top,
|
|
|
+ linear-gradient(@color, @color) left bottom,
|
|
|
+ linear-gradient(@color, @color) left bottom,
|
|
|
+ linear-gradient(@color, @color) right bottom,
|
|
|
+ linear-gradient(@color, @color) right bottom;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 8px 24px, 24px 8px;
|
|
|
+ position: relative;
|
|
|
+ &-move {
|
|
|
+ height: 10px;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ position: absolute;
|
|
|
+ background: linear-gradient(45deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
|
|
|
+ animation: pathTriangle 1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes pathTriangle {
|
|
|
+ 0% {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: calc(@height - 10px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.faceRecognition {
|
|
|
font-size: 14px;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
- // background: #000;
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
margin: 0 auto;
|
|
|
- max-width: 600px;
|
|
|
+ width: 480px;
|
|
|
+ background: #000;
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
- // &-tool {
|
|
|
- // position: fixed;
|
|
|
- // width: calc(100% - 600px);
|
|
|
- // height: 100%;
|
|
|
- // right: 0;
|
|
|
- // top: 0;
|
|
|
- // font-size: 16px;
|
|
|
- // }
|
|
|
&-tool {
|
|
|
position: absolute;
|
|
|
height: 150px;
|
|
|
@@ -233,7 +268,6 @@ export default {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
font-size: 16px;
|
|
|
- // background: rgba(0, 0, 0, .5);
|
|
|
.item {
|
|
|
padding: 10px;
|
|
|
border: 1px solid #999;
|
|
|
@@ -268,163 +302,4 @@ export default {
|
|
|
background: greenyellow;
|
|
|
}
|
|
|
|
|
|
-/* From Uiverse.io by mobinkakei */
|
|
|
-.loader {
|
|
|
- --path: #FFF;
|
|
|
- --dot: #141e8c;
|
|
|
- --duration: 3s;
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.loader:before {
|
|
|
- content: "";
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- background: var(--dot);
|
|
|
- top: 37px;
|
|
|
- left: 19px;
|
|
|
- transform: translate(-18px, -18px);
|
|
|
- animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
|
- infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loader svg {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.loader svg rect,
|
|
|
-.loader svg polygon,
|
|
|
-.loader svg circle {
|
|
|
- fill: none;
|
|
|
- stroke: var(--path);
|
|
|
- stroke-width: 10px;
|
|
|
- stroke-linejoin: round;
|
|
|
- stroke-linecap: round;
|
|
|
-}
|
|
|
-
|
|
|
-.loader svg polygon {
|
|
|
- stroke-dasharray: 145 76 145 76;
|
|
|
- stroke-dashoffset: 0;
|
|
|
- animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
|
- infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loader svg rect {
|
|
|
- stroke-dasharray: 192 64 192 64;
|
|
|
- stroke-dashoffset: 0;
|
|
|
- animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loader svg circle {
|
|
|
- stroke-dasharray: 150 50 150 50;
|
|
|
- stroke-dashoffset: 75;
|
|
|
- animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
|
- infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loader.triangle {
|
|
|
- width: 48px;
|
|
|
-}
|
|
|
-
|
|
|
-.loader.triangle:before {
|
|
|
- left: 21px;
|
|
|
- transform: translate(-10px, -18px);
|
|
|
- animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
|
- infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes pathTriangle {
|
|
|
- 33% {
|
|
|
- stroke-dashoffset: 74;
|
|
|
- }
|
|
|
-
|
|
|
- 66% {
|
|
|
- stroke-dashoffset: 147;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- stroke-dashoffset: 221;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes dotTriangle {
|
|
|
- 33% {
|
|
|
- transform: translate(0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- 66% {
|
|
|
- transform: translate(10px, -18px);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: translate(-10px, -18px);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes pathRect {
|
|
|
- 25% {
|
|
|
- stroke-dashoffset: 64;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- stroke-dashoffset: 128;
|
|
|
- }
|
|
|
-
|
|
|
- 75% {
|
|
|
- stroke-dashoffset: 192;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- stroke-dashoffset: 256;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes dotRect {
|
|
|
- 25% {
|
|
|
- transform: translate(0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- transform: translate(18px, -18px);
|
|
|
- }
|
|
|
-
|
|
|
- 75% {
|
|
|
- transform: translate(0, -36px);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: translate(-18px, -18px);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes pathCircle {
|
|
|
- 25% {
|
|
|
- stroke-dashoffset: 125;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- stroke-dashoffset: 175;
|
|
|
- }
|
|
|
-
|
|
|
- 75% {
|
|
|
- stroke-dashoffset: 225;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- stroke-dashoffset: 275;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.loader {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 16px;
|
|
|
-}
|
|
|
-
|
|
|
</style>
|
zhengnaiwen_citu
