14 changed files with 345 additions and 15 deletions
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<view class="boxhdzq"> |
|||
<view class="xzzq"> |
|||
<view class="left"> |
|||
<image style="width: 28rpx;height: 28rpx;" src="@/static/img/xzzq.png" mode=""></image> |
|||
<text class="txt">选择专区</text> |
|||
</view> |
|||
<view class="right"> |
|||
<input style="text-align: end;" v-model="xzvalue" type="text" placeholder="请选择您要提问的专区" placeholder-class="placlass" disabled @tap="showxz = true" /> |
|||
<u-action-sheet :actions="list" @select="selectClick" @close="showxz = false" :show="showxz" closeOnClickOverlay="true"></u-action-sheet> |
|||
<image style="width: 16rpx;height: 28rpx;margin-left: 8rpx;" src="@/static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<u-textarea v-model="nrvalue" placeholder="请输入您的内容...." count autoHeight maxlength="200" height="266" border="none"></u-textarea> |
|||
<view class="buts"> |
|||
<view class="button" @click="submit" :style="nrvalue===''?'background: linear-gradient(90deg, rgba(0, 127, 255, 0.3) 0%, rgba(153, 204, 255, 0.3) 100%)':''"> |
|||
发布 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
const list = ref([ |
|||
{ name: '小店帮' }, |
|||
{ name: '金融帮' }, |
|||
{ name: '媒体帮' }, |
|||
{ name: '企业帮' } |
|||
]); |
|||
|
|||
const showxz = ref(false) |
|||
const xzvalue = ref('') |
|||
const nrvalue = ref('') |
|||
|
|||
const selectClick = (index) => { |
|||
console.log(index); |
|||
xzvalue.value = index.name |
|||
showxz.value = false |
|||
}; |
|||
|
|||
const submit = () => { |
|||
if(nrvalue.value !== '') { |
|||
console.log(nrvalue.value); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.boxhdzq { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #F1F3F9; |
|||
|
|||
.xzzq { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 28rpx 40rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 4rpx solid #F1F3F9; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.buts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
.button { |
|||
margin-top: 108rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
width: 576rpx; |
|||
height: 96rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.placlass { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #D3D3D3; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 813 B |
|
After Width: | Height: | Size: 435 B |
Loading…
Reference in new issue