正文 

当前位置： 首页 > 技术 > java教程

(二十一)atp应用测试平台——vue实战之大红灯笼高高挂(代码片段)

北溟溟 北溟溟     2023-03-28     748

关键词：

前言

2022年的最后一天班，好的开始，好的结束。把大红灯笼高高挂起来，欢度元旦的到来，兔年的到来。明年再战。明年再见。。。

 正文

  • 正菜奉上lantern.vue灯笼源码
<template>
  <div class="app">
    <div class="lantern-box">
      <div class="lantern-left">
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">元</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">旦</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">快</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">乐</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
      </div>
      <div class="lantern-right">
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">兔</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">年</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">快</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
        <div class="lantern">
          <div class="lines"></div>
          <div class="lantern-a">
            <div class="lantern-b">
              <div class="lantern-t">乐</div>
            </div>
          </div>
          <div class="spike spike-a">
            <div class="spike-c"></div>
            <div class="spike-b"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  name: "lantern-app",
  data() 
    return 
  ,


</script>

<style scoped>
.lantern-box 
  position: relative;
  top: 0px;
  z-index: 999;


.lantern-left 
  float: left;


.lantern-right 
  float: right;


.lantern 
  position: relative;
  width: 120px;
  height: 90px;
  margin: 70px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.8);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 3s infinite ease-in-out;
  box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);


.lantern-a 
  width: 100px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: 12px 8px 8px 8px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;


.lantern-b 
  width: 50px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: -4px 8px 8px 26px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;


.lines 
  position: absolute;
  top: -20px;
  left: 60px;
  width: 3px;
  height: 20px;
  background: #dc8f03;


.spike-a 
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  -webkit-animation: swing 4s infinite ease-in-out;
  -webkit-transform-origin: 50% -45px;
  background: #ffa500;
  border-radius: 0 0 5px 5px;


.spike-b 
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: #dc8f03;
  border-radius: 50%;


.spike-c 
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: #ffa500;
  border-radius: 0 0 0 5px;


.lantern:before 
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  z-index: 999;
  border-radius: 5px 5px 0 0;
  border: solid 1px #dc8f03;
  background: #ffa500;
  background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);


.lantern:after 
  position: absolute;
  bottom: -7px;
  left: 10px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  margin-left: 20px;
  border-radius: 0 0 5px 5px;
  border: solid 1px #dc8f03;
  background: #ffa500;
  background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);


.lantern-t 
  font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
  font-size: 3.2rem;
  color: #dc8f03;
  font-weight: bold;
  line-height: 85px;
  text-align: center;


.lantern-t, .lantern-box 
  background: transparent !important;


@keyframes swing 
  0% 
    -moz-transform: rotate(-10deg)
  

  50% 
    -moz-transform: rotate(10deg)
  

  100% 
    -moz-transform: rotate(-10deg)
  


@keyframes swing 
  0% 
    -webkit-transform: rotate(-10deg)
  

  50% 
    -webkit-transform: rotate(10deg)
  

  100% 
    -webkit-transform: rotate(-10deg)
  

</style>
  • 效果图 

 结语

本人正在参加2022年csdn的博客之星的评选，有心的老铁给个五星好评。投票地址见下方，我们后会有期。。。

https://bbs.csdn.net/topics/611390957

(二十)atp应用测试平台——websocket实现微服务版在线客服聊天室实战案例(代码片段)

前言在前面的博客内容中我们介绍了如何使用websocket实现一个网页版的在线客服聊天室，众所周知，由于websocket是一个长连接，要和服务端保持会话连接，所以其本身并不适用于微服务环境，在微服务环境中&#... 查看详情

atp应用测试平台——关于网页表格的打印及pdf下载的实战案例(代码片段)

前言在网站应用中，我们可能会有这样一个需求，将网页的部分内容，例如表格，网页片段下载打印或者导出PDF，本小节内容正是关于这样一个内容的实战，基于vue2环境开发，希望能够帮助到你。源码... 查看详情

atp应用测试平台——使用vue-video-player视频播放组件实现网页视频流的播放案例实战(代码片段)

前言在网页中播放视频也是我们经常要使用到的功能，例如设备监控的视频流实时播放，MP4、m3u8等视频资源播放等等，在vue项目中，我们可以使用目前封装好的开源组件vue-video-player实现上述的要求。本节我们就... 查看详情

(十三)atp应用测试平台——springboot集成kafka案例实战(代码片段)

前言kafka消息中间键也是我们经常要用到的功能，尤其是在大数据、高并发的项目中，如日志收集、业务数据分发等等。其最核心的俩大功能作用是:①削峰填谷②异步解耦。本节我们主要介绍一下如何在springboot项目中集... 查看详情

爬虫学习笔记（二十一）——appium(代码片段)

