Browse Source

文章列表

master
chutingting 1 year ago
parent
commit
5be7136c5a
9 changed files with 27547 additions and 77 deletions
  1. +27401
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +26
    -0
      src/api/article.js
  4. +2
    -1
      src/components/hotNews/index.vue
  5. +2
    -0
      src/main.js
  6. +103
    -67
      src/views/article/list.vue
  7. +2
    -2
      src/views/home/index.vue
  8. +2
    -2
      src/views/information/index.vue
  9. +8
    -5
      src/views/metadaily/index.vue

+ 27401
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 1
- 0
package.json View File

@@ -13,6 +13,7 @@
"core-js": "^3.6.5",
"element-ui": "^2.15.14",
"identify": "^0.1.5",
"moment": "^2.30.1",
"swiper": "^3.4.0",
"vue": "^2.6.11",
"vue-router": "^3.5.2"


+ 26
- 0
src/api/article.js View File

@@ -0,0 +1,26 @@
import request from './request'

/**
* 新闻列表
* @returns request
*/
export const newsListApi = (data) => {
return request({
method: 'GET',
url: `/news/list`,
params: data
})
}

/**
* 相关视频
* @returns request
*/
export const videoListApi = (data) => {
return request({
method: 'GET',
url: `/car/videoList`,
params: data
})
}

+ 2
- 1
src/components/hotNews/index.vue View File

