一、項(xiàng)目介紹

項(xiàng)目使用傳統(tǒng)vue項(xiàng)目結(jié)構(gòu)實(shí)現(xiàn)，前端采用element實(shí)現(xiàn)。

element官網(wǎng)：Element - The world's most popular Vue UI framework

云碼官網(wǎng)地址：云碼-自動(dòng)驗(yàn)證碼識(shí)別平臺(tái)_驗(yàn)證碼識(shí)別API接口_免費(fèi)驗(yàn)證碼軟件

項(xiàng)目截圖，支持vscode/webstorm/hbuilder等：

?項(xiàng)目執(zhí)行命令，依次成功執(zhí)行即可，很簡(jiǎn)單：

1、npm install

2、npm run dev

二、項(xiàng)目效果圖

1.首頁(yè)

結(jié)構(gòu)分為頂部、底部，其中底部為組件，各個(gè)頁(yè)面復(fù)用，右側(cè)聯(lián)系欄目也是組件。

?

?

?

2、產(chǎn)品及測(cè)試

tab可動(dòng)態(tài)切換

?

?

?

3、開發(fā)文檔

左側(cè)為文檔菜單，右側(cè)為相應(yīng)菜單對(duì)應(yīng)內(nèi)容展示區(qū)域，可拓展根據(jù)菜單切換動(dòng)態(tài)顯示內(nèi)容。?

?

4.專屬定制

?

5、登錄

?6、注冊(cè)

三、源碼

1、首頁(yè)

