@zhangxuejing123./sip-phone-sdk 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/sip-phone-sdk.common.js +87 -87
  2. package/dist/sip-phone-sdk.css +1 -1
  3. package/dist/sip-phone-sdk.umd.js +87 -87
  4. package/dist/sip-phone-sdk.umd.min.js +5 -5
  5. package/package.json +1 -1
  6. package/src/components/MobilePhone.vue +184 -202
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangxuejing123./sip-phone-sdk",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/MobilePhone.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <!-- 主模板：视频通话界面 -->
2
2
  <template >
3
3
  <!-- 主容器：使用flex垂直布局，内容居中对齐 -->
4
- <div :class="isAPP ? 'my-APP' : ''" class="d-flex flex-column align-center justify-space-between sip-call-main">
4
+ <div :class="isAPP ? 'my-APP' : 'my-H5'" class="d-flex flex-column align-center justify-space-between sip-call-main">
5
5
  <!-- 位置信息显示区域 -->
6
6
  <div class="location-wrapper" v-if="showLocation">
7
7
  <!-- 显示经纬度和海拔信息 -->
@@ -17,7 +17,7 @@
17
17
  <p class="mt-6 mb-0 call-label" >{{callPrompt}}</p>
18
18
  </div>
19
19
  <!-- 功能按钮区域 -->
20
- <div class="pr-10 pl-10 btn-group" v-if="!miniMode && !showDialPad">
20
+ <div class="pr-10 pl-10 sip-btn-group" v-if="!miniMode && !showDialPad">
21
21
  <v-row>
22
22
  <v-col cols="12" class="text-center">
23
23
  <!-- 通话计时器 -->
