Skip to content

G
gs1
Commit bfd1fdce by 林家欣
Options

我要培训切图50%

parent 36f19cf7
Showing with 509 additions and 58 deletions
src/components/layout/header/mock.js
......@@ -234,6 +234,28 @@ export const nav = [
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "其他增值服务费" },
],
},
{
id: uuid("gs_nav"),
name: "条码注册公告",
index: 2,
link: "/Business/Notice",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "条码注册公告" },
],
},
{
id: uuid("gs_nav"),
name: "条码注销公告",
index: 2,
link: "/Business/Notice",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "条码注销公告" },
],
}
],
}
......
src/router/index.js
......@@ -213,7 +213,14 @@ const routes = [
},
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Training",
name: "",
meta: {
name: "我要培训——现场培训/线上培训",
},
redirect: '/Service/Training',
},
{
path: "/Business/Code",
name: "Code",
......@@ -232,8 +239,17 @@ const routes = [
},
],
},
{
path: "/Service/Training",
name: "Training",
meta: {
name: "培训计划",
},
component: () => import("@/views/Business/Training.vue"),
},
],
},
{
// 查询中心
path: "/search",
......
src/views/Business/Notice.vue
......@@ -3,52 +3,41 @@
<cate :father="tmggCate"></cate>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<li
class="nav-item"
role="presentation"
v-for="(tmp, i) in list"
:key="i"
>
<button
class="nav-link active"
id="home-tab"
:class="['nav-link', { active: $route.query.id === tmp.type }]"
:id="tmp.type + '-tab'"
data-bs-toggle="tab"
data-bs-target="#home"
:data-bs-target="'#' + tmp.type"
type="button"
role="tab"
aria-controls="home"
:aria-controls="tmp.type"
aria-selected="true"
@click="jump(i)"
>
注册
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
注销
{{tmp.name}}
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
v-for="(tmp, i) in list"
:key="i"
:class="[
'tab-pane',
'fade',
{ 'show active': $route.query.id === tmp.type },
]"
:id="tmp.type"
role="tabpanel"
aria-labelledby="home-tab"
:aria-labelledby="tmp.type + '-tab'"
>
<list />
<pages />
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<list />
<list :list="tmp.data" />
<pages />
</div>
</div>
......@@ -72,8 +61,53 @@ export default {
name: "条码公告 ",
ico: "",
},
list: [
{
type: "zhuce",
name: "注册",
link: "/Business/Notice",
active: "zhuce",
data: [
{
name: "武隆区陈氏面条加工坊",
time: "2021-09-30",
},
{
name: "重庆功存科技有限公司",
time: "2021-09-30",
},
],
},
{
type: "zhuxiao",
name: "注销",
link: "/Business/Notice",
active: "zhuxiao",
data: [
{
name: "杭州瀚扬科技有限公司",
time: "2021-09-22",
},
{
name: "贵州国伟自由行智能科技有限公司",
time: "2021-09-07",
},
],
},
],
};
},
methods: {
jump(i) {
// console.log(i);
this.$router.push({
path: this.list[i].link,
query: {
id: this.list[i].active,
},
});
},
},
};
</script>
<style lang="scss" scoped>
......
src/views/Business/Training.vue 0 → 100644
<template>
<div class="training container">
<div class="row">
<div class="col-lg-8">
<div class="pxjh">
<cate :father="pxjhCate"></cate>
<div class="container">
<p>
为更好的开展我国商品条码系统成员教育培训工作，使我国商品条码系统成员第一时间了解各地区分支机构培训时间及培训内容，现将中国物品编码中心全国分支机构培训计划进行公布。
</p>
<div class="pxjh-cate">
<span>2021年度</span>
<button @click="jump">点击查询分支机构联系方式</button>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li
class="nav-item"
role="presentation"
v-for="(tmp, i) in tabs"
:key="i"
>
<button
:class="['nav-link', { active: i === 0 }]"
:id="tmp.id"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
@click="handelTab(i)"
>
{{ tmp.name }}
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
:class="[
'tab-pane',
'fade',
{ show: i === 0 },
{ active: i === 0 },
]"
id="home"
role="tabpanel"
:aria-labelledby="tmp.id"
v-for="(tmp, i) in tabs"
:key="i"
>
<fzzx :list="currentList" :key="updateKey" />
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">2</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
import fzzx from "./copms/fzzx.vue";
export default {
components: {
cate,
fzzx,
},
data() {
return {
pxjhCate: {
ico: "",
name: "培训计划",
},
tabs: [
{
id: "one",
name: "第一季度",
list: [
{
name: "北京分中心",
fileUrl: "",
},
{
name: "天津分中心",
fileUrl: "",
},
{
name: "河北分中心",
fileUrl: "",
},
{
name: "山西分中心",
fileUrl: "",
},
{
name: "内蒙古分中心",
fileUrl: "",
},
],
},
{
id: "two",
name: "第二季度",
list: [
{
name: "辽宁分中心",
fileUrl: "",
},
{
name: "沈阳分中心",
fileUrl: "",
},
{
name: "大连分中心",
fileUrl: "",
},
{
name: "吉林分中心",
fileUrl: "",
},
{
name: "长春分中心",
fileUrl: "",
},
{
name: "黑龙江分中心",
fileUrl: "",
},
],
},
{
id: "three",
name: "第三季度",
list: [
{
name: "上海分中心",
fileUrl: "",
},
{
name: "江苏分中心",
fileUrl: "",
},
{
name: "南京办事处",
fileUrl: "",
},
{
name: "浙江分中心",
fileUrl: "",
},
{
name: "杭州分中心",
fileUrl: "",
},
{
name: "宁波分中心",
fileUrl: "",
},
{
name: "福建分中心",
fileUrl: "",
},
{
name: "厦门办事处",
fileUrl: "",
},
{
name: "江西分中心",
fileUrl: "",
},
{
name: "山东分中心",
fileUrl: "",
},
{
name: "青岛办事处",
fileUrl: "",
},
{
name: "烟台办事处",
fileUrl: "",
},
],
},
{
id: "four",
name: "第四季度",
list: [
{
name: "河南分中心",
fileUrl: "",
},
{
name: "湖北分中心",
fileUrl: "",
},
{
name: "武汉分中心",
fileUrl: "",
},
{
name: "湖南分中心",
fileUrl: "",
},
{
name: "广东分中心",
fileUrl: "",
},
{
name: "深圳分中心",
fileUrl: "",
},
{
name: "广州分中心",
fileUrl: "",
},
{
name: "珠海分中心",
fileUrl: "",
},
{
name: "广西分中心",
fileUrl: "",
},
{
name: "海南分中心",
fileUrl: "",
},
],
},
],
updateKey: new Date().getTime(),
};
},
created() {
this.handelTab(0);
},
methods: {
handelTab(i) {
console.log(i, "handelTab");
this.currentList = this.tabs[i].list;
this.updateKey = new Date().getTime();
},
jump() {
this.$router.push({
path: "/Org/Branch",
});
},
},
};
</script>
<style lang="scss" scoped>
.training {
padding: 20px 0;
.pxjh {
@include module-box;
padding-bottom: 20px;
p {
text-indent: 28px;
}
.pxjh-cate {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #b2b2b8;
margin-bottom: 15px;
span {
color: #002c6c;
font-size: 18px;
}
button {
background-color: #f26334;
font-size: 14px;
padding: 6px 10px;
color: #ffffff;
border: 0;
}
}
.nav-tabs {
background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(4, 64, 141, 0.1);
border-radius: 2px;
.nav-link {
border: 0;
color: #454545;
padding-left: 30px;
padding-right: 30px;
&.active,
&:hover {
border-bottom: 3px solid #f26335;
color: #04408d;
}
}
}
.tab-pane {
background: #ffffff;
border-radius: 4px;
margin-top: 20px;
}
}
p {
font-size: 14px;
line-height: 24px;
color: #000;
margin: 10px 0;
}
}
</style>
\ No newline at end of file
src/views/Business/copms/fzzx.vue 0 → 100644
<template>
<div class="fzzx">
<div class="fzzx-list">
<div class="row" v-for="(tmpA, i) in newList" :key="i">
<div class="col-4" v-for="(tmpB, ii) in tmpA" :key="ii">
<span
><a :href="tmpB.fileUrl">{{ tmpB.name }}</a></span
>
</div>
</div>
</div>
</div>
</template>
<script>
import { groupList } from "../../../utils/utils";
export default {
props: ["list"],
created() {
console.log(this.newList, "list");
},
computed: {
newList() {
return groupList(this.list, 3);
},
},
};
</script>
<style lang="scss" scoped>
.fzzx {
width: 100%;
margin: 0 auto;
font-size: 14px;
.fzzx-list {
margin-top: 20px;
.row {
line-height: 40px;
margin: 0;
> div {
text-align: center;
}
span {
cursor: pointer;
a {
color: #008dbd;
text-decoration: none;
}
}
&:nth-child(odd) {
background: rgba(242, 99, 53, 0.04);
}
}
}
}
</style>
\ No newline at end of file
src/views/Business/copms/list.vue
<template>
<div class="list">
<div v-for="(tmp, i) in 10" :key="i" class="row">
<div v-for="(tmp, i) in list" :key="i" class="row">
<div class="col-lg-6 list-left">
<span></span>
<span>墨玉树上老菌菌业有限公司</span>
<span>{{tmp.name}}</span>
</div>
<div class="col-lg-2 list-right">2020-10-20</div>
<div class="col-lg-2 list-right">{{tmp.time}}</div>
</div>
</div>
</template>
<script>
export default {
props: ['list'],
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
......
src/views/Business/index.vue
......@@ -101,13 +101,13 @@ export default {
},
{
name: "条码注册公告",
path: "",
active: "",
path: "/Business/Notice",
active: "zhuce",
},
{
name: "条码注销公告",
path: "",
active: "",
path: "/Business/Notice",
active: "zhuxiao",
},
],
},
......@@ -118,8 +118,8 @@ export default {
children: [
{
name: "我要培训——现场培训/线上培训",
path: "",
active: "",
path: "/Service/Training",
active: "Training",
},
{
name: "我要续展",
......
src/views/Org/BranchMsg.vue
......@@ -3,21 +3,24 @@
<cate :father="branchMsgCate"></cate>
<div class="container">
<div class="branchMsg-cont">
<div class="message row">
<div class="tip col-lg-6 col-12">
<div class="tip-title"><span>重要提示</span></div>
<div class="tip-text">
<p></p>
<p>
湖北编码分支机构办理武汉所辖市以外的湖北省内企业的条码申办及相关业务，武汉市企业欲办理的，请联系<a
href="/org/article.aspx?code_id=4202"
>武汉编码分支机构</a
>。
</p>
<p></p>
<div class="message">
<div class="row">
<div class="tip col-lg-6 col-12">
<div class="tip-title"><span>重要提示</span></div>
<div class="tip-text">
<p></p>
<p>
湖北编码分支机构办理武汉所辖市以外的湖北省内企业的条码申办及相关业务，武汉市企业欲办理的，请联系<a
href="/org/article.aspx?code_id=4202"
>武汉编码分支机构</a
>。
</p>
<p></p>
</div>
</div>
</div>
</div>
<ul class="branchMsg-ul">
<li class="row">
<div class="col-lg-2 col-4">联系人:</div>
......@@ -73,7 +76,7 @@ export default {
},
tip: {
show: true,
}
},
};
},
};
......@@ -81,14 +84,14 @@ export default {
<style lang="scss">
.branchMsg {
@media screen and (min-width: 992px) {
.message{
.message {
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
pointer-events: none;
.tip{
.tip {
pointer-events: auto;
}
}
......@@ -106,6 +109,9 @@ export default {
margin: 20px 0;
position: relative;
.message {
.row {
justify-content: flex-end;
}
.tip {
p {
font-size: 16px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment