<view class="all" catch:tap="getElement" >

    <view class="title">

        <view></view>作业成绩所处分数段

    </view>

            <view class="online">

                <view class="bg-ff-score"  wx:for="{{score_list}}" wx:key="index">

                    <view style="min-width:{{msg[index]}}rpx;text-align: center;"  >{{item}}</view>

                </view>

            </view>

            <!-- 姓名 -->

            <view style="margin-left:{{num*tip_rate/100+(select_num-1)*20-onnum-48}}rpx;color:#FF7474;font-size:24rpx;min-width:100rpx">

                {{student_n}}同学

            </view>

            <!-- 箭头位置 -->

            <view class="lin" >

                <image class="img" style="margin-left:{{num*tip_rate/100+(select_num-1)*20-12}}rpx" src="/images/path_red.png"></image>

            </view>

            <view   style="display:flex" >

                <view class="bg-ff"   wx:for="{{msg}}" wx:key="index">

                    <view class="bg-ff-{{index}}" style="width:{{num*item/100}}rpx;" wx:if="{{index != (select_num)}}"></view>

                    <view class="bg-ff-{{index}}" style="width:{{num*item/100}}rpx;background: {{red_back}};" wx:else></view>

                </view>

            </view>

            <view class="online1" >

                <view class="bg-ff1"  wx:for="{{score}}" wx:key="index">

                    <view style="width:{{msg[index]*dob}}rpx;color:#6597FF;text-align: center;"  wx:if="{{index != (select_num)}}">{{item}}</view>

                    <view style="width:{{msg[index]*dob}}rpx;color: #FFAB96;text-align: center;" wx:if="{{index == (select_num)}}">{{item}}</view>

                </view>

            </view>

            <view class="bottom_title">

            *{{bottom_title}}

            </view>

</view>

以组件的形式调用msg = [33.3,33.3,33.3,0] ,当前选中第几个显示红色区域select_num= 1，onnum参数为 左右两侧显示不开的时候名字移动距离，num为屏幕宽度，tip_rate为当前箭头指向的位置

<color-line msg="{{msg}}" select_num="{{select_num}}" onnum="{{onnum}}" bottom_title="{{bottom_title}}"  num="{{num}}"  student_n="{{student_n}}" tip_rate="{{tip_rate}}"></color-line>