Skip to content

G
gs1
Commit 450edfe0 by Tang
Options

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

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