Commit 721a6dde authored by caixingbing's avatar caixingbing

*

parent 85e06948
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -37,12 +37,12 @@ export default { ...@@ -37,12 +37,12 @@ export default {
searchText: '', searchText: '',
sideRoute: [ sideRoute: [
{title: '企业概要', pathName: '', children: [ {title: '企业概要', pathName: '', children: [
{title: '企业速览', pathName: ''}, {title: '企业速览', pathName: 'overview'},
{title: '工商信息', pathName: ''}, {title: '工商信息', pathName: 'businfo'},
{title: '股东信息', pathName: ''}, {title: '股东信息', pathName: 'holderinfo'},
{title: '高管信息', pathName: ''}, {title: '高管信息', pathName: 'execuinfo'},
{title: '对外投资', pathName: ''}, {title: '对外投资', pathName: 'overseas'},
{title: '分支机构', pathName: ''} {title: '分支机构', pathName: 'branch'}
]}, ]},
{title: '财务简析', pathName: 'financial'}, {title: '财务简析', pathName: 'financial'},
{title: '项目商机', pathName: '', children: [ {title: '项目商机', pathName: '', children: [
...@@ -112,62 +112,66 @@ export default { ...@@ -112,62 +112,66 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-container{ #app{
width: 144px; .detail-container{
min-height: calc(100vh - 170px); width: 144px;
padding-bottom: 20px; min-height: calc(100vh - 170px);
background: #FFFFFF; padding-bottom: 20px;
.side-input{ background: #FFFFFF;
width: 128px; .side-input{
margin-top: 16px; width: 128px;
margin-left: 8px; margin-top: 16px;
border: 0; margin-left: 8px;
::v-deep .el-input__inner{
height: 32px;
background: #F3F3F4;
border-radius: 20px;
border: 0; border: 0;
&::placeholder { ::v-deep .el-input__inner{
color: #3D3D3D; height: 32px;
background: #F3F3F4;
border-radius: 20px;
border: 0;
&::placeholder {
color: #3D3D3D;
}
} }
} .el-icon-search{
.el-icon-search{ color: #0081FF;
color: #0081FF; cursor: pointer;
cursor: pointer;
}
}
.detail-menu{
margin-top: 20px;
border-right: 0;
::v-deep .el-menu-item, ::v-deep .el-submenu__title{
height: 30px;
line-height: 30px;
font-size: 14px;
color: #232323;
&:hover, &:focus{
background: linear-gradient(91deg, rgba(0,129,255,0.1) 0%, rgba(0,129,255,0) 100%);;
} }
.el-submenu__icon-arrow{ }
.detail-menu{
margin-top: 20px;
border-right: 0;
::v-deep .el-menu-item, ::v-deep .el-submenu__title{
height: 30px;
line-height: 30px;
font-size: 14px;
color: #232323; color: #232323;
right: 48px; padding: 0 0 0 16px !important;
margin-top: -5px; text-align: initial !important;
&:hover, &:focus, &.is-active{
background: linear-gradient(91deg, rgba(0,129,255,0.1) 0%, rgba(0,129,255,0) 100%);;
}
.el-submenu__icon-arrow{
color: #232323;
right: 48px;
margin-top: -5px;
}
} }
} ::v-deep .el-submenu .el-menu-item{
::v-deep .el-submenu .el-menu-item{ font-size: 12px;
font-size: 12px; color: rgba(35,35,35,0.8);
color: rgba(35,35,35,0.8); padding: 0 0 0 27px !important;
padding: 0 0 0 27px !important; min-width: 144px !important;
min-width: 144px !important; position: relative;
position: relative; &:before {
&:before { content: "";
content: ""; position: absolute;
position: absolute; top: 14px;
top: 14px; left: 21px;
left: 21px; width: 2px;
width: 2px; height: 2px;
height: 2px; background: rgba(35,35,35,0.8);
background: rgba(35,35,35,0.8); border-radius: 50%;
border-radius: 50%; }
} }
} }
} }
......
...@@ -7,6 +7,12 @@ ...@@ -7,6 +7,12 @@
</div> </div>
<div class="part-right"> <div class="part-right">
<div id="partBox"> <div id="partBox">
<Overview v-if="currentPath.pathName=='overview'" />
<Businfo v-if="currentPath.pathName=='businfo'" />
<Holderinfo v-if="currentPath.pathName=='holderinfo'" />
<Execuinfo v-if="currentPath.pathName=='execuinfo'" />
<Overseas v-if="currentPath.pathName=='overseas'" />
<Branch v-if="currentPath.pathName=='branch'" />
<Financial v-if="currentPath.pathName=='financial'" /> <Financial v-if="currentPath.pathName=='financial'" />
<Business v-if="currentPath.pathName=='business'" /> <Business v-if="currentPath.pathName=='business'" />
</div> </div>
...@@ -19,20 +25,32 @@ ...@@ -19,20 +25,32 @@
import elementResizeDetectorMaker from "element-resize-detector" import elementResizeDetectorMaker from "element-resize-detector"
import Header from "./component/Header" import Header from "./component/Header"
import SideBar from "./component/Sidebar" import SideBar from "./component/Sidebar"
import Financial from "./financial" import Overview from "./overview/overview" //企业概览-企业速览
import Business from "./business" import Businfo from "./overview/businfo" //企业概览-工商信息
import Holderinfo from "./overview/holderinfo" //企业概览-股东信息
import Execuinfo from "./overview/execuinfo" //企业概览-高管信息
import Overseas from "./overview/overseas" //企业概览-对外投资
import Branch from "./overview/branch" //企业概览-分支机构
import Financial from "./financial" //财务简析
import Business from "./business" //商务信息
export default { export default {
name: 'PartyA', name: 'PartyA',
components: { components: {
Header, Header,
SideBar, SideBar,
Overview,
Businfo,
Holderinfo,
Execuinfo,
Overseas,
Branch,
Financial, Financial,
Business Business
}, },
data() { data() {
return { return {
currentPath: { currentPath: {
pathName: 'financial' //默认展示页 pathName: 'overview' //默认展示页
}, },
partBoxHeight: null partBoxHeight: null
} }
......
<template>
<div class="app-container part-container">
企业速览
</div>
</template>
<script>
export default {
name: 'Overview',
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
}
</style>
<template>
<div class="app-container part-container">
企业速览
</div>
</template>
<script>
export default {
name: 'Overview',
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
}
</style>
<template>
<div class="app-container operations-container">
<div class="common-title">公司经营</div>
<div class="part-swiper">
<div class="swiper-containers">
<ul class="swiper-wrapper">
<li class="swiper-slide" v-for="(item, index) in operList" :key="index">
<div class="swiper-div">
<div class="operations-title">{{item.range}}-<span>{{item.year}}</span></div>
<div class="flex-box text-cl1 operations-info">
{{item.name}}
<span><img src="@/assets/images/detail/overview/oper_source.png">{{item.name}}</span>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-button-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
<div class="swiper-button-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
</div>
<div class="flex-box operations-list">
<div class="list-item" v-for="(item, index) in gsjyList" :key="index">
<div class="flex-box list-item-all"><img :src="item.ico">{{item.name}}</div>
<div class="list-item-amount">{{item.amount}}</div>
</div>
</div>
</div>
</template>
<script>
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css"
export default {
name: 'Overview',
data() {
return {
operList: [
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'}
],
gsjyList: [
{ name: '总资产', ico: require('@/assets/images/detail/overview/gsjy_ico1.png'), amount: '1699.7'},
{ name: '净资产', ico: require('@/assets/images/detail/overview/gsjy_ico2.png'), amount: '1699.7'},
{ name: '授信余额', ico: require('@/assets/images/detail/overview/gsjy_ico3.png'), amount: '1699.7'},
{ name: '营业收入', ico: require('@/assets/images/detail/overview/gsjy_ico4.png'), amount: '1699.7'},
{ name: '总负债', ico: require('@/assets/images/detail/overview/gsjy_ico5.png'), amount: '1699.7'}
],
}
},
created() {
},
mounted() {
this.companySwiper()
},
methods: {
companySwiper(){
new Swiper('.swiper-containers', {
slidesPerView: 4,
// 设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
}
}
}
</script>
<style lang="scss" scoped>
.operations-container{
margin: 0;
padding: 24px 16px;
background: #FFFFFF;
.part-swiper{
position: relative;
margin-top: 16px;
.swiper-containers{
width: calc(100% - 38px);
height: 96px;
margin-top: 8px;
margin-left: 25px;
overflow: hidden;
.swiper-slide{
.swiper-div{
width: calc(100% - 12px);
height: 96px;
background: url("~@/assets/images/detail/overview/swiper_bg.png") no-repeat;
background-size: 100% 100%;
.operations-title{
margin-right: 22px;
font-weight: bold;
font-size: 20px;
color: #0081FF;
padding: 24px 16px 0 16px;
span{
font-size: 16px;
}
}
.operations-info{
padding: 14px 16px 10px 16px;
justify-content: space-between;
font-size: 14px;
color: #416587;
span{
font-size: 12px;
img{
width: 10px;
height: 10px;
margin-right: 3px;
}
}
}
}
}
}
.swiper-button-prev, .swiper-button-next{
width: 16px;
height: 96px;
background: #F0F5FC;
top: 0;
margin-top: 0;
&.swiper-button-disabled{
opacity: 1;
color:#AAAAAA;
background: #F5F5F5;
}
i{
color: #AAAAAA;
}
&:hover i{
color:#667199;
}
&:after{
content: "";
}
}
}
.operations-list{
flex-wrap: wrap;
justify-content: space-between;
.list-item{
width: calc(20% - 12px);
height: 88px;
padding: 18px;
margin-top: 14px;
font-size: 14px;
color: #232323;
border: 1px solid #E2E7EE;
text-align: center;
.list-item-all{
justify-content: center;
img{
width: 24px;
height: 24px;
margin-right: 4px;
}
}
.list-item-amount{
padding-top: 6px;
font-weight: bold;
}
}
}
}
</style>
<template>
<div class="app-container part-container">
企业速览
</div>
</template>
<script>
export default {
name: 'Overview',
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
}
</style>
<template>
<div class="app-container part-container">
企业速览
</div>
</template>
<script>
export default {
name: 'Overview',
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
}
</style>
<template>
<div class="app-container part-container">
企业速览
</div>
</template>
<script>
export default {
name: 'Overview',
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
}
</style>
<template>
<div class="app-container part-container">
企业速览
<div class="gsjy">
<Operations />
</div>
</div>
</template>
<script>
import Operations from "./component/operations";
export default {
name: 'Overview',
components: {
Operations
},
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.part-container{
margin: 0;
padding: 0;
.gsjy{
margin-top: 12px;
}
}
</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