style

lxf

2025-05-22 6953352202af2aac124a073dd2c803e814fafb13

 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>