Przeglądaj źródła

第一版

master
我叫MT 1 rok temu
commit
781396401f
64 zmienionych plików z 17472 dodań i 0 usunięć
  1. +3
    -0
      .browserslistrc
  2. +5
    -0
      .editorconfig
  3. +17
    -0
      .eslintrc.js
  4. +23
    -0
      .gitignore
  5. +1
    -0
      .npmrc
  6. +5
    -0
      babel.config.js
  7. +10
    -0
      jsconfig.json
  8. +14589
    -0
      package-lock.json
  9. +32
    -0
      package.json
  10. BIN
      public/ai1.png
  11. BIN
      public/ai2.png
  12. BIN
      public/ai3.png
  13. BIN
      public/aigc.png
  14. BIN
      public/aigclist.png
  15. BIN
      public/airtlc.png
  16. BIN
      public/car.png
  17. BIN
      public/car1.png
  18. BIN
      public/car2.png
  19. BIN
      public/carvideo.png
  20. BIN
      public/cattxt.png
  21. BIN
      public/favicon.ico
  22. BIN
      public/hotnew.png
  23. +17
    -0
      public/index.html
  24. BIN
      public/jl.png
  25. BIN
      public/ld.png
  26. BIN
      public/listnews.png
  27. BIN
      public/logo.jpg
  28. +22
    -0
      src/App.vue
  29. BIN
      src/assets/about.png
  30. BIN
      src/assets/aboutbottom.png
  31. BIN
      src/assets/abouttop.png
  32. BIN
      src/assets/ai1.png
  33. BIN
      src/assets/ai2.png
  34. BIN
      src/assets/ai3.png
  35. BIN
      src/assets/aigctop.png
  36. BIN
      src/assets/airtlctl.png
  37. BIN
      src/assets/bottom.png
  38. BIN
      src/assets/cartxt.png
  39. BIN
      src/assets/footer_left.png
  40. BIN
      src/assets/footer_logo.png
  41. BIN
      src/assets/hotTopLeft.png
  42. BIN
      src/assets/logo.png
  43. BIN
      src/assets/play.png
  44. BIN
      src/assets/rblogo.png
  45. BIN
      src/assets/tt.png
  46. BIN
      src/assets/wechat.png
  47. BIN
      src/assets/wk.png
  48. BIN
      src/assets/yyzrb.png
  49. +58
    -0
      src/components/HelloWorld.vue
  50. +131
    -0
      src/components/footer.vue
  51. +51
    -0
      src/components/header.vue
  52. +69
    -0
      src/layouts/index.vue
  53. +13
    -0
      src/main.js
  54. +89
    -0
      src/router/index.js
  55. +16
    -0
      src/styles/element-variables.scss
  56. +14
    -0
      src/styles/index.scss
  57. +266
    -0
      src/views/about/index.vue
  58. +272
    -0
      src/views/aigc/index.vue
  59. +255
    -0
      src/views/article/details.vue
  60. +252
    -0
      src/views/article/list.vue
  61. +297
    -0
      src/views/home/index.vue
  62. +470
    -0
      src/views/information/index.vue
  63. +472
    -0
      src/views/metadaily/index.vue
  64. +23
    -0
      vue.config.js

+ 3
- 0
.browserslistrc Wyświetl plik

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

+ 5
- 0
.editorconfig Wyświetl plik

@@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

+ 17
- 0
.eslintrc.js Wyświetl plik

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

+ 23
- 0
.gitignore Wyświetl plik

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

+ 1
- 0
.npmrc Wyświetl plik

@@ -0,0 +1 @@
shamefully-hoist=true

+ 5
- 0
babel.config.js Wyświetl plik

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

+ 10
- 0
jsconfig.json Wyświetl plik

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
}
}

+ 14589
- 0
package-lock.json
Plik diff jest za duży
Wyświetl plik


+ 32
- 0
package.json Wyświetl plik

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

BIN
public/ai1.png Wyświetl plik

Przed Po
Szerokość: 241  |  Wysokość: 420  |  Rozmiar: 114 KiB

BIN
public/ai2.png Wyświetl plik

Przed Po
Szerokość: 242  |  Wysokość: 420  |  Rozmiar: 93 KiB

BIN
public/ai3.png Wyświetl plik

Przed Po
Szerokość: 238  |  Wysokość: 418  |  Rozmiar: 94 KiB

BIN
public/aigc.png Wyświetl plik

Przed Po
Szerokość: 558  |  Wysokość: 420  |  Rozmiar: 461 KiB

BIN
public/aigclist.png Wyświetl plik

Przed Po
Szerokość: 150  |  Wysokość: 113  |  Rozmiar: 40 KiB

BIN
public/airtlc.png Wyświetl plik

Przed Po
Szerokość: 199  |  Wysokość: 150  |  Rozmiar: 42 KiB

BIN
public/car.png Wyświetl plik

Przed Po
Szerokość: 239  |  Wysokość: 178  |  Rozmiar: 67 KiB

BIN
public/car1.png Wyświetl plik

Przed Po
Szerokość: 1917  |  Wysokość: 600  |  Rozmiar: 1.1 MiB

BIN
public/car2.png Wyświetl plik

Przed Po
Szerokość: 2118  |  Wysokość: 842  |  Rozmiar: 1.9 MiB

BIN
public/carvideo.png Wyświetl plik

Przed Po
Szerokość: 798  |  Wysokość: 449  |  Rozmiar: 379 KiB

BIN
public/cattxt.png Wyświetl plik

Przed Po
Szerokość: 201  |  Wysokość: 149  |  Rozmiar: 47 KiB

