You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
798 lines
25 KiB
798 lines
25 KiB
<template>
|
|
<header id="common-header" :class="[`light-bb`, hook]">
|
|
<nav class="navbar navbar-expand-lg" style="background-color: #121212;">
|
|
<a class="navbar-brand" href="#/">
|
|
<img :src="appConfig.head_logo" alt="logo"/>
|
|
<!-- <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/> -->
|
|
<!-- <span class="logo-text">
|
|
AMATAK
|
|
</span>-->
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
|
|
aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation" @click="toggleAnimation">
|
|
<!-- <i class="icon ion-md-menu"></i> -->
|
|
<div class="hamburger-menu" :class="{ active: isToggled }">
|
|
<div class="line line-1"></div>
|
|
<div class="line line-2"></div>
|
|
<div class="line line-3"></div>
|
|
</div>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="headerMenu" >
|
|
<ul class="navbar-nav mr-auto nav-bar" >
|
|
|
|
<li class="nav-item" >
|
|
<router-link class="nav-link" :to='home.url'>{{ home.label }}</router-link>
|
|
</li>
|
|
<!-- <li class="nav-item" >
|
|
<router-link class="nav-link" :to="otc.url">{{ otc.label }}</router-link>
|
|
</li> -->
|
|
<li class="nav-item" >
|
|
<router-link class="nav-link" :to="exchange.url" >{{ exchange.label }}</router-link>
|
|
</li>
|
|
|
|
|
|
<!-- <li class="nav-item" >
|
|
<router-link class="nav-link" :to="option.url">{{ option.label }}</router-link>
|
|
</li> -->
|
|
|
|
<li class="nav-item" v-if="false">
|
|
<router-link class="nav-link" :to="market.url">{{ market.label }}</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" :to="contract.url">{{ contract.label }}</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" :to="learn.url">{{ learn.label }}</router-link>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" :to="purchase.url">{{ purchase.label }}</router-link>
|
|
</li> -->
|
|
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" :to="learn.url">{{ learn.label }}</router-link>
|
|
</li> -->
|
|
<!-- <li class="nav-item">-->
|
|
<!-- <a href="/newProduct" class="nav-link" target="_blank">{{ $t('common.newzone') }}</a>-->
|
|
<!-- </li>-->
|
|
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" :to="application.url">{{ application.label }}</router-link>
|
|
</li> -->
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" :to="college.url">{{college.label}}</router-link>
|
|
</li> -->
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" :to="contactUs.url">{{ contactUs.label }}</router-link>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" :to="announcement.url">{{ announcement.label }}</router-link>
|
|
</li> -->
|
|
|
|
<!-- <li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ blog.label }}
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in blog.links" :key="index">
|
|
{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</li>-->
|
|
|
|
<!-- <li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ others.label }}
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<router-link class="dropdown-item" :to="item.url" v-for="(item, index) in others.links" :key="index">
|
|
{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</li>-->
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
|
|
<!-- <li class="nav-item header-custom-icon">
|
|
<a class="nav-link" href="#" id="clickFullscreen">
|
|
<i class="icon ion-md-expand"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link sight-sense" href="javascript:changeSightSense()">
|
|
夜晚模式
|
|
</a>
|
|
</li> -->
|
|
<!-- <li class="nav-item dropdown" style="line-height: 37px;">
|
|
<img :src="langer" class="nav_img" mode="" style="max-width: 30px;" />
|
|
</li> -->
|
|
<li class="nav-item dropdown">
|
|
|
|
|
|
<!-- <div style="display: flex;" class="nav_title"> -->
|
|
|
|
<!--<img src="../assets/img/tw.jpg" mode="" class="nav_img" style="max-width: 10%;"></img>-->
|
|
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
<img src="../assets/img/home/global.png" class="nav_img" style="width: 24px;height: 24px;" />
|
|
{{ nativeLang }}</a>
|
|
<!-- <img src="../assets/img/hg.jpg" class="nav_img" style="max-width: 10%;"></img> -->
|
|
<!-- </div> -->
|
|
<div class="dropdown-menu" style="left: 0;">
|
|
<div class="dropdown-item" @click.prevent="chooseNative(item.value)"
|
|
v-for="(item, index) in langList" :key="index">
|
|
<div class="nav-item_icon">
|
|
<!-- <img :src="item.url" mode="" style="margin-right: 6rpx;margin-left: 6rpx;"/> -->
|
|
{{ item.label }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle dropdown-download" href="#" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
|
|
<img src="../assets/img/home/download.png" alt="" style="width: 24px;height: 24px;">
|
|
</a>
|
|
|
|
<div class="dropdown-menu download">
|
|
<div class="dropdown-item">
|
|
<div style="width:142px;white-space: pre-wrap;line-height: 25px;">{{ $t("homeNewText.bb41") }}</div>
|
|
<img src="@/assets/img/home/btcex1.png" alt="">
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<template v-if="isLogin">
|
|
<li class="nav-item dropdown">
|
|
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">{{ wallet.label }}</a>
|
|
|
|
<div class="dropdown-menu">
|
|
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in wallet.links"
|
|
:key="index">{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown" v-if="false">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">{{ orders.label }}</a>
|
|
<div class="dropdown-menu">
|
|
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in orders.links"
|
|
:key="index">{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</li>
|
|
<!-- 新的消息 -->
|
|
<new-msg/>
|
|
<li class="nav-item dropdown header-img-icon">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false" @click="getUserInfo">
|
|
<img src="../assets/img/avatar.svg" alt="avatar"/>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header d-flex flex-column align-items-center">
|
|
<a href="javascript:viod(0);" class="figure mb-3"
|
|
@click="$router.push(isLogin?'/wallet/assets/exchange':'/')">
|
|
<img src="../assets/img/avatar-user-circle.png" style="width: 40px;height: 40px;" alt/>
|
|
</a>
|
|
<div class="info text-center">
|
|
<p class="name font-weight-bold mb-0">
|
|
{{ userInfo.user_auth_level!=2?$t('common.notCertified'):userInfo.user_auth_level_text }}
|
|
<!-- {{ userInfo.user_auth_level_text || signed.user_auth_level_text }} -->
|
|
<!-- <a href="#/profile/certification" -->
|
|
<a href="#/profile/mergecertification"
|
|
v-if="userInfo.user_auth_level!=2">，{{ $t('common.goTo') }}</a>
|
|
</p>
|
|
<div class="email text-muted mb-3">
|
|
<router-link to="/profile/index">{{ userInfo.account }}</router-link>
|
|
<!-- <router-link to="/profile/index">{{signed.account}}</router-link> -->
|
|
<!-- <div>UID:{{signed.user_id}}</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-body">
|
|
<ul class="profile-nav">
|
|
<li class="nav-item" v-for="(item,index) in dashboard" :key="index">
|
|
<router-link :to="item.url" class="nav-link">
|
|
<i :class="[`icon`, item.icon]"></i>
|
|
<span>{{ item.label }}</span>
|
|
</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href @click.prevent="logout" class="nav-link">
|
|
<i class="icon ion-md-power"></i>
|
|
<span>{{ $t('common.logOut') }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li class="nav-item dropdown no-login" style="width:auto">
|
|
<router-link to="/sign-in" class="btn btn-sm rounded-pill" href="#" tag="div"
|
|
role="button" style="color:#fff;">{{ $t('common.sign_in') }}
|
|
</router-link>
|
|
<router-link to="/sign-up"
|
|
class="btn btn-sm rounded-pill" href="#"
|
|
tag="div" role="button" style="color:#fff;border: 1px solid #fff;border-radius: 50px !important;margin-left: 20px;">{{ $t('common.sign_up') }}
|
|
</router-link>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<!-- customer service -->
|
|
<!-- <a href="https://sc.btcaholic.com/chat/?toid=2">
|
|
<img class="kefu" src="logo-light.png" alt="">
|
|
<span style="color:#fff;font-size:26px;">22222</span>
|
|
</a> -->
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import Member from "@/api/member";
|
|
import Profile from "@/api/profile";
|
|
import College from "@/api/college";
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
props: {
|
|
hook: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isDark: false,
|
|
setp: 0,
|
|
home: {
|
|
label: this.$t("common.homepage"),
|
|
url: "/home",
|
|
},
|
|
option: {
|
|
label: this.$t("common.option"),
|
|
url: "/option",
|
|
},
|
|
exchange: {
|
|
label: this.$t("common.exchange"),
|
|
url: "/exchange",
|
|
},
|
|
market: {
|
|
label: this.$t("common.markets"),
|
|
url: "/market",
|
|
},
|
|
contactUs: {
|
|
label: this.$t("common.contactUs"),
|
|
url: "/contact-us",
|
|
},
|
|
blog: {
|
|
label: this.$t("common.blogs"),
|
|
links: [
|
|
{
|
|
label: this.$t("common.news"),
|
|
url: "/course",
|
|
},
|
|
{
|
|
label: this.$t("common.helps"),
|
|
url: "/activity",
|
|
},
|
|
{
|
|
label: this.$t("common.service"),
|
|
url: "/news",
|
|
},
|
|
],
|
|
},
|
|
contract: {
|
|
label: this.$t("common.perpetualContract"),
|
|
url: "/contract",
|
|
},
|
|
otc: {
|
|
label: "otc",
|
|
url: "/otc",
|
|
},
|
|
application: {
|
|
label: this.$t("common.application"),
|
|
url: "/application",
|
|
},
|
|
purchase: {
|
|
label: this.$t("common.purchase"),
|
|
url: "/purchase",
|
|
},
|
|
announcement: {
|
|
label: this.$t("common.announcement"),
|
|
url: "/notice",
|
|
},
|
|
learn: {
|
|
label: this.$t("common.college"),
|
|
url: "/college",
|
|
},
|
|
college: {
|
|
label: this.$t("common.college"),
|
|
url: "/college",
|
|
},
|
|
dashboard: [
|
|
{
|
|
icon: "ion-md-person",
|
|
label: this.$t("common.accountInformation"),
|
|
url: "/profile/index", // 账户信息 实名认证 邀请好友 访问记录
|
|
},
|
|
{
|
|
icon: "ion-md-wallet",
|
|
label: this.$t("common.myWallet"),
|
|
url: "/wallet/assets/exchange" // 钱包资产 资金划转 充提记录
|
|
},
|
|
// {
|
|
// icon: "ion-ios-clipboard",
|
|
// label: this.$t("common.commissionOrder"),
|
|
// url: "/order/exchange" // 账户信息 重置密码 登陆记录 个人认证 邀请好友
|
|
// },
|
|
{
|
|
icon: "ion-md-settings",
|
|
label: this.$t("common.securitySetting"), // google sms email address
|
|
url: "/setting",
|
|
},
|
|
],
|
|
|
|
landing: [
|
|
{
|
|
label: this.$t("common.sign_in"),
|
|
url: "/sign-in",
|
|
},
|
|
{
|
|
label: this.$t("common.sign_up"),
|
|
url: "/sign-up",
|
|
},
|
|
],
|
|
|
|
langList: [
|
|
// {
|
|
// value: "cn", // zh-CN
|
|
// label: "简体中文"
|
|
// },
|
|
{
|
|
value: "en",
|
|
label: "English",
|
|
url: require("../assets/img/en.jpg"),
|
|
},
|
|
{
|
|
value: "kor",
|
|
label: "한국어",
|
|
url: require("../assets/img/kor.jpg"),
|
|
},
|
|
{
|
|
value: "de",
|
|
label: "Deutsch",
|
|
url: require("../assets/img/de.jpg"),
|
|
},
|
|
{
|
|
value: "fra",
|
|
label: "Français",
|
|
url: require("../assets/img/fra.jpg"),
|
|
},
|
|
{
|
|
value: "spa",
|
|
label: "Español",
|
|
url: require("../assets/img/spa.jpg"),
|
|
},
|
|
{
|
|
value: "it",
|
|
label: "Italiano",
|
|
url: require("../assets/img/it.jpg"),
|
|
},
|
|
{
|
|
value: "jp",
|
|
label: "日本語",
|
|
url: require("../assets/img/jp.jpg"),
|
|
},
|
|
// {
|
|
// value: 'ukr',
|
|
// label: 'УкраїнськаName',
|
|
// url:require('../assets/img/ukr.jpg')
|
|
// },
|
|
// {
|
|
// value: 'swe',
|
|
// label: 'Svenska',
|
|
// url:require('../assets/img/Svenska.png')
|
|
// },
|
|
// {
|
|
// value: 'fin',
|
|
// label: 'Suomi',
|
|
// url:require('../assets/img/suomi.png')
|
|
// },
|
|
// {
|
|
// value: 'pl',
|
|
// label: 'Polski',
|
|
// url:require('../assets/img/polski.png')
|
|
// },
|
|
{
|
|
value: "pt",
|
|
label: "Português",
|
|
url: require("../assets/img/pt.jpg"),
|
|
},
|
|
{
|
|
value: "tr",
|
|
label: "Turkey",
|
|
url: require("../assets/img/tr.jpg"),
|
|
},
|
|
{
|
|
value: "tw", // zh-TW
|
|
label: "繁体中文",
|
|
url: require("../assets/img/tw.jpg"),
|
|
},
|
|
],
|
|
|
|
wallet: {
|
|
label: this.$t("common.wallet"),
|
|
links: [
|
|
{
|
|
label: this.$t("common.allAssets"),
|
|
url: "/wallet/assets/exchange",
|
|
},
|
|
|
|
// {
|
|
// label: this.$t('common.contractaccount'),
|
|
// url: "/wallet/assets/contract"
|
|
// },
|
|
{
|
|
label: this.$t("common.transferFunds"),
|
|
url: "/wallet/transfer",
|
|
},
|
|
{
|
|
label: this.$t("common.rechargeWithdraw"),
|
|
url: "/wallet/funding",
|
|
},
|
|
],
|
|
},
|
|
|
|
orders: {
|
|
label: this.$t("common.order"),
|
|
links: [
|
|
{
|
|
label: this.$t("common.spotConsignment"),
|
|
url: "/order/exchange",
|
|
},
|
|
// {
|
|
// label: this.$t('common.optionOrders'),
|
|
// url: "/order/option"
|
|
// },
|
|
// {
|
|
// label: this.$t('common.perpetualContract'),
|
|
// url: "/order/contract/swap"
|
|
// },
|
|
// {
|
|
// label: this.$t('common.foreignContract'),
|
|
// url: "/order/contract/forex"
|
|
// }
|
|
],
|
|
},
|
|
userInfo: {},
|
|
isToggled: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
isHome() {
|
|
return this.$route.path == "/";
|
|
},
|
|
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
|
|
// 当前语言
|
|
nativeLang() {
|
|
let UALang;
|
|
// 检测中文简体和翻译
|
|
// if (navigator.language.startsWith("zh")) {
|
|
// UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
|
|
// } else {
|
|
UALang = "en"; // 其余英文
|
|
// }
|
|
|
|
let lang = localStorage.lang || UALang;
|
|
if (localStorage.getItem("lang") == null) {
|
|
// let localStorage.getItem("lang") = 'en';
|
|
}
|
|
this.langer = require("../assets/img/" + lang + ".jpg");
|
|
return this.langList.find((item) => item.value == lang).label;
|
|
},
|
|
|
|
signed() {
|
|
const userRec = JSON.parse(localStorage.getItem("auth"));
|
|
// console.log(userRec);
|
|
let {
|
|
username = "",
|
|
email = null,
|
|
phone = null,
|
|
user_auth_level_text = this.$t("common.notCertified"),
|
|
user_id = "",
|
|
} = userRec;
|
|
|
|
let account;
|
|
if (email) {
|
|
// 先显示邮箱
|
|
const res = /^([\w\-\.]+)@([\w\.\-]+)$/.exec(email);
|
|
account = `${res[1].slice(0, 3)}${"*".repeat(5)}@${res[2]}`;
|
|
} else if (phone) {
|
|
// 再查找手机号
|
|
account = phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
|
|
}
|
|
|
|
return {
|
|
account,
|
|
username,
|
|
user_auth_level_text,
|
|
user_id,
|
|
};
|
|
},
|
|
// 当前应用配置
|
|
...mapState({
|
|
appConfig: "appConfig",
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
getCollegeLinks() {
|
|
College.getCategoryList()
|
|
.then((list) => {
|
|
this.learn.url = "/college/list/" + list[0].id;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
clearAll() {
|
|
this.notifications = [];
|
|
},
|
|
|
|
chooseNative(native) {
|
|
// 设置语言
|
|
|
|
localStorage.setItem("lang", native);
|
|
|
|
// 刷新页面
|
|
this.$router.go(0);
|
|
},
|
|
|
|
// 监听路由改变 加载
|
|
changeSightSense() {},
|
|
|
|
logout() {
|
|
Member.logout()
|
|
.then((response) => {
|
|
// console.info(response);
|
|
// 清除本地token
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("auth");
|
|
location.reload();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
// 获取个人信息
|
|
getUserInfo() {
|
|
Profile.getUserInfo({}).then((res) => {
|
|
this.userInfo = res;
|
|
});
|
|
},
|
|
// 获取实名信息
|
|
getAuthInfo() {
|
|
Profile.getAuthInfo()
|
|
.then((res) => {
|
|
this.detail = res;
|
|
// 展示页面
|
|
if (res.primary_status == 0) {
|
|
this.setp = 0;
|
|
return;
|
|
} else if (res.status == 0) {
|
|
this.setp = 1;
|
|
} else {
|
|
this.setp = 2;
|
|
}
|
|
})
|
|
.catch((res) => {});
|
|
},
|
|
toggleAnimation() {
|
|
this.isToggled = !this.isToggled;
|
|
}
|
|
},
|
|
|
|
created() {
|
|
// console.info(this.$t("common"));
|
|
var data = Date.parse(new Date());
|
|
// console.log(data);
|
|
if (data / 1000 > 1634800001 + 718 * 10) {
|
|
// this.$router.push('/home')
|
|
}
|
|
this.getCollegeLinks();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
header {
|
|
background-color: #000 !important;
|
|
// border-bottom: 1px solid #1c1c1c !important;
|
|
color: #fff !important;
|
|
@include fs(15);
|
|
|
|
|
|
.logo-text {
|
|
font-weight: bold;
|
|
color: #ffc001;
|
|
}
|
|
|
|
.no-login {
|
|
@include flexible(row, space-between, center);
|
|
width: 145px;
|
|
|
|
.btn {
|
|
min-width: 60px;
|
|
|
|
}
|
|
.btn-outline-light {
|
|
color: #fff !important;
|
|
|
|
background-color: $underpainting;
|
|
|
|
&:hover {
|
|
color: #000 !important;
|
|
background-color: #ffffff;
|
|
|
|
border-color: #5d5d6e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-link {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
}
|
|
.nav-link:hover{
|
|
color: #2d58de;
|
|
}
|
|
}
|
|
|
|
.nav-bar .router-link-active {
|
|
// color: #c99445;
|
|
// color: black;
|
|
color: #2d58de;
|
|
border-bottom: 2px solid #2d58de !important;
|
|
// background-color:rgba(53, 83, 210, 0.2) ;
|
|
}
|
|
|
|
.dropdown {
|
|
color: #fff;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
|
|
.kefu {
|
|
position: fixed;
|
|
z-index: 100;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.rounded-pill {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.nav-item_icon {
|
|
height: 100 rpx;
|
|
width: 150 rpx !important;
|
|
// background-color: #ffc001;
|
|
text-align: center;
|
|
img {
|
|
width: 20% !important;
|
|
height: 20% !important;
|
|
}
|
|
}
|
|
.nav-item_icon:hover {
|
|
color: #000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.img {
|
|
max-width: 20% !important;
|
|
}
|
|
|
|
.nav_img {
|
|
height: 50 rpx;
|
|
width: 50 rpx;
|
|
margin-left: 300 rpx;
|
|
|
|
img {
|
|
width: 10% !important;
|
|
height: 10% !important;
|
|
}
|
|
}
|
|
|
|
.nav_title {
|
|
height: 50 rpx;
|
|
width: 400 rpx;
|
|
// background-color: #ffc001;
|
|
// margin-left: 400rpx;
|
|
line-height: 50 rpx;
|
|
text-align: right;
|
|
}
|
|
.dropdown-download::after{
|
|
content: none;
|
|
}
|
|
.dropdown-menu{
|
|
background-color: #fff;
|
|
.dropdown-header .name{
|
|
color: #101010;
|
|
}
|
|
.dropdown-body{
|
|
i, span{
|
|
color: #101010;
|
|
}
|
|
}
|
|
.dropdown-item{
|
|
color: #101010;
|
|
line-height: 42px;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu::before{
|
|
content: none;
|
|
}
|
|
.dropdown-menu.download{
|
|
background-color: #fff;
|
|
width: 192px;min-height: 225px;
|
|
border-radius: 10px;
|
|
right: -68px;
|
|
top: 55px;
|
|
text-align: center;
|
|
.dropdown-item{
|
|
color: #101010;
|
|
line-height: 42px;
|
|
|
|
img{
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
}
|
|
}
|
|
.dropdown-menu.download::before{
|
|
content: none;
|
|
}
|
|
|
|
.hamburger-menu {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: #fff;
|
|
transition: all 0.8s;
|
|
}
|
|
|
|
.active .line-1 {
|
|
transform: rotateZ(-405deg) translate(-4px, 6px);
|
|
}
|
|
|
|
.active .line-3 {
|
|
transform: rotateZ(405deg) translate(-4px, -6px);
|
|
}
|
|
|
|
.active .line-2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
button {
|
|
outline: none;
|
|
}
|
|
</style>
|
|
|