<template>
  <div class="left1">
    <Pan class="pan1"></Pan>
    <div class="s1"></div>
    <div class="h1"></div>
    <div class="s2"></div>
    <div class="title">{{ title }}</div>
    <div class="val">{{ val }}</div>
  </div>
</template>

<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
    title:  {
        type: String,
        default: '压脚次数'
    },
    val: {
        type: String,
        default: '10次'
    }
})
</script>

<style scoped>
.left1 {
    width: 247px;
    height: 100%;
    position: relative;
}
.pan1 {
    position: absolute;
    width: 247px;
    height: 248px;
    left: 0px;
    top: 0px;
}
.s1 {
    position: absolute;
    width: 258px;
    height: 6px;
    background-image: url('./img/u307p000.svg');
    left: 6px;
    top: 343px;
    transform: rotate(90deg);
}
.h1 {
    position: absolute;
    width: 100px;
    height: 6px;
    background-image: url('./img/u307p001.svg');
    left: 35px;
    top: 467px;
}
.s2 {
    position: absolute;
    width: 124px;
    height: 6px;
    background-image: url('./img/u307p002.svg');
    left: -25px;
    top: 528px;
    transform: rotate(90deg);
}
.title {
    position: absolute;
    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #B2EDED;
    top: 240px;
    left: 42px;
}
.val {
    width: 100%;
    position: absolute;
    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #B2EDED;
    top: 55px;
    left: 0;
}
</style>
