xinkeaboard/xinkeaboard-web/components/MemberTop.vue

<template>
  <div class="sld_member_top">
    <div class="sld_member_top_zoom clearfix">
      <div class="container">
        <dl class="fl sld_left_part">
          <dt class="sld-user-logo sld_img_center">
            <router-link tag="a" :to="`/`" class="flex_row_start_center">
              <img
                :src="memberLogo"
                :onerror="defaultImg"

              />
            </router-link>
          </dt>
          <dd>
            <router-link
              tag="a"
              :to="`/member/home`"
              :class="{ cur_tag_active: curTag == 1 }"
            >
              {{ L["首页"] }}
            </router-link>
          </dd>
        </dl>
        <div class="fr">
          <div class="sld_search_part fl">
            <input
              v-model="keyword"
              type="text"
              class="text"
              :placeholder="L['请输入关键词']"
              autocomplete="off "
              style="color: rgb(153, 153, 153)"
              @focus="inputFocus"
              ref="searchInput"
            />
            <input
              type="submit"
              :value="L['搜索']"
              class="button"
              @click="search"
            />
          </div>
        
        </div>
        <div class="sld_cart_part">
            <dl>
              <dt class="ld first_dt center_text">
                <span class="iconfont">   <img style="width:20px;position:relative; top:3px" src="/email.svg"/> </span>

                <s></s>
                <router-link :to="`/member/enquiry/list`">
                  {{ L["我的询盘"] }}
                </router-link>

              </dt>
              <!-- <dd class="cart_more_view">
                <cart-model></cart-model>
              </dd> -->
            </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useUserInfo } from "@/store/user.js";
import { useFiltersStore } from "@/store/filter.js";
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
const configInfo = useUserInfo();
const { proxy } = getCurrentInstance();
const keyword = ref("");
const curTag = ref(1); //当前选中的tag，1为首页，2为账户管理，3为消息
const router = useRouter();
const cartData = reactive({ data: {} });
const memberInfo = reactive({ data: {} }); //个人信息
const defaultImg = ref("/member/top_logo.png");
const memberLogo = ref('')

const getMemberLogo = () => {
  get('v3/system/front/setting/getSettings?names=main_user_center_logo').then(res=>{
    memberLogo.value = res.data[0]
  })
}
getMemberLogo()

onMounted(() => {
 memberInfo.data = filtersStore.getMemberInfo;
});
//搜索事件
const search = () => {
  proxy.$refs.searchInput.style.color = "rgb(153,153,153)";
  if (keyword.value) {
    router.push({ path: "/goods/list/search_keyword-"+ keyword.value });
  }
};

const inputFocus = () => {
  proxy.$refs.searchInput.style.color = "#333";
};

watchEffect(() => {
//   let tmpRoute = router.currentRoute.value;
//   if (tmpRoute.fullPath.indexOf("/msg/") > -1) {
//     curTag.value = 3;
//   }
//   memberInfo.data = store.state.memberInfo;
});
</script>

<style lang="scss" scoped>

