92 lines
2.0 KiB
Vue
92 lines
2.0 KiB
Vue
<template>
|
|
<view class="floating-menu">
|
|
<view class="menu-button" @click="toggleMenu">
|
|
发表
|
|
<!-- <image v-if="!isExpanded" class="menu-icon" src="/static/images/plus-icon.png" mode="aspectFit" />
|
|
<image v-else class="menu-icon" src="/static/images/close-icon.png" mode="aspectFit" /> -->
|
|
</view>
|
|
<view v-if="isExpanded" class="menu-items">
|
|
<view class="menu-item" @click="publishArticle">案例</view>
|
|
<view class="menu-item" @click="publishVideo">视频</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const isExpanded = ref(false);
|
|
|
|
const toggleMenu = () => {
|
|
isExpanded.value = !isExpanded.value;
|
|
};
|
|
function NavicatToBaseItems(url){
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
const publishArticle = () => {
|
|
console.log("发表案例1");
|
|
NavicatToBaseItems("/pages/uploadNews/uploadNews");
|
|
// 可以根据需求执行具体的发表案例逻辑，例如跳转页面或触发事件等
|
|
};
|
|
|
|
const publishVideo = () => {
|
|
console.log("发表视频");
|
|
NavicatToBaseItems("/pages/uploadVideo/uploadVideo");
|
|
// 可以根据需求执行具体的发表视频逻辑，例如跳转页面或触发事件等
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.floating-menu {
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.menu-button {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-color:#A8E6CF;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.menu-items {
|
|
position: absolute;
|
|
bottom: 160rpx;
|
|
right: 10rpx;
|
|
background-color:#A8E6CF;
|
|
padding: 10rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.menu-item {
|
|
cursor: pointer;
|
|
color:#000;
|
|
font-size: 16rpx;
|
|
padding: 10rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
|
|
.menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|