73 changed files with 4346 additions and 550 deletions
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 574 B |
|
After Width: | Height: | Size: 470 B |
|
After Width: | Height: | Size: 305 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 723 B |
|
After Width: | Height: | Size: 858 B |
|
After Width: | Height: | Size: 536 B |
|
After Width: | Height: | Size: 337 B |
|
After Width: | Height: | Size: 947 B |
|
After Width: | Height: | Size: 494 B |
|
After Width: | Height: | Size: 563 B |
|
After Width: | Height: | Size: 535 B |
|
After Width: | Height: | Size: 959 B |
|
After Width: | Height: | Size: 931 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,556 @@ |
|||
<template> |
|||
<div class="head"> |
|||
<div class="headCon"> |
|||
<div class="info"> |
|||
<div class="iconTitle"> |
|||
<img src="@/assets/image/newLogo.png" @click="handleLogo"/> |
|||
<!-- <img src="@/assets/image/logo/logo.png" @click="handleLogo"/>--> |
|||
<!-- <img src="@/assets/image/newTitle.png" @click="handleLogo"/>--> |
|||
<span>水利信息平台</span> |
|||
</div> |
|||
<div class="msg"> |
|||
<div class="msgCon" @click="handleTrans"> |
|||
<img src="../assets/Fill.png" alt=""> |
|||
<span>翻译</span> |
|||
</div> |
|||
<div class="msgCon" @click="handleSearch"> |
|||
<img src="../assets/iconSearch.png" alt=""> |
|||
<span>检索</span> |
|||
</div> |
|||
<div class="msgCon" style="position: relative;left: 0; top: 0;"> |
|||
<img src="../assets/iconUser.png" alt=""> |
|||
<span @click="handlePerson" |
|||
style="width: 90px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ |
|||
$store.state.userInfo.nickName | ellipsis |
|||
}}</span> |
|||
<ul class="msgIndividual"> |
|||
<li v-for="(item, index) in msgIndividual" :key="index" @click="handleIndividual(item)">{{ item.name }} |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="menu"> |
|||
<div class="menu-wp" style="z-index: 1999" ref="menuWp" @mouseenter="handleOpen" |
|||
:style="{height: showSubMenu ? '171px' : '51px'}"> |
|||
<hk-menu |
|||
:collapse-transition="false" |
|||
ref="menu" |
|||
:default-active="activeIndex" |
|||
class="el-menu-demo" |
|||
mode="horizontal" |
|||
menu-trigger="click" |
|||
@select="handleSelect" |
|||
> |
|||
<template v-for="(item, index) in menus"> |
|||
<!-- 只有一级菜单 --> |
|||
<el-menu-item |
|||
v-if="!item.children" :key="index" :index="item.path" :id="item.path"> |
|||
<span class="span4" slot="title">{{ item.name }}</span> |
|||
</el-menu-item> |
|||
<!-- 有二级菜单 --> |
|||
<hk-submenu |
|||
:popper-append-to-body="false" |
|||
popper-class="hk-popper" |
|||
v-else :key="index" :index="item.path" :id="item.path" ref="clearFix"> |
|||
<template slot="title"> |
|||
<span class="span4" slot="title">{{ item.name }}</span> |
|||
</template> |
|||
<template v-for="(etem, index) in item.children"> |
|||
<el-menu-item |
|||
style="background:none; border-radius: 0" :index="etem.path" :key="index"> |
|||
{{ etem.name }} |
|||
</el-menu-item> |
|||
</template> |
|||
</hk-submenu> |
|||
</template> |
|||
</hk-menu> |
|||
<!-- <transition name="el-zoom-in-top">--> |
|||
<!-- <div class="bg" style="z-index: 1999" v-show="showSubMenu"></div>--> |
|||
<!-- </transition>--> |
|||
</div> |
|||
|
|||
<transition name="el-zoom-in-top"> |
|||
<div class="bg" v-show="showSubMenu"></div> |
|||
</transition> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {loginOut} from "@/api/login"; |
|||
import {msgIndividual} from "@/utils/partten/partten"; |
|||
import hkMenu from "./hkMenu/index.vue"; |
|||
import hkSubmenu from "./hkMenu/hkSubmenu.vue"; |
|||
|
|||
export default { |
|||
props: ["menu", "count"], |
|||
components: {hkMenu, hkSubmenu}, |
|||
data() { |
|||
return { |
|||
showSubMenu: false, |
|||
activeIndex: "", |
|||
menus: this.$partten.menus, |
|||
msgIndividual: msgIndividual, |
|||
subMenus: ['hkdata', 'hkknowledge', 'service'], |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route: { |
|||
handler(val, oldval) { |
|||
this.activeIndex = val.matched[1].name; |
|||
}, |
|||
// 深度观察监听 |
|||
deep: true, |
|||
}, |
|||
}, |
|||
created() { |
|||
this.activeIndex = this.$route.matched[1].name; |
|||
}, |
|||
mounted() { |
|||
this.changeStyle(); |
|||
let menuWp = this.$refs.menuWp |
|||
if (menuWp) { |
|||
menuWp.addEventListener('mouseleave', this.handleMenuClose) |
|||
} |
|||
|
|||
}, |
|||
destroyed() { |
|||
let menuWp = this.$refs.menuWp |
|||
if (menuWp) { |
|||
menuWp.removeEventListener('mouseleave', this.handleMenuClose) |
|||
} |
|||
}, |
|||
methods: { |
|||
handleMenuClose(e) { |
|||
this.handleClose() |
|||
}, |
|||
handleClose() { |
|||
if (!this.showSubMenu) { |
|||
return |
|||
} |
|||
this.showSubMenu = false |
|||
this.subMenus.forEach(path => this.$refs.menu.closeMenu(path)) |
|||
}, |
|||
handleOpen() { |
|||
if (this.showSubMenu) { |
|||
return |
|||
} |
|||
this.showSubMenu = true |
|||
this.subMenus.forEach(path => this.$refs.menu.openMenu(path)) |
|||
|
|||
}, |
|||
//修改首页头部导航二级菜单的位置 |
|||
changeStyle: function () { |
|||
this.$refs.clearFix[0].popperElm.style.marginLeft = '40px'; |
|||
this.$refs.clearFix[1].popperElm.style.marginLeft = '40px'; |
|||
this.$refs.clearFix[2].popperElm.style.marginLeft = '40px'; |
|||
}, |
|||
handleTrans() { |
|||
this.$router.push("/translate"); |
|||
}, |
|||
handleSearch() { |
|||
this.$router.push("/search"); |
|||
}, |
|||
handleSelect(key, keyPath) { |
|||
if (key == 'https://www.zg-learn.com') { |
|||
window.open(key, '_black'); |
|||
this.handleClose() |
|||
} else { |
|||
|
|||
this.$router.push("/" + key); |
|||
this.$store.commit('SET_QUERY_PARAMS', '') |
|||
this.handleClose() |
|||
} |
|||
}, |
|||
handleLogo() { |
|||
this.$router.push("/polymerize"); |
|||
}, |
|||
handlePerson() { |
|||
this.$router.push("/person"); |
|||
}, |
|||
handleIndividual(item) { |
|||
if (item.path == '') { |
|||
loginOut().then(() => { |
|||
this.$store.commit("setToken", ""); |
|||
this.$store.commit("setUserInfo", ""); |
|||
this.$router.push("/"); |
|||
}); |
|||
} else { |
|||
this.$router.push({path: "/person", query: {OnlyTitle: item.path}}); |
|||
} |
|||
}, |
|||
handleLoginOut() { |
|||
loginOut().then(() => { |
|||
this.$store.commit("setToken", ""); |
|||
this.$store.commit("setUserInfo", ""); |
|||
this.$router.push("/"); |
|||
}); |
|||
}, |
|||
}, |
|||
filters: { |
|||
ellipsis(value) { |
|||
if (!value) return ""; |
|||
if (value.length > 12) { |
|||
return value.slice(0, 12) + "..."; |
|||
} |
|||
return value; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.bg { |
|||
position: absolute; |
|||
top: 51px; |
|||
|
|||
width: 100%; |
|||
//margin-left: -8.6vw; |
|||
height: 120px; |
|||
background: #3B79D7; |
|||
opacity: 0.94; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.head { |
|||
height: 110px; |
|||
//flex-shrink: 0; |
|||
//display: flex; |
|||
//justify-content: space-between; |
|||
//align-items: center; |
|||
//padding: 0 83px; |
|||
background: url("../assets/image/head-bg.png"); |
|||
background-size: 100% 100%; |
|||
|
|||
& > .headCon { |
|||
width: 83.4%; |
|||
min-width: 1320px; |
|||
margin: 0 auto; |
|||
padding: 0 42px; |
|||
padding-top: 13px; |
|||
|
|||
& > div { |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
align-items: center; |
|||
-webkit-box-pack: justify; |
|||
-ms-flex-pack: justify; |
|||
justify-content: space-between; |
|||
|
|||
& > .iconTitle { |
|||
& > img { |
|||
width: 208px; |
|||
cursor: pointer; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
& > img:nth-child(1) { |
|||
width: 46px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin: 0; |
|||
color: #fff; |
|||
font-weight: 600; |
|||
line-height: 46px; |
|||
/* font-size: 14px; */ |
|||
font-size: 24px; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
|
|||
& > .msg { |
|||
/deep/ .el-badge__content { |
|||
border: none; |
|||
background: #f53502; |
|||
} |
|||
|
|||
/deep/ .el-badge__content.is-fixed { |
|||
right: 5px !important; |
|||
} |
|||
|
|||
.username { |
|||
height: 20px; |
|||
line-height: 20px; |
|||
|
|||
& > span { |
|||
color: rgba(255, 255, 255, 0.81); |
|||
font-size: 14px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
|
|||
& > span { |
|||
position: absolute; |
|||
background-color: #f53502; |
|||
letter-spacing: 0px; |
|||
border-radius: 50%; |
|||
line-height: 15px; |
|||
height: 15px; |
|||
width: 15px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-size: 12px; |
|||
top: -3px; |
|||
right: -8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
& > img { |
|||
//margin-left: 37px; |
|||
width: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
& > .msgCon { |
|||
cursor: pointer; |
|||
margin: 0 13px; |
|||
float: left; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
|
|||
& > span { |
|||
color: rgba(255, 255, 255, 0.81); |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
& > img { |
|||
width: 14px; |
|||
} |
|||
|
|||
.msgIndividual { |
|||
list-style: none; |
|||
z-index: 100; |
|||
border: none; |
|||
padding: 5px 0; |
|||
-webkit-box-shadow: 0px 2px 4px 0px rgba(25, 90, 183, 0.07); |
|||
box-shadow: 0px 2px 4px 0px rgba(25, 90, 183, 0.07); |
|||
min-width: 90px; |
|||
border-radius: 5px; |
|||
top: 0; |
|||
margin-top: 45px; |
|||
padding-left: 0 !important; |
|||
position: absolute; |
|||
background: #ffffff; |
|||
display: none; |
|||
z-index: 9999; |
|||
|
|||
li { |
|||
background-color: #FFF; |
|||
float: none; |
|||
height: 36px; |
|||
line-height: 36px; |
|||
padding: 0 10px; |
|||
color: #909399; |
|||
border-radius: 0px; |
|||
text-align: center; |
|||
} |
|||
|
|||
li:last-child { |
|||
text-align: left; |
|||
text-indent: 6px; |
|||
} |
|||
|
|||
li:hover { |
|||
color: #1767E0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& > .msgCon:last-child:hover .msgIndividual { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
& > .menu { |
|||
height: 47px; |
|||
//display: flex; |
|||
//align-items: center; |
|||
position: relative; |
|||
//padding-top: 15px; |
|||
& > .menu-wp { |
|||
//width: 83.4%; |
|||
width: 1070px; |
|||
height: 171px; |
|||
position: absolute; |
|||
top: 0; |
|||
//margin-left: 8.3%; |
|||
left: 8.3%; |
|||
padding-left: 42px; |
|||
|
|||
& > .el-menu-demo { |
|||
background-color: inherit; |
|||
border-bottom: 0; |
|||
|
|||
& > .el-menu-item:not(.is-disabled):focus, |
|||
.el-menu-item:not(.is-disabled):hover, |
|||
.el-submenu .el-submenu__title:hover { |
|||
background-color: inherit; |
|||
} |
|||
|
|||
& > .el-menu-item { |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.89); |
|||
letter-spacing: 0px; |
|||
font-size: 18px; |
|||
padding: 0; |
|||
margin: 0 55px; |
|||
} |
|||
|
|||
& > .el-menu-item:first-child { |
|||
margin-left: 14px; |
|||
} |
|||
|
|||
.span4 { |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 0.89); |
|||
letter-spacing: 0px; |
|||
font-size: 18px; |
|||
padding: 0; |
|||
font-family: MicrosoftYaHei; |
|||
} |
|||
|
|||
& > .el-menu-item.is-active { |
|||
border-bottom: 0; |
|||
position: relative; |
|||
font-weight: 600; |
|||
} |
|||
& > .el-submenu { |
|||
height: 51px; |
|||
line-height: 40px; |
|||
} |
|||
|
|||
& > .el-submenu.is-active { |
|||
.el-submenu__title { |
|||
//border-bottom: none; |
|||
position: relative; |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-block; |
|||
width: 16px; |
|||
height: 3px; |
|||
background: #FFFFFF; |
|||
border-radius: 2px; |
|||
left: 50%; |
|||
margin-left: -8px; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
& > .el-menu-item.is-active::after { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 16px; |
|||
height: 3px; |
|||
background: #FFFFFF; |
|||
border-radius: 2px; |
|||
left: 50%; |
|||
margin-left: -8px; |
|||
bottom: 0; |
|||
} |
|||
|
|||
& > .el-menu-item.is-active { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
& > .el-menu-item:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
& > .el-submenu /deep/ .el-submenu__title:hover { |
|||
background-color: transparent !important; |
|||
// background-color: #41a3fb !important; |
|||
} |
|||
|
|||
/deep/ .el-menu-item, /deep/ .el-submenu__title { |
|||
//height: 45px !important; |
|||
//line-height: 45px !important; |
|||
height: 40px !important; |
|||
line-height: 40px !important; |
|||
//border-bottom: 2px solid #5ee6f8; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
|
|||
/deep/ .el-submenu__title { |
|||
margin: 0 55px; |
|||
padding: 0px; |
|||
} |
|||
|
|||
/deep/ .el-submenu .el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
& > img { |
|||
cursor: pointer; |
|||
width: 18px; |
|||
margin-left: 30px; |
|||
} |
|||
} |
|||
|
|||
|
|||
& > div { |
|||
/deep/ .el-badge__content { |
|||
border: none; |
|||
background: #f53502; |
|||
} |
|||
|
|||
/deep/ .el-badge__content.is-fixed { |
|||
right: 5px !important; |
|||
} |
|||
|
|||
.username { |
|||
height: 20px; |
|||
line-height: 20px; |
|||
|
|||
& > span { |
|||
color: #b0adad; |
|||
font-size: 14px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
font-weight: 500; |
|||
font-family: MicrosoftYaHei; |
|||
|
|||
& > span { |
|||
position: absolute; |
|||
background-color: #f53502; |
|||
letter-spacing: 0px; |
|||
border-radius: 50%; |
|||
line-height: 15px; |
|||
height: 15px; |
|||
width: 15px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-size: 12px; |
|||
top: -3px; |
|||
right: -8px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
& > img { |
|||
margin-left: 37px; |
|||
width: 20px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<div class="ranking-header"> |
|||
<div class="header-title"> |
|||
<img :src="url" alt=""> |
|||
<span>{{ title }}</span> |
|||
</div> |
|||
<div class="more-btn" v-if="isMore"> |
|||
<span>更多</span> |
|||
<img src="@/assets/image/icon_more.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "headerImg", |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
url: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
isMore: false |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.ranking-header { |
|||
border-bottom: 1px solid #DADCE3; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.header-title { |
|||
display: flex; |
|||
border-bottom: 3px solid #005EB7; |
|||
padding-bottom: 10px; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.more-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #666666; |
|||
} |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<div class="bidding-page"> |
|||
<div class="bidding-main"> |
|||
<div class="main-left"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// export def |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.bidding-page { |
|||
background: linear-gradient(180deg, #005EB7 0%, #EDF7FF 60% #EDF7FF 100%); |
|||
padding: 20px 0; |
|||
|
|||
.bidding-main { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
.main-left { |
|||
height: 378px; |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class="certification-page"> |
|||
<div class="certification-header"> |
|||
<div class="header-wrap"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> |
|||
<el-breadcrumb-item>信用统计</el-breadcrumb-item> |
|||
<el-breadcrumb-item>信用统计列表</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
</div> |
|||
<div class="certification-tabs"> |
|||
<div class="tabs-wrap"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabcs"> |
|||
<el-tab-pane label="所有资质" name="first"></el-tab-pane> |
|||
<el-tab-pane label="施工资质" name="second"></el-tab-pane> |
|||
<el-tab-pane label="监理资质" name="third"></el-tab-pane> |
|||
<el-tab-pane label="勘测设计资质" name="fourth"></el-tab-pane> |
|||
<el-tab-pane label="招标代理资质" name="fourth1"></el-tab-pane> |
|||
<el-tab-pane label="质量检测资质" name="fourth2"></el-tab-pane> |
|||
<el-tab-pane label="生产供货资质" name="fourth3"></el-tab-pane> |
|||
<el-tab-pane label="白蚁防治资质" name="fourth4"></el-tab-pane> |
|||
<el-tab-pane label="其他资质" name="fourth5"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="certification-list"> |
|||
<div class="list-wrap"> |
|||
<el-form :inline="true" label-width="80px" :model="queryForm"> |
|||
<el-form-item label="企业名称"> |
|||
<el-input class="name-inp-search" placeholder="请输入企业名称" v-model="queryForm.firmName"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="所在区域"> |
|||
<el-select v-model="queryForm.area" clearable placeholder="请选择所有区域"> |
|||
<!-- <el-option v-for="item in dict.type.lang_type" :key="item.value" :label="item.label" |
|||
:value="item.value"> |
|||
</el-option> --> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="mini" icon="el-icon-search" @click="searchList()">查询</el-button> |
|||
<el-button type="mini" icon="el-icon-refresh" @click="resetForm()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="firmName" label="企业名称" width="700"> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #005EB7;cursor: pointer;font-size: 16px !important;">{{ scope.row.firmName |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="certification" label="企业资质" width="180" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="area" label="所在区域" width="180" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="creditScore" label="信用分数" align="center"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<pagination :total="total" :page.sync="apidata.pageNum" :limit.sync="apidata.pageSize" |
|||
:pageSizes="pageSizes" @pagination="getResult" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
apidata: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}, |
|||
pageSizes: [10, 20, 30, 50], |
|||
activeName: "first", |
|||
queryForm: { |
|||
firmName: "", |
|||
area: "" |
|||
}, |
|||
tableData: [{ |
|||
firmName: '广东润航建设集团有限公司', |
|||
certification: '施工资质', |
|||
area: '广州市', |
|||
creditScore: '132', |
|||
}, { |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1517 弄' |
|||
}, { |
|||
date: '2016-05-01', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1519 弄' |
|||
}, { |
|||
date: '2016-05-03', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1516 弄' |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
getResult() { |
|||
}, |
|||
handleClick(tab, event) { |
|||
// console.log(tab, event); |
|||
if (tab.name !== "first" && tab.name !== "second" && tab.name !== "third" && tab.name !== "fourth5") { |
|||
this.resetActivePosition(this.$refs.tabcs.$el); |
|||
} |
|||
}, |
|||
resetActivePosition($el) { |
|||
this.$nextTick(() => { |
|||
const activeEl = $el.querySelector('.el-tabs__item.is-active'); |
|||
const lineEl = $el.querySelector('.el-tabs__active-bar'); |
|||
const style = getComputedStyle(activeEl); |
|||
const pl = style.paddingLeft.match(/\d+/)[0] * 1; |
|||
lineEl.style.transform = |
|||
'translateX(' + (activeEl.offsetLeft + 40) + 'px)'; |
|||
console.log(activeEl.offsetLeft, pl); |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.certification-page { |
|||
.certification-header { |
|||
height: 40px; |
|||
background: #EBF4FE; |
|||
|
|||
.header-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-breadcrumb { |
|||
margin-top: 10px; |
|||
|
|||
.el-breadcrumb__item { |
|||
.el-breadcrumb__inner { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
|
|||
.el-breadcrumb__separator { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-tabs { |
|||
height: 60px; |
|||
background: #FFFFFF; |
|||
border: 1px solid transparent; |
|||
|
|||
.tabs-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-tabs { |
|||
margin-top: 11px; |
|||
|
|||
.el-tabs__nav-wrap::after { |
|||
background: #Fff; |
|||
} |
|||
|
|||
.el-tabs__item { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
height: 48px; |
|||
} |
|||
|
|||
.el-tabs__item.is-active { |
|||
color: #005EB7; |
|||
} |
|||
|
|||
.el-tabs__active-bar { |
|||
width: 0 !important; |
|||
height: 0; |
|||
border: 10px solid transparent; |
|||
border-bottom: 10px solid #005EB7; |
|||
background: none; |
|||
left: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-list { |
|||
background: linear-gradient(180deg, #005EB7 0%, #EDF7FF 60% #EDF7FF 100%); |
|||
padding: 20px 0; |
|||
|
|||
.list-wrap { |
|||
width: 1200px; |
|||
height: 1098px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
margin: 0 auto; |
|||
padding: 20px; |
|||
|
|||
/deep/.el-form { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.el-form-item__label { |
|||
font-size: 16px; |
|||
color: #333333; |
|||
} |
|||
|
|||
.el-input__inner { |
|||
width: 300px; |
|||
border-radius: 8px; |
|||
border: 1px solid #AAD8FB; |
|||
} |
|||
|
|||
.el-button { |
|||
padding: 13px 15px; |
|||
background: linear-gradient(180deg, #005BA6 0%, #0059A5 100%); |
|||
border-radius: 8px; |
|||
color: #FFFFFF; |
|||
|
|||
span { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
i { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.el-button:nth-child(1) { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.el-button:nth-child(2) { |
|||
background: #fff; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-table { |
|||
.el-table__header-wrapper { |
|||
height: 44px; |
|||
} |
|||
|
|||
th { |
|||
background: #EBF4FE; |
|||
|
|||
.cell { |
|||
font-size: 16px !important; |
|||
font-weight: 600 !important; |
|||
color: #005EB7; |
|||
} |
|||
} |
|||
|
|||
tr { |
|||
background-color: #fff !important; |
|||
|
|||
.cell { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<div class="qualified-wrap"> |
|||
<headerImg :title="'所有资质企业信用排名'" :url="require('@/assets/image/icon_syzzqyxy.png')" /> |
|||
<div class="sort-btns"> |
|||
<div class="btn-item"> |
|||
<span>正序</span> |
|||
<i class="el-icon-arrow-up"></i> |
|||
</div> |
|||
<div class="btn-item"> |
|||
<span>倒叙</span> |
|||
<i class="el-icon-arrow-up"></i> |
|||
</div> |
|||
</div> |
|||
<div class="qualified-list"> |
|||
<div class="qualified-item" v-for="(item, index) in qualifiedList" :key="(item, index)"> |
|||
<span>{{ item.qualifiedName }}</span> |
|||
<span>{{ item.qualifiedScore }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
qualifiedList: [{ |
|||
qualifiedName: "浙江省正邦水电建设有限公司", |
|||
qualifiedScore: "123" |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.qualified-wrap { |
|||
height: 824px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
|
|||
.sort-btns { |
|||
height: 40px; |
|||
background: #F6F6F6; |
|||
margin-top: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.btn-item { |
|||
cursor: pointer; |
|||
margin-right: 50px; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/i { |
|||
width: 20px; |
|||
height: 20px; |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
font-size: 10px; |
|||
font-weight: 600; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
.btn-item:last-child { |
|||
margin-right: 0; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.qualified-list { |
|||
margin-top: 10px; |
|||
|
|||
.qualified-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-bottom: 1px solid #DADCE3; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:last-child { |
|||
color: #FF6200; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<div class="certification-wrap"> |
|||
<div class="certification-header"> |
|||
<span class="certification-title">{{ title }}</span> |
|||
<div class="more-btn" @click="toMore()"> |
|||
<span>更多</span> |
|||
<img src="@/assets/image/icon_more.png" alt=""> |
|||
</div> |
|||
</div> |
|||
<div class="certification-main"> |
|||
<div class="table-title"> |
|||
<span>企业名称</span> |
|||
<span>所在区域</span> |
|||
<span>信用分数</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item, index) in certificationList" :key="(item, index)"> |
|||
<span>{{ item.firmName }}</span> |
|||
<span>{{ item.area }}</span> |
|||
<span>{{ item.creditScore }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
certificationList: [{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
},{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
},{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
},{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
},{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
},{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
area: "省外", |
|||
creditScore: "123", |
|||
}] |
|||
} |
|||
}, |
|||
methods:{ |
|||
toMore(){ |
|||
this.$router.push({ |
|||
path:"/certificationPage" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.certification-wrap { |
|||
width: 400px; |
|||
height: 310px; |
|||
margin-top: 20px; |
|||
margin-right: 40px; |
|||
|
|||
.certification-header { |
|||
height: 46px; |
|||
background: #F6F6F6; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.certification-title { |
|||
display: block; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
padding-left: 10px; |
|||
border-left: 3px solid #005EB7; |
|||
} |
|||
|
|||
.more-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #666666; |
|||
} |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 56%; |
|||
// border: 1px solid red; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 24%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 18%; |
|||
// border: 1px solid olive; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 56%; |
|||
font-size: 16px; |
|||
color: #005EB7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 24%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 18%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-wrap:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<div class="credit-statistics"> |
|||
<headerImg :title="'企业信用统计排名'" :url="require('@/assets/image/icon_qyxytjpm.png')" /> |
|||
<div class="certification-all"> |
|||
<certificationTable :title="'施工资质'" /> |
|||
<certificationTable :title="'监理资质'" /> |
|||
<certificationTable :title="'勘测设计资质'" /> |
|||
<certificationTable :title="'招标代理资质'" /> |
|||
<certificationTable :title="'生产供货资质'" /> |
|||
<certificationTable :title="'质量检测资质'" /> |
|||
<certificationTable :title="'白蚁防治资质'" /> |
|||
<certificationTable :title="'其他资质'" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import certificationTable from "./certificationTable" |
|||
export default { |
|||
components: { |
|||
certificationTable |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.credit-statistics { |
|||
height: 1388px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
|
|||
.certification-all { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div class="ranking-wrap"> |
|||
<headerImg :title="'动态信用分数排名'" :url="require('@/assets/image/icon_dongtaixinyong.png')" /> |
|||
<div class="information-amount"> |
|||
<div class="amount-item" v-for="(item, index) in amountList" :key="(item, index)"> |
|||
<span>{{ item.total }}</span> |
|||
<span>{{ item.amountName }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="bar-graph"> |
|||
<div class="bar-title"> |
|||
<span></span> |
|||
<span>企业信用分数统计图</span> |
|||
<span></span> |
|||
</div> |
|||
<div class="bar-wrap"> |
|||
<div class="echart" id="mychart" :style="myChartStyle"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
amountList: [{ |
|||
total: "4975", |
|||
amountName: "从业单位(家)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "从业人员(人)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "信用信息发布(条)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "其他信息发布(条)" |
|||
}], |
|||
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 |
|||
yData: [23, 24, 18, 25, 27, 28, 25], //数据 |
|||
myChartStyle: { float: "left", width: "100%", height: "250px" } //图表样式 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initEcharts(); |
|||
}) |
|||
}, methods: { |
|||
initEcharts() { |
|||
// 基本柱状图 |
|||
const option = { |
|||
// position: 'top', |
|||
grid: { |
|||
top: '10%', |
|||
left: '8%', |
|||
right: '5%', |
|||
bottom: '8%' |
|||
}, |
|||
xAxis: { |
|||
data: this.xData, |
|||
axisTick: { |
|||
show: true, |
|||
alignWithLabel: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "bar", //形状为柱状图 |
|||
data: this.yData, |
|||
backgroundStyle: { |
|||
color: '#00FCFF' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。 |
|||
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置 |
|||
color: '#7C9CD6' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
const myChart = this.$echarts.init(document.getElementById("mychart")); |
|||
myChart.setOption(option); |
|||
//随着屏幕大小调节图表 |
|||
window.addEventListener("resize", () => { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.ranking-wrap { |
|||
height: 544px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px 0 20px 20px; |
|||
margin-bottom: 20px; |
|||
|
|||
.information-amount { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
flex-wrap: wrap; |
|||
margin-right: 20px; |
|||
|
|||
.amount-item { |
|||
margin-top: 20px; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 29px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 15px; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bar-graph { |
|||
margin-top: 30px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 20px; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 30px; |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 30px; |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div class="good-notice"> |
|||
<headerImg :title="title" :url="url" :isMore="true" /> |
|||
<div class="notice-main"> |
|||
<div class="table-title"> |
|||
<span>招标项目名称</span> |
|||
<span>项目名称</span> |
|||
<span>加分</span> |
|||
<span>企业资质</span> |
|||
<span>所在区域</span> |
|||
<span>发布单位</span> |
|||
<span>建立时间</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item, index) in noticeList" :key="(item, index)"> |
|||
<span>{{ item.biddingName }}</span> |
|||
<span>{{ item.projectName }}</span> |
|||
<span>{{ item.awardedMarks }}</span> |
|||
<span>{{ item.certification }}</span> |
|||
<span>{{ item.area }}</span> |
|||
<span>{{ item.releaseUnit }}</span> |
|||
<span>{{ item.settingTime }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
url: { |
|||
type: String, |
|||
default: "" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
noticeList: [{ |
|||
biddingName: "广州市南沙区大岗镇潭洲滘涌流域水系连通及综…", |
|||
projectName: "钟祥市保障性安居工程防洪排涝...", |
|||
awardedMarks: "+8", |
|||
certification: "施工资质", |
|||
area: "广州市", |
|||
releaseUnit: "广东省水利厅", |
|||
settingTime: "2019-03-22", |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.good-notice { |
|||
height: 322px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
margin-top: 20px; |
|||
padding: 20px; |
|||
|
|||
.notice-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 52%; |
|||
// border: 1px solid red; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 36%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 10%; |
|||
// border: 1px solid rgb(49, 70, 60); |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(4) { |
|||
width: 18%; |
|||
// border: 1px solid olive; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(5) { |
|||
width: 12%; |
|||
// border: 1px solid rgb(2, 0, 128); |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(6) { |
|||
width: 20%; |
|||
// border: 1px solid rgb(128, 41, 0); |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(7) { |
|||
width: 15%; |
|||
// border: 1px solid rgb(128, 0, 38); |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 52%; |
|||
color: #005EB7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 36%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 10%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(4) { |
|||
width: 18%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(5) { |
|||
width: 12%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(6) { |
|||
width: 20%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(7) { |
|||
width: 15%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="credit-page"> |
|||
<div class="credit-wrap"> |
|||
<div class="ranking-credit"> |
|||
<div class="ranking-left"> |
|||
<dynamicCredit /> |
|||
<allQualified /> |
|||
</div> |
|||
<div class="ranking-right"> |
|||
<creditStatistics /> |
|||
</div> |
|||
</div> |
|||
<goodNotice :title="'良好信用信息公告'" :url="require('@/assets/image/icon_xylianghao.png')"/> |
|||
<goodNotice :title="'不良信用信息公告'" :url="require('@/assets/image/icon_xybuliang.png')"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import dynamicCredit from "./components/dynamicCredit" |
|||
import allQualified from "./components/allQualified" |
|||
import creditStatistics from "./components/creditStatistics" |
|||
import goodNotice from "./components/goodNotice" |
|||
export default { |
|||
components:{ |
|||
dynamicCredit, |
|||
allQualified, |
|||
creditStatistics, |
|||
goodNotice, |
|||
}, |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.credit-page { |
|||
background: linear-gradient(180deg, #005EB7 0%, #c5d3e0 20%, #EDF7FF 100%); |
|||
padding: 20px 0; |
|||
|
|||
.credit-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
.ranking-credit{ |
|||
display: flex; |
|||
.ranking-left{ |
|||
width: 300px; |
|||
margin-right: 20px; |
|||
} |
|||
.ranking-right{ |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div class="enterprise-wrap"> |
|||
<headerImg :title="'企业基本信息'" :url="require('@/assets/image/icon_qiyexinxi.png')" :isMore="true" /> |
|||
<div class="enterprise-main"> |
|||
<div class="table-title"> |
|||
<span>企业名称</span> |
|||
<span>企业类型</span> |
|||
<span>法定代表人</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item,index) in enterpriseList" :key="(item,index)"> |
|||
<span>{{ item.firmName }}</span> |
|||
<span>{{ item.firmType }}</span> |
|||
<span>{{ item.legalRepresentative }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
enterpriseList: [{ |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}, { |
|||
firmName: "湖北省水利水电规划勘测设计院有限公司", |
|||
firmType: "勘测设计资质", |
|||
legalRepresentative: "李瑞清", |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.enterprise-wrap { |
|||
height: 355px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
|
|||
.enterprise-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 60%; |
|||
// border: 1px solid red; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 25%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 15%; |
|||
// border: 1px solid olive; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 264px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 60%; |
|||
font-size: 16px; |
|||
color: #005EB7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 25%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 15%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<div class="enterprise-wrap"> |
|||
<div class="enterprise-header"> |
|||
<img src="@/assets/image/bg_title01.png" alt=""> |
|||
<span>企业信息</span> |
|||
</div> |
|||
<div class="enterprise-select"> |
|||
<div class="select-item" v-for="(item,index) in enterpriseList" :key="(item,index)"> |
|||
<img :src="item.url" alt=""> |
|||
</div> |
|||
</div> |
|||
<div class="enterprise-main"> |
|||
<div class="main-left"> |
|||
<enterpriseBasic /> |
|||
</div> |
|||
<div class="main-right"> |
|||
<personnelInformation /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import enterpriseBasic from "./enterpriseBasic" |
|||
import personnelInformation from "./personnelInformation" |
|||
export default { |
|||
components: { |
|||
enterpriseBasic, |
|||
personnelInformation, |
|||
}, |
|||
data() { |
|||
return { |
|||
enterpriseList: [{ |
|||
url: require("@/assets/image/img_zizhixinxi.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_xmyjxx.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_lhxwjl.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_rylhxwjl.png"), |
|||
name: "" |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.enterprise-wrap { |
|||
.enterprise-header { |
|||
position: relative; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
font-size: 36px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
position: absolute; |
|||
top: -15px; |
|||
left: 43.6%; |
|||
} |
|||
} |
|||
|
|||
.enterprise-select { |
|||
margin-top: 55px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.select-item { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.enterprise-main{ |
|||
margin-top: 30px; |
|||
display: flex; |
|||
.main-left{ |
|||
width: 860px; |
|||
margin-right: 40px; |
|||
} |
|||
.main-right{ |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<div class="information-wrap"> |
|||
<headerImg :title="'信用信息公开'" :url="require('@/assets/image/icon_dongtaixinxi.png')" :isMore="true" /> |
|||
<div class="information-main"> |
|||
<div class="table-title"> |
|||
<span>企业名称</span> |
|||
<span>企业资质</span> |
|||
<span>法定代表人</span> |
|||
<span>信用分数</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item,index) in informationList" :key="(item,index)"> |
|||
<span>{{ item.firmName }}</span> |
|||
<span>{{ item.firmCertification }}</span> |
|||
<span>{{ item.legalRepresentative }}</span> |
|||
<span>{{ item.creditScore }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
informationList: [{ |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}, { |
|||
firmName: "浙江省正邦水电建设有限公司", |
|||
firmCertification: "施工资质", |
|||
legalRepresentative: "吴长鑫", |
|||
creditScore: "123" |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.information-wrap { |
|||
height: 386px; |
|||
background: #FFFFFF !important; |
|||
border-radius: 8px; |
|||
padding: 20px !important; |
|||
|
|||
.information-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 54%; |
|||
// border: 1px solid red; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 18%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 14%; |
|||
margin-right: 4%; |
|||
// border: 1px solid olive; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(4) { |
|||
width: 10%; |
|||
// border: 1px solid palegreen; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 264px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 54%; |
|||
font-size: 16px; |
|||
color: #005EB7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 18%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 14%; |
|||
margin-right: 4%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(4) { |
|||
width: 10%; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<div class="enterprise-wrap"> |
|||
<headerImg :title="'人员基本信息'" :url="require('@/assets/image/icon_renyuanxinxi.png')" /> |
|||
<div class="enterprise-main"> |
|||
<div class="table-title"> |
|||
<span>姓名</span> |
|||
<span>企业名称</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item,index) in enterpriseList" :key="(item,index)"> |
|||
<span>{{ item.personneName }}</span> |
|||
<span>{{ item.firmName }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
enterpriseList: [{ |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}, { |
|||
personneName: "李瑞清", |
|||
firmName: "河南守正水务有限公司", |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.enterprise-wrap { |
|||
height: 355px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
border: 1px solid #ECECEC; |
|||
padding: 20px; |
|||
|
|||
.enterprise-header { |
|||
.header-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.title-img { |
|||
display: flex; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.header-line { |
|||
margin-top: 10px; |
|||
|
|||
.deep { |
|||
width: 160px; |
|||
height: 3px; |
|||
background: #005EB7; |
|||
} |
|||
|
|||
.shallow { |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.enterprise-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 30%; |
|||
// border: 1px solid red; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 70%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 220px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
color: #333333; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 30%; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 70%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,226 @@ |
|||
<template> |
|||
<div class="enterprise-wrap"> |
|||
<headerImg :title="'项目基本信息'" :url="require('@/assets/image/icon_xiangmuxinxi.png')" :isMore="true"/> |
|||
<div class="enterprise-main"> |
|||
<div class="table-title"> |
|||
<span>项目名称</span> |
|||
<span>投资规模(万元)</span> |
|||
<span>建设单位</span> |
|||
<span>计划开工时间</span> |
|||
<span>计划竣工时间</span> |
|||
</div> |
|||
<div class="table-list"> |
|||
<div class="table-item" v-for="(item,index) in enterpriseList" :key="(item,index)"> |
|||
<span>{{ item.proName }}</span> |
|||
<span>{{ item.investmentScale }}</span> |
|||
<span>{{ item.constructionUnit }}</span> |
|||
<span>{{ item.scheduledStart }}</span> |
|||
<span>{{ item.plannedCompletion }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
enterpriseList: [{ |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
}, { |
|||
proName: "引韩济饶供水工程", |
|||
investmentScale: "122500.0", |
|||
constructionUnit: "广东粤海水务股份有限公司", |
|||
scheduledStart: "2017-05-10", |
|||
plannedCompletion: "2017-05-10", |
|||
},] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.enterprise-wrap { |
|||
height: 378px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
|
|||
.enterprise-header { |
|||
.header-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.title-img { |
|||
display: flex; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.more-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #666666; |
|||
} |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.header-line { |
|||
margin-top: 10px; |
|||
|
|||
.deep { |
|||
width: 160px; |
|||
height: 3px; |
|||
background: #005EB7; |
|||
} |
|||
|
|||
.shallow { |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.enterprise-main { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 23%; |
|||
// border: 1px solid red; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 17%; |
|||
// border: 1px solid blue; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 28%; |
|||
// border: 1px solid lawngreen; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(4) { |
|||
width: 19%; |
|||
// border: 1px solid olive; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(5) { |
|||
width: 13%; |
|||
// border: 1px solid olive; |
|||
} |
|||
} |
|||
|
|||
.table-list { |
|||
margin-top: 10px; |
|||
height: 264px; |
|||
overflow: hidden; |
|||
|
|||
.table-item { |
|||
height: 44px; |
|||
line-height: 44px; |
|||
border-top: 1px solid #d8d6d6; |
|||
display: flex; |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 23%; |
|||
color: #005EB7; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
width: 17%; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 28%; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
span:nth-child(4) { |
|||
width: 19%; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
span:nth-child(5) { |
|||
width: 13%; |
|||
color: #333333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div class="project-wrap"> |
|||
<div class="project-header"> |
|||
<img src="@/assets/image/bg_title01.png" alt=""> |
|||
<span>项目信息</span> |
|||
</div> |
|||
<div class="project-main"> |
|||
<div class="main-left"> |
|||
<projectBasic /> |
|||
</div> |
|||
<div class="main-right"> |
|||
<projectSelect /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import projectBasic from "./projectBasic" |
|||
import projectSelect from "./projectSelect" |
|||
export default { |
|||
components: { |
|||
projectBasic, |
|||
projectSelect, |
|||
}, |
|||
data() { |
|||
return { |
|||
projectList: [{ |
|||
url: require("@/assets/image/img_zizhixinxi.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_xmyjxx.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_lhxwjl.png"), |
|||
name: "" |
|||
}, { |
|||
url: require("@/assets/image/img_rylhxwjl.png"), |
|||
name: "" |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.project-wrap { |
|||
padding-top: 85px; |
|||
.project-header { |
|||
position: relative; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
font-size: 36px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
position: absolute; |
|||
top: -15px; |
|||
left: 43.6%; |
|||
} |
|||
} |
|||
.project-main{ |
|||
margin-top: 35px; |
|||
display: flex; |
|||
.main-left{ |
|||
width: 880px; |
|||
margin-right: 20px; |
|||
} |
|||
.main-right{ |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<div class="select-wrap"> |
|||
<div class="select-information"> |
|||
<div class="information-item" v-for="(item,index) in informationList" :key="(item,index)"> |
|||
<img src="@/assets/image/bg_xiangmuxinxi.png" alt=""> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="select-project"> |
|||
<div class="project-item" v-for="(item,index) in projectList" :key="(item,index)"> |
|||
<img src="@/assets/image/icon_right.png" alt=""> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
informationList: [{ |
|||
name: "项目审批信息" |
|||
}, { |
|||
name: "项目核准信息" |
|||
}, { |
|||
name: "项目备案信息" |
|||
}, { |
|||
name: "重大设计变更信息" |
|||
},], |
|||
projectList: [{ |
|||
name: "施工管理" |
|||
}, { |
|||
name: "合同履约" |
|||
}, { |
|||
name: "资金管理" |
|||
}, { |
|||
name: "征地拆迁" |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.select-wrap { |
|||
height: 378px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
|
|||
.select-information { |
|||
.information-item { |
|||
position: relative; |
|||
margin-bottom: 10px; |
|||
cursor: pointer; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
position: absolute; |
|||
top: 15px; |
|||
left: 15px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.select-project { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.project-item { |
|||
width: 125px; |
|||
height: 48px; |
|||
background: #F6F6F6; |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<div class="ranking-wrap"> |
|||
<headerImg :title="'动态信用分数排名'" :url="require('@/assets/image/icon_dongtaixinyong.png')" /> |
|||
<div class="information-amount"> |
|||
<div class="amount-item" v-for="(item, index) in amountList" :key="(item, index)"> |
|||
<span>{{ item.total }}</span> |
|||
<span>{{ item.amountName }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="bar-graph"> |
|||
<div class="bar-title"> |
|||
<span></span> |
|||
<span>企业信用分数统计图</span> |
|||
<span></span> |
|||
</div> |
|||
<div class="bar-wrap"> |
|||
<div class="echart" id="mychart" :style="myChartStyle"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
amountList: [{ |
|||
total: "4975", |
|||
amountName: "从业单位(家)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "从业人员(人)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "信用信息发布(条)" |
|||
}, { |
|||
total: "4975", |
|||
amountName: "其他信息发布(条)" |
|||
}], |
|||
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 |
|||
yData: [23, 24, 18, 25, 27, 28, 25], //数据 |
|||
myChartStyle: { float: "left", width: "100%", height: "250px" } //图表样式 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initEcharts(); |
|||
}) |
|||
}, methods: { |
|||
initEcharts() { |
|||
// 基本柱状图 |
|||
const option = { |
|||
// position: 'top', |
|||
grid: { |
|||
top: '10%', |
|||
left: '8%', |
|||
right: '5%', |
|||
bottom: '8%' |
|||
}, |
|||
xAxis: { |
|||
data: this.xData, |
|||
axisTick: { |
|||
show: true, |
|||
alignWithLabel: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "bar", //形状为柱状图 |
|||
data: this.yData, |
|||
backgroundStyle: { |
|||
color: '#00FCFF' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。 |
|||
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置 |
|||
color: '#7C9CD6' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
const myChart = this.$echarts.init(document.getElementById("mychart")); |
|||
myChart.setOption(option); |
|||
//随着屏幕大小调节图表 |
|||
window.addEventListener("resize", () => { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.ranking-wrap { |
|||
padding: 20px 0 20px 20px; |
|||
|
|||
.information-amount { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
flex-wrap: wrap; |
|||
margin-right: 20px; |
|||
|
|||
.amount-item { |
|||
margin-top: 20px; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 29px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
text-align: center; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 15px; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bar-graph { |
|||
margin-top: 30px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 20px; |
|||
|
|||
span { |
|||
display: block; |
|||
} |
|||
|
|||
span:nth-child(1) { |
|||
width: 30px; |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
|
|||
span:nth-child(3) { |
|||
width: 30px; |
|||
height: 1px; |
|||
background: #DADCE3; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<div class="page"> |
|||
<!-- <div class="search">--> |
|||
<!-- <el-input--> |
|||
<!-- placeholder="输入关键字搜索"--> |
|||
<!-- v-model="keyword"--> |
|||
<!-- @keyup.enter.native="handleSearch('/search')"--> |
|||
<!-- >--> |
|||
<!-- <img--> |
|||
<!-- slot="suffix"--> |
|||
<!-- src="@/assets/image/icon-search.png"--> |
|||
<!-- @click="handleSearch('/search')"--> |
|||
<!-- />- --> |
|||
<!-- </el-input>--> |
|||
<!-- <div class="high-search" @click="handleSearch('/expertSearch')">--> |
|||
<!-- 高级检索--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
<div class="align-module"> |
|||
<div class="lt"> |
|||
<!-- <recommend></recommend>--> |
|||
<newrecommend></newrecommend> |
|||
<todayHot></todayHot> |
|||
<latestKonwledge></latestKonwledge> |
|||
</div> |
|||
<div class="rt"> |
|||
<participate></participate> |
|||
<statistics></statistics> |
|||
<analysis></analysis> |
|||
<ranking></ranking> |
|||
</div> |
|||
</div> |
|||
<div class="ct"> |
|||
<div class="lt"> |
|||
|
|||
<!-- <notice></notice>--> |
|||
</div> |
|||
<div class="rt"> |
|||
|
|||
</div> |
|||
</div> |
|||
<!-- <div>--> |
|||
<!-- <knowledgeScription></knowledgeScription>--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import todayHot from "./components/todayHot.vue"; //今日热点（最新动态） |
|||
import academician from "./components/academician.vue"; //院士库 |
|||
import analysis from "./components/analysis.vue"; //热点分析 |
|||
|
|||
import participate from "./components/participate.vue"; // 我要参与 |
|||
import latestKonwledge from "./components/latestKonwledge.vue"; //最新行业文库 |
|||
// import notice from "./components/notice.vue"; //通知公告 |
|||
import ranking from "./components/ranking.vue"; //贡献排行 |
|||
import recommend from "./components/recommend.vue"; //综合推荐 |
|||
import newrecommend from "./components/newrecommend.vue" //综合推荐 |
|||
import statistics from "./components/statistics.vue"; //知识统计 |
|||
// import knowledgeScription from "@/views/home/components/knowledgeScription"; |
|||
export default { |
|||
components: { |
|||
todayHot, |
|||
academician, |
|||
analysis, |
|||
latestKonwledge, |
|||
// notice, |
|||
ranking, |
|||
recommend, |
|||
statistics, |
|||
participate, |
|||
// knowledgeScription, |
|||
newrecommend |
|||
}, |
|||
data() { |
|||
return { |
|||
keyword: "", |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleSearch(path) { |
|||
this.$router.push({ |
|||
path: path, |
|||
query: { |
|||
keyword: this.keyword, |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.page { |
|||
& > .search { |
|||
margin: 30px auto; |
|||
width: 1100px; |
|||
display: flex; |
|||
align-items: center; |
|||
/deep/.el-input { |
|||
.el-input__inner { |
|||
background: #fafcff; |
|||
box-shadow: 0px 5px 71px 0px rgba(20, 20, 152, 0.19); |
|||
border-radius: 30px; |
|||
height: 60px; |
|||
line-height: 60px; |
|||
padding: 0 30px; |
|||
font-size: 16px; |
|||
} |
|||
.el-input__suffix { |
|||
line-height: 60px; |
|||
right: 30px; |
|||
img { |
|||
width: 24px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
& > .high-search { |
|||
cursor: pointer; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
margin-left: 20px; |
|||
color: #ffffff; |
|||
font-size: 16px; |
|||
} |
|||
& > .high-search::after { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 2px; |
|||
border-radius: 1px; |
|||
left: 0; |
|||
bottom: -4px; |
|||
background-color: #ffffff; |
|||
} |
|||
} |
|||
& > .align-module { |
|||
margin-bottom: 20px; |
|||
margin-top: 23px; |
|||
} |
|||
& > .ct, |
|||
& > .align-module { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
& > .lt { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
} |
|||
& > .rt { |
|||
margin-left: 20px; |
|||
flex-shrink: 0; |
|||
width: 402px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<div class="descriptions-table"> |
|||
<el-descriptions class="margin-top" :column="1" border :content-style="rowCenter" :label-style="labelRowCenter"> |
|||
<el-descriptions-item label="项目名称"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="投资规模（万元）"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="建设单位"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="项目概况"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="计划开工时间"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="计划竣工时间"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="工程地址"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="项目法人"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="项目法人主要人员"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="建设单位主要从业人员"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="设计单位"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="设计单位主要从业人员"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="施工单位"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="施工单位主要从业人员"> |
|||
kooriookami |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
rowCenter: { |
|||
'borderColor': '#DADCE3' |
|||
}, |
|||
labelRowCenter: { |
|||
'borderColor': '#DADCE3' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.descriptions-table { |
|||
/deep/.el-descriptions { |
|||
.el-descriptions-item__cell { |
|||
padding: 11px 10px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
background: #EBF4FE; |
|||
width: 220px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
padding-left: 21px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<div class="qualified-wrap"> |
|||
<headerImg :title="'项目建设管理公开信息'" :url="require('@/assets/image/icon_xmjsgl.png')" /> |
|||
<div class="select-project"> |
|||
<div class="project-item" v-for="(item, index) in projectList" :key="(item, index)"> |
|||
<img src="@/assets/image/icon_right.png" alt=""> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
projectList: [{ |
|||
name: "施工管理" |
|||
}, { |
|||
name: "合同履约" |
|||
}, { |
|||
name: "资金管理" |
|||
}, { |
|||
name: "征地拆迁" |
|||
}] |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.qualified-wrap { |
|||
height: 204px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
margin-bottom: 20px; |
|||
|
|||
.select-project { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.project-item { |
|||
width: 125px; |
|||
height: 48px; |
|||
background: #F6F6F6; |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
span { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<div class="qualified-wrap"> |
|||
<headerImg :title="'项目投资规模统计'" :url="require('@/assets/image/icon_xmtzgm.png')" /> |
|||
<div class="bar-wrap"> |
|||
<div class="echart" id="mychart" :style="myChartStyle"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 |
|||
yData: [23, 24, 18, 25, 27, 28, 25], //数据 |
|||
myChartStyle: { float: "left", width: "100%", height: "220px" } //图表样式 |
|||
} |
|||
},mounted() { |
|||
this.$nextTick(() => { |
|||
this.initEcharts(); |
|||
}) |
|||
}, methods: { |
|||
initEcharts() { |
|||
// 基本柱状图 |
|||
const option = { |
|||
// position: 'top', |
|||
grid: { |
|||
top: '10%', |
|||
left: '8%', |
|||
right: '5%', |
|||
bottom: '8%' |
|||
}, |
|||
xAxis: { |
|||
data: this.xData, |
|||
axisTick: { |
|||
show: true, |
|||
alignWithLabel: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#0091FF', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "bar", //形状为柱状图 |
|||
data: this.yData, |
|||
backgroundStyle: { |
|||
color: '#00FCFF' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。 |
|||
// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置 |
|||
color: '#7C9CD6' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
const myChart = this.$echarts.init(document.getElementById("mychart")); |
|||
myChart.setOption(option); |
|||
//随着屏幕大小调节图表 |
|||
window.addEventListener("resize", () => { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.qualified-wrap { |
|||
height: 288px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<div class="certification-page"> |
|||
<div class="certification-header"> |
|||
<div class="header-wrap"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> |
|||
<el-breadcrumb-item>项目信息</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
</div> |
|||
<div class="certification-tabs"> |
|||
<div class="tabs-wrap"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabcs"> |
|||
<el-tab-pane label="项目基本信息" name="first"></el-tab-pane> |
|||
<el-tab-pane label="项目审批信息" name="second"></el-tab-pane> |
|||
<el-tab-pane label="项目核准信息" name="third"></el-tab-pane> |
|||
<el-tab-pane label="项目备案信息" name="fourth"></el-tab-pane> |
|||
<el-tab-pane label="重大设计变更信息" name="fourth1"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="certification-main"> |
|||
<div class="main-wrap"> |
|||
<div class="list-wrap"> |
|||
<el-form :inline="true" label-width="80px" :model="queryForm"> |
|||
<el-form-item label="项目名称"> |
|||
<el-input class="name-inp-search" placeholder="请输入项目名称" v-model="queryForm.firmName"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="mini" icon="el-icon-search" @click="searchList()">查询</el-button> |
|||
<el-button type="mini" icon="el-icon-refresh" @click="resetForm()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="firmName" label="项目名称" width="300"> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #005EB7;cursor: pointer;font-size: 16px !important;" @click="toBasicDetail()">{{ |
|||
scope.row.firmName |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="certification" label="投资规模（万元）" width="180" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="area" label="建设单位" width="180" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="creditScore" label="发布时间" align="center"> |
|||
</el-table-column> |
|||
</el-table> |
|||
<pagination :total="total" :page.sync="apidata.pageNum" :limit.sync="apidata.pageSize" |
|||
:pageSizes="pageSizes" @pagination="getResult" /> |
|||
</div> |
|||
<div class="statistics-select"> |
|||
<scaleStatistics /> |
|||
<publicInformation /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import scaleStatistics from "./components/scaleStatistics" |
|||
import publicInformation from "./components/publicInformation" |
|||
export default { |
|||
components: { |
|||
scaleStatistics, |
|||
publicInformation, |
|||
}, |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
apidata: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
}, |
|||
pageSizes: [10, 20, 30, 50], |
|||
activeName: "first", |
|||
queryForm: { |
|||
firmName: "", |
|||
area: "" |
|||
}, |
|||
tableData: [{ |
|||
firmName: '广东润航建设集团有限公司', |
|||
certification: '施工资质', |
|||
area: '广州市', |
|||
creditScore: '132', |
|||
}, { |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1517 弄' |
|||
}, { |
|||
date: '2016-05-01', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1519 弄' |
|||
}, { |
|||
date: '2016-05-03', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1516 弄' |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
getResult() { |
|||
}, |
|||
handleClick(tab, event) { |
|||
// console.log(tab, event); |
|||
if (tab.name == "fourth1") { |
|||
this.resetActivePosition(this.$refs.tabcs.$el); |
|||
} |
|||
}, |
|||
resetActivePosition($el) { |
|||
this.$nextTick(() => { |
|||
const activeEl = $el.querySelector('.el-tabs__item.is-active'); |
|||
const lineEl = $el.querySelector('.el-tabs__active-bar'); |
|||
const style = getComputedStyle(activeEl); |
|||
const pl = style.paddingLeft.match(/\d+/)[0] * 1; |
|||
lineEl.style.transform = |
|||
'translateX(' + (activeEl.offsetLeft + 40) + 'px)'; |
|||
console.log(activeEl.offsetLeft, pl); |
|||
}); |
|||
}, |
|||
toBasicDetail(){ |
|||
this.$router.push({ |
|||
path:"/projectBasicDetail" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.certification-page { |
|||
.certification-header { |
|||
height: 40px; |
|||
background: #EBF4FE; |
|||
|
|||
.header-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-breadcrumb { |
|||
margin-top: 10px; |
|||
|
|||
.el-breadcrumb__item { |
|||
.el-breadcrumb__inner { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
|
|||
.el-breadcrumb__separator { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-tabs { |
|||
height: 60px; |
|||
background: #FFFFFF; |
|||
border: 1px solid transparent; |
|||
|
|||
.tabs-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-tabs { |
|||
margin-top: 11px; |
|||
|
|||
.el-tabs__nav-wrap::after { |
|||
background: #Fff; |
|||
} |
|||
|
|||
.el-tabs__item { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
height: 48px; |
|||
} |
|||
|
|||
.el-tabs__item.is-active { |
|||
color: #005EB7; |
|||
} |
|||
|
|||
.el-tabs__active-bar { |
|||
width: 0 !important; |
|||
height: 0; |
|||
border: 10px solid transparent; |
|||
border-bottom: 10px solid #005EB7; |
|||
background: none; |
|||
left: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.certification-main { |
|||
background: linear-gradient(180deg, #005EB7 0%, #EDF7FF 60% #EDF7FF 100%); |
|||
padding: 20px 0; |
|||
|
|||
.main-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
.list-wrap { |
|||
width: 880px; |
|||
height: 1098px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
margin-right: 20px; |
|||
|
|||
/deep/.el-form { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.el-form-item__label { |
|||
font-size: 16px; |
|||
color: #333333; |
|||
} |
|||
|
|||
.el-input__inner { |
|||
width: 300px; |
|||
border-radius: 8px; |
|||
border: 1px solid #AAD8FB; |
|||
} |
|||
|
|||
.el-button { |
|||
padding: 13px 15px; |
|||
background: linear-gradient(180deg, #005BA6 0%, #0059A5 100%); |
|||
border-radius: 8px; |
|||
color: #FFFFFF; |
|||
|
|||
span { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
i { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.el-button:nth-child(1) { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.el-button:nth-child(2) { |
|||
background: #fff; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-table { |
|||
.el-table__header-wrapper { |
|||
height: 44px; |
|||
} |
|||
|
|||
th { |
|||
background: #EBF4FE; |
|||
|
|||
.cell { |
|||
font-size: 16px !important; |
|||
font-weight: 600 !important; |
|||
color: #005EB7; |
|||
} |
|||
} |
|||
|
|||
tr { |
|||
background-color: #fff !important; |
|||
|
|||
.cell { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.statistics-select { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<div class="basic-detail"> |
|||
<div class="basic-header"> |
|||
<div class="header-wrap"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> |
|||
<el-breadcrumb-item>项目信息</el-breadcrumb-item> |
|||
<el-breadcrumb-item>项目基本信息</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
</div> |
|||
<div class="basic-tabs"> |
|||
<div class="tabs-wrap"> |
|||
<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabcs"> |
|||
<el-tab-pane label="审批信息" name="first"></el-tab-pane> |
|||
<el-tab-pane label="建设信息" name="second"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
<div class="basic-main"> |
|||
<div class="main-wrap"> |
|||
<el-tabs type="border-card"> |
|||
<el-tab-pane label="项目基本信息"></el-tab-pane> |
|||
<el-tab-pane label="招标投标信息"></el-tab-pane> |
|||
<el-tab-pane label="征地信息"></el-tab-pane> |
|||
<el-tab-pane label="拆迁信息"></el-tab-pane> |
|||
<el-tab-pane label="已支付拆迁补偿信息"></el-tab-pane> |
|||
<el-tab-pane label="重大设计变更信息"></el-tab-pane> |
|||
<el-tab-pane label="施工管理信息"></el-tab-pane> |
|||
<el-tab-pane label="合同履约信息"></el-tab-pane> |
|||
<el-tab-pane label="质量检测资质"></el-tab-pane> |
|||
<el-tab-pane label="资金管理"></el-tab-pane> |
|||
<el-tab-pane label="竣工验收"></el-tab-pane> |
|||
</el-tabs> |
|||
<div class="descriptions-wrap"> |
|||
<descriptionsTable /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import descriptionsTable from "./components/descriptionsTable" |
|||
export default { |
|||
components: { |
|||
descriptionsTable |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "first", |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClick(tab, event) { |
|||
// console.log(tab, event); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.basic-detail { |
|||
.basic-header { |
|||
height: 40px; |
|||
background: #EBF4FE; |
|||
|
|||
.header-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-breadcrumb { |
|||
margin-top: 10px; |
|||
|
|||
.el-breadcrumb__item { |
|||
.el-breadcrumb__inner { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
|
|||
.el-breadcrumb__separator { |
|||
font-size: 16px; |
|||
color: #005EB7 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.basic-tabs { |
|||
height: 60px; |
|||
background: #FFFFFF; |
|||
border: 1px solid transparent; |
|||
|
|||
.tabs-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-tabs { |
|||
margin-top: 11px; |
|||
|
|||
.el-tabs__nav-wrap::after { |
|||
background: #Fff; |
|||
} |
|||
|
|||
.el-tabs__item { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
height: 48px; |
|||
} |
|||
|
|||
.el-tabs__item.is-active { |
|||
color: #005EB7; |
|||
} |
|||
|
|||
.el-tabs__active-bar { |
|||
width: 0 !important; |
|||
height: 0; |
|||
border: 10px solid transparent; |
|||
border-bottom: 10px solid #005EB7; |
|||
background: none; |
|||
left: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.basic-main { |
|||
background: linear-gradient(180deg, #005EB7 0%, #EDF7FF 60% #EDF7FF 100%); |
|||
padding: 20px 0; |
|||
|
|||
.main-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
height: 766px; |
|||
background: #FFFFFF; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
|
|||
/deep/.el-tabs { |
|||
.el-tabs__header { |
|||
border-bottom-color: #C8DFF8; |
|||
} |
|||
|
|||
.el-tabs__nav-wrap { |
|||
height: 50px; |
|||
padding-left: 5px; |
|||
|
|||
.el-tabs__item { |
|||
height: 45px; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
margin-top: 5px; |
|||
margin-left: 1px; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
margin-right: 18px; |
|||
} |
|||
} |
|||
|
|||
.el-tabs__item.is-active { |
|||
padding-left: 15px; |
|||
padding-right: 15px; |
|||
color: #005EB7; |
|||
border-right-color: #C8DFF8; |
|||
border-left-color: #C8DFF8; |
|||
border-top-color: #C8DFF8; |
|||
border-radius: 8px 8px 0px 0px; |
|||
} |
|||
|
|||
.el-tabs__content { |
|||
padding: 0px; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-tabs--border-card { |
|||
border: none; |
|||
box-shadow:none; |
|||
} |
|||
.descriptions-wrap{ |
|||
padding: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue