| @@ -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 | |||||
| } | |||||