@@ -2675,8 +2675,7 @@ | |||
"asynckit": { | |||
"version": "0.4.0", | |||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", | |||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", | |||
"dev": true | |||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" | |||
}, | |||
"atob": { | |||
"version": "2.1.2", | |||
@@ -2735,6 +2734,33 @@ | |||
"integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==", | |||
"dev": true | |||
}, | |||
"axios": { | |||
"version": "1.6.5", | |||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", | |||
"integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", | |||
"requires": { | |||
"follow-redirects": "^1.15.4", | |||
"form-data": "^4.0.0", | |||
"proxy-from-env": "^1.1.0" | |||
}, | |||
"dependencies": { | |||
"follow-redirects": { | |||
"version": "1.15.4", | |||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", | |||
"integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==" | |||
}, | |||
"form-data": { | |||
"version": "4.0.0", | |||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", | |||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", | |||
"requires": { | |||
"asynckit": "^0.4.0", | |||
"combined-stream": "^1.0.8", | |||
"mime-types": "^2.1.12" | |||
} | |||
} | |||
} | |||
}, | |||
"babel-eslint": { | |||
"version": "10.1.0", | |||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", | |||
@@ -3006,8 +3032,7 @@ | |||
"boolbase": { | |||
"version": "1.0.0", | |||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", | |||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", | |||
"dev": true | |||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" | |||
}, | |||
"brace-expansion": { | |||
"version": "1.1.11", | |||
@@ -3403,6 +3428,128 @@ | |||
"integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==", | |||
"dev": true | |||
}, | |||
"cheerio": { | |||
"version": "0.10.8", | |||
"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.10.8.tgz", | |||
"integrity": "sha512-/rDdcRIPVkXblUMxhRe9r/sANqG5T7App+V3LJby4GkN+0PrWmFwpE1k4FfbFpiJAOAy7vxUzi4sNX5in0nL2w==", | |||
"requires": { | |||
"cheerio-select": "*", | |||
"entities": "0.x", | |||
"htmlparser2": "2.x", | |||
"underscore": "~1.4" | |||
}, | |||
"dependencies": { | |||
"domhandler": { | |||
"version": "2.0.3", | |||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.0.3.tgz", | |||
"integrity": "sha512-D8+qeCUo6LpYvBZsmXWunDJ9zOD8mVg6EwZIdgxmnT+xGWRsReF/TwsZ5EzlIJDipxlE6qJh1dXt9oeplGN3Bg==", | |||
"requires": { | |||
"domelementtype": "1" | |||
} | |||
}, | |||
"domutils": { | |||
"version": "1.0.1", | |||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.0.1.tgz", | |||
"integrity": "sha512-EtnpDnVNvVaRBHmc5PV2lGHlgic4IjrYgS1f3U/M7CjihJIKfsJFvwj6JfAjr7f7wNDcloq3rOb08xAiL622gA==", | |||
"requires": { | |||
"domelementtype": "1" | |||
} | |||
}, | |||
"entities": { | |||
"version": "0.5.0", | |||
"resolved": "https://registry.npmjs.org/entities/-/entities-0.5.0.tgz", | |||
"integrity": "sha512-T5XQtlzuW+PfeSsGp3uryfYQof820zYbnUnUDEkwUVIAfgYeixIN16c4jh8gs0SqJUTGLU0XD6QsvjEPbmdwzQ==" | |||
}, | |||
"htmlparser2": { | |||
"version": "2.6.0", | |||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-2.6.0.tgz", | |||
"integrity": "sha512-oR9aps3hDZdU0whPlDjz4HdafpcZclpjrUOwPqDldr+WDubEnVerBNP8I0Wy0VIZO5Mxq/4yALDOYZTWf5Jtog==", | |||
"requires": { | |||
"domelementtype": "1", | |||
"domhandler": "2.0", | |||
"domutils": "1.0" | |||
} | |||
} | |||
} | |||
}, | |||
"cheerio-select": { | |||
"version": "2.1.0", | |||
"resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", | |||
"integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", | |||
"requires": { | |||
"boolbase": "^1.0.0", | |||
"css-select": "^5.1.0", | |||
"css-what": "^6.1.0", | |||
"domelementtype": "^2.3.0", | |||
"domhandler": "^5.0.3", | |||
"domutils": "^3.0.1" | |||
}, | |||
"dependencies": { | |||
"css-select": { | |||
"version": "5.1.0", | |||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", | |||
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", | |||
"requires": { | |||
"boolbase": "^1.0.0", | |||
"css-what": "^6.1.0", | |||
"domhandler": "^5.0.2", | |||
"domutils": "^3.0.1", | |||
"nth-check": "^2.0.1" | |||
} | |||
}, | |||
"css-what": { | |||
"version": "6.1.0", | |||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", | |||
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" | |||
}, | |||
"dom-serializer": { | |||
"version": "2.0.0", | |||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", | |||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", | |||
"requires": { | |||
"domelementtype": "^2.3.0", | |||
"domhandler": "^5.0.2", | |||
"entities": "^4.2.0" | |||
} | |||
}, | |||
"domelementtype": { | |||
"version": "2.3.0", | |||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", | |||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==" | |||
}, | |||
"domhandler": { | |||
"version": "5.0.3", | |||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", | |||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", | |||
"requires": { | |||
"domelementtype": "^2.3.0" | |||
} | |||
}, | |||
"domutils": { | |||
"version": "3.1.0", | |||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", | |||
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", | |||
"requires": { | |||
"dom-serializer": "^2.0.0", | |||
"domelementtype": "^2.3.0", | |||
"domhandler": "^5.0.3" | |||
} | |||
}, | |||
"entities": { | |||
"version": "4.5.0", | |||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", | |||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==" | |||
}, | |||
"nth-check": { | |||
"version": "2.1.1", | |||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", | |||
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", | |||
"requires": { | |||
"boolbase": "^1.0.0" | |||
} | |||
} | |||
} | |||
}, | |||
"chokidar": { | |||
"version": "3.5.3", | |||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", | |||
@@ -3758,7 +3905,6 @@ | |||
"version": "1.0.8", | |||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", | |||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", | |||
"dev": true, | |||
"requires": { | |||
"delayed-stream": "~1.0.0" | |||
} | |||
@@ -4832,8 +4978,7 @@ | |||
"delayed-stream": { | |||
"version": "1.0.0", | |||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", | |||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", | |||
"dev": true | |||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" | |||
}, | |||
"delegates": { | |||
"version": "1.0.0", | |||
@@ -4967,8 +5112,7 @@ | |||
"domelementtype": { | |||
"version": "1.3.1", | |||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", | |||
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", | |||
"dev": true | |||
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==" | |||
}, | |||
"domhandler": { | |||
"version": "4.3.1", | |||
@@ -7191,6 +7335,14 @@ | |||
} | |||
} | |||
}, | |||
"identify": { | |||
"version": "0.1.5", | |||
"resolved": "https://registry.npmjs.org/identify/-/identify-0.1.5.tgz", | |||
"integrity": "sha512-v7+jtJnoG9yeOELu/cs2ZNFzGscC/3XQfR57BDViB+3H3Qmo4k6f+Qc86ADvJ/STkV59PKfjG+tNw/p0J22SdA==", | |||
"requires": { | |||
"cheerio": "~0.10.3" | |||
} | |||
}, | |||
"ieee754": { | |||
"version": "1.2.1", | |||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", | |||
@@ -8409,14 +8561,12 @@ | |||
"mime-db": { | |||
"version": "1.52.0", | |||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", | |||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", | |||
"dev": true | |||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" | |||
}, | |||
"mime-types": { | |||
"version": "2.1.35", | |||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", | |||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", | |||
"dev": true, | |||
"requires": { | |||
"mime-db": "1.52.0" | |||
} | |||
@@ -10728,6 +10878,11 @@ | |||
"ipaddr.js": "1.9.1" | |||
} | |||
}, | |||
"proxy-from-env": { | |||
"version": "1.1.0", | |||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", | |||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" | |||
}, | |||
"prr": { | |||
"version": "1.0.1", | |||
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", | |||
@@ -13109,6 +13264,11 @@ | |||
"which-boxed-primitive": "^1.0.2" | |||
} | |||
}, | |||
"underscore": { | |||
"version": "1.4.4", | |||
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz", | |||
"integrity": "sha512-ZqGrAgaqqZM7LGRzNjLnw5elevWb5M8LEoDMadxIW3OWbcv72wMMgKdwOKpd5Fqxe8choLD8HN3iSj3TUh/giQ==" | |||
}, | |||
"undici-types": { | |||
"version": "5.26.5", | |||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", | |||
@@ -8,8 +8,10 @@ | |||
"lint": "vue-cli-service lint" | |||
}, | |||
"dependencies": { | |||
"axios": "^1.6.5", | |||
"core-js": "^3.6.5", | |||
"element-ui": "^2.15.14", | |||
"identify": "^0.1.5", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.5.2" | |||
}, | |||
@@ -0,0 +1,27 @@ | |||
import request from './request' | |||
// 公司介绍:文字+图 (共用广告位) | |||
// GET: /aboutUs/about | |||
// 成员介绍:(共用轮播图) | |||
// GET:/aboutUs/memberList?pageNum=&pageSize= | |||
/** | |||
* 公司介绍 | |||
* @returns request | |||
*/ | |||
export const aboutUs = () => { | |||
return request({ | |||
method: 'GET', | |||
url: '/api/aboutUs/about' | |||
}) | |||
} | |||
/** | |||
* 成员介绍 | |||
* @returns request | |||
*/ | |||
export const memberList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/aboutUs/memberList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} |
@@ -0,0 +1,17 @@ | |||
// import request from './request' | |||
// 轮播 | |||
// GET:/aigc/lunboList?pageNum=&pageSize= | |||
// 数字人形象(共用轮播) | |||
// GET:/aigc/shuzirenList?pageNum=&pageSize= | |||
// 右边描述:(共用广告位) | |||
// GET: /aigc/shuzirenremark | |||
// 广告位1 | |||
// GET:/aigc/guanggao1 | |||
// 数字人直播(共用轮播) | |||
// GET:/aigc/shuzirenZhiBoList?pageNum=&pageSize= | |||
// 广告位2 | |||
// GET:/aigc/guanggao2 | |||
// 数字人视频 | |||
// GET:/aigc/videoList?pageNum=&pageSize= |
@@ -0,0 +1,55 @@ | |||
import request from './request' | |||
/** | |||
* 轮播 | |||
* @returns request | |||
*/ | |||
export const lunboList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/car/lunboList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 热点新闻配置 | |||
* @returns request | |||
*/ | |||
export const hotNewsConfig = () => { | |||
return request({ | |||
method: 'GET', | |||
url: '/api/car/hotNewsConfig' | |||
}) | |||
} | |||
/** | |||
* 热点新闻 | |||
* @returns request | |||
*/ | |||
export const hotlist = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/news/list?type=1&pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 广告 | |||
* @returns request | |||
*/ | |||
export const guanggao = (index) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/guanggao${index}` | |||
}) | |||
} | |||
/** | |||
* 视频轮播 | |||
* @returns request | |||
*/ | |||
export const videoList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/car/videoList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} |
@@ -0,0 +1,77 @@ | |||
import request from './request' | |||
/** | |||
* 首页轮播 | |||
* @returns request | |||
*/ | |||
export const lunboList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/lunboList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 汽车资讯热门 | |||
* @returns request | |||
*/ | |||
export const carNewsHotList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/carNewsHotList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 元宇宙日爆热门 | |||
* @returns request | |||
*/ | |||
export const yuanyuzhouHotList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/yuanyuzhouHotList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 广告 | |||
* @returns request | |||
*/ | |||
export const guanggao = (index) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/guanggao${index}` | |||
}) | |||
} | |||
/** | |||
* 跳转 | |||
* @returns request | |||
*/ | |||
export const link = () => { | |||
return request({ | |||
method: 'GET', | |||
url: 'api/index/link' | |||
}) | |||
} | |||
/** | |||
* 热点新闻配置 | |||
* @returns request | |||
*/ | |||
export const hotnewsConfig = () => { | |||
return request({ | |||
method: 'GET', | |||
url: '/api/index/hotNewsConfig' | |||
}) | |||
} | |||
/** | |||
* 热点新闻 | |||
* @returns request | |||
*/ | |||
export const hotnews = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/news/list?type=1?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} |
@@ -0,0 +1,45 @@ | |||
import request from './request' | |||
/** | |||
* 广告 | |||
* @returns request | |||
*/ | |||
export const guanggao = (index) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/index/guanggao${index}` | |||
}) | |||
} | |||
/** | |||
* 首页轮播 | |||
* @returns request | |||
*/ | |||
export const lunboList = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/yuanyuzhou/lunboList?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} | |||
/** | |||
* 热点新闻配置 | |||
* @returns request | |||
*/ | |||
export const hotNewsConfig = () => { | |||
return request({ | |||
method: 'GET', | |||
url: '/api/yuanyuzhou/hotNewsConfig' | |||
}) | |||
} | |||
/** | |||
* 热点新闻 | |||
* @returns request | |||
*/ | |||
export const hotnews = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/api/news/list?type=1?pageNum=${num}&pageSize=${size}` | |||
}) | |||
} |
@@ -0,0 +1,2 @@ | |||
import axios from 'axios' | |||
export default axios.create() |
@@ -0,0 +1,162 @@ | |||
<template> | |||
<div class="s-canvas"> | |||
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'SIdentify', | |||
props: { | |||
identifyCode: { | |||
type: String, | |||
default: '1234' | |||
}, | |||
fontSizeMin: { | |||
type: Number, | |||
default: 28 | |||
}, | |||
fontSizeMax: { | |||
type: Number, | |||
default: 40 | |||
}, | |||
backgroundColorMin: { | |||
type: Number, | |||
default: 180 | |||
}, | |||
backgroundColorMax: { | |||
type: Number, | |||
default: 240 | |||
}, | |||
colorMin: { | |||
type: Number, | |||
default: 50 | |||
}, | |||
colorMax: { | |||
type: Number, | |||
default: 160 | |||
}, | |||
lineColorMin: { | |||
type: Number, | |||
default: 40 | |||
}, | |||
lineColorMax: { | |||
type: Number, | |||
default: 180 | |||
}, | |||
dotColorMin: { | |||
type: Number, | |||
default: 0 | |||
}, | |||
dotColorMax: { | |||
type: Number, | |||
default: 255 | |||
}, | |||
contentWidth: { | |||
type: Number, | |||
default: 110 | |||
}, | |||
contentHeight: { | |||
type: Number, | |||
default: 40 | |||
} | |||
}, | |||
methods: { | |||
// 生成一个随机数 | |||
randomNum (min, max) { | |||
return Math.floor(Math.random() * (max - min) + min) | |||
}, | |||
// 生成一个随机的颜色 | |||
randomColor (min, max) { | |||
var r = this.randomNum(min, max) | |||
var g = this.randomNum(min, max) | |||
var b = this.randomNum(min, max) | |||
return 'rgb(' + r + ',' + g + ',' + b + ')' | |||
}, | |||
drawPic () { | |||
var canvas = document.getElementById('s-canvas') | |||
var ctx = canvas.getContext('2d') | |||
ctx.textBaseline = 'bottom' | |||
// 绘制背景 | |||
ctx.fillStyle = this.randomColor( | |||
this.backgroundColorMin, | |||
this.backgroundColorMax | |||
) | |||
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) | |||
// 绘制文字 | |||
for (let i = 0; i < this.identifyCode.length; i++) { | |||
this.drawText(ctx, this.identifyCode[i], i) | |||
} | |||
this.drawLine(ctx) | |||
this.drawDot(ctx) | |||
}, | |||
drawText (ctx, txt, i) { | |||
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) | |||
ctx.font = | |||
this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' | |||
var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) | |||
var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) | |||
var deg = this.randomNum(-30, 30) | |||
// 修改坐标原点和旋转角度 | |||
ctx.translate(x, y) | |||
ctx.rotate(deg * Math.PI / 270) | |||
ctx.fillText(txt, 0, 0) | |||
// 恢复坐标原点和旋转角度 | |||
ctx.rotate(-deg * Math.PI / 270) | |||
ctx.translate(-x, -y) | |||
}, | |||
drawLine (ctx) { | |||
// 绘制干扰线 | |||
for (let i = 0; i < 2; i++) { | |||
ctx.strokeStyle = this.randomColor( | |||
this.lineColorMin, | |||
this.lineColorMax | |||
) | |||
ctx.beginPath() | |||
ctx.moveTo( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight) | |||
) | |||
ctx.lineTo( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight) | |||
) | |||
ctx.stroke() | |||
} | |||
}, | |||
drawDot (ctx) { | |||
// 绘制干扰点 | |||
for (let i = 0; i < 20; i++) { | |||
ctx.fillStyle = this.randomColor(0, 255) | |||
ctx.beginPath() | |||
ctx.arc( | |||
this.randomNum(0, this.contentWidth), | |||
this.randomNum(0, this.contentHeight), | |||
1, | |||
0, | |||
2 * Math.PI | |||
) | |||
ctx.fill() | |||
} | |||
} | |||
}, | |||
watch: { | |||
identifyCode () { | |||
this.drawPic() | |||
} | |||
}, | |||
mounted () { | |||
this.drawPic() | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.s-canvas { | |||
width: 130px; | |||
height: 38px; | |||
cursor: pointer; | |||
} | |||
.s-canvas canvas{ | |||
margin-top: 1px; | |||
margin-left: 8px; | |||
} | |||
</style> |
@@ -6,9 +6,9 @@ | |||
<div class="top"> | |||
<div class="js"> | |||
<a class="title">关于我们</a> | |||
<a class="jcontent">据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽</a> | |||
<a class="jcontent">{{ aboutwe.content }}</a> | |||
</div> | |||
<img src="../../assets/about.png"> | |||
<img :src="aboutwe.img"> | |||
</div> | |||
<div class="bottom"/> | |||
</div> | |||
@@ -46,10 +46,15 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import { aboutUs, memberList } from '@/api/about.js' | |||
export default { | |||
name: 'about', | |||
data () { | |||
return { | |||
aboutwe: { | |||
content: '', | |||
img: '' | |||
}, | |||
ldList: [ | |||
{ | |||
img: '/ld.png', | |||
@@ -77,12 +82,27 @@ export default { | |||
}, | |||
components: { | |||
}, | |||
mounted () { | |||
this.getaboutUs() | |||
this.getmemberList() | |||
}, | |||
methods: { | |||
changenews (item) { | |||
this.informationitem = item | |||
}, | |||
changedepth (item) { | |||
this.depthitem = item | |||
}, | |||
async getaboutUs () { | |||
const { data: { message, data } } = await aboutUs() | |||
if (message === 'success') { | |||
this.aboutwe.content = data.remark | |||
this.aboutwe.img = data.image | |||
} | |||
}, | |||
async getmemberList () { | |||
const { data } = await memberList() | |||
console.log(data) | |||
} | |||
} | |||
} | |||
@@ -13,7 +13,8 @@ | |||
<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-input class="identify" v-model="form.name" placeholder="验证码"></el-input> | |||
<s-identify :identifyCode="identifyCode"></s-identify> | |||
</el-form-item> | |||
<el-form-item class="nomargin"> | |||
<el-button type="primary" >登陆</el-button> | |||
@@ -45,22 +46,27 @@ | |||
<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 id="szr"> | |||
<a>数字人视频</a> | |||
</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 id="zb"> | |||
<template v-for="(item, index) in aigczb" > | |||
<div v-if="item.flag === 'image'" :key="index" class="imagezb"> | |||
<img :src="item.img"> | |||
<el-button>进入直播间</el-button> | |||
<div class="textzb"> | |||
<a class="titlezb">主播: {{ item.name }}</a> | |||
<a class="contentzb">内容: {{ item.content }}</a> | |||
</div> | |||
</div> | |||
<!-- <a>{{ item.title }}</a> --> | |||
</div> | |||
<div v-else class="videozb" :key="index"> | |||
<img :src="item.img"> | |||
<div class="textzb"> | |||
<a class="titlezb">主播: {{ item.name }}</a> | |||
<a class="contentzb">内容: {{ item.content }}</a> | |||
</div> | |||
</div> | |||
</template> | |||
</div> | |||
</div> | |||
<div class="bottom"/> | |||
@@ -69,10 +75,21 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import SIdentify from '@/components/identify' | |||
export default { | |||
name: 'aigc', | |||
data () { | |||
return { | |||
identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz', | |||
identifyCode: '', | |||
rules: { | |||
verifycode: [{ | |||
required: true, | |||
trigger: 'blur', | |||
validator: this.validateVerifycode | |||
}] | |||
}, | |||
form: { | |||
name: '', | |||
region: '', | |||
@@ -100,10 +117,43 @@ export default { | |||
aitxt: { | |||
title: 'ACER助力车企新势力', | |||
content: '作为国产豪华大皮卡山海炮的越野版本,山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发,搭载国内最强的自研3.0T' | |||
} | |||
}, | |||
aigczb: [ | |||
{ | |||
img: '/aigc_img5.png', | |||
name: '主播名', | |||
content: '新车选购', | |||
flag: 'image' | |||
}, | |||
{ | |||
img: '/aigc_img1.png', | |||
name: '主播名', | |||
content: '新车选购', | |||
flag: 'image' | |||
}, | |||
{ | |||
img: '/aigc_img2.png', | |||
name: '主播名', | |||
content: '新车选购', | |||
flag: 'image' | |||
}, | |||
{ | |||
img: '/aigc_img3.png', | |||
name: '丰田锋兰达值得买吗?', | |||
content: '年底购车多少钱能落地价?', | |||
flag: 'video' | |||
}, | |||
{ | |||
img: '/aigc_img4.png', | |||
name: '丰田锋兰达值得买吗?', | |||
content: '年底购车多少钱能落地价?', | |||
flag: 'video' | |||
} | |||
] | |||
} | |||
}, | |||
components: { | |||
SIdentify | |||
}, | |||
methods: { | |||
changenews (item) { | |||
@@ -111,7 +161,27 @@ export default { | |||
}, | |||
changedepth (item) { | |||
this.depthitem = item | |||
}, | |||
randomNum (min, max) { | |||
return Math.floor(Math.random() * (max - min) + min) | |||
}, | |||
// 切换验证码 | |||
refreshCode () { | |||
this.identifyCode = '' | |||
this.makeCode(this.identifyCodes, 4) | |||
}, | |||
// 生成随机验证码 | |||
makeCode (o, l) { | |||
for (let i = 0; i < l; i++) { | |||
this.identifyCode += this.identifyCodes[ | |||
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) | |||
] | |||
} | |||
} | |||
}, | |||
mounted () { | |||
this.identifyCode = '' | |||
this.makeCode(this.identifyCodes, 4) | |||
} | |||
} | |||
</script> | |||
@@ -144,6 +214,13 @@ export default { | |||
.el-form-item { | |||
width: 350px; | |||
} | |||
.el-form-item:nth-child(3) { | |||
:deep .el-form-item__content { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
} | |||
.el-button { | |||
width: 100%; | |||
background-color: rgba(0, 0, 0, 0.384); | |||
@@ -158,6 +235,9 @@ export default { | |||
.nomargin { | |||
margin-bottom: 0px !important; | |||
} | |||
.identify { | |||
width: 240px; | |||
} | |||
} | |||
} | |||
@@ -236,37 +316,116 @@ export default { | |||
} | |||
} | |||
} | |||
// #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; | |||
// } | |||
// } | |||
// } | |||
// } | |||
// } | |||
#daliay { | |||
.content { | |||
.top { | |||
background-color: #ffffff00; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
#szr { | |||
a { | |||
font-size: 30px; | |||
font-weight: bold; | |||
color: #00161C; | |||
line-height: 48px; | |||
display: inline-block; | |||
position: relative; | |||
z-index: 9; | |||
} | |||
a::after { | |||
content: ''; | |||
position: absolute; | |||
left: 15%; | |||
bottom: 10px; | |||
width: 70%; | |||
height: 6px; /* 横线高度为文字高度的一半 */ | |||
background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
z-index: -1; | |||
} | |||
} | |||
#zb { | |||
.imagezb { | |||
width: 240px; | |||
height: 400px; | |||
float: left; | |||
margin-right: 60px; | |||
position: relative; | |||
img { | |||
width: 240px; | |||
height: 370px; | |||
} | |||
.el-button { | |||
position: absolute; | |||
bottom: 60px; | |||
left: 50px; | |||
border: none; | |||
background: #07CAAF; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
padding-top: 0px; | |||
padding-bottom: 0px; | |||
} | |||
.textzb { | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #030303; | |||
line-height: 16px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: space-between; | |||
height: 40px; | |||
a { | |||
display: inline-block; | |||
text-align: left; | |||
width: 130px; | |||
} | |||
} | |||
} | |||
.videozb { | |||
width: 240px; | |||
height: 400px; | |||
float: left; | |||
margin-right: 60px; | |||
position: relative; | |||
img { | |||
width: 240px; | |||
height: 370px; | |||
} | |||
.textzb { | |||
margin-top: 10px; | |||
line-height: 16px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: space-between; | |||
height: 40px; | |||
width: 100%; | |||
a { | |||
width: 100%; | |||
display: inline-block; | |||
text-align: left; | |||
} | |||
} | |||
} | |||
.videozb::after { | |||
content: ''; | |||
z-index: 99; | |||
width: 67px; | |||
height: 67px; | |||
position: absolute; | |||
background-image: url('../../assets/play.png'); | |||
left: 40%; | |||
top: 40%; | |||
z-index: 99; | |||
background-repeat: no-repeat; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div> | |||
<el-carousel height="590px"> | |||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<el-carousel-item class="lunbo" 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> | |||
@@ -11,14 +11,16 @@ | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top"> | |||
<div id="videocar"> | |||
<div id="videocar" class="lr"> | |||
<el-carousel :interval="5000" arrow="always" height="500px"> | |||
<el-carousel-item v-for="item in 4" :key="item"> | |||
<h3>{{ item }}</h3> | |||
</el-carousel-item> | |||
<template v-for="item in hotList.left" > | |||
<el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | |||
<video :src="item" /> | |||
</el-carousel-item> | |||
</template> | |||
</el-carousel> | |||
</div> | |||
<div id="hottxt"> | |||
<div id="hottxt" class="lr"> | |||
<el-carousel :interval="5000" height="500px"> | |||
<el-carousel-item v-for="item in hotList.right" :key="item.title"> | |||
<div class="txtcontent"> | |||
@@ -35,13 +37,13 @@ | |||
</el-carousel> | |||
</div> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> | |||
</div> | |||
</div> | |||
<div id="daliay"> | |||
<div class="content"> | |||
<div class="top"> | |||
<div class="yyzrbtxt"> | |||
<div class="yyzrbtxt lr"> | |||
<div class="txtcontent"> | |||
<img src="@/assets/rblogo.png" class="logo"> | |||
<div class="title"> | |||
@@ -53,45 +55,106 @@ | |||
<el-button plain class="more" size="small">MORE</el-button> | |||
</div> | |||
</div> | |||
<div class="yyzrbimg" /> | |||
<div class="yyzrbimg lr" :style="{ backgroundImage: `url(${daliay.img})` }"/> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | |||
</div> | |||
</div> | |||
<div id="wk"> | |||
<el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> | |||
<a :href="alink" target="_blank"> | |||
<el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> | |||
</a> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | |||
export default { | |||
name: 'home', | |||
data () { | |||
return { | |||
carouselList: [ | |||
{ src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
{ src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
], | |||
carouselList: [], | |||
hotList: { | |||
left: [], | |||
right: [ | |||
{ | |||
title: '蔚来汽车:不断扩张的换电“帝国”', | |||
content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长' | |||
}, | |||
{ | |||
title: '蔚来汽车:不断扩张的换电“帝国”11', | |||
content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长' | |||
} | |||
] | |||
right: [] | |||
}, | |||
gg1: '', | |||
gg2: '', | |||
alink: '', | |||
daliay: { | |||
title: '不造车的华为,想成为车企离 不开的企业', | |||
content: '据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽' | |||
} | |||
title: '', | |||
content: '', | |||
img: '' | |||
}, | |||
display: 0 | |||
} | |||
}, | |||
components: { | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
this.getlunboList() | |||
this.getcarNewsHotList() | |||
this.getguanggao() | |||
this.getLink() | |||
this.getyuanyuzhouHotList() | |||
}, | |||
methods: { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.link, | |||
subtitle: iter.link | |||
}) | |||
} | |||
} | |||
}, | |||
async getcarNewsHotList () { | |||
const { data: { message, data } } = await carNewsHotList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
const { image, video, title, subTitle } = iter.news | |||
this.hotList.left.push(video) | |||
this.hotList.right.push({ | |||
title: title, | |||
content: subTitle, | |||
png: image | |||
}) | |||
} | |||
} | |||
}, | |||
async getguanggao () { | |||
const { data: { message: ggm1, data: gg1 } } = await guanggao(1) | |||
const { data: { message: ggm2, data: gg2 } } = await guanggao(2) | |||
if (ggm1 === 'success' && ggm2 === 'success') { | |||
this.gg1 = gg1.image | |||
this.gg2 = gg2.image | |||
} | |||
}, | |||
async getLink () { | |||
const { data: { message, data: { link: alink } } } = await link() | |||
if (message === 'success') { | |||
this.alink = alink | |||
} | |||
}, | |||
async getyuanyuzhouHotList () { | |||
const { data: { message, data: { list } } } = await yuanyuzhouHotList() | |||
if (message === 'success') { | |||
this.daliay.title = list[0].news.title | |||
this.daliay.content = list[0].news.subTitle | |||
this.daliay.img = list[0].news.image | |||
} | |||
}, | |||
async gethotnewsConfig () { | |||
const { data: { message, data: { display } } } = await hotnewsConfig() | |||
if (message === 'success') { | |||
this.display = display | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -122,6 +185,10 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
} | |||
#hot, #daliay { | |||
width: 100%; | |||
height: 700px; | |||
@@ -142,7 +209,7 @@ export default { | |||
min-height: 470px; | |||
// background: black; | |||
display: flex; | |||
div { | |||
.lr { | |||
width: 50%; | |||
height: 100%; | |||
} | |||
@@ -150,12 +217,13 @@ export default { | |||
width: 100% !important; | |||
} | |||
#hottxt { | |||
background: #000000e6; | |||
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%; | |||
left: 90%; | |||
} | |||
:deep .el-carousel__button { | |||
width: 5px; | |||
@@ -295,3 +363,4 @@ export default { | |||
} | |||
} | |||
</style> | |||
@/api/home.js |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div> | |||
<el-carousel height="590px"> | |||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<el-carousel-item class="lunbo" 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> | |||
@@ -10,7 +10,7 @@ | |||
</el-carousel> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top"> | |||
<div class="top" v-if="display"> | |||
<div id="imgtxt"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
@@ -28,7 +28,7 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> | |||
</div> | |||
</div> | |||
<div id="daliay"> | |||
@@ -41,7 +41,7 @@ | |||
</el-carousel-item> | |||
</el-carousel> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | |||
</div> | |||
</div> | |||
<div id="wk"> | |||
@@ -57,22 +57,21 @@ | |||
<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> | |||
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js' | |||
export default { | |||
name: 'information', | |||
data () { | |||
return { | |||
carouselList: [ | |||
{ src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
{ src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
// { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
// { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
], | |||
hotnews: { | |||
title: '这两款产品也将采用“CHN”的模式进行研发', | |||
@@ -105,18 +104,18 @@ export default { | |||
} | |||
], | |||
carvideoList: [ | |||
{ | |||
title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
img: '/carvideo.png' | |||
}, | |||
{ | |||
title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
img: '/carvideo.png' | |||
}, | |||
{ | |||
title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
img: '/carvideo.png' | |||
} | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// }, | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// }, | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// } | |||
], | |||
carList: [ | |||
{ | |||
@@ -145,10 +144,67 @@ export default { | |||
subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
} | |||
] | |||
], | |||
display: 1, | |||
gg1: '', | |||
gg2: '' | |||
} | |||
}, | |||
components: { | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
this.getlunboList() | |||
this.getguanggao() | |||
this.gethotlist() | |||
this.getvideoList() | |||
}, | |||
methods: { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.link, | |||
subtitle: iter.link | |||
}) | |||
} | |||
} | |||
}, | |||
async gethotnewsConfig () { | |||
const { data: { message, data: { display } } } = await hotNewsConfig() | |||
if (message === 'success') { | |||
this.display = display | |||
} | |||
}, | |||
async getguanggao () { | |||
const { data: { message: ggm1, data: gg1 } } = await guanggao(1) | |||
const { data: { message: ggm2, data: gg2 } } = await guanggao(2) | |||
if (ggm1 === 'success' && ggm2 === 'success') { | |||
this.gg1 = gg1.image | |||
this.gg2 = gg2.image | |||
} | |||
}, | |||
async gethotlist () { | |||
const { data: { message, data } } = await hotlist() | |||
if (message === 'success') { | |||
this.hotnews.title = data.list[0].title | |||
this.hotnews.img = data.list[0].image | |||
} | |||
}, | |||
async getvideoList () { | |||
const { data: { message, data } } = await videoList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carvideoList.push({ | |||
title: iter.title, | |||
img: iter.image | |||
}) | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -179,9 +235,12 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
} | |||
#hot, #daliay, #wk { | |||
width: 100%; | |||
height: 700px; | |||
background: #E3E5EA; | |||
display: flex; | |||
align-items: center; | |||
@@ -297,7 +356,9 @@ export default { | |||
} | |||
} | |||
#hot { | |||
min-height: 100px; | |||
.content { | |||
margin-top: 20px; | |||
.top { | |||
min-height: 470px; | |||
margin-bottom: 40px; | |||
@@ -333,7 +394,9 @@ export default { | |||
} | |||
} | |||
} | |||
#daliay { | |||
height: 700px; | |||
.top { | |||
// justify-content: space-between; | |||
background-color: #00000000 !important; | |||
@@ -372,6 +435,7 @@ export default { | |||
} | |||
#wk { | |||
height: 700px; | |||
.content { | |||
background-color: #FFFFFF; | |||
display: flex; | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div> | |||
<el-carousel height="590px"> | |||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<el-carousel-item class="lunbo" 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> | |||
@@ -28,7 +28,7 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> | |||
</div> | |||
</div> | |||
<div id="daliay"> | |||
@@ -52,7 +52,7 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom"/> | |||
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | |||
</div> | |||
</div> | |||
<div id="wk"> | |||
@@ -80,6 +80,7 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import { guanggao, lunboList } from '@/api/metadaily.js' | |||
export default { | |||
name: 'metadaily', | |||
data () { | |||
@@ -89,8 +90,8 @@ export default { | |||
depth: ['XR', 'Web3', 'Ai'], | |||
depthitem: 'XR', | |||
carouselList: [ | |||
{ src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
{ src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
// { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }, | |||
// { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' } | |||
], | |||
hotnews: { | |||
title: '这两款产品也将采用“CHN”的模式进行研发', | |||
@@ -122,20 +123,6 @@ export default { | |||
img: '/aigclist.png' | |||
} | |||
], | |||
// carvideoList: [ | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// }, | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// }, | |||
// { | |||
// title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”', | |||
// img: '/carvideo.png' | |||
// } | |||
// ], | |||
carList: [ | |||
{ | |||
img: '/cattxt.png', | |||
@@ -154,17 +141,44 @@ export default { | |||
title: '首款高端纯电MPV翼真Xspace', | |||
subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这' | |||
} | |||
] | |||
], | |||
gg1: '', | |||
gg2: '' | |||
} | |||
}, | |||
components: { | |||
}, | |||
mounted () { | |||
this.getguanggao() | |||
this.getlunboList() | |||
}, | |||
methods: { | |||
changenews (item) { | |||
this.informationitem = item | |||
}, | |||
changedepth (item) { | |||
this.depthitem = item | |||
}, | |||
async getguanggao () { | |||
const { data: { message: ggm1, data: gg1 } } = await guanggao(1) | |||
const { data: { message: ggm2, data: gg2 } } = await guanggao(2) | |||
if (ggm1 === 'success' && ggm2 === 'success') { | |||
this.gg1 = gg1.image | |||
this.gg2 = gg2.image | |||
} | |||
}, | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.link, | |||
subtitle: iter.link | |||
}) | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -196,6 +210,10 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
} | |||
#hot, #daliay, #wk { | |||
width: 100%; | |||
height: 700px; | |||
@@ -19,5 +19,16 @@ module.exports = { | |||
return args | |||
}) | |||
}, | |||
productionSourceMap: false | |||
productionSourceMap: false, | |||
devServer: { | |||
proxy: { | |||
'/api': { | |||
target: 'https://www.meta-autotv.com/homeC', // 后端服务器地址 | |||
changeOrigin: true, // 是否改变Origin头信息 | |||
pathRewrite: { | |||
'^/api': '' | |||
} | |||
} | |||
} | |||
} | |||
} |