|
|
@@ -45,6 +45,41 @@
|
|
|
:data="item"></row-card>
|
|
|
<!-- <subscription></subscription> -->
|
|
|
</section>
|
|
|
+ <no-ssr>
|
|
|
+ <div
|
|
|
+ class="cookie-dialog"
|
|
|
+ v-show="!canUseCookie">
|
|
|
+ <div class="cookie-dialog-wrap">
|
|
|
+ <div class="cookie-dialog-title">Our Cookies</div>
|
|
|
+ <div class="cookie-dialog-content">
|
|
|
+ We use cookies to provide website functionality, to analyze traffic
|
|
|
+ on our website, personalize content, serve targeted advertisements
|
|
|
+ and to enable social media functionality.
|
|
|
+ </div>
|
|
|
+ <div class="flex center">
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ @click="dialogAskCookieVisible = true">
|
|
|
+ Privacy policy
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ @click="allowCookie">
|
|
|
+ Allow all
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </no-ssr>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogAskCookieVisible"
|
|
|
+ width="400"
|
|
|
+ title="Privacy policy">
|
|
|
+ We use cookies to provide website functionality, to analyze traffic on our
|
|
|
+ website, personalize content, serve targeted advertisements and to enable
|
|
|
+ social media functionality. Our cookie statement provides more information
|
|
|
+ in our Privacy Policy page.
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -93,10 +128,20 @@ export default {
|
|
|
shopCarBall: false,
|
|
|
shopCarBallEl: null,
|
|
|
ss: null,
|
|
|
+ canUseCookie: false,
|
|
|
+ dialogAskCookieVisible: false,
|
|
|
}
|
|
|
},
|
|
|
- created() {},
|
|
|
+ beforeMount() {
|
|
|
+ this.canUseCookie = !!this.$cookies.get('can-use-cookie') || false
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ allowCookie() {
|
|
|
+ this.$cookies.set('can-use-cookie', true)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.canUseCookie = this.$cookies.get('can-use-cookie') || false
|
|
|
+ })
|
|
|
+ },
|
|
|
addCompareList(target) {
|
|
|
this.shopCarBallEl = target
|
|
|
this.shopCarBall = true
|
|
|
@@ -159,4 +204,55 @@ export default {
|
|
|
transition: all 0.5s linear;
|
|
|
}
|
|
|
}
|
|
|
+.cookie-dialog {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(#222, 0.3);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ z-index: 1000;
|
|
|
+ padding-top: 15vh;
|
|
|
+ .cookie-dialog-wrap {
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(#000, 0.7);
|
|
|
+ width: 25%;
|
|
|
+ min-width: 350px;
|
|
|
+ padding: 40px 60px;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 50%;
|
|
|
+ // top: 50%;
|
|
|
+ // transform: translate(-50%, -50%);
|
|
|
+ width: 450px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ .cookie-dialog-title {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .cookie-dialog-content {
|
|
|
+ line-height: 1.6;
|
|
|
+ text-align: left;
|
|
|
+ padding: 20px 0 30px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ font-size: 16px;
|
|
|
+ border: none;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: 0 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px !important;
|
|
|
+ width: 140px;
|
|
|
+ padding: 10px 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ border: 1px solid #fff;
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
