wel.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div>
  3. <basic-container>
  4. <div class="banner-text">
  5. <span>
  6. <a href="https://avue.top/#/pay" target="_blank">
  7. <img src="https://img.shields.io/badge/Avue-2.3.0-green.svg" alt="Build Status">
  8. </a>
  9. <img src="https://img.shields.io/badge/Spring%20Boot-2.2.2.RELEASE-yellowgreen.svg" alt="Downloads">
  10. <img src="https://img.shields.io/badge/Spring%20Cloud-Hoxton.RELEASE-blue.svg" alt="Coverage Status">
  11. </span>
  12. <br>
  13. <span>
  14. <el-collapse v-model="activeNames">
  15. <el-collapse-item title="完整的微服务架构" name="1">
  16. <div>基于Spring Cloud Gateway</div>
  17. <div>基于Spring Cloud Hoxton.RELEASE</div>
  18. <div>基于Spring Boot 2.2.2.RELEASE</div>
  19. </el-collapse-item>
  20. <el-collapse-item title="完善的权限控制" name="2">
  21. <div>基于Spring Security OAuth实现鉴权体系;</div>
  22. <div>深度定制,支持全流程的登录授权,Server Resource</div>
  23. </el-collapse-item>
  24. <el-collapse-item title="完美的容器化支持" name="3">
  25. <div>支持docker部署</div>
  26. <div>支持Rancher2 + Kubernetes部署</div>
  27. <div>支持企业Pass Rainbond 部署</div>
  28. </el-collapse-item>
  29. <el-collapse-item title="最终一致性分布式事务" name="4">
  30. <div>基于开源LCN 分布式事务解决方案深度定制</div>
  31. <div>完美兼容2.X,优化集群部署,提升性能</div>
  32. </el-collapse-item>
  33. <el-collapse-item title="SAAS多租户" name="5">
  34. <div>扩展Spring Cache无缝兼容</div>
  35. <div>支持开发过程无感知</div>
  36. </el-collapse-item>
  37. <el-collapse-item title="Activiti工作流" name="6">
  38. <div>基于activiti5.22整合OAuth2</div>
  39. <div>支持在线流程设计</div>
  40. </el-collapse-item>
  41. <el-collapse-item title="动态路由" name="7">
  42. <div>支持数据库存储SCG路由信息</div>
  43. <div>支持前端动态编辑</div>
  44. </el-collapse-item>
  45. <el-collapse-item title="其他功能" name="8">
  46. <div>单点登录</div>
  47. <div>扩展SBA支持服务监听事件redis保存</div>
  48. <div>扩展Turbine,定制展示UI</div>
  49. <div>扩展ResourceServer完全屏蔽实现细节开发更简单</div>
  50. </el-collapse-item>
  51. </el-collapse>
  52. </span>
  53. </div>
  54. </basic-container>
  55. </div>
  56. </template>
  57. <script>
  58. import { mapGetters } from 'vuex'
  59. export default {
  60. name: 'Wel',
  61. data() {
  62. return {
  63. activeNames: ['1', '2', '3', '4'],
  64. DATA: [],
  65. text: '',
  66. actor: '',
  67. count: 0,
  68. isText: false
  69. }
  70. },
  71. computed: {
  72. ...mapGetters(['website'])
  73. },
  74. methods: {
  75. getData() {
  76. if (this.count < this.DATA.length - 1) {
  77. this.count++
  78. } else {
  79. this.count = 0
  80. }
  81. this.isText = true
  82. this.actor = this.DATA[this.count]
  83. },
  84. setData() {
  85. let num = 0
  86. let count = 0
  87. let active = false
  88. const timeoutstart = 5000
  89. const timeoutend = 1000
  90. const timespeed = 10
  91. setInterval(() => {
  92. if (this.isText) {
  93. if (count == this.actor.length) {
  94. active = true
  95. } else {
  96. active = false
  97. }
  98. if (active) {
  99. num--
  100. this.text = this.actor.substr(0, num)
  101. if (num == 0) {
  102. this.isText = false
  103. setTimeout(() => {
  104. count = 0
  105. this.getData()
  106. }, timeoutend)
  107. }
  108. } else {
  109. num++
  110. this.text = this.actor.substr(0, num)
  111. if (num == this.actor.length) {
  112. this.isText = false
  113. setTimeout(() => {
  114. this.isText = true
  115. count = this.actor.length
  116. }, timeoutstart)
  117. }
  118. }
  119. }
  120. }, timespeed)
  121. }
  122. }
  123. }
  124. </script>
  125. <style scoped="scoped" lang="scss">
  126. .wel-contailer {
  127. position: relative;
  128. }
  129. .banner-text {
  130. position: relative;
  131. padding: 0 20px;
  132. font-size: 20px;
  133. text-align: center;
  134. color: #333;
  135. }
  136. .banner-img {
  137. position: absolute;
  138. top: 0;
  139. left: 0;
  140. width: 100%;
  141. height: 100%;
  142. opacity: 0.8;
  143. display: none;
  144. }
  145. .actor {
  146. height: 250px;
  147. overflow: hidden;
  148. font-size: 18px;
  149. color: #333;
  150. }
  151. .actor:after {
  152. content: '';
  153. width: 3px;
  154. height: 25px;
  155. vertical-align: -5px;
  156. margin-left: 5px;
  157. background-color: #333;
  158. display: inline-block;
  159. animation: blink 0.4s infinite alternate;
  160. }
  161. .typeing:after {
  162. animation: none;
  163. }
  164. @keyframes blink {
  165. to {
  166. opacity: 0;
  167. }
  168. }
  169. </style>