css 写一个遥控器

banner05.jpg

<view class="projector-control">
    <view class="dom-btn clrfix">
        <view class="fl" hover-class="dom-btn-active" @tap="ProjectorFn('up','6')"></view>
        <view class="fl" hover-class="dom-btn-active" @tap="ProjectorFn('right','9')"></view>
        <view class="fl" hover-class="dom-btn-active" @tap="ProjectorFn('left','8')"></view>
        <view class="fl" hover-class="dom-btn-active" @tap="ProjectorFn('down','7')"></view>
    </view>
    <view class="center-ok-btn" hover-class="dom-btn-active" @tap="ProjectorFn('confirm','5')">OK</view>
</view>
<style>
.projector-control{
    width: 378upx;
    height: 378upx;
    position: relative;
    margin: auto;
    margin-bottom: 28upx;
    border-radius: 50%;
    background: url(一张带有上下左右箭头的圆形图片) no-repeat center center;
    background-size: 100% 100%;
    // box-shadow:0px 8upx 16upx rgba(176,194,204,0.4);
    overflow: hidden;
    .dom-btn{
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
        transform: rotate(45deg);
        .fl{
            width: 50%;
            height: 50%;
            text-align: center;
            line-height: 139upx;
        }
    }
    .center-ok-btn{
        width: 178upx;
        height: 178upx;
        text-align: center;
        line-height: 178upx;
        font-size: 60upx;
        background: #fff;
        color:#999;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        z-index: 3;
    }
}
</style>