元气智驾官网前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

340 lines
8.2 KiB

  1. <template>
  2. <div>
  3. <div id="top" />
  4. <div id="hot">
  5. <div class="content">
  6. <div class="top">
  7. <div class="js">
  8. <a class="title">关于我们</a>
  9. <a class="jcontent">{{ aboutwe.content }}</a>
  10. </div>
  11. <img :src="aboutwe.img">
  12. </div>
  13. <div class="bottom"/>
  14. </div>
  15. </div>
  16. <div id="daliay">
  17. <div class="content">
  18. <div class="top">
  19. <div class="htitle">
  20. <a>成员介绍</a>
  21. </div>
  22. <div id="hotList">
  23. <div class="list" v-for="(item, index) in ldList" :key="index">
  24. <img :src="item.img">
  25. <a class="name">{{ item.name }}</a>
  26. <a class="title">{{ item.title }}</a>
  27. <a class="content">{{ item.content }}</a>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="bottom"/>
  32. </div>
  33. </div>
  34. <div class="swhz">
  35. <div class="content">
  36. <div class="callme">
  37. <a class="title">商务合作</a>
  38. <div>
  39. <a>联系方式: 458233656411</a>
  40. <a>联系邮箱: 458233656411@Gmail.com</a>
  41. </div>
  42. </div>
  43. <img src="../../assets/aboutbottom.png">
  44. </div>
  45. </div>
  46. <!-- <div id="wk">
  47. <div class="content">
  48. <div class="callme">
  49. <a class="title">商务合作</a>
  50. <div>
  51. <a>联系方式: 458233656411</a>
  52. <a>联系邮箱: 458233656411@Gmail.com</a>
  53. </div>
  54. </div>
  55. <img src="../../assets/aboutbottom.png">
  56. </div>
  57. </div> -->
  58. </div>
  59. </template>
  60. <script>
  61. import { aboutUs, memberList } from '@/api/about.js'
  62. export default {
  63. name: 'about',
  64. data () {
  65. return {
  66. aboutwe: {
  67. content: '',
  68. img: ''
  69. },
  70. ldList: [
  71. {
  72. img: '/ld.png',
  73. name: '张磊',
  74. title: 'CEO',
  75. content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
  76. }, {
  77. img: '/ld.png',
  78. name: '周明希',
  79. title: 'AI',
  80. content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
  81. }, {
  82. img: '/ld.png',
  83. name: '周明希',
  84. title: 'AI',
  85. content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
  86. }, {
  87. img: '/ld.png',
  88. name: '周明希',
  89. title: 'AI',
  90. content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索'
  91. }
  92. ]
  93. }
  94. },
  95. components: {
  96. },
  97. mounted () {
  98. this.getaboutUs()
  99. this.getmemberList()
  100. },
  101. methods: {
  102. changenews (item) {
  103. this.informationitem = item
  104. },
  105. changedepth (item) {
  106. this.depthitem = item
  107. },
  108. async getaboutUs () {
  109. const { data: { message, data } } = await aboutUs()
  110. if (message === 'success') {
  111. this.aboutwe.content = data.remark
  112. this.aboutwe.img = data.image
  113. }
  114. },
  115. async getmemberList () {
  116. const { data } = await memberList()
  117. console.log(data)
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss" scoped>
  123. #top {
  124. height: 410px;
  125. width: 100%;
  126. background-image: url('../../assets/abouttop.png');
  127. background-size: 100% 100%;
  128. position: relative;
  129. .txt {
  130. top: 85%;
  131. left: 25%;
  132. position: absolute;
  133. width: 500px;
  134. display: flex;
  135. justify-content: space-between;
  136. a {
  137. line-height: 15px;
  138. font-size: 18px;
  139. font-weight: bold;
  140. color: #FFFFFF;
  141. letter-spacing: 40px;
  142. }
  143. }
  144. }
  145. #hot, #daliay, #wk {
  146. width: 100%;
  147. display: flex;
  148. align-items: center;
  149. flex-direction: column;
  150. justify-content: center;
  151. background: #E3E5EA;
  152. .content {
  153. width: 1200px;
  154. height: 90%;
  155. display: flex;
  156. flex-direction: column;
  157. justify-content: space-between;
  158. padding-top: 30px;
  159. .top, .bottom {
  160. width: 100%;
  161. }
  162. .top {
  163. margin-bottom: 30px;
  164. display: flex;
  165. align-items: center;
  166. justify-content: space-around;
  167. .js {
  168. display: flex;
  169. flex-direction: column;
  170. height: 80%;
  171. .title {
  172. display: inline-block;
  173. border-left: 7px solid #07CAAF;
  174. font-size: 36px;
  175. font-weight: bold;
  176. color: #0D1114;
  177. text-align: left;
  178. padding-left: 30px;
  179. }
  180. .jcontent {
  181. margin-top: 50px;
  182. display: block;
  183. font-size: 16px;
  184. font-weight: 400;
  185. color: #0D1114;
  186. line-height: 30px;
  187. text-align: left;
  188. }
  189. }
  190. img {
  191. width: 600px;
  192. height: 400px;
  193. }
  194. #hotList {
  195. display: flex;
  196. .list {
  197. display: flex;
  198. flex-direction: column;
  199. align-items: center;
  200. img {
  201. width: 170px;
  202. height: 170px;
  203. margin-bottom: 15px;
  204. }
  205. a:not(:nth-last-child(1)) {
  206. margin-bottom: 15px;
  207. }
  208. .name {
  209. font-size: 24px;
  210. font-weight: bold;
  211. color: #0D1114;
  212. line-height: 30px;
  213. }
  214. .title {
  215. font-size: 24px;
  216. font-weight: bold;
  217. color: #07CAAF;
  218. line-height: 30px;
  219. }
  220. .content {
  221. text-align: left;
  222. width: 80%;
  223. font-size: 16px;
  224. font-weight: 400;
  225. color: #0D1114;
  226. line-height: 24px;
  227. }
  228. }
  229. }
  230. }
  231. .bottom {
  232. min-height: 120px;
  233. background-image: url('../../assets/bottom.png');
  234. background-size: 100% 100%;
  235. margin-bottom: 30px;
  236. }
  237. }
  238. }
  239. #daliay {
  240. background: #F2F4F8;
  241. .top {
  242. min-height: 470px;
  243. margin-bottom: 40px;
  244. display: flex;
  245. flex-direction: column;
  246. align-items: center;
  247. justify-content: space-around;
  248. .htitle {
  249. border-left: 7px solid #07CAAF;
  250. font-size: 36px;
  251. font-weight: bold;
  252. color: #0D1114;
  253. text-align: left;
  254. width: 100%;
  255. padding-left: 30px;
  256. }
  257. }
  258. }
  259. .swhz {
  260. background: #E3E5EA;
  261. .content {
  262. display: flex;
  263. flex-direction: row;
  264. align-items: center;
  265. margin: 0 auto;
  266. width: 1200px;
  267. padding: 96px 0;
  268. .callme {
  269. display: flex;
  270. flex-direction: column;
  271. .title {
  272. font-size: 36px;
  273. border-left: 7px solid #07CAAF;
  274. padding-left: 30px;
  275. text-align: left;
  276. font-weight: bold;
  277. color: #0D1114;
  278. }
  279. div {
  280. margin-top: 50px;
  281. a {
  282. text-align: left;
  283. display: block;
  284. padding-left: 35px;
  285. font-size: 18px;
  286. font-weight: 400;
  287. color: #0D1114;
  288. line-height: 30px;
  289. }
  290. }
  291. }
  292. img {
  293. width: 390px;
  294. height: 240px;
  295. margin-left: 300px;
  296. }
  297. }
  298. }
  299. #wk {
  300. height: 400px;
  301. background: #E3E5EA;
  302. .content {
  303. display: flex;
  304. flex-direction: row;
  305. align-items: center;
  306. .callme {
  307. height: 1200px;
  308. display: flex;
  309. flex-direction: column;
  310. .title {
  311. font-size: 36px;
  312. border-left: 7px solid #07CAAF;
  313. padding-left: 30px;
  314. text-align: left;
  315. font-weight: bold;
  316. color: #0D1114;
  317. }
  318. div {
  319. margin-top: 50px;
  320. a {
  321. text-align: left;
  322. display: block;
  323. padding-left: 35px;
  324. font-size: 18px;
  325. font-weight: 400;
  326. color: #0D1114;
  327. line-height: 30px;
  328. }
  329. }
  330. }
  331. img {
  332. width: 390px;
  333. height: 240px;
  334. }
  335. }
  336. }
  337. </style>