王露
3 лет назад
14 измененных файлов: 1777 добавлений и 38 удалений
+ 1
- 1
digital-park-web/digital-park/src/components/Footer.vue
Просмотреть файл
| // }, | // }, | ||||
| { | { | ||||
| name: "园区企业", | name: "园区企业", | ||||
| path: "/2", | |||||
| path: "/company-list", | |||||
| }, | }, | ||||
| { | { | ||||
| name: "园区资讯问答", | name: "园区资讯问答", |
+ 1
- 1
digital-park-web/digital-park/src/components/Header.vue
Просмотреть файл
| // }, | // }, | ||||
| { | { | ||||
| name: "园区企业", | name: "园区企业", | ||||
| path: "/2", | |||||
| path: "/company-list", | |||||
| }, | }, | ||||
| { | { | ||||
| name: "园区资讯问答", | name: "园区资讯问答", |
+ 20
- 0
digital-park-web/digital-park/src/router/modules/index.js
Просмотреть файл
| }, | }, | ||||
| ], | ], | ||||
| }, | }, | ||||
| // 园区企业 | |||||
| { | |||||
| 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
Просмотреть файл
| <!-- 园区企业详情 --> | |||||
| <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
Просмотреть файл
| <!-- 园区企业列表 --> | |||||
| <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
Просмотреть файл
| <!-- 基本信息 --> | |||||
| <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
Просмотреть файл
| <!-- --> | |||||
| <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
Просмотреть файл
| <!-- 企业发展 --> | |||||
| <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
Просмотреть файл
| <!-- 园区企业单个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
Просмотреть файл
| <!-- 企业发展 --> | |||||
| <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
Просмотреть файл
| <!-- 其他信息 --> | |||||
| <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
Просмотреть файл
| <!-- 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
Просмотреть файл
| <!-- 搜索框 --> | <!-- 搜索框 --> | ||||
| <template> | <template> | ||||
| <div class="search_box"> | <div class="search_box"> | ||||
| <img class="info_img" src="" alt="" /> | |||||
| <img class="info_img" src="" alt="搜索" /> | |||||
| <span class="search_title">园区知识库</span> | <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> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import SearchInput from "./SearchInput.vue"; | |||||
| //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） | //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） | ||||
| //例如：import 《组件名称》 from '《组件路径》'; | //例如：import 《组件名称》 from '《组件路径》'; | ||||
| export default { | export default { | ||||
| //import引入的组件需要注入到对象中才能使用 | //import引入的组件需要注入到对象中才能使用 | ||||
| components: {}, | |||||
| components: { SearchInput }, | |||||
| data() { | data() { | ||||
| //这里存放数据 | //这里存放数据 | ||||
| return {}; | return {}; | ||||
| font-weight: 600; | font-weight: 600; | ||||
| margin-right: 22px; | 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> | </style> |
+ 73
- 0
digital-park-web/digital-park/src/views/park-information/components/SearchInput.vue
Просмотреть файл
| <!-- --> | |||||
| <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> |
Загрузка…