From e74a7c7afc56cf229058091fe2ae143cf0bdb3ca Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Thu, 22 May 2025 15:03:27 +0800
Subject: [PATCH] style
---
src/components/layout/commonHeader.vue | 349 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 219 insertions(+), 130 deletions(-)
diff --git a/src/components/layout/commonHeader.vue b/src/components/layout/commonHeader.vue
index b8d859f..7ae9715 100644
--- a/src/components/layout/commonHeader.vue
+++ b/src/components/layout/commonHeader.vue
@@ -6,9 +6,9 @@
<div class="left-page-header">
<div @click="goRouter('/')" class="logo">
<img
- src="/src/assets/forexImages/newlogo.png"
- width="26"
- height="26"
+ src="./src/assets/forexImages/newlogo.png"
+ width="40"
+ height="40"
/>
<span class="logoName2"> {{ $title }} </span>
</div>
@@ -49,11 +49,11 @@
<!-- 登录后的右边菜单 -->
<div class="right-page-header" v-else>
<!-- 充值 -->
- <div style="margin: auto; top: 0; left: 0; bottom: 0; right: 0">
+ <!-- <div style="margin: auto; top: 0; left: 0; bottom: 0; right: 0">
<div
@click="goRechargePage"
style="
- background-color: rgb(42, 100, 251);
+ background-color: #f7b328;
font-size: 14px;
font-weight: 700;
width: 85px;
@@ -66,10 +66,9 @@
gap: 6px;
"
>
- <!-- <img src="https://BCWP.com/img/material-symbols.248b9d5f.svg" /> -->
{{ $t("message.user.chongzhi") }}
</div>
- </div>
+ </div> -->
<!-- 钱包订单用户中心 -->
<menu-item
v-for="(_, i) in rightMenuList"
@@ -79,18 +78,81 @@
:isRight="true"
>
</menu-item>
- <img
+ <i
+ @click="goApp()"
+ data-v-7747fbf3=""
+ class="el-icon Icon"
+ style="font-size: 24px; --color: #fff"
+ ><svg
+ data-v-7747fbf3=""
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 1024 1024"
+ >
+ <path
+ fill="currentColor"
+ d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"
+ ></path>
+ </svg>
+ <div
+ data-v-7747fbf3=""
+ class="list downloadList"
+ style="display: none"
+ >
+ <i
+ data-v-7747fbf3=""
+ class="el-icon list_Icon"
+ style="font-size: 20px; --color: #fff"
+ ><svg
+ data-v-7747fbf3=""
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 1024 1024"
+ >
+ <path
+ fill="currentColor"
+ d="M512 320 192 704h639.936z"
+ ></path></svg
+ ></i>
+ <div data-v-7747fbf3="" class="content">
+ <canvas
+ data-v-7747fbf3=""
+ width="200"
+ height="200"
+ style="width: 100px; height: 100px"
+ ></canvas
+ ><span data-v-7747fbf3="" class="more">More</span>
+ </div>
+ </div></i
+ >
+
+ <i
+ @click="handleChangeLang('lang')"
+ data-v-7747fbf3=""
+ class="el-icon Icon languageIcon"
+ style="font-size: 24px; --color: #fff"
+ >
+ <svg
+ data-v-7747fbf3=""
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 1024 1024"
+ >
+ <path
+ fill="currentColor"
+ d="M778.752 788.224a382.464 382.464 0 0 0 116.032-245.632 256.512 256.512 0 0 0-241.728-13.952 762.88 762.88 0 0 1 125.696 259.584zm-55.04 44.224a699.648 699.648 0 0 0-125.056-269.632 256.128 256.128 0 0 0-56.064 331.968 382.72 382.72 0 0 0 181.12-62.336m-254.08 61.248A320.128 320.128 0 0 1 557.76 513.6a715.84 715.84 0 0 0-48.192-48.128 320.128 320.128 0 0 1-379.264 88.384 382.4 382.4 0 0 0 110.144 229.696 382.4 382.4 0 0 0 229.184 110.08zM129.28 481.088a256.128 256.128 0 0 0 331.072-56.448 699.648 699.648 0 0 0-268.8-124.352 382.656 382.656 0 0 0-62.272 180.8m106.56-235.84a762.88 762.88 0 0 1 258.688 125.056 256.512 256.512 0 0 0-13.44-241.088A382.464 382.464 0 0 0 235.84 245.248zm318.08-114.944c40.576 89.536 37.76 193.92-8.448 281.344a779.84 779.84 0 0 1 66.176 66.112 320.832 320.832 0 0 1 282.112-8.128 382.4 382.4 0 0 0-110.144-229.12 382.4 382.4 0 0 0-229.632-110.208zM828.8 828.8a448 448 0 1 1-633.6-633.6 448 448 0 0 1 633.6 633.6"
+ ></path>
+ </svg>
+ </i>
+ <!-- <img
@click="goApp()"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAMAAACfvvDEAAAAAXNSR0IArs4c6QAAAF1QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuQcU8AAAAB50Uk5TAAEQESBBT1BfYG9wcX+Ajo+Qnp+vvr/Oz97f7u/+OkswXgAAAMVJREFUOMvt1c0OgjAQBOBpRXFFxh8EQWnf/zE9mEAhdKkHEw/OsfmS3W7SLfALkab3i2n2U1j5eE4hLL0WjtCq0D/tIHNdOhkkdRmUn8k2bxNlMT+ISvnLb8iHJm+Wg+R4vCAJ8C0dYc5adQHoBXQlDPU+BaCAExi5EQGLbAJjdycAmCJlSgQgafOkkcTJBzNfkwkvrr4GqTpFZpMVtFHkcRvm8nGfrhxX4orcjRus12XQPhOLA6hdHNaz7X13y+kOX/wzXhVNdrraQcPPAAAAAElFTkSuQmCC"
alt=""
class="child-menu-img"
style="margin-left: 38px"
- />
- <img
+ /> -->
+ <!-- <img
@click="handleChangeLang('lang')"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAMAAACfvvDEAAAAAXNSR0IArs4c6QAAAHJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmuLzngAAACV0Uk5TAAEQESAwP0BBT1BRXl9gYW9wcX+Ajo+en6Cvvr/Oz93e3+7v/pZTn78AAAGJSURBVDjLzZTbUoMwFEU3GAxWS4utBZVWaLP+/xd9SGhCRRxnfHA/nZA1nHukfybb0RkpX2Ly3UlaATiru64133IX1jIDAOdcJbzM/tgOMEiveDXKOuiLr+AWYC0TQFyuZ8DVt+AOAKP9SLLXHYDbTcEVAJ00XMleWQfg1iloLgDU0Tk4o2efXFqCk7+0qhKyVumt9wiO99JbJGl8oBP/IbjT9edjoOHiGMMMilY45lfrt2qDrIo2lZENVuPBYgysCmUdk6+0iRWLVb8tErhKj6P5IEmqI1nfkGWsraTYapt03Xe+jOYS6RJyt+x9G71vJ72cyaicZmRilabkw/Xswug3QVamSVXIjubv25kFRevmODN1QxLnUdlpnL+vk/yakG/KQj5P0f27/1SkBY3l/EgCLc4zG1eEjXOTQa4Xtng7TX8PcMmTzh/mXwZp74BaebLum1lQWvXQSW0AG2UDrr+fq79pHVbGJ9cbbXCH755b03ZS5fx0ZMfD4vbm0qp3x3v98Hz/jT4BmyVmQK6IMAEAAAAASUVORK5CYII="
class="child-menu-img"
- />
+ /> -->
<!-- 选择的语言 -->
<!-- <div @click="handleChangeLang('lang')" style="margin-left: 16px">-->
<!-- {{ $t("message.home.language") }}-->
@@ -146,6 +208,10 @@
const leftMenuList = [
{
+ title: "home", //首页
+ url: "/page",
+ },
+ {
title: "hangqing", //市场
url: "/market",
},
@@ -167,17 +233,26 @@
// title: "xianhuojiaoyishouye", //现货交易
// url: "/coin/spot/btc",
// },
+ // {
+ // title: "shandui", //闪兑
+ // url: "/exchange",
+ // },
{
- title: "shandui", //闪兑
- url: "/exchange",
+ title: "bibijiaoyi", // 现货交易
+ url: "/coin/spot/btc",
},
{
- title: "jiaoyi", // 数字货币= 现货交易 永续合约 交割合约
- menuList: [
- ...contractList("/coin/constract/btc"),
- ...spotList("/coin/spot/btc"),
- ],
+ title: "heyue", // 永续合约
+ url: "/coin/constract/btc",
},
+
+ // {
+ // title: "jiaoyi", // 数字货币= 现货交易 永续合约 交割合约
+ // menuList: [
+ // ...contractList("/coin/constract/btc"),
+ // ...spotList("/coin/spot/btc"),
+ // ],
+ // },
// {
// title: "waihui", // 外汇=永续合约 交割合约
// menuList: contractList("/forex/constract/BTCUSD"),
@@ -197,20 +272,20 @@
// // menuList: [],
// // tips: true,
// // },
+ // {
+ // title: "licaijijin", //
+ // url: `/fundMa`,
+ // iconPath: getImages("headIcon/left-menu/pig.png"),
+ // },
{
- title: "licaijijin", //
- url: `/fundMa`,
- iconPath: getImages("headIcon/left-menu/pig.png"),
- },
- {
- title: "kuangchisuocang", //
+ title: "staking", //
url: `/fundMakc`,
- iconPath: getImages("headIcon/left-menu/min.png"),
+ // iconPath: getImages("headIcon/left-menu/min.png"),
},
- {
- title: "tuiguangzhouxin", //推广中心
- url: "/promote",
- },
+ // {
+ // title: "tuiguangzhouxin", //推广中心
+ // url: "/promote",
+ // },
/* {
title: "jinrongyewu", // 金融业务=基金理财+矿池锁仓+C2C
menuList: [
@@ -237,102 +312,102 @@
];
const rightMenuList = [
- {
- title: "qianbao",
- menuList: [
- {
- urlPath: "/wallet/walletOverview",
- title: "qianbaozonglan",
- iconPath: getImages("headIcon/wallet-menu/wallet-overview.png"),
- },
- // // etf
- // {
- // urlPath: "/wallet/etfAccounts",
- // title: "etfZhanghu",
- // iconPath: getImages("headIcon/wallet-menu/etf.png"),
- // },
- // // 外汇
- // {
- // urlPath: "/wallet/forexAccounts",
- // title: "waihuiZhanghu",
- // iconPath: getImages("headIcon/wallet-menu/forex.png"),
- // },
- // // 数字货币
- // {
- // urlPath: "/wallet/cryptosAccounts",
- // title: "shuzihuobiZhanghu",
- // iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
- // },
- // // 美股
- // {
- // urlPath: "/wallet/usStocksAccounts",
- // title: "meiguZhanghu",
- // iconPath: getImages("headIcon/wallet-menu/us.png"),
- // },
- // 现货账户
- {
- urlPath: "/wallet/spot",
- title: "xianhuozhanghu",
- iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
- },
- // 合约账户
- {
- urlPath: "/wallet/contractAccounts",
- title: "heyuezhanghu",
- iconPath: getImages("headIcon/wallet-menu/us.png"),
- },
- {
- urlPath: "/wallet/financialAccounts",
- title: "licaizhanghu",
- iconPath: getImages("headIcon/wallet-menu/financial-account.png"),
- },
- ],
- },
- {
- title: "dingdan",
- menuList: [
- // {
- // urlPath: "/order/etfOrder",
- // title: "etflishi",
- // iconPath: getImages("headIcon/wallet-menu/etf.png"),
- // },
- // {
- // urlPath: "/order/forexOrder",
- // title: "waihuilishi",
- // iconPath: getImages("headIcon/wallet-menu/forex.png"),
- // },
- {
- urlPath: "/order/coinOrder",
- title: "shuzihuobilishi",
- iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
- },
- // {
- // urlPath: "/order/usStocksOrder",
- // title: "meigulishi",
- // iconPath: getImages("headIcon/wallet-menu/us.png"),
- // },
- {
- urlPath: "/order/financialOrder",
- title: "licailishi",
- iconPath: getImages("headIcon/wallet-menu/financial-account.png"),
- },
- {
- urlPath: "/order/changeRecord",
- title: "zhangbianjilu",
- iconPath: getImages("headIcon/wallet-menu/record.png"),
- },
- {
- urlPath: "/order/walletHistory",
- title: "qianbaolishi",
- iconPath: getImages("headIcon/wallet-menu/wallet-history.png"),
- },
- {
- urlPath: "/order/exchangeOrder",
- title: "duihuanlishi",
- iconPath: getImages("headIcon/wallet-menu/exchange.png"),
- },
- ],
- },
+ // {
+ // title: "qianbao",
+ // menuList: [
+ // {
+ // urlPath: "/wallet/walletOverview",
+ // title: "qianbaozonglan",
+ // iconPath: getImages("headIcon/wallet-menu/wallet-overview.png"),
+ // },
+ // // etf
+ // {
+ // urlPath: "/wallet/etfAccounts",
+ // title: "etfZhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/etf.png"),
+ // },
+ // // 外汇
+ // {
+ // urlPath: "/wallet/forexAccounts",
+ // title: "waihuiZhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/forex.png"),
+ // },
+ // // 数字货币
+ // {
+ // urlPath: "/wallet/cryptosAccounts",
+ // title: "shuzihuobiZhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
+ // },
+ // // 美股
+ // {
+ // urlPath: "/wallet/usStocksAccounts",
+ // title: "meiguZhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/us.png"),
+ // },
+ // 现货账户
+ // {
+ // urlPath: "/wallet/spot",
+ // title: "xianhuozhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
+ // },
+ // 合约账户
+ // {
+ // urlPath: "/wallet/contractAccounts",
+ // title: "heyuezhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/us.png"),
+ // },
+ // {
+ // urlPath: "/wallet/financialAccounts",
+ // title: "licaizhanghu",
+ // iconPath: getImages("headIcon/wallet-menu/financial-account.png"),
+ // },
+ // ],
+ // },
+ // {
+ // title: "dingdan",
+ // menuList: [
+ // {
+ // urlPath: "/order/etfOrder",
+ // title: "etflishi",
+ // iconPath: getImages("headIcon/wallet-menu/etf.png"),
+ // },
+ // {
+ // urlPath: "/order/forexOrder",
+ // title: "waihuilishi",
+ // iconPath: getImages("headIcon/wallet-menu/forex.png"),
+ // },
+ // {
+ // urlPath: "/order/coinOrder",
+ // title: "shuzihuobilishi",
+ // iconPath: getImages("headIcon/wallet-menu/cryptos.png"),
+ // },
+ // {
+ // urlPath: "/order/usStocksOrder",
+ // title: "meigulishi",
+ // iconPath: getImages("headIcon/wallet-menu/us.png"),
+ // },
+ // {
+ // urlPath: "/order/financialOrder",
+ // title: "licailishi",
+ // iconPath: getImages("headIcon/wallet-menu/financial-account.png"),
+ // },
+ // {
+ // urlPath: "/order/changeRecord",
+ // title: "zhangbianjilu",
+ // iconPath: getImages("headIcon/wallet-menu/record.png"),
+ // },
+ // {
+ // urlPath: "/order/walletHistory",
+ // title: "qianbaolishi",
+ // iconPath: getImages("headIcon/wallet-menu/wallet-history.png"),
+ // },
+ // {
+ // urlPath: "/order/exchangeOrder",
+ // title: "duihuanlishi",
+ // iconPath: getImages("headIcon/wallet-menu/exchange.png"),
+ // },
+ // ],
+ // },
{
title: "zhanghu",
menuList: [
@@ -434,7 +509,7 @@
</script>
<style scoped>
.page-header-background {
- background-color: #ffffff;
+ background-color: rgb(24, 26, 32);
padding: 0 20px;
position: fixed;
top: 0;
@@ -486,6 +561,19 @@
color: #00d6ca;
}
+.right-page-header {
+ display: flex;
+ align-items: center;
+ .Icon {
+ width: 34px;
+ height: 34px;
+ margin-left: 24px;
+ padding: 5px;
+ cursor: pointer;
+ position: relative;
+ }
+}
+
/* 子菜单 */
.child-menu-box {
position: absolute;
@@ -535,13 +623,14 @@
}
.logoName2 {
- margin-left: 14px;
+ /* margin-left: 14px; */
margin-right: 40px;
display: flex;
align-items: center;
font-weight: 700;
- font-size: 22px;
- color: #2b64fb;
+ color: #fff;
+ font-size: 16px;
+ letter-spacing: 3px;
}
.el-dropdown-link {
@@ -572,7 +661,7 @@
line-height: 34px;
padding: 0 20px;
color: #fff !important;
- background: #2a64fb;
+ background: #f7b328;
border-radius: 8px;
opacity: 1;
margin-top: 9px;
--
Gitblit v1.9.3