@@ -961,215 +961,197 @@ export default {
961
961
  @import './vuetify.css';
962
962
  </style> -->
963
963
  <style lang="scss">
964
- .sip-call-main {
965
- background-color: #737778;
966
- padding: 25% 20px 20% !important;
967
- width: 100vw;
968
- height: 100vh;
969
- overflow: hidden;
970
- }
971
-
972
- .sip-call-wrapper {
973
- position: absolute;
974
- left: 0;
975
- top: 0;
976
- width: 100vw;
977
- height: 100vh;
978
- z-index: 100;
979
- }
980
-
981
- .btn-group {
982
- width: 100%;
983
- position: absolute;
984
- bottom: 500px;
985
- z-index: 4000;
986
- }
987
-
988
- @media screen and (min-width: 1024px) {
989
- .btn-group {
964
+ .my-H5 {
965
+ .sip-call-main {
966
+ background-color: #737778;
967
+ padding: 25% 20px 20% !important;
968
+ width: 100vw;
969
+ height: 100vh;
970
+ overflow: hidden;
971
+ }
972
+ .sip-call-wrapper {
990
973
  position: absolute;
991
- bottom: 80px;
992
- width: 640px;
974
+ left: 0;
975
+ top: 0;
976
+ width: 100vw;
977
+ height: 100vh;
978
+ z-index: 100;
979
+ }
980
+ .sip-btn-group {
981
+ width: 100%;
982
+ position: absolute;
983
+ bottom: 500px;
993
984
  z-index: 4000;
994
985
  }
995
- }
996
-
997
- .sip-call-video {
998
- width: 100%;
999
- height: 100%;
1000
- object-fit: cover;
1001
- background-color: #000000;
1002
- }
1003
-
1004
- .video-panel {
1005
- position: absolute;
1006
- display: flex;
1007
- flex-direction: column;
1008
- justify-content: space-around;
1009
- align-items: center;
1010
- }
1011
-
1012
- .video-timer {
1013
- background-color: rgba(255,255,255,0.80);
1014
- position: absolute;
1015
- top: 80px;
1016
- left: 32px;
1017
- font-size: 28px;
1018
- font-weight: bold;
1019
- padding: 4px 16px 4px 12px;
1020
- border-radius: 24px;
1021
- z-index: 2000;
1022
- display: flex;
1023
- justify-content: space-around;
1024
- align-items: center;
1025
- }
1026
-
1027
- .video-switch-btn {
1028
- position: absolute !important;
1029
- top: 80px;
1030
- right: 160px;
1031
- z-index: 2000;
1032
- img {
1033
- background-color: #000000;
1034
- border-radius: 12px;
1035
- border: 2px solid #000000;
986
+ @media screen and (min-width: 1024px) {
987
+ .sip-btn-group {
988
+ position: absolute;
989
+ bottom: 80px;
990
+ width: 640px;
991
+ z-index: 4000;
992
+ }
1036
993
  }
1037
- }
1038
-
1039
- .video-mini-mode {
1040
- position: absolute !important;
1041
- top: 80px;
1042
- right: 96px;
1043
- z-index: 2000;
1044
- }
1045
-
1046
- .camera-switch-btn {
1047
- position: absolute !important;
1048
- top: 80px;
1049
- right: 32px;
1050
- z-index: 2000;
1051
- }
1052
-
1053
- .video-normal-mode {
1054
- position: absolute !important;
1055
- top: 32px;
1056
- right: 32px;
1057
- z-index: 2000;
1058
- }
1059
-
1060
- .location-wrapper {
1061
- position: absolute;
1062
- top: 0;
1063
- right: 0;
1064
- width: 300px;
1065
- background-color: #00000055;
1066
- color: #FFFFFF;
1067
- padding: 12px;
1068
- p {
1069
- font-size: 24px;
1070
- margin: 0;
1071
- padding: 0;
994
+ .sip-call-video {
1072
995
  width: 100%;
1073
- white-space: nowrap;
1074
- text-overflow: ellipsis;
996
+ height: 100%;
997
+ object-fit: cover;
998
+ background-color: #000000;
999
+ }
1000
+ .video-panel {
1001
+ position: absolute;
1002
+ display: flex;
1003
+ flex-direction: column;
1004
+ justify-content: space-around;
1005
+ align-items: center;
1006
+ }
1007
+ .video-timer {
1008
+ background-color: rgba(255,255,255,0.80);
1009
+ position: absolute;
1010
+ top: 80px;
1011
+ left: 32px;
1012
+ font-size: 28px;
1013
+ font-weight: bold;
1014
+ padding: 4px 16px 4px 12px;
1015
+ border-radius: 24px;
1016
+ z-index: 2000;
1017
+ display: flex;
1018
+ justify-content: space-around;
1019
+ align-items: center;
1020
+ }
1021
+ .video-switch-btn {
1022
+ position: absolute !important;
1023
+ top: 80px;
1024
+ right: 160px;
1025
+ z-index: 2000;
1026
+ img {
1027
+ background-color: #000000;
1028
+ border-radius: 12px;
1029
+ border: 2px solid #000000;
1030
+ }
1031
+ }
1032
+ .video-mini-mode {
1033
+ position: absolute !important;
1034
+ top: 80px;
1035
+ right: 96px;
1036
+ z-index: 2000;
1037
+ }
1038
+ .camera-switch-btn {
1039
+ position: absolute !important;
1040
+ top: 80px;
1041
+ right: 32px;
1042
+ z-index: 2000;
1043
+ }
1044
+ .video-normal-mode {
1045
+ position: absolute !important;
1046
+ top: 32px;
1047
+ right: 32px;
1048
+ z-index: 2000;
1049
+ }
1050
+ .location-wrapper {
1051
+ position: absolute;
1052
+ top: 0;
1053
+ right: 0;
1054
+ width: 300px;
1055
+ background-color: #00000055;
1056
+ color: #FFFFFF;
1057
+ padding: 12px;
1058
+ p {
1059
+ font-size: 24px;
1060
+ margin: 0;
1061
+ padding: 0;
1062
+ width: 100%;
1063
+ white-space: nowrap;
1064
+ text-overflow: ellipsis;
1065
+ }
1075
1066
  }
1076
1067
  }
1077
1068
  </style>
1078
- <style scoped>
1079
- .custom-mute-btn {
1080
- background: transparent !important;
1081
- box-shadow: none !important;
1082
- z-index: 9999 !important;
1083
- min-width: 0 !important;
1084
- width: auto !important;
1085
- height: auto !important;
1086
- padding: 0 !important;
1087
- margin: 0 !important;
1088
- }
1089
-
1090
- /* 移除按钮悬停和激活状态的背景色 */
1091
- .custom-mute-btn::before {
1092
- background-color: transparent !important;
1093
- opacity: 0 !important;
1094
- }
1095
-
1096
- /* 移除按钮的点击效果 */
1097
- .custom-mute-btn:hover::before,
1098
- .custom-mute-btn:focus::before,
1099
- .custom-mute-btn:active::before {
1100
- opacity: 0 !important;
1101
- }
1102
-
1103
- .transparent-btn {
1069
+ <style scoped lang="scss">
1070
+ .my-H5 {
1071
+ .custom-mute-btn {
1072
+ background: transparent !important;
1073
+ box-shadow: none !important;
1074
+ z-index: 9999 !important;
1075
+ min-width: 0 !important;
1076
+ width: auto !important;
1077
+ height: auto !important;
1078
+ padding: 0 !important;
1079
+ margin: 0 !important;
1080
+ }
1081
+ /* 移除按钮悬停和激活状态的背景色 */
1082
+ .custom-mute-btn::before {
1083
+ background-color: transparent !important;
1084
+ opacity: 0 !important;
1085
+ }
1086
+ /* 移除按钮的点击效果 */
1087
+ .custom-mute-btn:hover::before,
1088
+ .custom-mute-btn:focus::before,
1089
+ .custom-mute-btn:active::before {
1090
+ opacity: 0 !important;
1091
+ }
1092
+ .transparent-btn {
1093
+ background: transparent !important;
1094
+ box-shadow: none !important;
1095
+ min-width: 0 !important;
1096
+ width: auto !important;
1097
+ height: auto !important;
1098
+ padding: 0 !important;
1099
+ margin: 0 !important;
1100
+ opacity: .6 !important;
1101
+ position: absolute !important;
1102
+ left: calc(50% + 160px) !important;
1103
+ color: #FFFFFF;
1104
+ }
1105
+ .transparent-btn::before {
1106
+ background-color: transparent !important;
1107
+ opacity: 0 !important;
1108
+ }
1109
+ .call-btn{
1110
+ margin-top:320px;
1111
+ }
1112
+ .call-img{
1113
+ width:200px;
1114
+ height:200px;
1115
+ border-radius: 50%;
1116
+ }
1117
+ .call-label{
1118
+ font-size: 32px;
1119
+ color: #FFFFFF
1120
+ }
1121
+ .cancel-btn{
1122
+ opacity: 1;
1104
1123
  background: transparent !important;
1105
- box-shadow: none !important;
1106
- min-width: 0 !important;
1107
- width: auto !important;
1108
- height: auto !important;
1109
- padding: 0 !important;
1110
- margin: 0 !important;
1111
- opacity: .6 !important;
1112
- position: absolute !important;
1113
- left: calc(50% + 160px) !important;
1114
- color: #FFFFFF;
1115
- }
1116
- .transparent-btn::before {
1117
- background-color: transparent !important;
1118
- opacity: 0 !important;
1119
- }
1120
-
1121
- .call-btn{
1122
- margin-top:320px;
1123
- }
1124
- .call-img{
1125
- width:200px;
1126
- height:200px;
1127
- border-radius: 50%;
1128
- }
1129
-
1130
-
1131
- .call-label{
1132
- font-size: 32px;
1133
- color: #FFFFFF
1134
- }
1135
-
1136
- .cancel-btn{
1137
- opacity: 1;
1138
- background: transparent !important;
1139
- box-shadow: none !important;
1140
- position: relative !important;
1141
- margin-top: -100px !important;
1142
- }
1143
- .cancel-img {
1144
- width: 160px;
1145
- height: 160px;
1146
- }
1147
- .cancel-label{
1148
- top: 156px;
1149
- position: absolute; color: #FFFFFF;
1150
- font-size: 32px;
1151
- }
1152
-
1153
-
1154
- .call-duration{
1155
- font-size: 28px;margin-top: -25px; color: #FFFFFF;
1156
- }
1157
- .hangup-img{
1158
- width: 160px;
1159
- height: 160px;
1160
- }
1161
- .hangup-label{
1162
- top: 146px;
1163
- position: absolute; color: #FFFFFF;
1164
- font-size: 28px;
1165
- }
1166
-
1167
- .img-open-close{
1168
- width: 110px;
1169
- height: 160px;
1124
+ box-shadow: none !important;
1125
+ position: relative !important;
1126
+ margin-top: -100px !important;
1127
+ }
1128
+ .cancel-img {
1129
+ width: 160px;
1130
+ height: 160px;
1131
+ }
1132
+ .cancel-label{
1133
+ top: 156px;
1134
+ position: absolute; color: #FFFFFF;
1135
+ font-size: 32px;
1136
+ }
1137
+ .call-duration{
1138
+ font-size: 28px;margin-top: -25px; color: #FFFFFF;
1139
+ }
1140
+ .hangup-img{
1141
+ width: 160px;
1142
+ height: 160px;
1143
+ }
1144
+ .hangup-label{
1145
+ top: 146px;
1146
+ position: absolute; color: #FFFFFF;
1147
+ font-size: 28px;
1148
+ }
1149
+ .img-open-close{
1150
+ width: 110px;
1151
+ height: 160px;
1152
+ }
1170
1153
  }
1171
1154
  </style>
1172
-
1173
1155
  <style lang="scss">
1174
1156
  .my-APP {
1175
1157
  .sip-call-main {
@@ -1187,14 +1169,14 @@ export default {
1187
1169
  height: 100vh;
1188
1170
  z-index: 100;
1189
1171
  }
1190
- .btn-group {
1172
+ .sip-btn-group {
1191
1173
  width: 100%;
1192
1174
  position: absolute;
1193
1175
  bottom: 250px;
1194
1176
  z-index: 4000;
1195
1177
  }
1196
1178
  @media screen and (min-width: 1024px) {
1197
- .btn-group {
1179
+ .sip-btn-group {
1198
1180
  position: absolute;
1199
1181
  bottom: 40px;
1200
1182
  width: 320px;