移动端-圆形导航

<template>
  <div>
    <div class="zy-menu" :style="conStyle" v-if="arr.length != 0">
      <div class="zy-menu-center" @click="menuClick">导航</div>
      <div class="zy-menu-main" :style="menuStyle">
        <div
          class="zy-menu-item"
          @click="urlClick(item.url)"
          v-for="(item, index) in arr"
          :style="{
            transform: 'rotate(' + (360 / arr.length) * index + 'deg)',
          }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: {
    menus: {
      default: [],
      type: Array,
    },
  },
  data() {
    return {
       conStyle:{
          right:"-40px",
          bottom:"0px"
        },
      menuStyle: {
        transform: "scale(0.1) rotate(0deg)",
        rotate: 0,
       
      },
    };
  },
  computed: {
    arr() {
      return this.menus || [];
    },
  },
  mounted() {
  },
  methods: {
    menuClick() {
      console.log(this.menuStyle.transform.indexOf("(1)"));
      if (this.menuStyle.transform.indexOf("(1)") > -1) {
        this.menuStyle.transform = "scale(0.1)  rotate(0deg)";
        this.conStyle.right = "-40px";
        this.conStyle.bottom = "0px";
      } else {
        this.menuStyle.transform = "scale(1)  rotate(360deg)";
        this.conStyle.right = "10px";
        this.conStyle.bottom = "40px";
      }
    },
    urlClick(url) {
      // todo 跳转路由
      console.log(url);
    },
  },
};
</script>


<style scoped>
.zy-menu-main {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 1px solid #888888;
  transform-origin: center center;
  transition: all 1s;
  background:rgba(45, 140, 240);
  background-size:100% 100%;
  box-shadow: 3px 3px 7px #888888;
}
.zy-menu-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 1px solid #888888;
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  z-index: 999;
  background: white;
  box-shadow: 3px 3px 7px #888888;
  font-size: 14px;
}
.zy-menu {
  position: fixed;
  width: 150px;
  height: 150px;
  z-index: 99999999;
  border-radius: 100%;
  bottom: 0px;
  right: -40px;
  transition: all 0.5s;
}
.zy-menu-item {
  position: absolute;
  width: 74px;
  height: 75px;
  left:37px;
  top:0px;
  border: 0px solid black;
  transform-origin: bottom center;
  text-align: center;
  padding-top: 5px;
  font-size: 13px;
  color: #fff;
  text-shadow:1px 1px 4px white;
}
</style>