|
|
@@ -0,0 +1,157 @@
|
|
|
+<template>
|
|
|
+ <view class="publish-circle-box flex-common-css">
|
|
|
+ <Nav :titleColor="'#000'" :title="''" :rightShow="true" :rightType="2">
|
|
|
+ <template slot="right">
|
|
|
+ <view @click="publishBut" class="nav-right sys-background-black sys-radius-8">
|
|
|
+ <view class="publish sys-color-white sys-weight-500 sys-size-28">
|
|
|
+ 发布
|
|
|
+ </view>
|
|
|
+ <uni-icons class="publish-icons" type="paperplane-filled" size="20" color="#fff"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </Nav>
|
|
|
+ <scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
|
|
|
+ <textarea @input="bindTextAreaBlur" auto-height placeholder="这一刻的想法..." />
|
|
|
+ <view class="publish-img-box">
|
|
|
+ <view class="publish-img" v-for="item in 5">
|
|
|
+ <image class="img sys-radius-16" src="../../static/img/login/2.jpg" mode=""></image>
|
|
|
+ <view class="delete sys-radius-round sys-background-transparent" @click="deleteImg">
|
|
|
+ <uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view @click="addImg" class="add-img sys-radius-16 sys-background-F1">
|
|
|
+ <image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tag-box">
|
|
|
+ <view class="tag sys-radius-200" v-for="(item,index) in 3">
|
|
|
+ <uni-icons type="location-filled" size="12" color="#2F80ED"></uni-icons>
|
|
|
+ <view class="tag-name sys-color-2F80ED sys-size-24">
|
|
|
+ 重庆渝北区
|
|
|
+ </view>
|
|
|
+ <uni-icons @click="deleteTag" type="closeempty" size="14" color="#2F80ED"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ publishContent: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ scroll() {},
|
|
|
+ scrolltolower() {},
|
|
|
+ bindTextAreaBlur(e) {
|
|
|
+ this.publishContent = e.detail.value
|
|
|
+ console.log(e.detail.value)
|
|
|
+ },
|
|
|
+ publishBut(){
|
|
|
+ //发布
|
|
|
+ },
|
|
|
+ deleteImg(){
|
|
|
+ // 删除图片
|
|
|
+ },
|
|
|
+ addImg(){
|
|
|
+ //添加图片
|
|
|
+ },
|
|
|
+ deleteTag(){
|
|
|
+ //删除标签
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .publish-circle-box {
|
|
|
+ .nav-right {
|
|
|
+ padding: 8rpx 18rpx 8rpx 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .publish-icons {
|
|
|
+ margin: 0 0 0 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-scroll {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .publish-img-box {
|
|
|
+ padding: 160rpx 0 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .publish-img {
|
|
|
+ width: 220rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ margin: 0 12rpx 12rpx 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ position: absolute;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 10rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border: 1rpx solid rgba(255, 255, 255, 0.7);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-img {
|
|
|
+ width: 220rpx;
|
|
|
+ height: 220rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .circle-add-img {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx 16rpx 10rpx;
|
|
|
+ background: rgba(47, 128, 237, 0.1);
|
|
|
+ margin: 0 12rpx 12rpx 0;
|
|
|
+ .tag-name{
|
|
|
+ margin: 0 28rpx 0 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
