Files
aggregate_translate_website/index.html
2025-06-29 00:40:46 +08:00

710 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="baidu-site-verification" content="codeva-bhaFvYlfgd" />
<meta
name="keywords"
content="deepl、deepl翻译、百度翻译、谷歌翻译、腾讯翻译君"
/>
<meta
name="description"
content="翻译之家提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译等服务。"
/>
<meta name="baidu-site-verification" content="codeva-mXz3BqI9VN" />
<link rel="stylesheet" href="static/css/public.css" />
<link rel="stylesheet" href="static/css/layui.css" />
<script src="static/js/jquery-1.11.0.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/countUp.min.js"></script>
<script src="static/js/vue.js"></script>
<script src="static/js/lodash.min.js"></script>
<script src="static/js/layui.all.js"></script>
<script src="static/js/common.js"></script>
<title>翻译之家</title>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c4e0dd6add63dd71fa52870120ca22cf";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="public-header 0" id="main">
<div class="container clearfix">
<div class="left">
<img class="logo default" src="static/picture/logo.png" alt="" /><img
class="logo1 default"
src="static/picture/logo1.png"
alt=""
/><img class="logo light" src="static/picture/logow.png" alt="" /><img
class="logo1 light"
src="static/picture/logo1w.png"
alt=""
/>
<div class="nav">
<a class="active" href=""><span>首页</span></a
><a class="" href="onlineTranslation.html"><span>文本翻译</span></a
><a class="" href="voice.html"><span>语音翻译</span></a
><a class="" href="api.html"><span>API文档</span></a
><a class="" href="commonProblems.html"><span>常见问题</span></a>
</div>
</div>
<div v-if="userInfo!=undefined&&userInfo.userId>0" class="right">
<a href="userInfo.html" class="console">控制台</a>
<div class="user-info">
<div class="phone">{{userInfo.name}}</div>
<i></i>
<div class="log-out" @click="logOut">退出</div>
</div>
</div>
<div v-else class="right">
<a class="unlogin" href="login.html">登录</a>
</div>
</div>
<div class="bg"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data() {
return {
userInfo: {},
token: "",
};
},
created() {},
mounted() {
let token = localStorage.getItem("token");
if (token) {
this.token = token;
this.getUserInfo(token);
} else {
// location.href = "login.html";
}
},
methods: {
logOut() {
axios
.post("/logout", {
headers: {
Authorization: `Bearer ${this.token}`,
},
})
.then((response) => {
localStorage.removeItem("token");
location.reload();
});
},
getUserInfo(token) {
let that = this;
axios
.get("/getinfo", {
headers: {
Authorization: `Bearer ${this.token}`,
},
})
.then((response) => {
console.log("userinfo", response.data);
if (response.data.code === 200) {
this.userInfo = response.data.data;
console.log("userinfo", this.userInfo);
} else {
localStorage.removeItem("token");
location.href = "login.html";
}
});
},
},
});
</script>
<div class="index-content" id="app">
<div class="index-module" style="height: 500px">
<div class="index-top index-tops active" style="position: absolute">
<!-- <img class="banner" src="https://codeai.oss-cn-hangzhou.aliyuncs.com/img/banner.png" alt=""> -->
<div class="module-info">
<div class="left">
<h2>聚合「翻译引擎」</h2>
<p>超低价、灵活切换</p>
<div class="consult" style="z-index: 9999">立即免费使用</div>
</div>
<div class="right cooperate">
<div class="col"><img src="static/picture/p2.png" alt="" /></div>
<div class="col"><img src="static/picture/p3.png" alt="" /></div>
<div class="col"><img src="static/picture/p4.png" alt="" /></div>
<div class="col">
<img src="static/picture/youdao.png" alt="" />
</div>
</div>
</div>
<div class="module-bottom">
<ul>
<li>
<div><b id="counter"></b><i>字+</i></div>
<p>翻译字数</p>
</li>
<li>
<div><b id="counter1"></b><i>页+</i></div>
<p>翻译页数</p>
</li>
<li>
<div><b id="counter2"></b><i>家+</i></div>
<p>服务企业</p>
</li>
</ul>
<div class="bg"></div>
</div>
</div>
<div class="index-tops transtop">
<div class="transcontainer">
<div class="left-section">
<div class="title-line">
<div class="tts-title">微软TTS</div>
<div class="ai-voice">--AI语音 媲美真人</div>
</div>
<div class="subtitles">TTS、STT接口免费试用企业专享低折扣!</div>
<div class="descriptions">
第五代TTS引擎MeetHiFiVoice声音更自然、满足情感支持多语种、多方言、中英混读语音表现更智能500+高品质发音人,满足不同应用需求,可调节语速、音调、情感,灵活定制个性化音频
</div>
<div class="trial-btn consult">- 免费试用 -</div>
</div>
<div class="right-section">
<img src="static/picture/trans1.png" alt="微软TTS展示图" />
</div>
</div>
<div class="stats-container">
<div class="stat-item">99.8%语音识别率</div>
<div class="stat-item">8000000000翻译语音数</div>
<div class="stat-item">100+企业服务</div>
</div>
</div>
<div class="arrow-btn arrow-left"></div>
<div class="arrow-btn arrow-right"></div>
</div>
<div class="index-module price-module w1200">
<div class="index-title">
<div class="title">价格中心</div>
<p>了解各翻译引擎的价格</p>
</div>
<div class="table-data">
<div class="title">文本翻译</div>
<ul class="table">
<li class="row-top">
<div class="col"><span>翻译引擎</span></div>
<div class="col"><span>计费方式</span></div>
<div class="col"><span>价格U/百万字符)</span></div>
<div class="col"><span>并发(qps)</span></div>
<!-- <div class="col"><span>优惠比例(原价)</span></div> -->
</li>
<li class="row-info" v-for="item in platforms" :key="'platforms_'+item.id">
<div class="item">{{item.showName}}</div>
<div class="item">按调用字符计费</div>
<div class="item">{{item.price}}</div>
<div class="item">51000支持扩展</div>
</li>
<!-- <div class="item">
4.4折25美元<img src="static/picture/p7.png" alt="" />
</div> -->
<!-- </li>
<li class="row-info">
<div class="item">谷歌翻译-V2/V3</div>
<div class="item">按调用字符计费</div>
<div class="item">60微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
5.5折20美元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">百度翻译-企业版本</div>
<div class="item">按调用字符计费</div>
<div class="item">25微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
5折50元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">有道翻译</div>
<div class="item">按调用字符计费</div>
<div class="item">25微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
5折50元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">微软翻译</div>
<div class="item">按调用字符计费</div>
<div class="item">60微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
8.2折10美元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">火山翻译</div>
<div class="item">按调用字符计费</div>
<div class="item">25微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
5折50元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">chatgpt翻译</div>
<div class="item">按调用字符计费</div>
<div class="item">50微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
5折100元<img src="static/picture/p7.png" alt="" />
</div>
</li>
<li class="row-info">
<div class="item">yandex翻译</div>
<div class="item">按调用字符计费</div>
<div class="item">25微信咨询领取折扣</div>
<div class="item">51000支持扩展</div>
<div class="item">
8.3折30元<img src="static/picture/p7.png" alt="" />
</div>
</li> -->
</ul>
</div>
</div>
<div class="index-module price-module w1200">
<div class="index-title">
<div class="title">AI配音 & 实时翻译</div>
<p>140+语言方言 | 400+高品质音色 | 随心选择(接口免费试用)</p>
</div>
<div style="padding: 0 94px">
<div class="containerAi">
<div class="small-div">
<div class="image-container">
<img
src="static/picture/ai1.png"
alt="图片1"
style="width: 100%; height: 100%; object-fit: contain"
/>
</div>
<div class="title">前沿语音引擎</div>
<div class="description">
AI语音合成|虚拟人配音|个性化声音定制
</div>
</div>
<div class="small-div">
<div class="image-container">
<img
src="static/picture/ai2.png"
alt="图片2"
style="width: 100%; height: 100%; object-fit: contain"
/>
</div>
<div class="title">语音库</div>
<div class="description">
覆盖149+语言492+语音,媲美真人,富有表现力
</div>
</div>
<div class="small-div">
<div class="image-container">
<img
src="static/picture/ai3.png"
alt="图片3"
style="width: 100%; height: 100%; object-fit: contain"
/>
</div>
<div class="title">定制声音</div>
<div class="description">
用你的声音创造独一无二的TTS音色赋予品牌个性
</div>
</div>
</div>
<img src="static/picture/ai4.png" alt="" style="width: 100%" />
<div class="index-title">
<p>短视频配音 | 精准识别 | 自然合成 | 支持100+语言和方言</p>
</div>
<div
class="containerAi"
style="
width: 688px;
margin: 0 auto;
margin-top: 36px;
margin-bottom: 52px;
"
>
<div class="small-div">
<div class="image-container">
<img
src="static/picture/ai5.png"
alt="图片1"
style="width: 100%; height: 100%; object-fit: contain"
/>
</div>
<div class="title">个性化语音</div>
<div class="description">
从真人声音轻松生成AI语音打造专属语音体验
</div>
</div>
<div class="small-div">
<div class="image-container">
<img
src="static/picture/ai6.png"
alt="图片2"
style="width: 100%; height: 100%; object-fit: contain"
/>
</div>
<div class="title">智能语音创作</div>
<div class="description">
灵活调整语音风格、语速、发音让AI表达更具情感
</div>
</div>
</div>
<img src="static/picture/ai7.png" alt="" style="width: 100%" />
</div>
</div>
<div class="index-module price-module w1200">
<div class="index-title">
<div class="title">产品优势</div>
<p>微软认证技术团队全程支持</p>
<div class="cpys">
<div style="height: 455px"></div>
<div class="info">
*微软TTS(Text-to-Speech)是微软研发的AI文本转语音技术通过深度学习与神经网络精准模拟人类语音特征实现自然流畅的语
</div>
<div class="info">音合成。</div>
<div class="info">
*作为 Azure
Al在中国区的金牌合作伙伴我们致力于让中国企业便捷接入这一领先的语音技术助力业务创新。
</div>
<div class="info">
*专业技术支持全流程服务我们的资深技术团队提供从接入到开发、部署的全方位支持确保微软TTS和STT(语音转文本)高效落地,
</div>
<div class="info">助力企业解锁智能语音的更多可能!</div>
</div>
</div>
</div>
<div class="index-module why-cheap-module">
<div class="index-title">
<div class="title">为什么很便宜</div>
<p>了解为什么各翻译引擎很便宜</p>
</div>
<div class="w1200 clearfix">
<img src="static/picture/p9.png" alt="" />
<div class="info">
<p>深入行业<br />真正让<b>价格做到最低</b></p>
<div class="line"></div>
<div>
我们是5大主流翻译引擎综合代理服务商<br />
汇集众多企业客户,从而可以享受较低的渠道价格
</div>
</div>
</div>
</div>
<div class="index-module service-module">
<div class="w1200">
<div class="col">
<div class="img-w"><img src="static/picture/p2.png" alt="" /></div>
<p>核心服务商</p>
</div>
<div class="col">
<div class="img-w"><img src="static/picture/p3.png" alt="" /></div>
<p>金牌服务商</p>
</div>
<div class="col">
<div class="img-w">
<img
src="static/picture/soft.png"
alt=""
style="width: 215px; height: 82px"
/>
</div>
<p>金牌服务商</p>
</div>
<div class="col">
<div class="img-w"><img src="static/picture/p4.png" alt="" /></div>
<p>一级服务商</p>
</div>
<div class="col">
<div class="img-w">
<img src="static/picture/youdao.png" alt="" />
</div>
<p>二级服务商</p>
</div>
</div>
</div>
<div class="index-module order-module">
<div class="w1200">
<p>预约您的专属营销顾问,洽谈最优价格</p>
<div class="form-data">
<input
type="text"
name="name"
placeholder="请输入您的姓名"
v-model="name"
/><input
type="text"
name="tel"
placeholder="请输入您的电话"
v-model="tel"
/>
</div>
<div class="btn" @click="appointment">立即预约</div>
</div>
</div>
<div class="public-consult">
<div class="w1200">
<img class="service" src="static/picture/p23.png" alt="" />
<div class="form-row">
<input
v-model="name"
class="form-input"
type="text"
placeholder="您的称呼"
/><input
v-model="tel"
class="form-input"
type="number"
placeholder="请输入您的手机号"
/>
<div class="confirm" @click="appointment">立即预约</div>
</div>
<div class="close" title="关闭"></div>
</div>
</div>
<div class="public-customer">
<!-- <div class="top"><img src="https://codeai.oss-cn-hangzhou.aliyuncs.com/img/p27.png" class="icon" /><span>客服咨询</span></div> -->
<div class="ctr">
<div class="item">
<img src="static/picture/p25.png" alt="" />
<div>微信咨询</div>
<div class="detail wechat">
<h5>微信咨询</h5>
<img src="static/picture/p23.jpg" alt="" />
<p>手机扫码加我微信</p>
</div>
</div>
<div class="line"></div>
<div class="item">
<img src="static/picture/p26.png" alt="" />
<div>电话咨询</div>
<div class="detail">
<h5>电话咨询</h5>
<div class="phone">13327906119</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="service-modal"><div class="content"><div class="close"></div><div class="contact">联系我们</div><img class="qrcode-img" src="https://codeai.oss-cn-hangzhou.aliyuncs.com/img/p23.jpg" alt=""><p>请添加专属营销顾问</p></div></div> -->
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data() {
return {
name: "",
tel: "",
isClick: false,
platforms:[]
};
},
mounted() {
this.getPlatforms()
},
methods: {
appointment() {
var pattern = /^1[0-9]{10}$/;
if (!pattern.test(this.tel)) {
layer.msg("手机号码有误!");
return;
}
if (this.name && !this.isClick) {
this.isClick = true;
axios
.post("/api/translate/saveAppointment", {
tel: this.tel,
name: this.name,
})
.then((response) => {
this.isClick = false;
if (response.data.code == 1) {
layer.msg("预约成功");
} else {
layer.msg(response.data.info);
}
});
} else {
layer.msg("请输入姓名");
}
},
getPlatforms() {
axios
.get("/tm-platform/list")
.then((response) => {
if (response.data.code == 200) {
this.platforms = response.data.data;
}
})
.catch((error) => {
console.log(error);
});
},
},
});
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
const carousel = document.querySelector(".index-module");
const slides = document.querySelectorAll(".index-tops");
const leftArrow = document.querySelector(".arrow-left");
const rightArrow = document.querySelector(".arrow-right");
let currentIndex = 0;
let isMouseOver = false;
let isAnimating = false;
let intervalTime = 4000;
let timer = null;
function showSlide(index) {
if (isAnimating) return;
isAnimating = true;
const nextIndex = (index + slides.length) % slides.length;
slides[currentIndex].classList.remove("active");
slides[nextIndex].classList.add("active");
currentIndex = nextIndex;
setTimeout(() => {
isAnimating = false;
}, 500);
}
function nextSlide() {
showSlide(currentIndex + 1);
}
function prevSlide() {
showSlide(currentIndex - 1);
}
function startAutoPlay() {
clearInterval(timer);
timer = setInterval(() => {
if (!isMouseOver) nextSlide();
}, intervalTime);
}
carousel.addEventListener("mouseenter", () => {
isMouseOver = true;
});
carousel.addEventListener("mouseleave", () => {
isMouseOver = false;
});
leftArrow.addEventListener("click", () => {
prevSlide();
startAutoPlay(); // 点击后重启定时器
});
rightArrow.addEventListener("click", () => {
nextSlide();
startAutoPlay(); // 点击后重启定时器
});
// 初始化轮播
startAutoPlay();
});
$(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 500) {
$(".public-header").addClass("normal");
} else {
$(".public-header").removeClass("normal");
}
if (
$(".order-module").offset().top - $(document).scrollTop() <=
711
) {
$(".public-consult").addClass("hideCla");
} else {
$(".public-consult").removeClass("hideCla");
}
});
// 计数
var areaCounter = new CountUp("counter", 0, 22000000000, 0, 3, {
separator: ",",
});
if (!areaCounter.error) {
areaCounter.start();
} else {
console.error(areaCounter.error);
}
var areaCounter1 = new CountUp("counter1", 0, 12000000, 0, 3, {
separator: ",",
});
if (!areaCounter1.error) {
areaCounter1.start();
} else {
console.error(areaCounter1.error);
}
var areaCounter2 = new CountUp("counter2", 0, 1000, 0, 3, {
separator: ",",
});
if (!areaCounter2.error) {
areaCounter2.start();
} else {
console.error(areaCounter2.error);
}
$(".consult").click(function () {
// $('.service-modal').fadeIn()
window.location.href = "/index/index/api";
});
$(".service-modal .close").click(function () {
$(".service-modal").fadeOut();
});
$(".public-consult .close").click(function () {
$(".public-consult").addClass("hideCla");
});
});
</script>
<div class="public-footer">
<div class="w1200">
<div class="left"><img src="static/picture/logo.png" alt="" /></div>
<div
style="
flex-direction: column;
line-height: 23px;
padding-left: 100px;
color: #fff;
font-size: 12px;
"
>
<p style="color: #fff; font-size: 12px"><span>关于我们:</span></p>
<p style="color: #fff; font-size: 12px">
<span></span>
</p>
</div>
<div class="right" style="white-space: nowrap">
<p></p>
<p><span>联系我们:</span></p>
<p><span>地址:</span></p>
<p><span>邮箱:</span></p>
<p class=""><span>电话: </span></p>
</div>
</div>
<div class="copyright">
<a href="https://beian.miit.gov.cn/" target="blank"></a>
</div>
</div>
</body>
</html>