样式修改
This commit is contained in:
parent
d4f7079908
commit
18a4e3886b
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "feiyang",
|
"name": "feiyang-web",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,231 +1,293 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="page_ban">
|
<div class="page_ban">
|
||||||
<div class="img compbg"></div>
|
<div class="img compbg"></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="page_nav">
|
<div class="page_nav">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<a style="padding: 0;" href="news">新闻内容</a> <a href="javascript:;">企业新闻</a>
|
<a style="padding: 0;" href="news">新闻内容</a> <a href="javascript:;">企业新闻</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="list" style="bottom:-15px">
|
<div class="list" style="bottom:-15px">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tabs v-model="activeName">
|
||||||
<el-tab-pane label="新闻详情" name="first"></el-tab-pane>
|
<el-tab-pane label="新闻详情" name="first"></el-tab-pane>
|
||||||
|
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Wrapper news_d">
|
||||||
|
<div class="content ql-editor" style="">
|
||||||
|
<div class="name">{{ name }}</div>
|
||||||
|
<div class="top-box">
|
||||||
|
<div style="text-align: left;font-size: 14px;color: #999999;">发布时间:{{time}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider "></div>
|
||||||
|
<div class="cont" v-html="content"></div>
|
||||||
|
</div>
|
||||||
|
<div class="xk" @click="changeto">返回列表</div>
|
||||||
|
<div class="black">
|
||||||
|
<div class="black-sub" @click="changetoUS(upId)"> <span v-if="upId">< 上一篇</span> </div>
|
||||||
|
<div class="black-top" @click="changetoUS(downId)"> <span v-if="downId">下一篇 ></span> </div>
|
||||||
|
</div>
|
||||||
|
<div class="con">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="Wrapper news_d">
|
|
||||||
<div class="content ql-editor" style="">
|
|
||||||
<div class="name">{{ name }}</div>
|
|
||||||
<div class="top-box">
|
|
||||||
<div style="text-align: left;font-size: 14px;color: #999999;">发布时间:{{time}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="divider "></div>
|
|
||||||
<div class="cont" v-html="content"></div>
|
|
||||||
</div>
|
|
||||||
<div style="width: 80%;margin: auto;text-align: right; color: #333;font-weight: bold;font-size: 14px;cursor: pointer;" @click="changeto">返回列表</div>
|
|
||||||
|
|
||||||
<div class="con">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { newsdetail,msgdetail } from '@/api';
|
import {
|
||||||
// import 'react-quill/dist/quill.snow.css';
|
newsdetail,
|
||||||
|
msgdetail
|
||||||
|
} from '@/api';
|
||||||
|
// import 'react-quill/dist/quill.snow.css';
|
||||||
|
|
||||||
export default{
|
export default {
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
name:'',
|
activeName:'企业新闻',
|
||||||
content:'',
|
name: '',
|
||||||
time:''
|
content: '',
|
||||||
}
|
time: '',
|
||||||
},
|
upId:'',//上一篇
|
||||||
methods:{
|
downId:''//下一篇
|
||||||
changeto(){
|
}
|
||||||
this.$router.push({path:'news'})
|
},
|
||||||
}
|
watch:{
|
||||||
},
|
'$route'(to, from){
|
||||||
mounted(){
|
this.kk();
|
||||||
|
}
|
||||||
// if(this.$route.query.type=='1'){
|
},
|
||||||
msgdetail({id:this.$route.query.id,articleType:this.$route.query.type}).then((res)=>{
|
methods: {
|
||||||
this.content=res.data.content
|
changetoUS(id){
|
||||||
this.name=res.data.name
|
// if(this.activeName=='新闻资讯'){
|
||||||
this.time=res.data.releaseTime
|
this.$router.push({
|
||||||
|
path:'/detail?type='+this.activeName+'&&id='+id
|
||||||
})
|
})
|
||||||
// }else{
|
}
|
||||||
// newsdetail({id:this.$route.query.id}).then((res)=>{
|
,
|
||||||
// this.content=res.data.content
|
changeto() {
|
||||||
// this.name=res.data.name
|
this.$router.push({
|
||||||
// this.time=res.data.releaseTime
|
path: 'news'
|
||||||
|
})
|
||||||
// })
|
},
|
||||||
// }
|
kk(){
|
||||||
|
msgdetail({
|
||||||
},
|
id: this.$route.query.id,
|
||||||
}
|
articleType: this.$route.query.type
|
||||||
|
}).then((res) => {
|
||||||
|
this.content = res.data.content
|
||||||
|
this.name = res.data.name
|
||||||
|
this.time = res.data.releaseTime
|
||||||
|
this.downId = res.data.downId//下一篇
|
||||||
|
this.upId = res.data.upId//上一篇
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.kk();
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.divider {
|
.xk {
|
||||||
width: 100%;
|
width: 80%;
|
||||||
height: 3px;
|
margin: auto;
|
||||||
/* background-color: #0059a7; */
|
text-align: right;
|
||||||
position: static;
|
color: #333;
|
||||||
margin-bottom: 28px;
|
font-weight: bold;
|
||||||
}
|
font-size: 14px;
|
||||||
.name {
|
cursor: pointer;
|
||||||
font-size: 30px;
|
}
|
||||||
color: #0007a9;
|
|
||||||
color: rgba(0, 7, 169, .8);
|
.black {
|
||||||
line-height: 36px;
|
width: 80%;
|
||||||
}
|
margin: 0 auto;
|
||||||
.news_d {
|
display: flex;
|
||||||
padding: 60px 0 90px;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
align-items: center;
|
||||||
}
|
margin-top: 20px;
|
||||||
.Wrapper {
|
}
|
||||||
position: relative;
|
|
||||||
background-color: #fff;
|
.black>div {
|
||||||
z-index: 100;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
/* .news_d .name {
|
|
||||||
|
.black-sub {}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
/* background-color: #0059a7; */
|
||||||
|
position: static;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #0007a9;
|
||||||
|
color: rgba(0, 7, 169, .8);
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news_d {
|
||||||
|
padding: 60px 0 90px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Wrapper {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .news_d .name {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #0007a9;
|
color: #0007a9;
|
||||||
color: rgba(0, 7, 169, .8);
|
color: rgba(0, 7, 169, .8);
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
::v-deep .el-tabs__item {
|
::v-deep .el-tabs__item {
|
||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-tabs__nav-wrap::after {
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.news_d .con p {
|
|
||||||
font-size: 14.5px;
|
.news_d .con p {
|
||||||
color: #8e8e95;
|
font-size: 14.5px;
|
||||||
line-height: 26px;
|
color: #8e8e95;
|
||||||
margin-bottom: 26px;
|
line-height: 26px;
|
||||||
text-align: justify;
|
margin-bottom: 26px;
|
||||||
}
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.compbg {
|
.compbg {
|
||||||
background-image: url('../assets/images/banner.png');
|
background-image: url('../assets/images/banner.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban {
|
.page_ban {
|
||||||
height: 404px;
|
height: 404px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_ban .img {
|
.page_ban .img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.top-box{
|
|
||||||
margin: 16px 0 30px;
|
|
||||||
}
|
|
||||||
::v-deep .ql-editor{
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.date{
|
|
||||||
|
|
||||||
font-size: 26px;
|
|
||||||
color: #dfd4c3;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
bottom: 20px;
|
|
||||||
padding: 0 30px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.page_ban .content {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_nav {
|
.top-box {
|
||||||
width: 100%;
|
margin: 16px 0 30px;
|
||||||
position: absolute;
|
}
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
div,
|
|
||||||
li {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_nav .name {
|
::v-deep .ql-editor {
|
||||||
float: left;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.date {
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
margin-right: -35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_nav a {
|
font-size: 26px;
|
||||||
float: left;
|
color: #dfd4c3;
|
||||||
line-height: 76px;
|
line-height: 1;
|
||||||
position: relative;
|
|
||||||
font-size: 14.5px;
|
|
||||||
|
|
||||||
color: white;
|
bottom: 20px;
|
||||||
font-weight: bold;
|
padding: 0 30px;
|
||||||
text-decoration: none;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .name a {
|
.page_ban .content {
|
||||||
padding-left: 30px;
|
position: relative;
|
||||||
/* background: url() no-repeat left 30px; */
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page_nav .list {
|
.content {
|
||||||
position: relative;
|
width: 80%;
|
||||||
float: right;
|
margin: 0 auto;
|
||||||
margin-right: -35px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.page_nav .list a {
|
.page_nav {
|
||||||
color: #e7dfd2;
|
width: 100%;
|
||||||
color: rgba(231, 223, 210, .7);
|
position: absolute;
|
||||||
margin-right: 35px;
|
left: 0;
|
||||||
}
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.page_nav a {
|
div,
|
||||||
float: left;
|
li {
|
||||||
line-height: 76px;
|
box-sizing: border-box;
|
||||||
position: relative;
|
}
|
||||||
font-size: 14.5px;
|
|
||||||
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
.page_nav .name {
|
||||||
font-weight: bold;
|
float: left;
|
||||||
}
|
}
|
||||||
/* .cont >>> img{
|
|
||||||
|
.page_nav .list {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
margin-right: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav a {
|
||||||
|
float: left;
|
||||||
|
line-height: 76px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14.5px;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .name a {
|
||||||
|
padding-left: 30px;
|
||||||
|
/* background: url() no-repeat left 30px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .list {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
margin-right: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav .list a {
|
||||||
|
color: #e7dfd2;
|
||||||
|
color: rgba(231, 223, 210, .7);
|
||||||
|
margin-right: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_nav a {
|
||||||
|
float: left;
|
||||||
|
line-height: 76px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14.5px;
|
||||||
|
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.dwlwt{
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
/* .cont >>> img{
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
} */
|
} */
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user