From b9d4369bbc1121c70bc313250e5d1048faf7edb0 Mon Sep 17 00:00:00 2001 From: ltlzx <942659938@qq.com> Date: Wed, 6 Jul 2022 16:46:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 6 +- src/assets/scss/layout/_header.css | 308 +++++++++++++++++++++++++ src/assets/scss/layout/_header.min.css | 1 + src/assets/scss/layout/_header.scss | 6 +- src/assets/scss/module/_contract.scss | 3 +- src/i18n/cn.json | 2 +- src/index.html | 4 +- src/utils/consts.js | 2 +- src/views/home/index.vue | 4 +- 9 files changed, 325 insertions(+), 11 deletions(-) create mode 100644 src/assets/scss/layout/_header.css create mode 100644 src/assets/scss/layout/_header.min.css diff --git a/src/App.vue b/src/App.vue index 0a3b8cb..be4721a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -80,11 +80,13 @@ export default { @import './assets/scss/base/_base.scss'; @import './assets/scss/module/_module.scss'; .home-bg { - background: #172636 !important; +// background: #172636 !important; + background: #dedede !important; border: none !important; // height: 100px; .nav-link { - color: #fff; + // color: #fff; + color:#172636; @include fs(14); } diff --git a/src/assets/scss/layout/_header.css b/src/assets/scss/layout/_header.css new file mode 100644 index 0000000..e1b19e3 --- /dev/null +++ b/src/assets/scss/layout/_header.css @@ -0,0 +1,308 @@ +@keyframes pulse { + 0% { + opacity: 1; + width: 7px; + height: 7px; + left: 0; + top: 0; + } + 95% { + opacity: 0.1; + left: -10.5px; + top: -10.5px; + width: 28px; + height: 28px; + } + 100% { + opacity: 0; + width: 7px; + height: 7px; + left: 0; + top: 0; + } +} + +@keyframes slideIn { + 0% { + transform: translateY(1rem); + opacity: 0; + } + 100% { + transform: translateY(0rem); + opacity: 1; + } + 0% { + transform: translateY(1rem); + opacity: 0; + } +} + +#common-header { + background: #dedede !important; + color: #172636; +} + +header nav a { + color: inherit; +} + +header nav a:hover { + color: #c99445; +} + +header .navbar-brand { + padding: 0; +} + +header .navbar-brand img { + height: 45px; +} + +.navbar-expand-lg .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; +} + +header nav .nav-item.active a { + color: #c99445; +} + +header .nav-link.btn { + padding: 5px 0; +} + +.circle-pulse { + background: #0089ff; + width: 7px; + height: 7px; + border-radius: 50%; + position: absolute; + right: 12px; + top: 12px; +} + +.circle-pulse:after { + background-color: #0089ff; + content: ""; + display: table; + border-radius: 50%; + position: absolute; + animation-name: pulse; + animation-duration: 0.9s; + animation-iteration-count: infinite; + animation-timing-function: ease-out; +} + +.header-custom-icon .nav-link { + line-height: 0; + margin-top: 6px; +} + +.dropdown-item { + color: #18214d; + font-size: 14px; +} + +.dropdown-item:focus, +.dropdown-item:active { + background-color: #f8f9fa; + color: #16181b; +} + +.header-img-icon .nav-link.dropdown-toggle { + padding-right: 0; +} + +.header-custom-icon a:after, +.header-img-icon a:after { + display: none; +} + +.header-custom-icon .dropdown-menu, +.header-img-icon .dropdown-menu { + padding: 0; + margin-top: 8px; +} + +.dropdown-menu { + max-width: 280px; + position: absolute; + right: 0; + left: auto; + border-radius: 5px; + margin-top: 12px; + border: 1px solid #f2f4f9; + box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 14px -6px; + animation-duration: 0.3s; + animation-fill-mode: both; + animation-name: slideIn; +} + +.dropdown-menu::before { + content: ""; + width: 13px; + height: 13px; + background: #fff; + position: absolute; + top: -8px; + right: 5%; + transform: rotate(45deg); + border-top: 1px solid #f2f4f9; + border-left: 1px solid #f2f4f9; + z-index: -1; +} + +.dropdown-menu p { + color: #18214d; + font-weight: 600; +} + +.dropdown-menu a:hover { + text-decoration: none; +} + +.dropdown-menu a.text-muted:hover { + color: #007bff !important; +} + +.header-img-icon .nav-link img { + width: 30px; +} + +.header-custom-icon i { + font-size: 20px; + color: #758696; +} + +.dropdown-header { + padding: 12px 20px; + font-size: 13px; + border-bottom: 1px solid #f2f4f9; +} + +.dropdown-body { + padding: 5px; + max-height: 290px; + position: relative; + overflow-y: auto; +} + +.dropdown-body .dropdown-item { + display: flex; + align-items: center; + padding: 9px 16px; +} + +.dropdown-body .dropdown-item .content { + margin-left: 15px; + width: 200px; + white-space: normal; +} + +.dropdown-item .icon { + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: #f7f7f7; +} + +.dropdown-body .dropdown-item .content p { + margin: 0; + font-size: 13px; + font-weight: 400; +} + +.dropdown-body .dropdown-item .content p.sub-text { + font-size: 12px; +} + +.dropdown-footer { + padding: 10px 20px; + border-top: 1px solid #f2f4f9; + font-size: 14px; +} + +.dropdown-item:nth-child(1) .icon { + background: rgba(114, 124, 245, 0.1); +} + +.dropdown-item:nth-child(1) .icon i { + color: #727cf5; +} + +.dropdown-item:nth-child(2) .icon { + background: rgba(255, 51, 102, 0.1); +} + +.dropdown-item:nth-child(2) .icon i { + color: #ff5680; +} + +.dropdown-item:nth-child(3) .icon { + background: rgba(102, 209, 209, 0.1); +} + +.dropdown-item:nth-child(3) .icon i { + color: #66d1d1; +} + +.dropdown-item:nth-child(4) .icon { + background: rgba(251, 188, 6, 0.1); +} + +.dropdown-item:nth-child(4) .icon i { + color: #fbbc06; +} + +.dropdown-item:nth-child(5) .icon { + background: rgba(16, 183, 89, 0.1); +} + +.dropdown-item:nth-child(5) .icon i { + color: #10b759; +} + +.header-img-icon .dropdown-header { + padding: 0px 20px; +} + +.header-img-icon .profile-nav .nav-item .nav-link { + font-size: 14px; + padding: 5px 20px; +} + +.header-img-icon .profile-nav { + padding-bottom: 11px; +} + +.header-img-icon .profile-nav .nav-item .nav-link:hover { + color: #18214d; + background-color: #f8f9fa; +} + +.header-img-icon .profile-nav .nav-item .nav-link.red { + color: #f74745; +} + +.header-img-icon .profile-nav .nav-item .nav-link.red:hover { + color: #f74745 !important; +} + +.header-img-icon .dropdown-body { + padding: 10px 0 0; +} + +.header-img-icon .dropdown-header .name { + font-size: 16px; +} + +.header-img-icon .dropdown-header { + padding: 20px 20px 0; +} + +.header-img-icon .profile-nav .nav-item .nav-link i { + margin-right: 15px; +} diff --git a/src/assets/scss/layout/_header.min.css b/src/assets/scss/layout/_header.min.css new file mode 100644 index 0000000..a237e4a --- /dev/null +++ b/src/assets/scss/layout/_header.min.css @@ -0,0 +1 @@ +@keyframes pulse{0%{opacity:1;width:7px;height:7px;left:0;top:0}95%{opacity:0.1;left:-10.5px;top:-10.5px;width:28px;height:28px}100%{opacity:0;width:7px;height:7px;left:0;top:0}}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}100%{transform:translateY(0rem);opacity:1}0%{transform:translateY(1rem);opacity:0}}#common-header{background:#dedede !important;color:#172636}header nav a{color:inherit}header nav a:hover{color:#c99445}header .navbar-brand{padding:0}header .navbar-brand img{height:45px}.navbar-expand-lg .navbar-nav .nav-link{padding-right:1rem;padding-left:1rem}header nav .nav-item.active a{color:#c99445}header .nav-link.btn{padding:5px 0}.circle-pulse{background:#0089ff;width:7px;height:7px;border-radius:50%;position:absolute;right:12px;top:12px}.circle-pulse:after{background-color:#0089ff;content:"";display:table;border-radius:50%;position:absolute;animation-name:pulse;animation-duration:0.9s;animation-iteration-count:infinite;animation-timing-function:ease-out}.header-custom-icon .nav-link{line-height:0;margin-top:6px}.dropdown-item{color:#18214d;font-size:14px}.dropdown-item:focus,.dropdown-item:active{background-color:#f8f9fa;color:#16181b}.header-img-icon .nav-link.dropdown-toggle{padding-right:0}.header-custom-icon a:after,.header-img-icon a:after{display:none}.header-custom-icon .dropdown-menu,.header-img-icon .dropdown-menu{padding:0;margin-top:8px}.dropdown-menu{max-width:280px;position:absolute;right:0;left:auto;border-radius:5px;margin-top:12px;border:1px solid #f2f4f9;box-shadow:rgba(0,0,0,0.2) 0px 2px 14px -6px;animation-duration:0.3s;animation-fill-mode:both;animation-name:slideIn}.dropdown-menu::before{content:"";width:13px;height:13px;background:#fff;position:absolute;top:-8px;right:5%;transform:rotate(45deg);border-top:1px solid #f2f4f9;border-left:1px solid #f2f4f9;z-index:-1}.dropdown-menu p{color:#18214d;font-weight:600}.dropdown-menu a:hover{text-decoration:none}.dropdown-menu a.text-muted:hover{color:#007bff !important}.header-img-icon .nav-link img{width:30px}.header-custom-icon i{font-size:20px;color:#758696}.dropdown-header{padding:12px 20px;font-size:13px;border-bottom:1px solid #f2f4f9}.dropdown-body{padding:5px;max-height:290px;position:relative;overflow-y:auto}.dropdown-body .dropdown-item{display:flex;align-items:center;padding:9px 16px}.dropdown-body .dropdown-item .content{margin-left:15px;width:200px;white-space:normal}.dropdown-item .icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f7f7f7}.dropdown-body .dropdown-item .content p{margin:0;font-size:13px;font-weight:400}.dropdown-body .dropdown-item .content p.sub-text{font-size:12px}.dropdown-footer{padding:10px 20px;border-top:1px solid #f2f4f9;font-size:14px}.dropdown-item:nth-child(1) .icon{background:rgba(114,124,245,0.1)}.dropdown-item:nth-child(1) .icon i{color:#727cf5}.dropdown-item:nth-child(2) .icon{background:rgba(255,51,102,0.1)}.dropdown-item:nth-child(2) .icon i{color:#ff5680}.dropdown-item:nth-child(3) .icon{background:rgba(102,209,209,0.1)}.dropdown-item:nth-child(3) .icon i{color:#66d1d1}.dropdown-item:nth-child(4) .icon{background:rgba(251,188,6,0.1)}.dropdown-item:nth-child(4) .icon i{color:#fbbc06}.dropdown-item:nth-child(5) .icon{background:rgba(16,183,89,0.1)}.dropdown-item:nth-child(5) .icon i{color:#10b759}.header-img-icon .dropdown-header{padding:0px 20px}.header-img-icon .profile-nav .nav-item .nav-link{font-size:14px;padding:5px 20px}.header-img-icon .profile-nav{padding-bottom:11px}.header-img-icon .profile-nav .nav-item .nav-link:hover{color:#18214d;background-color:#f8f9fa}.header-img-icon .profile-nav .nav-item .nav-link.red{color:#f74745}.header-img-icon .profile-nav .nav-item .nav-link.red:hover{color:#f74745 !important}.header-img-icon .dropdown-body{padding:10px 0 0}.header-img-icon .dropdown-header .name{font-size:16px}.header-img-icon .dropdown-header{padding:20px 20px 0}.header-img-icon .profile-nav .nav-item .nav-link i{margin-right:15px} diff --git a/src/assets/scss/layout/_header.scss b/src/assets/scss/layout/_header.scss index c295d11..4d28a52 100644 --- a/src/assets/scss/layout/_header.scss +++ b/src/assets/scss/layout/_header.scss @@ -37,8 +37,10 @@ } } #common-header{ - background: #172636; - color: white; +// background: #172636; + background: #dedede !important; + // color: white; + color:#172636; } header nav a { diff --git a/src/assets/scss/module/_contract.scss b/src/assets/scss/module/_contract.scss index 0e7f702..096904c 100644 --- a/src/assets/scss/module/_contract.scss +++ b/src/assets/scss/module/_contract.scss @@ -104,7 +104,8 @@ $panel:#222e3d; $panel-1: #455c71; $border: #2a2e39; - $color: #c0c4cc; + // $color: #c0c4cc; + $color: #172636; background: $page-bg; color: $color; diff --git a/src/i18n/cn.json b/src/i18n/cn.json index a7d7e1b..7e4978f 100644 --- a/src/i18n/cn.json +++ b/src/i18n/cn.json @@ -1048,7 +1048,7 @@ "TopEncryptionRiskManagement": "顶级加密风控管理", "EscortYourPropertySafety": "为您的财产安全保驾护航", "BuyCoins": "买币", - "ProvidedByTheExperimentalCenter": "由NHACoin实验中心提供", + "ProvidedByTheExperimentalCenter": "由CINSCoin实验中心提供", "StartCurrencyTradingNow": "立刻开始货币交易", "ScanTheQRCodeBelowToDownload": "扫描下方二维码下载", "AndroidScanCodeDownload": "Android扫码下载", diff --git a/src/index.html b/src/index.html index 84a40e0..b0f33b1 100644 --- a/src/index.html +++ b/src/index.html @@ -21,7 +21,7 @@ for (var i = 0; i < mobileAgent.length; i++) { if (browser.indexOf(mobileAgent[i]) != -1) { //todo 手机版跳转 - window.location.href = 'https://h5.nhacoin.com'; + window.location.href = 'https://h5.cinscoin.com'; break; } } @@ -68,7 +68,7 @@ - +