123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974 |
- <template>
- <view>
- <view v-if="showPanel" style="height:75px;display: block;">
- </view>
- <view class="v-sender" id="v-send">
- <view class="v-sender__control v-sender__control_t" v-if="qute && qute.id && !voice">
- <!-- #ifndef H5 -->
- <view class="emoji" style="width: 64rpx;">
- </view>
- <!-- #endif -->
- <!-- 引用 -->
- <view class=" textarea qute-wrap">
- <!-- 文本 -->
- <template v-if="qute.message.type == 'text'">
- <view class="content" v-if="qute.message.content.type && qute.message.content.type == 'remind'">
- {{qute.sender.nickname}}: <text v-html="showCall(qute.message.content.content)"></text>
- </view>
- <view class="content" v-else>
- {{qute.sender.nickname}}:{{qute.message && qute.message.content ? qute.message.content: ''}}
- </view>
- </template>
-
- <!-- -->
- <view class="content" v-if="qute.message.type == 'emotion'">
- {{qute.sender.nickname}}:{{qute.message && qute.message.content.content ? qute.message.content.content: ''}}
- </view>
- <view class="content" v-if="qute.message.type == 'image'">
- {{qute.sender.nickname}}:[图片]
- </view>
- <image src="../static/img/del.png" mode="" @click="clearQute"></image>
- </view>
- </view>
- <view class="v-sender__control">
- <!-- #ifndef H5 -->
- <view class="emoji" @tap="sendVoice">
- <text v-if="!voice && !noSpeaking" class="n-icon n-icon-voice"></text>
- <text v-else class="n-icon n-icon-keyboard"></text>
- </view>
- <!-- #endif -->
- <block v-if="noSpeaking">
- <view class="falseinput"
- style="text-align: center;color: #999;margin-left: 16upx;margin-right: 20upx;margin-left:10px;">
- {{speaking_tips}}
- </view>
- </block>
- <block v-else>
- <textarea v-if="!voice" ref="shuru" id="sendbox" maxlength="99999999999" auto-height="true"
- :class="{'textarea':true,'input':input_value && !voice}" v-model="input_value"
- type="text" @input="listen('input', $event.detail.value)" @confirm="set_focos()"
- @tap="sendertap();" confirm-type='发送' adjust-position="ture" confirm-hold="true"
- cursor-spacing="15" style="overflow-y: auto;" :focus='focusState'>
- </textarea>
- <view v-if="voice" :class="{'falseinput':true,'press':setting}"
- style="text-align: center;color: #222;margin-right: 20upx;" @touchstart="startVoice"
- @touchend="endVoice" @touchmove.stop.prevent="voiceIng" @touchcancel="voiceCancel">{{voiceTis}}
- </view>
- <!-- 图片/表情 -->
- <view class="emoji" @tap="showemoji();" v-if="!emoji"><text class="n-icon n-icon-face"></text>
- </view>
- <view class="emoji" @tap="hideemoji();" v-if="emoji"><text class="n-icon n-icon-keyboard"></text>
- </view>
- <view class="btn sendbtn" v-if="input_value && !voice" @touchend.prevent="tapsender">发送</view>
- <view class="bigbox3" v-if="!input_value && !voice">
- <view class="emoji" @tap="show_panel();" v-if="!showPanel&&!input_value"><text></text>
- </view>
- <view class="emoji" @tap="hide_panel();" v-else-if="showPanel&&!input_value">
- <text></text>
- </view>
- </view>
- </block>
- </view>
- <view class="record" :class="setting?'':'hidden'">
- <view class="ing" :class="willStop?'hidden':''">
- <view class="icon luyin2"></view>
- </view>
- <view class="cancel" :class="willStop?'':'hidden'">
- <view class="icon chehui"></view>
- </view>
- <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
- </view>
- <view v-if="emoji" class="face_box">
- <view style="width: 100%;">
- <view class="emotion-box" style="height:200px">
- <view class="emotion-box-line" v-for="(line, i) in lists" :key="i">
- <view class="emotion-item" v-for="(item, index) in line" :key="index"
- @click="handleEmotion(item)">
- <image :src="'/static/emoji/'+item.name+'.gif'" style="width: 50rpx;height: 50rpx;">
- </image>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view v-if="showPanel" class="v-sender__panel">
- <view @click="sendImg('album')">
- <view class="icons"><text class="n-icon n-icon-image"></text></view>
- <view>图片</view>
- </view>
- <view class="box" @click="sendImg('camera')">
- <view class="icons"><text class="n-icon n-icon-paizhao"></text></view>
- <view>拍照</view>
- </view>
- <view class="box" @click="sendVedio('album')">
- <view class="icons">
- <image src="../static/img/vedio.png"></image>
- </view>
- <view>视频</view>
- </view>
- <view class="box" @click="sendVedio('camera')">
- <view class="icons">
- <image src="../static/img/camera.png"></image>
- </view>
- <view>录像</view>
- </view>
- <!-- <view class="box" @click="sendRedpactet()">
- <view class="icons"><image src="../static/img/redpacket.png" style="width: 26px;" ></image></view>
- <view>红包</view>
- </view> -->
- </view>
- </view>
- </view>
- </template>
- <script>
- const recorderManager = uni.getRecorderManager();
- const {
- windowWidth,
- windowHeight
- } = uni.getSystemInfoSync();
- import helper from "../library/helper.js"
- import api from "../library/index.js"
- import action from "../library/action.js"
- export default {
- name: 'v-sender',
- props: {
- placeholder: {
- type: String,
- default: '说点什么吧'
- },
- value: {
- type: String,
- default: ''
- },
- noSpeaking: {
- type: Boolean,
- default: false
- },
- speaking_tips: {
- },
- forbidRedpack: {
- type: Boolean,
- default: false
- },
- showboard: {
- type: Boolean,
- default: false
- },
- groupid: {
- type: [Number, String],
- default: 0
- },
- isgroup: {
- default: 0
- },
- sendtype: {
- type: [Number, String],
- default: 'text'
- }
- },
- data() {
- return {
- focusState: false,
- qute: {},
- showPanel: false,
- showPacket: false,
- voice: false,
- text: 'uni-app',
- voicePath: '',
- setting: false,
- emoji: false,
- faceImg: {},
- swipers: [],
- voiceTis: '按住 说话',
- recordTis: "手指上滑 取消发送",
- recording: false,
- willStop: false,
- initPoint: {
- identifier: 0,
- Y: 0
- },
- recordTimer: null,
- recordLength: 0,
- mids: {},
- uploadnum: 0,
- starttime: 0,
- endtime: 0,
- voice_mid: '',
- focus: false,
- input_value: '',
- area_value: '',
- inputclass: 'textarea',
- sendtime: 0,
- keyboardheight: 0,
- borderheight: 0,
- user: uni.getStorageSync('userInfo'),
- list: [
- ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
- ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
- ['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
- ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
- ['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
- ['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
- ['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
- ['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', ],
- ['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
- ['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
- ['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
- ['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
- ['磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌'],
- ['耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑', '嘿哈'],
- ['鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物']
- ],
- reg: /\S{1,3}/gi,
- lists: [],
- listss: []
- }
- },
- mounted() {
- let that = this;
- // #ifdef APP-PLUS
- recorderManager.onStart((e) => {
- this.recordBegin(e);
- })
- recorderManager.onStop(res => {
- this.recordStop(res);
- });
- // #endif
- var value = '';
- this.list = this.list.map((line, index) => {
- this.listss = [];
- line = line.map((item, idx) => {
- value = item;
- item = item.replace(/\S{1,3}/gi, this.emotion(item));
- this.listss.push({
- "name": item,
- "index": index,
- "value": value,
- "idx": idx
- })
- return item;
- })
- this.lists.push(this.listss);
- return line;
- })
- },
- computed: {
- sendShowing() {
- return this.value.length > 0
- },
- },
- methods: {
- showCall(val) {
- val = val + ''
- let str = ''
- if(val) {
- str = val.replace(/<span.*?>|<\/span>/g, "")
- }
- return str
- },
- // 清理引用
- clearQute() {
- this.qute = {}
- },
- // 保存引用
- setQute(item) {
- let that = this
- that.qute = item
- console.log('that.qute',that.qute);
- let data = this.$refs.shuru
- that.focusState = false
-
- this.$nextTick(()=> {
- that.focusState = true
- })
- },
- emotion(res) {
- //let word = res.replace(/\#|\;/gi,'')
- const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶',
- '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗',
- '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼',
- '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头',
- '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱',
- '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火',
- '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌', '耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑',
- '嘿哈', '鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物'
- ]
- let index = list.indexOf(res)
- var index1 = index + 100;
- return index1
- },
- showemoji() {
- this.showPanel = false;
- this.emoji = true;
- // this.setChatHeight();
- },
- hideemoji() {
- this.showPanel = false;
- this.emoji = false;
- // this.setChatHeight();
- },
- show_panel() {
- this.showPanel = true;
- this.emoji = false;
- this.setChatHeight();
- },
- hide_panel() {
- this.showPanel = false;
- this.emoji = false;
- this.setChatHeight();
- },
- setChatHeight() {
- //
- // console.log(this.sendHeight);
- var that = this;
- setTimeout(() => {
- var that = this;
- var query = uni.createSelectorQuery(); // 这里要加上select
- query.in(that).select('#v-send').boundingClientRect(res => {
- var hh = (parseInt(res.height) - 60);
- this.$emit("senderheight", hh);
- }).exec();
- }, 100);
- },
- sendVedio(type) {
- let that = this
- uni.chooseVideo({
- sourceType: [type],
- maxDuration: 15,
- compressed: false,
- success(re) {
- // console.log(re.tempFilePath);
- //console.log(re.tempFilePaths[0]);
- that.sendertap();
- var mids = 'm' + Math.random().toString(36).substring(2);
- var duration = re.duration;
- that.$emit('sendVedio', {
- mid: mids,
- src: re.tempFilePath,
- time: duration
- });
- var _that = that;
- helper.uploadFiles([re.tempFilePath], 'Vedio', {
- type: 'vedio'
- }).then(res => {
- that.$emit('sendVedio', {
- mid: mids,
- src: res,
- time: duration
- });
- });
- }
- })
- },
- sendImg(type) {
- let that = this
- uni.chooseImage({
- sourceType: [type],
- sizeType: ['original', 'compressed'],
- success(re) {
- //console.log(re.tempFilePaths.length);
- //console.log(re.tempFilePaths[0]);
- that.sendertap();
- that.uploadnum = 0;
- for (var i = 0; i < re.tempFilePaths.length; i++) {
- that.mids[i] = 'm' + Math.random().toString(36).substring(2);
- // that.$emit('sendImage', {mid:that.mids[i],src: re.tempFilePaths[i]});
- var _that = that;
- // console.log(re.tempFilePaths[i]);
- helper.uploadFiles([re.tempFilePaths[i]], 'images', {
- type: 'images'
- }).then(res => {
- that.$emit('sendImage', {
- mid: _that.mids[that.uploadnum],
- src: res
- });
- });
- }
- }
- })
- },
- sendRedpactet() {
- if (this.user.banknum < 1) {
- uni.showModal({
- title: '提示',
- content: "绑定银行卡后才可以发送红包",
- showCancel: true,
- cancelText: '关闭',
- confirmText: '立即绑定',
- success: res => {
- if (res.confirm) {
- uni.navigateTo({
- url: "/pages/mine/bank"
- })
- }
- }
- });
- return false;
- } else {
- uni.navigateTo({
- url: '../friend/readpacket?isgroup=' + this.isgroup + '&id=' + this.groupid
- })
- }
- this.hide_panel();
- },
- listen(name, eventOrValue) {
- this.$emit(name, eventOrValue);
- this.focus = false;
- },
- set_focos() {
- if (this.focus == false) this.focus = true;
- },
- getfocus(detail) {
- this.boardheight = detail.height;
- // #ifdef APP-PLUS
- if (plus.os.name == 'Android') this.$emit("keyboardheight", detail.height);
- // #endif
- },
- unfocus() {
- this.boardheight = 0;
- // console.log('sender失去焦点')
- this.$emit("keyboardheight", 0);
- },
- unfocus1() {
- // console.log('box失去焦点')
- this.$emit("keyboardheight", 0);
- },
- sendertap() {
- this.showPanel = false;
- this.emoji = false;
- // z uni.hideKeyboard();
- },
- setinputvalue(e) {
- this.input_value = this.input_value + e + ' ';
- this.$emit('input', this.input_value);
- },
- istap() {
- },
- tapsender() {
- //this.inputclass='textarea sending'
- if (this.input_value != '') {
- var that = this;
- // setTimeout(function(){that.$emit('send',that.$event);},1000)
- that.$emit('send', that.$event);
- this.area_value = '';
- this.input_value = '';
- //that.$emit("senderheight",0);
- //this.keyboardheight=this.boardheight;
- // this.$emit("senderheight",300);
- if (this.sendtype != 'text') {
- this.hideemoji();
- this.hide_panel();
- }
- // #ifdef APP-PLUS
- //if(plus.os.name=="iOS") uni.hideKeyboard();
- // #endif
- }
- },
- listen1(e) {
- // console.log(e);
- this.input_value = e;
- this.listen('input', e);
- // console.log(e);
- },
- clickbox(e) {
- var x = e.touches[0].clientX;
- var y = e.touches[0].clientY;
- // console.log( windowWidth-x, windowHeight-y)
- if (windowWidth - x < 65) this.tapsender();
- },
- startVoice(e) {
- this.setting = true;
- this.willStop = false;
- this.voiceTis = '手指上滑 取消发送'
- recorderManager.start({
- format: 'mp3',
- numberOfChannels: 2,
- duration: 6000
- });
- this.starttime = new Date().getTime();
- this.initPoint.Y = e.touches[0].clientY;
- this.initPoint.identifier = e.touches[0].identifier;
- console.log('start');
- },
- //录音开始UI效果
- recordBegin(e) {
- /** 暂停语音播放 */
- console.log('录音开始UI效果');
- recorderManager.pause();
- this.setting = true;
- this.voiceTis = '松开 结束';
- this.recordLength = 0;
- this.recordTimer = setInterval(() => {
- this.recordLength++;
- }, 1000)
- },
- //录音停止 上传到服务器
- recordStop(res) {
- var that = this;
- this.endtime = new Date().getTime();
- that.voicePath = res.tempFilePath;
- if (!this.willStop) {
- if (this.endtime - this.starttime < 1000) return that.$toast('时间太短了');
- var duration = (this.endtime - this.starttime) / 1000;
- this.voice_mid = 'm' + Math.random().toString(36).substring(2);
- that.$emit('face', {
- url: that.voicePath,
- time: duration.toFixed(2),
- mid: this.voice_mid
- })
- helper.uploadFiles([that.voicePath], 'audio', {
- type: 'audio'
- }).then(res => {
- that.$emit('face', {
- url: res,
- time: duration.toFixed(2),
- mid: this.voice_mid
- })
- });
- action.playVoice('/static/voice/voice.mp3');
- } else {
- console.log('取消发送录音');
- }
- },
- // 录音被打断
- voiceCancel() {
- this.setting = false;
- this.willStop = true; //不发送录音
- recorderManager.stop(); //录音结束
- this.voiceTis = '按住 说话';
- this.recordTis = '手指上滑 取消发送'
- },
- // 录音中(判断是否触发上滑取消发送)
- voiceIng(e) {
- if (!this.setting) {
- return;
- }
- let touche = e.touches[0];
- //上滑一个导航栏的高度触发上滑取消发送
- if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
- this.willStop = true;
- this.recordTis = '松开手指 取消发送'
- } else {
- this.willStop = false;
- this.recordTis = '手指上滑 取消发送'
- }
- },
- endVoice() {
- this.setting = false
- recorderManager.stop();
- this.voiceTis = '按住 说话';
- this.recordTis = '手指上滑 取消发送';
- },
- sendVoice() {
- this.voice = !this.voice;
- },
- getEmoji() {
- },
- sendEmoji(e) {
- //this.showPanel = false;
- this.emoji = false
- this.$emit('emoji', e)
- },
- handleEmotion(item) {
- var v = item.value;
- this.input_value += '[' + v + ']';
- this.area_value = this.input_value
- this.listen1(this.input_value);
- this.$emit('handleEmotion', this.input_value);
- },
- },
- created() {
- this.getEmoji()
- },
- onLoad() {
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "@/static/css/chat/style.scss";
- $control-height: 120upx;
- $input-height: $control-height - $uni-spacing-col-base * 2;
- .face_box {
- position: fixed;
- bottom: 60px;
- ;
- left: 1px;
- width: calc(100% - 4px);
- z-index: 99;
- background-color: #fff;
- border: 1px #ddd solid;
- padding-top: 5px;
- ;
- border-top-right-radius: 5px;
- border-top-left-radius: 5px;
- }
- .faceImg {
- width: 100upx;
- flex-basis: 100upx;
- }
- .n-icon {
- font-size: 33px;
- line-height: 33px;
- color: #333;
- vertical-align: middle;
- }
- .icons {
- height: 70upx;
- line-height: 70upx;
- vertical-align: middle;
- }
- .icons image {
- width: 65upx;
- height: 55upx;
- vertical-align: middle;
- }
- .bigbox {
- position: fixed;
- bottom: 0px;
- left: 110upx;
- width: calc(100vw - 100upx);
- height: 120upx;
- line-height: 120upx;
- padding: 0px;
- z-index: 0;
- border: 0px #eee solid;
- color: transparent !important;
- }
- .bigbox2 {
- position: absolute;
- top: 10px;
- right: 80upx;
- width: 84upx;
- height: 120upx;
- line-height: 120upx;
- padding: 0px;
- z-index: 10;
- border: 0px #eee solid;
- }
- .bigbox3 {
- position: absolute;
- top: 10px;
- right: 0upx;
- width: 80upx;
- height: 120upx;
- line-height: 120upx;
- padding: 0px;
- z-index: 0;
- text-align: right;
- justify-content: right;
- border: 0px #eee solid;
- }
- .sending {
- color: transparent !important;
- }
- .v-sender {
- z-index: 99999999;
- position: fixed;
- bottom: 0;
- left: 0;
- width: 99vw;
- padding-left: 1vw;
- background-color: #fafafa;
- border-top: 1px solid #ddd;
-
- &__panel,
-
- &__control {
- position: relative;
- width: 100%;
-
- &::before {
- display: block;
- content: '\20';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- // background-color: #ddd;
- height: 1upx;
- transform: scaleY(0.5);
- }
- }
- &__panel {
- width: 100%;
- display: table;
- padding: 20upx 0;
- font-size: 28upx;
- background: #fafafa;
- >view {
- .n-icon {
- font-size: 33px;
- color: #999;
- }
- text-align: center;
- display: table-cell;
- }
- }
- &__control {
- height: $control-height;
- padding: $uni-spacing-col-base 0px $uni-spacing-col-base 0;
- &,
- .emoji,
- .btn {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- box-sizing: border-box;
- }
- >.emoji,
- >.btn,
- >input {
- margin-left: $uni-spacing-row-base;
- }
- view {
- height: $input-height;
- flex-shrink: 0;
- }
- .emoji {
- font-size: 64upx;
- line-height: $input-height;
- }
- input,
- .falseinput {
- flex: 1;
- height: $input-height;
- border-radius: $uni-border-radius-base;
- box-sizing: border-box;
- background-color: #ccc;
- height: 68upx;
- line-height: 68upx;
- margin-left: 10px;
- ;
- }
- .falseinput.press {
- background-color: #666;
- color: #fff !important;
- }
- .btn {
- line-height: $input-height - 10upx;
- height: $input-height - 10upx;
- color: #fff;
- text-align: center;
- background-color: $uni-color-primary;
- }
- }
- &__control_t {
- height: 80upx;
- padding: 0;
- .qute-wrap {
- border: none;
- background-color: #eaeaea;
- height: 40upx;
- font-size: 26upx;
- color: #6d6d6d;
- display: flex;
- justify-content: space-between;
- flex-wrap: nowrap;
- .content {
- flex-grow: 1;
- text-overflow:ellipsis;
- white-space:nowrap;
- overflow:hidden;
- max-width: 90%;
- }
- image {
- flex-shrink: 0;
- width: 28upx;
- height: 28upx;
- }
- }
- }
- }
- .textarea,
- .textareas {
- font-size: 32upx;
- background: #fff;
- border: 1px solid #ddd;
- max-height: 80upx;
- min-height: 40upx;
- line-height: 40upx;
- padding: 12upx 10upx;
- border-radius: 3px;
- ;
- }
- .textarea {
- margin-left: 10px;
- /* #ifndef H5 */
- width: calc(100% - 290upx);
- /* #endif */
- /* #ifdef H5 */
- width: calc(100% - 210upx);
- /* #endif */
- }
- .textarea.input {
- /* #ifndef H5 */
- width: calc(100% - 360upx);
- /* #endif */
- /* #ifdef H5 */
- width: calc(100% - 280upx);
- /* #endif */
- }
- .sendbtn {
- margin-left: 16upx !important;
- padding: 0px 40upx !important;
- }
- .emotion-box {
- margin: 0 auto;
- width: calc(100% - 4px);
- box-sizing: border-box;
- padding: 2px;
- overflow: hidden;
- overflow-y: auto;
- }
- .emotion-box-line {
- display: flex;
- }
- .emotion-item {
- flex: 1;
- text-align: center;
- cursor: pointer;
- }
- </style>
|