This commit is contained in:
X1627315083
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions

View File

@@ -17,7 +17,6 @@
<div>{{ $t('Cropper.Cutpicture') }}</div>
</div>
<div class="header_right_block" @click.stop="">
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
</div>
</div>
@@ -54,7 +53,7 @@
<div class="review_logo icon iconfont icon-yulan"></div>
<div>{{ $t('Cropper.CropPreview') }}</div>
</div>
<div class="cut_picture_review_block">
<div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
<div class="cut_picture_review_item">
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div">
@@ -62,6 +61,10 @@
</div>
</div>
</div>
<div class="next_step_button" @click.stop="finishCropper()">
<!-- <i class="fi fi-rr-check"></i> -->
<i class="fi fi-sr-check-circle"></i>
</div>
<!-- <div class="cut_picture_review_item">
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" >
@@ -206,11 +209,10 @@ export default defineComponent({
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
// background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
background: #000;
color: #fff;
border-radius: calc(1.6rem*1.2);
font-size: calc(1.4rem*1.2);
color: #000;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
@@ -237,10 +239,16 @@ export default defineComponent({
// background: #F2F3FB;
display: flex;
justify-content: space-between;
align-items: center;
.cut_picture_right,.cut_picture_left{
display: flex;
flex-direction: column;
height: 80%;
}
.cut_picture_left{
width: calc(70.7rem*1.2);
height: 100%;
// height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
@@ -301,12 +309,12 @@ export default defineComponent({
.cut_picture_right{
// width: 39.2rem;
width: calc(52rem*1.2);
height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
margin-block: -5rem;
.cur_picture_right_header{
padding: calc(2rem*1.2);
// padding: calc(2rem*1.2);
padding: 2rem;
display: flex;
align-items: center;
font-size: var(--aida-fsize1-8);
@@ -324,9 +332,25 @@ export default defineComponent({
.cut_picture_review_block{
width: 100%;
padding: 0 calc(2rem*1.2);
height: calc(100% - 6.8rem*1.2);
margin: 0 auto;
.next_step_button{
margin-top: 2rem;
i{
display: flex;
// height: 4rem;
// width: 4rem;
// background: #000;
// color: #fff;
font-weight: 900;
border-radius: 50%;
font-size: 4rem;
align-items: center;
justify-content: center;
margin: 0 auto;
cursor: pointer;
}
}
.cut_picture_review_item{
width: 100%;
// height: 50%;
@@ -338,7 +362,7 @@ export default defineComponent({
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.8) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);
background: rgba(91,94,105,0.8);
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: calc(1rem*1.2);