<template>
  <div id="cesiumContainer" class="cesium-container"></div>
  <div class="time">

  </div>
  <div class="time">
    <img src="https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/time.png"
      style="width: 100%; height: 100%;">
    <button class="button1" @click="forward">▶</button>
    <button class="button2" v-on:click="start">◼</button>
    <button class="button3" v-on:click="back">◀</button>
    <button class="button4" v-on:click="multiplier">×2</button>
    <button class="button5" v-on:click="divide">×-2</button>
    <button class="button6" v-on:click="reset">⚪</button>
    <p class="bei">{{ bei }}X</p>
    <p class="time-text"> {{ timetext }}</p>
  </div>
</template>
<script setup>
import { onMounted,ref } from 'vue';
import { addDial, divide, multiplier, back, start, forward, reset } from './function';
import bei from './function';
import timetext from './function';
onMounted(() => {
  addDial()
});

</script>

<style>
.cesium-container {
width: 100%;
height: 100vh;
}
.time {
  width: 180px;
  height: 100px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.button1 {
  position: absolute;
  bottom: 0px;
  left: 120px;
}

.button2 {
  position: absolute;
  bottom: 0px;
  left: 85px;
}

.button3 {
  position: absolute;
  bottom: 0px;
  left: 50px;
}

.button4 {
  position: absolute;
  bottom: 0px;
  left: 150px;
}

.button5 {
  position: absolute;
  bottom: 0px;
  left: 10px;
}

.button6 {

  position: absolute;
  bottom: 85px;
  left: 10px;
}

.bei {
  color: aliceblue;
  font-size: 15px;
  position: absolute;
  bottom: 40px;
  left: 80px;
}

.time-text {
  color: aliceblue;
  font-size: 15px;
  position: absolute;
  bottom: 30px;
  left: 40px;
}
</style>