|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 820 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 27 KiB |
@ -0,0 +1,389 @@
|
||||
<!-- 人员背景审查处置详情 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 详情查询 -->
|
||||
<div class="item_search">
|
||||
<div class="isearch">
|
||||
<el-input
|
||||
class="search_input"
|
||||
placeholder="输入企业名称"
|
||||
v-model="search_company"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
<el-button @click="search" icon="el-icon-search"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_body">
|
||||
<!-- 详情单元 -->
|
||||
<div v-for="item in item_data" :key="item.id" class="item_cell">
|
||||
<!-- 异常展示 -->
|
||||
<div v-if="item.is_right === '1'" class="abnormal_cell_body">
|
||||
<!-- 厂家名称 -->
|
||||
<div class="cell_body_title">{{ item.company_name }}</div>
|
||||
<div class="cell_body_information">
|
||||
<div class="cell_body_information_text">
|
||||
<div class="text_cell">审查原因:</div>
|
||||
<div class="text_cell">审查人数:</div>
|
||||
<div class="text_cell">申请时间:</div>
|
||||
<div class="text_cell">审查结果:</div>
|
||||
</div>
|
||||
<div class="cell_body_information_value">
|
||||
<div class="value_cell">{{ item.reason }}</div>
|
||||
<div class="value_cell">{{ item.people }}</div>
|
||||
<div class="value_cell">{{ item.time }}</div>
|
||||
<div class="value_cell">{{ item.end }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情按钮 -->
|
||||
<div class="cell_body_information_btn">
|
||||
<div class="item_btn" @click="check_item">详情</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 正常展示 -->
|
||||
<div v-else class="normal_cell_body">
|
||||
<div class="cell_body_title">{{ item.company_name }}</div>
|
||||
<div class="cell_body_information">
|
||||
<div class="cell_body_information_text">
|
||||
<div class="text_cell">审查原因:</div>
|
||||
<div class="text_cell">审查人数:</div>
|
||||
<div class="text_cell">申请时间:</div>
|
||||
<div class="text_cell">审查结果:</div>
|
||||
</div>
|
||||
<div class="cell_body_information_value">
|
||||
<div class="value_cell">{{ item.reason }}</div>
|
||||
<div class="value_cell">{{ item.people }}</div>
|
||||
<div class="value_cell">{{ item.time }}</div>
|
||||
<div class="value_cell">{{ item.end }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情按钮 -->
|
||||
<div class="cell_body_information_btn">
|
||||
<div class="item_btn" @click="check_item">详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_pagination">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[6]"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNum"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonBack",
|
||||
data() {
|
||||
return {
|
||||
search_company: "",
|
||||
item_data: [
|
||||
{
|
||||
id: "1",
|
||||
is_right: "1",
|
||||
company_name: "宁波安捷化工有限公司",
|
||||
reason: "新入职员工人员背景审查",
|
||||
people: "16人",
|
||||
time: "2022-12-12 12:12:12",
|
||||
end: "14人正常, 1人异常",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
is_right: "2",
|
||||
company_name: "宁波安捷化工有限公司",
|
||||
reason: "新入职员工人员背景审查",
|
||||
people: "16人",
|
||||
time: "2022-12-12 12:12:12",
|
||||
end: "14人正常, 0人异常",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
is_right: "2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
is_right: "2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
is_right: "2",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
is_right: "2",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
is_right: "1",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
is_right: "2",
|
||||
},
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search() {},
|
||||
// 点击查看详情
|
||||
check_item() {
|
||||
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.item_search {
|
||||
width: 94vw;
|
||||
height: 5vh;
|
||||
.isearch {
|
||||
display: flex;
|
||||
width: 18vw;
|
||||
margin-left: 1.5vw;
|
||||
.el-button {
|
||||
font-size: 17px;
|
||||
height: 4vh;
|
||||
border-radius: 0px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid #28847e;
|
||||
}
|
||||
.el-button:hover {
|
||||
background: #4d8f89;
|
||||
}
|
||||
/deep/.search_input.el-input {
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
border: 0.1px solid #28847e;
|
||||
border-radius: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 16vw;
|
||||
height: 4vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item_body {
|
||||
width: 94vw;
|
||||
height: 60vh;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item_cell {
|
||||
width: 22.2vw;
|
||||
height: 28vh;
|
||||
margin-left: 1vw;
|
||||
// border: 0.1px solid #3f5564;
|
||||
.abnormal_cell_body {
|
||||
width: 22.2vw;
|
||||
height: 28vh;
|
||||
background: url("~@/assets/companyFile/abnormalback.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.cell_body_title {
|
||||
width: 22.2vw;
|
||||
height: 4vh;
|
||||
// border: 0.1px solid #fff;
|
||||
color: #fff;
|
||||
padding-left: 20px;
|
||||
line-height: 4vh;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cell_body_information {
|
||||
margin-top: 1vh;
|
||||
width: 22.2vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
display: flex;
|
||||
.cell_body_information_text {
|
||||
width: 5vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
.text_cell {
|
||||
width: 5vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #fff;
|
||||
line-height: 5vh;
|
||||
color: #d0deee;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.cell_body_information_value {
|
||||
width: 17vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
.value_cell {
|
||||
width: 17vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #fff;
|
||||
line-height: 5vh;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cell_body_information_btn {
|
||||
width: 22.2vw;
|
||||
height: 3vh;
|
||||
// border: 0.1px solid #fff;
|
||||
position: relative;
|
||||
.item_btn {
|
||||
color: #ff6565;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item_btn:focus,
|
||||
.item_btn:hover {
|
||||
text-shadow: 0 0 9px #ff8b4e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.normal_cell_body {
|
||||
width: 22.2vw;
|
||||
height: 28vh;
|
||||
background: url("~@/assets/companyFile/normalback.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.cell_body_title {
|
||||
width: 22.2vw;
|
||||
height: 4vh;
|
||||
// border: 0.1px solid #fff;
|
||||
color: #fff;
|
||||
padding-left: 20px;
|
||||
line-height: 4vh;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cell_body_information {
|
||||
margin-top: 1vh;
|
||||
width: 22.2vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
display: flex;
|
||||
.cell_body_information_text {
|
||||
width: 5vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
.text_cell {
|
||||
width: 5vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #fff;
|
||||
line-height: 5vh;
|
||||
color: #d0deee;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.cell_body_information_value {
|
||||
width: 17vw;
|
||||
height: 20vh;
|
||||
// border: 0.1px solid #fff;
|
||||
.value_cell {
|
||||
width: 17vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #fff;
|
||||
line-height: 5vh;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cell_body_information_btn {
|
||||
width: 22.2vw;
|
||||
height: 3vh;
|
||||
// border: 0.1px solid #fff;
|
||||
position: relative;
|
||||
.item_btn {
|
||||
color: #30C4FF;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item_btn:focus,
|
||||
.item_btn:hover {
|
||||
text-shadow: 0 0 9px #30C4FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item_pagination {
|
||||
width: 94vw;
|
||||
height: 6vh;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
// border: 0.1px solid #2f6363;
|
||||
// background: #3c4b4a;
|
||||
/deep/.el-pagination {
|
||||
margin-top: 1vh;
|
||||
margin-right: 1vw;
|
||||
.el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
/* 显示多少条/页和在哪页的input样式 */
|
||||
.el-input__inner {
|
||||
border-radius: 4px;
|
||||
border: 2px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-prev {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn-next {
|
||||
border: 0.1px solid #28847e;
|
||||
border-radius: 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.el-pager {
|
||||
li {
|
||||
border: 0.1px solid #28847e;
|
||||
background: #3c4b4a !important;
|
||||
}
|
||||
}
|
||||
.el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
border: 0.1px solid #76eae4;
|
||||
}
|
||||
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,672 @@
|
||||
<!-- 应用超市 -->
|
||||
<template>
|
||||
<div class="supermarket_body">
|
||||
<div class="supermarket_title">
|
||||
<div class="supermarket_title_01" @click="back_list">应用超市</div>
|
||||
<div v-if="is_flag != '0'" class="supermarket_title_02">>>处置详情</div>
|
||||
</div>
|
||||
<div class="supermarket_list">
|
||||
<div v-if="is_flag === '0'" class="list_boxs">
|
||||
<!-- 人员背景审查 -->
|
||||
<div class="list_box person_back" @click="person_back_change">
|
||||
<div class="person_back_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="green_mark turn"></div>
|
||||
<div class="person_back_icon"></div>
|
||||
</div>
|
||||
<div class="person_back_text">人员背景审查</div>
|
||||
</div>
|
||||
<!-- 重点人员核查 -->
|
||||
<div class="list_box key_person">
|
||||
<div class="key_person_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="green_mark turn"></div>
|
||||
<div class="key_person_icon"></div>
|
||||
</div>
|
||||
<div class="key_person_text">重点人员核查</div>
|
||||
</div>
|
||||
<!-- 重点物品核查 -->
|
||||
<div class="list_box key_item">
|
||||
<div class="key_item_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="blue_mark turn"></div>
|
||||
<div class="key_item_icon"></div>
|
||||
</div>
|
||||
<div class="key_item_text">重点物品核查</div>
|
||||
</div>
|
||||
<!-- 企业纠纷调解 -->
|
||||
<div class="list_box company_dispute">
|
||||
<div class="company_dispute_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="blue_mark turn"></div>
|
||||
<div class="company_dispute_icon"></div>
|
||||
</div>
|
||||
<div class="company_dispute_text">企业纠纷调解</div>
|
||||
</div>
|
||||
<!-- 企业通知公告 -->
|
||||
<div class="list_box company_notification">
|
||||
<div class="company_notification_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="yellow_mark turn"></div>
|
||||
<div class="company_notification_icon"></div>
|
||||
</div>
|
||||
<div class="company_notification_text">企业通知公告</div>
|
||||
</div>
|
||||
<!-- 专家智库 -->
|
||||
<div class="list_box expert_library">
|
||||
<div class="expert_library_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="yellow_mark turn"></div>
|
||||
<div class="expert_library_icon"></div>
|
||||
</div>
|
||||
<div class="expert_library_text">专家智库</div>
|
||||
</div>
|
||||
<!-- 企业法律法规 -->
|
||||
<div class="list_box law_regulations">
|
||||
<div class="law_regulations_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="green_mark turn"></div>
|
||||
<div class="law_regulations_icon"></div>
|
||||
</div>
|
||||
<div class="law_regulations_text">企业法律法规</div>
|
||||
</div>
|
||||
<!-- 行业协会 -->
|
||||
<div class="list_box association">
|
||||
<div class="association_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="green_mark turn"></div>
|
||||
<div class="association_icon"></div>
|
||||
</div>
|
||||
<div class="association_text">行业协会</div>
|
||||
</div>
|
||||
<!-- 统计报表 -->
|
||||
<div class="list_box statement">
|
||||
<div class="statement_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="blue_mark turn"></div>
|
||||
<div class="statement_icon"></div>
|
||||
</div>
|
||||
<div class="statement_text">统计报表</div>
|
||||
</div>
|
||||
<!-- 经侦最佳指标 -->
|
||||
<div class="list_box target">
|
||||
<div class="target_icon_box">
|
||||
<!-- 遮罩层 负责旋转动画 -->
|
||||
<div class="blue_mark turn"></div>
|
||||
<div class="target_icon"></div>
|
||||
</div>
|
||||
<div class="target_text">经侦最佳指标</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 跳转至人员背景审查详情 -->
|
||||
<div v-else-if="is_flag === '1'" class="person_back_boxs">
|
||||
<PersonBack ref="personBack"></PersonBack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PersonBack from './components/personBack'
|
||||
export default {
|
||||
name: "ApplySupermarket",
|
||||
components:{
|
||||
PersonBack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
is_flag: "0",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 回归到应用超市首页
|
||||
back_list() {
|
||||
this.is_flag = '0'
|
||||
},
|
||||
person_back_change() {
|
||||
this.is_flag = "1";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.supermarket_body {
|
||||
border: 0px;
|
||||
width: 98vw;
|
||||
height: 89vh;
|
||||
margin-top: 2vh;
|
||||
margin-left: 1vw;
|
||||
padding-top: 2vh;
|
||||
// position: relative;
|
||||
background: url("~@/assets/companyFile/background1.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.supermarket_title {
|
||||
width: 96vw;
|
||||
height: 3vh;
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
.supermarket_title_01 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.supermarket_list {
|
||||
width: 96vw;
|
||||
height: 80vh;
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
padding-top: 4vh;
|
||||
background: url("~@/assets/companyFile/background2.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.list_boxs {
|
||||
width: 94vw;
|
||||
height: 74vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// border: 0.1px solid #fff;
|
||||
margin: 0 auto;
|
||||
.list_box {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border: 0.1px solid #3f5564;
|
||||
margin-left: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list_box:focus,
|
||||
.list_box:hover {
|
||||
/* 导航选项点击触碰效果 */
|
||||
filter: brightness(150%);
|
||||
/* 遮罩层 旋转动画 */
|
||||
}
|
||||
/*人员背景审查样式*/
|
||||
.person_back {
|
||||
background: url("~@/assets/companyFile/background3.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.person_back_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.person_back_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.person_back_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.person_back:focus,
|
||||
.person_back:hover {
|
||||
.green_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*重点人员核查样式*/
|
||||
.key_person {
|
||||
background: url("~@/assets/companyFile/background3.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.key_person_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.key_person_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.key_person_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.key_person:focus,
|
||||
.key_person:hover {
|
||||
.green_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*重点物品核查样式*/
|
||||
.key_item {
|
||||
background: url("~@/assets/companyFile/background4.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.key_item_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.key_item_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon03.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.key_item_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.key_item:focus,
|
||||
.key_item:hover {
|
||||
.blue_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*重点物品核查样式*/
|
||||
.company_dispute {
|
||||
background: url("~@/assets/companyFile/background4.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.company_dispute_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.company_dispute_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon04.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.company_dispute_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.company_dispute:focus,
|
||||
.company_dispute:hover {
|
||||
.blue_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*企业通知公告样式*/
|
||||
.company_notification {
|
||||
background: url("~@/assets/companyFile/background5.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.company_notification_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.company_notification_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon05.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.company_notification_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback03.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.company_notification:focus,
|
||||
.company_notification:hover {
|
||||
.yellow_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn03.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*专家智库样式*/
|
||||
.expert_library {
|
||||
background: url("~@/assets/companyFile/background5.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.expert_library_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.expert_library_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon06.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.expert_library_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback03.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.expert_library:focus,
|
||||
.expert_library:hover {
|
||||
.yellow_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn03.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*法律法规样式*/
|
||||
.law_regulations {
|
||||
background: url("~@/assets/companyFile/background3.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.law_regulations_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.law_regulations_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon07.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.law_regulations_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.law_regulations:focus,
|
||||
.law_regulations:hover {
|
||||
.green_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*行业协会样式*/
|
||||
.association {
|
||||
background: url("~@/assets/companyFile/background3.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.association_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.association_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon08.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.association_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.association:focus,
|
||||
.association:hover {
|
||||
.green_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*统计报表样式*/
|
||||
.statement {
|
||||
background: url("~@/assets/companyFile/background4.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.statement_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.statement_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon09.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.statement_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.statement:focus,
|
||||
.statement:hover {
|
||||
.blue_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
/*经侦最佳指标样式*/
|
||||
.target {
|
||||
background: url("~@/assets/companyFile/background4.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.target_icon_box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 0.1px solid rgba(0, 0, 0, 0);
|
||||
// border: 0.1px solid #3f5564;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
/* 遮罩层 旋转动画 */
|
||||
.target_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px auto;
|
||||
background: url("~@/assets/companyFile/icon10.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.target_text {
|
||||
width: 240px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 19px;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/btnback02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.target:focus,
|
||||
.target:hover {
|
||||
.blue_mark {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
background: url("~@/assets/companyFile/turn02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.person_back_boxs {
|
||||
width: 94vw;
|
||||
height: 74vh;
|
||||
// border: 0.1px solid #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 旋转动画
|
||||
@keyframes turn {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: rotate(-72deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate(-144deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate(-216deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(-288deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
.turn {
|
||||
animation: turn 10s linear infinite;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue