root
/
digital_park_static
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

详情

feature/20220929首页静态开发
王露 3 lat temu
rodzic
08be96a70d
commit
cc158825bc
14 zmienionych plików z 1777 dodań i 38 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 1
    1
      digital-park-web/digital-park/src/components/Footer.vue
  2. 1
    1
      digital-park-web/digital-park/src/components/Header.vue
  3. 20
    0
      digital-park-web/digital-park/src/router/modules/index.js
  4. 326
    0
      digital-park-web/digital-park/src/views/park-enterprises/Detail.vue
  5. 217
    0
      digital-park-web/digital-park/src/views/park-enterprises/List.vue
  6. 120
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/BasicInfo.vue
  7. 400
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/ClaimDialog.vue
  8. 140
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/CompanyDev.vue
  9. 134
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/CompanyItem.vue
  10. 127
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/IntellectualProperty.vue
  11. 113
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue
  12. 101
    0
      digital-park-web/digital-park/src/views/park-enterprises/components/TableItem.vue
  13. 4
    36
      digital-park-web/digital-park/src/views/park-information/components/SearchBox.vue
  14. 73
    0
      digital-park-web/digital-park/src/views/park-information/components/SearchInput.vue

+ 1
- 1
digital-park-web/digital-park/src/components/Footer.vue Wyświetl plik