<template><div class="body"><nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar"><div class="container"><a class="navbar-brand" @click="toPage('/')"><img src="https://obs.jfbym.com/public/static/img/logo.png" alt="">云碼</a><div class="collapse navbar-collapse" id="ftco-nav"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a class="nav-link">首頁(yè)</a></li><li class="nav-item"><a @click="toPage('/price')" class="nav-link">產(chǎn)品及測(cè)試</a></li><li class="nav-item"><a @click="toPage('/demo')" class="nav-link">開發(fā)文檔</a></li><li class="nav-item"><a @click="toPage('/custom')" class="nav-link">專屬定制</a></li></ul></div><div id="login_tag_div"><ul class="navbar-nav navbar-nav2 ml-auto" id="not_logged"><li class="nav-item cta"><a @click="toPage('/login')" class="nav-link">登錄</a></li><li class="nav-item cta cta-colored"><a @click="toPage('/register')" class="nav-link">注冊(cè)</a></li></ul></div></div></nav><div class="swiper-container"><div class="swiper-wrapper" :style="'width: 9570px; height: 560px; transform: translate3d('+(-1914*bannerIndex)+'px, 0px, 0px); transition-duration: 0s;'"><div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc1.jpg" alt="圖片驗(yàn)證碼識(shí)別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>定制開發(fā) 全方位滿足您的需求</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>全方位快速定制模型接口</span><span>定制模型接口快.準(zhǔn).狠</span></p><p><span>售后運(yùn)維有保障</span><span>技術(shù)人員全方位服務(wù)保證交付</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag">立即接入</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 1?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc3.jpg" alt="圖片驗(yàn)證碼識(shí)別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>專業(yè)圖像驗(yàn)證云識(shí)別服務(wù)</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>驗(yàn)證識(shí)別快又準(zhǔn)</span><span>自動(dòng)接入很輕松</span></p><p><span>識(shí)別資費(fèi)更便宜</span><span>技術(shù)安全有保障</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 2?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc2.jpg" alt="圖片驗(yàn)證碼識(shí)別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>關(guān)注微信公眾賬號(hào)免費(fèi)領(lǐng)取測(cè)試積分</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即關(guān)注</a></div></div></div></div><div :class="'swiper-slide slide1 '+(bannerIndex === 3?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc1.jpg" alt="圖片驗(yàn)證碼識(shí)別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>定制開發(fā) 全方位滿足您的需求</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>全方位快速定制模型接口</span><span>定制模型接口快.準(zhǔn).狠</span></p><p><span>售后運(yùn)維有保障</span><span>技術(shù)人員全方位服務(wù)保證交付</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a></div></div></div></div><div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;"><img src="https://obs.jfbym.com/bg-pc3.jpg" alt="圖片驗(yàn)證碼識(shí)別"><div class="inner"><div class="banner-text"><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s"><h2>專業(yè)圖像驗(yàn)證云識(shí)別服務(wù)</h2></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"><p><span>驗(yàn)證識(shí)別快又準(zhǔn)</span><span>自動(dòng)接入很輕松</span></p><p><span>識(shí)別資費(fèi)更便宜</span><span>技術(shù)安全有保障</span></p></div><div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s"><a class="btn-primary is_redirect_console_tag">立即接入</a></div></div></div></div></div><div class="pagination"><span @click="showBanner(1)" :class="'swiper-pagination-switch '+(bannerIndex===1?'swiper-visible-switch swiper-active-switch':'')"></span><span @click="showBanner(2)" :class="'swiper-pagination-switch '+(bannerIndex===2?'swiper-visible-switch swiper-active-switch':'')"></span><span @click="showBanner(3)" :class="'swiper-pagination-switch '+(bannerIndex===3?'swiper-visible-switch swiper-active-switch':'')"></span></div></div><section class="ftco-section services-section chous-con" id="chous"><div class="container" id="mao"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">WHY CHOOSE US</span><h2><span>為什么選擇</span>云碼驗(yàn)證碼識(shí)別</h2></div></div><div class="row d-flex chous-main"><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-1.png" alt="驗(yàn)證碼識(shí)別速度絕對(duì)領(lǐng)先"></div><div class="media-body"><h3 class="heading mb-2 mt-2">驗(yàn)證碼識(shí)別速度領(lǐng)先</h3><p>圖片識(shí)別1~2秒，快速獲取結(jié)果</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-2.png" alt="驗(yàn)證碼識(shí)別秒級(jí)返回，零操作獲取結(jié)果"></div><div class="media-body"><h3 class="heading mb-2 mt-2">驗(yàn)證碼秒級(jí)返回技術(shù)</h3><p>人工智能自我學(xué)習(xí)自我完善識(shí)別系統(tǒng)字符，告別低效人力獲取</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-3.png" alt="驗(yàn)證碼識(shí)別"></div><div class="media-body"><h3 class="heading mb-2 mt-2">生成階梯計(jì)費(fèi)體系</h3><p>足夠吸引力的價(jià)格體系，高達(dá)50%開發(fā)分成，隨著驗(yàn)證識(shí)別使用，能進(jìn)一步降低解決整體費(fèi)用支出</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-4.png" alt="數(shù)字識(shí)別"></div><div class="media-body"><h3 class="heading mb-2 mt-2">提供先進(jìn)驗(yàn)證架構(gòu)體系</h3><p>享受云架構(gòu)穩(wěn)定高效網(wǎng)絡(luò)的同時(shí)，開發(fā)以多重容災(zāi)手段保證服務(wù)器24小時(shí)無(wú)差別自動(dòng)對(duì)外服務(wù)驗(yàn)證</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-5.png" alt="驗(yàn)證碼平臺(tái)"></div><div class="media-body"><h3 class="heading mb-2 mt-2">提供多語(yǔ)言驗(yàn)證碼開發(fā)支持</h3><p>簡(jiǎn)易一鍵接入方案，采用多種語(yǔ)言api接口，跨平臺(tái)支持</p></div></div></div><div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated"><div class="media block-6 services d-block"><div><img src="https://obs.jfbym.com/public/static/img/chous-6.png" alt="在線打碼"></div><div class="media-body"><h3 class="heading mb-2 mt-2">多重安全保障技術(shù)</h3><p>安全第一，確?？蛻粜畔?shù)據(jù)安全</p></div></div></div></div></div></section><section class="ftco-section ftco-counter img" id="section-counter" style="background-image: url(https://obs.jfbym.com/public/static/img/bg_1.jpg); background-position: 50% -146.586px;"><div class="container"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-8 heading-section heading-section-white text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">ARTIFICIAL INTELLIGENCE IMAGE RECOGNITION PLATFORM</span><h2><span>基于</span>人工智能算法<span>的高可用圖片處理識(shí)別</span></h2></div></div><div class="row justify-content-center"><div class="col-md-12"><div class="row"><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_1.png" alt="識(shí)別驗(yàn)證碼"><div class="sc_tit">自動(dòng)學(xué)習(xí)</div><span>深度學(xué)習(xí)人工智能識(shí)別圖片驗(yàn)證碼算法</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_2.png" alt="驗(yàn)證碼工具"><div class="sc_tit">數(shù)據(jù)優(yōu)化</div><span>持續(xù)訓(xùn)練優(yōu)化現(xiàn)有驗(yàn)證碼數(shù)字識(shí)別功能</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_3.png" alt="圖片識(shí)別"><div class="sc_tit">準(zhǔn)確率</div><span>不斷提高機(jī)器字符驗(yàn)證識(shí)別廣度準(zhǔn)確率</span></div></div></div><div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated"><div class="block-18 text-center"><div class="text"><img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_4.png" alt="識(shí)別驗(yàn)證碼"><div class="sc_tit">持續(xù)低價(jià)</div><span>不斷降低Captchapt驗(yàn)證碼識(shí)別使用價(jià)格</span></div></div></div></div></div></div></div></section><section class="ftco-section fs-d"><div class="container"><div class="row justify-content-center mb-5 pb-3"><div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated"><span class="subheading">WHAT CAN WE DO</span><h2><span>我們可以</span>做什么</h2></div></div><div class="row d-flex fs-d-flex"><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_1.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">圖片識(shí)別軟件程序</h3><p>通用圖像內(nèi)容識(shí)別技術(shù)<br>涵蓋數(shù)字、英文字母、漢字、圖像<br>以及混合內(nèi)容，自適配識(shí)別</p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_2.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">開發(fā)商服務(wù)</h3><p>開發(fā)者接入向?qū)?lt;br>API接口維基<br>開發(fā)者許可協(xié)議<br>開發(fā)者利潤(rùn)分成<br>開發(fā)者后臺(tái)</p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_3.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">市場(chǎng)主體企業(yè)下載</h3><p>全國(guó)1.5億工商注冊(cè)信息系統(tǒng)<br>穩(wěn)定、高效、完整、權(quán)威注冊(cè)下載<br></p></div></a></div></div><div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated"><div class="blog-entry align-self-stretch"><a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_4.jpg');"><div style="background-color: rgba(0,0,0,0.32); height: 100%;"><h3 class="heading">爬蟲數(shù)據(jù)定制</h3><p>以深度數(shù)據(jù)為核心<br>個(gè)性話定制采集功能<br>為個(gè)人、企業(yè)、合作商解決提供開放的數(shù)據(jù)服務(wù)</p></div></a></div></div></div></div></section></div>
</template><script>import initData from "@/data/data.js";export default {data() {return {bannerIndex: 1};},mounted() {},methods: {//跳轉(zhuǎn)頁(yè)面toPage(path){this.$router.push({path:path});},//banner顯示showBanner(index){this.bannerIndex = index;}}};
</script>

四、總結(jié)

項(xiàng)目頁(yè)面完整，后續(xù)可能將不斷升級(jí)。

關(guān)注作者，及時(shí)了解更多好項(xiàng)目！

更多優(yōu)質(zhì)項(xiàng)目請(qǐng)看作者主頁(yè)！

獲取源碼或如需幫助，可通過(guò)博客后面名片+作者即可！

?

?其他作品集合（主頁(yè)更多）：

1. 《uni-app小程序，基于vue實(shí)現(xiàn)電商商城》
2. 《uni-app基于vue實(shí)現(xiàn)商城小程序》
3. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui實(shí)現(xiàn)請(qǐng)假考勤系統(tǒng)》
4. 《vue+element實(shí)現(xiàn)電商商城禮品代發(fā)網(wǎng)，商品、訂單管理》
5. 《vue+vant2完美實(shí)現(xiàn)香奈兒移動(dòng)端商城網(wǎng)站》
6. 《vue+elementui實(shí)現(xiàn)聯(lián)想購(gòu)物商城，樣式美觀大方》
7. 《vue+elementui實(shí)現(xiàn)英雄聯(lián)盟道具城》
8. 《vue+elementui實(shí)現(xiàn)app布局小米商城，樣式美觀大方，功能完整》