45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
||
<view v-if="quantity >= 1" @click="click" class="fixed-view">
|
||
<view class="fixed-view-icon">
|
||
<uni-icons color="#fff" type="cart-filled" size="35"></uni-icons>
|
||
<uni-badge class="uni-badge-left-margin" :text="quantity" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
//购物车是有商品
|
||
const quantity = ref(1);
|
||
// 购物车跳转
|
||
const click = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/index/components/shoppingCart'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.fixed-view {
|
||
position: fixed; // 使用fixed定位使元素固定
|
||
bottom: 20%; // 距离底部的距离，可根据需要调整
|
||
right: 2%; // 距离右侧的距离，可根据需要调整
|
||
z-index: 10; // 确保元素在最上层
|
||
.fixed-view-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background-color: #000;
|
||
border-radius: 50%;
|
||
.uni-badge-left-margin {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|