Acher
/
newEdition
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

修改聊天样式

message
corala 2 years ago
parent
eab25140e1
commit
14cc84661c
2 changed files with 152 additions and 71 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +151
    -70
      pages/center/Piabodata/Customerportrait/Receivedetailabout.vue
  2. +1
    -1
      pages/index/index.vue

+ 151
- 70
pages/center/Piabodata/Customerportrait/Receivedetailabout.vue View File

@@ -18,6 +18,16 @@
</view> -->
<!-- 标记顾问 -->
<view class="headboxbott">
<view class="headovfu">
<view class="mytab" v-for="(item,index) in tablist" :key="index" @click="tapspagek2(index)">
<view class="tab-item" :class="roleindex==index?'tabActive':''">{{item.name}}</view>
</view>
</view>
<view v-if="permissions.commonly1" class="headpade">
<view class="biaoji" @tap="tagtap">标记</view>
</view>
</view>
<!-- <view class="headboxbott">
<view class="headovfu">
<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="roleindex"
@change="tapspagek2()" inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist"
@@ -27,7 +37,7 @@
<view class="headpade" v-if="permissions.commonly1">
<view class="biaoji" @tap="tagtap()">标记</view>
</view>
</view>
</view> -->
</view>


@@ -41,10 +51,10 @@
:class="{active: Math.floor(item.bg/1000) <= playNow && Math.floor(item.ed/1000) > playNow, isGreen: item.isShow == 0 }"
v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker">
<view class="avatar">
<view :style="[SPEAKERSTYLE(item.speaker)]">
<image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix">
<view>
<image v-if="item.isShow == 0" src="https://static.quhouse.com/b11a7e1ccf914020b3ee23d3e4862637.png" mode="widthFix">
</image>
<text v-else>{{ item.speaker | toCapital }}</text>
<text v-else :style="[borderColor(item.speaker)]">{{ item.speaker | toCapital }}</text>
</view>
</view>
<view class="contentInfo">
@@ -78,8 +88,10 @@
</view>
</view>
</view>
<image @click="clickbofang(dialog.backindex,item)" class="play"
src="@/static/images/recordingManagement/play.png"></image>
<image v-if="Math.floor(item.bg/1000) <= playNow && Math.floor(item.ed/1000) > playNow" class="play"
src="https://static.quhouse.com/15189e150bcd437783aac5a9ef977aa6.png"></image>
<image v-else @click="clickbofang(dialog.backindex,item)" class="play"
src="https://static.quhouse.com/1b6ac53247e043a1bdc59ecfb2167eba.png"></image>
</view>
</view>
</view>
@@ -94,17 +106,23 @@
<!-- 底部弹框 -->
<view class="botbotmm">
<view class="tmmchen" @click="guanjiancishifo()">
<image src="../../../../static/images/audioinfo1.png" mode=""></image>
<image src='https://static.quhouse.com/226d5e0b97e6407a9901273c3f582ee7.png' mode=""></image>

<!-- <image src="../../../../static/images/audioinfo1.png" mode=""></image> -->
<view>关键词</view>
</view>
<view class="fill"></view>
<view class="tmmchen" @click="Receivedetailsabouttab('intention')">
<image src="../../../../static/images/audioinfo3.png" mode=""></image>
<image src='https://static.quhouse.com/19f555ae422b4285b5102875579e61d6.png' mode=""></image>

<!-- <image src="../../../../static/images/audioinfo3.png" mode=""></image> -->
<view>客户意向</view>
</view>
<view class="fill"></view>
<view class="tmmchen" @click="Receivedetailsabouttab('Pinspeak')">
<image src="../../../../static/images/audioinfo4.png" mode=""></image>
<image src='https://static.quhouse.com/ce369b09d7be4305990dacdeb84a91f6.png' mode=""></image>

