|
@@ -146,11 +146,11 @@
|
|
|
<div
|
|
|
class="definition-box"
|
|
|
:style="{
|
|
|
- width: !(data.right.collocation && data.right.exampleSent) ? data.right.hz_info.length * 98 + 'px' : '',
|
|
|
- margin: !(data.right.collocation && data.right.exampleSent) ? '16px auto 0 auto' : '',
|
|
|
+ width: !(data.right.collocation || data.right.exampleSent) ? data.right.hz_info.length * 98 + 'px' : '',
|
|
|
+ margin: !(data.right.collocation || data.right.exampleSent) ? '16px auto 0 auto' : '',
|
|
|
}"
|
|
|
>
|
|
|
- <template v-if="!(data.right.collocation && data.right.exampleSent)">
|
|
|
+ <template v-if="!(data.right.collocation || data.right.exampleSent)">
|
|
|
<div v-if="data.right.cixing">
|
|
|
<label class="card-label">词性:</label>
|
|
|
<p>{{ data.right.cixing }}</p>
|
|
@@ -361,6 +361,7 @@ export default {
|
|
|
margin: 0 auto 19px auto;
|
|
|
// height: 842px;
|
|
|
box-sizing: border-box;
|
|
|
+ perspective: 1000px;
|
|
|
&-preview {
|
|
|
width: 600px;
|
|
|
}
|
|
@@ -369,7 +370,10 @@ export default {
|
|
|
display: flex;
|
|
|
column-gap: 8px;
|
|
|
perspective: 1000px;
|
|
|
- transition: transform 0.6s ease;
|
|
|
+ transition: 0.6s;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
.left,
|
|
|
.right {
|
|
|
width: 600px;
|
|
@@ -405,6 +409,8 @@ export default {
|
|
|
.left-preview {
|
|
|
padding-top: 40px;
|
|
|
padding-bottom: 32px;
|
|
|
+ // position: absolute;
|
|
|
+ backface-visibility: hidden;
|
|
|
}
|
|
|
.header-info-preview {
|
|
|
position: absolute;
|
|
@@ -567,7 +573,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.right-preview-rota {
|
|
|
- transform: rotateY(-180deg);
|
|
|
+ transform: rotateY(180deg);
|
|
|
}
|
|
|
.item-image {
|
|
|
position: relative;
|
|
@@ -760,7 +766,7 @@ export default {
|
|
|
transform: rotateY(180deg);
|
|
|
}
|
|
|
.flipped-back {
|
|
|
- transform: rotateY(0deg);
|
|
|
+ transform: rotateY(180deg);
|
|
|
}
|
|
|
}
|
|
|
</style>
|