about.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <div class="about">
  3. <div class="about-bg">
  4. <div class="name">猎豹AI</div>
  5. <div class="des">智能聚合运力平台</div>
  6. <img class="download" src="../../static/image/download.png" alt="">
  7. <div class="scan">扫码下载APP</div>
  8. <div class="version">
  9. <img class="pc" src="../../static/image/pc-icon.png" alt="">
  10. <div class="versoin-num">猎豹AI聚合配送PC版版本V1.0.1</div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: "about",
  18. data() {
  19. return {};
  20. },
  21. // 监听属性 类似于data概念
  22. computed: {},
  23. // 监控data中的数据变化
  24. watch: {},
  25. // 生命周期 - 创建完成(可以访问当前this实例)
  26. created() {},
  27. // 生命周期 - 挂载完成(可以访问DOM元素)
  28. mounted() {},
  29. // 方法集合
  30. methods: {
  31. },
  32. };
  33. </script>
  34. <style lang="scss" scoped="scoped">
  35. .about {
  36. display: flex;
  37. justify-content: center;
  38. margin-top: 150px;
  39. .about-bg {
  40. display: flex;
  41. flex-direction: column;
  42. align-items: center;
  43. background: url("../../static/image/about-bg.png");
  44. background-size: 100% 100%;
  45. width: 372px;
  46. height: 268px;
  47. .name {
  48. font-weight: bold;
  49. font-size: 40px;
  50. color: #eb5605;
  51. letter-spacing: 10px;
  52. }
  53. .des {
  54. font-size: 16px;
  55. color: #333;
  56. letter-spacing: 10px;
  57. }
  58. .download {
  59. margin-top: 10px;
  60. width: 150px;
  61. height: 150px;
  62. }
  63. .scan {
  64. margin-top: 10px;
  65. font-size: 14px;
  66. color: #333;
  67. }
  68. .version {
  69. margin-top: 20px;
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. background: #eb5605;
  74. opacity: 0.6;
  75. border-radius: 29px;
  76. padding: 10px 20px;
  77. .pc {
  78. width: 21px;
  79. height: 21px;
  80. margin-right: 10px;
  81. }
  82. .versoin-num {
  83. font-size: 12px;
  84. color: #fff;
  85. }
  86. }
  87. }
  88. }
  89. </style>