<!-- <image src="../../../../static/images/audioinfo4.png" mode=""></image> -->
<view>销讲执行</view>
</view>
<view class="fill"></view>
@@ -546,6 +564,56 @@
this.$zaudio.off('playing', this.ACTION);
},
methods: {
borderColor(index) {
let obj = {
color: '',
borderRadius: '',
border: ''
}
switch (index) {
case 1:
obj.color = '#E6625B';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #E6625B';
break;
case 2:
obj.color = '#FF981E';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #FF981E';
break;
case 3:
obj.color = '#F6BD16';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #F6BD16';
break;
case 5:
obj.color = '#4980C8';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #4980C8';
break;
case 6:
obj.color = '#60CBEC';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #60CBEC';
break;
case 7:
obj.color = '##FF981E';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #FF981E';
break;
case 8:
obj.color = '#4F861E';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #4F861E';
break;
default:
obj.color = '#9F61C8';
obj.borderRadius = '8rpx';
obj.border= '2rpx solid #9F61C8';
break;
}
return obj
},
// 跳转详情
argece(item) {
if (item.selected == 0) {
@@ -1480,7 +1548,6 @@
.headbox {
width: 100%;
min-height: 173rpx;
border-bottom: 1px solid #E0E0E0;
}

.zhuti {
@@ -1550,7 +1617,6 @@
.headboxhead {
width: 100%;
height: 84rpx;
border-bottom: 1px solid #E0E0E0;
display: flex;

.boxhead1 {
@@ -1580,30 +1646,55 @@
height: 88rpx;
display: flex;
align-items: center;
border-top: 1rpx solid #E0E0E0;
border-bottom: 1rpx solid #E0E0E0;

.headovfu {
flex: 1;
height: 88rpx;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: nowrap;
.mytab{
margin-left: 20rpx;
.tab-item{
padding: 0 15rpx;
height: 52rpx;
line-height: 52rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 1rpx solid #E0E0E0;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.tabActive{
background: #2671E2;
color: #fff;
}
}

}

.headpade {
width: 160rpx;
height: 60rpx;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
border-left: 1px solid #D6D6D6;

box-shadow: -4rpx 0px 8rpx -4rpx rgba(0, 0, 0, 0.2);
.biaoji {
width: 100rpx;
height: 48rpx;
background: #E6625B;
border-radius: 24rpx;
text-align: center;
line-height: 48rpx;
line-height: 52rpx;
color: #FFFFFF;
font-size: 26rpx;
width: 100rpx;
height: 52rpx;
background: #E6625B;
border-radius: 26rpx;
}
}
}
@@ -1926,7 +2017,6 @@
margin: 50rpx 30rpx;
line-height: 80rpx;
display: flex;
align-items: center;
}

.scroll-Y .text[data-speaker="2"],
@@ -1938,9 +2028,9 @@

.contentInfo {
.info {
color: #ccc;
color: #666;
font-size: 18rpx;
font-size: 30rpx;
font-size: 22rpx;
padding: 0 28rpx;
display: flex;
flex-direction: row-reverse;
@@ -1962,31 +2052,32 @@
}

.play {
width: 50rpx;
height: 50rpx;
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
}
}

.scroll-Y .text .avatar {
margin-top: 80rpx;
width: 64rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
// border: 1rpx solid red;
font-size: 36rpx;
border-radius: 50%;
background: #F2F2F2;
color: #008EF2;

// display: flex;
// justify-content: center;
// align-items: center;
image {
width: 40rpx;
.scroll-Y .text .avatar {
margin-top: 38rpx;
text{
display: block;
width: 72rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
background: #FFFFFF;
border-radius: 8rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
box-sizing: border-box;
}
image{
width: 72rpx;
height: 72rpx;
}
}

@@ -1994,7 +2085,7 @@
margin-left: 30rpx;
line-height: 60rpx;
text-align: left;
padding: 0 5px;
padding: 0 20rpx;
border-radius: 8rpx;
max-width: 442rpx;
position: relative;
@@ -2018,14 +2109,14 @@
}

.scroll-Y .text.active .content {
color: #FF7538 !important;
color: #2671E2 !important;
position: relative;
}

.scroll-Y .text.active[data-speaker="2"] .content,
.scroll-Y .text.active[data-speaker="4"] .content,
.scroll-Y .text.active[data-speaker="6"] .content {
color: #FF7538 !important;
color: #2671E2 !important;
position: relative;
}

@@ -2039,28 +2130,17 @@
}
}

.scroll-Y .text .avatar {
width: 64rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
font-size: 36rpx;
border-radius: 50%;
background: #F2F2F2;
color: #008EF2;

image {
width: 40rpx;
}
}

.scroll-Y .text .contentInfo .info {
color: #ccc;
font-size: 18rpx;
font-size: 30rpx;
color: #666;
font-size: 22rpx;
padding: 0 28rpx;
height: 62rpx;
}
.scroll-Y .text.active .info {
color: #2671E2 !important;
position: relative;
}

.scroll-Y .text .contentInfo .contentMain {
display: flex;
align-items: center;
@@ -2068,13 +2148,14 @@

.scroll-Y .text .contentInfo .contentMain .content {
margin-left: 30rpx;
line-height: 60rpx;
line-height: 40rpx;
text-align: left;
padding: 0 5px;
font-size: 30rpx;
padding: 20rpx;
border-radius: 8rpx;
max-width: 442rpx;
background: #F6F6F6;
color: #999999;
background: #f8f8f8;
color: #505050;
position: relative;

.tankuangcss {
@@ -2101,8 +2182,8 @@
}

.scroll-Y .text .contentInfo .contentMain .play {
width: 50rpx;
height: 50rpx;
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}

@@ -2369,8 +2450,8 @@
transform: rotate(270deg);
}
.scroll-Y .isGreen .contentInfo .contentMain .content {
background: #2BC805 !important;
color: #FFFFFF;
background: #f8f8f8 !important;
color: #505050;
}
/deep/ .u-model-title{
padding: 34rpx 0 16rpx !important;


+ 1
- 1
pages/index/index.vue View File

@@ -221,7 +221,7 @@
<view class="commonly-img">
<image class="commonly-img1" src="https://static.quhouse.com/c2c2e1af3d5f41d180ec55a04a5d4f26.png" mode=""></image>
</view>
<view class="commonly-text">用户画像</view>
<view class="commonly-text">客户画像</view>
</view>
</view>
<view class="title" v-if="permissions.commonly4||permissions.commonly8||permissions.commonly7||permissions.commonly9">


Write Preview
Loading…
Cancel
Save