标题操作条就是纯粹的样式，右侧预览图滑到标题操作条，直接复制对应代码到项目对应的位置即可

演示代码里有代码注释，一条对应一条，复制即可

演示代码

<view class="box">
    // 第一、二种都是标题和类似边框的组合样式，添加 border-title 类名
    // 底部样式是 text 标签的 last-child 选择器设置的，可以自定义颜色和长度
	<view class="cu-bar bg-white">
		<view class="action border-title">
			<text class="text-xl text-bold">关于我们</text>
			<text class="bg-grey" style="width:2rem"></text>
		</view>
	</view>
	<view class="cu-bar bg-white">
		<view class="action border-title">
			<text class="text-xl text-bold text-blue">关于我们</text>
			<text class="bg-gradual-blue" style="width:3rem"></text>
		</view>
	</view>

    // 第三、四这两种和上面的原理相同，添加的是 sub-title 类名，底部可以设置文字
	<view class="cu-bar bg-white">
		<view class="action sub-title">
			<text class="text-xl text-bold text-green">关于我们</text>
			<text class="bg-green"></text>
		</view>
	</view>
	<view class="cu-bar bg-white">
		<view class="action sub-title">
			<text class="text-xl text-bold text-blue">关于我们</text>
			<text class="text-ABC text-blue">about</text>
		</view>
	</view>

    // 第五种主要是类名 self-end，设置了最后一行字的位置，就是 css 属性 align-self: flex-end （详情可以去看看 flex 布局）
	<view class="cu-bar bg-white">
		<view class="action">
			<text class="text-xl text-bold">关于我们</text>
			<text class="text-Abc text-gray self-end margin-left-sm">about</text>
		</view>
	</view>

    // 最后这两种就是简单的添加了两个图标，没什么好说的
	<view class="cu-bar bg-white">
		<view class="action">
			<text class="cuIcon-title text-green"></text>
			<text class="text-xl text-bold">关于我们</text>
		</view>
	</view>
	<view class="cu-bar bg-white">
		<view class="action">
			<text class="cuIcon-titles text-green"></text>
			<text class="text-xl text-bold">关于我们</text>
		</view>
	</view>
</view>