Commit 52bc5cab by 林家欣

修改详情页图片未设置最大宽度导致H5样式bug

parent 328c45b5
<template>
<div class="org container">
<breadcrumb />
<div class="row status-container" v-loading='loading'>
<p class="title-style">{{title}}</p>
<div class="row status-container" v-loading="loading">
<p class="title-style">{{ title }}</p>
<div class="showHtml" v-html="content"></div>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import pages from "../comps/pages2.vue";
export default {
......@@ -19,65 +17,61 @@ export default {
},
data() {
return {
loading:false,
id:this.$route.query.id,
content:'',
title:''
loading: false,
id: this.$route.query.id,
content: "",
title: "",
};
},
computed: {
routes() {
},
routes() {},
},
created() {
this.policyInfoFn();
},
mounted() {
},
methods:{
mounted() {},
methods: {
// 政策法规列表
async policyInfoFn() {
this.loading=true
this.loading = true;
const params = {
id:this.id,
id: this.id,
};
const policyInfoRes =
await this.$api.knowledge.policyInfo(params);
const policyInfoRes = await this.$api.knowledge.policyInfo(params);
const { returnCode, data } = policyInfoRes;
if (returnCode === "0") {
this.loading=false
this.content=data.content;
this.title=data.title
this.loading = false;
this.content = data.content;
this.title = data.title;
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "知识中心", path: "/Knowledge" },
{ name: "政策法规", path: "/Knowledge/Statute" },
{ name: this.title },
]);
console.log(1)
console.log(1);
}
},
}
},
};
</script>
<style lang="scss" scoped>
@media screen and(min-width: 992px) {
<style lang="scss">
@media screen and(min-width: 992px) {
}
@media screen and (max-width: 992px) {
}
.showHtml {
p {
overflow: hidden;
}
img {
max-width: 100%;
}
@media screen and (max-width: 992px) {
}
</style>
<style lang="scss" scoped>
.org {
padding-bottom: 20px;
.title-style{
.title-style {
font-size: 24px;
text-align: center;
padding: 30px;
......@@ -85,27 +79,25 @@ export default {
color: #002c6c;
margin-bottom: 10px;
}
.status-container{
border-top: 7px solid #002c6c;
background: #fff;
padding:0 20px;
>div{
font-size: 14px;
padding-bottom:30px;
word-wrap:break-word;
word-break:break-all;
}
.showHtml{
line-height: 24px;
.status-container {
border-top: 7px solid #002c6c;
background: #fff;
padding: 0 20px;
> div {
font-size: 14px;
padding-bottom: 30px;
word-wrap: break-word;
word-break: break-all;
}
.showHtml {
line-height: 24px;
font-size: 14px;
// text-indent: 28px;
color: #454545;
/deep/p{
/deep/p {
margin: 0 0 10px;
}
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -2,12 +2,11 @@
<div class="org container">
<div class="row status-container">
<p class="title-style">
<span>{{title}}</span>
<span>日期:{{checkTime(showtime)}}</span>
<span>{{ title }}</span>
<span>日期:{{ checkTime(showtime) }}</span>
</p>
<div class="showHtml" v-html="content"></div>
</div>
</div>
</template>
<script>
......@@ -21,10 +20,10 @@ export default {
},
data() {
return {
id:this.$route.query.id,
content:'',
title:'',
showtime:'',
id: this.$route.query.id,
content: "",
title: "",
showtime: "",
breadcrumb: [{ name: "技术与标准", path: "/Knowledge" }],
};
},
......@@ -36,95 +35,91 @@ export default {
created() {
this.initInfoFn();
},
mounted() {
},
methods:{
checkTime(val){
val=val.substring(0, val.indexOf(' '))
return val
mounted() {},
methods: {
checkTime(val) {
val = val.substring(0, val.indexOf(" "));
return val;
},
// 政策法规列表
async initInfoFn() {
const params = {
id:this.id,
id: this.id,
};
const infoRes =
await this.$api.knowledge.knowledgeinfo(params);
const infoRes = await this.$api.knowledge.knowledgeinfo(params);
const { returnCode, data } = infoRes;
if (returnCode === "0") {
console.log(data)
this.content=data.content;
this.title=data.title
this.showtime=data.inputdate
console.log(data);
this.content = data.content;
this.title = data.title;
this.showtime = data.inputdate;
this.breadcrumb = this.breadcrumb.concat(this.matche);
this.breadcrumb.push({
name: this.title,
});
this.$store.commit("system/SET_BREADCRUMB", this.breadcrumb);
console.log(1)
console.log(1);
}
},
}
},
};
</script>
<style lang="scss" scoped>
@media screen and(min-width: 992px) {
<style lang="scss">
@media screen and(min-width: 992px) {
}
@media screen and (max-width: 992px) {
}
.showHtml {
p {
overflow: hidden;
}
img {
max-width: 100%;
}
@media screen and (max-width: 992px) {
}
</style>
<style lang="scss" scoped>
.org {
padding-bottom: 20px;
.title-style{
.title-style {
padding: 35px 0 10px;
border-bottom: 1px solid #b2b2b8;
color: #002c6c;
margin-bottom: 10px;
line-height: 32px;
span{
&:first-child{
span {
&:first-child {
font-size: 18px;
float: left;
}
&:last-child{
&:last-child {
font-size: 14px;
color: #000;
float: right;
}
}
}
.status-container{
border-top: 7px solid #002c6c;
background: #fff;
padding:0 20px;
>div{
font-size: 14px;
padding-bottom:30px;
}
.showHtml{
.status-container {
border-top: 7px solid #002c6c;
background: #fff;
padding: 0 20px;
> div {
font-size: 14px;
padding-bottom: 30px;
}
.showHtml {
border-bottom: 1px solid #b2b2b8;
padding-bottom: 30px;
margin-bottom: 25px;
margin-top: 20px;
line-height: 28px;
line-height: 28px;
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
/deep/p {
margin: 0 0 10px;
}
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -45,7 +45,14 @@ export default {
};
</script>
<style lang="scss">
.health-detail {
p {
overflow: hidden;
}
img {
max-width: 100%;
}
}
</style>
<style lang="scss" scoped>
......
......@@ -3,20 +3,20 @@
<breadcrumb />
<div class="row status-container">
<div class="title-style">
<p><b>{{title}}</b></p>
<p>
<span style="float:left">作者{{author}}</span>
<span style="float:right">日期{{showtime}}</span>
</p>
<p>
<b>{{ title }}</b>
</p>
<p>
<span style="float: left">作者{{ author }}</span>
<span style="float: right">日期{{ showtime }}</span>
</p>
</div>
<div class="showHtml" v-html="content"></div>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
import pages from "../comps/pages2.vue";
export default {
......@@ -26,96 +26,93 @@ export default {
},
data() {
return {
id:this.$route.query.id,
content:'',
title:'',
showtime:'',
author:''
id: this.$route.query.id,
content: "",
title: "",
showtime: "",
author: "",
};
},
computed: {
routes() {
},
routes() {},
},
created() {
this.InfoFn();
},
mounted() {
console.log(2)
mounted() {
console.log(2);
// 面包屑单独处理
},
methods:{
methods: {
// 详情
async InfoFn() {
const params = {
id:this.id,
id: this.id,
};
const listRes =
await this.$api.news.announInfo(params);
const listRes = await this.$api.news.announInfo(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
console.log(data, "公告详情");
this.content=data.content;
this.title=data.title
this.showtime = data.showtime
this.author=data.author
this.content = data.content;
this.title = data.title;
this.showtime = data.showtime;
this.author = data.author;
this.$store.commit("system/SET_BREADCRUMB", [
{ name: "资讯中心", path: "/New/index" },
{ name: "公告通知", path: "/News/Notice" },
{ name: this.title },
]);
}
},
}
},
};
</script>
<style lang="scss" scoped>
@media screen and(min-width: 992px) {
<style lang="scss">
@media screen and(min-width: 992px) {
}
@media screen and (max-width: 992px) {
}
.showHtml {
p {
overflow: hidden;
}
img {
max-width: 100%;
}
@media screen and (max-width: 992px) {
}
</style>
<style lang="scss" scoped>
.org {
padding-bottom: 20px;
.title-style{
.title-style {
font-size: 24px;
text-align: center;
border-bottom: 1px solid #b2b2b8;
color: #002c6c;
margin-bottom: 10px;
P{
&:first-child{
P {
&:first-child {
padding: 30px;
font-size: 24px;
margin-bottom: 15px;
}
&:last-child{
&:last-child {
color: #666666;
font-size: 12px;
}
}
}
.status-container{
border-top: 7px solid #002c6c;
background: #fff;
padding:0 20px;
padding-bottom: 20px;
>div{
font-size: 14px;
padding-bottom: 15px;
}
.showHtml{
.status-container {
border-top: 7px solid #002c6c;
background: #fff;
padding: 0 20px;
padding-bottom: 20px;
> div {
font-size: 14px;
padding-bottom: 15px;
}
.showHtml {
border-bottom: 1px solid #b2b2b8;
padding-bottom: 30px;
margin-bottom: 25px;
......@@ -124,11 +121,10 @@ export default {
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
/deep/p {
margin: 0 0 10px;
}
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -179,7 +179,7 @@ export default {
}
},
// getBreadcrumb(classId){
// },
// top列表
async newsTop10() {
......@@ -235,16 +235,15 @@ export default {
window.open(link.href, "_blank");
}
},
getNoticeInfo(id,directpath){
if(directpath&&directpath!==''&& directpath.length>0){
window.open(directpath,'_blank');
}else{
getNoticeInfo(id, directpath) {
if (directpath && directpath !== "" && directpath.length > 0) {
window.open(directpath, "_blank");
} else {
let link = this.$router.resolve({
path: `/News/NoticeArticle?id=${id}`,
});
window.open(link.href,'_blank')
window.open(link.href, "_blank");
}
},
// weibo
toweibo() {
......@@ -269,6 +268,14 @@ export default {
}
}
}
.msg-text {
p{
overflow: hidden;
}
img{
max-width: 100%;
}
}
}
</style>
<style lang="scss" scoped>
......@@ -329,12 +336,10 @@ export default {
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
/deep/p {
margin: 0 0 10px;
}
}
}
.xglj {
@include module-box;
......
......@@ -35,9 +35,14 @@
</div>
<div class="msg-text" v-html="content"></div>
<div class="videoStyle">
<video controls="controls" :src="videoStr" width="100%" height="100%" webkit-playsinline="" ></video>
<video
controls="controls"
:src="videoStr"
width="100%"
height="100%"
webkit-playsinline=""
></video>
</div>
</div>
</div>
<div class="xglj">
......@@ -131,7 +136,7 @@ export default {
author: "",
source: "",
editor: "",
videoStr:'',
videoStr: "",
breadcrumb: [{ name: "资讯中心", path: "/News/index" }],
xglj: {
data: [
......@@ -255,16 +260,21 @@ export default {
<style lang="scss" scoped>
.container {
@media screen and (min-width: 992px) {
}
@media screen and (max-width: 992px) {
.videoStyle{
width: 100%!important;
height: 200px!important;
}
}
.videoStyle {
width: 100% !important;
height: 200px !important;
}
}
.msg-text {
p {
overflow: hidden;
}
img {
max-width: 100%;
}
}
}
</style>
<style lang="scss" scoped>
......@@ -299,12 +309,12 @@ export default {
}
}
.videoStyle{
.videoStyle {
width: 449px;
height: 300px;
margin-top: 30px;
text-align: center;
margin:0 auto
margin: 0 auto;
}
.msg-cont {
@include module-box;
......@@ -344,10 +354,9 @@ export default {
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
/deep/p {
margin: 0 0 10px;
}
}
}
.xglj {
......
......@@ -7,7 +7,11 @@
<div class="msg-head">
<div class="msg-head-left">
<!-- <span>作者:{{ partnersMsg.auditor }}</span> -->
<span>日期:{{ $moment(partnersMsg.updatedate).format("YYYY-MM-DD") }}</span>
<span
>日期:{{
$moment(partnersMsg.updatedate).format("YYYY-MM-DD")
}}</span
>
<!-- <span>编辑:{{ partnersMsg.editor }}</span> -->
</div>
</div>
......@@ -21,7 +25,7 @@ export default {
data() {
return {
partnersMsg: {},
}
};
},
created() {
this.serviceGetCaseDetailInfo();
......@@ -29,16 +33,16 @@ export default {
mounted() {
// 面包屑单独处理
this.$store.commit("system/SET_BREADCRUMB", [
{name: "服务中心", path: "/Service/BarcodeV"},
{name: "标准服务提供商", path: "/Service/Partners/index"},
{name: "GS1标准服务提供商案例"},
{ name: "服务中心", path: "/Service/BarcodeV" },
{ name: "标准服务提供商", path: "/Service/Partners/index" },
{ name: "GS1标准服务提供商案例" },
]);
},
methods: {
async serviceGetCaseDetailInfo() {
const query = {
const query = {
id: this.$route.query.id,
}
};
const serviceGetCaseDetailInfoRes =
await this.$api.service.serviceGetCaseDetailInfo(query);
const { returnCode, data } = serviceGetCaseDetailInfoRes;
......@@ -90,20 +94,18 @@ export default {
}
}
.msg-text {
margin-top: 20px;
line-height: 28px;
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p{
margin: 0 0 10px
}
img {
max-width: 95%;
margin-top: 20px;
line-height: 28px;
font-size: 14px;
text-indent: 28px;
color: #454545;
/deep/p {
margin: 0 0 10px;
}
img {
max-width: 95%;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment