<template>
    <view class="flex direction-column height-100pre padding">
        <view class="image-box"></view>
        <view class="title">{{row.title}}</view>
        <view class="flex child-gap">
            <view class="attr width-45per">{{row.number}}</view>
            <view class="attr grow-1">上工序{{row.prevProcess}}</view>
        </view>
        <view class="attr padding-tb">{{row.spec}}</view>
        <view class="flex grow-1 height-0 scroll">
            <view>{{row.content}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                row: {
                    title: '劳伦斯',
                    number: 'cx2201548dd21',
                    prevProcess: '流程1',
                    spec: '左扶1*2+右扶1*1+脚踏',
                    content: '总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；总长3.2米；左扶1（2个）各减7；单心减8；全套全部换成月球表面；'
                }
            };
        }
    }
</script>

<style lang="scss">
    .image-box {
        position: relative;
        width: 100%;
        height: 300upx;
        background-color: #f8f8f8;
    }
    
    .title {
        display: flex;
        font-size: 42upx;
        align-items: center;
        justify-content: center;
        padding: 40upx 20upx;
    }
    
    .attr {
        flex-shrink: 0;
        color: #999999;
        font-size: 28upx;
    }
    
    .content {
        font-size: 325upx;
        padding: 20upx;
    }
</style>