.sld_member_top {
  .sld_member_top_zoom {
    width: 100%;
    background: #F6F8FA;

    .container {
      width: 100%;
      padding: 0 240px;
      display: flex;
      align-items: center;

      &:after,
      &:before {
        display: table;
        content: " ";
      }

      .fl {
      }

      .fr {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        width: 100%;
        overflow: hidden;
      }
    }

    .sld_left_part {
      color: #fff;

      dt {
        float: left;
        width: 127px;
        height: 60px;
        // margin: 5px 35px 0px 0px;

        img {
          cursor: pointer;
        }

        &.sld_img_center {
          position: relative;
          width: 120px;
          overflow: hidden;

          a {
            width: 100%;
            height: 100%;
          }

          img {
            max-width: 100%;
            max-height: 100%;
          }
        }
      }

      dd {
        position: relative;
        float: left;
        background: #FFFFFF;

        a {
          display: block;
          line-height: 64px;
          margin: 0 25px;
          font-weight: bold;
          font-size: 16px;
          color: #282E30;

          &.router-link-active {
            &::after {
              // position: absolute;
              // bottom: 0;
              // left: 50%;
              // content: "";
              // width: 0;
              // height: 0;
              // transform: translateX(-50%);
              // border-width: 6px;
              // border-style: solid;
              // border-color: transparent transparent #fff transparent;
            }
          }

          .msg_num {
            display: block;
            position: absolute;
            background: #ffffff;
            color: $colorMain;
            min-width: 20px;
            height: 20px;
            border-radius: 10px;
            right: 5px;
            top: 10px;
            line-height: 20px;
            text-align: center;
          }

          &.cur_tag_active {
            &::after {
              position: absolute;
              bottom: 0;
              left: 0;
              content: "";
              width: 100%;
              height: 4px;
              background-color: $colorMain;
              // transform: translateX(-50%);
              // border-width: 6px;
              // border-style: solid;
              // border-color: transparent transparent red transparent;
            }
          }

          .account_arrow {
            color: rgba(255, 255, 255, 0.8);
            font-size: 10px;
            margin-left: 2px;
            display: inline-block;
          }

          &:hover {
            .account_arrow {
              transform: rotate(180deg);
              transition: transform 0.2s ease-in 0s,
                -webkit-transform 0.2s ease-in 0s;
            }
          }
        }

        .account_tag:hover {
          .account_popup {
            display: block;
            opacity: 1;
            -webkit-animation: showPopUp 0.4s ease-in-out;
            animation: showPopUp 0.4s ease-in-out;

            @-webkit-keyframes showPopUp {
              0% {
                opacity: 0;
              }

              to {
                opacity: 1;
              }
            }

            @keyframes showPopUp {
              0% {
                opacity: 0;
              }

              to {
                opacity: 1;
              }
            }
          }
        }

        .account_popup {
          display: none;
          opacity: 0;
          top: 40px;
          left: 50%;
          margin-left: -50px;
          padding: 15px 0;
          width: auto;
          position: absolute;
          z-index: 11;

          &::before {
            z-index: 1;
            top: 10px;
            margin-left: -5px;
            width: 10px;
            height: 10px;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
            background-color: #fff;
          }

          &::after,
          &::before {
            content: "";
            position: absolute;
            left: 50%;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
          }

          .content {
            padding: 10px 0 10px 23px;
            overflow: hidden;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
            background-color: #fff;

            .content_item {
              float: left;
              width: 100%;
              color: #333;
              -webkit-transition: all 0.4s ease;
              transition: all 0.4s ease;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              margin: 0;

              &:hover {
                color: $colorMain;
              }
            }
          }
        }
      }
    }

    .sld_cart_part {
      z-index: 99;
      width: 150px;
      height: 100%;

      dd {
        // width: 355px;
        border: 1px solid #e3e3e3;
        background: #fff;
        z-index: 3;
      }

      dl {
        text-align: center;
        dd {
          .incart_goods {
            dl {
              padding-top: 8px;
            }

            dd {
              &.mcart_price {
                position: static;

                em {
                  margin-right: 6px;
                  width: auto;
                  color: #666;

                  &:nth-child(1) {
                    display: block;
                    font-weight: 600;
                  }

                  &:nth-child(2) {
                    display: block;
                    text-align: right;
                    margin-top: 6px;
                  }
                }
              }
            }
          }
        }

        .addcart_goods_num {
          font: 11px/16px Verdana;
          color: #fff;
          background: $colorMain;
          text-align: center;
          display: inline-block;
          height: 16px;
          min-width: 16px;
          border: none 0;
          border-radius: 8px;
          margin-left: 10px;
        }

        .iconfont {
          margin: 0 10px 0 0;
          color: $colorMain;
          font-size: 17px;
          font-weight: 600;
          vertical-align: bottom;
        }
      }

      dt {
        position: absolute;
        z-index: 3;
        // width: 165px;
        height: 38px;
        border: 1px solid #e3e3e3;
        background-color: #fff;
        cursor: pointer;
        font-weight: 400;
        line-height: 30px;
      }

      .first_dt {
        // width: 130px;
        height: 32px;

        a {
          font-weight: bold;
          font-size: $fontE;
          color: $colorMain;
        }
      }

      .cart_more_view {
        display: none;

        .empty_cart {
          width: 100%;
          position: relative;

          .empty_cart_line {
            position: absolute;
            width: 163px;
            right: 0;
            height: 2px;
            top: -2px;
            z-index: 999;
            background: #fff;
          }

          .empty_cart_txt {
            padding: 10px;
            color: #999;
          }
        }
      }

      &:hover .cart_more_view {
        display: inline-block;
      }

      .ld {
        position: relative;
        zoom: 1;
      }
    }

    .sld_search_part {
      width: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      background-color: #fff;

      input {
        height: 30px;
        border: none;
        outline: none;
        background-color: #fff;

        &.text {
          flex: 1;
          width: 100%;
          overflow: hidden;
          line-height: 30px;
          padding-left: 10px;
        }

        &.button {
          height: 32px;
          color: #fff;
          background-color: $colorMain;
          font-size: 14px;
          cursor: pointer;
          padding: 0 15px;
          border-left: 1px solid #ddd;
        }
      }
    }
  }
}
</style>