m2pool_web_frontend/mining-pool/src/components/content.vue

<template>
  <div class="contentMain">
    <div class="contentPage" >
      <router-view :key="key" />
    </div>
    <section v-if="$isMobile" class="moveFooterBox">
      <div class="footerBox">
        <div class="logoBox">
          <img class="logoImg" src="../assets/img/logo.png" alt="logo图片"  />
          <span class="copyright">Copyright © 2024 M2pool</span>
        </div>
        <div class="missionBox">
          <p class="mission">{{ $t(`home.mission`) }}</p>
          <p class="missionText">{{ $t(`home.missionText`) }}</p>
        </div>

        <div class="missionBox">
          <p class="mission">{{ $t(`home.service`) }}</p>
          <div class="FMenu">
          
            <p > <span @click="jumpPage1(`/apiFile`)">{{ $t(`home.APIfile`) }}</span></p>
            <p > <span @click="jumpPage2(`/rate`)">{{ $t(`home.rateFooter`) }}</span></p>
          </div>
        </div>

        <div class="missionBox">
          <p class="mission">{{ $t(`home.userAssistance`) }}</p>
      
          <div class="FMenu">
            <p >
              <span @click="jumpPage3(`/AccessMiningPool`)">{{ $t(`home.miningTutorial`) }}</span> 
            </p>
            <p > <span @click="jumpPage3(`/submitWorkOrder`)">{{ $t(`home.submitWorkOrder`) }}</span></p>
          </div>
        </div>

        <div class="missionBox">
          <p class="mission">{{ $t(`home.aboutUs`) }}</p>
          <div class="FMenu">      
            <p>
              <a href="mailto:support@m2pool.com">{{ $t(`home.joinUs`) }}</a>
             
            </p>
            <p> <a href="mailto:support@m2pool.com">{{
                $t(`home.contactCustomerService`)
              }}</a></p>
            <p >          
              <span @click="jumpPage(`/ServiceTerms`)">{{ $t(`home.serviceTerms`) }}</span> 
            </p>
            <p>
              <a href="mailto:support@m2pool.com">{{
                $t(`home.businessCooperation`)
              }}</a>
            </p>
            
          </div>
        </div>
      </div>
    </section>
    <div class="footerBox" v-else>
      <el-row style="width:100%">
        <el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
          <div class="footerSon logo2">
            <div class="logoBox">
              <img class="logoImg" src="../assets/img/logo.png" alt="logo图片" />
              <span class="copyright">Copyright © 2024 M2pool</span>
          
            </div>
          </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
      <div class="footerSon text">
        <h4>{{ $t(`home.mission`) }}</h4>
        <div>{{ $t(`home.missionText`) }}</div>
      </div>
    </el-col>   
        <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
      <div class="footerSon product">
        <ul>
          <li class="productTitle">
            <h4>{{ $t(`home.service`) }}</h4>
          </li>
          <li > <span @click="jumpPage1(`/apiFile`)">{{ $t(`home.APIfile`) }}</span></li>

          <li > <span @click="jumpPage2(`/rate`)">{{ $t(`home.rateFooter`) }}</span></li>
        </ul>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
      <div class="footerSon product">
        <ul>
          <li class="productTitle">
            <h4>{{ $t(`home.userAssistance`) }}</h4>
          </li>
          <li >
           <span @click="jumpPage3(`/AccessMiningPool`)"> {{ $t(`home.miningTutorial`) }}</span>
          </li>
          <!-- <li>{{ $t(`home.historicalAnnouncement`) }}</li>
            <li>{{ $t(`home.commonProblem`) }}</li> -->
            <li > <span @click="jumpPage4(`/submitWorkOrder`)">{{ $t(`home.submitWorkOrder`) }}</span></li>
        </ul>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
      <div class="footerSon product">
        <ul>
          <li class="productTitle">
            <h4>{{ $t(`home.aboutUs`) }}</h4>
          </li>
          <li>
            <a href="mailto:support@m2pool.com">{{ $t(`home.joinUs`) }}</a>
          </li>
          <li >
           <span @click="jumpPage(`/ServiceTerms`)"> {{ $t(`home.serviceTerms`) }}</span>
          </li>
          <li>
            <a href="mailto:support@m2pool.com">{{
              $t(`home.businessCooperation`)
            }}</a>
          </li>
          <li>
            <a href="mailto:support@m2pool.com">{{
              $t(`home.contactCustomerService`)
            }}</a>
          </li>
        </ul>
      </div>
     </el-col>
    </el-row>
    </div>
  </div>
