css - 在不破坏的情况下调整仪表元素的 css

Question

我只是想让这个仪表变小。当我尝试这样做(修改容器类)时，它会扭曲整个仪表元素。我将位置更改为相对位置，仪表的边缘似乎断裂了。关于如何在不破坏标准的情况下扩展它的任何想法？我最终会将它嵌套在 Bootstrap 的一个列中，并试图让它在基本级别上工作。关于这个 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 !?) 和所有硬编码大小的因素，以便它正确缩放(原始开发者应该首先完成了)。