|
|
@@ -1456,6 +1456,527 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/*名片夹*/
|
|
|
+.cx-card-older {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .topDiv {
|
|
|
+ width: 750rpx;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ .searchBox {
|
|
|
+ width: 607rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ border: 1rpx solid #797979;
|
|
|
+ border-radius: 46.5rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ .searchPic {
|
|
|
+ margin: 14rpx 20rpx 14rpx 29rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .inputs {
|
|
|
+ margin-top: 9rpx;
|
|
|
+ padding: 3rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 495rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageDiv {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ .pic {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .tipText {
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #D0021B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chooseIndustry {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ .text {
|
|
|
+ width: 47rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ color: #9B9B9B;
|
|
|
+ letter-spacing: 1.35rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ .pic {
|
|
|
+ width: 19rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ margin: 10rpx 0 10rpx 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .industryList {
|
|
|
+ width: 750rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ .industrys:not(:last-child) {
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ .industrys {
|
|
|
+ // flex: 1;
|
|
|
+ min-width: 120rpx;
|
|
|
+ max-width: 148rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ height: 37rpx;
|
|
|
+ color: #434656;
|
|
|
+ line-height: 37rpx;
|
|
|
+ letter-spacing: 1.6px;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .industryManagement {
|
|
|
+ margin-top: 1rpx;
|
|
|
+ margin-left: 14rpx;
|
|
|
+ width: 138rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #797979;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border: 1rpx solid #797979;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ }
|
|
|
+ .styles {
|
|
|
+ color: #50A8FC;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ border: 1rpx solid #50A8FC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*聊一聊*/
|
|
|
+.cx-chat {
|
|
|
+ @width: 56rpx;
|
|
|
+ @height: 56rpx;
|
|
|
+ @margin: 10rpx;
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: #f8f8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*聊天面板（不含底部输入框及功能栏）*/
|
|
|
+ .chatTable {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 1010rpx;
|
|
|
+ padding: 15rpx;
|
|
|
+ margin-bottom: 70rpx;
|
|
|
+ /* border: 1px solid #ff0; */
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ /* overflow-x: hidden;
|
|
|
+ overflow-y: scroll; */
|
|
|
+ /* position: relative; */
|
|
|
+ .chatTableDiv {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ word-break: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chatTextContent {
|
|
|
+ margin: 0 15rpx 0 15rpx;
|
|
|
+ padding: 15rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ max-width: 500rpx;
|
|
|
+ height: auto;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .emojiImg {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .meAvatUrl {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 72rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .otherAvatUrl {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 72rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ max-width: 350rpx;
|
|
|
+ max-height: 150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .me {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ word-break: break-word;
|
|
|
+ background-color: #00cd66;
|
|
|
+ }
|
|
|
+
|
|
|
+ .others {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ word-break: break-word;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lefts {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rights {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mine {
|
|
|
+ /* justify-content: flex-end; */
|
|
|
+ /* display: flex; */
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .emojiContent {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .videoPic {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .breathDiv {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: rgba(0, 0, 0, .8);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .circularDiv {
|
|
|
+ display: absolute;
|
|
|
+ margin: 25rpx auto;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ border-radius: 75rpx;
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: 0 0 20rpx 20rpx #fff;
|
|
|
+
|
|
|
+ animation-name: breath;
|
|
|
+ /*动画名称*/
|
|
|
+ animation-duration: 2s;
|
|
|
+ /*执行时间*/
|
|
|
+ animation-timing-function: linear;
|
|
|
+ /*匀速执行*/
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ /*循环执行*/
|
|
|
+
|
|
|
+ @keyframes breath {
|
|
|
+ from {
|
|
|
+ opacity: 0.1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画开始时的不透明度 */
|
|
|
+ 50% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画50% 时的不透明度 */
|
|
|
+ to {
|
|
|
+ opacity: 0.1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画结束时的不透明度 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ line-height: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .audioPlay {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: #00cd66;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .audioTime {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .audioLeft {
|
|
|
+ margin: 8rpx 5rpx 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .audioRight {
|
|
|
+ margin: 8rpx 5rpx 0 109rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancelAudioBox {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 93vh;
|
|
|
+ /* border: 1px solid #f00; */
|
|
|
+ background-color: rgba(220, 220, 220, .7);
|
|
|
+
|
|
|
+ .cancelAudio {
|
|
|
+ height: 300rpx;
|
|
|
+ margin: auto 0;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ line-height: 200rpx;
|
|
|
+ margin: 73rpx auto;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .defaultBg {
|
|
|
+ background-color: rgba(105, 105, 105, .7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancelBg {
|
|
|
+ background-color: rgba(243, 32, 32, 0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shwoBigPicBox {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #000;
|
|
|
+
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 64rpx;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ margin: 400rpx auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*清除浮动*/
|
|
|
+ .clear {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*底部功能选项（所有）*/
|
|
|
+ .bottomOperation {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 70rpx;
|
|
|
+ max-height: 250rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ z-index: 99;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .chatInput {
|
|
|
+ margin-left: 10rpx;
|
|
|
+
|
|
|
+ .textContent {
|
|
|
+ width: 500rpx;
|
|
|
+ min-height: 60rpx;
|
|
|
+ max-height: 250rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* border: 1px solid #f00; */
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .audio {
|
|
|
+ margin-left: 5rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ button {
|
|
|
+ margin: 10rpx 0 0 10rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .speakBtn {
|
|
|
+ /* background: linear-gradient(to bottom,#fff, #00cd66); */
|
|
|
+ background: #00cd66;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnSpeak {
|
|
|
+ background: #f8f8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expSvg {
|
|
|
+ margin-left: 10rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .showOper {
|
|
|
+ margin-left: 15rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sendBtn {
|
|
|
+ margin-left: 15rpx;
|
|
|
+
|
|
|
+ button {
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ background-color: #00cd66;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*底部 + 功能栏*/
|
|
|
+ .options {
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: center; */
|
|
|
+ padding-left: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 5rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .optionChoose {
|
|
|
+ /* flex: 1; */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*表情模态框*/
|
|
|
+ .emojiBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 210rpx;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: -50vh;
|
|
|
+
|
|
|
+ /* white-space: normal; */
|
|
|
+ .emoji {
|
|
|
+ float: left;
|
|
|
+ margin: 10rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .hiddenBox {
|
|
|
+ bottom: -50vh;
|
|
|
+ } */
|
|
|
+ /* .showBox {
|
|
|
+ bottom: 50vh;
|
|
|
+ transition-duration: 1s;
|
|
|
+ } */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/*个人中心*/
|
|
|
.cx-mine {
|
|
|
.topDiv {
|
