vue自定义竖向进度条

<template>

  <view class="progressContainer">

    <view class="progress" :style="{ height: progress + '%' }">

      <view class="progress-view"></view>

    </view>

  </view>

</template>

<script>

export default {

  name: "details",

  data() {

    return {

      progress: 80,

    };

  },

  methods: {},

  created() {},

};

</script>

<style scoped>

.progressContainer {

  position: relative;

  width: 20px;

  height: 100%;

  background-color: #ddd;

  overflow: hidden;

}

.progress {

  position: absolute;

  background-color: #1c8de0;

  width: 20px;

  bottom: 0;

}

.progress-view {

  width: 20px;

  height: 20px;

  background: #f00;

  position: absolute;

  top: 0;

}

</style>