</template>
  
  <script>
import { line } from "../utils/echarts";
import * as echarts from "echarts";
import { getImageUrl } from "../utils/publicMethods";
export default {
  name: "AppMain",
  components: {
    comHeard: () => import("./header.vue"),
  },
  computed: {
    key() {
      return this.$route.path;
    },
  },
  data() {
    return {
      activeName: "second",
      option: { ...line },
      option2: { ...line },
      powerDialogVisible: false,
      minerDialogVisible: false,
      currentPage: 1,
      currency: "mona",
      currencyPath:
        "https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
      currencyList: [
        {
          value: "grs",
          label: "grs",
          // img: require("../assets/images/grs.png"),
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/258.png",
        },
        {
          value: "mona",
          label: "mona",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
        },
        {
          value: "dgb_skein",
          label: "dgb-skein-pool1",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb_qubit",
          label: "dgb-qubit-pool1",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb_odo",
          label: "dgb-odocrypt-pool1",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb2_odo",
          label: "dgb-odocrypt-pool2",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb_qubit_a10",
          label: "dgb-qubit-pool2",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb_skein_a10",
          label: "dgb-skein-pool2",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
        {
          value: "dgb_odo_b20",
          label: "dgb-odoscrypt-pool3",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
        },
      ],
      scrollTop: 0,
      isLogin: true,
      bthText: "English",
      miningAccountList: [
        {
          title: "grs",
          coin: "grs",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/258.png",
          children: [
            { account: "miner", id: "1" },
            { account: "test", id: "2" },
          ],
        },
        {
          title: "mona",
          coin: "mona",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/213.png",
          children: [
            { account: "miner", id: "1" },
            { account: "test", id: "2" },
          ],
        },
        {
          title: "dgb-skein-pool1",
          coin: "dgb_skein",
          imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
          children: [
            { account: "miner", id: "1" },
            { account: "test", id: "2" },
          ],
        },
      ],
      activeItemCoin:{
        coin: "nexa",
        imgUrl:getImageUrl(`/img/nexa.png`) 
      },
      lang: "zh",
    };
  },

  created() {},
  mounted() {
     this.lang = this.$i18n.locale;
    window.scrollTo(0, 0);
    let activeItemCoin=localStorage.getItem("activeItemCoin")
    this.activeItemCoin = JSON.parse(activeItemCoin)
    let currencyList = localStorage.getItem("currencyList")
        this.currencyList = JSON.parse(currencyList)

      window.addEventListener("setItem", () => {
          let activeItemCoin=localStorage.getItem("activeItemCoin")
          this.activeItemCoin = JSON.parse(activeItemCoin)
          let currencyList = localStorage.getItem("currencyList")
        this.currencyList = JSON.parse(currencyList)

      });
  },
  methods: {
    jumpPage() {
      const lang = this.$i18n.locale; // 使用当前语言
      this.$router.push(`/${lang}/ServiceTerms`);
      
    },
    jumpPage1(){
      const lang = this.$i18n.locale;
      this.$router.push(`/${lang}/apiFile`);
    },
    jumpPage2(){
      const lang = this.$i18n.locale;
      this.$router.push(`/${lang}/rate`);

    },
      jumpPage3(path){


        console.log(path,1366565);
        

        const lang = this.$i18n.locale;





              if (path === '/AccessMiningPool') {
                  const coin = this.currencyList.find(item => item.value === this.activeItemCoin.value);
                  if (!coin) return;
                  let jumpName = coin.path.charAt(0).toUpperCase() + coin.path.slice(1) //name跳转 首字母大写
                console.log(jumpName,1366565,coin);
                let url = `/${lang}/AccessMiningPool`
                  // 使用 name 进行导航，避免重复的路由参数
                  this.$router.push({
                    name:'AccessMiningPool', 
                    params: {
                      coin:  this.activeItemCoin.value,
                      imgUrl: this.activeItemCoin.imgUrl
                    },

                    replace: false // 保留历史记录，允许回退
                  });
            
              } else {

                
                  // 移除开头的斜杠，统一处理路径格式
                  // const cleanPath = path.startsWith('/') ? path.slice(1) : path;
                    let cleanPath = `/${lang}/AccessMiningPool`
                  this.$router.push(cleanPath);
              }

      
      },
      jumpPage4(){
        const lang = this.$i18n.locale;
        this.$router.push(`/${lang}/submitWorkOrder`);
      },


    handleCommand(item) {},
    handleScroll(event) {
      if (this.$route.path == "/") {
        this.scrollTop = event.target.scrollTop;
        // this.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (this.scrollTop >= 300) {
          this.$refs.head.style.backgroundColor = "#FFF";
          this.$refs.head.style.position = "fixed";
          this.$refs.head.style.top = "0";
        } else {
          this.$refs.head.style.backgroundColor = "initial";
          this.$refs.head.style.position = "tatic";
        }
      }
    },
    clickCurrency(item) {
      this.currency = item.label;
      this.currencyPath = item.imgUrl;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handelPower() {
      this.powerDialogVisible = true;

      this.$nextTick(() => {
        this.inCharts();
      });
    },
    handelMiner() {
      this.minerDialogVisible = true;
      this.$nextTick(() => {
        this.myChart2 = echarts.init(document.getElementById("minerChart"));
        this.myChart2.setOption(this.option2);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //初始化图表
    inCharts() {
      this.myChart = echarts.init(document.getElementById("chart"));

      this.myChart.setOption(this.option);

      // window.addEventListener("resize", () => {
      //     if (this.myChart) this.myChart.resize();
      // });
    },
    handelLogin() {
      this.isLogin = true;
      this.$router.push("/login");
    },
    handelRegister() {
      this.$router.push({ path: "/register" });
    },
    handelLogin222() {
      this.isLogin = !this.isLogin;
    },
    handelJump(url) {
      this.$router.push({ path: url });
    },

    handelLang() {
      // 获取当前路由信息
      const currentPath = this.$route.path;
      const currentLang = this.$i18n.locale;
      const newLang = currentLang === 'zh' ? 'en' : 'zh';
      
      // 更新语言
      this.$i18n.locale = newLang;
      this.lang = newLang;
      this.bthText = newLang === 'zh' ? 'English' : '简体中文';
      
      // 更新路由路径 - 替换语言部分
      const newPath = currentPath.replace(`/${currentLang}/`, `/${newLang}/`);
      
      // 跳转到新路径
      this.$router.push(newPath).catch(err => {
        if(err.name !== 'NavigationDuplicated') {
          console.error('路由跳转失败:', err);
        }
      });

      localStorage.setItem("lang", newLang);
    },

  },

};
</script>
  
  <style scoped lang="scss">
// 手机端适配 背景色修改
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .contentMain {
    background-image: none !important;
  }
  .contentPage{
      min-height: 200px !important;
    }
  .moveFooterBox {
    width: 100%;
    // height: 300px;
    background-image: url("../assets/mobile/home/homebgbtm.png");
    background-repeat: no-repeat;
    background-size: 100% 90%;
  }
  .footerBox {
    align-items: flex-start !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: auto !important;
    padding-left: 0 !important;
    .logoBox {
      width: 100%;
      // background: palegoldenrod;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 18px 18px;
      border-bottom: 1px solid #ccc;
      .logoImg {
        width: 140px;
      }
      .copyright {
        margin-top: 15px;
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.7);
      }
    }
    .missionBox {
      width: 100%;
      min-height: 130px;
      border-bottom: 1px solid #ccc;
      padding: 10px 18px;


 
      .mission {
        font-size: 0.9rem;
        font-weight: 600;
      }
      .missionText {
        margin-top: 18px;
        font-size: 0.85rem;
        color: rgba(0, 0, 0, 0.7);
        padding-left: 18px;
        cursor: pointer;
      }
      .FMenu {
        width: 100%;
        padding-left: 18px;
        font-size: 0.85rem;
        color: rgba(0, 0, 0, 0.8);
        margin-top: 18px;
        p {
          // height: 35px;
          line-height: 30px;         
          width: 50%;
       
          a:nth-of-type(2){
            margin-left: 28%;
          }

          span{
            cursor: pointer;
      
          }
        
        }
      }
    }
  }



}
.contentPage{
  min-height: 630px
}

.contentMain {
  width: 100%;
  min-height: 100vh;
  // overflow-y: auto;
  background-image: url(../assets/img/bktop.png);
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: 0% -6%;
  // overflow-y: scroll;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

// .headerBox{
//   height: 60PX;
//   width: 100%;
//   /* outline: 1px solid red; */

//   font-size:1.1em;
//   // border-bottom:1PX solid #ccc;
//   // background-image: url(../assets/img/bktop.png);
//   // background-position: 60% 8%;
//   // background-size: cover;
//   display: flex;
//   justify-content: center;
//   // position: fixed;
//   // left: 0;
//   // top: 0;
//   z-index: 99;

// }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 95%;
  /* outline: 1px solid red; */
  // outline: 1PX solid red;
  // padding: 0px 5%;
  padding: 0 5%;
}
.logo {
  width: 18%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8em;

  img {
    width: 38%;
  }
}
.topMenu {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  // background: goldenrod;

  .afterLoggingIn {
    // background: palegreen;
    width: 35%;
    .langBox {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 20%;
    }
    .LangLine {
      width: 1px;
      height: 60%;
      background: #ccc;
      margin-right: 2%;
    }
  }
  .notLoggedIn {
    width: 35%;
    .langBox {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 20%;
    }
    .LangLine {
      width: 1px;
      height: 60%;
      background: #ccc;
      margin-right: 2%;
    }
  }
}
.menuBox {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 0%;
  // background: #fff;

  li {
    list-style: none;
    // width: calc(100% / 5);
    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 8%;
    // font-size: 1em;
  }
  li:hover {
    color: black;
  }
  .login {
    padding: 2px 18px;
  }
  .login:hover {
    color: #21a0ff;
    border: 1px solid #21a0ff;
    border-radius: 10px;
  }
  .register {
    background: #d2c3ea;
    border-radius: 25px;
    padding: 0px 25px;
  }
  .register:hover {
    color: #000;
    color: #fe4886;
  }
}

.whiteBg {
  // height: 10%;
  background: rgba(255, 255, 255, 0.2);
  // transform: translateY(-50px);
  // transition: opacity 1s ease, transform 1s ease;
  // position: sticky;
  // top: 0;
  // left: 0;
}
.head {
  position: fixed;
  top: 0;
  left: 0;
  // background: #FFF;
}

.contentBox {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  //   background: pink;
  flex-direction: column;
  padding-top: 5%;

  .currencyBox {
    width: 85%;
    // background: palegoldenrod;
    display: flex;
    justify-content: center;
    align-items: center;
    // img{
    //   width: 3%;
    //   margin-left: 1%;
    // }
    .sunCurrency {
      // width: 7.5%;
      // background: paleturquoise;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      padding: 8px 10px;
      border-radius: 22px;
      // border: 1PX solid rgba(223, 83, 52, 0.3);
      cursor: pointer;
      font-weight: 600;
      margin-left: 10px;
      font-size: 1em;
      // font-size: 14PX;
      img {
        width: 35px;
        margin-left: 5%;
      }
      span {
        text-transform: uppercase;
        margin-top: 10px;
      }
    }
    .sunCurrency:hover {
      background: rgba(223, 83, 52, 0.05);
      font-size: 12px;
      box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
    }
  }
  .currencyDescription {
    width: 85%;
    // height: 900%;
    // background: gold;
    display: flex;
    justify-content: center;

    .currencyDescriptionBox {
      width: 90%;
      height: 600px;
      // background: palevioletred;
      // border: 1PX solid rgba(0,0,0,0.1);
      box-shadow: 0px 0px 3px 1px #ccc;
      margin-top: 2%;
      display: flex;
      justify-content: start;
      flex-direction: column;
      align-items: center;
      position: relative;
      .titleBOX {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 10px;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        h3 {
          width: 90%;
          font-size: 1.5em;
          // background: #ccc;
          text-align: center;
        }

        .titleCurrency:hover {
          background: rgba(223, 83, 52, 0.05);
          font-size: 13px;
          box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
        }
      }

      .titleCurrency {
        // width: 7%;
        // background: paleturquoise;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        padding: 8px 10px;
        border-radius: 22px;
        // border: 1PX solid rgba(223, 83, 52, 0.3);
        // cursor: pointer;
        font-weight: 600;
        margin-left: 30px;
        font-size: 1.1em;
        margin-right: 1%;

        position: absolute;
        top: 10px;
        right: 60px;
        img {
          width: 35px;
          margin-left: 1%;
        }
        span {
          margin-top: 10px;
          text-transform: uppercase;
        }
      }
      .computationalPower {
        height: 15%;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 1.3em;
        margin: 10px 10px;
        .PowerBox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-content: center;
        }
        span {
          cursor: pointer;
          width: 100%;
          // background: forestgreen;
          text-align: center;
        }
        span:hover {
          // color: rgba(0, 0, 0, 0.9);
          color: #df5334;
          font-weight: 600;
        }
        .Power {
          font-size: 1.5em;
        }
        // background: red;
      }
      p {
        width: 80%;
        margin: 0;
        font-size: 1em;
        margin-top: 3px;
        margin-left: 5%;
        // background: rgba(255,192,203,0.5);
        text-align: left;
        height: 8%;
        padding: 0px 10px;
        line-height: 50px;
        box-shadow: 0px 0px 2px 1px #ccc;
        margin-top: 1%;
      }
    }
  }
  .reportBlock {
    width: 85%;
    // height: 900%;

    display: flex;
    justify-content: center;
    height: 1200px;
    margin-top: 1%;
    .reportBlockBox {
      width: 90%;
      height: 100%;
      // background: papayawhip;
      box-shadow: 0px 0px 3px 1px #ccc;
      background: #f5f9fd;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      padding: 10px 10px;
      .top {
        width: 100%;
        height: 18%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px 0px;
        color: #fff;
        font-weight: 600;
        font-size: 1.2em;
        div {
          width: 20%;
          background: #2eaeff;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-left: 3%;
          border-radius: 5%;
        }
      }
      .belowTable {
        width: 100%;
        height: 80%;

        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        ul {
          width: 100%;
          height: 90%;
          // background: #2EAEFF;
          // padding: 20PX 0PX;
          padding: 0;

          overflow: hidden;
          overflow-y: auto;
          .table-title {
            position: sticky;
            top: 0px;
            background: #f5f9fd;
            padding: 0px 10px;
          }
          li {
            width: 100%;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 7%;
            //  background: rgba(0, 0, 0, 0.05);
            span {
              height: 100%;
              width: calc(100% / 5);
              line-height: 55px;
              font-size: 1.1em;
              font-weight: 600;
              text-align: center;
            }
          }
          .currency-list {
            background: #fff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
            margin-top: 1%;
            padding: 0px 10px;
          }
        }
      }
    }
  }
  .EchartsBox {
    width: 80%;
    min-height: 300px;
    .chart {
      height: 300px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      margin-top: 2%;
    }
  }

  .formBox {
    width: 80%;
    min-height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 2%;
  }
}
.footerBox {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15%;

  // background: rgba(204, 204, 204, 0.1);
  // margin-top: 1%;
  background-image: url(../assets/img/bkbuttom.png);
  background-repeat: no-repeat;
  // background-position: 50% 50%;
  background-size: 100% 100%;
  color: rgba(0, 0, 0, 0.9);
  margin-top: 100px;
  .one {
    // background: #2eaeff;
    .oneText {
      // background: #CCC;
      width: 40%;
      margin: 0 auto;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        width: 100%;
      }
    }
  }
  .logo2 {
    display: flex;
    // justify-content: center;
    // width: 28%;
    //  align-items: flex-start;
 
    .logoBox {
      // width: 30%;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: start;
      // background: #D2C3EA;
      margin-top: 4%;
      .logoImg {
        width:160px
      }
      .copyright {
        font-size: 0.8rem;
        width: 100%;
        margin-top: 15px;
        // text-align: center;
      }
      .socialContact {
        display: flex;
        justify-content: space-around;
        width: 120%;
        margin-top: 28px;
        // background: #21A0FF;
        img {
          width: 25px;
          transition: 0.1s linear;
          cursor: pointer;
        }
        img:hover {
          width: 28px;
        }
      }
    }
  }
  .text {
    // width: 20%;
    // background: #21A0FF;
    div {
      width: 77%;
      height: 60%;
      line-height: 28px;
      margin-top: 25px;
      font-size: 0.95rem;
    }
  }
  .product {
  
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      // align-items: center;
      flex-direction: column;
      
      .productTitle {
        margin: 0;
      }
      li {
        margin-top: 15px;
        list-style: none;
        font-size: 0.95rem;
        span{
          cursor: pointer;
        }
        span:hover{
          color: #6e3edb;
        }

        a:hover{
          color: #6e3edb;
          cursor: pointer;
        }
      }
      // li:hover {
      //   color: #6e3edb;
      //   cursor: pointer;
      // }
    }
  }
}
.footerSon {
  // width: calc(100% / 7);
  width: 100%;
  height: 90%;
  margin: 18px 10px ;

  // border-right: 1PX solid rgba(0, 0, 0, 0.1);
  // background: greenyellow;
  .productTitle {
    color: #000;
  }
  h4 {
    color: #000;
  }
}
</style>