diff --git a/pages/center/Piabodata/Customerportrait/Receivedetailabout.vue b/pages/center/Piabodata/Customerportrait/Receivedetailabout.vue index 045151e..34233ae 100644 --- a/pages/center/Piabodata/Customerportrait/Receivedetailabout.vue +++ b/pages/center/Piabodata/Customerportrait/Receivedetailabout.vue @@ -18,6 +18,16 @@ --> + + + {{item.name}} + + + + 标记 + + + @@ -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"> - - + + - {{ item.speaker | toCapital }} + {{ item.speaker | toCapital }} @@ -78,8 +88,10 @@ - + + @@ -94,17 +106,23 @@ - + + + 关键词 - + + + 客户意向 - + + + 销讲执行 @@ -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; diff --git a/pages/index/index.vue b/pages/index/index.vue index b161d15..255897b 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -221,7 +221,7 @@ - 用户画像 + 客户画像