@@ -23,6 +23,7 @@
export default {
props: {
list: Array,
type: Number
},
watch: {
list: {
@@ -43,7 +44,7 @@ export default {
},
methods: {
routerTo() {
this.$router.push({ path: '/articleList' })
this.$router.push({ path: '/articleList', query: {type : this.type } })
},
routerToarticleDetails() {
localStorage.setItem('article', value)


+ 2
- 0
src/main.js View File

@@ -5,6 +5,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/element-variables.scss'
import App from './App.vue'
import router from './router'
import moment from 'moment'
Vue.prototype.$moment = moment
Vue.config.productionTip = false
Vue.use(Element)
new Vue({


+ 103
- 67
src/views/article/list.vue View File

@@ -5,19 +5,22 @@
<div class="content">
<div class="list">
<div class="article" v-for="(item, index) in articleList" :key="index">
<img :src="item.img">
<img :src="item.image">
<div class="acontent">
<div class="txt">
<a class="title">{{ item.title }}</a>
<a class="tcontent">{{ item.content }}</a>
<a class="tcontent">{{ item.detailText }}</a>
</div>
<a class="date">发布日期: {{ item.date }}</a>
<a class="date">发布日期: {{ $moment(item.sendDate).format('YYYY-MM-DD HH:mm:ss') }}</a>
</div>
</div>
<el-pagination
@current-change="handleCurrentChange"
background
layout="prev, pager, next"
:total="1000">
:page-size="pageSize"
:current-page.sync="pageNum"
:total="total">
</el-pagination>
</div>
<div class="right">
@@ -26,8 +29,8 @@
<a>热点新闻</a>
</div>
<div class="nav" v-for="(item,index) in news" :key="index">
<img :src="item.img">
<a>{{ item.txt }}</a>
<img :src="item.image">
<a>{{ item.title }}</a>
</div>
</div>
<div class="rbottom">
@@ -35,86 +38,99 @@
<a>相关视频</a>
</div>
<div class="nav" v-for="(item,index) in videos" :key="index">
<img :src="item.img">
<a>{{ item.txt }}</a>
<img :src="item.image">
<a>{{ item.title }}</a>
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)">
</div>
</div>
</div>
</div>
</div>
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%">
<VideoDialog :url="videoUrl" :lock-scroll="false" :append-to-body="true"></VideoDialog>
</el-dialog>
</div>
</template>
<script>
import Swiper from '@/components/swiper'
import VideoDialog from '@/components/video'
import { lunboList } from '@/api/home.js'
import { newsListApi, videoListApi } from '@/api/article.js'
/* eslint-disable */
export default {
name: 'home',
data () {
return {
total: 0,
pageSize: 10,
pageNum: 1,
carouselList: [],
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'
}
]
articleList: [],
news: [],
videos: [],
videoDialogVisible: false,
videoUrl: ''
}
},
components: {
Swiper
Swiper,
VideoDialog
},
created () {
this.getlunboList()
this.getnewsList()
this.getHotList()
this.getVideoList()
},
methods: {
handleCurrentChange(val) {
this.pageNum = val
this.getnewsList()
},
async getlunboList () {
const { data: { code, data } } = await lunboList()
if (code === 200) {
this.carouselList = data.list
this.total = Number(data.total)
}
},
async getnewsList () {
let d = {
pageNum: this.pageNum,
pageSize: this.pageSize,
type: this.$route.query.type,
subType: this.$route.query.subType
}
const { data: { code, data } } = await newsListApi(d)
if (code === 200) {
this.articleList = data.list
}
},
async getHotList () {
let d = {
pageNum: 1,
pageSize: 3,
type: 1,
subType: 11
}
const { data: { code, data } } = await newsListApi(d)
if (code === 200) {
this.news = data.list
}
},
async getVideoList() {
let d = {
pageNum: 1,
pageSize: 3
}
const { data: { code, data } } = await videoListApi(d)
if (code === 200) {
this.videos = data.list
}
},
videoPlayer (item) {
this.videoUrl = item.link
this.videoDialogVisible = true
}
}
}
@@ -163,8 +179,10 @@ export default {
background-color: #FFFFFF;
.article {
display: flex;
margin-bottom: 24px;
img {
width: 200px;
min-width: 200px;
height: 150px;
}
.acontent {
@@ -173,18 +191,29 @@ export default {
flex-direction: column;
justify-content: space-between;
padding: 0 10px;
margin-bottom: 20px;
.txt {
a {
display: block;
text-align: left;
}
.tcontent{
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
font-weight: 400;
color: #000000;
line-height: 24px;
margin-top: 4px;
}
}
.title {
font-size: 18px;
font-weight: bold;
color: #000000;
line-height: 48px;
line-height: 35px;
}
.content {
font-size: 14px;
@@ -196,7 +225,6 @@ export default {
font-size: 14px;
font-weight: 400;
color: #7D8392;
line-height: 30px;
text-align: left;
}
}
@@ -207,12 +235,10 @@ export default {
}
.right {
width: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
.rtop, .rbottom {
background-color: #FFFFFF;
margin-bottom: 20px;
padding-bottom: 20px;
width: 100%;
.title {
background-image: url('../../assets/airtlctl.png');
@@ -234,16 +260,26 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 10px 0;
margin: 20px 0 10px 0;
position: relative;
img {
width: 240px;
height: 180px;
}
.play{
width: 60px;
position: absolute;
left: 50%;
top: 38px;
margin-left: -30px;
cursor: pointer;
}
a {
font-size: 16px;
font-weight: 400;
color: #000000;
line-height: 48px;
line-height: 20px;
width: 240px;
margin-top: 18px;
}
}
}


+ 2
- 2
src/views/home/index.vue View File

@@ -8,7 +8,7 @@
<el-carousel-item v-for="(item, index) in hotList" :key="index">
<div class="lr videocar">
<img class="videoImage" :src="item.news.videoImage" />
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'play'+index">
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)">
</div>
<div id="hottxt" class="lr">
<div class="txtcontent">
@@ -25,7 +25,7 @@
</el-carousel-item>
</el-carousel>
</div>
<HotNews v-if="display" :list="hotnewsList"/>
<HotNews v-if="display" :list="hotnewsList" :type="1"/>
<a :href="gg1.link" v-if="gg1.img" target="_blank">
<img class="bottom" :src="gg1.img" alt="">
</a>


+ 2
- 2
src/views/information/index.vue View File

@@ -3,7 +3,7 @@
<Swiper :banner-array="carouselList" />
<div id="hot">
<div class="content">
<HotNews v-if="display" :list="hotnewsList"/>
<HotNews v-if="display" :list="hotnewsList" :type="1"/>
<a :href="gg1.link" v-if="gg1.img" target="_blank">
<img class="bottom" :src="gg1.img" alt="">
</a>
@@ -94,7 +94,7 @@ export default {
this.$router.push({ path: '/articleDetails' })
},
routerTo () {
this.$router.push({ path: '/articleList' })
this.$router.push({ path: '/articleList', query: {type : 2 } })
},
async getlunboList () {
const { data: { code, data } } = await lunboList()


+ 8
- 5
src/views/metadaily/index.vue View File

@@ -3,7 +3,7 @@
<Swiper :banner-array="carouselList" />
<div id="hot">
<div class="content">
<HotNews v-if="display" :list="hotnewsList"/>
<HotNews v-if="display" :list="hotnewsList" :type="1"/>
</div>
</div>
<div class="gg" v-if="gg1.img" >
@@ -15,7 +15,7 @@
<div class="content">
<div class="htitle">
<a class="tle">资讯</a>
<el-button type="text" @click="routerTo">MORE+</el-button>
<el-button type="text" @click="routerTo(31)">MORE+</el-button>
</div>
<div id="hotList">
<div class="list" v-for="(item, index) in zixun" :key="index" @click="routerToarticleDetails(item.detail)">
@@ -40,7 +40,7 @@
<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" @click="routerTo">MORE+</el-button>
<el-button type="text" @click="routerTo(32)">MORE+</el-button>
</div>
<div id="hotList">
<div class="list" v-for="(item, index) in shendu" :key="index" @click="routerToarticleDetails(item.detail)">
@@ -93,8 +93,11 @@ export default {
localStorage.setItem('article', value)
this.$router.push({ path: '/articleDetails' })
},
routerTo () {
this.$router.push({ path: '/articleList' })
routerTo (type) {
this.$router.push({ path: '/articleList', query: {
type: 3,
subType: type
} })
},
changenews (item) {
this.getzixun()


Loading…
Cancel
Save