Iview2 Result 处理结果自定义组件

前端小白۞

已于 2022-07-29 17:16:19 修改

阅读量336

点赞数 1

CC 4.0 BY-SA版权

分类专栏：大前端文章标签：前端 css

于 2022-07-29 17:16:02 首次发布

本文链接：https://blog.youkuaiyun.com/zzzz121380/article/details/126060200

大前端专栏收录该内容

56 篇文章

订阅专栏

这是一个使用Iview2Result组件创建的处理结果展示页面的代码实例。页面包含一个绿色圆形的进度指示器，下方显示'申请处理中...'的文字提示，以及一条详细信息说明申请状态。用户可以通过点击'返回订单列表'按钮回到订单列表页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Iview2Result 处理结果自定义组件

效果图

在这里插入图片描述

代码实现

<template>
  <div >

      <Row style="height: 200px;margin-top: 20px" class="fiexstyle">
          <div style="width: 100px;height: 100px;background-color:#5cb85c;border-radius: 50%">
            <Icon type="ios-checkmark" size="60" style="color:white;margin: 20%"></Icon>
          </div>
      </Row>

      <Row class="fiexstyle">
        <p style="font-size: 24px;height: 50px;text-align: center;">
          申请处理中...
        </p>
      </Row>
      <Row class="fiexstyle">
        <p style="height: 50px;text-align: center;">
          您的申请已收到，系统正在处理中。
        </p>
      </Row>
      <Row class="fiexstyle">
        <Button type="primary" @click="goback">返回订单列表</Button>
      </Row>


  </div>


</template>
<script>
export default {
  name: "resultProcess",
  data(){
    return{

    }
  },
  methods:{
    goback(){
      this.$router.push({
        name:'my-orders'
      })
    }
  }
}
</script>

<style scoped>
.fiexstyle{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>