fashion-ssr-vue3/components/cookieTip.vue

<script lang="ts" setup>
const visible = ref(false);

onMounted(() => {
  getCookieTip();
});

function getCookieTip() {
  if (process.client) {
    const savedData = localStorage.getItem("cookieTip");
    if (savedData) {
      const { status } = JSON.parse(savedData);
      visible.value = status;
    } else {
      visible.value = true;
    }
  }
}

function setCookieTip() {
  if (process.client) {
    visible.value = false;
    localStorage.setItem("cookieTip", JSON.stringify({ status: false }));
  }
}
</script>

<template>
  <div
    v-if="visible"
    class="cookie-tip w-full bg-#fff py-36px px-40px flex items-center justify-between pos-fixed bottom-0 left-0 right-0 z-10000"
  >
    <div class="text-#333 w-900px lh-24px">
      We use cookies to enable services and functionality on our site and to
      improve your experience. Byusing our website, you agree to our use of such
      technologies as laid out in the
      <a href="/policy" class="underline">Privacy Policy</a>.
    </div>
    <el-button
      class="w-100px px-30px py-10px !h-40px !bg-#C58C64 !text-#fff !b-rd-148px"
      @click="setCookieTip"
    >
      OK
    </el-button>
  </div>
</template>

<style lang="less" scoped>
.cookie-tip {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
</style>