Skip to content

G
gs1
Commit 01da4153 by 林家欣
Options

feat: 地方编码分支机构切图50%

parent f0a3a282
Showing with 237 additions and 24 deletions
src/assets/css/main.scss
......@@ -3,4 +3,8 @@
@import "./_style.scss";
@import "./_icon.scss";
@import "./_mixin.scss";
@import "./_base.scss";
\ No newline at end of file
@import "./_base.scss";
@import "../../../node_modules/bootstrap/scss/bootstrap";
// @import "../../../node_modules/bootstrap/scss/functions";
// @import "../../../node_modules/bootstrap/scss/variables";
// @import "../../../node_modules/bootstrap/scss/mixins";
\ No newline at end of file
src/components/layout/footer.vue
......@@ -71,9 +71,8 @@ export default {
.foot {
background: #fff;
.foot-cate {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0e2c6b;
color: #0E2C6B;
font-size: 16px;
margin-bottom: 10px;
margin-top: 30px;
......@@ -98,6 +97,7 @@ export default {
.link {
div {
line-height: 30px;
color: #0E2C6B;
}
}
.qrcode {
......
src/components/main.vue
<template>
<div>
<Header></Header>
<router-view></router-view>
<div class="router-view">
<router-view></router-view>
</div>
<Footer></Footer>
</div>
</template>
......@@ -27,5 +29,8 @@ export default {
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.router-view{
padding: 20px 0;
}
</style>
src/router/index.js
......@@ -6,7 +6,7 @@ Vue.use(VueRouter)
// 解决首页路由跳转的时候同一个路由多次添加，未跳转完成就重复跳转
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
VueRouter.prototype.push = function push(to) {
return routerPush.call(this, to).catch(err => err)
}
......@@ -29,22 +29,32 @@ const routes = [
meta: {
name: "机构概况",
},
component: () => import("@/views/Org/index")
component: () => import("@/views/Org/index"),
children: [
{
path: "/Org/Branch",
name: "Branch",
meta: {
name: "地方编码分支机构",
},
component: () => import("@/views/Org/Branch.vue")
}
],
}
]
},
{
path: "/",
redirect: "/login"
},
// {
// path: "/",
// redirect: "/login"
// },
{
path: "*",
redirect: "/404"
},
{
path:"/404",
name:"404",
component:() => import("@/views/User/404")
path: "/404",
name: "404",
component: () => import("@/views/User/404")
},
{
path: "/login",
......
src/views/Org/Branch.vue 0 → 100644
<template>
<div class="branch">
<div class="cate-name">地方编码分支机构</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
class="bi flex-shrink-0 me-2"
width="16"
height="19"
role="img"
aria-label="Danger:"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
/>
</svg>
<div>
在地为下列市或直辖市或自治区的企业，办理条码申办及相关业务时，请联系以下编码分支机构：
</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
Home
</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"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
data-bs-target="#contact"
type="button"
role="tab"
aria-controls="contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
11
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
222
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
33
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {
console.log(this.$route, "this.$route");
},
};
</script>
<style lang="scss" scoped>
.branch {
.cate-name {
color: #454545;
font-size: 18px;
}
.alert {
margin: 30px 0 20px 0;
font-size: 14px;
}
.alert-danger {
@include alert-variant(#fef1ec, none, #f26335);
}
}
</style>
\ No newline at end of file
src/views/Org/index.vue
<template>
<div>
ORG
<div class="org container">
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">机构概况</a></li>
<li class="breadcrumb-item active" aria-current="page">地方编码分支机构</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-3">
<left/>
</div>
<div class="col-lg-9">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import left from '../comps/left.vue'
export default {
components: {
left,
},
data() {
return {
}
return {};
},
created() {
console.log(this.$route, 'this.$route');
console.log(this.$route, "this.$route");
},
}
};
</script>
<style lang="scss" scoped>
.org{
.breadcrumb{
margin-bottom: 20px;
a{
color: #00799E;
}
}
}
</style>
\ No newline at end of file
src/views/comps/left.vue 0 → 100644
<template>
<div class="left">
<div class="list-group">
<a
href="#"
class="list-group-item list-group-item-action"
aria-current="true"
>
中心简介
</a>
<a href="#" class="list-group-item list-group-item-action">中心领导</a>
<a href="#" class="list-group-item list-group-item-action">内设机构</a>
<a href="#" class="list-group-item list-group-item-action"
>质检中心/协会/杂志社/标委会/其他</a
>
<a class="list-group-item list-group-item-action active"
>地方编码分支机构</a
>
<a class="list-group-item list-group-item-action"
>国际物品编码组织（GS1）</a
>
<a class="list-group-item list-group-item-action"
>国际物品编码组织（GS1）成员网站</a
>
<a class="list-group-item list-group-item-action">质量管理体系</a>
</div>
</div>
</template>
<style lang="scss" scoped>
.left {
background: #fff;
.list-group {
border-radius: 0;
.list-group-item {
border: 0;
font-size: 14px;
&.active {
background: rgba(242, 99, 53, 0.1);
color: #f26335;
border-right: 3px solid #f26335;
}
}
}
}
</style>
\ No newline at end of file
vue.config.js
......@@ -32,7 +32,7 @@ module.exports = {
camelCase: true,
},
sass: {
data: `@import "@/assets/css/_style.scss";`
data: `@import "@/assets/css/main.scss";`
}
}
},
......
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