From 6953352202af2aac124a073dd2c803e814fafb13 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Thu, 22 May 2025 17:27:40 +0800
Subject: [PATCH] style
---
src/components/layout/footerView.vue | 414 +++++++++++++++++-----------------------------------------
1 files changed, 122 insertions(+), 292 deletions(-)
diff --git a/src/components/layout/footerView.vue b/src/components/layout/footerView.vue
index b9b5100..b5b6fd4 100644
--- a/src/components/layout/footerView.vue
+++ b/src/components/layout/footerView.vue
@@ -1,136 +1,47 @@
<template>
- <div class="footer-box footer-background" style="height: 382px">
- <div>
- <div class="content-view-box footer-view" style="height: 382px">
- <div class="left-footer" style="width: 1200px">
- <!-- -->
- <div>
- <div
- class="footer-icon-box"
- style="margin-left: 0px; margin-top: 10px"
- >
- <img
- src="@/assets/forexImages/newlogo.png"
- alt=""
- width="45"
- height="45"
- />
- <div
- class="footer-view-title"
- style="margin-left: 20px; margin-top: 10px"
- >
- {{ $title }}
- </div>
- </div>
- <!-- 多语言 -->
- <div @click="handleChangeLang('lang')" class="footer-view-lang">
- {{ $t("message.home.language") }}
- </div>
-
- <div class="footer-view-copyright">
- ©️ Copyright 2023 {{ $title }}, Inc. All Rights Reserved
- </div>
+ <div class="common-footer">
+ <div class="footer">
+ <div class="footer_top">
+ <div class="footer_left">
+ <div class="logo">
+ <span class="avatar"></span><span class="text">Mateonline</span>
</div>
- <!-- 关于我们 -->
- <div style="margin-left: 100px; margin-top: 0px; height: 382px">
- <h5
- class="font-size20 margin-top-bottom20 linght-grey-color footer-view-title-h1"
- >
- {{ $t("message.home.dibu1") }}
- </h5>
- <div class="link-box">
- <div class="footer-view-title-p1" @click="goRouter('/aboutUs')">
- {{ $t("message.home.gongsijianjie") }}
- </div>
- </div>
- </div>
- <!-- 法律隐私政策 -->
- <div style="margin-left: 40px; margin-top: 0px; height: 382px">
- <h5
- class="font-size20 margin-top-bottom20 linght-grey-color footer-view-title-h1"
- >
- {{ $t("message.home.falvyinsizhengce") }}
- </h5>
- <div class="link-box">
- <div class="footer-view-title-p1" @click="goRouter('/clause')">
- {{ $t("message.home.shiyongtikuan") }}
- </div>
- <div
- class="footer-view-title-p1"
- @click="goRouter('/riskStatement')"
- >
- {{ $t("message.home.fengxianshengming") }}
- </div>
- <div class="footer-view-title-p1" @click="goRouter('/privacy')">
- {{ $t("message.home.yinsibaohu") }}
- </div>
- </div>
- </div>
- <!-- 服务 -->
- <div style="margin-left: 60px; margin-top: 0px; height: 382px">
- <h5 class="font-size20 margin-top-bottom20 footer-view-title-h1">
- {{ $t("message.home.fuwu") }}
- </h5>
- <div class="link-box">
- <div class="footer-view-title-p1" @click="goRouter('/help')">
- {{ $t("message.home.xinshouzhidao") }}
- </div>
- <div class="footer-view-title-p1" @click="goRouter('/reminder')">
- {{ $t("message.home.wenxintishi") }}
- </div>
-
- <div class="footer-view-title-p1" @click="goRouter('/purchase')">
- {{ $t("message.home.gouzhiyuzhuanhuan") }}
- </div>
- </div>
- </div>
-
- <!-- Community+下载图标 -->
- <div
- class="right-footer"
- style="margin-left: 80px; margin-top: 0px; height: 382px"
- >
- <div style="">
- <h5 class="font-size20 margin-top-bottom20 white-color">
- {{ $t("message.home.dibu27") }}
- </h5>
- <div class="footer-icon-box">
- <div>
- <img src="@/assets/images/home/footer/chat1.png" alt="" />
- </div>
- <div>
- <img src="@/assets/images/home/footer/chat2.png" alt="" />
- </div>
- <div>
- <img src="@/assets/images/home/footer/chat3.png" alt="" />
- </div>
- </div>
- </div>
- <div class="footer-view-download" style="margin-top: 0px">
- {{ $t("message.home.xiazai") }}
- </div>
- <div style="margin-top: 10px">
- <img
- src="@/assets/images/home/footer/download2.png"
- alt=""
- style="width: 169px; height: 60px"
- class="mouse-cursor"
- />
- </div>
- <div style="margin-top: 10px">
- <img
- src="@/assets/images/home/footer/download1.png"
- alt=""
- style="width: 168px; height: 60px"
- class="mouse-cursor"
- />
- </div>
+ <div class="text">
+ Coinmate成立於2014年，目前總部位於英國。是全球領先的數位貨幣資產交易平台，致力於為用戶提供安全，專業，便利的數位貨幣交易服務。在加密貨幣撮合交易領域佔了43.17%的市佔率。
</div>
</div>
+ <div class="footer_list">
+ <h1 class="about">關於</h1>
+ <ul>
+ <li><a href="javascript:void(0)">關於我們</a></li>
+ <li><a href="javascript:void(0)">服務條款</a></li>
+ <li><a href="javascript:void(0)">合作協議</a></li>
+ </ul>
+ </div>
+ <div class="footer_list">
+ <h1 class="about">聯繫我們</h1>
+ <ul>
+ <li><a href="javascript:void(0);">幫助中心</a></li>
+ <li><a href="javascript:void(0);">客服中心</a></li>
+ <li>
+ <a
+ href="javascript:void(0);"
+ style="
+ color: rgb(255, 255, 255);
+ font-size: 12px;
+ text-decoration: underline;
+ "
+ >coinmatecrypto@outlook.com</a
+ >
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="footer_bottom">
+ <p>Coinmate全球優質數字資產</p>
+ <p>Copyright © 2021 - Coinmate All rights reserved.</p>
</div>
</div>
-
- <lang-select ref="langSelect" />
</div>
</template>
@@ -167,171 +78,90 @@
</script>
<style scoped>
-.footer-view {
- display: flex;
-}
+.footer {
+ min-height: 100px;
+ background: rgb(24, 26, 32);
+ border-top: 1px solid rgba(109, 109, 109, 0.5);
+ .footer_top {
+ width: 94%;
+ margin: 0 auto;
+ display: flex;
+ padding: 16px 0;
+ .footer_left {
+ flex: 0 0 40%;
+ box-sizing: border-box;
+ .logo {
+ display: flex;
+ align-items: center;
+ .avatar {
+ width: 40px;
+ height: 40px;
+ background: url(../../assets/forexImages/logo-66dce226.png) no-repeat
+ center center;
+ background-size: 40px 40px;
+ }
+ .text {
+ color: #fff;
+ font-size: 16px;
+ letter-spacing: 3px;
+ }
+ }
+ .text {
+ color: #989898;
+ font-size: 14px;
+ }
+ }
-.footer-background {
- background-color: #171a1e;
-}
-
-.left-footer {
- flex: 4;
- display: flex;
- /* padding:50px 0 40px 0; */
-}
-
-.left-footer > div {
- flex: 1;
- justify-content: space-around;
-}
-
-/* .right-footer{
- flex:2;
-} */
-
-.link-box > div {
- padding-bottom: 16px;
- /* font-size:16px;
- color:#FFFFFF; */
- cursor: pointer;
- font-size: 14px;
- color: #b8bfc9;
-}
-
-.right-footer {
- padding-top: 0px;
-}
-
-.right-footer > div > h5 {
- margin-bottom: 20px;
-}
-
-.right-footer > div:nth-child(1) {
- width: 138px;
-}
-.footer-icon-box {
- display: flex;
-}
-
-.footer-icon-box > div {
- flex: 1;
- justify-content: space-around;
-}
-.footer-icon-box > div > img {
- display: inline-block;
- width: 19px;
- height: 19px;
-}
-
-.lange-view {
- display: flex;
- background-color: #ececec;
- width: 150px;
- height: 30px;
- line-height: 30px;
- align-items: center;
- justify-content: space-around;
- font-size: 12px;
- cursor: pointer;
- border: 1px solid #e5e7eb;
- margin-top: 58px;
-}
-
-.lange-view > img {
- margin-left: 10px;
- margin-top: -5px;
-}
-
-/* 版权 */
-.copyright-box > div {
- border-top: 1px solid #2c2e3a;
- padding: 30px 0;
- font-size: 16px;
- color: white;
-}
-
-.footer-view-title {
- color: #f7b328;
- width: 45px;
- height: 39px;
-}
-
-.footer-view-lang {
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 22px;
-
- color: #ffffff;
- cursor: pointer;
-}
-
-.footer-view-copyright {
- width: 197px;
- height: 44px;
- margin-left: 0px;
- margin-top: 30px;
-
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 22px;
-
- color: #b8bfc9;
-
- /* Inside auto layout */
-
- flex: none;
- order: 2;
- flex-grow: 0;
-}
-
-.footer-view-title-h1 {
- width: 164px;
- height: 22px;
-
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400px;
- font-size: 16px;
- line-height: 22px;
-
- color: #ffffff;
-}
-
-.footer-view-title-p1 {
- /* width: 400px; */
- height: 20px;
-
- font-family: "PingFang SC";
- font-style: normal;
- /* font-weight: 400px; */
-
- line-height: 20px;
-
- padding-top: 20px;
-}
-
-.footer-view-download {
- width: auto;
- height: 31px;
-
- font-family: "PingFang SC";
- font-style: normal;
- /* font-weight: 600px; */
- font-size: 22px;
- line-height: 31px;
- /* identical to box height */
-
- color: #ffffff;
-
- /* Inside auto layout */
-
- flex: none;
- order: 2;
- flex-grow: 0;
+ .footer_list {
+ flex: 0 0 30%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ .about {
+ color: #fff;
+ font-size: 20px;
+ font-weight: 400;
+ width: 100%;
+ text-align: center;
+ }
+ /* h1 {
+ font-size: 16px;
+ color: #fff;
+ margin-bottom: 10px;
+ } */
+ ul {
+ width: 100%;
+ li {
+ width: 100%;
+ text-align: center;
+ a {
+ width: 100%;
+ text-align: center;
+ text-decoration: none;
+ color: #989898;
+ height: 40px;
+ line-height: 40px;
+ &:hover {
+ display: inline-block;
+ color: #f7b328;
+ }
+ }
+ }
+ }
+ }
+ }
+ .footer_bottom {
+ width: 94%;
+ margin: 0 auto;
+ padding: 16px 0;
+ border-top: 1px solid rgba(109, 109, 109, 0.5);
+ p {
+ margin-top: 4px;
+ color: #989898;
+ font-size: 12px;
+ }
+ }
}
</style>
--
Gitblit v1.9.3