丰都
This commit is contained in:
yanran200730
@@ -1,15 +1,59 @@
|
||||
<template>
|
||||
<div class="Add">
|
||||
<AiLogin ref="login"/>
|
||||
<div class="add-content">
|
||||
<div class="top">
|
||||
<!-- <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-edit.png" /> -->
|
||||
<textarea placeholder="发布内容" :maxlength="500"></textarea>
|
||||
<div class="bottom">
|
||||
<div></div>
|
||||
<div>
|
||||
<i>6</i>
|
||||
<span>/500</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<h2>最多上传9张</h2>
|
||||
<div class="img">
|
||||
<AiUploader v-model="form.images" :limit="9" multiple/>
|
||||
</div>
|
||||
<div class="topic">
|
||||
<h3 @click="isShow = true">#绑定话题</h3>
|
||||
<div class="choosed">
|
||||
<span>#闲置物品交易</span>
|
||||
</div>
|
||||
<p>绑定一个与您发布内容相关很高的话题，会被更多人看到哦。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<h2>仅本社区可见</h2>
|
||||
<switch color="#2D7DFF" checked></switch>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" hover-class="text-hover" @click="submit">发布服务</div>
|
||||
</div>
|
||||
<u-popup v-model="isShow" mode="bottom" hidden height="700rpx" border-radius="30">
|
||||
<div class="popup">
|
||||
<h2>请选择</h2>
|
||||
<scroll-view class="popup-list" scroll-y>
|
||||
<div v-for="(item, index) in 20" :key="index">#闲置物品交易</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Add',
|
||||
appName: '发帖',
|
||||
appName: '发新贴',
|
||||
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
images: []
|
||||
},
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -22,12 +66,131 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Topic {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 40px;
|
||||
.Add {
|
||||
padding: 24px 0 130px;
|
||||
|
||||
& > div {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.popup {
|
||||
height: 700px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
|
||||
h2 {
|
||||
height: 98px;
|
||||
line-height: 98px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
height: calc(100% - 98px);
|
||||
|
||||
div {
|
||||
padding: 20px 48px;
|
||||
color: #333333;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.add-content {
|
||||
margin-bottom: 24px;
|
||||
|
||||
& > .top {
|
||||
padding: 32px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 14px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .bottom {
|
||||
padding: 32px 32px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.topic {
|
||||
h3 {
|
||||
width: 134px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #999;
|
||||
border-radius: 26px;
|
||||
color: #666;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.choosed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
padding: 0 16px;
|
||||
width: fit-content;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #2D7DFF;
|
||||
border-radius: 26px;
|
||||
font-size: 22px;
|
||||
color: #2D7DFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 98px;
|
||||
padding: 0 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="AppCircle-list">
|
||||
<div class="item" v-for="(item, index) in 10" :key="index" @click="$linkTo('./Detail')">
|
||||
<div class="item" v-for="(item, index) in 10" :key="index" @click="$linkTo('./Detail')" hover-class="bg-hover">
|
||||
<div class="item-top">
|
||||
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
|
||||
<div class="right">
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add" hover-class="text-hover">
|
||||
<div class="add" hover-class="text-hover" @click="$linkTo('./Add')">
|
||||
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fatie.png" />
|
||||
</div>
|
||||
<AiLogin ref="login"/>
|
||||
@@ -149,7 +149,7 @@
|
||||
|
||||
.AppCircle-list {
|
||||
.item {
|
||||
margin: 0 24px 24px;
|
||||
margin: 0 32px 24px;
|
||||
padding: 24px 24px 0;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
|
||||
@@ -35,18 +35,24 @@
|
||||
</div>
|
||||
<div class="comment">
|
||||
<h2>评论</h2>
|
||||
<div class="comment-item" v-for="(item, index) in 10" :key="index">
|
||||
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
|
||||
<div class="right">
|
||||
<h3>清风</h3>
|
||||
<p>联系方式呢</p>
|
||||
<div class="bottom">
|
||||
<span>2020-12-11 10:10</span>
|
||||
<div>回复</div>
|
||||
<div class="comment-wrapper">
|
||||
<div class="comment-item" v-for="(item, index) in 10" :key="index">
|
||||
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
|
||||
<div class="right">
|
||||
<h3>清风</h3>
|
||||
<p>联系方式呢</p>
|
||||
<div class="bottom">
|
||||
<span>2020-12-11 10:10</span>
|
||||
<div>回复</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<input placeholder="请输入">
|
||||
<div>发送</div>
|
||||
</div>
|
||||
<AiLogin ref="login"/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -71,63 +77,109 @@
|
||||
<style scoped lang="scss">
|
||||
.Detail {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 100px;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
padding: 14px 32px;
|
||||
background: #fff;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
padding: 0 24px;
|
||||
border-radius: 30px;
|
||||
font-size: 26px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
background: #eeeeeeff;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
border-radius: 30px;
|
||||
background: #2d7dffff;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: 24px;
|
||||
padding: 32px 32px 0;
|
||||
background: #fff;
|
||||
|
||||
.comment-item {
|
||||
display: flex;
|
||||
padding: 26px 0;
|
||||
.comment-wrapper {
|
||||
.comment-item {
|
||||
display: flex;
|
||||
padding: 26px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
& > image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
h3 {
|
||||
line-height: 40px;
|
||||
margin-bottom: 8px;
|
||||
color: #666666;
|
||||
font-size: 28px;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 42px;
|
||||
margin-bottom: 24px;
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
& > image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
h3 {
|
||||
line-height: 40px;
|
||||
margin-bottom: 8px;
|
||||
color: #666666;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
div {
|
||||
color: #687DA6;
|
||||
font-size: 24px;
|
||||
p {
|
||||
line-height: 42px;
|
||||
margin-bottom: 24px;
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
div {
|
||||
color: #687DA6;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
.right {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user