slibra-module-web/src/views/screen/components/middleBox.vue

<script setup>
import { onMounted } from "vue";
// import motor3d from '../3d/renderModel.js';


defineProps({
  dataTime: ''
})

onMounted(() => {
  // new motor3d('#scene') 
})

</script>

<template>
  <div class="send-ask">
    <!-- <div id="scene" class="3d-scene"></div> -->
    <RouterLink class="send-ask-button" to="/answer" :data-time="dataTime">输入您的问题或需求</RouterLink>
  </div>
</template>

<style scoped lang="scss">
.send-ask {
  margin: 0 2rem;
  position: relative;
  height: 100%;
  
  #scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 116rem;
    height: calc(100% - 6rem);
    z-index: 1;
  }

  &-button {
    position: absolute;
    width: 100%;
    height: 6rem;
    border-radius: 0.8rem;
    box-shadow: 0 0.3rem 1.2rem 0 #97D3FF40;
    background: #FFFFFF;
    font-size: 1.5rem;
    color: #9E9E9E99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.7rem 0 3.4rem;
    bottom: 2rem;
    z-index: 2;

    &::before {
      content: attr(data-time);
      display: block;
      position: absolute;
      right: 0;
      bottom: 6.8rem;
      color: #9E9E9E;
      font-size: 1.2rem;
    }

    &::after {
      content: '';
      background: url(@/assets/images/home/send.png) no-repeat;
      background-size: contain;
      width: 5.6rem;
      height: 3.6rem;
    }
  }
}
</style>