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
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>
|
|
|