cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gao xiaosong
2021-07-02 23:00:13 +08:00
parent 312d43e80b
commit c2e4ec1d7d
1 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages/shop/news/NewsDetail/index.vue
View File

@ -3,65 +3,61 @@
<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>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.newsDetail .picTxt { .newsDetail .picTxt {
width: 6.9*100rpx; width: 6.9 * 100rpx;
height: 2*100rpx; height: 2 * 100rpx;
border-radius: 0.2*100rpx; border-radius: 0.2 * 100rpx;
border: 1px solid #e1e1e1; border: 1px solid #e1e1e1;
position: relative; position: relative;
margin: 0.3*100rpx auto 0 auto; margin: 0.3 * 100rpx auto 0 auto;
} }
.newsDetail .picTxt .pictrue { .newsDetail .picTxt .pictrue {
width: 2*100rpx; width: 2 * 100rpx;
height: 2*100rpx; height: 2 * 100rpx;
} }
.newsDetail .picTxt .pictrue image{ .newsDetail .picTxt .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.2*100rpx 0 0 0.2*100rpx; border-radius: 0.2 * 100rpx 0 0 0.2 * 100rpx;
display: block; display: block;
} }
.newsDetail .picTxt .text { .newsDetail .picTxt .text {
width: 4.6*100rpx; width: 4.6 * 100rpx;
} }
.newsDetail .picTxt .text .name { .newsDetail .picTxt .text .name {
font-size: 0.3*100rpx; font-size: 0.3 * 100rpx;
color: #282828; color: #282828;
} }
.newsDetail .picTxt .text .money { .newsDetail .picTxt .text .money {
font-size: 0.24*100rpx; font-size: 0.24 * 100rpx;
margin-top: 0.4*100rpx; margin-top: 0.4 * 100rpx;
font-weight: bold; font-weight: bold;
} }
.newsDetail .picTxt .text .money .num { .newsDetail .picTxt .text .money .num {
font-size: 0.36*100rpx; font-size: 0.36 * 100rpx;
} }
.newsDetail .picTxt .text .y_money { .newsDetail .picTxt .text .y_money {
font-size: 0.26*100rpx; font-size: 0.26 * 100rpx;
color: #999; color: #999;
text-decoration: line-through; text-decoration: line-through;
} }
.newsDetail .picTxt .label { .newsDetail .picTxt .label {
position: absolute; position: absolute;
background-color: #303131; background-color: #303131;
width: 1.6*100rpx; width: 1.6 * 100rpx;
height: 0.5*100rpx; height: 0.5 * 100rpx;
right: -0.07*100rpx; right: -0.07 * 100rpx;
border-radius: 0.25*100rpx 0 0.06*100rpx 0.25*100rpx; border-radius: 0.25 * 100rpx 0 0.06 * 100rpx 0.25 * 100rpx;
text-align: center; text-align: center;
line-height: 0.5*100rpx; line-height: 0.5 * 100rpx;
bottom: 0.24*100rpx; bottom: 0.24 * 100rpx;
} }
.newsDetail .picTxt .label .span { .newsDetail .picTxt .label .span {
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%); background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
@ -71,44 +67,44 @@
-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;
border-bottom: 0.08*100rpx solid #303131; border-bottom: 0.08 * 100rpx solid #303131;
border-right: 0.08*100rpx solid transparent; border-right: 0.08 * 100rpx solid transparent;
top: -0.08*100rpx; top: -0.08 * 100rpx;
right: 0; right: 0;
} }
.newsDetail .bnt { .newsDetail .bnt {
color: #fff; color: #fff;
font-size: 0.3*100rpx; font-size: 0.3 * 100rpx;
width: 6.9*100rpx; width: 6.9 * 100rpx;
height: 0.9*100rpx; height: 0.9 * 100rpx;
border-radius: 0.45*100rpx; border-radius: 0.45 * 100rpx;
margin: 0.48*100rpx auto 0 auto; margin: 0.48 * 100rpx auto 0 auto;
text-align: center; text-align: center;
line-height: 0.9*100rpx; line-height: 0.9 * 100rpx;
} }
</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>