Init project
This commit is contained in:
lifizer
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="newsDetail">
|
||||
<view class="title">{{ articleInfo.title }}</view>
|
||||
<view class="list acea-row row-middle">
|
||||
<view class="label line1" style="color: #999;">来源:{{articleInfo.author||"未知"}}</view>
|
||||
<view class="item">
|
||||
<!-- <text class="iconfont icon-shenhezhong"></text> -->
|
||||
{{ articleInfo.addTime }}
|
||||
</view>
|
||||
<view class="item acea-row row-middle">
|
||||
<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
|
||||
<text class="see-num-text">{{articleInfo.visit||0}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="conter" v-html="articleInfo.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.conter>>>img{
|
||||
display:block;
|
||||
max-width:100% !important;
|
||||
}
|
||||
page{
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
|
||||
|
||||
.newsDetail .list .label{
|
||||
padding: 0;
|
||||
max-width: auto !important;
|
||||
}
|
||||
|
||||
.eye-icon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zan-icon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.zan-num-text{
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.see-num-text{
|
||||
color: #080F1A;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.newsDetail .title{
|
||||
font-size: 40rpx !important;
|
||||
font-weight: bold;
|
||||
color: #080F1A !important;
|
||||
}
|
||||
|
||||
|
||||
.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: "FoodInfomationDetail",
|
||||
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 => {
|
||||
var data = res.data;
|
||||
data.content = that.formatRichText(data.content);
|
||||
that.articleInfo = data;
|
||||
that.updateTitle();
|
||||
|
||||
console.log('current path:'+that.$yroute.path);
|
||||
|
||||
//动态配置share参数
|
||||
that.$set(that, "share", {
|
||||
title:that.articleInfo.title,
|
||||
path:'/pages/foodInfomation/foodInfomationDetail?id='+that.$yroute.query.id,
|
||||
imageUrl:'',
|
||||
desc:'',
|
||||
content:''
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText:function(html){
|
||||
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
|
||||
return newContent;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user