| @@ -0,0 +1,3 @@ | |||
| > 1% | |||
| last 2 versions | |||
| not dead | |||
| @@ -0,0 +1,5 @@ | |||
| [*.{js,jsx,ts,tsx,vue}] | |||
| indent_style = space | |||
| indent_size = 2 | |||
| trim_trailing_whitespace = true | |||
| insert_final_newline = true | |||
| @@ -0,0 +1,17 @@ | |||
| module.exports = { | |||
| root: true, | |||
| env: { | |||
| node: true | |||
| }, | |||
| 'extends': [ | |||
| 'plugin:vue/essential', | |||
| '@vue/standard' | |||
| ], | |||
| parserOptions: { | |||
| parser: 'babel-eslint' | |||
| }, | |||
| rules: { | |||
| 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | |||
| 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' | |||
| } | |||
| } | |||
| @@ -0,0 +1,23 @@ | |||
| .DS_Store | |||
| node_modules | |||
| /dist | |||
| # local env files | |||
| .env.local | |||
| .env.*.local | |||
| # Log files | |||
| npm-debug.log* | |||
| yarn-debug.log* | |||
| yarn-error.log* | |||
| pnpm-debug.log* | |||
| # Editor directories and files | |||
| .idea | |||
| .vscode | |||
| *.suo | |||
| *.ntvs* | |||
| *.njsproj | |||
| *.sln | |||
| *.sw? | |||
| @@ -0,0 +1 @@ | |||
| shamefully-hoist=true | |||
| @@ -0,0 +1,5 @@ | |||
| module.exports = { | |||
| presets: [ | |||
| '@vue/cli-plugin-babel/preset' | |||
| ] | |||
| } | |||
| @@ -0,0 +1,10 @@ | |||
| { | |||
| "compilerOptions": { | |||
| "baseUrl": "./", | |||
| "paths": { | |||
| "@/*": [ | |||
| "src/*" | |||
| ] | |||
| } | |||
| } | |||
| } | |||
| @@ -0,0 +1,32 @@ | |||
| { | |||
| "name": "yqzjpc", | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "scripts": { | |||
| "serve": "vue-cli-service serve", | |||
| "build": "vue-cli-service build", | |||
| "lint": "vue-cli-service lint" | |||
| }, | |||
| "dependencies": { | |||
| "core-js": "^3.6.5", | |||
| "element-ui": "^2.15.14", | |||
| "vue": "^2.6.11", | |||
| "vue-router": "^3.5.2" | |||
| }, | |||
| "devDependencies": { | |||
| "@vue/cli-plugin-babel": "~4.5.9", | |||
| "@vue/cli-plugin-eslint": "~4.5.9", | |||
| "@vue/cli-service": "~4.5.9", | |||
| "@vue/eslint-config-standard": "^5.1.2", | |||
| "babel-eslint": "^10.1.0", | |||
| "eslint": "^6.7.2", | |||
| "eslint-plugin-import": "^2.20.2", | |||
| "eslint-plugin-node": "^11.1.0", | |||
| "eslint-plugin-promise": "^4.2.1", | |||
| "eslint-plugin-standard": "^4.0.0", | |||
| "eslint-plugin-vue": "^6.2.2", | |||
| "node-sass": "^4.12.0", | |||
| "sass-loader": "^8.0.2", | |||
| "vue-template-compiler": "^2.6.11" | |||
| } | |||
| } | |||
| @@ -0,0 +1,17 @@ | |||
| <!DOCTYPE html> | |||
| <html lang=""> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||
| <link rel="icon" href="<%= BASE_URL %>logo.jpg"> | |||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||
| </head> | |||
| <body> | |||
| <noscript> | |||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||
| </noscript> | |||
| <div id="app"></div> | |||
| <!-- built files will be auto injected --> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,22 @@ | |||
| <template> | |||
| <div id="app"> | |||
| <router-view/> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'App' | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| #app { | |||
| font-family: Avenir, Helvetica, Arial, sans-serif; | |||
| -webkit-font-smoothing: antialiased; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| text-align: center; | |||
| color: #2c3e50; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,58 @@ | |||
| <template> | |||
| <div class="hello"> | |||
| <h1>{{ msg }}</h1> | |||
| <p> | |||
| For a guide and recipes on how to configure / customize this project,<br> | |||
| check out the | |||
| <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | |||
| </p> | |||
| <h3>Installed CLI Plugins</h3> | |||
| <ul> | |||
| <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> | |||
| <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> | |||
| </ul> | |||
| <h3>Essential Links</h3> | |||
| <ul> | |||
| <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> | |||
| <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> | |||
| <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | |||
| <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | |||
| <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | |||
| </ul> | |||
| <h3>Ecosystem</h3> | |||
| <ul> | |||
| <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | |||
| <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | |||
| <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | |||
| <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | |||
| <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | |||
| </ul> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'HelloWorld', | |||
| props: { | |||
| msg: String | |||
| } | |||
| } | |||
| </script> | |||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | |||
| <style scoped lang="scss"> | |||
| h3 { | |||
| margin: 40px 0 0; | |||
| } | |||
| ul { | |||
| list-style-type: none; | |||
| padding: 0; | |||
| } | |||
| li { | |||
| display: inline-block; | |||
| margin: 0 10px; | |||
| } | |||
| a { | |||
| color: #42b983; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,131 @@ | |||
| <template> | |||
| <div id="footer"> | |||
| <img src="@/assets/footer_logo.png" class="lflogo"> | |||
| <div id="lcenter"> | |||
| <div id="ylink"> | |||
| <div class="link"> | |||
| <h4>友情链接</h4> | |||
| <div class="llink"> | |||
| <a v-for="(item, index) in linkdata" :key="index">{{ item.label }}</a> | |||
| </div> | |||
| </div> | |||
| <div class="link"> | |||
| <h4>关于我们</h4> | |||
| <div class="llink about"> | |||
| <a v-for="(item, index) in about" :key="index">{{ item.label }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <a class="gs">{{ Copyright }}</a> | |||
| </div> | |||
| <div id="fright"> | |||
| <img src="@/assets/wechat.png"> | |||
| <a>关注公众号</a> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'yqfooters', | |||
| data () { | |||
| return { | |||
| linkdata: [ | |||
| { label: '汽车之家', link: '' }, | |||
| { label: '懂车帝', link: '' }, | |||
| { label: '爱卡汽车', link: '' }, | |||
| { label: '腾讯', link: '' }, | |||
| { label: '腾讯', link: '' } | |||
| ], | |||
| about: [ | |||
| { label: '关于我们', link: '' }, | |||
| { label: '联系我们', link: '' }, | |||
| { label: '商务合作', link: '' }, | |||
| { label: '服务条款', link: '' } | |||
| ], | |||
| Copyright: 'Copyright © 2023 北京智阅网络科技有限公司 All Rights Reserved' | |||
| } | |||
| }, | |||
| components: {} | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| #footer { | |||
| width: 100%; | |||
| height: 330px; | |||
| background: #181818; | |||
| position: relative; | |||
| background-image: url('../assets/footer_left.png'); | |||
| background-position: 0% -185px; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 40% 145%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| .lflogo { | |||
| width: 184px; | |||
| height: 49px; | |||
| margin-right: 100px; | |||
| } | |||
| #lcenter { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-right: 10%; | |||
| #ylink { | |||
| display: flex; | |||
| .link { | |||
| width: 250px; | |||
| color: #fff; | |||
| h4 { | |||
| text-align: left; | |||
| margin: 0px !important; | |||
| padding-bottom: 20px; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| border-bottom: 1px solid #d7d7d746; | |||
| } | |||
| .llink { | |||
| width: 80%; | |||
| text-align: left; | |||
| a { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #ffffff60; | |||
| display: inline-block; | |||
| margin: 10px 5px 10px 0; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| .about { | |||
| width: 60%; | |||
| a { | |||
| margin: 10px 15px 10px 0; | |||
| } | |||
| } | |||
| } | |||
| .link:first-child { | |||
| margin-right: 50px; | |||
| } | |||
| } | |||
| } | |||
| .gs { | |||
| font-size: 12px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| color: #333336; | |||
| margin-top: 20px; | |||
| text-align: right; | |||
| margin-right: 5%; | |||
| } | |||
| #fright { | |||
| display: flex; | |||
| flex-direction: column; | |||
| a { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #FFFFFF; | |||
| margin-top: 10px; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,51 @@ | |||
| <template> | |||
| <el-menu | |||
| :default-active="activeIndex" | |||
| class="el-menu-demo" | |||
| mode="horizontal" | |||
| background-color="#00000063" | |||
| text-color="#fff" | |||
| router | |||
| active-text-color="#00ebc3"> | |||
| <el-menu-item v-for="item in layers" :key="item.path" :index="item.path">{{ item.name }}</el-menu-item> | |||
| <!-- <el-menu-item index="2">汽车资讯</el-menu-item> | |||
| <el-menu-item index="3">元宇宙日爆</el-menu-item> | |||
| <el-menu-item index="4">AIGC</el-menu-item> | |||
| <el-menu-item index="5">关于我们</el-menu-item> --> | |||
| </el-menu> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'yqheaders', | |||
| data () { | |||
| return { | |||
| activeIndex: '/', | |||
| layers: [ | |||
| { path: '/', name: '首页' }, | |||
| { path: '/information', name: '汽车资讯' }, | |||
| { path: '/metadaily', name: '元宇宙日爆' }, | |||
| { path: '/aigc', name: 'AIGC' }, | |||
| { path: '/about', name: '关于我们' } | |||
| ] | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-menu { | |||
| background: none !important; | |||
| border-bottom: none !important; | |||
| width: 50%; | |||
| } | |||
| .el-menu-item { | |||
| margin-right: 3%; | |||
| background-color: #ffffff00 !important; | |||
| } | |||
| .el-menu-item:nth-last-child() { | |||
| margin-right: 0; | |||
| } | |||
| .is-active { | |||
| color: #fff !important; | |||
| border-bottom: 5px solid #00ebc3 !important; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,69 @@ | |||
| <template> | |||
| <el-container> | |||
| <el-header> | |||
| <img src="@/assets/logo.png" id="logo" /> | |||
| <yqheaders/> | |||
| <el-button plain class="login" size="small">注册 / 登陆</el-button> | |||
| </el-header> | |||
| <el-main> | |||
| <router-view /> | |||
| </el-main> | |||
| <yqfooters/> | |||
| </el-container> | |||
| </template> | |||
| <script> | |||
| import yqheaders from '@/components/header.vue' | |||
| import yqfooters from '@/components/footer.vue' | |||
| export default { | |||
| name: 'layouts', | |||
| data () { | |||
| return {} | |||
| }, | |||
| components: { | |||
| yqheaders, | |||
| yqfooters | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-container { | |||
| margin: 0; | |||
| padding: 0; | |||
| .el-header { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| margin:0; | |||
| padding: 0; | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: center; | |||
| height: 77px; | |||
| background: #00000081; | |||
| align-items: center; | |||
| z-index: 999; | |||
| #logo { | |||
| width: 163px; | |||
| height: 43px; | |||
| image-rendering: pixelated; | |||
| margin-right: 70px; | |||
| } | |||
| .login { | |||
| background: none !important; | |||
| border: 1px solid #00F6BD; | |||
| opacity: 0.8; | |||
| border-radius: 4px; | |||
| color: #fff; | |||
| } | |||
| } | |||
| .el-main { | |||
| padding: 0; | |||
| margin: 0; | |||
| } | |||
| .el-footer { | |||
| margin:0; | |||
| padding: 0; | |||
| width: 100%; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,13 @@ | |||
| import Vue from 'vue' | |||
| import Element from 'element-ui' | |||
| import '@/styles/index.scss' | |||
| import 'element-ui/lib/theme-chalk/index.css' | |||
| import '@/styles/element-variables.scss' | |||
| import App from './App.vue' | |||
| import router from './router' | |||
| Vue.config.productionTip = false | |||
| Vue.use(Element) | |||
| new Vue({ | |||
| router, | |||
| render: h => h(App) | |||
| }).$mount('#app') | |||
| @@ -0,0 +1,89 @@ | |||
| import Vue from 'vue' | |||
| import VueRouter from 'vue-router' | |||
| import layout from '@/layouts/index.vue' | |||
| import home from '@/views/home/index.vue' | |||
| Vue.use(VueRouter) | |||
| const routes = [ | |||
| { | |||
| path: '/', | |||
| component: layout, | |||
| children: [ | |||
| { | |||
| path: '', | |||
| component: home | |||
| // children: [ | |||
| // { | |||
| // path: '', | |||
| // name: 'reveal', | |||
| // component: reveal | |||
| // }, | |||
| // { | |||
| // path: '/observationDataQuery', | |||
| // name: 'observationDataQuery', | |||
| // component: () => import(/* webpackChunkName: "observationDataQuery" */ '../views/observation/index.vue') | |||
| // }, | |||
| // { | |||
| // path: '/forecast', | |||
| // name: 'forecast', | |||
| // component: () => import(/* webpackChunkName: "forecast" */ '../views/forecast/index.vue') | |||
| // }, | |||
| // { | |||
| // path: '/otherforecast', | |||
| // name: 'otherforecast', | |||
| // component: () => import(/* webpackChunkName: "otherforecast" */ '../views/otherforecast/index.vue') | |||
| // }, | |||
| // { | |||
| // path: '/examine', | |||
| // name: 'examine', | |||
| // component: () => import(/* webpackChunkName: "examine" */ '../views/examine/index.vue') | |||
| // }, | |||
| // { | |||
| // path: '/diagnosis', | |||
| // name: 'diagnosis', | |||
| // component: () => import(/* webpackChunkName: "diagnosis" */ '../views/diagnosis/index.vue') | |||
| // } | |||
| // ] | |||
| }, | |||
| { | |||
| path: '/information', | |||
| component: () => import(/* webpackChunkName: "information" */ '@/views/information/index.vue') | |||
| }, | |||
| { | |||
| path: '/metadaily', | |||
| component: () => import(/* webpackChunkName: "metadaily" */ '@/views/metadaily/index.vue') | |||
| }, | |||
| { | |||
| path: '/aigc', | |||
| component: () => import(/* webpackChunkName: "aigc" */ '@/views/aigc/index.vue') | |||
| }, | |||
| { | |||
| path: '/about', | |||
| component: () => import(/* webpackChunkName: "about" */ '@/views/about/index.vue') | |||
| }, | |||
| { | |||
| path: '/articleList', | |||
| component: () => import(/* webpackChunkName: "articleList" */ '@/views/article/list.vue') | |||
| }, | |||
| { | |||
| path: '/articleDetails', | |||
| component: () => import(/* webpackChunkName: "articleDetails" */ '@/views/article/details.vue') | |||
| } | |||
| ] | |||
| } | |||
| ] | |||
| const router = new VueRouter({ | |||
| routes | |||
| }) | |||
| // router.beforeEach(function (to, from, next) { | |||
| // if (!localStorage.getItem('loginName')) { | |||
| // if (to.path !== '/login') { | |||
| // return next('/login') | |||
| // } | |||
| // } | |||
| // next() | |||
| // }) | |||
| export default router | |||
| @@ -0,0 +1,16 @@ | |||
| /* 改变主题色变量 */ | |||
| $--color-primary: #00ebc3 !important; | |||
| .el-carousel { | |||
| .el-carousel__indicators { | |||
| .is-active { | |||
| button{ | |||
| background-color: aqua; | |||
| } | |||
| } | |||
| } | |||
| .el-carousel__indicators--outside { | |||
| bottom: 0; | |||
| position: absolute; | |||
| } | |||
| } | |||
| @@ -0,0 +1,14 @@ | |||
| html, body, #app { | |||
| width: 100%; | |||
| height: 100%; | |||
| padding: 0; | |||
| margin: 0; | |||
| } | |||
| html::-webkit-scrollbar { | |||
| display: none; /* 隐藏Webkit浏览器的滚动条 */ | |||
| } | |||
| html { | |||
| -ms-overflow-style: none; /* IE 和 Edge */ | |||
| scrollbar-width: none; /* Firefox */ | |||
| overflow: scroll; /* 保持滚动功能 */ | |||
| } | |||
| @@ -0,0 +1,266 @@ | |||
| <template> | |||
| <div> | |||
| <div id="top" /> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="js"> | |||
| <a class="title">关于我们</a> | |||
| <a class="jcontent">据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽</a> | |||
| </div> | |||
| <img src="../../assets/about.png"> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="htitle"> | |||
| <a>成员介绍</a> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in ldList" :key="index"> | |||
| <img :src="item.img"> | |||
| <a class="name">{{ item.name }}</a> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="content">{{ item.content }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="wk"> | |||
| <div class="content"> | |||
| <div class="callme"> | |||
| <a class="title">商务合作</a> | |||
| <div> | |||
| <a>联系方式: 458233656411</a> | |||
| <a>联系邮箱: 458233656411@Gmail.com</a> | |||
| </div> | |||
| </div> | |||
| <img src="../../assets/aboutbottom.png"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'about', | |||
| data () { | |||
| return { | |||
| ldList: [ | |||
| { | |||
| img: '/ld.png', | |||
| name: '张磊', | |||
| title: 'CEO', | |||
| content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索' | |||
| }, { | |||
| img: '/ld.png', | |||
| name: '周明希', | |||
| title: 'AI', | |||
| content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索' | |||
| }, { | |||
| img: '/ld.png', | |||
| name: '周明希', | |||
| title: 'AI', | |||
| content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索' | |||
| }, { | |||
| img: '/ld.png', | |||
| name: '周明希', | |||
| title: 'AI', | |||
| content: '还推出了一系列的互联网服务和产品,包括在线地图、音乐和视频等。百度的出现为人们提供了更便利的信息搜索' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| components: { | |||
| }, | |||
| methods: { | |||
| changenews (item) { | |||
| this.informationitem = item | |||
| }, | |||
| changedepth (item) { | |||
| this.depthitem = item | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| #top { | |||
| height: 410px; | |||
| width: 100%; | |||
| background-image: url('../../assets/abouttop.png'); | |||
| background-size: 100% 100%; | |||
| position: relative; | |||
| .txt { | |||
| top: 85%; | |||
| left: 25%; | |||
| position: absolute; | |||
| width: 500px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| a { | |||
| line-height: 15px; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| letter-spacing: 40px; | |||
| } | |||
| } | |||
| } | |||
| #hot, #daliay, #wk { | |||
| width: 100%; | |||
| height: 700px; | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| background: #E3E5EA; | |||
| .content { | |||
| width: 60%; | |||
| height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| .js { | |||
| display: flex; | |||
| flex-direction: column; | |||
| height: 80%; | |||
| .title { | |||
| display: inline-block; | |||
| border-left: 7px solid #07CAAF; | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| color: #0D1114; | |||
| text-align: left; | |||
| padding-left: 30px; | |||
| } | |||
| .jcontent { | |||
| margin-top: 50px; | |||
| display: block; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #0D1114; | |||
| line-height: 30px; | |||
| text-align: left; | |||
| } | |||
| } | |||
| img { | |||
| width: 600px; | |||
| height: 400px; | |||
| } | |||
| #hotList { | |||
| display: flex; | |||
| .list { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| img { | |||
| width: 170px; | |||
| height: 170px; | |||
| margin-bottom: 15px; | |||
| } | |||
| a:not(:nth-last-child(1)) { | |||
| margin-bottom: 15px; | |||
| } | |||
| .name { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| color: #0D1114; | |||
| line-height: 30px; | |||
| } | |||
| .title { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| line-height: 30px; | |||
| } | |||
| .content { | |||
| text-align: left; | |||
| width: 80%; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #0D1114; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| min-height: 120px; | |||
| background-image: url('../../assets/bottom.png'); | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| } | |||
| #daliay { | |||
| background: #F2F4F8; | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| .htitle { | |||
| border-left: 7px solid #07CAAF; | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| color: #0D1114; | |||
| text-align: left; | |||
| width: 100%; | |||
| padding-left: 30px; | |||
| } | |||
| } | |||
| } | |||
| #wk { | |||
| height: 400px; | |||
| background: #E3E5EA; | |||
| .content { | |||
| display: flex; | |||
| flex-direction: row; | |||
| align-items: center; | |||
| .callme { | |||
| height: 60%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| .title { | |||
| font-size: 36px; | |||
| border-left: 7px solid #07CAAF; | |||
| padding-left: 30px; | |||
| text-align: left; | |||
| font-weight: bold; | |||
| color: #0D1114; | |||
| } | |||
| div { | |||
| margin-top: 50px; | |||
| a { | |||
| text-align: left; | |||
| display: block; | |||
| padding-left: 35px; | |||
| font-size: 18px; | |||
| font-weight: 400; | |||
| color: #0D1114; | |||
| line-height: 30px; | |||
| } | |||
| } | |||
| } | |||
| img { | |||
| width: 390px; | |||
| height: 240px; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,272 @@ | |||
| <template> | |||
| <div> | |||
| <div id="top"> | |||
| <div class="txt"> | |||
| <a>META</a> | |||
| <a>AUTO</a> | |||
| </div> | |||
| <el-form ref="form" :model="form" label-width="0px"> | |||
| <el-form-item> | |||
| <el-input v-model="form.name" placeholder="手机号"></el-input> | |||
| </el-form-item> | |||
| <el-form-item> | |||
| <el-input v-model="form.name" placeholder="登陆密码"></el-input> | |||
| </el-form-item> | |||
| <el-form-item> | |||
| <el-input v-model="form.name" placeholder="验证码"></el-input> | |||
| </el-form-item> | |||
| <el-form-item class="nomargin"> | |||
| <el-button type="primary" >登陆</el-button> | |||
| </el-form-item> | |||
| <el-form-item class="nomargin"> | |||
| <a>使用短信登陆</a> | |||
| </el-form-item> | |||
| <el-form-item> | |||
| <el-button type="primary" class="createai">制作数字人</el-button> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="ai" v-for="(item, key) in ailist" :key="key"> | |||
| <img :src="item.img"> | |||
| <a> {{ item.label }}</a> | |||
| </div> | |||
| <div class="aitxt"> | |||
| <a class="title">{{ aitxt.title }}</a> | |||
| <a class="content">{{ aitxt.content }}</a> | |||
| <el-button round>制作数字人</el-button> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="htitle"> | |||
| <a class="tle">资讯</a> | |||
| <div class="item"> | |||
| <a v-for="item in information" :key="item" @click="changenews(item)" :class="{ clk: informationitem === item }">{{ item }}</a> | |||
| </div> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in carList" :key="index"> | |||
| <img :src="item.img"> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| <!-- <a>{{ item.title }}</a> --> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'aigc', | |||
| data () { | |||
| return { | |||
| form: { | |||
| name: '', | |||
| region: '', | |||
| date1: '', | |||
| date2: '', | |||
| delivery: false, | |||
| type: [], | |||
| resource: '', | |||
| desc: '' | |||
| }, | |||
| ailist: [ | |||
| { | |||
| img: '/ai1.png', | |||
| label: 'XWOM 002' | |||
| }, | |||
| { | |||
| img: '/ai2.png', | |||
| label: '数字人ACER' | |||
| }, | |||
| { | |||
| img: '/ai3.png', | |||
| label: '车助手002' | |||
| } | |||
| ], | |||
| aitxt: { | |||
| title: 'ACER助力车企新势力', | |||
| content: '作为国产豪华大皮卡山海炮的越野版本,山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发,搭载国内最强的自研3.0T' | |||
| } | |||
| } | |||
| }, | |||
| components: { | |||
| }, | |||
| methods: { | |||
| changenews (item) { | |||
| this.informationitem = item | |||
| }, | |||
| changedepth (item) { | |||
| this.depthitem = item | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| #top { | |||
| height: 590px; | |||
| width: 100%; | |||
| background-image: url('../../assets/aigctop.png'); | |||
| background-size: 100.5% 100%; | |||
| position: relative; | |||
| .txt { | |||
| top: 85%; | |||
| left: 25%; | |||
| position: absolute; | |||
| width: 500px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| a { | |||
| line-height: 15px; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| letter-spacing: 40px; | |||
| } | |||
| } | |||
| .el-form { | |||
| position: absolute; | |||
| top: 40%; | |||
| left: 55%; | |||
| .el-form-item { | |||
| width: 350px; | |||
| } | |||
| .el-button { | |||
| width: 100%; | |||
| background-color: rgba(0, 0, 0, 0.384); | |||
| border: 0px; | |||
| } | |||
| .createai { | |||
| background-color:#07CAAF | |||
| } | |||
| a { | |||
| color: #FFFFFF; | |||
| } | |||
| .nomargin { | |||
| margin-bottom: 0px !important; | |||
| } | |||
| } | |||
| } | |||
| #hot, #daliay { | |||
| width: 100%; | |||
| height: 700px; | |||
| background: #E3E5EA; | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| .content { | |||
| width: 60%; | |||
| height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| .ai { | |||
| position: relative; | |||
| a { | |||
| bottom: 0; | |||
| left: 0; | |||
| position: absolute; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #1C679F; | |||
| line-height: 48px; | |||
| width: 100%; | |||
| } | |||
| } | |||
| .aitxt { | |||
| width: 250px; | |||
| height: 85%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: space-around; | |||
| .title { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| } | |||
| .content { | |||
| width: 100%; | |||
| text-align: left; | |||
| font-size: 18px; | |||
| font-family: Microsoft YaHei; | |||
| font-weight: 400; | |||
| color: #00161C; | |||
| line-height: 30px; | |||
| } | |||
| .el-button { | |||
| border: none; | |||
| background-color: #07CAAF; | |||
| font-size: 14px; | |||
| color: #FFFFFF; | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| min-height: 120px; | |||
| background-image: url('../../assets/bottom.png'); | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| } | |||
| // #hot { | |||
| // .content { | |||
| // .top { | |||
| // min-height: 470px; | |||
| // margin-bottom: 40px; | |||
| // background-color: #FFFFFF; | |||
| // display: flex; | |||
| // #imgtxt { | |||
| // width: 55%; | |||
| // position: relative; | |||
| // display: flex; | |||
| // justify-content: center; | |||
| // align-items: center; | |||
| // img { | |||
| // width: 90%; | |||
| // height: 90%; | |||
| // } | |||
| // .newsTitle{ | |||
| // position: absolute; | |||
| // bottom: 5%; | |||
| // left: 5%; | |||
| // display: inline-block; | |||
| // font-size: 18px; | |||
| // font-weight: bold; | |||
| // color: #FFFFFF; | |||
| // line-height: 48px; | |||
| // width: 90%; | |||
| // background-color: #0000007e; | |||
| // } | |||
| // } | |||
| // } | |||
| // } | |||
| // } | |||
| </style> | |||
| @@ -0,0 +1,255 @@ | |||
| <template> | |||
| <div> | |||
| <el-carousel height="590px"> | |||
| <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
| <div id="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="list"> | |||
| <h2>强不强?吉利银河E8全景智慧座舱揭秘</h2> | |||
| <div class="date">发布日期:2023/01/02</div> | |||
| <p>同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长</p> | |||
| <img src="/jl.png"> | |||
| <p>在这块大屏内部,吉利银河还专门针对不少App进行了适配,本次我们体验了狂野飙车、雷石KTV以及爱奇艺视频。前两者可以占据整个屏</p> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="rtop"> | |||
| <div class="title"> | |||
| <a>热点新闻</a> | |||
| </div> | |||
| <div class="nav" v-for="(item,index) in news" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.txt }}</a> | |||
| </div> | |||
| </div> | |||
| <div class="rbottom"> | |||
| <div class="title"> | |||
| <a>相关视频</a> | |||
| </div> | |||
| <div class="nav rtmnav" v-for="(item,index) in videos" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.txt }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'home', | |||
| data () { | |||
| return { | |||
| carouselList: [ | |||
| { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
| { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
| ], | |||
| articleList: [ | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| }, | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| }, | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| } | |||
| ], | |||
| news: [ | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| } | |||
| ], | |||
| videos: [ | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| components: { | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-carousel__item{ | |||
| background-size: 100%; | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| #txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-bottom: 50px; | |||
| color: #FFFFFF; | |||
| .title { | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| margin-bottom: 15px; | |||
| } | |||
| .subtitle { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| opacity: 0.5; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| #hot { | |||
| width: 100%; | |||
| background: #F2F4F8; | |||
| display: flex; | |||
| justify-content: center; | |||
| .content { | |||
| width: 70%; | |||
| margin: 50px 0 50px 0; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .list { | |||
| padding: 10px; | |||
| width: 76%; | |||
| background-color: #FFFFFF; | |||
| .article { | |||
| display: flex; | |||
| img { | |||
| width: 200px; | |||
| height: 150px; | |||
| } | |||
| .acontent { | |||
| height: 150px; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| padding: 0 10px; | |||
| margin-bottom: 20px; | |||
| .txt { | |||
| a { | |||
| display: block; | |||
| text-align: left; | |||
| } | |||
| } | |||
| .title { | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| } | |||
| .content { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 24px; | |||
| } | |||
| .date { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #7D8392; | |||
| line-height: 30px; | |||
| text-align: left; | |||
| } | |||
| } | |||
| .acontent:not(:last-child) { | |||
| margin-bottom: 0px; | |||
| } | |||
| } | |||
| } | |||
| .right { | |||
| width: 21%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| flex-direction: column; | |||
| .rtop, .rbottom { | |||
| background-color: #FFFFFF; | |||
| height: 49%; | |||
| width: 100%; | |||
| .title { | |||
| background-image: url('../../assets/airtlctl.png'); | |||
| background-position: 0 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| a { | |||
| font-size: 20px; | |||
| font-weight: bold; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| width: 100%; | |||
| text-align: left; | |||
| display: inline-block; | |||
| margin-left: 40px; | |||
| } | |||
| } | |||
| .nav { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| margin: 10px 0 10px 0; | |||
| img { | |||
| width: 240px; | |||
| height: 180px; | |||
| position: relative; | |||
| } | |||
| a { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| .rtmnav { | |||
| img::after { | |||
| content: ''; | |||
| z-index: 99; | |||
| width: 67px; | |||
| height: 67px; | |||
| position: absolute; | |||
| background-image: url('../../assets/play.png'); | |||
| // background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
| // background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .el-pagination.is-background .el-pager li:not(.disabled).active { | |||
| background-color: #07CAAF; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,252 @@ | |||
| <template> | |||
| <div> | |||
| <el-carousel height="590px"> | |||
| <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
| <div id="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="list"> | |||
| <div class="article" v-for="(item, index) in articleList" :key="index"> | |||
| <img :src="item.img"> | |||
| <div class="acontent"> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="tcontent">{{ item.content }}</a> | |||
| </div> | |||
| <a class="date">发布日期: {{ item.date }}</a> | |||
| </div> | |||
| </div> | |||
| <el-pagination | |||
| background | |||
| layout="prev, pager, next" | |||
| :total="1000"> | |||
| </el-pagination> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="rtop"> | |||
| <div class="title"> | |||
| <a>热点新闻</a> | |||
| </div> | |||
| <div class="nav" v-for="(item,index) in news" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.txt }}</a> | |||
| </div> | |||
| </div> | |||
| <div class="rbottom"> | |||
| <div class="title"> | |||
| <a>相关视频</a> | |||
| </div> | |||
| <div class="nav" v-for="(item,index) in videos" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.txt }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'home', | |||
| data () { | |||
| return { | |||
| carouselList: [ | |||
| { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
| { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
| ], | |||
| articleList: [ | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| }, | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| }, | |||
| { | |||
| img: '/airtlc.png', | |||
| title: '强不强?吉利银河E8全景智慧座舱揭秘', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长', | |||
| date: '2023/01/02' | |||
| } | |||
| ], | |||
| news: [ | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| } | |||
| ], | |||
| videos: [ | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| }, | |||
| { | |||
| img: '/car.png', | |||
| txt: '银河E8全景智慧座舱揭秘银河E8' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| components: { | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-carousel__item{ | |||
| background-size: 100%; | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| #txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-bottom: 50px; | |||
| color: #FFFFFF; | |||
| .title { | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| margin-bottom: 15px; | |||
| } | |||
| .subtitle { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| opacity: 0.5; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| #hot { | |||
| width: 100%; | |||
| // height: 1200px; | |||
| background: #F2F4F8; | |||
| display: flex; | |||
| justify-content: center; | |||
| .content { | |||
| width: 70%; | |||
| margin: 50px 0 50px 0; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .list { | |||
| padding: 10px; | |||
| width: 76%; | |||
| background-color: #FFFFFF; | |||
| .article { | |||
| display: flex; | |||
| img { | |||
| width: 200px; | |||
| height: 150px; | |||
| } | |||
| .acontent { | |||
| height: 150px; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| padding: 0 10px; | |||
| margin-bottom: 20px; | |||
| .txt { | |||
| a { | |||
| display: block; | |||
| text-align: left; | |||
| } | |||
| } | |||
| .title { | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| } | |||
| .content { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 24px; | |||
| } | |||
| .date { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #7D8392; | |||
| line-height: 30px; | |||
| text-align: left; | |||
| } | |||
| } | |||
| .acontent:not(:last-child) { | |||
| margin-bottom: 0px; | |||
| } | |||
| } | |||
| } | |||
| .right { | |||
| width: 21%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| flex-direction: column; | |||
| .rtop, .rbottom { | |||
| background-color: #FFFFFF; | |||
| height: 49%; | |||
| width: 100%; | |||
| .title { | |||
| background-image: url('../../assets/airtlctl.png'); | |||
| background-position: 0 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| a { | |||
| font-size: 20px; | |||
| font-weight: bold; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| width: 100%; | |||
| text-align: left; | |||
| display: inline-block; | |||
| margin-left: 40px; | |||
| } | |||
| } | |||
| .nav { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| margin: 10px 0 10px 0; | |||
| img { | |||
| width: 240px; | |||
| height: 180px; | |||
| } | |||
| a { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .el-pagination.is-background .el-pager li:not(.disabled).active { | |||
| background-color: #07CAAF; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,297 @@ | |||
| <template> | |||
| <div> | |||
| <el-carousel height="590px"> | |||
| <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
| <div id="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div id="videocar"> | |||
| <el-carousel :interval="5000" arrow="always" height="500px"> | |||
| <el-carousel-item v-for="item in 4" :key="item"> | |||
| <h3>{{ item }}</h3> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| </div> | |||
| <div id="hottxt"> | |||
| <el-carousel :interval="5000" height="500px"> | |||
| <el-carousel-item v-for="item in hotList.right" :key="item.title"> | |||
| <div class="txtcontent"> | |||
| <div class="title"> | |||
| <img src="@/assets/tt.png"> | |||
| {{ item.title }} | |||
| </div> | |||
| <p class="content">{{ item.content }}</p> | |||
| </div> | |||
| <div class="btn"> | |||
| <el-button plain class="more" size="small">MORE</el-button> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="yyzrbtxt"> | |||
| <div class="txtcontent"> | |||
| <img src="@/assets/rblogo.png" class="logo"> | |||
| <div class="title"> | |||
| {{ daliay.title }} | |||
| </div> | |||
| <p class="content">{{ daliay.content }}</p> | |||
| </div> | |||
| <div class="btn"> | |||
| <el-button plain class="more" size="small">MORE</el-button> | |||
| </div> | |||
| </div> | |||
| <div class="yyzrbimg" /> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="wk"> | |||
| <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'home', | |||
| data () { | |||
| return { | |||
| carouselList: [ | |||
| { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
| { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
| ], | |||
| hotList: { | |||
| left: [], | |||
| right: [ | |||
| { | |||
| title: '蔚来汽车:不断扩张的换电“帝国”', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长' | |||
| }, | |||
| { | |||
| title: '蔚来汽车:不断扩张的换电“帝国”11', | |||
| content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长' | |||
| } | |||
| ] | |||
| }, | |||
| daliay: { | |||
| title: '不造车的华为,想成为车企离 不开的企业', | |||
| content: '据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽' | |||
| } | |||
| } | |||
| }, | |||
| components: { | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-carousel__item{ | |||
| background-size: 100%; | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| #txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-bottom: 50px; | |||
| color: #FFFFFF; | |||
| .title { | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| margin-bottom: 15px; | |||
| } | |||
| .subtitle { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| opacity: 0.5; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| #hot, #daliay { | |||
| width: 100%; | |||
| height: 700px; | |||
| background: #E3E5EA; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| .content { | |||
| width: 60%; | |||
| height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| min-height: 470px; | |||
| // background: black; | |||
| display: flex; | |||
| div { | |||
| width: 50%; | |||
| height: 100%; | |||
| } | |||
| .el-carousel { | |||
| width: 100% !important; | |||
| } | |||
| #hottxt { | |||
| background-image: url('../../assets/footer_left.png'); | |||
| background-position: 140% -165px; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| :deep .el-carousel__indicators--horizontal { | |||
| left: 95%; | |||
| } | |||
| :deep .el-carousel__button { | |||
| width: 5px; | |||
| border-radius: 50%; | |||
| height: 5px; | |||
| } | |||
| .el-carousel__item { | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| width: 100%; | |||
| padding: 0 40px; | |||
| .txtcontent { | |||
| height: 50% !important; | |||
| width:100%; | |||
| .title { | |||
| height: 26px; | |||
| font-size: 26px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| width: 100%; | |||
| display: flex; | |||
| align-items: center; | |||
| img { | |||
| margin-right: 10px; | |||
| } | |||
| } | |||
| p { | |||
| text-align: left; | |||
| width: 85%; | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| line-height: 30px; | |||
| color: #ffffff83; | |||
| } | |||
| } | |||
| .btn { | |||
| height: 20%; | |||
| width:100%; | |||
| position: relative; | |||
| .more { | |||
| position: absolute; | |||
| left: 0px; | |||
| background: none !important; | |||
| border: 1px solid #00F6BD; | |||
| opacity: 0.8; | |||
| border-radius: 4px; | |||
| color: #00F6BD; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| min-height: 120px; | |||
| background-image: url('../../assets/bottom.png'); | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| } | |||
| #daliay { | |||
| background: #F2F4F8; | |||
| .top { | |||
| justify-content: space-between; | |||
| .yyzrbtxt, .yyzrbimg{ | |||
| height: 100%; | |||
| width: 47%; | |||
| .txtcontent { | |||
| width: 100%; | |||
| height: 80% !important; | |||
| text-align: left; | |||
| .logo { | |||
| margin-bottom: 30px; | |||
| } | |||
| .title { | |||
| border-left: 7px solid #07CAAF; | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| color: #0D1114; | |||
| width: 90%; | |||
| height: 79px; | |||
| text-align: left; | |||
| padding-left:30px; | |||
| } | |||
| .content { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| color: #0D1114; | |||
| line-height: 30px; | |||
| width: 100%; | |||
| text-align: left; | |||
| } | |||
| } | |||
| .btn { | |||
| height: 20%; | |||
| width:100%; | |||
| position: relative; | |||
| .more { | |||
| position: absolute; | |||
| left: 0px; | |||
| background: none !important; | |||
| border: 1px solid #000000; | |||
| color: #0D1114; | |||
| opacity: 0.8; | |||
| border-radius: 4px; | |||
| width: 80px; | |||
| } | |||
| } | |||
| } | |||
| .yyzrbimg { | |||
| background-image: url('../../assets/yyzrb.png'); | |||
| background-size: 100% 100%; | |||
| width: 50% !important; | |||
| } | |||
| } | |||
| } | |||
| #wk { | |||
| background-image: url('../../assets/wk.png'); | |||
| width: 100%; | |||
| height: 830px; | |||
| background-size: 100% 100%; | |||
| position: relative; | |||
| .el-button--primary { | |||
| width: 200px; | |||
| height: 60px; | |||
| background: #07CAAF; | |||
| border-radius: 12px; | |||
| border: none; | |||
| font-size: 18px; | |||
| font-weight: 400; | |||
| color: #FFFFFF; | |||
| position: absolute; | |||
| top: 70%; | |||
| left: 45%; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,470 @@ | |||
| <template> | |||
| <div> | |||
| <el-carousel height="590px"> | |||
| <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
| <div id="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div id="imgtxt"> | |||
| <img :src="hotnews.img"> | |||
| <a class="newsTitle">{{ hotnews.title }}</a> | |||
| </div> | |||
| <div id="hottxt"> | |||
| <div id="htitle"> | |||
| <a class="tle">热点新闻</a> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in hotnewsList" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.title }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <el-carousel :interval="4000" type="card" height="200px"> | |||
| <el-carousel-item v-for="(item, index) in carvideoList" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.title }}</a> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="wk"> | |||
| <div class="content"> | |||
| <div class="htitle"> | |||
| <a class="tle">热点新闻</a> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in carList" :key="index"> | |||
| <img :src="item.img"> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| <!-- <a>{{ item.title }}</a> --> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> --> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'information', | |||
| data () { | |||
| return { | |||
| carouselList: [ | |||
| { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
| { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
| ], | |||
| hotnews: { | |||
| title: '这两款产品也将采用“CHN”的模式进行研发', | |||
| img: '/hotnew.png' | |||
| }, | |||
| hotnewsList: [ | |||
| { | |||
| title: '广汽本田插混旗舰双子', | |||
| img: '/listnews.png' | |||
| }, | |||
| { | |||
| title: '强不强?吉利银河E8全景', | |||
| img: '/listnews.png' | |||
| }, | |||
| { | |||
| title: '智己汽车正式获准L3级', | |||
| img: '/listnews.png' | |||
| }, | |||
| { | |||
| title: '广汽本田插混旗舰双子', | |||
| img: '/listnews.png' | |||
| }, | |||
| { | |||
| title: '强不强?吉利银河E8全景', | |||
| img: '/listnews.png' | |||
| }, | |||
| { | |||
| title: '智己汽车正式获准L3级', | |||
| img: '/listnews.png' | |||
| } | |||
| ], | |||
| carvideoList: [ | |||
| { | |||
| title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| img: '/carvideo.png' | |||
| }, | |||
| { | |||
| title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| img: '/carvideo.png' | |||
| }, | |||
| { | |||
| title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| img: '/carvideo.png' | |||
| } | |||
| ], | |||
| carList: [ | |||
| { | |||
| img: '/cattxt.png', | |||
| title: '广汽本田插混旗舰双子', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '首款高端纯电MPV翼真Xspace', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '广汽本田插混旗舰双子', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '首款高端纯电MPV翼真Xspace', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '广汽本田插混旗舰双子', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '首款高端纯电MPV翼真Xspace', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| components: { | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-carousel__item{ | |||
| background-size: 100%; | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| #txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-bottom: 50px; | |||
| color: #FFFFFF; | |||
| .title { | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| margin-bottom: 15px; | |||
| } | |||
| .subtitle { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| opacity: 0.5; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| #hot, #daliay, #wk { | |||
| width: 100%; | |||
| height: 700px; | |||
| background: #E3E5EA; | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| .content { | |||
| width: 60%; | |||
| height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| #imgtxt { | |||
| width: 55%; | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| img { | |||
| width: 90%; | |||
| height: 90%; | |||
| } | |||
| .newsTitle{ | |||
| position: absolute; | |||
| bottom: 5%; | |||
| left: 5%; | |||
| display: inline-block; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| line-height: 48px; | |||
| width: 90%; | |||
| background-color: #0000007e; | |||
| } | |||
| } | |||
| #hottxt { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| flex: 1; | |||
| #htitle { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 95%; | |||
| .tle { | |||
| z-index: 9; | |||
| font-size: 26px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| display: inline-block; | |||
| position: relative; | |||
| text-decoration: none; /* 移除默认的下划线 */ | |||
| } | |||
| .tle::after { | |||
| content: ''; | |||
| position: absolute; | |||
| left: -15px; | |||
| bottom: 10px; | |||
| width: 65%; | |||
| height: 6px; /* 横线高度为文字高度的一半 */ | |||
| background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
| z-index: -1; | |||
| } | |||
| .el-button { | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| #hotList { | |||
| height: 90%; | |||
| width: 90%; | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .list { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| img { | |||
| width: 140px; | |||
| height: 110px; | |||
| } | |||
| a { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #010101; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| min-height: 120px; | |||
| background-image: url('../../assets/bottom.png'); | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| } | |||
| #hot { | |||
| .content { | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| background-image: url('../../assets/hotTopLeft.png'); | |||
| background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| #imgtxt { | |||
| width: 55%; | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| img { | |||
| width: 90%; | |||
| height: 90%; | |||
| } | |||
| .newsTitle{ | |||
| position: absolute; | |||
| bottom: 5%; | |||
| left: 5%; | |||
| display: inline-block; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| line-height: 48px; | |||
| width: 90%; | |||
| background-color: #0000007e; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| #daliay { | |||
| .top { | |||
| // justify-content: space-between; | |||
| background-color: #00000000 !important; | |||
| .el-carousel { | |||
| width: 100%; | |||
| height: 100% !important; | |||
| background-color: #00000000 !important; | |||
| :deep .el-carousel__container { | |||
| background-color: #00000000 !important; | |||
| height: 100% !important; | |||
| } | |||
| } | |||
| :deep.el-carousel__mask { | |||
| background-color: #00000000 !important; | |||
| } | |||
| .el-carousel__item { | |||
| display: flex; | |||
| flex-direction: column; | |||
| // justify-content: center; | |||
| align-items: center; | |||
| img { | |||
| width: 800px; | |||
| height: 80%; | |||
| } | |||
| a { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| #wk { | |||
| .content { | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| align-items: center; | |||
| position: relative; | |||
| .htitle { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 93%; | |||
| .tle { | |||
| z-index: 9; | |||
| font-size: 26px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| display: inline-block; | |||
| position: relative; | |||
| text-decoration: none; /* 移除默认的下划线 */ | |||
| } | |||
| .tle::after { | |||
| content: ''; | |||
| position: absolute; | |||
| left: -15px; | |||
| bottom: 10px; | |||
| width: 65%; | |||
| height: 6px; /* 横线高度为文字高度的一半 */ | |||
| background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
| z-index: -1; | |||
| } | |||
| .el-button { | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| #hotList { | |||
| height: 90%; | |||
| width: 95%; | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .list { | |||
| display: flex; | |||
| width: 50%; | |||
| align-items: center; | |||
| justify-content: center; | |||
| .txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-left: 10px; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| width: 60%; | |||
| .title { | |||
| text-align: left; | |||
| width: 100%; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #010101; | |||
| line-height: 48px; | |||
| } | |||
| .subtitle{ | |||
| height: 90%; | |||
| display: inline-block; | |||
| text-align: left; | |||
| width: 100%; | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| img { | |||
| width: 160px; | |||
| height: 110px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .content::after { | |||
| content: ''; | |||
| width: 100%; | |||
| height: 100%; | |||
| position: absolute; | |||
| background-image: url('../../assets/cartxt.png'); | |||
| background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,472 @@ | |||
| <template> | |||
| <div> | |||
| <el-carousel height="590px"> | |||
| <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
| <div id="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </el-carousel-item> | |||
| </el-carousel> | |||
| <div id="hot"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div id="imgtxt"> | |||
| <img :src="hotnews.img"> | |||
| <a class="newsTitle">{{ hotnews.title }}</a> | |||
| </div> | |||
| <div id="hottxt"> | |||
| <div id="htitle"> | |||
| <a class="tle">热点新闻</a> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in hotnewsList" :key="index"> | |||
| <img :src="item.img"> | |||
| <a>{{ item.title }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="daliay"> | |||
| <div class="content"> | |||
| <div class="top"> | |||
| <div class="htitle"> | |||
| <a class="tle">资讯</a> | |||
| <div class="item"> | |||
| <a v-for="item in information" :key="item" @click="changenews(item)" :class="{ clk: informationitem === item }">{{ item }}</a> | |||
| </div> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in carList" :key="index"> | |||
| <img :src="item.img"> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| <!-- <a>{{ item.title }}</a> --> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"/> | |||
| </div> | |||
| </div> | |||
| <div id="wk"> | |||
| <div class="content"> | |||
| <div class="htitle"> | |||
| <a class="tle">深度</a> | |||
| <div class="item"> | |||
| <a v-for="item in depth" :key="item" @click="changedepth(item)" :class="{ clk: depthitem === item }">{{ item }}</a> | |||
| </div> | |||
| <el-button type="text">MORE+</el-button> | |||
| </div> | |||
| <div id="hotList"> | |||
| <div class="list" v-for="(item, index) in carList" :key="index"> | |||
| <img :src="item.img"> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| <!-- <a>{{ item.title }}</a> --> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> --> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'metadaily', | |||
| data () { | |||
| return { | |||
| information: ['XR', 'Web3', 'Ai'], | |||
| informationitem: 'XR', | |||
| depth: ['XR', 'Web3', 'Ai'], | |||
| depthitem: 'XR', | |||
| carouselList: [ | |||
| { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
| { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
| ], | |||
| hotnews: { | |||
| title: '这两款产品也将采用“CHN”的模式进行研发', | |||
| img: '/aigc.png' | |||
| }, | |||
| hotnewsList: [ | |||
| { | |||
| title: '广汽本田插混旗舰双子', | |||
| img: '/aigclist.png' | |||
| }, | |||
| { | |||
| title: '强不强?吉利银河E8全景', | |||
| img: '/aigclist.png' | |||
| }, | |||
| { | |||
| title: '智己汽车正式获准L3级', | |||
| img: '/aigclist.png' | |||
| }, | |||
| { | |||
| title: '广汽本田插混旗舰双子', | |||
| img: '/aigclist.png' | |||
| }, | |||
| { | |||
| title: '强不强?吉利银河E8全景', | |||
| img: '/aigclist.png' | |||
| }, | |||
| { | |||
| title: '智己汽车正式获准L3级', | |||
| img: '/aigclist.png' | |||
| } | |||
| ], | |||
| // carvideoList: [ | |||
| // { | |||
| // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| // img: '/carvideo.png' | |||
| // }, | |||
| // { | |||
| // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| // img: '/carvideo.png' | |||
| // }, | |||
| // { | |||
| // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
| // img: '/carvideo.png' | |||
| // } | |||
| // ], | |||
| carList: [ | |||
| { | |||
| img: '/cattxt.png', | |||
| title: '广汽本田插混旗舰双子', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '首款高端纯电MPV翼真Xspace', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '广汽本田插混旗舰双子', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| }, { | |||
| img: '/cattxt.png', | |||
| title: '首款高端纯电MPV翼真Xspace', | |||
| subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| components: { | |||
| }, | |||
| methods: { | |||
| changenews (item) { | |||
| this.informationitem = item | |||
| }, | |||
| changedepth (item) { | |||
| this.depthitem = item | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .el-carousel__item{ | |||
| background-size: 100%; | |||
| background-repeat: no-repeat; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| #txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-bottom: 50px; | |||
| color: #FFFFFF; | |||
| .title { | |||
| font-size: 36px; | |||
| font-weight: bold; | |||
| text-align: center; | |||
| margin-bottom: 15px; | |||
| } | |||
| .subtitle { | |||
| font-size: 16px; | |||
| font-weight: 400; | |||
| opacity: 0.5; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| #hot, #daliay, #wk { | |||
| width: 100%; | |||
| height: 700px; | |||
| background: #E3E5EA; | |||
| display: flex; | |||
| align-items: center; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| .content { | |||
| width: 60%; | |||
| height: 90%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| .top, .bottom { | |||
| width: 100%; | |||
| } | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| #imgtxt { | |||
| width: 55%; | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| img { | |||
| width: 90%; | |||
| height: 90%; | |||
| } | |||
| .newsTitle{ | |||
| position: absolute; | |||
| bottom: 5%; | |||
| left: 5%; | |||
| display: inline-block; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| line-height: 48px; | |||
| width: 90%; | |||
| background-color: #0000007e; | |||
| } | |||
| } | |||
| #hottxt { | |||
| display: flex; | |||
| justify-content: space-around; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| flex: 1; | |||
| #htitle { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 95%; | |||
| .tle { | |||
| z-index: 9; | |||
| font-size: 26px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| display: inline-block; | |||
| position: relative; | |||
| text-decoration: none; /* 移除默认的下划线 */ | |||
| } | |||
| .tle::after { | |||
| content: ''; | |||
| position: absolute; | |||
| left: -15px; | |||
| bottom: 10px; | |||
| width: 65%; | |||
| height: 6px; /* 横线高度为文字高度的一半 */ | |||
| background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
| z-index: -1; | |||
| } | |||
| .el-button { | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| #hotList { | |||
| height: 90%; | |||
| width: 90%; | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .list { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| img { | |||
| width: 140px; | |||
| height: 110px; | |||
| } | |||
| a { | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #010101; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| min-height: 120px; | |||
| background-image: url('../../assets/bottom.png'); | |||
| background-size: 100% 100%; | |||
| } | |||
| } | |||
| } | |||
| #hot { | |||
| .content { | |||
| .top { | |||
| min-height: 470px; | |||
| margin-bottom: 40px; | |||
| background-color: #FFFFFF; | |||
| display: flex; | |||
| background-image: url('../../assets/hotTopLeft.png'); | |||
| background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| #imgtxt { | |||
| width: 55%; | |||
| position: relative; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| img { | |||
| width: 90%; | |||
| height: 90%; | |||
| } | |||
| .newsTitle{ | |||
| position: absolute; | |||
| bottom: 5%; | |||
| left: 5%; | |||
| display: inline-block; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #FFFFFF; | |||
| line-height: 48px; | |||
| width: 90%; | |||
| background-color: #0000007e; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| #wk { | |||
| height: 500px; | |||
| .content { | |||
| background-color: #FFFFFF; | |||
| } | |||
| } | |||
| #wk, #daliay { | |||
| .content, .top { | |||
| display: flex; | |||
| align-items: center; | |||
| position: relative; | |||
| flex-direction: column; | |||
| .htitle { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 93%; | |||
| .item { | |||
| width: 15%; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| a { | |||
| font-size: 18px; | |||
| line-height: 48px; | |||
| cursor: pointer; | |||
| z-index: 99; | |||
| } | |||
| .clk { | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| } | |||
| } | |||
| .tle { | |||
| z-index: 9; | |||
| font-size: 26px; | |||
| font-weight: bold; | |||
| color: #00161C; | |||
| line-height: 48px; | |||
| display: inline-block; | |||
| position: relative; | |||
| text-decoration: none; /* 移除默认的下划线 */ | |||
| } | |||
| .tle::after { | |||
| content: ''; | |||
| position: absolute; | |||
| left: -5px; | |||
| bottom: 10px; | |||
| width: 110%; | |||
| height: 6px; /* 横线高度为文字高度的一半 */ | |||
| background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
| z-index: -1; | |||
| } | |||
| .el-button { | |||
| font-size: 16px; | |||
| font-weight: bold; | |||
| color: #07CAAF; | |||
| line-height: 48px; | |||
| } | |||
| } | |||
| #hotList { | |||
| height: 90%; | |||
| width: 95%; | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| .list { | |||
| display: flex; | |||
| width: 50%; | |||
| height: 50%; | |||
| flex-direction: row !important; | |||
| align-items: center; | |||
| justify-content: center; | |||
| .txt { | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin-left: 10px; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| width: 60%; | |||
| .title { | |||
| text-align: left; | |||
| width: 100%; | |||
| font-size: 18px; | |||
| font-weight: bold; | |||
| color: #010101; | |||
| line-height: 48px; | |||
| } | |||
| .subtitle{ | |||
| height: 90%; | |||
| display: inline-block; | |||
| text-align: left; | |||
| width: 100%; | |||
| font-size: 14px; | |||
| font-weight: 400; | |||
| color: #000000; | |||
| line-height: 24px; | |||
| } | |||
| } | |||
| img { | |||
| width: 200px !important; | |||
| height: 150px !important; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .content::after { | |||
| content: ''; | |||
| width: 100%; | |||
| height: 100%; | |||
| position: absolute; | |||
| background-image: url('../../assets/cartxt.png'); | |||
| background-position: 100% 0; /* 调整这些值来改变显示的部分 */ | |||
| background-size: 10% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
| background-repeat: no-repeat; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,23 @@ | |||
| const path = require('path') | |||
| function resolve (dir) { | |||
| return path.join(__dirname, dir) | |||
| } | |||
| module.exports = { | |||
| configureWebpack: { | |||
| resolve: { | |||
| alias: { | |||
| '@': resolve('src') | |||
| } | |||
| } | |||
| }, | |||
| chainWebpack: config => { | |||
| config.plugin('html') | |||
| .tap(args => { | |||
| args[0].title = '元汽智驾' | |||
| return args | |||
| }) | |||
| }, | |||
| productionSourceMap: false | |||
| } | |||