Question

我只是想使这个量规变小。当我尝试这样做（修改容器类）时，它将扭曲整个量表元素。我将位置更改为相对，并且量规的边缘似乎断裂。关于如何在不超出规格的前提下扩展规模的任何想法？我最终将其嵌套在引导程序的列中，并试图使其在基本级别上起作用。关于此CSS问题的任何建议都会有所帮助

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: '#app',
  components: {
    Gauge 
  } 
});

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

Answer 1

快速而肮脏的解决方案是使用transform: scale()：

.container {
  transform: scale(.5) translateY(-100%);
  transform-origin: 0 100%;
}

与字体大小增加（可选）结合。

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: '#app',
  components: {
    Gauge 
  } 
});

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
  transform: scale(.5) translateY(-100%);
  transform-origin: 0 100%;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 48px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

正确的解决方案是重写CSS，使其采用变量（$gaugeWidth！？）和所有硬编码大小的因数，以便正确缩放（原始开发人员应该在第一名）。

调整量规元素的css不中断

1 个答案: