元气智驾官网前端
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 

153 Zeilen
3.8 KiB

  1. <template>
  2. <div id="footer">
  3. <div class="content">
  4. <img src="@/assets/footer_logo.png" class="lflogo">
  5. <div id="lcenter">
  6. <div class="code">
  7. <img src="@/assets/wechat.png">
  8. <a>关注公众号</a>
  9. </div>
  10. <div class="code">
  11. <img src="@/assets/wechat.png">
  12. <a>关注公众号</a>
  13. </div>
  14. <!-- <div id="ylink">
  15. <div class="link">
  16. <h4>友情链接</h4>
  17. <div class="llink">
  18. <a v-for="(item, index) in linkdata" :key="index">{{ item.label }}</a>
  19. </div>
  20. </div>
  21. <div class="link">
  22. <h4>关于我们</h4>
  23. <div class="llink about">
  24. <a v-for="(item, index) in about" :key="index">{{ item.label }}</a>
  25. </div>
  26. </div>
  27. </div> -->
  28. </div>
  29. <div class="gs">{{ Copyright }}</div>
  30. <!-- <div id="fright">
  31. <img src="@/assets/wechat.png">
  32. <a>关注公众号</a>
  33. </div> -->
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. export default {
  39. name: 'yqfooters',
  40. data () {
  41. return {
  42. linkdata: [
  43. { label: '汽车之家', link: '' },
  44. { label: '懂车帝', link: '' },
  45. { label: '爱卡汽车', link: '' },
  46. { label: '腾讯', link: '' },
  47. { label: '腾讯', link: '' }
  48. ],
  49. about: [
  50. { label: '关于我们', link: '' },
  51. { label: '联系我们', link: '' },
  52. { label: '商务合作', link: '' },
  53. { label: '服务条款', link: '' }
  54. ],
  55. Copyright: 'Copyright © 2023 北京智阅网络科技有限公司 All Rights Reserved'
  56. }
  57. },
  58. components: {}
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. #footer {
  63. width: 100%;
  64. height: 330px;
  65. background: #181818;
  66. position: relative;
  67. background-image: url('../assets/footer_left.png');
  68. background-position: 0% -185px; /* 调整这些值来改变显示的部分 */
  69. background-size: 40% 145%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  70. background-repeat: no-repeat;
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. .content{
  75. width: 1200px;
  76. margin: 0 auto;
  77. }
  78. .lflogo {
  79. width: 184px;
  80. margin-right: 100px;
  81. float: left;
  82. }
  83. #lcenter {
  84. // display: flex;
  85. // flex-direction: column;
  86. float: left;
  87. margin-left: 10%;
  88. #ylink {
  89. display: flex;
  90. .link {
  91. width: 250px;
  92. color: #fff;
  93. h4 {
  94. text-align: left;
  95. margin: 0px !important;
  96. padding-bottom: 20px;
  97. font-size: 16px;
  98. font-weight: 400;
  99. border-bottom: 1px solid #d7d7d746;
  100. }
  101. .llink {
  102. width: 80%;
  103. text-align: left;
  104. a {
  105. font-size: 14px;
  106. font-weight: 400;
  107. color: #ffffff60;
  108. display: inline-block;
  109. margin: 10px 5px 10px 0;
  110. cursor: pointer;
  111. }
  112. }
  113. .about {
  114. width: 60%;
  115. a {
  116. margin: 10px 15px 10px 0;
  117. }
  118. }
  119. }
  120. .link:first-child {
  121. margin-right: 50px;
  122. }
  123. }
  124. .code{
  125. display: inline-block;
  126. margin: 0 30px;
  127. a {
  128. margin-top: 6px;
  129. display: block
  130. }
  131. }
  132. }
  133. .gs {
  134. clear: both;
  135. font-size: 12px;
  136. font-weight: 400;
  137. color: #333336;
  138. padding-top: 40px;
  139. }
  140. #fright {
  141. display: flex;
  142. flex-direction: column;
  143. a {
  144. font-size: 14px;
  145. font-weight: 400;
  146. color: #FFFFFF;
  147. margin-top: 10px;
  148. }
  149. }
  150. }
  151. </style>