<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>
