Uniapp中如何修改下拉刷新样式

<template>  <view>    <uni-scroll-view class="scroll-view"      :scroll-top="scrollTop"      @scrolltolower="scrollToLower"      @scroll="scroll"      @refresh="refresh"      :scroll-with-animation="scrollWithAnimation"      :enable-back-to-top="enableBackToTop"      :refresher-enabled="true"      :refresher-threshold="45"      :refresher-default-style="refresherDefaultStyle"      :refresher-background-color="refresherBackgroundColor"      :text-style="textStyle">      <!-- 下拉刷新的容器组件 -->      <view class="refresh-container">        <view v-if="isRefreshing" class="loading-box">          <loading class="loading" type="circular" size="23"></loading>          <text class="loading-text">正在刷新...</text>        </view>        <view v-else class="arrow-icon-box">          <image :src="arrowIconSrc" class="arrow-icon" :style="{transform: pullDownStyle}" />          <text class="refresh-text">{{ refreshText }}</text>        </view>      </view>      <!-- 加载更多的容器组件 -->      <slot></slot>      <view v-if="isLoadingMore" class="loading-more">{{ loadingMoreText }}</view>    </uni-scroll-view>  </view></template>

<style>  .refresh-container {    display: flex;    flex-direction: column;    justify-content: flex-end;    align-items: center;    height: 45px;    line-height: 45px;    color: #999;  }  .arrow-icon-box {    display: flex;    flex-direction: row;    align-items: center;    justify-content: center;    height: 45px;    line-height: 45px;  }  .arrow-icon {    width: 23px;    height: 23px;  }  .refresh-text {    margin-left: 12px;    font-size: 14px;  }  .loading-box {    display: flex;    flex-direction: row;    align-items: center;    height: 45px;    line-height: 45px;    color: #999;  }  .loading {    margin-left: 12px;    margin-right: 12px;  }  .loading-text {    font-size: 14px;  }</style>

<script>  export default {    data() {      return {        isRefreshing: false,        refreshText: '下拉刷新',        arrowIconSrc: 'static/img/arrow-down.png',        pullDownStyle: 'rotate(0deg)',      }    },    methods: {      // 下拉刷新事件      refresh() {        this.isRefreshing = true;        this.refreshText = '正在刷新';        this.arrowIconSrc = 'static/img/loading.gif';        this.pullDownStyle = 'rotate(360deg)';        setTimeout(() => {          this.isRefreshing = false;          this.refreshText = '下拉刷新';          this.arrowIconSrc = 'static/img/arrow-down.png';          this.pullDownStyle = 'rotate(0deg)';        }, 2000);      },      // 滚动事件      scroll(e) {        // 滚动时记录滚动位置        this.scrollTop = e.detail.scrollTop;      },      // 滚动到底部事件      scrollToLower() {        if (!this.isLoadingMore) {          this.isLoadingMore = true;          this.loadingMoreText = '加载中...';          setTimeout(() => {            this.isLoadingMore = false;            this.loadingMoreText = '上拉加载更多';          }, 2000);        }      },    },  }</script>