Skip to content

G
gs1
Commit 450edfe0 by Tang
Options

feat: 头部导航开发【100%】

parent 5ba78711
Showing with 357 additions and 199 deletions
src/assets/css/_base.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
.editor-preview-context { .editor-preview-context {
height: 500px; height: 500px;
// margin: 20px auto; // margin: 20px auto;
border:1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
overflow: auto; overflow: auto;
...@@ -37,12 +37,14 @@ ...@@ -37,12 +37,14 @@
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
table td, table td,
table th { table th {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
padding: 3px 5px; padding: 3px 5px;
} }
table th { table th {
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
text-align: center; text-align: center;
...@@ -69,6 +71,7 @@ ...@@ -69,6 +71,7 @@
padding: 3px 5px; padding: 3px 5px;
margin: 0 3px; margin: 0 3px;
} }
pre code { pre code {
display: block; display: block;
} }
...@@ -78,39 +81,44 @@ ...@@ -78,39 +81,44 @@
margin: 10px 0 10px 20px; margin: 10px 0 10px 20px;
} }
} }
//查询 //查询
.el-button.query{ .el-button.query {
width:85px; width: 85px;
height: $input-height; height: $input-height;
padding:0; padding: 0;
line-height: $input-height; line-height: $input-height;
border-color: transparent; border-color: transparent;
border-radius: 5px; border-radius: 5px;
background:#ffb73f; background: #ffb73f;
color:#fff; color: #fff;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
&:hover, &:hover,
&:focus{ &:focus {
background:#e59f29; background: #e59f29;
} }
&.is-disabled { &.is-disabled {
opacity: 0.5; opacity: 0.5;
} }
} }
// 取消 // 取消
.el-button.cancel{ .el-button.cancel {
padding:10px 18px; padding: 10px 18px;
border-radius: 5px; border-radius: 5px;
border:1px solid #cbcbcb; border: 1px solid #cbcbcb;
background:#ffffff; background: #ffffff;
color:#6b6a6a; color: #6b6a6a;
font-size: 14px; font-size: 14px;
&:hover, &:hover,
&:focus{ &:focus {
background:#fff1d9; background: #fff1d9;
} }
&.is-disabled { &.is-disabled {
opacity: 0.5; opacity: 0.5;
} }
...@@ -118,55 +126,63 @@ ...@@ -118,55 +126,63 @@
//提交 //提交
.el-button.submit, .el-button.submit,
// 确认 // 确认
.el-button.confirm{ .el-button.confirm {
padding:10px 18px; padding: 10px 18px;
border-radius: 5px; border-radius: 5px;
border-color: transparent; border-color: transparent;
background:#ffb73f; background: #ffb73f;
color:#fff; color: #fff;
font-size: 14px; font-size: 14px;
&:hover, &:hover,
&:focus{ &:focus {
background:#e59f29; background: #e59f29;
} }
&.is-disabled { &.is-disabled {
opacity: 0.5; opacity: 0.5;
} }
} }
// 上传按钮 // 上传按钮
.el-button.upload{ .el-button.upload {
padding:10px 8px; padding: 10px 8px;
border:none; border: none;
color:$system-color1; color: $system-color1;
&:hover, &:hover,
&:focus{ &:focus {
background:transparent background: transparent
} }
} }
// 分页 // 分页
.el-pagination.is-background{ .el-pagination.is-background {
margin-top:20px; margin-top: 20px;
text-align: center; text-align: center;
.el-pager li:not(.disabled).active{
.el-pager li:not(.disabled).active {
background: #FFB73F; background: #FFB73F;
} }
.el-pager li { .el-pager li {
border-radius: 5px; border-radius: 5px;
} }
.btn-prev,.btn-next{
.btn-prev, .btn-next {
border-radius: 5px; border-radius: 5px;
} }
.el-input__inner{
border-radius: 5px!important; .el-input__inner {
&:hover,&:focus { border-radius: 5px !important;
&:hover, &:focus {
border-color: #FFB73F !important; border-color: #FFB73F !important;
} }
} }
.el-input__inner.is-focus { .el-input__inner.is-focus {
border-color: #FFB73F !important; border-color: #FFB73F !important;
} }
...@@ -182,57 +198,65 @@ ...@@ -182,57 +198,65 @@
// 表格 // 表格
.content-list{ .content-list {
.el-table{ .el-table {
@include el-table @include el-table
} }
} }
//表单 //表单
.content-form{ .content-form {
.el-form{ .el-form {
.el-row{ .el-row {
.el-col{ .el-col {
.el-form-item{ .el-form-item {
width: 100%; width: 100%;
.el-form-item__content{
.el-form-item__content {
width: 100%; width: 100%;
p{
color:#acacac; p {
color: #acacac;
text-align: center; text-align: center;
} }
} }
} }
} }
} }
.el-form-item{
.el-form-item {
width: calc(50% - 20px); width: calc(50% - 20px);
.el-form-item__content{
.el-form-item__content {
width: calc(100% - 200px); width: calc(100% - 200px);
} }
&.label-title{
.el-form-item__label{ &.label-title {
font-size:16px; .el-form-item__label {
font-size: 16px;
font-weight: 600; font-weight: 600;
color:#323232; color: #323232;
} }
} }
&.label-caption{
.el-form-item__label{ &.label-caption {
.el-form-item__label {
font-weight: 600; font-weight: 600;
color:#b94339; color: #b94339;
} }
} }
} }
.el-form-item.full-item{
.el-form-item.full-item {
width: calc(100% - 40px); width: calc(100% - 40px);
} }
@include el-form; @include el-form;
&.form-center{ &.form-center {
.el-form-item{ .el-form-item {
margin:0 auto 22px auto; margin: 0 auto 22px auto;
} }
} }
} }
...@@ -240,100 +264,117 @@ ...@@ -240,100 +264,117 @@
// 弹窗 // 弹窗
.el-dialog{ .el-dialog {
width: 600px; width: 600px;
.el-dialog__header{
.el-dialog__title{ .el-dialog__header {
color:#555; .el-dialog__title {
color: #555;
} }
} }
.el-dialog__body{
padding:10px 20px; .el-dialog__body {
padding: 10px 20px;
} }
.el-form{
.el-form {
@include el-form @include el-form
} }
} }
.content-tab{ .content-tab {
.el-tabs{ .el-tabs {
.el-tabs__active-bar{ .el-tabs__active-bar {
background-color:$system-color5; background-color: $system-color5;
} }
.el-tabs__item{
color:#969696; .el-tabs__item {
&.is-active{ color: #969696;
color:$system-color5
&.is-active {
color: $system-color5
} }
} }
} }
} }
.el-dropdown-menu{ .el-dropdown-menu {
.el-dropdown-menu__item{ .el-dropdown-menu__item {
color:$system-color5; color: $system-color5;
a{
color:$system-color5 a {
color: $system-color5
} }
} }
} }
//主体样式 //主体样式
.common-content{ .common-content {
background: $bg-color; background: $bg-color;
border-radius: $fs2; border-radius: $fs2;
padding:0 20px; padding: 0 20px;
padding-bottom:30px; padding-bottom: 30px;
.common-title{
.common-title {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
padding: 30px 0 35px 0; padding: 30px 0 35px 0;
} }
.common-text{
img{ .common-text {
width:100%; img {
width: 100%;
} }
} }
.common-serach{
.common-serach {
padding: 0 !important; padding: 0 !important;
.el-form{
.el-form-item{ .el-form {
margin-right:0; .el-form-item {
margin-right: 0;
} }
.el-form-item__label{
.el-form-item__label {
// vertical-align:-52%; // vertical-align:-52%;
&::before{ &::before {
content:'*'; content: '*';
font-size:20px; font-size: 20px;
color: $side-menu-active-color; color: $side-menu-active-color;
vertical-align: -16%; vertical-align: -16%;
padding-right:4px; padding-right: 4px;
} }
} }
.el-col-2{
.el-col-2 {
text-align: center; text-align: center;
margin-top: 8px; margin-top: 8px;
} }
.editor{
margin-top:25px !important; .editor {
margin-top: 25px !important;
width: 100%;
.el-form-item__content {
width: 100%; width: 100%;
.el-form-item__content{
width:100%;
} }
} }
} }
} }
.common-table /deep/{
.el-table{ .common-table /deep/ {
margin-top:35px; .el-table {
thead{ margin-top: 35px;
thead {
color: #414141; color: #414141;
} }
tr th{ tr th {
background-color: #f4f4f4; background-color: #f4f4f4;
&>.cell{
& > .cell {
font-weight: 500; font-weight: 500;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
...@@ -342,35 +383,41 @@ ...@@ -342,35 +383,41 @@
text-align: center; text-align: center;
} }
} }
tr td{
tr td {
color: #7B7F83; color: #7B7F83;
font-size:11px; font-size: 11px;
text-align: center; text-align: center;
} }
tbody{
tr{ tbody {
tr {
border: 1px solid #000 !important; border: 1px solid #000 !important;
} }
} }
} }
} }
.common-info{
p{ .common-info {
p {
text-indent: 2em; text-indent: 2em;
color: $button-color; color: $button-color;
font-size:$fs2; font-size: $fs2;
} }
} }
.common-opinion{
.common-opinion {
border-top: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4;
padding-top: 20px; padding-top: 20px;
margin-top: 40px; margin-top: 40px;
.cate { .cate {
height: 26px; height: 26px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 15px; font-size: 15px;
margin-bottom: 10px; margin-bottom: 10px;
.cate-ico::after { .cate-ico::after {
content: ""; content: "";
width: 4px; width: 4px;
...@@ -378,45 +425,52 @@ ...@@ -378,45 +425,52 @@
background: #ffb73f; background: #ffb73f;
display: block; display: block;
} }
.cate-name { .cate-name {
line-height: 26px; line-height: 26px;
margin-left: 10px; margin-left: 10px;
color: #414141; color: #414141;
span { span {
color: #969696; color: #969696;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.el-textarea { .el-textarea {
.el-textarea__inner { .el-textarea__inner {
resize: none; resize: none;
} }
} }
} }
.button-Group { .button-Group {
margin-top:25px; margin-top: 25px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.headimg{
.headimg {
width: 52px; width: 52px;
} }
} }
.list_dialog{ .list_dialog {
.el-dialog{ .el-dialog {
.el-dialog__body{ .el-dialog__body {
.el-radio{ .el-radio {
display: block; display: block;
margin: 15px 0; margin: 15px 0;
.el-radio__input.is-checked{
.el-radio__inner{ .el-radio__input.is-checked {
.el-radio__inner {
border-color: #ffb73f; border-color: #ffb73f;
background: #ffb73f; background: #ffb73f;
} }
} }
.el-radio__input.is-checked+.el-radio__label{
.el-radio__input.is-checked + .el-radio__label {
color: #ffb73f; color: #ffb73f;
} }
} }
...@@ -425,16 +479,22 @@ ...@@ -425,16 +479,22 @@
} }
} }
// 外边距 // 外边距
.marginTop20{ .marginTop20 {
margin-top: 20px; margin-top: 20px;
} }
@media screen and (max-width: 992px){ // 鼠标指针样式
.marginTopLg20{ .pointer {
cursor: pointer;
}
.gs-hover:hover {
color: $theme-color1;
}
@media screen and (max-width: 992px) {
.marginTopLg20 {
margin-top: 20px; margin-top: 20px;
} }
} }
src/components/layout/header/HeaderDropdown.vue
<template> <script>
<div class="dropdown-menu w-100 gs-nav-dropdown" const ROW_NUM = 4
:aria-labelledby="`gs-nav-item-${nav.id}`"> export default {
<div class="row title"> name: "HeaderDropdown",
{{ nav.name }} props: {
</div> nav: Object
},
data() {
return {}
},
computed: {
rowNum() {
return ROW_NUM - 1
}
},
methods: {
// 目前只支持两级子代 主要是设计图布局不递归
renderDropdown() {
const children = []
let itemBox = []
if (this.nav.children && this.nav.children.length > 0) {
this.nav.children.forEach(item => {
if (item.children && item.children.length > 0) {
if (itemBox.length !== 0) {
// 循环到大版块，且之前有遗留非大版块导航选项 需要先处理下非大版块导航选项列
children.push(this.renderItemBox([...itemBox]))
itemBox = []
}
children.push(this.renderDropdownRect(item))
} else {
// 处理非大版块导航选项
if (itemBox.length === this.rowNum) {
children.push(this.renderItemBox([...itemBox, item]))
itemBox = []
} else {
itemBox.push(item)
}
}
})
if (itemBox.length !== 0) {
// 循环完之后，有遗留非大版块导航选项 也需要处理
children.push(this.renderItemBox([...itemBox]))
}
}
return (<div class="navbar-dropdown-menu-inner">
{children}
</div>)
},
<div class="row"> // 渲染一个下拉导航里的一个大板块(#1) （带children)
<div class="col-lg-6"> renderDropdownRect(nav) {
<div class="navbar-dropdown-menu-inner"> const children = []
<div class="row"> let itemBox = []
<div class="col-sm mb-3 mb-sm-0"> nav.children.forEach(item => {
<span class="dropdown-header">Classic</span> if (itemBox.length === this.rowNum) {
<a class="dropdown-item " href="#">Corporate</a> children.push(this.renderItemBox([...itemBox, item], true))
<a class="dropdown-item " href="#">Analytics <span itemBox = []
class="badge bg-primary rounded-pill ms-1">Hot</span></a> } else {
<a class="dropdown-item " href="#">Studio</a> itemBox.push(item)
<a class="dropdown-item " href="#">Marketing</a> }
<a class="dropdown-item " href="#">Advertisement</a> })
<a class="dropdown-item " href="#">Consulting</a> if (itemBox.length > 0) {
<a class="dropdown-item " href="#">Portfolio</a> children.push(this.renderItemBox([...itemBox], true))
<a class="dropdown-item " href="#">Software</a> }
<a class="dropdown-item " href="#">Business</a> return (<div class="gs-dropdown-rect">
<div class="rect-title"
vOn:click_stop_prevent={() => {
this.$emit('itemClick', {...nav, parent: ['']})
}}
>
<span class="pointer">{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}</span>
</div> </div>
<!-- End Col --> <div className="rect-body">
{children}
<div class="col-sm">
<div class="mb-3">
<span class="dropdown-header">App</span>
<a class="dropdown-item " href="#">UI Kit</a>
<a class="dropdown-item " href="#">SaaS</a>
<a class="dropdown-item " href="#">Workflow</a>
<a class="dropdown-item " href="#">Payment</a>
<a class="dropdown-item " href="#">Tool</a>
</div> </div>
</div>)
},
<span class="dropdown-header">Onepage</span> // 渲染一个下拉导航里的一列 这个分为在大版块(#1)里的列 和 只是单纯的一列
<a class="dropdown-item " href="#">Corporate</a> renderItemBox(items, isChild = false) {
<a class="dropdown-item " href="#">SaaS <span const classNames = ['gs-dropdown-col', isChild ? 'no-padding-top' : '']
class="badge bg-primary rounded-pill ms-1">Hot</span></a> return (<div class={classNames.join(' ').trim()}>
</div> {items.map(item => {
<!-- End Col --> return (<div class="gs-dropdown-item">
</div> <span vOn:click_stop_prevent={() => {
<!-- End Row --> this.$emit('itemClick', item)
</div> }}
class="pointer gs-hover"
>{item.name}
</span>
</div>)
})}
</div>)
},
},
render() {
return (
<div class="dropdown-menu w-100 gs-nav-dropdown"
aria-labelledby={`gs-nav-item-${this.nav.id}`}>
<div class="row title">
{this.nav.name}
</div> </div>
<!-- End Col -->
<div class="row">
{this.renderDropdown()}
</div> </div>
</div> </div>
</template> )
<script>
export default {
name: "HeaderDropdown",
props: {
nav: Object
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
// 导航item下拉 // 导航item下拉
.dropdown-menu.gs-nav-dropdown { .dropdown-menu.gs-nav-dropdown {
border: none; border: none;
...@@ -73,7 +125,51 @@ export default { ...@@ -73,7 +125,51 @@ export default {
color: #04408D; color: #04408D;
line-height: 25px; line-height: 25px;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 29px;
border-bottom: 1px solid rgba(4, 64, 141, 0.18); border-bottom: 1px solid rgba(4, 64, 141, 0.18);
} }
.navbar-dropdown-menu-inner {
display: flex;
flex-wrap: wrap;
padding-left: 0;
}
}
.gs-dropdown-rect {
display: flex;
flex-direction: column;
.rect-title {
font-weight: 500;
color: #04408D;
line-height: 22px;
font-size: 16px;
padding-bottom: 13px;
}
.rect-body {
display: flex;
flex-direction: column;
}
}
.gs-dropdown-col {
display: flex;
flex-direction: column;
padding-top: 35px;
&.no-padding-top {
padding-top: 0;
}
.gs-dropdown-item {
width: 180px;
padding: 7px 0;
font-weight: 400;
font-size: 14px;
color: #414345;
line-height: 20px;
}
} }
</style> </style>
src/components/layout/header/index.vue
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
aria-expanded="false">{{ nav.name }}</a> aria-expanded="false">{{ nav.name }}</a>
<!-- Dropdown Menu --> <!-- Dropdown Menu -->
<HeaderDropdown v-if="nav.children.length>0" :nav="nav"/> <HeaderDropdown :nav="nav"/>
<!-- End Dropdown Menu --> <!-- End Dropdown Menu -->
</li> </li>
<!-- Nav items End--> <!-- Nav items End-->
......
src/components/layout/header/mock.js
...@@ -12,13 +12,13 @@ export const nav = [ ...@@ -12,13 +12,13 @@ export const nav = [
name: '机构概况', name: '机构概况',
index: 1, index: 1,
link: '/home', link: '/home',
children: [{}] children: []
}, { }, {
id: '2', id: '2',
name: '业务大厅', name: '业务大厅',
index: 2, index: 2,
link: '/home', link: '/home',
children: [{}] children: []
}, { }, {
id: '3', id: '3',
name: '条码查询', name: '条码查询',
...@@ -27,27 +27,28 @@ export const nav = [ ...@@ -27,27 +27,28 @@ export const nav = [
children: [ children: [
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '条件信息查询', name: '条码信息查询',
nameInHeaderNav: '条码查询',
index: 0, index: 0,
link: '/tool', link: '/tool',
children: [ children: [
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '境内条码信息查询', name: '国内条码信息查询',
index: 0, index: 0,
link: '/internal', link: '/tool/internal',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '境外条码信息查询', name: '国外条码信息查询',
index: 1, index: 1,
link: '/external', link: '/tool/external',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '缩短码查询', name: '缩短码查询',
index: 2, index: 2,
link: '/shortcode', link: '/tool/shortcode',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
...@@ -61,30 +62,31 @@ export const nav = [ ...@@ -61,30 +62,31 @@ export const nav = [
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: 'GLN查询', name: 'GLN查询',
index: 1, index: 1,
link: '/gln', link: '/tool/gln',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '自行车企业代码公告查询', name: '自行车企业代码公告查询',
index: 2, index: 2,
link: '/bike', link: '/tool/bike',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '条码术语查询', name: '条码术语查询',
index: 3, index: 3,
link: '/glossary', link: '/tool/glossary',
},{ },
{
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '校验码计算工具', name: '校验码计算工具',
index: 4, index: 4,
link: '/check', link: '/tool/check',
}, },
{ {
id: uuid('gs_nav'), id: uuid('gs_nav'),
name: '国家及地区前缀码查询', name: '国家及地区前缀码查询',
index: 5, index: 5,
link: '/country', link: '/tool/country',
}, },
] ]
...@@ -93,31 +95,31 @@ export const nav = [ ...@@ -93,31 +95,31 @@ export const nav = [
name: '服务中心', name: '服务中心',
index: 4, index: 4,
link: '/home', link: '/home',
children: [{}] children: []
}, { }, {
id: '5', id: '5',
name: '资讯中心', name: '资讯中心',
index: 5, index: 5,
link: '/home', link: '/home',
children: [{}] children: []
}, { }, {
id: '6', id: '6',
name: '知识中心', name: '知识中心',
index: 6, index: 6,
link: '/home', link: '/home',
children: [{}] children: []
}, },
{ {
id: '7', id: '7',
name: '党建文化', name: '党建文化',
index: 7, index: 7,
link: '/home', link: '/home',
children: [{}] children: []
}, { }, {
id: '8', id: '8',
name: '成员专区', name: '成员专区',
index: 8, index: 8,
link: '/home', link: '/home',
children: [{}] children: []
}, },
] ]
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