增加基本项目配置
This commit is contained in:
Gao xiaosong
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="newsDetail">
|
||||
<div class="title">{{ articleInfo.title }}</div>
|
||||
<div class="list acea-row row-middle">
|
||||
<div class="label cart-color line1">新闻专区</div>
|
||||
<div class="item">
|
||||
<span class="iconfont icon-shenhezhong"></span>{{ articleInfo.addTime }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconfont icon-liulan"></span>{{ articleInfo.visit }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="conter" v-html="articleInfo.content"></div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.newsDetail .picTxt {
|
||||
width: 6.9rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.2rem;
|
||||
border: 1px solid #e1e1e1;
|
||||
position: relative;
|
||||
margin: 0.3rem auto 0 auto;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.2rem 0 0 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
.newsDetail .picTxt .text {
|
||||
width: 4.6rem;
|
||||
}
|
||||
.newsDetail .picTxt .text .name {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
}
|
||||
.newsDetail .picTxt .text .money {
|
||||
font-size: 0.24rem;
|
||||
margin-top: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.newsDetail .picTxt .text .money .num {
|
||||
font-size: 0.36rem;
|
||||
}
|
||||
.newsDetail .picTxt .text .y_money {
|
||||
font-size: 0.26rem;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.newsDetail .picTxt .label {
|
||||
position: absolute;
|
||||
background-color: #303131;
|
||||
width: 1.6rem;
|
||||
height: 0.5rem;
|
||||
right: -0.07rem;
|
||||
border-radius: 0.25rem 0 0.06rem 0.25rem;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
bottom: 0.24rem;
|
||||
}
|
||||
.newsDetail .picTxt .label .span {
|
||||
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -moz-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.newsDetail .picTxt .label:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 0.08rem solid #303131;
|
||||
border-right: 0.08rem solid transparent;
|
||||
top: -0.08rem;
|
||||
right: 0;
|
||||
}
|
||||
.newsDetail .bnt {
|
||||
color: #fff;
|
||||
font-size: 0.3rem;
|
||||
width: 6.9rem;
|
||||
height: 0.9rem;
|
||||
border-radius: 0.45rem;
|
||||
margin: 0.48rem auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { getArticleDetails } from "@/api/public";
|
||||
export default {
|
||||
name: "NewsDetail",
|
||||
components: {},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
articleInfo: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute(to) {
|
||||
if (to.name === "NewsDetail") this.articleDetails();
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.articleDetails();
|
||||
},
|
||||
methods: {
|
||||
updateTitle() {
|
||||
// document.title = this.articleInfo.title || this.$yroute.meta.title;
|
||||
},
|
||||
articleDetails: function() {
|
||||
let that = this,
|
||||
id = this.$yroute.query.id;
|
||||
getArticleDetails(id).then(res => {
|
||||
that.articleInfo = res.data;
|
||||
that.updateTitle();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="newsList" ref="container">
|
||||
<div class="list" v-for="(item, articleListIndex) in articleList" :key="articleListIndex">
|
||||
<div
|
||||
@click="$yrouter.push({ path: '/pages/shop/news/NewsDetail/index',query:{id:item.id }})"
|
||||
class="item acea-row row-between-wrapper"
|
||||
>
|
||||
<div class="text acea-row row-column-between">
|
||||
<div class="name line2">{{ item.title }}</div>
|
||||
<div>{{ item.addTime }}</div>
|
||||
</div>
|
||||
<div class="pictrue">
|
||||
<img :src="item.imageInput" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--暂无新闻-->
|
||||
<div class="noCommodity" v-if="articleList.length === 0 && page > 1">
|
||||
<div class="noPictrue">
|
||||
<img :src="$VUE_APP_RESOURCES_URL+'/images/noNews.png'" class="image" />
|
||||
</div>
|
||||
</div>
|
||||
<!--</Tab>-->
|
||||
<!--</Tabs>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { getArticleList } from "@/api/public";
|
||||
|
||||
export default {
|
||||
name: "NewsList",
|
||||
components: {},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loadTitle: "",
|
||||
loading: false,
|
||||
loadend: false,
|
||||
imgUrls: [],
|
||||
navLsit: [],
|
||||
articleList: [],
|
||||
active: 0,
|
||||
cid: 0,
|
||||
swiperNew: {
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
autoplay: {
|
||||
disableOnInteraction: false,
|
||||
delay: 2000
|
||||
},
|
||||
loop: true,
|
||||
speed: 1000,
|
||||
observer: true,
|
||||
observeParents: true
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
// this.articleBanner();
|
||||
//this.articleCategory();
|
||||
this.getArticleLists();
|
||||
// this.$scroll(this.$refs.container, () => {
|
||||
// !this.loading && this.getArticleLists();
|
||||
// });
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getArticleLists();
|
||||
},
|
||||
methods: {
|
||||
getArticleLists: function() {
|
||||
let that = this;
|
||||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||||
that.loading = true;
|
||||
let q = {
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
};
|
||||
getArticleList(q).then(res => {
|
||||
that.loading = false;
|
||||
//apply();js将一个数组插入另一个数组;
|
||||
that.articleList.push.apply(that.articleList, res.data);
|
||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||||
that.page = that.page + 1;
|
||||
});
|
||||
},
|
||||
onClick: function(name) {
|
||||
if (name === 0) this.articleHotList();
|
||||
else {
|
||||
this.cid = this.navLsit[name].id;
|
||||
this.articleList = [];
|
||||
this.page = 1;
|
||||
this.loadend = false;
|
||||
this.loading = false;
|
||||
this.getArticleLists(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
Reference in New Issue
Block a user