solution.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. <template>
  2. <div class="wrapper-tools container">
  3. <h2>一站式PDF解决方案</h2>
  4. <div
  5. ref="mySwiper"
  6. v-swiper:mySwiper="swiperOption"
  7. class="swiper-container"
  8. @mouseenter="handleEnter" @mouseleave="handleLeave"
  9. >
  10. <div class="swiper-button-next button"><Array class="default" /><ArrayHover class="hoverIn" /></div>
  11. <div class="swiper-button-prev button"><Array class="default" /><ArrayHover class="hoverIn" /></div>
  12. <div class="swiper-wrapper">
  13. <div v-for="(item, index) in solution" :key="index" class="swiper-slide">
  14. <div class="solution" :class="item.classObject">
  15. <div class="title">{{ item.title }}</div>
  16. <ul class="des">
  17. <li v-for="(items, indexes) in item.des" :key="indexes">{{ items }}</li>
  18. </ul>
  19. <img class="img" :src="item.src" :alt="item.title">
  20. <div class="link">
  21. <a :href="platform.isWindows ? $config.PDFReaderPro + '/zh-cn/windows/store' : $config.PDFReaderPro + '/zh-cn/store'" target="_blank" class="free">立即购买</a>
  22. <a :href="item.href" target="_blank" class="buy">了解更多</a>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import { directive } from 'vue-awesome-swiper'
  32. import Array from '~/assets/images/PDFReaderPro/array.svg?inline'
  33. import ArrayHover from '~/assets/images/PDFReaderPro/arrayHover.svg?inline'
  34. export default {
  35. directives: {
  36. swiper: directive
  37. },
  38. components: {
  39. Array,
  40. ArrayHover
  41. },
  42. props: ['platform'],
  43. data() {
  44. return {
  45. swiperOption: {
  46. loop: true,
  47. navigation: {
  48. nextEl: '.swiper-button-next',
  49. prevEl: '.swiper-button-prev'
  50. },
  51. autoplay: {
  52. delay: 5000,
  53. autoplayDisableOnInteraction: false
  54. }
  55. },
  56. solution: [
  57. {
  58. title: '教育',
  59. des: [
  60. '凭借其强大的工具,教育工作者可以高效地注释、组织和转换PDF文件。',
  61. 'PDF Reader Pro 的直观界面和OCR使其成为备课和学生作业的必备工具。'
  62. ],
  63. src: '/images/PDFReaderPro/solution/education.png',
  64. href: this.$config.PDFReaderPro + '/education',
  65. classObject: {
  66. 'bg-E0F7FF': true
  67. }
  68. },
  69. {
  70. title: '政府单位',
  71. des: [
  72. '通过安全高效的PDF管理增强政府工作流程。',
  73. '它提供注释、协作和文档签名等功能,可简化流程。'
  74. ],
  75. src: '/images/PDFReaderPro/solution/government.png',
  76. href: this.$config.PDFReaderPro + '/government',
  77. classObject: {
  78. 'bg-E0EBFF': true
  79. }
  80. },
  81. {
  82. title: '银行',
  83. des: [
  84. '适用于银行业务的全面PDF解决方案。',
  85. 'PDF Reader Pro 的高级功能和安全加密可实现高效的文档管理。'
  86. ],
  87. src: '/images/PDFReaderPro/solution/bank.png',
  88. href: this.$config.PDFReaderPro + '/banking',
  89. classObject: {
  90. 'bg-E0FFF0': true
  91. }
  92. },
  93. {
  94. title: '商业',
  95. des: [
  96. '适用于消费者和企业的多功能解决方案。',
  97. '它提供广泛的PDF管理工具,是高效文档协作和管理的理想之选。'
  98. ],
  99. src: '/images/PDFReaderPro/solution/business.png',
  100. href: this.$config.PDFReaderPro + '/business',
  101. classObject: {
  102. 'bg-FFF1E0': true
  103. }
  104. },
  105. {
  106. title: '建筑',
  107. des: [
  108. '简化建筑专业人员的文档管理。',
  109. 'PDF Reader Pro 可轻松访问、查看和编辑建筑文档,提高项目的生产率。'
  110. ],
  111. src: '/images/PDFReaderPro/solution/construction.png',
  112. href: this.$config.PDFReaderPro + '/construction',
  113. classObject: {
  114. 'bg-FFEAE0': true
  115. }
  116. },
  117. {
  118. title: '医疗保健',
  119. des: [
  120. '简化医疗保健领域的文档管理。',
  121. '它可以查看、注释和安全共享医疗记录,加强协作。它提高了效率和病人护理效果。'
  122. ],
  123. src: '/images/PDFReaderPro/solution/healthcare.png',
  124. href: this.$config.PDFReaderPro + '/healthcare',
  125. classObject: {
  126. 'bg-E0FFF6': true
  127. }
  128. }
  129. ]
  130. }
  131. },
  132. methods: {
  133. handleEnter () {
  134. this.$refs.mySwiper.swiper.autoplay.stop()
  135. },
  136. handleLeave () {
  137. this.$refs.mySwiper.swiper.autoplay.start()
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="scss" scoped>
  143. .swiper-container {
  144. position: relative;
  145. overflow: hidden;
  146. z-index: 1;
  147. .swiper-wrapper {
  148. position: relative;
  149. width: 100%;
  150. height: 100%;
  151. z-index: 1;
  152. display: flex;
  153. transition-property: transform;
  154. box-sizing: content-box;
  155. .swiper-slide {
  156. flex-shrink: 0;
  157. width: 100%;
  158. height: 100%;
  159. position: relative;
  160. transition-property: transform;
  161. }
  162. }
  163. .button {
  164. position: absolute;
  165. z-index: 2;
  166. bottom: 293px;
  167. .hoverIn {
  168. display: none;
  169. }
  170. &:hover {
  171. .default {
  172. display: none;
  173. }
  174. .hoverIn {
  175. display: inline;
  176. }
  177. }
  178. }
  179. .swiper-button-prev {
  180. left: 112px;
  181. transform: translateY(-50%);
  182. &:hover{
  183. transform: rotate(180deg) translateY(50%);
  184. }
  185. }
  186. .swiper-button-next {
  187. right: 112px;
  188. transform: rotate(180deg) translateY(50%);
  189. &:hover {
  190. transform: rotate(0deg) translateY(-50%);
  191. }
  192. }
  193. }
  194. div.wrapper-tools {
  195. h2 {
  196. margin-top: 80px;
  197. font-family: Source Han Sans CN;
  198. font-size: 36px;
  199. font-weight: 700;
  200. line-height: 56px;
  201. text-align: center;
  202. color: #192233;
  203. }
  204. .solution {
  205. margin: 0 10px;
  206. margin-top: 40px;
  207. border-radius: 20px;
  208. display: flex;
  209. align-items: center;
  210. justify-content: center;
  211. flex-direction: column;
  212. .title {
  213. margin-top: 40px;
  214. font-family: Source Han Sans CN;
  215. font-size: 24px;
  216. font-weight: 700;
  217. line-height: 40px;
  218. color: #192233;
  219. }
  220. .des {
  221. margin-top: 8px;
  222. li {
  223. font-family: Source Han Sans CN;
  224. font-size: 20px;
  225. line-height: 32px;
  226. color: #404754;
  227. text-align: center;
  228. }
  229. }
  230. .img {
  231. max-width: 840px;
  232. width: 100%;
  233. }
  234. .link {
  235. margin-top: 20px;
  236. margin-bottom: 60px;
  237. display: flex;
  238. a {
  239. width: 180px;
  240. display: flex;
  241. align-items: center;
  242. justify-content: center;
  243. border-radius: 4px;
  244. font-family: Source Han Sans CN;
  245. font-size: 18px;
  246. font-weight: 700;
  247. }
  248. a + a {
  249. margin-left: 16px;
  250. }
  251. .free {
  252. line-height: 44px;
  253. background: #0061F2;
  254. color: #FFFFFF;
  255. &:hover {
  256. background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),linear-gradient(0deg, #0061F2, #0061F2);
  257. }
  258. }
  259. .buy {
  260. line-height: 42px;
  261. border: 1px solid #D3D5DB;
  262. color: #192233;
  263. &:hover {
  264. background: linear-gradient(0deg, rgba(0, 97, 242, 0.1), rgba(0, 97, 242, 0.1));
  265. border: 1px solid #0061F266;
  266. color: #0061F2;
  267. }
  268. }
  269. }
  270. }
  271. .bg-E0F7FF {
  272. background: linear-gradient(180deg, #E0F7FF 0%, rgba(224, 247, 255, 0) 100%);
  273. }
  274. .bg-E0EBFF {
  275. background: linear-gradient(180deg, #E0EBFF 0%, rgba(224, 235, 255, 0) 100%);
  276. }
  277. .bg-E0FFF0 {
  278. background: linear-gradient(180deg, #E0FFF0 0%, rgba(224, 255, 240, 0) 100%);
  279. }
  280. .bg-FFF1E0 {
  281. background: linear-gradient(180deg, #FFF1E0 0%, rgba(255, 241, 224, 0) 100%);
  282. }
  283. .bg-FFEAE0 {
  284. background: linear-gradient(180deg, #FFEAE0 0%, rgba(255, 234, 224, 0) 100%);
  285. }
  286. .bg-E0FFF6 {
  287. background: linear-gradient(180deg, #E0FFF6 0%, rgba(224, 255, 246, 0) 100%);
  288. }
  289. }
  290. @media screen and (max-width: 959px) {
  291. .swiper-container {
  292. .button {
  293. display: none;
  294. }
  295. }
  296. div.wrapper-tools {
  297. h2 {
  298. margin-top: 48px;
  299. font-size: 24px;
  300. line-height: 32px;
  301. }
  302. .solution {
  303. margin: 0px;
  304. margin-top: 20px;
  305. padding: 0 10px;
  306. .title {
  307. margin-top: 20px;
  308. font-size: 20px;
  309. line-height: 28px;
  310. }
  311. .des {
  312. li {
  313. font-size: 14px;
  314. line-height: 20px;
  315. }
  316. }
  317. .link {
  318. margin-bottom: 24px;
  319. display: flex;
  320. flex-direction: column;
  321. a + a {
  322. margin-left: 0px;
  323. margin-top: 16px;
  324. }
  325. }
  326. }
  327. }
  328. }
  329. </style>