117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view id="release">
|
||
|
|
<u-form :model="form" ref="uForm">
|
||
|
|
<u-form-item label="标题" label-position="right">
|
||
|
|
<u-input v-model="form.name" placeholder="请输入标题" />
|
||
|
|
</u-form-item>
|
||
|
|
<view class="titles">图片</view>
|
||
|
|
<u-upload :action="action" del-color="#ececec" upload-text="选择图片" del-bg-color="#fff" :file-list="fileList" ></u-upload>
|
||
|
|
<!-- 标签 -->
|
||
|
|
<view>
|
||
|
|
<view class="titles">标签</view>
|
||
|
|
<view class="form-view" @click="show_add()">+ 新建标签</view>
|
||
|
|
<view class="form-view" v-for="(item,index) in fileListes" :key="index">{{item}}</view>
|
||
|
|
</view>
|
||
|
|
<!-- 简介 -->
|
||
|
|
<view class="titles">正文</view>
|
||
|
|
<textarea placeholder="请输入内容..."></textarea>
|
||
|
|
<!-- 提交 -->
|
||
|
|
<u-button class="custom-style" shape="circle" size="default">发表</u-button>
|
||
|
|
</u-form>
|
||
|
|
<!-- 添加标签的按钮 -->
|
||
|
|
<u-popup v-model="show" mode="center" border-radius="14" :closeable="true">
|
||
|
|
<view class="text">
|
||
|
|
创建属于你的标签吧
|
||
|
|
</view>
|
||
|
|
<view class="u-inputes">
|
||
|
|
<u-input v-model="form.name" />
|
||
|
|
</view>
|
||
|
|
<u-button class="custom-style-button" shape="circle" size="default">确定</u-button>
|
||
|
|
</u-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
name: '',
|
||
|
|
intro: '',
|
||
|
|
sex: ''
|
||
|
|
},
|
||
|
|
// 演示地址，请勿直接使用
|
||
|
|
action: 'http://www.example.com/upload',
|
||
|
|
fileList: [],
|
||
|
|
fileListes:["美妆","博主穿搭","美妆","美妆","美妆","美妆","美妆","博主穿搭"],
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
show_add(){
|
||
|
|
console.log(this.show)
|
||
|
|
this.show = !this.show
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
uniBadge
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
#release{
|
||
|
|
width: 690rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
.form-view{
|
||
|
|
background:rgba(255,120,15,1);
|
||
|
|
border-radius:6rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
padding: 8rpx 20rpx;
|
||
|
|
display: inline-block;
|
||
|
|
margin-bottom: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.titles{
|
||
|
|
font-size:30rpx;
|
||
|
|
font-weight:400;
|
||
|
|
color:rgba(51,51,51,1);
|
||
|
|
margin: 30rpx 0;
|
||
|
|
}
|
||
|
|
textarea{
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
.custom-style{
|
||
|
|
background:rgba(255,120,15,1)!important;
|
||
|
|
color: #fff!important;
|
||
|
|
font-size: 36rpx;
|
||
|
|
}
|
||
|
|
.custom-style-button{
|
||
|
|
background:rgba(255,120,15,1)!important;
|
||
|
|
color: #fff!important;
|
||
|
|
font-size: 28rpx;
|
||
|
|
width: 200rpx;
|
||
|
|
margin-bottom: 23rpx;
|
||
|
|
line-height: 60rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.u-mode-center-box{
|
||
|
|
padding: 120rpx;
|
||
|
|
.text{
|
||
|
|
font-size: 30rpx;
|
||
|
|
margin-top: 74rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.u-inputes{
|
||
|
|
margin: 30rpx 0;
|
||
|
|
border: 1px #ececec solid;
|
||
|
|
padding-left: 14rpx;
|
||
|
|
width: 420rpx;
|
||
|
|
}
|
||
|
|
</style>
|