翻译样式优化

packages/shell-chrome/assets/css/tran.css

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

packages/shell-chrome/assets/js/translate/tran.js

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