You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
<template>
|
|
<view class="page1">
|
|
<view class="top" ref="top">
|
|
<view @tap="backPage" style="width: 40px;height: 40px;position: absolute;top: 100rpx;left: 30rpx;">
|
|
<uni-icons type="left" color="#000" size="27"></uni-icons>
|
|
</view>
|
|
<view class="title">对话</view>
|
|
</view>
|
|
<view class="content" :style="{height:height - 165 +'px'}">
|
|
|
|
</view>
|
|
<view class="bottom">
|
|
<view style="width:10%;height:90rpx;line-height:90rpx;margin-top:20rpx;text-align: center;">
|
|
<uni-icons v-if="isVoice" @tap="switchChat(false)" type="chat" size="26"></uni-icons>
|
|
<uni-icons v-if="!isVoice" @tap="switchChat(true)" type="mic" size="26"></uni-icons>
|
|
</view>
|
|
<view style="width: 76%;height: 90rpx;line-height: 90rpx;text-align: center;background: #eee;margin-top: 10px;border-radius: 10px;font-size: 30rpx;color: #777;">
|
|
<view v-if="isVoice">
|
|
<text>按住 说话</text>
|
|
</view>
|
|
<view v-if="!isVoice" style="width: 100%;height: 90rpx;line-height: 90rpx;border-radius: 10px;text-align: left;padding-left: 20rpx;">
|
|
<input type="text" placeholder="请输入对话内容" style="height: 90rpx;">
|
|
</view>
|
|
</view>
|
|
<view v-if="!isVoice" style="width:12%;background: linear-gradient(90deg, #60F3FF, #088FEB);height:70rpx;line-height:70rpx;text-align:center;margin:15px 0 0 1%;color:#fff;border-radius:5px;">确定</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isVoice:true,
|
|
height:0
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onLoad() {
|
|
this.height = wx.getSystemInfoSync().windowHeight
|
|
},
|
|
methods: {
|
|
switchChat(type){
|
|
this.isVoice = type
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.page1 {
|
|
height:100%;
|
|
background: #F1F5FB;
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
.title{
|
|
color: #000;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin-top: 94rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.content{
|
|
overflow:scroll;
|
|
}
|
|
.bottom{
|
|
width: 100%;
|
|
height: 150rpx;
|
|
display: flex;
|
|
background: #fff;
|
|
}
|
|
</style>
|