ref: 切换翻译API

This commit is contained in:
muwoo
2021-07-20 14:10:39 +08:00
parent 7783d9520d
commit 8869931105
3 changed files with 72 additions and 30 deletions

View File

@@ -79,6 +79,50 @@
display: flex;
align-items: center;
}
.spinner {
padding-left: 10px;
}
.spinner > div {
width: 10px;
height: 10px;
background-color: #ddd;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<script src="./index.js" type="module"></script>
<body>
@@ -87,10 +131,22 @@
<span class="img"><img src="./assets/logo.png" /></span>
<span class="text" v-if="selectData.text && selectData.text.length">选择的文本 {{selectData.text.length}} 个</span>
</div>
<div class="translate" v-if="selectData.translate">
<div class="trans-item" v-for="trans in selectData.translate">
<div>{{trans.src}}</div>
<div>n. {{trans.dst}}</div>
<div class="spinner" v-if="loading">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div class="translate" v-if="selectData.translate && !loading">
<div>{{selectData.translate.src}}</div>
<div v-if="selectData.translate.basic">
<div v-for="item in selectData.translate.basic.explains">
{{item}}
</div>
</div>
<div v-else>
<div v-for="item in selectData.translate.transition">
{{item}}
</div>
</div>
</div>
<div @click="() => commonClick(op, selectData.fileUrl)" class="options-item" v-for="op in targetOptions">