tab bar

wujingjing

2024-08-09 fc3906e080b2204648ee83ee9a1db1584f818f4e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
$chat-bubble-user-color:#35cfab;
$chat-bubble-assistant-color:#ececec;
 
$chat-bubble-bg-color:$chat-bubble-user-color;
$chat-bubble-border-color:$chat-bubble-user-color;
$chat-bubble-arrow-x-offset:-14rpx;
$avatar-message-space:17rpx;
 
 
.chat-bubble {
  /* display: none; */
  font-size: 25rpx;
  line-height: 30rpx;
  padding:20rpx;
  max-width: 520rpx;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}
 
.chat-bubble:after {
  content: '';
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  top: 15rpx;
 
  transform: rotate(135deg);
  border-width: 1px;
  border-style: solid none none solid;
}
 
.assistant {
  margin-right: auto;
  flex-direction: row-reverse;
 
  .chat-bubble {
    margin-left: $avatar-message-space;
    border-color: $chat-bubble-assistant-color;
    background-color: $chat-bubble-assistant-color;
 
    &::after {
      left: $chat-bubble-arrow-x-offset;
      border-color: $chat-bubble-assistant-color;
      background-color: $chat-bubble-assistant-color;
 
    }
  }
}
 
.user {
  margin-left: auto;
  .chat-bubble {
    margin-right: $avatar-message-space;
 
    border-color: $chat-bubble-user-color;
    background-color: $chat-bubble-user-color;
 
    &::after {
      right: $chat-bubble-arrow-x-offset;
      border-color: $chat-bubble-user-color;
      background-color: $chat-bubble-user-color;
 
 
    }
  }
}
 
 
 
$tip-positon-left:20%;
$tip-border-width:20px;
$tip-border-color:transparent;
$tip-bg-color:#ccdcf5;
$tip-middle-color:#ebf3fe;
.robot-tip{
  position: relative;
  width: fit-content;
  // height: 260rpx;
  height: fit-content;
  background: linear-gradient(90deg, $tip-bg-color 0%, $tip-bg-color 25%,$tip-middle-color 55%,$tip-bg-color 100%);
  border: 4px solid $tip-border-color;
  border-radius: 10px;
  &::after{
    content: "";
    position: absolute;
    top: 100%; 
    left: $tip-positon-left;
    transform: translateX(-50%);
    border:$tip-border-width solid transparent;
    border-top: $tip-border-width solid $tip-border-color;
  }
 
  &::before{
    content: "";
    position: absolute;
    top: 100%; 
    left: $tip-positon-left;
    transform: translateX(-50%);
    border: $tip-border-width solid transparent;
    border-top:$tip-border-width solid $tip-bg-color;
    z-index: 1;
  }
 
}
 
 
.van-field{
  .van-icon-replay{
    font-size: 40rpx;
  }
}