@@ -5,6 +5,16 @@ | |||
*/ | |||
export default [ | |||
// 我的企业 | |||
{ | |||
path: "/my-business", | |||
name: "MyBusiness", | |||
component: () => | |||
import ("../../views/my-related/business/Business.vue"), | |||
meta: { | |||
title: "我的企业", | |||
}, | |||
}, | |||
// 我的消息 | |||
{ | |||
path: "/my-message", |
@@ -0,0 +1,244 @@ | |||
.business[data-1664518006392] { | |||
background: #f9f9f9; | |||
.business-header { | |||
height: 210px; | |||
background: url("~@/assets/image/myRelated/headerBgc.png") no-repeat; | |||
background-size: 100% 100%; | |||
&.is-claimed { | |||
height: 500px; | |||
background: url("~@/assets/image/myRelated/businessClaimedBac.png") | |||
no-repeat; | |||
} | |||
.header-container { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
.company-name { | |||
line-height: 110px; | |||
.company-span { | |||
@include font(24px, #fff); | |||
font-weight: bold; | |||
} | |||
.company-btn { | |||
@include font(16px, #fff); | |||
.btn-span { | |||
font-size: 16px; | |||
text-decoration: underline; | |||
margin-right: 10px; | |||
cursor: pointer; | |||
} | |||
img { | |||
position: relative; | |||
top: 1px; | |||
} | |||
} | |||
} | |||
.comany-info-box { | |||
height: 260px; | |||
background: #fff; | |||
box-sizing: border-box; | |||
padding: 30px; | |||
.main-img-box { | |||
width: 200px; | |||
height: 200px; | |||
margin-right: 20px; | |||
background: green; | |||
} | |||
.main-info { | |||
width: calc(100% - 220px); | |||
height: 200px; | |||
.main-title-box { | |||
height: 30px; | |||
line-height: 30px; | |||
.main-title { | |||
width: calc(100% - 120px); | |||
@include text-ellipsis(); | |||
@include font(24px, #334a5f); | |||
} | |||
.main-icon { | |||
width: 100px; | |||
height: 30px; | |||
background-image: linear-gradient( | |||
135deg, | |||
#8592a2 0%, | |||
#728398 100% | |||
); | |||
@include font(16px, #fff); | |||
border-radius: 15px; | |||
text-align: center; | |||
img { | |||
position: relative; | |||
top: 1px; | |||
} | |||
} | |||
} | |||
.main-tag-box { | |||
height: 20px; | |||
margin-top: 20px; | |||
overflow: hidden; | |||
.tag-span { | |||
box-sizing: border-box; | |||
height: 20px; | |||
padding: 0 8px; | |||
border-style: solid; | |||
border-width: 1px; | |||
border-image-source: linear-gradient( | |||
135deg, | |||
#01d8ba 0%, | |||
#0086e7 100% | |||
); | |||
border-image-slice: 1; | |||
@include font(14px, #0086e7); | |||
margin-right: 10px; | |||
} | |||
} | |||
.main-other-info { | |||
height: 100px; | |||
background-color: #daeaf6; | |||
margin-top: 30px; | |||
box-sizing: border-box; | |||
padding-left: 20px; | |||
padding-top: 20px; | |||
.info-col { | |||
height: 30px; | |||
line-height: 30px; | |||
margin-bottom: 5px; | |||
@include font(14px, #637485); | |||
.value-span { | |||
color: #334a5f; | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.body-container { | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
.my-message-box { | |||
background: linear-gradient(to bottom, #cde8fb, #fff); | |||
color: #334a5f; | |||
box-sizing: border-box; | |||
padding: 28px 30px; | |||
.title { | |||
height: 40px; | |||
line-height: 43px; | |||
border-bottom: 1px solid #bcd8e9; | |||
.title-span { | |||
font-size: 18px; | |||
font-weight: bold; | |||
} | |||
.num-msg { | |||
font-size: 16px; | |||
} | |||
.more-icon { | |||
margin-top: 8px; | |||
cursor: pointer; | |||
} | |||
} | |||
.msg-list { | |||
@include font(16px, #637485); | |||
margin-top: 10px; | |||
.msg-list-item { | |||
line-height: 35px; | |||
height: 35px; | |||
cursor: pointer; | |||
.icon { | |||
width: 15px; | |||
height: 15px; | |||
border-radius: 50%; | |||
// background: red; | |||
box-sizing: border-box; | |||
border: 2px solid #0070d2; | |||
margin-right: 5px; | |||
margin-top: 10px; | |||
} | |||
.msg-text { | |||
width: calc(100% - 175px); | |||
@include text-ellipsis(); | |||
} | |||
.msg-time { | |||
width: 145px; | |||
text-align: right; | |||
} | |||
} | |||
} | |||
} | |||
.tax-query-box { | |||
margin: 30px 0; | |||
background: #fff; | |||
.tax-content { | |||
margin-top: 20px; | |||
.tax-btn { | |||
text-align: center; | |||
} | |||
.tax-info { | |||
text-align: center; | |||
@include font(14px, #999); | |||
margin-top: 5px; | |||
} | |||
.tax-content-title { | |||
height: 50px; | |||
margin: 28px 0 22px 0; | |||
.tax-item { | |||
box-sizing: border-box; | |||
border-right: 1px solid #bcd8e9; | |||
padding-right: 40px; | |||
padding-left: 30px; | |||
&:last-child { | |||
border-right: 0; | |||
} | |||
&:first-child { | |||
padding-left: 0; | |||
} | |||
.tax-info-box { | |||
.tax-icon-box { | |||
width: 56px; | |||
height: 50px; | |||
box-sizing: border-box; | |||
padding-top: 3px; | |||
} | |||
.tax-right-content { | |||
width: calc(100% - 56px); | |||
height: 50px; | |||
.tax-right-title { | |||
@include font(16px, #637485); | |||
@include text-ellipsis(); | |||
} | |||
.tax-right-value { | |||
@include font(16px, #334a5f); | |||
@include text-ellipsis(); | |||
font-weight: bold; | |||
margin-top: 5px; | |||
line-height: 25px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
$tableBoderColor: #bcd8e9; | |||
.tax-tabel { | |||
width: 100%; | |||
$tableBoderColor: #bcd8e9; | |||
border-color: $tableBoderColor; | |||
&::before { | |||
background-color: $tableBoderColor; | |||
} | |||
&::after { | |||
background-color: $tableBoderColor; | |||
} | |||
th, | |||
td { | |||
border-color: $tableBoderColor; | |||
@include font(16px, #334a5f); | |||
box-sizing: border-box; | |||
padding-left: 15px; | |||
font-weight: normal; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} |
@@ -0,0 +1,261 @@ | |||
<template> | |||
<div class="business" data-1664518006392> | |||
<div class="business-header" :class="{'is-claimed':isClaimed}"> | |||
<Nav /> | |||
<div class="header-container"> | |||
<div class="company-name"> | |||
<span class="company-span">公司名称:{{ getCompanyName() }}</span> | |||
<!-- 已认领,未入驻园区 --> | |||
<div class="company-btn fr" v-if="isClaimed && !isSettleParl"> | |||
我是企业,<span class="btn-span">我要入驻园区</span> | |||
<img src="~@assets/image/myRelated/companyBtnIcon.png" alt="icon"></img> | |||
</div> | |||
<!-- 未认领 --> | |||
<div class="company-btn fr" v-if="!isClaimed"> | |||
<span class="btn-span">认领企业</span> | |||
<img src="~@assets/image/myRelated/companyBtnIcon.png" alt="icon"> | |||
</div> | |||
</div> | |||
<div class="comany-info-box" v-if="isClaimed"> | |||
<div class="main-img-box fl"> | |||
主图 | |||
</div> | |||
<div class="main-info fl"> | |||
<div class="main-title-box"> | |||
<div class="main-title fl"> | |||
上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司 | |||
</div> | |||
<div class="main-icon fl"> | |||
<img src="~@assets/image/myRelated/isClaimedIcon.png" alt=""> | |||
已认领 | |||
</div> | |||
</div> | |||
<div class="main-tag-box"> | |||
<span v-for="(tag,inx) of comanyTags" :key="inx" class="tag-span fl"> | |||
{{ tag }} | |||
</span> | |||
</div> | |||
<div class="main-other-info"> | |||
<el-row :gutter="20"> | |||
<el-col :span="info.span" v-for="(info,inx) of mainOtherInfo" :key="inx" class="info-col"> | |||
<span class="label-span">{{ info.label }}:</span> | |||
<span class="value-span">{{ info.value }}</span> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="body-container"> | |||
<div class="my-message-box"> | |||
<div class="title"> | |||
<span class="title-span">我的消息</span> | |||
<span class="num-msg">(您有4条未读通知)</span> | |||
<img class="more-icon fr" src="~@assets/image/index/icon_more.png" alt="more" /> | |||
</div> | |||
<div class="msg-list"> | |||
<div class="msg-list-item" v-for="(item,inx) of myMsgList" :key="inx"> | |||
<div class="icon fl"></div> | |||
<div class="msg-text fl">{{ item.msg }}</div> | |||
<div class="msg-time fr">{{ item.time }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="tax-query-box my-message-box"> | |||
<div class="title"> | |||
<span class="title-span">税收查询</span> | |||
<img class="more-icon fr" src="~@assets/image/index/icon_more.png" alt="more" /> | |||
</div> | |||
<!-- 没授权 --> | |||
<div class="tax-content" v-if="!isAuthorize"> | |||
<div class="tax-btn"> | |||
<el-button type="primary">企业授权</el-button> | |||
</div> | |||
<div class="tax-info"> | |||
企业授权后即可进行税收查询 | |||
</div> | |||
</div> | |||
<!-- 已授权 --> | |||
<div class="tax-content" v-else> | |||
<div class="tax-content-title"> | |||
<div class="fl tax-item" v-for="(item,inx) of taxComanyInfo" :key="inx" :style="{'width': item.width + '%'}"> | |||
<div class="tax-info-box"> | |||
<div class="fl tax-icon-box"> | |||
<img :src="require('@assets/image/myRelated/' + item.icon + '.png')" alt="icon"> | |||
</div> | |||
<div class="fl tax-right-content"> | |||
<div class="tax-right-title" :title="item.label">{{ item.label }}</div> | |||
<div class="tax-right-value" :title="item.value">{{ item.value }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<el-table class="tax-tabel" :border="true" :data="taxTableData"> | |||
<el-table-column prop="v1" label="申报类型" /> | |||
<el-table-column prop="v2" label="申报日期" /> | |||
<el-table-column prop="v3" label="开始日期" /> | |||
<el-table-column prop="v4" label="结束日期" /> | |||
<el-table-column prop="v5" label="金额" /> | |||
</el-table> | |||
</div> | |||
</div> | |||
</div> | |||
<Footer /> | |||
</div> | |||
</template> | |||
<script> | |||
import "./Business.scss"; | |||
import Nav from "@components/Header.vue"; | |||
import Footer from "@components/Footer.vue"; | |||
export default { | |||
components: { Nav, Footer }, | |||
data() { | |||
return { | |||
// 是否认领企业 | |||
isClaimed: true, | |||
// 是否入驻园区 | |||
isSettleParl: false, | |||
// 公司标签 | |||
comanyTags:["科技型中小企业1","科技型中小企业2","科技型中小企业3","科技型中小企业4","科技型中小企业5","科技型中小企业科技型中小企业科技型中小企业科技型中小企业科技型中小企业6","科技型中小企业7","科技型中小企业","科技型中小企业科技型中小企业",], | |||
// 公司信息 | |||
mainOtherInfo:[ | |||
{ | |||
label:"法人代表", | |||
value:"李瑾", | |||
span:7 | |||
}, | |||
{ | |||
label:"统一社会信用代码", | |||
value:"91310115MA1H71QG17", | |||
span:10 | |||
}, | |||
{ | |||
label:"电话", | |||
value:"021-64643026", | |||
span:7 | |||
}, | |||
{ | |||
label:"网站", | |||
value:"www.hhrchina.com", | |||
span:7 | |||
}, | |||
{ | |||
label:"成立日期", | |||
value:"2015-10-22", | |||
span:10 | |||
}, | |||
{ | |||
label:"邮箱", | |||
value:"3530451045@qq.com", | |||
span:7 | |||
}, | |||
], | |||
// 我的消息 | |||
myMsgList:[ | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!把握住企业的选址动向,招商工作就赢了一半了!把握住企业的选址动向,招商工作就赢了一半了!把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
{ | |||
msg:"把握住企业的选址动向,招商工作就赢了一半了!", | |||
time:"2022-09-01 18:00" | |||
}, | |||
], | |||
// 是否授权 | |||
isAuthorize:true, | |||
// 税收查询公司信息 | |||
taxComanyInfo:[ | |||
{ | |||
label:"公司名称", | |||
value:"上海禾获仁网络科技有限公司", | |||
icon:'tax-1', | |||
width:29 | |||
}, | |||
{ | |||
label:"纳税人识别号", | |||
value:"91310115MA1H71QG17", | |||
icon:'tax-2', | |||
width:29 | |||
}, | |||
{ | |||
label:"税务征信等级", | |||
value:"SSS", | |||
icon:'tax-3', | |||
width:20 | |||
}, | |||
{ | |||
label:"评价得分(大查柜)", | |||
value:"98(2015)", | |||
icon:'tax-4', | |||
width:22 | |||
}, | |||
], | |||
taxTableData:[ | |||
{ | |||
v1:"企业所得税", | |||
v2:"2022-12-23", | |||
v3:"2022-12-23", | |||
v4:"2022-12-23", | |||
v5:"50066.25", | |||
}, | |||
{ | |||
v1:"企业所得税", | |||
v2:"2022-12-23", | |||
v3:"2022-12-23", | |||
v4:"2022-12-23", | |||
v5:"50066.25", | |||
}, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
// 获取公司名称 | |||
getCompanyName() { | |||
let companyName = "未认领企业"; | |||
// 如果已认领但是未入驻园区 | |||
if (this.isClaimed) { | |||
companyName = "上海禾获仁网络科技有限公司"; | |||
} | |||
return companyName; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style> | |||
</style> |
@@ -5,7 +5,7 @@ | |||
background-size: 100% 100%; | |||
} | |||
.message-content-container { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
margin-bottom: 20px; |
@@ -5,7 +5,7 @@ | |||
background-size: 100% 100%; | |||
} | |||
.tax-content-container { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
margin-bottom: 20px; |
@@ -4,7 +4,7 @@ | |||
no-repeat; | |||
background-size: 100% 100%; | |||
.header-box { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
height: 150px; | |||
position: relative; | |||
@@ -48,7 +48,7 @@ | |||
} | |||
} | |||
.detial-container { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
padding-bottom: 50px; |
@@ -4,7 +4,7 @@ | |||
no-repeat; | |||
background-size: 100% 100%; | |||
.header-box { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
height: 150px; | |||
position: relative; | |||
@@ -48,7 +48,7 @@ | |||
} | |||
} | |||
.detial-container { | |||
width: 1200px; | |||
width: $wrapWidth; | |||
margin: 0 auto; | |||
margin-top: 30px; | |||
padding-bottom: 50px; |