bitdance-team/chrome-extension
1
0
Fork 0
mirror of https://gitee.com/bitdance-team/chrome-extension synced 2025-09-16 05:11:39 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

翻译样式优化

Browse Source
This commit is contained in:
zhneglili
2022-02-09 21:58:13 +08:00
parent b0bc86fff3
commit 52d973401d
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/shell-chrome/assets/css/tran.css
View File

@@ -4,10 +4,12 @@
} }
#trans{ #trans{
width: 280px; width: 280px;
height: 490px; height: 540px;
float: left; float: left;
margin-left: 10px; margin-left: 10px;
background-color: rgb(251, 252, 250); background-color: rgb(251, 252, 250);
border:2px solid rgb(251, 252, 250);
border-radius:25px ;
} }
#trans_header{ #trans_header{
width: 300px; width: 300px;
@@ -50,6 +52,7 @@ border:none
height: 170px; height: 170px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#middleTans{ #middleTans{
font-size: 15px; font-size: 15px;
margin-bottom: 5px; margin-bottom: 5px;
@@ -71,5 +74,7 @@ border:none
color: azure; color: azure;
} }
#outPutRes{ #outPutRes{
width: 280px;
} height: 230px;
overflow:auto;
}

21
packages/shell-chrome/assets/js/translate/tran.js
View File

@@ -6,7 +6,7 @@ var BitTarnsDiv = document.createElement("div")
BitTarnsDiv.id = "BitTarnsDivId" BitTarnsDiv.id = "BitTarnsDivId"
document.body.appendChild(BitTarnsDiv) document.body.appendChild(BitTarnsDiv)
BitTarnsDiv.style.backgroundColor = "RGB(238,237,237)" BitTarnsDiv.style.backgroundColor = "RGB(238,237,237)"
BitTarnsDiv.style.height = "500px" BitTarnsDiv.style.height = "550px"
BitTarnsDiv.style.width = "300px" BitTarnsDiv.style.width = "300px"
BitTarnsDiv.style.zIndex = 99999 BitTarnsDiv.style.zIndex = 99999
BitTarnsDiv.style.position = "fixed" BitTarnsDiv.style.position = "fixed"
@@ -34,14 +34,15 @@ BitTarnsDiv.innerHTML = `
<option class="LangSelectCssOption" value="en">English</option> <option class="LangSelectCssOption" value="en">English</option>
</select> </select>
<input type="text" id="inputLang" value="" placeholder="请输入翻译内容"> <textarea cols="39" rows="15" id="inputLang" placeholder="请输入翻译内容"></textarea>
<br> <br>
<div id="middleTans"> <div id="middleTans">
自动检测语言：<p id="LangType">English</p><button id="tranbtn">翻译</button> 自动检测语言：<p id="LangType">English</p><button id="tranbtn">翻译</button>
</div> </div>
<hr> <hr>
<p id="outPutRes"></p> <div id="outPutRes"></div>
</div> </div>
` `
@@ -49,6 +50,7 @@ var from = 'auto';
var to = 'auto'; var to = 'auto';
var postMsg = async function () { var postMsg = async function () {
console.log('开始翻译')
from = document.getElementById("inputLangSelect").value from = document.getElementById("inputLangSelect").value
to = document.getElementById("outLangSelect").value to = document.getElementById("outLangSelect").value
var msgq = document.getElementById("inputLang").value var msgq = document.getElementById("inputLang").value
@@ -60,7 +62,7 @@ var postMsg = async function () {
let res1 = await fetch(httpUrl1) let res1 = await fetch(httpUrl1)
let result1 = await res1.json() let result1 = await res1.json()
let res2 = result1.trans_result[0].dst let res2 = result1.trans_result[0].dst
console.log(result1)
document.getElementById("outPutRes").innerHTML = res2 document.getElementById("outPutRes").innerHTML = res2
} }
@@ -73,13 +75,20 @@ var onInputChange = async function () {
let result1 = await res1.json() let result1 = await res1.json()
let res2 = result1.data.src let res2 = result1.data.src
if (res2 == 'en') { if (res2 == 'en') {
document.getElementById("LangType").innerHTML = '英文' document.getElementById("LangType").innerHTML = 'English'
from = 'en';
to = 'zh';
postMsg()
} else if (res2 == 'zh') { } else if (res2 == 'zh') {
document.getElementById("LangType").innerHTML = '简体中文' document.getElementById("LangType").innerHTML = '简体中文'
from = 'zh';
to = 'en';
postMsg()
} else { } else {
document.getElementById("LangType").innerHTML = res document.getElementById("LangType").innerHTML = res
postMsg()
} }
postMsg()
} }
//触发识别语言，再翻译 //触发识别语言，再翻译