|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div class="setters" v-if="isWhole">
|
|
|
+ <div class="setters" v-if="isWhole" :style="{width:cwidth}">
|
|
|
<div class="minutes-set">
|
|
|
<button
|
|
|
data-setter="minutes-plus"
|
|
|
@@ -83,6 +83,7 @@ export default {
|
|
|
isStarted: false,
|
|
|
displayString: "",
|
|
|
isWhole:true,
|
|
|
+ cwidth: '162px'
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -193,6 +194,11 @@ export default {
|
|
|
// this.update(this.wholeTime, this.wholeTime);
|
|
|
// this.displayTimeLeft(this.wholeTime);
|
|
|
this.getValue();
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ setTimeout(() => {
|
|
|
+ this.cwidth = document.querySelector(".controlls") ? (document.querySelector(".controlls").offsetWidth + 'px') : 'fit-content'
|
|
|
+ }, 600);
|
|
|
+ })
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.intervalTimer);
|
|
|
@@ -227,31 +233,39 @@ button[data-setter]:hover {
|
|
|
}
|
|
|
.setters {
|
|
|
position: absolute;
|
|
|
- /* left: 85px;
|
|
|
- top: 75px; */
|
|
|
- left: 78px;
|
|
|
- top: 75px;
|
|
|
+ left: 50%;
|
|
|
+ top: 75px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
.minutes-set {
|
|
|
- float: left;
|
|
|
+ /* float: left; */
|
|
|
/* margin-right: 28px; */
|
|
|
- margin-right: 20px;
|
|
|
+ /* margin-right: 20px; */
|
|
|
}
|
|
|
.seconds-set {
|
|
|
- float: right;
|
|
|
+ /* float: right; */
|
|
|
}
|
|
|
.controlls {
|
|
|
position: absolute;
|
|
|
- left: 70px;
|
|
|
top: 105px;
|
|
|
- text-align: center;
|
|
|
- width: 170px;
|
|
|
+ text-align: center;
|
|
|
+ min-width: fit-content;
|
|
|
+ width: fit-content;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
}
|
|
|
.display-remain-time {
|
|
|
font-family: "Roboto";
|
|
|
- font-weight: 100;
|
|
|
- font-size: 65px;
|
|
|
- color: #409eff;
|
|
|
+ font-weight: 100;
|
|
|
+ font-size: 66px;
|
|
|
+ color: #409eff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ min-width: fit-content;
|
|
|
+ justify-content: center;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
#pause {
|
|
|
outline: none;
|