BIN
public/favicon.ico Wyświetl plik

Przed Po

BIN
public/hotnew.png Wyświetl plik

Przed Po
Szerokość: 561  |  Wysokość: 419  |  Rozmiar: 339 KiB

+ 17
- 0
public/index.html Wyświetl plik

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

BIN
public/jl.png Wyświetl plik

Przed Po
Szerokość: 800  |  Wysokość: 453  |  Rozmiar: 616 KiB

BIN
public/ld.png Wyświetl plik

Przed Po
Szerokość: 108  |  Wysokość: 108  |  Rozmiar: 14 KiB

BIN
public/listnews.png Wyświetl plik

Przed Po
Szerokość: 150  |  Wysokość: 113  |  Rozmiar: 33 KiB

BIN
public/logo.jpg Wyświetl plik

Przed Po
Szerokość: 290  |  Wysokość: 290  |  Rozmiar: 12 KiB

+ 22
- 0
src/App.vue Wyświetl plik

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

BIN
src/assets/about.png Wyświetl plik

Przed Po
Szerokość: 640  |  Wysokość: 434  |  Rozmiar: 445 KiB

BIN
src/assets/aboutbottom.png Wyświetl plik

Przed Po
Szerokość: 392  |  Wysokość: 237  |  Rozmiar: 23 KiB

BIN
src/assets/abouttop.png Wyświetl plik

Przed Po
Szerokość: 1920  |  Wysokość: 417  |  Rozmiar: 203 KiB

BIN
src/assets/ai1.png Wyświetl plik

Przed Po
Szerokość: 241  |  Wysokość: 420  |  Rozmiar: 114 KiB

BIN
src/assets/ai2.png Wyświetl plik

Przed Po
Szerokość: 242  |  Wysokość: 420  |  Rozmiar: 93 KiB

BIN
src/assets/ai3.png Wyświetl plik

Przed Po
Szerokość: 238  |  Wysokość: 418  |  Rozmiar: 94 KiB

BIN
src/assets/aigctop.png Wyświetl plik

Przed Po
Szerokość: 1920  |  Wysokość: 598  |  Rozmiar: 445 KiB

BIN
src/assets/airtlctl.png Wyświetl plik

Przed Po
Szerokość: 80  |  Wysokość: 43  |  Rozmiar: 2.5 KiB

BIN
src/assets/bottom.png Wyświetl plik

Przed Po
Szerokość: 1200  |  Wysokość: 120  |  Rozmiar: 111 KiB

BIN
src/assets/cartxt.png Wyświetl plik

Przed Po
Szerokość: 132  |  Wysokość: 313  |  Rozmiar: 16 KiB

BIN
src/assets/footer_left.png Wyświetl plik

Przed Po
Szerokość: 822  |  Wysokość: 578  |  Rozmiar: 32 KiB

BIN
src/assets/footer_logo.png Wyświetl plik

Przed Po
Szerokość: 184  |  Wysokość: 49  |  Rozmiar: 9.6 KiB

BIN
src/assets/hotTopLeft.png Wyświetl plik

Przed Po
Szerokość: 471  |  Wysokość: 328  |  Rozmiar: 47 KiB

BIN
src/assets/logo.png Wyświetl plik

Przed Po
Szerokość: 163  |  Wysokość: 43  |  Rozmiar: 8.3 KiB

BIN
src/assets/play.png Wyświetl plik

Przed Po
Szerokość: 68  |  Wysokość: 67  |  Rozmiar: 1.6 KiB

BIN
src/assets/rblogo.png Wyświetl plik

Przed Po
Szerokość: 165  |  Wysokość: 36  |  Rozmiar: 5.9 KiB

BIN
src/assets/tt.png Wyświetl plik

Przed Po
Szerokość: 59  |  Wysokość: 28  |  Rozmiar: 1.3 KiB

BIN
src/assets/wechat.png Wyświetl plik

Przed Po
Szerokość: 130  |  Wysokość: 130  |  Rozmiar: 16 KiB

BIN
src/assets/wk.png Wyświetl plik

Przed Po
Szerokość: 1919  |  Wysokość: 832  |  Rozmiar: 95 KiB

BIN
src/assets/yyzrb.png Wyświetl plik

Przed Po
Szerokość: 641  |  Wysokość: 435  |  Rozmiar: 421 KiB

+ 58
- 0
src/components/HelloWorld.vue Wyświetl plik

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

+ 131
- 0
src/components/footer.vue Wyświetl plik

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

+ 51
- 0
src/components/header.vue Wyświetl plik

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

+ 69
- 0
src/layouts/index.vue Wyświetl plik

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

+ 13
- 0
src/main.js Wyświetl plik

@@ -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')

+ 89
- 0
src/router/index.js Wyświetl plik

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

+ 16
- 0
src/styles/element-variables.scss Wyświetl plik

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

+ 14
- 0
src/styles/index.scss Wyświetl plik

@@ -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; /* 保持滚动功能 */
}

+ 266
- 0
src/views/about/index.vue Wyświetl plik

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

+ 272
- 0
src/views/aigc/index.vue Wyświetl plik

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

+ 255
- 0
src/views/article/details.vue Wyświetl plik

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

+ 252
- 0
src/views/article/list.vue Wyświetl plik

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

+ 297
- 0
src/views/home/index.vue Wyświetl plik

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

+ 470
- 0
src/views/information/index.vue Wyświetl plik

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

+ 472
- 0
src/views/metadaily/index.vue Wyświetl plik

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

+ 23
- 0
vue.config.js Wyświetl plik

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

Ładowanie…
Anuluj
Zapisz