You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

127 lines
3.1 KiB

<template>
<view class="newsDetail">
<view class="title">{{ articleInfo.title }}</view>
<view class="list acea-row row-middle">
<view class="label cart-color line1">新闻专区</view>
<view class="item">
<text class="iconfont icon-shenhezhong"></text>{{ articleInfo.addTime }}
</view>
<view class="item">
<text class="iconfont icon-liulan"></text>{{ articleInfo.visit }}
</view>
</view>
<view class="conter" v-html="articleInfo.content"></view>
</view>
</template>
<style scoped lang="less">
.newsDetail .picTxt {
width: 6.9*100rpx;
height: 2*100rpx;
border-radius: 0.2*100rpx;
border: 1px solid #e1e1e1;
position: relative;
margin: 0.3*100rpx auto 0 auto;
}
.newsDetail .picTxt .pictrue {
width: 2*100rpx;
height: 2*100rpx;
}
.newsDetail .picTxt .pictrue image{
width: 100%;
height: 100%;
border-radius: 0.2*100rpx 0 0 0.2*100rpx;
display: block;
}
.newsDetail .picTxt .text {
width: 4.6*100rpx;
}
.newsDetail .picTxt .text .name {
font-size: 0.3*100rpx;
color: #282828;
}
.newsDetail .picTxt .text .money {
font-size: 0.24*100rpx;
margin-top: 0.4*100rpx;
font-weight: bold;
}
.newsDetail .picTxt .text .money .num {
font-size: 0.36*100rpx;
}
.newsDetail .picTxt .text .y_money {
font-size: 0.26*100rpx;
color: #999;
text-decoration: line-through;
}
.newsDetail .picTxt .label {
position: absolute;
background-color: #303131;
width: 1.6*100rpx;
height: 0.5*100rpx;
right: -0.07*100rpx;
border-radius: 0.25*100rpx 0 0.06*100rpx 0.25*100rpx;
text-align: center;
line-height: 0.5*100rpx;
bottom: 0.24*100rpx;
}
.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.08*100rpx solid #303131;
border-right: 0.08*100rpx solid transparent;
top: -0.08*100rpx;
right: 0;
}
.newsDetail .bnt {
color: #fff;
font-size: 0.3*100rpx;
width: 6.9*100rpx;
height: 0.9*100rpx;
border-radius: 0.45*100rpx;
margin: 0.48*100rpx auto 0 auto;
text-align: center;
line-height: 0.9*100rpx;
}
</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>