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 {
searchText: '',
sideRoute: [
{title: '企业概要', pathName: '', children: [
{title: '企业速览', pathName: ''},
{title: '工商信息', pathName: ''},
{title: '股东信息', pathName: ''},
{title: '高管信息', pathName: ''},
{title: '对外投资', pathName: ''},
{title: '分支机构', pathName: ''}
{title: '企业速览', pathName: 'overview'},
{title: '工商信息', pathName: 'businfo'},
{title: '股东信息', pathName: 'holderinfo'},
{title: '高管信息', pathName: 'execuinfo'},
{title: '对外投资', pathName: 'overseas'},
{title: '分支机构', pathName: 'branch'}
]},
{title: '财务简析', pathName: 'financial'},
{title: '项目商机', pathName: '', children: [
......@@ -112,62 +112,66 @@ export default {
</script>
<style lang="scss" scoped>
.detail-container{
width: 144px;
min-height: calc(100vh - 170px);
padding-bottom: 20px;
background: #FFFFFF;
.side-input{
width: 128px;
margin-top: 16px;
margin-left: 8px;
border: 0;
::v-deep .el-input__inner{
height: 32px;
background: #F3F3F4;
border-radius: 20px;
#app{
.detail-container{
width: 144px;
min-height: calc(100vh - 170px);
padding-bottom: 20px;
background: #FFFFFF;
.side-input{
width: 128px;
margin-top: 16px;
margin-left: 8px;
border: 0;
&::placeholder {
color: #3D3D3D;
::v-deep .el-input__inner{
height: 32px;
background: #F3F3F4;
border-radius: 20px;
border: 0;
&::placeholder {
color: #3D3D3D;
}
}
}
.el-icon-search{
color: #0081FF;
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-icon-search{
color: #0081FF;
cursor: pointer;
}
.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;
right: 48px;
margin-top: -5px;
padding: 0 0 0 16px !important;
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{
font-size: 12px;
color: rgba(35,35,35,0.8);
padding: 0 0 0 27px !important;
min-width: 144px !important;
position: relative;
&:before {
content: "";
position: absolute;
top: 14px;
left: 21px;
width: 2px;
height: 2px;
background: rgba(35,35,35,0.8);
border-radius: 50%;
::v-deep .el-submenu .el-menu-item{
font-size: 12px;
color: rgba(35,35,35,0.8);
padding: 0 0 0 27px !important;
min-width: 144px !important;
position: relative;
&:before {
content: "";
position: absolute;
top: 14px;
left: 21px;
width: 2px;
height: 2px;
background: rgba(35,35,35,0.8);
border-radius: 50%;
}
}
}
}
......
......@@ -7,6 +7,12 @@
</div>
<div class="part-right">
<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'" />
<Business v-if="currentPath.pathName=='business'" />
</div>
......@@ -19,20 +25,32 @@
import elementResizeDetectorMaker from "element-resize-detector"
import Header from "./component/Header"
import SideBar from "./component/Sidebar"
import Financial from "./financial"
import Business from "./business"
import Overview from "./overview/overview" //企业概览-企业速览
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 {
name: 'PartyA',
components: {
Header,
SideBar,
Overview,
Businfo,
Holderinfo,
Execuinfo,
Overseas,
Branch,
Financial,
Business
},
data() {
return {
currentPath: {
pathName: 'financial' //默认展示页
pathName: 'overview' //默认展示页
},
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