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