一、概念和作用1.1、概念appium是一个移动App（手机应用）自动化工具。支持iOS平台和Android平台上的原生应用，web应用和混合应用。它允许测试人员在不同的平台（iOS，Android）使用同一套API来写自动化测试... 查看详情

atp应用测试平台——关于vue-router前端路由的配置使用案例(代码片段)

前言VueRouter是Vue.js(opensnewwindow)官方的路由管理器。它和Vue.js的核心功能深度集成，功能丰富，是我们构建vue前端项目中必不可少的的组件之一，本节我们简单介绍一下在vue项目中如何使用vue-router组件实现页面的路由... 查看详情

atp应用测试平台——使用easyexcel实现excel导入导出多sheet填充模板下载等功能案例实战(代码片段)

前言Java开发中实现Excel的导入、导出、填充、多sheet页操作等常用功能也是我们经常要面对的开发需求，本文以easyexcel为例，将excel中的常用功能整理成一个个小案例，参考使用。案例源码地址：https://gitee.com/northc... 查看详情

(十九)atp应用测试平台——springboot集成rocketmq案例实战(代码片段)

前言本节内容是关于RocketMQ消息中间键的实战内容，主要介绍在springboot项目中如何集成使用RocketMQ消息中间键，包括消息的发送、消息的接收以及RocketMQ的一些配置说明，以及效果说明。话不多说，开始实战内容。... 查看详情

atp应用测试平台——关于vue中vue-quill-editormavon-editortinymce等多种富文本编辑器的集成使用(代码片段)

...or以及tinymce等的集成及使用。源代码依然托管在我们的ATP应用测试平台中，源码地址：https://gitee.com/northcangap/atp，仅供参考使用。富文本编辑器实现效果如下： 查看详情

(二十四)atp应用测试平台——springboot集成fastdfs上传与下载功能(代码片段)

前言本节内容我们主要介绍一下如何在springboot项目中集成fastdfs组件，实现文件的上传与下载。关于fastdfs服务中间键的安装过程，本节内容不做介绍。fastdfs是一个轻量级的分布式文件系统，也是我们文件存储中常常... 查看详情

(十四)atp应用测试平台——使用docker-compose一键式安装atp应用测试平台的依赖服务(代码片段)

前言关于ATP应用服务测试平台的相关内容已经更新不少，下载项目的小伙伴第一时间一定是想着怎么把这个平台项目跑起来，看下小编花里胡哨的效果是否能正常show。不过由于依赖的增多，项目的服务也随之多了起... 查看详情

(二十二)atp应用测试平台——swagger2集成swagger-bootstrap-ui实现api文档访问(代码片段)

前言原生的swagger文档虽然也可以作为API文档输出，但是不够简洁优美，本节内容我们介绍一下swagger-bootstrap-ui组件，实现对swaggerAPI文档的二次封装，使用API文档更加简洁明了，无论是入参还是结果响应，... 查看详情

vue项目实战-vue2(移动端)(代码片段)

...ge,localStorage(十八)token(令牌)和session(会话)(十九)vue过滤器(二十)微信支付-轮询和websocket(二十一)进入组件,滚动条不在顶部的问题(二十二)keep-alive(背诵)(二十三)配置环境变量(二十四)rem移动端适配(二十五)mixin(混入)(二十六)watch监听... 查看详情

elasticsearch实战（二十一）-使用模板助力索引设计

本文主要讲解ElasticSearch使用模板助力索引设计，帮助大家打好ElasticSearch基础。——continue 查看详情

慕课网实战sparkstreaming实时流处理项目实战笔记二十一之铭文升级版

铭文一级：DataV功能说明1）点击量分省排名/运营商访问占比 SparkSQL项目实战课程：通过IP就能解析到省份、城市、运营商2）浏览器访问占比/操作系统占比 Hadoop项目：userAgentDataV访问的数据库(MySQL),需要能够在公网上访问DataV测试... 查看详情

(十八)atp应用测试平台——关于springboot应用监控的那些事(代码片段)

...快告诉我你的绝招。本节内容我们主要介绍一下springboot应用的常见应用参数监控指标，从而更好的关注springboot应用的运行状况并实现应用的监控。除此之外，我们通过集成一 查看详情

(十八)atp应用测试平台——关于springboot应用监控的那些事(代码片段)

...快告诉我你的绝招。本节内容我们主要介绍一下springboot应用的常见应用参数监控指标，从而更好的关注springboot应用的运行状况并实现应用的监控。除此之外，我们通过集成一 查看详情

elasticsearch实战（二十一）-任务管理(代码片段)

        ElasticSearch支持查询、取消任务的功能，通过任务管理功能，我们对于那种长时间的任务可以做到更好的控制。    1、查询任务         任务api会... 查看详情