bitdance-team/chrome-extension
1
0
Fork 0
mirror of https://gitee.com/bitdance-team/chrome-extension synced 2025-11-04 03:43:10 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

翻译的样式

Browse Source
This commit is contained in:
zhneglili
2022-02-09 19:58:25 +08:00
parent dcd8d152cc
commit 8c4ed6e071
2 changed files with 97 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,75 @@
#inputLang{
width: 250px;
height: 150px;
*{
margin: 0;
padding: 0;
}
#trans{
width: 280px;
height: 490px;
float: left;
margin-left: 10px;
background-color: rgb(251, 252, 250);
}
#outPutRes{
width: 250px;
height: 150px;
background-color: rgb(243, 243, 243);
#trans_header{
width: 300px;
height: 40px;
background-color:#06abf8;
margin-left: -10px;
border:2px solid #06abf8;
border-radius:25px 25px 0px 0px;
text-align: center;
line-height: 40px;
font-size: 20px;
color: azure;
font-weight:bold
}
#deleteTrans{
width: 25px;
height: 25px;
background-color: azure;
font-size: 15px;
color: rgb(161, 165, 165);
border:2px solid #06abf8;
border-radius:25px;
float: right;
margin-top: 8px;
margin-right: 10px;
}
.LangSelectCss{
width: 120px;
height: 30px;
text-align: center;
line-height: 40px;
border:none
}
.LangSelectCssOption{
border: none;
}
#inputLang{
margin-top:3px;
width: 275px;
height: 170px;
margin-bottom: 10px;
}
#middleTans{
font-size: 15px;
margin-bottom: 5px;
}
#LangType{
display: inline-block
display: inline-block;
line-height: 30px;
}
#tranbtn{
display: inline-block
width: 70px;
height: 30px;
display: inline-block;
float: right;
margin-right:15px;
background-color: #06abf8;
font-size: 18px;
border:2px solid #06abf8;
border-radius:10px;
color: azure;
}
#outPutRes{
}

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

@@ -5,33 +5,43 @@ if (typeof (BitTarnsDiv) !== "undefined") {
var BitTarnsDiv = document.createElement("div")
BitTarnsDiv.id = "BitTarnsDivId"
document.body.appendChild(BitTarnsDiv)
BitTarnsDiv.style.backgroundColor = "red"
BitTarnsDiv.style.height = "450px"
BitTarnsDiv.style.backgroundColor = "RGB(238,237,237)"
BitTarnsDiv.style.height = "500px"
BitTarnsDiv.style.width = "300px"
BitTarnsDiv.style.zIndex = 99999
BitTarnsDiv.style.position = "fixed"
BitTarnsDiv.style.right = '10px'
BitTarnsDiv.style.top = '50px'
BitTarnsDiv.style.float = 'right'
BitTarnsDiv.style.border = '2px solid RGB(238,237,237)'
BitTarnsDiv.style.borderRadius = '25px'
BitTarnsDiv.innerHTML = `
<div id = 'trans'>
<select id="inputLangSelect">
<option value="auto">自动检测语言</option>
<option value="zh">简体中文</option>
<option value="en">English</option>
</select>
<select id="outLangSelect">
<option value="zh">简体中文</option>
<option value="en">English</option>
</select>
<button id="deleteTrans">关闭</button>
<input type="text" id="inputLang" value="" placeholder="请输入翻译内容" >
<br>
自动检测语言：<p id="LangType"></p><button id="tranbtn">翻译</button>
<hr>
<p id="outPutRes"></p>
<div id='trans'>
<div id="trans_header">
学生助手--翻译小帮手
<button id="deleteTrans">X</button>
</div>
<select id="inputLangSelect" class="LangSelectCss">
<option class="LangSelectCssOption" value="auto">自动检测语言</option>
<option class="LangSelectCssOption" value="zh">简体中文</option>
<option class="LangSelectCssOption" value="en">English</option>
</select>
=>
<select id="outLangSelect" class="LangSelectCss">
<option class="LangSelectCssOption" value="zh">简体中文</option>
<option class="LangSelectCssOption" value="en">English</option>
</select>
<input type="text" id="inputLang" value="" placeholder="请输入翻译内容">
<br>
<div id="middleTans">
自动检测语言：<p id="LangType">English</p><button id="tranbtn">翻译</button>
</div>
<hr>
<p id="outPutRes"></p>
</div>
`