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.
128 lines
2.9 KiB
128 lines
2.9 KiB
<template>
|
|
<div class="container">
|
|
<meet-sticky :bg="bg">
|
|
<meet-navbar title="会议记录" :isFixed="false"></meet-navbar>
|
|
</meet-sticky>
|
|
<div>
|
|
<div class="mb-30">
|
|
<u-search
|
|
placeholder="日照香炉生紫烟"
|
|
v-model="keyword"
|
|
:showAction="false"
|
|
:customStyle="customStyle1"
|
|
></u-search>
|
|
</div>
|
|
<view>
|
|
<view class="record-item mb-24">
|
|
<view class="flex justify-between items-center">
|
|
<view class="title"> 这是一个标题 </view>
|
|
<view>
|
|
<image
|
|
src="/static/image/user/share.png"
|
|
mode="scaleToFill"
|
|
class="icon"
|
|
/>
|
|
<image
|
|
src="/static/image/user/more.png"
|
|
mode="scaleToFill"
|
|
class="icon"
|
|
@click.stop="upMask"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mask" v-if="popup">
|
|
<view>导出</view>
|
|
<view>重命名</view>
|
|
<view>删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: "遥看瀑布挂前川",
|
|
bg: "",
|
|
popup: false,
|
|
customStyle1: {
|
|
background:
|
|
"linear-gradient( 180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%)",
|
|
borderRadius: "40rpx",
|
|
border: " 2rpx solid #FFFFFF",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
upMask() {
|
|
this.popup = !this.popup;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../common.scss";
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
.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;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.6) 100%
|
|
);
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #23262b;
|
|
// line-height: 40rpx;
|
|
}
|
|
}
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #d1dcfe;
|
|
padding: 20rpx 24rpx;
|
|
}
|
|
::v-deep .u-search__content {
|
|
background-color: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.6) 100%
|
|
) !important;
|
|
}
|
|
::v-deep .u-search__content__input {
|
|
background-color: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.6) 100%
|
|
) !important;
|
|
}
|
|
</style> |