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