@@ -57,7 +57,7 @@ export default {
// },
{
name: "园区企业",
path: "/2",
path: "/company-list",
},
{
name: "园区资讯问答",

+ 1
- 1
digital-park-web/digital-park/src/components/Header.vue Wyświetl plik

@@ -42,7 +42,7 @@ export default {
// },
{
name: "园区企业",
path: "/2",
path: "/company-list",
},
{
name: "园区资讯问答",

+ 20
- 0
digital-park-web/digital-park/src/router/modules/index.js Wyświetl plik

@@ -48,4 +48,24 @@ export default [
},
],
},
// 园区企业
{
path: "/company-list",
name: "CompanyList",
component: () =>
import ("@views/park-enterprises/List.vue"),
meta: {
title: "园区企业",
},
},
// 园区企业详情
{
path: "/company-detail",
name: "CompanyDetail",
component: () =>
import ("@views/park-enterprises/Detail.vue"),
meta: {
title: "园区企业",
},
},
];

+ 326
- 0
digital-park-web/digital-park/src/views/park-enterprises/Detail.vue Wyświetl plik

@@ -0,0 +1,326 @@
<!-- 园区企业详情 -->
<template>
<div class="">
<section class="nav_box">
<Nav></Nav>
<div class="second_nv">
<div>
<div class="position">
<img src="" alt="" />
<span>
当前位置：
<span class="pointer">园区企业</span>
<span style="margin:0 4px;">></span>
<span class="current pointer">详情</span>
</span>
</div>
</div>
</div>
<div class="detail_box">
<section class="top_box">
<div class="company_img_box">
<img class="company_img" src="" alt="" />
<img class="tip_img" src="" alt="" />
</div>
<div class="right_box">
<div class="top_row">
<span>上海禾获仁网络科技有限公司</span>
<div>
<span class="pointer">
<img src="" alt="" />
保存
</span>
<span class="pointer">
<img src="" alt="" />
取消
</span>
<span class="pointer">
<img src="" alt="" />
编辑
</span>
<span class="pointer">
<img src="" alt="" />
认领
</span>
</div>
</div>
<div class="middle_row">
<div class="company_type">
<span>科技型中小企业</span>
<span>科技型中小企业</span>
<span>科技型中小企业</span>
</div>
<div class="time">
<img src="" alt="" />
<span>更新时间：2022-03-04</span>
</div>
</div>
<div class="company_info">
<div>
法人代表：
<span>李瑾</span>
</div>
<div>
统一社会信用代码：
<span>91310115MA1H71QG17</span>
</div>
<div>
电话：
<span>021-64643026</span>
</div>
<div>
法人代表：
<span>www.hhrchina.com</span>
</div>
<div>
成立日期：
<span>2015-10-22</span>
</div>
<div>
邮箱：
<span>3530451045@qq.com</span>
</div>
</div>
</div>
</section>

<div class="tab_box">
<span
:class="['pointer', activeTab === item.value ? 'active' : '']"
v-for="item in tabs"
:key="item.value"
@click="changeTab(item)"
>
{{ item.name }}
</span>
</div>
</div>
</section>
<section class="content_box">
<basic-info></basic-info>
<company-dev></company-dev>
<intellectual-property></intellectual-property>
<other-info></other-info>
</section>
<Footer></Footer>
<claim-dialog></claim-dialog>
</div>
</template>

<script>
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import BasicInfo from "./components/BasicInfo.vue";
import CompanyDev from "./components/CompanyDev.vue";
import IntellectualProperty from "./components/IntellectualProperty.vue";
import OtherInfo from "./components/OtherInfo.vue";
import ClaimDialog from "./components/ClaimDialog.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {
Nav,
Footer,
BasicInfo,
CompanyDev,
IntellectualProperty,
OtherInfo,
ClaimDialog,
},
data() {
//这里存放数据
return {
tabs: [
{
name: "基本信息",
value: 1,
},
{
name: "企业发展",
value: 2,
},
{
name: "知识产权",
value: 3,
},
{
name: "其他信息（可编辑）",
value: 4,
},
],
activeTab: 1,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
changeTab(item) {
this.activeTab = item.value;
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.nav_box {
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
position: relative;
.second_nv {
@include size(100%, 250px);
> div {
@include size($wrapWidth, 100%);
margin: 0 auto;
@include flex(column, flex-start, flex-start, null);
position: relative;
}

.position {
@include flex(row, flex-start, center, null);
img {
@include size(16px, 16px);
background: #ffffff;
margin-right: 6px;
}
padding-top: 10px;
@include border-box;
@include font(16px, #ffffff);
.current {
font-weight: 600;
}
}
}
}
.detail_box {
@include size($wrapWidth, 320px);
padding: 30px 30px 10px;
@include border-box;
background-image: linear-gradient(0deg, #ffffff 0%, #cce7fa 100%);
position: absolute;
left: 50%;
bottom: -50%;
transform: translateX(-50%);
@include flex(column, space-between, flex-start, nowrap);
.tab_box {
width: 100%;
@include flex(row, flex-start, flex-start, null);
border: solid 1px #bcd8e9;
@include border-box;
background: #ffffff;
span {
@include size(200px, 50px);
@include font(16px, #637485);
@include flex(row, center, center, null);
border-right: solid 1px #bcd8e9;
@include border-box;
}
.active {
background-image: linear-gradient(0deg, #ffffff 0%, #cce7fa 100%);
}
}
.top_box {
@include flex(row, space-between, center, nowrap);
.company_img_box {
@include size(220px, 200px);

position: relative;
.company_img {
background: pink;
@include size(200px, 100%);
}
.tip_img {
@include size(68px, 22px);
background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
position: absolute;
top: 20px;
left: 0;
}
}
.right_box {
height: 200px;
flex: 1;

@include flex(column, space-between, flex-start, nowrap);
.top_row {
width: 100%;
@include flex(row, space-between, center, null);
> span {
@include font(24px, #334a5f);
font-weight: 600;
}
> div {
@include flex(row, flex-start, center, null);
@include font(16px, #ffffff);
> span {
img {
@include size(20px, 20px);
background: #fff;
margin-right: 8px;
}
@include size(90px, 30px);
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
border-radius: 15px;
margin-left: 10px;
@include flex(row, center, center, null);
@include border-box;
}
}
}
.middle_row {
width: 100%;
@include flex(row, space-between, center, null);
.company_type {
> span {
@include font(14px, #0086e7);
padding: 2px 8px;
border: solid 1px #0086e7;
@include border-box;
margin-right: 10px;
}
}
.time {
@include flex(row, center, center, null);
img {
@include size(20px, 20px);
background: #fff;
margin-right: 8px;
}
@include font(14px, #637485);
}
}
.company_info {
@include size(100%, 100px);
@include font(14px, #637485);
background-color: #f4fafe;
@include flex(row, space-between, center, wrap);
padding: 20px;
@include border-box;
> div {
width: 30%;
span {
color: #334a5f;
font-weight: 600;
}
}
> div:nth-child(3n + 2) {
width: 40%;
}
}
}
}
}
.content_box {
width: $wrapWidth;
margin: 0 auto;
padding: 200px 0 30px 0;
@include border-box;
}
</style>

+ 217
- 0
digital-park-web/digital-park/src/views/park-enterprises/List.vue Wyświetl plik

@@ -0,0 +1,217 @@
<!-- 园区企业列表 -->
<template>
<div class="">
<section class="nav_box">
<Nav></Nav>
<div class="second_nv">
<div>
<div class="position">
<img src="" alt="" />
<span>
当前位置：
<span class="pointer">园区企业</span>
<span style="margin:0 4px;">></span>
<span class="current pointer">详情</span>
</span>
</div>
<div class="head_title">
<span class="text">园区企业</span>
<span class="english">Park Enterprises</span>
</div>
<div class="search_box">
<SearchInput></SearchInput>
</div>
</div>
</div>
</section>

<section class="screen_box">
<div>
<div class="screen_row" v-for="item in screen" :key="item.name">
<div class="screen_title">{{ item.name }}：</div>
<ul class="screen_ul">
<li
v-for="(arrItem, index) in item.value"
:key="index"
:class="['pointer', item.activeScreen === index ? 'active' : '']"
>
{{ arrItem }}
</li>
</ul>
<div>
<img src="" alt="展开" />
</div>
</div>
</div>
</section>

<section class="content_box">
<div>
<company-item v-for="item in 6"></company-item>
</div>
<div class="pagination_box">
<Pagination></Pagination>
</div>
</section>

<Footer></Footer>
</div>
</template>

<script>
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import CompanyItem from "./components/CompanyItem.vue";
import Pagination from "@components/Pagination.vue";
import SearchInput from "@views/park-information/components/SearchInput.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: { Nav, Footer, CompanyItem, Pagination, SearchInput },
data() {
//这里存放数据
return {
screen: [
{
name: "所属行业",
value: [
"全部",
"信息技术",
"网络科技",
"电子科技",
"新能源科技",
"电子商务",
"贸易",
"商贸",
"企业管理",
"财务咨询",
"商务咨询",
"电子商务",
"贸易",
"商贸",
"企业管理",
"财务咨询",
"商务咨询",
],
activeScreen: 0,
},
{
name: "认领状态",
value: ["全部", "已认领", "未认领"],
activeScreen: 1,
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.nav_box {
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
.second_nv {
@include size(100%, 250px);
> div {
@include size($wrapWidth, 100%);
margin: 0 auto;
@include flex(column, flex-start, flex-start, null);
position: relative;
}
.head_title {
width: 100%;
@include flex(column, center, center, null);
.text {
@include font(36px, #ffffff);
font-weight: 600;
}
.english {
@include font(14px, #ffffff);
margin-top: 4px;
}
}
.search_box {
width: 100%;
padding-top: 28px;
@include border-box;
@include flex(row, center, center, null);
}
.position {
@include flex(row, flex-start, center, null);
img {
@include size(16px, 16px);
background: #ffffff;
margin-right: 6px;
}
padding-top: 10px;
@include border-box;
@include font(16px, #ffffff);
.current {
font-weight: 600;
}
}
}
}
.screen_box {
@include size($wrapWidth, 100%);
margin: 30px auto 22px;
background-image: linear-gradient(180deg, #cce7fa 0%, #fdfeff 100%);
padding: 40px 30px 30px;
@include border-box;
> div {
background: #ffffff;
padding: 44px 50px 38px;
@include border-box;
}
.screen_row {
height: 54px;
overflow: hidden;
@include flex(row, flex-start, baseline, null);
border-bottom: dashed 1px #abcee4;
padding: 20px 0 12px;
@include border-box;
.screen_title {
@include size(88px, 100%);
@include font(16px, #333);
font-weight: 600;
}
.screen_ul {
flex: 1;
@include flex(row, flex-start, center, wrap);
li {
@include font(16px, #637485);
padding: 2px 8px;
@include border-box;
margin-bottom: 5px;
}
> li + li {
margin-left: 10px;
}
.active {
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
@include font(16px, #fff);
}
}
}
}
.content_box {
width: $wrapWidth;
margin: 0 auto;
.pagination_box {
padding-bottom: 40px;
@include border-box;
text-align: right;
}
}
</style>

+ 120
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/BasicInfo.vue Wyświetl plik

@@ -0,0 +1,120 @@
<!-- 基本信息 -->
<template>
<div class="basic_info_box">
<div class="title">
基本信息：
</div>
<table class="table_box" cellspacing="0">
<tr class="table_row">
<td class="table_title">统一社会信用代码：</td>
<td>91310115MA1H71QG17</td>
<td class="table_title">统一社会信用代码：</td>
<td colspan="3">上海禾获仁网络科技有限公司</td>
</tr>
<tr class="table_row">
<td class="table_title">法人代表：</td>
<td>李瑾</td>
<td class="table_title">登记状态：</td>
<td>存续（在营、开业、在册）</td>
<td class="table_title width_100">成立日期：</td>
<td>2015-10-22</td>
</tr>
<tr class="table_row">
<td class="table_title">所属行业：</td>
<td colspan="3"></td>
<td class="table_title width_100">企业类型：</td>
<td>有限责任公司（自然人投资或控股）</td>
</tr>
<tr class="table_row">
<td class="table_title">营业期限：</td>
<td>2015.10.22--2035.10.21</td>
<td class="table_title">纳税人资质：</td>
<td>增值税一般纳税人</td>
<td class="table_title width_100">注册资本：</td>
<td>3109.09万元人民币</td>
</tr>

<tr class="table_row">
<td class="table_title">注册地址：</td>
<td colspan="5">中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室</td>
</tr>
<tr class="table_row">
<td class="table_title">经营范围：</td>
<td colspan="5">
一般项目：技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；广告设计、代理；广告发布（非广播电台、电视台、报刊出版单位）；广告制作；互联网销售（除销售需要许可的商品）；软件开发；组织文化艺术交流活动；市场主体登记注册代理；信息咨询服务（不含许可类信息咨询服务）；企业管理咨询；财务咨询。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：代理记账；第一类增值电信业务。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）
</td>
</tr>
</table>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.basic_info_box {
width: 100%;
.title {
@include font(16px, #334a5f);
font-weight: 600;
padding: 20px 0;
@include border-box;
}
.table_box {
border: 1px solid #bcd8e9;
tr {
height: 48px;
td {
@include font(14px, #334a5f);
padding: 15px 10px;
@include border-box;
}
> td + td {
border-left: 1px solid #bcd8e9;
}
}
> tr + tr {
td {
border-top: 1px solid #bcd8e9;
}
}
.table_title {
height: 48px;
@include font(14px, #637485);
@include size(160px, auto);
background: #f2f7fb;
}
.width_100 {
width: 100px;
}
}
}
</style>

+ 400
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/ClaimDialog.vue Wyświetl plik

@@ -0,0 +1,400 @@
<!-- -->
<template>
<div class="">
<el-dialog
class="dialog_box"
:visible.sync="dialogTableVisible"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="false"
width="740px"
>
<div slot="title" class="header_title">
<span class="title_text">企业认领</span>
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible = false" />
</div>
<div class="dialog_content">
<el-form label-position="right" label-width="95px">
<el-form-item label="企业名称">
<el-input v-model="input"></el-input>
</el-form-item>
<el-form-item label="认领资料">
<div class="upload_box">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<div v-else class="upload_text">
<img class="upload_icon" src="" alt="" />
<div class="upload_tip">营业执照(或其他材料)</div>
</div>
</el-upload>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<div v-else class="upload_text">
<img class="upload_icon" src="" alt="" />
<div class="upload_tip">法人身份证(头像面) 或其他材料</div>
</div>
</el-upload>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<div v-else class="upload_text">
<img class="upload_icon" src="" alt="" />
<div class="upload_tip">授权书</div>
</div>
</el-upload>
</div>
</el-form-item>
<el-form-item class="submit_tip_box">
<div>注意事项</div>
<ul>
<li>
1、不同组织机构请根据提示上传指定材料，
<span class="color_blue pointer">查看详情；</span>
</li>
<li>
2、
<span class="color_blue pointer">点击生成并下载授权书</span>
，填写完成后拍照上传，注意授权书填写完整，拍摄清晰，使用手写签名和实体公章；
</li>
<li>3、支持jpg、jpeg、png格式，图片大小不超过2M；</li>
<li>
4、上传图片须为清晰完整彩色的实物照片或高清彩色扫描件，同时露出图片的四个角；
</li>
<li>
5、如未通过审核，请仔细阅读退回通知，并依据退回通知内容进行修改。
</li>
</ul>
</el-form-item>
<el-form-item>
<el-button class="submit_btn" type="primary" :loading="loading">
提交审核
</el-button>
</el-form-item>
</el-form>
</div>
</el-dialog>

<el-dialog
class="dialog_box"
:visible.sync="dialogTableVisible1"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="false"
width="740px"
>
<div slot="title" class="header_title">
<span class="title_text">认领材料</span>
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible1 = false" />
</div>
<div class="dialog_content">
<div class="claim_tip">
普通企业提交的营业执照、法定代表人信息必须与工商信息一致，其他组织机构提交的材料必须与登记信息/基本信息一致。
</div>
<div class="materials">
<div v-for="item in material" :key="item.title">
<span class="material_title">{{ item.title }}</span>
<span>{{ item.value }}</span>
</div>
</div>
<div class="btn_width">
<el-button class="submit_btn" type="primary" :loading="loading">
我知道了
</el-button>
</div>
</div>
</el-dialog>

<el-dialog
class="dialog_box"
:visible.sync="dialogTableVisible3"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:lock-scroll="false"
width="740px"
>
<div slot="title" class="header_title">
<span class="title_text">企业认领授权书</span>
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible3 = false" />
</div>
<div class="dialog_content">
<div class="authorize_box">
<span class="company_name">园区企业名称</span>
<span>
本企业
<span class="color_blue">企业名称</span>
</span>
<span style="margin:10px 0 20px">
确认授权
<span class="color_blue">姓名</span>
（身份证号：
<span class="color_blue">141181198909230120</span>
）
</span>
<span style="margin-bottom:70px;">
代表本企业向贵公司完成企业认领，执行企业信息维护和管理功能。
</span>
<span class="authorize_position">盖章处：</span>
<span class="authorize_position">日期：2022-09-20</span>
</div>
<div class="btn_box">
<div>
<el-button class="pre_btn" type="primary" :loading="loading">
上一步
</el-button>
</div>

<div>
<el-button class="submit_btn" type="primary" :loading="loading">
下载授权书
</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
dialogTableVisible: true,
dialogTableVisible1: false,
dialogTableVisible3: false,
input: "",
material: [
{
title: "普通企业",
value: "营业执照 + 法定代表人身份证（头像面）",
},
{
title: "律师事务所",
value: "律师事务所执业许可证 + 负责人律师执业证（姓名照片页）",
},
{
title: "事业单位",
value: "事业单位法人证书 + 法定代表人身份证（头像面）",
},
{
title: "社会组织",
value: "社会团体法人登记证书 + 法定代表人身份证（头像面）",
},
{
title: "基金会",
value: "基金会法人登记证书 + 法定代表人身份证（头像面）",
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.dialog_box {
::v-deep .el-dialog {
background-image: linear-gradient(180deg, #cce7fa 0%, #feffff 100%);
}
::v-deep .el-dialog__header {
padding: 0;
}
.header_title {
@include size(100%, 72px);
padding: 0 20px 0 30px;
@include border-box;
@include flex(row, space-between, center, null);
.title_text {
@include font(24px, #334a5f);
font-weight: 600;
}
img {
@include size(36px, 36px);
}
}
.dialog_content {
padding: 0 80px;
@include border-box;
::v-deep .el-form-item__label {
@include font(16px, #637485);
}
::v-deep .el-input__inner,
::v-deep .el-textarea__inner {
background: transparent;
border: 1px solid #41a6fe;
}
.submit_btn {
width: 100%;
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
}
}
}
.upload_box {
@include flex(row, space-between, flex-start, nowrap);
.avatar-uploader {
@include size(140px, 118px);
border: 1px solid #42a6fe;
border-radius: 4px;
@include border-box;
::v-deep .el-upload {
@include size(100%, 100%);
cursor: pointer;
position: relative;
overflow: hidden;
}
.upload_text {
padding: 10px 0;
@include border-box;
@include size(140px, 118px);
@include flex(column, space-between, center, nowrap);
.upload_icon {
@include size(118px, 70px);
background: pink;
}
.upload_tip {
line-height: initial;
@include font(12px, #637485);
}
}
}

.avatar {
@include size(140px, 118px);
display: block;
}
}
.submit_tip_box {
> div {
@include font(16px, #637485);
line-height: 30px;
}
li {
@include font(12px, #637485);
line-height: 20px;
}
}
.color_blue {
color: #0086e7;
}
.claim_tip {
padding: 0 60px;
text-align: center;
@include border-box;
}
.materials {
background: #c7e7fe;
border: 1px solid #0977d8;
margin: 20px 0 32px;
> div {
@include size(100%, 60px);
@include flex(row, flex-start, flex-start, nowrap);
> span {
height: 60px;
@include flex(row, flex-start, center, null);
padding: 0 20px;
@include border-box;
}
}
> div + div {
border-top: 1px solid #0977d8;
@include border-box;
}
.material_title {
width: 125px;
border-right: 1px solid #0977d8;
}
}
.btn_width {
width: 444px;
margin: 0 auto;
}
.authorize_box {
border: 1px solid #0977d8;
padding: 16px 50px 16px 20px;
border-radius: 4px;
@include border-box;
@include flex(column, flex-start, flex-start, nowrap);
.company_name {
@include font(18px, #637485);
font-weight: 500;
margin-bottom: 15px;
}
.authorize_position {
width: 140px;
align-self: flex-end;
margin-top: 10px;
}
}
.btn_box {
@include flex(row, center, center, nowrap);
margin-top: 32px;
> div {
width: 140px;
}
> div + div {
margin-left: 10px;
}
.pre_btn {
width: 100%;
@include font(18px, #0086e7);
background: #fff;
}
}
</style>

+ 140
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/CompanyDev.vue Wyświetl plik

@@ -0,0 +1,140 @@
<!-- 企业发展 -->
<template>
<div class="basic_info_box">
<div class="title">
企业发展：
</div>
<section class="content_box">
<div>
<div class="title">
网站
</div>
<table-item
:table-title="tableTitle"
:table-data="tableData"
:rowHeight="50"
></table-item>
</div>
<div>
<div class="title">
股东(发起人)出资信息
</div>
<table-item
:table-title="tableTitle"
:table-data="tableData"
:rowHeight="50"
></table-item>
</div>
<div>
<div class="title">
融资信息
</div>
<table-item
:table-title="tableTitle"
:table-data="tableData"
:rowHeight="50"
></table-item>
</div>
<div>
<div class="title">
股东(发起人)出资信息
</div>
<table-item
:table-title="tableTitle"
:table-data="tableData"
:rowHeight="50"
></table-item>
</div>
</section>
</div>
</template>

<script>
import TableItem from "./TableItem.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: { TableItem },
data() {
//这里存放数据
return {
tableTitle: [
{
label: "日期",
property: "date",
},
{
label: "姓名",
property: "name",
},
{
label: "地址",
property: "address",
},
{
slot: "handle",
},
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.basic_info_box {
width: 100%;
.title {
@include font(16px, #334a5f);
font-weight: 600;
padding: 20px 0;
@include border-box;
}
.content_box {
border: solid 1px #bcd8e9;
padding: 0 20px;
@include border-box;
padding-bottom: 20px;
}
}
</style>

+ 134
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/CompanyItem.vue Wyświetl plik

@@ -0,0 +1,134 @@
<!-- 园区企业单个item -->
<template>
<div class="item_box">
<img class="company_img" src="" alt="" />
<div class="info_box">
<div class="title_box">
<span class="company_title">上海禾获仁网络科技有限公司</span>
<img src="" alt="" />
</div>
<div class="company_info">
<span>法人：张三</span>
<span>状态：存续</span>
<span>注册资本：50万</span>
<span>成立日期：2016.09.12</span>
<span>信用代码：91310115MA1H71QG17</span>
</div>
<div class="company_info">
<span>行业：科技推广和应用服务业</span>
<span>
地址：中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室
</span>
</div>
<div class="advantage_box">
<span>高新技术企业</span>
<span>科技型中小企业</span>
<span>小微企业</span>
</div>
<div class="business">
<span>主营业务：</span>
技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；
</div>
</div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.item_box {
@include size(100%, auto);
border: solid 1px #bcd8e9;
padding: 30px;
@include border-box;
@include flex(row, flex-start, center, null);
margin-bottom: 30px;
.company_img {
@include size(280px, 180px);
background: pink;
}
.info_box {
flex: 1;
height: 180px;
padding-left: 30px;
@include border-box;
@include flex(column, space-between, flex-start, null);
overflow: hidden;
.title_box {
@include flex(row, flex-start, center, null);
margin-bottom: 8px;
.company_title {
@include font(18px, #334a5f);
font-weight: 600;
margin-right: 10px;
}
img {
@include size(68px, 22px);
background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
}
}
.company_info {
width: 100%;
@include font(16px, #637485);
@include text-ellipsis;
span {
padding-right: 8px;
@include border-box;
}

> span + span {
border-left: solid 1px #637485;
padding-left: 8px;
}
}
.advantage_box {
span {
@include font(14px, #0086e7);
padding: 2px 8px;
border: solid 1px #0086e7;
@include border-box;
margin-right: 10px;
}
}
.business {
width: 100%;
@include font(16px, #637485);
@include text-ellipsis;
margin-top: 8px;
span {
@include font(16px, #334a5f);
font-weight: 600;
}
}
}
}
</style>

+ 127
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/IntellectualProperty.vue Wyświetl plik

@@ -0,0 +1,127 @@
<!-- 企业发展 -->
<template>
<div class="basic_info_box">
<div class="title">
知识产权：
</div>
<section class="content_box">
<div>
<div class="title">
软件著作权
</div>
<table-item
:table-title="tableTitle"
:table-data="tableData"
:rowHeight="50"
></table-item>
</div>
</section>
</div>
</template>

<script>
import TableItem from "./TableItem.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: { TableItem },
data() {
//这里存放数据
return {
tableTitle: [
{
label: "软件全称",
property: "date",
},
{
label: "软件简称",
property: "name",
},
{
label: "版本号",
property: "address",
},
{
label: "登记号",
property: "address",
},

{
label: "开发完成日期",
property: "name",
},
{
label: "首次发布日期",
property: "address",
},
{
label: "登记日期",
property: "address",
},
{
slot: "handle",
},
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.basic_info_box {
width: 100%;
.title {
@include font(16px, #334a5f);
font-weight: 600;
padding: 20px 0;
@include border-box;
}
.content_box {
border: solid 1px #bcd8e9;
padding: 0 20px;
@include border-box;
padding-bottom: 20px;
}
}
</style>

+ 113
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue Wyświetl plik

@@ -0,0 +1,113 @@
<!-- 其他信息 -->
<template>
<div class="basic_info_box">
<div class="title">
其他信息：
</div>
<table class="table_box" cellspacing="0">
<tr>
<td class="table_title">企业优势：</td>
<td class="content">
技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广
</td>
</tr>
<tr>
<td class="table_title">企业文化：</td>
<td class="content">
技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广
</td>
</tr>
<tr>
<td class="table_title">企业文化：</td>
<td class="content">
<img class="company_img" src="" alt="" />
<img class="company_img" src="" alt="" />
<img class="company_img" src="" alt="" />
</td>
</tr>
<tr>
<td class="table_title">其他信息：</td>
<td class="content">
一般项目：技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；广告设计、代理；广告发布（非广播电台、电视台、报刊出版单位）；广告制作；互联网销售（除销售需要许可的商品）；软件开发；组织文化艺术交流活动；市场主体登记注册代理；信息咨询服务（不含许可类信息咨询服务）；企业管理咨询；财务咨询。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：代理记账；第一类增值电信业务。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）
</td>
</tr>
</table>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.basic_info_box {
width: 100%;
.title {
@include font(16px, #334a5f);
font-weight: 600;
padding: 20px 0;
@include border-box;
}
.table_box {
border: 1px solid #bcd8e9;
tr {
height: 48px;
td {
@include font(14px, #334a5f);
padding: 10px;
@include border-box;
}
> td + td {
border-left: 1px solid #bcd8e9;
}
}
> tr + tr {
td {
border-top: 1px solid #bcd8e9;
}
}
.table_title {
height: 48px;
@include font(14px, #637485);
@include size(110px, auto);
background: #f2f7fb;
text-align: center;
}
.content {
padding: 20px;
@include border-box;
.company_img {
@include size(120px, 96px);
margin-right: 25px;
}
}
}
}
</style>

+ 101
- 0
digital-park-web/digital-park/src/views/park-enterprises/components/TableItem.vue Wyświetl plik

@@ -0,0 +1,101 @@
<!-- table组件 -->
<template>
<div class="table_box">
<el-table :data="tableData" width="100%" :height="height" :row="rowHeight" border>
<el-table-column type="index" align="center" label="列号" width="80"></el-table-column>
<template v-for="(item, index) in tableTitle">
<slot v-if="item.slot" :name="item.slot"></slot>
<el-table-column
v-else
:key="index"
:prop="item.property"
:label="item.label"
:min-width="item.minWidth ? item.minWidth : ''"
:width="item.width ? item.width : ''"
></el-table-column>
</template>
</el-table>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {
tableData: {
// 表格数据
type: Array,
default: () => {
return [];
},
},
tableTitle: {
// 表格头标题
type: Array,
require: true,
},
height: {
// 表格高度
type: [Number, String],
default: "100%",
},
rowHeight: {
// 表格行高
type: [Number, String],
default: 44,
},
},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
tableCellStyle() {
// return "border-color: #bcd8e9;";
},
// 修改 table header cell的背景色
tableHeaderCellStyle() {
// return "border-color: #bcd8e9;";
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.table_box {
::v-deep .el-table td,
::v-deep.el-table th.is-leaf,
::v-deep .el-table--border,
::v-deep .el-table--group {
border-color: #bcd8e9;
}
::v-deep .el-table--border::after,
::v-deep.el-table--group::after,
::v-deep .el-table::before {
background-color: #bcd8e9;
}
::v-deep .el-table th {
background: #f2f7fb;
}
}
</style>

+ 4
- 36
digital-park-web/digital-park/src/views/park-information/components/SearchBox.vue Wyświetl plik

@@ -1,24 +1,20 @@
<!-- 搜索框 -->
<template>
<div class="search_box">
<img class="info_img" src="" alt="" />
<img class="info_img" src="" alt="搜索" />
<span class="search_title">园区知识库</span>
<div class="input_box">
<el-input placeholder="请输入搜索内容" v-model="input2">
<div slot="prefix" class="icon_box"><img src="" alt="" /></div>
<div slot="append" class="pointer">搜索</div>
</el-input>
</div>
<search-input></search-input>
</div>
</template>

<script>
import SearchInput from "./SearchInput.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
components: { SearchInput },
data() {
//这里存放数据
return {};
@@ -59,33 +55,5 @@ export default {
font-weight: 600;
margin-right: 22px;
}
.input_box {
@include size(720px, 60px);
::v-deep .el-input-group {
height: 100%;
}
.icon_box {
height: 100%;
@include flex(row, center, center, null);
img {
@include size(24px, 24px);
}
}
::v-deep .el-input__inner {
height: 100%;
border-radius: 0;
border: none;
padding-left: 60px;
}
::v-deep .el-input-group__append {
border-radius: 0;
@include size(120px, 60px);
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
@include font(18px, #ffffff);
border: none;
text-align: center;
padding: 0;
}
}
}
</style>

+ 73
- 0
digital-park-web/digital-park/src/views/park-information/components/SearchInput.vue Wyświetl plik

@@ -0,0 +1,73 @@
<!-- -->
<template>
<div class="input_box">
<el-input placeholder="请输入搜索内容" v-model="input2">
<div slot="prefix" class="icon_box"><img src="" alt="" /></div>
<div slot="append" class="pointer">搜索</div>
</el-input>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
input2: "",
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.input_box {
@include size(720px, 60px);
::v-deep .el-input-group {
height: 100%;
}
.icon_box {
height: 100%;
@include flex(row, center, center, null);
img {
@include size(24px, 24px);
}
}
::v-deep .el-input__inner {
height: 100%;
border-radius: 0;
border: none;
padding-left: 60px;
}
::v-deep .el-input-group__append {
border-radius: 0;
@include size(120px, 60px);
background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
@include font(18px, #ffffff);
border: none;
text-align: center;
padding: 0;
}
}
</style>

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz