Ver código fonte

轮播

master
我叫MT 1 ano atrás
pai
commit
59c950ea58
6 arquivos alterados com 154 adições e 27 exclusões
  1. +22
    -0
      src/api/metadaily.js
  2. +4
    -0
      src/styles/element-variables.scss
  3. +108
    -21
      src/views/aigc/index.vue
  4. +0
    -1
      src/views/home/index.vue
  5. +2
    -1
      src/views/information/index.vue
  6. +18
    -4
      src/views/metadaily/index.vue

+ 22
- 0
src/api/metadaily.js Ver arquivo

@@ -43,3 +43,25 @@ export const hotnews = (num = 1, size = 10) => {
url: `/api/news/list?type=1?pageNum=${num}&pageSize=${size}`
})
}
/**
* 资讯
* @returns request
*/
export const zixun = (num = 1, size = 10, flag='XR') => {
return request({
method: 'GET',
url: `/api/news/list?pageNum=${num}&pageSize=${size}&type=3&subType=31&tag=${flag}`
})
}
/**
* 深度
* @returns request
*/
export const shendu = (num = 1, size = 10, flag ='XR') => {
return request({
method: 'GET',
url: `/api/news/list?pageNum=${num}&pageSize=${size}&type=3&subType=32&tag=${flag}`
})
}

+ 4
- 0
src/styles/element-variables.scss Ver arquivo

@@ -9,6 +9,10 @@ $--color-primary: #00ebc3 !important;
}
}
}
.el-carousel__container {
height: 590px;
}
.el-carousel__indicators--outside {
bottom: 0;
position: absolute;


+ 108
- 21
src/views/aigc/index.vue Ver arquivo

@@ -1,10 +1,14 @@
<template>
<div>
<div id="top">
<div class="txt">
<a>META</a>
<a>AUTO</a>
</div>
<el-carousel >
<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>
</div>
</el-carousel-item>
</el-carousel>
<el-form ref="form" :model="form" label-width="0px">
<el-form-item>
<el-input v-model="form.name" placeholder="手机号"></el-input>
@@ -76,11 +80,12 @@
</template>
<script>
import SIdentify from '@/components/identify'
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList } from '@/api/aigc.js'
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
export default {
name: 'aigc',
data () {
return {
carouselList: [],
identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
identifyCode: '',
rules: {
@@ -159,8 +164,21 @@ export default {
this.getshuzirenList()
this.getshuzirenZhiBoList()
this.getvideoList()
this.getlunboList()
},
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 getguanggao () {
const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
@@ -221,31 +239,54 @@ export default {
}
</script>
<style lang="scss" scoped>
#top {
.el-carousel__container {
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;
}
.el-carousel__item{
background-size: 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: flex-end;
::deep .el-carousel__container {
background-color: #00000000 !important;
height: 590px !important;
}
#txt {
display: flex;
justify-content: space-between;
a {
line-height: 15px;
font-size: 18px;
flex-direction: column;
margin-bottom: 50px;
color: #FFFFFF;
.title {
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 40px;
text-align: center;
margin-bottom: 15px;
}
.subtitle {
font-size: 16px;
font-weight: 400;
opacity: 0.5;
text-align: center;
}
}
}
.lunbo {
background-size: auto;
background-position: center;
}
#top {
height: 590px;
width: 100%;
// background-image: url('../../assets/aigctop.png');
background-size: 100.5% 100%;
position: relative;
.el-form {
position: absolute;
top: 40%;
left: 55%;
z-index: 99;
.el-form-item {
width: 350px;
}
@@ -274,6 +315,52 @@ export default {
width: 240px;
}
}
.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;
}
}
}
}
#hot, #daliay {


+ 0
- 1
src/views/home/index.vue Ver arquivo

@@ -373,4 +373,3 @@ export default {
}
}
</style>
@/api/home.js

+ 2
- 1
src/views/information/index.vue Ver arquivo

@@ -348,6 +348,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
width: 45%;
img {
width: 140px;
height: 110px;
@@ -356,7 +357,7 @@ export default {
font-size: 14px;
font-weight: 400;
color: #010101;
line-height: 48px;
// line-height: 48px;
}
}
}


+ 18
- 4
src/views/metadaily/index.vue Ver arquivo

@@ -80,7 +80,7 @@
</div>
</template>
<script>
import { guanggao, lunboList, hotNewsConfig, hotnews } from '@/api/metadaily.js'
import { guanggao, lunboList, hotNewsConfig, hotnews, shendu, zixun } from '@/api/metadaily.js'
export default {
name: 'metadaily',
data () {
@@ -153,7 +153,9 @@ export default {
this.gethotnewsConfig()
this.getguanggao()
this.getlunboList()
this.gethotnews()
// this.gethotnews()
this.getshendu()
this.getzixun()
},
methods: {
changenews (item) {
@@ -189,8 +191,20 @@ export default {
this.display = display
}
},
async gethotnews () {
const { data: { message, data } } = await hotnews()
// async gethotnews () {
// const { data: { message, data } } = await hotnews()
// if (message === 'success') {
// console.log(data)
// }
// },
async getshendu () {
const { data: { message, data } } = await shendu()
if (message === 'success') {
console.log(data)
}
},
async getzixun () {
const { data: { message, data } } = await zixun()
if (message === 'success') {
console.log(data)
}


Carregando…
Cancelar
Salvar