147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<template>
|
|
<view>
|
|
<view>
|
|
<u-tabs :list="tabsList" :scrollable="false" lineColor="#0A994A" color="#969696"
|
|
activeStyle="color:#15CA65;font-weight: bold;" :current="tabCurrent" @change="tabChange"></u-tabs>
|
|
</view>
|
|
<view v-if="tabCurrent == 0" style="background-color: #fff;">
|
|
<view v-for="(item,index) in needsList" :key="index" class="my_line"
|
|
style="padding: 24rpx 19rpx;border-bottom: 1px solid #EEEEEE;">
|
|
<text class="needs_text">{{item.needsText}}</text>
|
|
<view class="time_line">
|
|
<view class="release_time">
|
|
<text>{{item.time}}</text>
|
|
</view>
|
|
<view class="btn">
|
|
<u-icon name="edit-pen" color="#15CA65" size="20"></u-icon>
|
|
<text class="btn_text">修改</text>
|
|
</view>
|
|
<view class="btn">
|
|
<u-icon name="trash" color="#15CA65" size="20"></u-icon>
|
|
<text class="btn_text">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="tabCurrent == 1" style="background-color: #fff;">
|
|
<view v-for="(item,index) in ideasList" :key="index" class="my_line"
|
|
style="padding: 24rpx 19rpx; border-bottom: 1px solid #EEEEEE;">
|
|
<text class="needs_text">{{item.needsText}}</text>
|
|
<view class="time_line">
|
|
<view class="release_time">
|
|
<text>{{item.time}}</text>
|
|
</view>
|
|
<view class="btn">
|
|
<u-icon name="edit-pen" color="#15CA65" size="20"></u-icon>
|
|
<text class="btn_text">修改</text>
|
|
</view>
|
|
<view class="btn">
|
|
<u-icon name="trash" color="#15CA65" size="20"></u-icon>
|
|
<text class="btn_text">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabCurrent: 0,
|
|
tabsList: [{
|
|
name: '需求发布'
|
|
}, {
|
|
name: '创意发布'
|
|
}],
|
|
|
|
needsList: [{
|
|
needsText: '需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述描述需求描述描...',
|
|
time: '2022-12-03 09:59',
|
|
}, {
|
|
needsText: '需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述描述需求描述描...',
|
|
time: '2022-12-03 09:59',
|
|
}, ],
|
|
ideasList: [{
|
|
needsText: '产品名称产品名称产品名称',
|
|
time: '2022-12-03 09:59',
|
|
},
|
|
{
|
|
needsText: '产品名称产品名称产品名称',
|
|
time: '2022-12-03 09:59',
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange(data) {
|
|
this.tabCurrent = data.index
|
|
this.needsPublishForm = {}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-tabs {
|
|
margin-bottom: 10rpx;
|
|
|
|
.u-tabs__wrapper__nav {
|
|
background-color: #FFFFFF;
|
|
|
|
.u-tabs__wrapper__nav__item {
|
|
padding: 0 !important;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my_line:last-child {
|
|
border: none !important;
|
|
}
|
|
|
|
.needs_text {
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3E3E3E;
|
|
line-height: 42rpx;
|
|
-webkit-line-clamp: 2;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.time_line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 14rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
|
|
.release_time {
|
|
color: #969696;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.u-icon__icon {
|
|
top: 1px !important;
|
|
}
|
|
|
|
.btn_text {
|
|
|
|
color: #15CA65;
|
|
}
|
|
}
|
|
}
|
|
</style>
|