devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+element模仿实现云码自动验证码识别平台官网

作者：笔触狂放9 | 2024-03-05 03:51:21

赞

踩

vue+element模仿实现云码自动验证码识别平台官网

一、项目介绍

项目使用传统vue项目结构实现，前端采用element实现。

element官网：Element - The world's most popular Vue UI framework

云码官网地址：云码-自动验证码识别平台_验证码识别API接口_免费验证码软件

项目截图，支持vscode/webstorm/hbuilder等：

 项目执行命令，依次成功执行即可，很简单：

1、npm install

2、npm run dev

二、项目效果图

1.首页

结构分为顶部、底部，其中底部为组件，各个页面复用，右侧联系栏目也是组件。

 

 

 

2、产品及测试

tab可动态切换

 

 

 

3、开发文档

左侧为文档菜单，右侧为相应菜单对应内容展示区域，可拓展根据菜单切换动态显示内容。 

 

4.专属定制

 

5、登录

 6、注册

三、源码

1、首页

  1. <template>
  2.   <div class="body">
  3.     <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
  4.       <div class="container">
  5.         <a class="navbar-brand" @click="toPage('/')">
  6.           <img src="https://obs.jfbym.com/public/static/img/logo.png" alt="">云码
  7.         </a>
  8.         <div class="collapse navbar-collapse" id="ftco-nav">
  9.           <ul class="navbar-nav ml-auto">
  10.             <li class="nav-item active">
  11.               <a class="nav-link">首页</a>
  12.             </li>
  13.             <li class="nav-item">
  14.               <a @click="toPage('/price')" class="nav-link">产品及测试</a>
  15.             </li>
  16.             <li class="nav-item">
  17.               <a @click="toPage('/demo')" class="nav-link">开发文档</a>
  18.             </li>
  19.             <li class="nav-item">
  20.               <a @click="toPage('/custom')" class="nav-link">专属定制</a>
  21.             </li>
  22.           </ul>
  23.         </div>
  24.         <div id="login_tag_div">
  25.           <ul class="navbar-nav navbar-nav2 ml-auto" id="not_logged">
  26.             <li class="nav-item cta">
  27.               <a @click="toPage('/login')" class="nav-link">登录</a>
  28.             </li>
  29.             <li class="nav-item cta cta-colored">
  30.               <a @click="toPage('/register')" class="nav-link">注册</a>
  31.             </li>
  32.           </ul>
  33.         </div>
  34.       </div>
  35.     </nav>
  36.  
  37.     <div class="swiper-container">
  38.       <div class="swiper-wrapper" :style="'width: 9570px; height: 560px; transform: translate3d('+(-1914*bannerIndex)+'px, 0px, 0px); transition-duration: 0s;'">
  39.         <div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;">
  40.           <img src="https://obs.jfbym.com/bg-pc1.jpg" alt="图片验证码识别">
  41.           <div class="inner">
  42.             <div class="banner-text">
  43.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
  44.                 <h2>定制开发 全方位满足您的需求</h2>
  45.               </div>
  46.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
  47.                 <p>
  48.                   <span>全方位快速定制模型接口</span>
  49.                   <span>定制模型接口快.准.狠</span>
  50.                 </p>
  51.  
  52.                 <p>
  53.                   <span>售后运维有保障</span>
  54.                   <span>技术人员全方位服务保证交付</span>
  55.                 </p>
  56.               </div>
  57.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
  58.                 <a class="btn-primary is_redirect_console_tag">立即接入</a>
  59.               </div>
  60.             </div>
  61.           </div>
  62.         </div>
  63.         <div :class="'swiper-slide slide1 '+(bannerIndex === 1?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;">
  64.           <img src="https://obs.jfbym.com/bg-pc3.jpg" alt="图片验证码识别">
  65.           <div class="inner">
  66.             <div class="banner-text">
  67.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
  68.                 <h2>专业图像验证云识别服务</h2>
  69.               </div>
  70.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
  71.                 <p>
  72.                   <span>验证识别快又准</span>
  73.                   <span>自动接入很轻松</span>
  74.                 </p>
  75.  
  76.                 <p>
  77.                   <span>识别资费更便宜</span>
  78.                   <span>技术安全有保障</span>
  79.                 </p>
  80.               </div>
  81.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
  82.                 <a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a>
  83.               </div>
  84.             </div>
  85.           </div>
  86.         </div>
  87.         <div :class="'swiper-slide slide1 '+(bannerIndex === 2?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;">
  88.           <img src="https://obs.jfbym.com/bg-pc2.jpg" alt="图片验证码识别">
  89.           <div class="inner">
  90.             <div class="banner-text">
  91.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
  92.                 <h2>关注微信公众账号免费领取测试积分</h2>
  93.               </div>
  94.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s"></div>
  95.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
  96.                 <a class="btn-primary is_redirect_console_tag" rel="nofollow">立即关注</a>
  97.               </div>
  98.             </div>
  99.           </div>
  100.         </div>
  101.         <div :class="'swiper-slide slide1 '+(bannerIndex === 3?'swiper-slide-visible swiper-slide-active':'')" style="width: 1914px; height: 560px;">
  102.           <img src="https://obs.jfbym.com/bg-pc1.jpg" alt="图片验证码识别">
  103.           <div class="inner">
  104.             <div class="banner-text">
  105.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
  106.                 <h2>定制开发 全方位满足您的需求</h2>
  107.               </div>
  108.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
  109.                 <p>
  110.                   <span>全方位快速定制模型接口</span>
  111.                   <span>定制模型接口快.准.狠</span>
  112.                 </p>
  113.  
  114.                 <p>
  115.                   <span>售后运维有保障</span>
  116.                   <span>技术人员全方位服务保证交付</span>
  117.                 </p>
  118.               </div>
  119.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
  120.                 <a class="btn-primary is_redirect_console_tag" rel="nofollow">立即接入</a>
  121.               </div>
  122.             </div>
  123.           </div>
  124.         </div>
  125.         <div class="swiper-slide slide1 swiper-slide-duplicate" style="width: 1914px; height: 560px;">
  126.           <img src="https://obs.jfbym.com/bg-pc3.jpg" alt="图片验证码识别">
  127.           <div class="inner">
  128.             <div class="banner-text">
  129.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
  130.                 <h2>专业图像验证云识别服务</h2>
  131.               </div>
  132.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
  133.                 <p>
  134.                   <span>验证识别快又准</span>
  135.                   <span>自动接入很轻松</span>
  136.                 </p>
  137.  
  138.                 <p>
  139.                   <span>识别资费更便宜</span>
  140.                   <span>技术安全有保障</span>
  141.                 </p>
  142.               </div>
  143.               <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
  144.                 <a class="btn-primary is_redirect_console_tag">立即接入</a>
  145.               </div>
  146.             </div>
  147.           </div>
  148.         </div>
  149.       </div>
  150.       <div class="pagination">
  151.         <span @click="showBanner(1)" :class="'swiper-pagination-switch '+(bannerIndex===1?'swiper-visible-switch swiper-active-switch':'')"></span>
  152.         <span @click="showBanner(2)" :class="'swiper-pagination-switch '+(bannerIndex===2?'swiper-visible-switch swiper-active-switch':'')"></span>
  153.         <span @click="showBanner(3)" :class="'swiper-pagination-switch '+(bannerIndex===3?'swiper-visible-switch swiper-active-switch':'')"></span>
  154.       </div>
  155.     </div>
  156.  
  157.     <section class="ftco-section services-section chous-con" id="chous">
  158.       <div class="container" id="mao">
  159.         <div class="row justify-content-center mb-5 pb-3">
  160.           <div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated">
  161.             <span class="subheading">WHY CHOOSE US</span>
  162.             <h2>
  163.               <span>为什么选择</span>云码验证码识别
  164.             </h2>
  165.           </div>
  166.         </div>
  167.         <div class="row d-flex chous-main">
  168.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  169.             <div class="media block-6 services d-block">
  170.               <div>
  171.                 <img src="https://obs.jfbym.com/public/static/img/chous-1.png" alt="验证码识别速度绝对领先">
  172.               </div>
  173.               <div class="media-body">
  174.                 <h3 class="heading mb-2 mt-2">验证码识别速度领先</h3>
  175.                 <p>图片识别1~2秒，快速获取结果</p>
  176.               </div>
  177.             </div>
  178.           </div>
  179.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  180.             <div class="media block-6 services d-block">
  181.               <div>
  182.                 <img src="https://obs.jfbym.com/public/static/img/chous-2.png" alt="验证码识别秒级返回，零操作获取结果">
  183.               </div>
  184.               <div class="media-body">
  185.                 <h3 class="heading mb-2 mt-2">验证码秒级返回技术</h3>
  186.                 <p>人工智能自我学习自我完善识别系统字符，告别低效人力获取</p>
  187.               </div>
  188.             </div>
  189.           </div>
  190.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  191.             <div class="media block-6 services d-block">
  192.               <div>
  193.                 <img src="https://obs.jfbym.com/public/static/img/chous-3.png" alt="验证码识别">
  194.               </div>
  195.               <div class="media-body">
  196.                 <h3 class="heading mb-2 mt-2">生成阶梯计费体系</h3>
  197.                 <p>足够吸引力的价格体系，高达50%开发分成，随着验证识别使用，能进一步降低解决整体费用支出</p>
  198.               </div>
  199.             </div>
  200.           </div>
  201.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  202.             <div class="media block-6 services d-block">
  203.               <div>
  204.                 <img src="https://obs.jfbym.com/public/static/img/chous-4.png" alt="数字识别">
  205.               </div>
  206.               <div class="media-body">
  207.                 <h3 class="heading mb-2 mt-2">提供先进验证架构体系</h3>
  208.                 <p>享受云架构稳定高效网络的同时，开发以多重容灾手段保证服务器24小时无差别自动对外服务验证</p>
  209.               </div>
  210.             </div>
  211.           </div>
  212.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  213.             <div class="media block-6 services d-block">
  214.               <div>
  215.                 <img src="https://obs.jfbym.com/public/static/img/chous-5.png" alt="验证码平台">
  216.               </div>
  217.               <div class="media-body">
  218.                 <h3 class="heading mb-2 mt-2">提供多语言验证码开发支持</h3>
  219.                 <p>简易一键接入方案，采用多种语言api接口，跨平台支持</p>
  220.               </div>
  221.             </div>
  222.           </div>
  223.           <div class="col-md-4 d-flex align-self-stretch ftco-animate fadeInUp ftco-animated">
  224.             <div class="media block-6 services d-block">
  225.               <div>
  226.                 <img src="https://obs.jfbym.com/public/static/img/chous-6.png" alt="在线打码">
  227.               </div>
  228.               <div class="media-body">
  229.                 <h3 class="heading mb-2 mt-2">多重安全保障技术</h3>
  230.                 <p>安全第一，确保客户信息数据安全</p>
  231.               </div>
  232.             </div>
  233.           </div>
  234.         </div>
  235.       </div>
  236.     </section>
  237.  
  238.     <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;">
  239.       <div class="container">
  240.         <div class="row justify-content-center mb-5 pb-3">
  241.           <div class="col-md-8 heading-section heading-section-white text-center ftco-animate fadeInUp ftco-animated">
  242.             <span class="subheading">ARTIFICIAL INTELLIGENCE IMAGE RECOGNITION PLATFORM</span>
  243.             <h2>
  244.               <span>基于</span>人工智能算法<span>的高可用图片处理识别</span>
  245.             </h2>
  246.           </div>
  247.         </div>
  248.         <div class="row justify-content-center">
  249.           <div class="col-md-12">
  250.             <div class="row">
  251.               <div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated">
  252.                 <div class="block-18 text-center">
  253.                   <div class="text">
  254.                     <img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_1.png" alt="识别验证码">
  255.                     <div class="sc_tit">自动学习</div>
  256.                     <span>深度学习人工智能识别图片验证码算法</span>
  257.                   </div>
  258.                 </div>
  259.               </div>
  260.               <div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated">
  261.                 <div class="block-18 text-center">
  262.                   <div class="text">
  263.                     <img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_2.png" alt="验证码工具">
  264.                     <div class="sc_tit">数据优化</div>
  265.                     <span>持续训练优化现有验证码数字识别功能</span>
  266.                   </div>
  267.                 </div>
  268.               </div>
  269.               <div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated">
  270.                 <div class="block-18 text-center">
  271.                   <div class="text">
  272.                     <img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_3.png" alt="图片识别">
  273.                     <div class="sc_tit">准确率</div>
  274.                     <span>不断提高机器字符验证识别广度准确率</span>
  275.                   </div>
  276.                 </div>
  277.               </div>
  278.               <div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate fadeInUp ftco-animated">
  279.                 <div class="block-18 text-center">
  280.                   <div class="text">
  281.                     <img class="sc_img" src="https://obs.jfbym.com/public/static/img/sc_img_4.png" alt="识别验证码">
  282.                     <div class="sc_tit">持续低价</div>
  283.                     <span>不断降低Captchapt验证码识别使用价格</span>
  284.                   </div>
  285.                 </div>
  286.               </div>
  287.             </div>
  288.           </div>
  289.         </div>
  290.       </div>
  291.     </section>
  292.  
  293.     <section class="ftco-section fs-d">
  294.       <div class="container">
  295.         <div class="row justify-content-center mb-5 pb-3">
  296.           <div class="col-md-7 heading-section text-center ftco-animate fadeInUp ftco-animated">
  297.             <span class="subheading">WHAT CAN WE DO</span>
  298.             <h2>
  299.               <span>我们可以</span>做什么
  300.             </h2>
  301.           </div>
  302.         </div>
  303.         <div class="row d-flex fs-d-flex">
  304.           <div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated">
  305.             <div class="blog-entry align-self-stretch">
  306.               <a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_1.jpg');">
  307.                 <div style="background-color: rgba(0,0,0,0.32); height: 100%;">
  308.                   <h3 class="heading">图片识别软件程序</h3>
  309.                   <p>通用图像内容识别技术
  310.                     <br>涵盖数字、英文字母、汉字、图像
  311.                     <br>以及混合内容，自适配识别</p>
  312.                 </div>
  313.               </a>
  314.             </div>
  315.           </div>
  316.           <div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated">
  317.             <div class="blog-entry align-self-stretch">
  318.               <a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_2.jpg');">
  319.                 <div style="background-color: rgba(0,0,0,0.32); height: 100%;">
  320.                   <h3 class="heading">开发商服务</h3>
  321.                   <p>开发者接入向导
  322.                     <br>API接口维基
  323.                     <br>开发者许可协议
  324.                     <br>开发者利润分成
  325.                     <br>开发者后台</p>
  326.                 </div>
  327.               </a>
  328.             </div>
  329.           </div>
  330.           <div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated">
  331.             <div class="blog-entry align-self-stretch">
  332.               <a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_3.jpg');">
  333.                 <div style="background-color: rgba(0,0,0,0.32); height: 100%;">
  334.                   <h3 class="heading">市场主体企业下载</h3>
  335.                   <p>全国1.5亿工商注册信息系统
  336.                     <br>稳定、高效、完整、权威注册下载
  337.                     <br>
  338.                   </p>
  339.                 </div>
  340.               </a>
  341.             </div>
  342.           </div>
  343.           <div class="col-md-3 d-flex ftco-animate fadeInUp ftco-animated">
  344.             <div class="blog-entry align-self-stretch">
  345.               <a target="_blank" class="block-30" style="background-image: url('https://obs.jfbym.com/public/static/img/image_4.jpg');">
  346.                 <div style="background-color: rgba(0,0,0,0.32); height: 100%;">
  347.                   <h3 class="heading">爬虫数据定制</h3>
  348.                   <p>以深度数据为核心
  349.                     <br>个性话定制采集功能
  350.                     <br>为个人、企业、合作商解决提供开放的数据服务</p>
  351.                 </div>
  352.               </a>
  353.             </div>
  354.           </div>
  355.         </div>
  356.       </div>
  357.     </section>
  358.  
  359.  
  360.  
  361.   </div>
  362. </template>
  363.  
  364. <script>
  365.   import initData from "@/data/data.js";
  366.   export default {
  367.       data() {
  368.         return {
  369.           bannerIndex: 1
  370.         };
  371.       },
  372.       mounted() {
  373.  
  374.       },
  375.       methods: {
  376.         //跳转页面
  377.         toPage(path){
  378.           this.$router.push({path:path});
  379.         },
  380.         //banner显示
  381.         showBanner(index){
  382.           this.bannerIndex = index;
  383.         }
  384.       }
  385.     };
  386. </script>

四、总结

项目页面完整，后续可能将不断升级。

关注作者，及时了解更多好项目！

更多优质项目请看作者主页！

获取源码或如需帮助，可通过博客后面名片+作者即可！

 

 其他作品集合（主页更多）：

  1. 《uni-app小程序，基于vue实现电商商城》
  2. 《uni-app基于vue实现商城小程序》
  3. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui实现请假考勤系统》
  4. 《vue+element实现电商商城礼品代发网，商品、订单管理》
  5. 《vue+vant2完美实现香奈儿移动端商城网站》
  6. 《vue+elementui实现联想购物商城，样式美观大方》
  7. 《vue+elementui实现英雄联盟道具城》
  8. 《vue+elementui实现app布局小米商城，样式美观大方，功能完整》
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/189491
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号