真食物配套的电商小程序.
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.
 
 
 

125 lines
3.4 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 => {
res.data.content = res.data.content.replace(/\<img/gi, '<img style="max-width:100% !important; height:auto"')
that.articleInfo = res.data
console.log(that.articleInfo)
that.updateTitle()
})
},
},
}
</script>