元气智驾官网前端
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

298 wiersze
8.4 KiB

  1. <template>
  2. <div>
  3. <el-carousel height="590px">
  4. <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
  5. <div id="txt">
  6. <a class="title">{{ item.title }}</a>
  7. <a class="subtitle">{{ item.subtitle }}</a>
  8. </div>
  9. </el-carousel-item>
  10. </el-carousel>
  11. <div id="hot">
  12. <div class="content">
  13. <div class="top">
  14. <div id="videocar">
  15. <el-carousel :interval="5000" arrow="always" height="500px">
  16. <el-carousel-item v-for="item in 4" :key="item">
  17. <h3>{{ item }}</h3>
  18. </el-carousel-item>
  19. </el-carousel>
  20. </div>
  21. <div id="hottxt">
  22. <el-carousel :interval="5000" height="500px">
  23. <el-carousel-item v-for="item in hotList.right" :key="item.title">
  24. <div class="txtcontent">
  25. <div class="title">
  26. <img src="@/assets/tt.png">
  27. {{ item.title }}
  28. </div>
  29. <p class="content">{{ item.content }}</p>
  30. </div>
  31. <div class="btn">
  32. <el-button plain class="more" size="small">MORE</el-button>
  33. </div>
  34. </el-carousel-item>
  35. </el-carousel>
  36. </div>
  37. </div>
  38. <div class="bottom"/>
  39. </div>
  40. </div>
  41. <div id="daliay">
  42. <div class="content">
  43. <div class="top">
  44. <div class="yyzrbtxt">
  45. <div class="txtcontent">
  46. <img src="@/assets/rblogo.png" class="logo">
  47. <div class="title">
  48. {{ daliay.title }}
  49. </div>
  50. <p class="content">{{ daliay.content }}</p>
  51. </div>
  52. <div class="btn">
  53. <el-button plain class="more" size="small">MORE</el-button>
  54. </div>
  55. </div>
  56. <div class="yyzrbimg" />
  57. </div>
  58. <div class="bottom"/>
  59. </div>
  60. </div>
  61. <div id="wk">
  62. <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
  63. </div>
  64. </div>
  65. </template>
  66. <script>
  67. export default {
  68. name: 'home',
  69. data () {
  70. return {
  71. carouselList: [
  72. { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
  73. { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
  74. ],
  75. hotList: {
  76. left: [],
  77. right: [
  78. {
  79. title: '蔚来汽车:不断扩张的换电“帝国”',
  80. content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长'
  81. },
  82. {
  83. title: '蔚来汽车:不断扩张的换电“帝国”11',
  84. content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长'
  85. }
  86. ]
  87. },
  88. daliay: {
  89. title: '不造车的华为,想成为车企离 不开的企业',
  90. content: '据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽'
  91. }
  92. }
  93. },
  94. components: {
  95. }
  96. }
  97. </script>
  98. <style lang="scss" scoped>
  99. .el-carousel__item{
  100. background-size: 100%;
  101. background-repeat: no-repeat;
  102. display: flex;
  103. justify-content: center;
  104. align-items: flex-end;
  105. #txt {
  106. display: flex;
  107. flex-direction: column;
  108. margin-bottom: 50px;
  109. color: #FFFFFF;
  110. .title {
  111. font-size: 36px;
  112. font-weight: bold;
  113. text-align: center;
  114. margin-bottom: 15px;
  115. }
  116. .subtitle {
  117. font-size: 16px;
  118. font-weight: 400;
  119. opacity: 0.5;
  120. text-align: center;
  121. }
  122. }
  123. }
  124. #hot, #daliay {
  125. width: 100%;
  126. height: 700px;
  127. background: #E3E5EA;
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. .content {
  132. width: 60%;
  133. height: 90%;
  134. display: flex;
  135. flex-direction: column;
  136. justify-content: space-between;
  137. .top, .bottom {
  138. width: 100%;
  139. }
  140. .top {
  141. min-height: 470px;
  142. // background: black;
  143. display: flex;
  144. div {
  145. width: 50%;
  146. height: 100%;
  147. }
  148. .el-carousel {
  149. width: 100% !important;
  150. }
  151. #hottxt {
  152. background-image: url('../../assets/footer_left.png');
  153. background-position: 140% -165px; /* 调整这些值来改变显示的部分 */
  154. background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  155. background-repeat: no-repeat;
  156. :deep .el-carousel__indicators--horizontal {
  157. left: 95%;
  158. }
  159. :deep .el-carousel__button {
  160. width: 5px;
  161. border-radius: 50%;
  162. height: 5px;
  163. }
  164. .el-carousel__item {
  165. display: flex;
  166. align-items: center;
  167. flex-direction: column;
  168. width: 100%;
  169. padding: 0 40px;
  170. .txtcontent {
  171. height: 50% !important;
  172. width:100%;
  173. .title {
  174. height: 26px;
  175. font-size: 26px;
  176. font-weight: bold;
  177. color: #FFFFFF;
  178. width: 100%;
  179. display: flex;
  180. align-items: center;
  181. img {
  182. margin-right: 10px;
  183. }
  184. }
  185. p {
  186. text-align: left;
  187. width: 85%;
  188. font-size: 16px;
  189. font-weight: 400;
  190. line-height: 30px;
  191. color: #ffffff83;
  192. }
  193. }
  194. .btn {
  195. height: 20%;
  196. width:100%;
  197. position: relative;
  198. .more {
  199. position: absolute;
  200. left: 0px;
  201. background: none !important;
  202. border: 1px solid #00F6BD;
  203. opacity: 0.8;
  204. border-radius: 4px;
  205. color: #00F6BD;
  206. }
  207. }
  208. }
  209. }
  210. }
  211. .bottom {
  212. min-height: 120px;
  213. background-image: url('../../assets/bottom.png');
  214. background-size: 100% 100%;
  215. }
  216. }
  217. }
  218. #daliay {
  219. background: #F2F4F8;
  220. .top {
  221. justify-content: space-between;
  222. .yyzrbtxt, .yyzrbimg{
  223. height: 100%;
  224. width: 47%;
  225. .txtcontent {
  226. width: 100%;
  227. height: 80% !important;
  228. text-align: left;
  229. .logo {
  230. margin-bottom: 30px;
  231. }
  232. .title {
  233. border-left: 7px solid #07CAAF;
  234. font-size: 36px;
  235. font-weight: bold;
  236. color: #0D1114;
  237. width: 90%;
  238. height: 79px;
  239. text-align: left;
  240. padding-left:30px;
  241. }
  242. .content {
  243. font-size: 16px;
  244. font-weight: 400;
  245. color: #0D1114;
  246. line-height: 30px;
  247. width: 100%;
  248. text-align: left;
  249. }
  250. }
  251. .btn {
  252. height: 20%;
  253. width:100%;
  254. position: relative;
  255. .more {
  256. position: absolute;
  257. left: 0px;
  258. background: none !important;
  259. border: 1px solid #000000;
  260. color: #0D1114;
  261. opacity: 0.8;
  262. border-radius: 4px;
  263. width: 80px;
  264. }
  265. }
  266. }
  267. .yyzrbimg {
  268. background-image: url('../../assets/yyzrb.png');
  269. background-size: 100% 100%;
  270. width: 50% !important;
  271. }
  272. }
  273. }
  274. #wk {
  275. background-image: url('../../assets/wk.png');
  276. width: 100%;
  277. height: 830px;
  278. background-size: 100% 100%;
  279. position: relative;
  280. .el-button--primary {
  281. width: 200px;
  282. height: 60px;
  283. background: #07CAAF;
  284. border-radius: 12px;
  285. border: none;
  286. font-size: 18px;
  287. font-weight: 400;
  288. color: #FFFFFF;
  289. position: absolute;
  290. top: 70%;
  291. left: 45%;
  292. }
  293. }
  294. </style>