前言：UI设计用一个长方体的高度来显示数据比率，记录一下实现的组件，方便日后的需要。
设置长方体的某一个点坐标位置不变，长宽高从这个点出发形成一个长方体。如下图
将p0的位置设置为不随长方体的长宽高改变而改变，正面看到的一面设置为front，front左边的页面是left，front右边的页面是right，front的对面是back，长方体，的上方是top，下方是bottom。
对于left和right面的大小，长为high，宽为wide，left面与p0的位置相差为translateX(-high px)，translateZ（long / 2 px）,而right面，translateX(-high px)，translateZ(- long / 2 px)。
对于top和bottom，长为long，宽为high，top面与p0的位置，需要延Y轴翻转，rotateY(270deg)，translateZ(long / 2 + high * Math.cos(90 * Math.PI) px)，这个值是自己做了很久的尝试得到的值，也不知道原理是什么。而对于bottom的translateZ的值为long / 2就可以了。
对于front和back，长为high，宽为long，front面与p0的位置，需要延X轴翻转，rotateX(90deg)，translateX的值与left一样，translateZ(long / 2 - wide* Math.cos(270 * Math.PI) px)跟据top的值尝试得到值，back的translateZ的值为- long / 2。
使用'document.getElementsByTagName("body")[0].style.setProperty("--width", "20px")'方式修改scss的变量，变量的运算将无效，如'var (--width / 2)'。该方式会修改所有同变量名，最后的一次修改会覆盖前面的修改，对于需要不同值展示，这种方法并不合适。
使用'document.getElementsByClassName("box")[0].style.setProperty("--width", "20px")'，可以一个个设置，但是对于多个class，需要自己弄清需要修改的class所属于的index。
可以使用ref来设置scss的变量，"this.$refs.box.style.setProperty('--width', '20px')"。
