You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.9 KiB
96 lines
1.9 KiB
<template>
|
|
<view>
|
|
<view class="record-item mb-24">
|
|
<view class="flex justify-between items-center">
|
|
<view class="mb-20 title">
|
|
这是一个标题
|
|
<text class="status" :class="status[1]"> 这是状态 </text>
|
|
</view>
|
|
<view @click.stop="upMask"> 1111 </view>
|
|
</view>
|
|
<view class="flex justify-between items-center txt">
|
|
<view> 这是时间 </view>
|
|
<view class="">这是时长</view>
|
|
</view>
|
|
<view class="mask" v-if="popup">
|
|
<view>导出</view>
|
|
<view>重命名</view>
|
|
<view>删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
status: ["wait", "success"],
|
|
popup: false,
|
|
};
|
|
},
|
|
methods: {
|
|
upMask() {
|
|
this.popup = !this.popup;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../common.scss";
|
|
|
|
.status {
|
|
// line-height: 40rpx;
|
|
padding: 4rpx 16rpx;
|
|
border: 1rpx solid;
|
|
border-radius: 8rpx;
|
|
margin-left: 12rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
.wait {
|
|
border: #1467ff 1rpx solid;
|
|
color: #1467ff;
|
|
background-color: #1466ff11;
|
|
}
|
|
.success {
|
|
border: #1eb066 1rpx solid;
|
|
color: #1eb066;
|
|
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 {
|
|
position: relative;
|
|
// height: 168rpx;
|
|
border-radius: 24rpx;
|
|
border: 2rpx #fff solid;
|
|
padding: 32rpx 24rpx;
|
|
padding-bottom: 36rpx;
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #23262b;
|
|
line-height: 40rpx;
|
|
}
|
|
.txt {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #4b5158;
|
|
}
|
|
}
|
|
</style> |