<!--
 * @Author: micky
 * @Date: 2024-08-10 17:21:54
 * @LastEditors: micky
 * @LastEditTime: 2024-08-19 16:28:07
 * @FilePath: \chargingpile-uniapp\src\pages\client\components\layout.vue
-->
<template>
    <TContainer class="client">
        <view class="z-20 relative h-full flex flex-col pb-[30rpx]"><slot></slot></view>
        <view class="repair" @click="showPopup">
            <TIcon name="icon-weixiu" :size="24" color="#fff" />
            报修
        </view>
        <img src="@/static/images/bg.png" alt="" class="page-bg-img" />
        <Popup ref="popup" />
    </TContainer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import Popup from '../repair/popup.vue'

const popup = ref()
const showPopup = () => {
    popup.value.showPopup()
}
</script>
<style scoped lang="scss">
.repair {
    width: 120rpx;
    height: 120rpx;
    position: absolute;
    bottom: calc(5rpx + env(safe-area-inset-bottom));
    background-color: #0e66fb;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26rpx;
}
</style>
