Browse Source

小程序新闻列表图片不能自适应调整大小

master
Gao xiaosong 4 years ago
parent
commit
c2e4ec1d7d
  1. 38
      pages/shop/news/NewsDetail/index.vue

38
pages/shop/news/NewsDetail/index.vue

@ -3,12 +3,8 @@
<view class="title">{{ articleInfo.title }}</view> <view class="title">{{ articleInfo.title }}</view>
<view class="list acea-row row-middle"> <view class="list acea-row row-middle">
<view class="label cart-color line1">新闻专区</view> <view class="label cart-color line1">新闻专区</view>
<view class="item"> <view class="item"> <text class="iconfont icon-shenhezhong"></text>{{ articleInfo.addTime }} </view>
<text class="iconfont icon-shenhezhong"></text>{{ articleInfo.addTime }} <view class="item"> <text class="iconfont icon-liulan"></text>{{ articleInfo.visit }} </view>
</view>
<view class="item">
<text class="iconfont icon-liulan"></text>{{ articleInfo.visit }}
</view>
</view> </view>
<view class="conter" v-html="articleInfo.content"></view> <view class="conter" v-html="articleInfo.content"></view>
</view> </view>
@ -71,7 +67,7 @@
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.newsDetail .picTxt .label:after { .newsDetail .picTxt .label:after {
content: " "; content: ' ';
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
@ -92,23 +88,23 @@
} }
</style> </style>
<script> <script>
import { getArticleDetails } from "@/api/public"; import { getArticleDetails } from '@/api/public'
export default { export default {
name: "NewsDetail", name: 'NewsDetail',
components: {}, components: {},
props: {}, props: {},
data: function() { data: function() {
return { return {
articleInfo: {} articleInfo: {},
}; }
}, },
watch: { watch: {
$yroute(to) { $yroute(to) {
if (to.name === "NewsDetail") this.articleDetails(); if (to.name === 'NewsDetail') this.articleDetails()
} },
}, },
mounted: function() { mounted: function() {
this.articleDetails(); this.articleDetails()
}, },
methods: { methods: {
updateTitle() { updateTitle() {
@ -116,12 +112,14 @@ export default {
}, },
articleDetails: function() { articleDetails: function() {
let that = this, let that = this,
id = this.$yroute.query.id; id = this.$yroute.query.id
getArticleDetails(id).then(res => { getArticleDetails(id).then(res => {
that.articleInfo = res.data; res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto;"')
that.updateTitle(); that.articleInfo = res.data
}); console.log(that.articleInfo)
} that.updateTitle()
})
},
},
} }
};
</script> </script>

Loading…
Cancel
Save