TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

scss

Browse Source
This commit is contained in:
Jason.Chen
2022-02-08 09:42:48 +08:00
parent ab958d0777
commit 85f9a091c9
8 changed files with 260 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
pages/im/components/sentPopups.nvue
View File

@@ -1,28 +1,28 @@
<template>
<view class="sent--popups u-border-top" v-if="show">
<view class="sent--popups--item" @click="onPopupsItem('picture')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="sent--popups--text">相册</text>
<view class="item" @click="onPopupsItem('picture')">
<image class="icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="text">相册</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('camera')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="sent--popups--text">拍摄</text>
<view class="item" @click="onPopupsItem('camera')">
<image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="text">拍摄</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('video')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="sent--popups--text">视频通话</text>
<view class="item" @click="onPopupsItem('video')">
<image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="text">视频通话</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('location')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="sent--popups--text">位置</text>
<view class="item" @click="onPopupsItem('location')">
<image class="icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="text">位置</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('redpacket')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="sent--popups--text">红包</text>
<view class="item" @click="onPopupsItem('redpacket')">
<image class="icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="text">红包</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('file')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="sent--popups--text">文件</text>
<view class="item" @click="onPopupsItem('file')">
<image class="icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="text">文件</text>
</view>
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
@@ -143,19 +143,19 @@
flex-wrap: wrap;
flex-direction: row;
&--item {
.item {
width: 150rpx;
margin: 15rpx;
}
&--text {
.text {
text-align: center;
font-size: 26rpx;
color: #555;
padding-top: 15rpx;
}
&--icon {
.icon {
width: 110rpx;
height: 110rpx;
margin: 0 20rpx;

57
pages/im/components/sentText.nvue
View File

@@ -1,5 +1,5 @@
<template>
<view class="text">
<view class="sent--text">
<input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
</view>
@@ -56,35 +56,34 @@
}
</script>
<style scoped>
.text {
<style scoped lang="less">
.sent--text {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.input {
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
.button {
border: none;
background: #34CE98;
color: white;
width: 120rpx;
line-height: 70rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
.button[disabled] {
background-color: #555555;
justify-content: space-between;
.input {
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
.button {
border: none;
background: #34CE98;
color: white;
width: 120rpx;
line-height: 70rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
// .button[disabled] {
// background-color: #555555;
// }
}
</style>

95
pages/im/components/sentVoice.nvue
View File

@@ -1,12 +1,12 @@
<template>
<view>
<view class="send--voice">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
<text class="button">按住说话</text>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showRecordTip">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{recordTime}} s</text>
<view class="modal" v-if="showRecordTip">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
</view>
</template>
@@ -29,14 +29,14 @@
data() {
return {
showRecordTip: false,
recordTime: 60,
interval: 0,
maxRecordTime: 60,
recordTime: 60,
interval: 0,
maxRecordTime: 60,
recorderManager: null
}
},
created() {
this.recorderManager = uni.getRecorderManager()
},
created() {
this.recorderManager = uni.getRecorderManager()
},
methods: {
// 检查安卓录制权限
@@ -79,7 +79,8 @@
clearInterval(this.interval)
// 监听录音结束
this.recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime - this
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
this
.recordTime), () => {
setTimeout(() => {
this.$emit('success')
@@ -93,44 +94,46 @@
}
</script>
<style scoped>
.voice {
background: #F3F6FB;
height: 70rpx;
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
}
<style scoped lang="scss">
.send--voice {
.voice {
background: $window-color;
height: 70rpx;
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
.button {
font-size: 30rpx;
color: #333;
}
.button {
font-size: 30rpx;
color: #333;
}
}
.audio-transcribe {
background: rgba(0, 0, 0, .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
top: 550rpx;
left: 225rpx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal {
background: rgba(0, 0, 0, .6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
top: 550rpx;
left: 225rpx;
flex-direction: column;
align-items: center;
justify-content: center;
.audio-transcribe-src {
width: 88rpx;
height: 88rpx;
}
.icon {
width: 88rpx;
height: 88rpx;
}
.audio-transcribe-text {
font-size: 28rpx;
color: #FFFFFF;
.text {
font-size: 28rpx;
color: #FFFFFF;
}
}
}
</style>

4
pages/im/components/showImage.nvue
View File

@@ -1,5 +1,5 @@
<template>
<view class="im--image" :class="guest ? 'right': 'left'">
<view class="msg--image" :class="guest ? 'right': 'left'">
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
</view>
</template>
@@ -39,7 +39,7 @@
</script>
<style scoped lang="scss">
.im--image {
.msg--image {
padding: 20rpx;
&.left {

2
pages/im/components/showText.nvue
View File

@@ -1,5 +1,5 @@
<template>
<view class="im--box">
<view class="msg--text">
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view>
</template>

12
pages/im/components/showVoice.nvue
View File

@@ -1,10 +1,8 @@
<template>
<view>
<view class="im--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="duration">{{msg.duration}}"</text>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
<view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="duration">{{msg.duration}}"</text>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
</template>
@@ -58,7 +56,7 @@
</script>
<style scoped lang="scss">
.im--voice {
.msg--voice {
flex-direction: row;
justify-content: space-between;
align-items: center;