Skip to content

D
dsk-cr20g
Commit 2cd214d1 authored by caixingbing's avatar caixingbing
Browse files
Options

*

parent 6651c7bf
Hide whitespace changes
Inline Side-by-side
Showing with 897 additions and 11 deletions
dsk-operate-ui/src/views/detail/party-a/overview/component/infoheader.vue 0 → 100644
View file @ 2cd214d1
<template>
<div class="app-container info-container">
<div class="company-box">
<div class="company-nav flex-box">
<div class="company-left">
<img :src="companyInfo.logoUrl" :alt="companyInfo.companyName" :title="companyInfo.companyName" v-if="companyInfo.logoUrl">
<span
:class="companyInfo.nameSimple&&companyInfo.nameSimple.length<3?'conenctLogo textOne bg'+companyInfo.nameSimple.length:'conenctLogo textTwo bg'+companyInfo.nameSimple.length"
v-else-if="companyInfo.nameSimple"
v-html="companyInfo.nameSimple"></span>
<img :src="require('@/assets/images/detail/overview/logo@2x.png')" :alt="companyInfo.companyName" :title="companyInfo.companyName" v-else>
</div>
<div class="company-title">
<div class="company-name">
{{companyInfo.companyName || ''}}
</div>
<div class="company-tag">
<div style="float: left;margin-top: 8px;" class="company-history" v-if="companyInfo.historyNames && companyInfo.historyNames.length>0">
<el-popover
placement="bottom-start"
popper-class="enterpriseLabel-item"
trigger="hover">
<el-button slot="reference">曾用名 <i class="el-icon-caret-bottom"></i></el-button>
<ul class="history-item">
<li v-for="(item, index) in companyInfo.historyNames" :key="index">{{item.value}}</li>
</ul>
</el-popover>
</div>
<span style="float: left;" :class="!labelArr.includes(companyInfo.businessStatus)?'label-bg1':'label-bg3'" v-if="companyInfo.businessStatus">{{companyInfo.businessStatus}}</span>
<span style="float: left;" :class="item.state===0?'label-bg2':'label-bg3'" v-for="(item, index) in labelList" :key="index">{{item.labelName}}</span>
<template v-if="enterpriseLabel.length > 0">
<template v-for="(item,index) in enterpriseLabel">
<template v-if="item.children.length > 0">
<div class="enterpriseLabel-highTech company-highTech">
<el-popover
width="280"
placement="bottom-start"
popper-class="enterpriseLabel-item"
trigger="hover">
<el-button slot="reference" :style="'background:'+item.bgColor+';color:'+item.fontColor+';border:1px solid '+item.bgColor+';margin: 0;'">{{item.labelName}} <span>{{ item.children.length }}</span><i class="el-icon-arrow-right"></i></el-button>
<p class="highTech-item">
<span v-for="(v,i) in item.children" class="enterpriseLabel-children-span" :style="v.linkUri ? 'cursor:pointer;' : ''">{{ v.labelName }}</span>
</p>
</el-popover>
</div>
</template>
<template v-else>
<template v-if="item.remark">
<div class="enterpriseLabel-highTech company-highTech">
<el-popover
width="280"
placement="bottom-start"
popper-class="enterpriseLabel-item"
trigger="hover">
<el-button slot="reference" :style="'background:'+item.bgColor+';color:'+item.fontColor+';border:1px solid '+item.bgColor+';margin: 0;'">{{item.labelName}} <i class="el-icon-arrow-down"></i></el-button>
<p class="highTech-item" style="margin-bottom: 8px">{{item.remark}}</p>
</el-popover>
</div>
</template>
<span v-else class="enterpriseLabel-span" :style="{'background':item.bgColor,'color':item.fontColor,'cursor':item.linkUri ? 'pointer' : ''}">{{item.labelName}}</span>
</template>
</template>
</template>
</div>
</div>
</div>
<div class="company-menu">
<el-button @click="handleClaim" v-if="ifClaim" class="hasClaim" v-loading="claimLoading"><i class="el-ico-claim" alt="已认领" title="已认领"></i> 已认领</el-button>
<el-button @click="handleClaim" v-else class="claim" v-loading="claimLoading"><i class="el-ico-claim" alt="认领客户" title="认领客户"></i> 认领客户</el-button>
</div>
<div class="company-info">
<div class="info-item flex-box">
<div class="item"><label>法定代表人：</label><span>{{companyInfo.corporatePerson || ''}}</span></div>
<div class="item"><label>注册资本：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
<div class="item"><label>统一社会信用代码：</label><span>{{companyInfo.creditCode || ''}}</span></div>
</div>
<div class="info-item flex-box">
<div class="item"><label>成立日期：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
<div class="item"><label>类型：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
<div class="item"><label>企业邮箱：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
</div>
<div class="info-item flex-box">
<div class="item"><label>官网：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
<div class="item"><label>注册地址：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
<div class="item"><label>通信地址：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
</div>
<div class="info-item flex-box" >
<div class="item flex-box item-line" >
<span ref="companyQybj" class="text-cl1" :class="showMore&&showState?'item-all':'item-more'">
<label>企业背景：</label>{{companyInfo.introduction || ''}}
</span>
<span class="item-link ml-4" v-if="companyInfo.introduction&&showMore" @click="handleDetail">{{showState?'收起':'展开'}}</span>
</div>
</div>
</div>
<div class="company-swiper">
<div class="swiper-containers swiper-info" :style="graphList.length<=6?'margin-left:0px; width: 100%;':''">
<ul class="swiper-wrapper">
<template v-for="(item, index) in graphList" >
<li class="swiper-slide" :key="index">
<div class="flex-box" @click="handleGraph(item)">
<img :src="`${item.ico}`" :alt="item.name" :title="item.name" class="swiper-img">
<div class="swiper-item">
<span class="swiper-name">
{{item.name}}
</span>
<template v-for="(it, idx) in item.intro">
<div :key="idx" @click.stop="handleGraphChild(item, it)">
<span v-html="it.name"></span> <i :class="[idx!=item.intro.length-1?'num':'']" :style="it.val>0?'':{color: '#999999',cursor: 'not-allowed'}">{{it.val}}</i>
</div>
</template>
</div>
</div>
</li>
</template>
</ul>
</div>
<div class="swiper-button-prev swiper-info-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
<div class="swiper-button-next swiper-info-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
</div>
<!-- 分条件：滚动与不滚动 -->
</div>
</div>
</template>
<script>
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css"
import { encodeStr } from '@/assets/js/common.js'
export default {
name: 'Infoheader',
data() {
return {
companyInfo: {
"historyNames": [
{
"name": "",
"value": "中国建筑第八工程局"
}
],
"eid": "a4465fc3-ef1d-470b-834e-3af1975a5692",
"regCapital": "1521800万元人民币",
"registeredDate": "1998-09-29",
"companyName": "中国建筑第八工程局有限公司",
"provinceIdsArea": "310000,360000,500000,450000,420000,320000,370000,330000,510000,150000,610000,230000,460000,210000,440000,130000,120000,630000,430000,410000,350000,340000,650000,640000,140000,540000,520000,530000,620000,110000,220000",
"econKind": "有限责任公司（非自然人投资或控股的法人独资）",
"cityId": 310100,
"addressDetail": "中国（上海）自由贸易试验区世纪大道1568号27层",
"creditCode": "9131000063126503X1",
"metaTime": "2023-05-13",
"contact": {
"cellphone": 266,
"telephone": 158,
"phoneNumber": "0310-8083960"
},
"corporatePerson": "李永明",
"views": 32303,
"introduction": "中国建筑第八工程局有限公司成立于1998-09-29，法定代表人为李永明，注册资本为1521800万元，统一社会信用代码为9131000063126503X1，企业地址位于中国（上海）自由贸易试验区世纪大道1568号27层，经营范围包含房屋建筑、公路、铁路、市政公用、港口与航道、水利水电各类别工程的咨询、设计、施工、总承包和项目管理，化工石油工程，电力工程，基础工程，装饰工程，工业筑炉，城市轨道交通工程，园林绿化工程，线路、管道、设备的安装，混凝土预制构件及制品，非标制作，建筑材料生产、销售，建筑设备销售，建筑机械租赁，房地产开发，自有房屋租赁，物业管理，从事建筑领域内的技术转让、技术咨询、技术服务，企业管理咨询，商务信息咨询，经营各类商品和技术的进出口，但国家限定公司经营或禁止进出口的商品及技术除外。【依法须经批准的项目，经相关部门批准后方可开展经营活动】。该公司目前的经营状态为存续（在营、开业、在册）。企业联系方式为：0310-8083960。",
"businessDateFrom": "1998-09-29",
"isHighTech": 1,
"businessScope": "房屋建筑、公路、铁路、市政公用、港口与航道、水利水电各类别工程的咨询、设计、施工、总承包和项目管理，化工石油工程，电力工程，基础工程，装饰工程，工业筑炉，城市轨道交通工程，园林绿化工程，线路、管道、设备的安装，混凝土预制构件及制品，非标制作，建筑材料生产、销售，建筑设备销售，建筑机械租赁，房地产开发，自有房屋租赁，物业管理，从事建筑领域内的技术转让、技术咨询、技术服务，企业管理咨询，商务信息咨询，经营各类商品和技术的进出口，但国家限定公司经营或禁止进出口的商品及技术除外。【依法须经批准的项目，经相关部门批准后方可开展经营活动】",
"businessStatus": "存续（在营、开业、在册）",
"isFy": false,
"provinceId": 310000,
"logoUrl": "https://qxb-logo-url.oss-cn-hangzhou.aliyuncs.com/OriginalUrl/2cae9ba958e78d719c43fd0f7e4fa514.jpg",
"companyId": 6034,
"simpleName": "中建八局",
"provinceName": "上海"
},
labelList: [], //企业标签
claimLoading: false,
ifClaim: false, //是否认领
showMore: false,
showState: false,
graphList: [
{id: 1, name:'业务往来', intro:[{id: 101, name:'客户', val:44},{id: 102, name:'供应商', val:55}], ico:require('@/assets/images/detail/overview/company_ywwl.png')},
{id: 2, name:'商机线索', intro:[{id: 201, name:'专项债项目', val:66},{id: 202, name:'招标计划', val:66}], ico:require('@/assets/images/detail/overview/company_sjxs.png')},
{id: 3, name:'城投拿地', intro:[{id: 301, name:'土地交易', val:2},{id: 302, name:'行政许可', val:0}], ico:require('@/assets/images/detail/overview/company_ctnd.png')},
{id: 4, name:'对外投资', intro:[{id: 401, name:'企业经营实力展现'}], ico:require('@/assets/images/detail/overview/company_dwtz.png')},
{id: 5, name:'股权穿透', intro:[{id: 501, name:'瞬息掌握企业关系'}], ico:require('@/assets/images/detail/overview/company_gqct.png')},
{id: 6, name:'企业架构', intro:[{id: 601, name:'企业架构关联图'}], ico:require('@/assets/images/detail/overview/company_qyjg.png')},
{id: 7, name:'工商信息', intro:[{id: 701, name:'企业基础工商登记信息'}], ico:require('@/assets/images/detail/overview/company_gsxx.png')}
], //企业链图
//风险扫描
labelArr:['失信联合惩戒企业','司法纠纷','注销'], //负向经营状态
enterpriseLabel:[
{
"labelCode": "4_1_",
"labelName": "严重行政处罚",
"companyId": 6034,
"num": 1,
"pcode": "4_",
"level": 2,
"isLeaf": 1,
"orderNum": 1,
"bgColor": "#FFF3F3",
"fontColor": "#FD5757",
"remark": "严重行政处罚，是指有关行政部门处以企业暂停投标资格、暂停承揽新业务的行政处罚。原因包括但不限于企业存在围标串标、克扣或拖欠劳动者报酬、出现重大安全事故等异常行为导致企业无法承揽工程项目，产生重大经营风险",
"children": [],
"linkUri": "/credit?type=0"
},
{
"labelCode": "2_2_1_",
"labelName": "施工特级资质",
"num": 3,
"pcode": "2_2_",
"level": 3,
"isLeaf": 0,
"orderNum": 6,
"bgColor": "#E4F3FD",
"fontColor": "#41A1FD",
"linkBizId": 209,
"children": [
{
"labelCode": "2_2_1_1_",
"labelName": "建筑工程特级",
"companyId": 6034,
"num": 1,
"pcode": "2_2_1_",
"level": 4,
"isLeaf": 1,
"orderNum": 6,
"bgColor": "#E4F3FD",
"fontColor": "#41A1FD",
"linkBizId": 209,
"children": [],
"linkUri": "?type=0"
},
{
"labelCode": "2_2_1_2_",
"labelName": "公路工程特级",
"companyId": 6034,
"num": 1,
"pcode": "2_2_1_",
"level": 4,
"isLeaf": 1,
"orderNum": 7,
"bgColor": "#E4F3FD",
"fontColor": "#41A1FD",
"linkBizId": 209,
"children": [],
"linkUri": "?type=0"
},
{
"labelCode": "2_2_1_10_",
"labelName": "市政公用工程特级",
"companyId": 6034,
"num": 1,
"pcode": "2_2_1_",
"level": 4,
"isLeaf": 1,
"orderNum": 15,
"bgColor": "#E4F3FD",
"fontColor": "#41A1FD",
"linkBizId": 209,
"children": [],
"linkUri": "?type=0"
}
],
"linkUri": "?type=0"
},
{
"labelCode": "3_2_1_",
"labelName": "高新技术企业",
"companyId": 6034,
"num": 1,
"pcode": "3_2_",
"level": 3,
"isLeaf": 1,
"orderNum": 67,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"remark": "高新技术企业指在国家颁布的《国家重点支持的高新技术领域》范围内，持续进行研究开发与技术成果转化，形成企业核心自主知识产权，并以此为基础开展经营活动的居民企业，是知识密集、技术密集的经济实体。",
"children": []
},
{
"labelCode": "3_2_4_",
"labelName": "省级企业技术中心",
"companyId": 6034,
"num": 1,
"pcode": "3_2_",
"level": 3,
"isLeaf": 1,
"orderNum": 70,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"remark": "企业技术中心是指企业根据市场竞争需要设立的技术研发与创新机构，负责制定企业技术创新规划、开展产业技术研发、创造运用知识产权、建立技术标准体系、凝聚培养创新人才、构建协同创新网络、推进技术创新全过程实施。",
"children": []
},
{
"labelCode": "3_1_1_1_",
"labelName": "国家级荣誉奖项",
"num": 8,
"pcode": "3_1_1_",
"level": 4,
"isLeaf": 0,
"orderNum": 76,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [
{
"labelCode": "3_1_1_1_1_",
"labelName": "鲁班奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 76,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_2_",
"labelName": "国家优质工程奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 77,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_3_",
"labelName": "詹天佑奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 78,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_4_",
"labelName": "建筑装饰优质工程奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 79,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_5_",
"labelName": "绿色建筑创新奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 80,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_6_",
"labelName": "钢结构金奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 81,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_1_1_8_",
"labelName": "市政金杯示范工程",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 1,
"orderNum": 83,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "3_1_2_1_1_",
"labelName": "华夏建设科学技术奖",
"companyId": 6034,
"num": 1,
"pcode": "3_1_1_1_",
"level": 5,
"isLeaf": 0,
"orderNum": 112,
"bgColor": "#FFF7EC",
"fontColor": "#BFA061",
"children": [],
"linkUri": "/behavior?type=0"
}
],
"linkUri": "/behavior?type=0"
},
{
"labelCode": "1_1_1_",
"labelName": "长三角",
"companyId": 6034,
"num": 1,
"pcode": "1_1_",
"level": 3,
"isLeaf": 1,
"orderNum": 113,
"bgColor": "#F3F3FF",
"fontColor": "#8491E8",
"children": []
},
{
"labelCode": "1_1_5_",
"labelName": "华东",
"companyId": 6034,
"num": 1,
"pcode": "1_1_",
"level": 3,
"isLeaf": 1,
"orderNum": 113,
"bgColor": "#F3F3FF",
"fontColor": "#8491E8",
"children": []
}
],//企业标签
}
},
created() {
this.getCompanyInfo()
},
mounted() {
this.handleWidth()
this.getClaimStatus() //获取企业认领状态
this.companySwiper()
},
methods: {
//认领
async handleClaim(){
let _this = this
_this.claimLoading = true
setTimeout(function (){
_this.claimLoading = false
_this.$confirm(`认领成功，是否完善客户信息`, '提示', {
type: 'warning'
}).then(async () => {
console.log('操作跳转！')
})
}, 1000)
},
companySwiper(){
new Swiper('.swiper-info', {
slidesPerView: 6,
// 设置点击箭头
navigation: {
nextEl: '.swiper-info-next',
prevEl: '.swiper-info-prev',
}
})
},
getCompanyInfo(){
if(this.companyInfo.historyNames && typeof this.companyInfo.historyNames=='string'){ //曾用名
this.companyInfo.historyNames = JSON.parse(this.companyInfo.historyNames)
}
},
//获取认领状态
async getClaimStatus(){
this.ifClaim = false
},
handleWidth(){
this.showMore = this.$refs.companyQybj.scrollWidth - this.$refs.companyQybj.clientWidth
},
handleDetail(){
this.showState = !this.showState
},
jumpToLt(item){
let { href } = this.$router.resolve({
path: '/enterprise/'+encodeStr(this.companyInfo.companyId)+'/lt',
query: { key:item.id }
})
window.open(href, "_blank")
},
//swiper项点击
handleGraph(item,it){
switch (item.id) {
case 4:
console.log('jump')
break
case 5:
this.jumpToLt(item)
break
case 6:
this.jumpToLt(item)
break
case 7:
console.log('jump')
break
}
},
//swiper子项点击
handleGraphChild(item, it){
if(it.id==101 && it.val){
console.log('jump')
}
if(it.id==102 && it.val){
console.log('jump')
}
if(it.id==201 && it.val){
console.log('jump')
}
if(it.id==202 && it.val){
console.log('jump')
}
if(it.id==301 && it.val){
console.log('jump')
}
if(it.id==302 && it.val){
console.log('jump')
}
}
}
}
</script>
<style lang="scss" scoped>
.info-container{
margin: 0;
padding: 24px 16px;
background: #FFFFFF;
.company-swiper{
position: relative;
.swiper-info{
width: calc(100% - 38px);
height: 56px;
margin-top: 13px;
margin-left: 25px;
overflow: hidden;
.swiper-slide{
&.swiper-disn{
display: none;
}
>div{
min-width: 242px;
height: 100%;
padding: 7px 4px 9px 0;
cursor: pointer;
align-items: normal;
.swiper-item{
.swiper-name{
display: block;
font-size: 14px;
color: #232323;
}
div{
display: inline-block;
font-size: 12px;
padding-top: 3px;
span{
color: #232323;
}
i{
font-style: normal;
color: #0081FF;
&.num{
margin-right: 8px;
}
}
}
}
.swiper-img{
width: 40px;
height: 40px;
margin-right: 6px;
}
}
}
}
.swiper-info-prev, .swiper-info-next{
width: 16px;
height: 40px;
background: #F0F5FC;
top: 8px;
margin-top: 0;
&.swiper-button-disabled{
opacity: 1;
color:#AAAAAA;
background: #F5F5F5;
}
i{
color: #AAAAAA;
}
&:hover i{
color:#667199;
}
&:after{
content: "";
}
}
}
.company-box{
width: 100%;
position: relative;
.company-nav{
align-items: normal;
.company-left{
width: 64px;
height: 64px;
margin-right: 12px;
flex-shrink: 0;
img{
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
}
.conenctLogo{
width: 100%;
height: 100%;
color: #FFFFFF;
border-radius: 4px;
overflow: hidden;
text-align: center;
display: block;
&.textOne{
font-size: 18px;
line-height: 64px;
}
&.textTwo{
font-size: 18px;
padding: 9px 10px;
line-height: 24px;
}
&.bg1{
background: #99BE81;
}
&.bg2{
background: #76B4D4;
}
&.bg3{
background: #7A91D9;
}
&.bg4{
background: #8F8DD2;
}
&.bg5{
background: #C4A89F;
}
}
p{
font-size: 12px;
color: #999999;
text-align: center;
margin-top: 7px;
}
}
.company-title{
.company-name{
font-size: 20px;
color: #000000;
font-weight: bold;
margin-right: 100px;
}
.company-tag{
overflow: hidden;
font-size: 12px;
padding: 2px 0 10px 0;
.company-history, .company-highTech{
display: inline-block;
height: 22px;
background: #EFEFEF;
border-radius: 2px;
margin-right: 8px;
margin-left: 0;
button{
height: 22px;
line-height: 22px;
font-size: 12px;
padding: 0 8px;
background: #EFEFEF;
color: #838383;
border: 1px solid #EFEFEF;
border-radius: 2px;
}
}
.company-highTech{
button{
background: #DFEAFE;
color: #0065F9;
}
}
.enterpriseLabel-highTech{
background: #ffffff;
margin-top: 8px;
margin-right: 8px;
float: left;
}
>span{
display: inline-block;
height: 22px;
line-height: 22px;
padding: 0 8px;
border-radius: 2px;
margin-right: 8px;
margin-top: 8px;
&:last-child{
margin-right: 0;
}
}
.enterpriseLabel-span{
display: inline-block;
height: 22px;
line-height: 22px;
padding: 0 8px;
border-radius: 2px;
margin-right: 8px;
margin-top: 8px;
float: left;
}
.label-bg1{
background: #ECF6E7;
color: #54BC7E;
}
.label-bg2{
background: #DFEAFE;
color: #0065F9;
}
.label-bg3{
background: #fbf2f1;
color: #fa5640;
}
}
}
}
.company-menu{
position: absolute;
right: 0;
top: 0;
font-size: 14px;
.claim{
border: 1px solid #0081FF;
border-radius: 2px;
color:#0081FF;
background: #FFFFFF;
.el-ico-claim{
background: url("~@/assets/images/detail/overview/company_rl.png") no-repeat;
background-size: 16px 16px;
}
}
.claim:hover{
border: 1px solid #006AD1;
border-radius: 2px;
color:#006AD1;
background: #FFFFFF;
.el-ico-claim{
background: url("~@/assets/images/detail/overview/company_hrl.png") no-repeat;
background-size: 16px 16px;
}
}
.hasClaim{
border: 1px solid rgba(0,129,255,0.5);
border-radius: 2px;
color:rgba(0,129,255,0.5);
background: #FFFFFF;
.el-ico-claim{
background: url("~@/assets/images/detail/overview/company_yrl.png") no-repeat;
background-size: 16px 16px;
}
}
button {
padding: 6px 11px;
position: relative;
i{
display: inline-block;
width: 16px;
height: 16px;
margin-bottom: -2px;
}
}
}
.company-info{
background: #F5F9FE;
border-radius: 2px;
padding: 12px 10px 12px 16px;
.info-item{
margin-bottom: 12px;
&:last-child{
margin-bottom: 0;
}
.item-link{
color: #0081FF;
cursor: pointer;
font-size: 12px;
line-height: 20px;
&:hover{
color: #0069D0;
text-decoration: none;
}
}
.item{
font-size: 14px;
color: #333333;
&:first-child{
width: 210px;
}
&:nth-child(2){
width: 250px;
}
&.item-line{
width: 100%;
align-items: flex-end;
.item-all{
width: calc(100% - 50px);
text-overflow: initial;
white-space: initial;
overflow: initial;
}
.item-more{
width: calc(100% - 50px);
}
}
label{
color: #666666;
flex-shrink: 0;
}
span{
display: inline-block;
}
}
}
}
}
.history-item{
padding: 8px 8px;
li{
font-size: 12px;
color: #333333;
padding: 2px 0;
}
}
.enterpriseLabel-item{
padding: 0;
//width: 100%;
max-width: 276px;
margin-top: 8px !important;
}
.highTech-item{
padding: 10px 12px 0;
font-size: 12px;
color: #333333;
.enterpriseLabel-children-span{
display: inline-block;
padding-right: 8px;
margin-right: 8px;
margin-bottom: 8px;
border-right: 1px solid #E1E1E1;
//cursor:pointer;
}
.enterpriseLabel-children-span:last-child{
padding-right: 0;
margin-right: 0;
border-right: 0;
}
}
.ml-4{
margin-left: 4px;
}
}
</style>
dsk-operate-ui/src/views/detail/party-a/overview/component/operations.vue
View file @ 2cd214d1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container operations-container"> <div class="app-container operations-container">
<div class="common-title">公司经营</div> <div class="common-title">公司经营</div>
<div class="part-swiper"> <div class="part-swiper">
<div class="swiper-containers"> <div class="swiper-containers swiper-oper" :style="operList.length<=6?'margin-left:0px; width: 100%;':''">
<ul class="swiper-wrapper"> <ul class="swiper-wrapper">
<li class="swiper-slide" v-for="(item, index) in operList" :key="index"> <li class="swiper-slide" v-for="(item, index) in operList" :key="index">
<div class="swiper-div"> <div class="swiper-div">
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="swiper-button-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div> <div class="swiper-button-prev swiper-oper-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 class="swiper-button-next swiper-oper-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
</div> </div>
<div class="flex-box operations-list"> <div class="flex-box operations-list">
<div class="list-item" v-for="(item, index) in gsjyList" :key="index"> <div class="list-item" v-for="(item, index) in gsjyList" :key="index">
...@@ -35,7 +35,6 @@ export default { ...@@ -35,7 +35,6 @@ export default {
data() { data() {
return { return {
operList: [ 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'},
{name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'}, {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
...@@ -57,12 +56,12 @@ export default { ...@@ -57,12 +56,12 @@ export default {
}, },
methods: { methods: {
companySwiper(){ companySwiper(){
new Swiper('.swiper-containers', { new Swiper('.swiper-oper', {
slidesPerView: 4, slidesPerView: 6,
// 设置点击箭头 // 设置点击箭头
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: '.swiper-oper-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-oper-prev',
} }
}) })
} }
...@@ -78,7 +77,7 @@ export default { ...@@ -78,7 +77,7 @@ export default {
.part-swiper{ .part-swiper{
position: relative; position: relative;
margin-top: 16px; margin-top: 16px;
.swiper-containers{ .swiper-oper{
width: calc(100% - 38px); width: calc(100% - 38px);
height: 96px; height: 96px;
margin-top: 8px; margin-top: 8px;
...@@ -117,7 +116,7 @@ export default { ...@@ -117,7 +116,7 @@ export default {
} }
} }
} }
.swiper-button-prev, .swiper-button-next{ .swiper-oper-prev, .swiper-oper-next{
width: 16px; width: 16px;
height: 96px; height: 96px;
background: #F0F5FC; background: #F0F5FC;
......
dsk-operate-ui/src/views/detail/party-a/overview/overview.vue
View file @ 2cd214d1
<template> <template>
<div class="app-container part-container"> <div class="app-container part-container">
企业速览 <div class="view-content"><Infoheader /></div><!-- 企业信息 -->
<div class="view-content"><Operations /></div><!-- 公司经营 --> <div class="view-content"><Operations /></div><!-- 公司经营 -->
<div class="view-content"><Bidding /></div><!--招标偏好、业务往来--> <div class="view-content"><Bidding /></div><!--招标偏好、业务往来-->
<div class="view-content"><Busclue /></div><!--商机线索--> <div class="view-content"><Busclue /></div><!--商机线索-->
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
</template> </template>
<script> <script>
import Infoheader from "./component/infoheader"
import Operations from "./component/operations" import Operations from "./component/operations"
import Bidding from "./component/bidding" import Bidding from "./component/bidding"
import Busclue from './component/busclue' import Busclue from './component/busclue'
...@@ -23,6 +24,7 @@ export default { ...@@ -23,6 +24,7 @@ export default {
name: 'Overview', name: 'Overview',
props: ['companyId'], props: ['companyId'],
components: { components: {
Infoheader,
Operations, Operations,
Bidding, Bidding,
Busclue, Busclue,
......
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