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