<template>
|
<view class="app">
|
<view class="inner">
|
<view class="content flex">
|
<view class="flex-sub flex align-center justify-center bg-blue">1</view>
|
<view class="flex-sub flex align-center justify-center bg-cyan">2</view>
|
<view class="flex-sub flex align-center justify-center bg-gradual-orange">3</view>
|
</view>
|
<view class="h-table" style=" width: 100vh;">
|
<view class="h-tr h-tr-12 h-thead">
|
<view class="h-td">品名</view>
|
<view class="h-td">装料量</view>
|
<view class="h-td">目标</view>
|
<view class="h-td h-td-colspan h-td-rowspan">
|
<view class="h-tr h-tr-1">
|
<view class="h-td h-td-colspan">前</view>
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">左</view>
|
<view class="h-td">右</view>
|
</view>
|
|
</view>
|
<view class="h-td h-td-colspan h-td-rowspan">
|
<view class="h-tr h-tr-1">
|
<view class="h-td h-td-colspan">中</view>
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">左</view>
|
<view class="h-td">右</view>
|
</view>
|
|
</view>
|
<view class="h-td h-td-colspan h-td-rowspan">
|
<view class="h-tr h-tr-1">
|
<view class="h-td h-td-colspan">后</view>
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">左</view>
|
<view class="h-td">右</view>
|
</view>
|
|
</view>
|
|
<view class="h-td">平均</view>
|
<view class="h-td">时间(分钟)</view>
|
<view class="h-td">蒸汽(立方)</view>
|
</view>
|
|
<view v-for="(item,index) in 10" class="h-tr h-tr-12" style="background-color: white">
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
<view class="h-td">100</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list:[{}]
|
|
}
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "components/table/helang-table";
|
|
.app {
|
width: 100vw;
|
height: 100vh;
|
background-color: royalblue;
|
|
.inner {
|
/* 设置基准点为左上角 */
|
transform-origin: top left;
|
/* 以左上角为基准点，顺时针旋转90度 然后沿Y轴反方向平移100% */
|
/* 为什么沿Y轴，因为旋转使坐标轴方向发生了变化 */
|
transform: rotate(90deg) translateY(-100%);
|
/*设置元素的宽度为 100%父元素的高度 并提高样式优先级 */
|
width: 100vh !important;
|
/*设置元素的宽度为 100%父元素的宽度 并提高样式优先级 */
|
height: 100vw !important;
|
background-color: gold;
|
overflow: scroll;
|
|
.content {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
