|
|
@ -6,12 +6,17 @@ |
|
|
|
这是一个标题 |
|
|
|
这是一个标题 |
|
|
|
<text class="status" :class="status[1]"> 这是状态 </text> |
|
|
|
<text class="status" :class="status[1]"> 这是状态 </text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view> 1111 </view> |
|
|
|
<view @click.stop="upMask"> 1111 </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex justify-between items-center txt"> |
|
|
|
<view class="flex justify-between items-center txt"> |
|
|
|
<view> 这是时间 </view> |
|
|
|
<view> 这是时间 </view> |
|
|
|
<view class="">这是时长</view> |
|
|
|
<view class="">这是时长</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="mask" v-if="popup"> |
|
|
|
|
|
|
|
<view>导出</view> |
|
|
|
|
|
|
|
<view>重命名</view> |
|
|
|
|
|
|
|
<view>删除</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
@ -21,8 +26,14 @@ export default { |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
status: ["wait", "success"], |
|
|
|
status: ["wait", "success"], |
|
|
|
|
|
|
|
popup: false, |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
upMask() { |
|
|
|
|
|
|
|
this.popup = !this.popup; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
@ -30,7 +41,7 @@ export default { |
|
|
|
@import "../common.scss"; |
|
|
|
@import "../common.scss"; |
|
|
|
|
|
|
|
|
|
|
|
.status { |
|
|
|
.status { |
|
|
|
// line-height: 40rpx; |
|
|
|
// line-height: 40rpx; |
|
|
|
padding: 4rpx 16rpx; |
|
|
|
padding: 4rpx 16rpx; |
|
|
|
border: 1rpx solid; |
|
|
|
border: 1rpx solid; |
|
|
|
border-radius: 8rpx; |
|
|
|
border-radius: 8rpx; |
|
|
@ -48,7 +59,23 @@ export default { |
|
|
|
color: #1eb066; |
|
|
|
color: #1eb066; |
|
|
|
background-color: #1eb06611; |
|
|
|
background-color: #1eb06611; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mask { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
width: 168rpx; |
|
|
|
|
|
|
|
height: 232rpx; |
|
|
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
|
|
top: 80rpx; |
|
|
|
|
|
|
|
right: 16rpx; |
|
|
|
|
|
|
|
padding: 24rpx; |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.record-item { |
|
|
|
.record-item { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
// height: 168rpx; |
|
|
|
// height: 168rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
border: 2rpx #fff solid; |
|
|
|
border: 2rpx #fff solid; |
|
|
|