index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
  1. <template>
  2. <view class="msg-box">
  3. <!-- 顶部导航栏 -->
  4. <view class="nav-header">
  5. <view class="nav-left" @click="goSearch">
  6. <u-icon name="search" color="rgba(56, 58, 63, 1)" size="32"></u-icon>
  7. </view>
  8. <view class="nav-center">
  9. <text class="nav-title">消息</text>
  10. </view>
  11. <view class="nav-right">
  12. <u-icon name="bell" color="rgba(56, 58, 63, 1)" size="32" style="margin-right: 20rpx;"></u-icon>
  13. <u-icon name="setting" color="rgba(56, 58, 63, 1)" size="32" @click="showSettingsModal"></u-icon>
  14. </view>
  15. </view>
  16. <view class="chat-title">聊天</view>
  17. <view v-if="msgList.length" class="margin-topW">
  18. <view class="flex padding-tb radius padding-lr-sm bg" @click="goMsg" v-for="(item,index) in msgList"
  19. :key='index'>
  20. <view>
  21. <image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
  22. src="../../static/images/msg/msg.png"></image>
  23. </view>
  24. <view class="flex-sub margin-left-sm">
  25. <view class="flex justify-between">
  26. <view class="text-white">{{item.title?item.title: '系统消息'}}</view>
  27. <view v-if="messageCount>0"
  28. style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
  29. {{messageCount}}
  30. </view>
  31. </view>
  32. <view>
  33. <view class="text-grey">{{item.content}}</view>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="margin-topW">
  39. <view class="flex padding-tb radius padding-lr-sm bg" @click="goChat">
  40. <view>
  41. <image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
  42. src="../../static/images/msg/msgs.png"></image>
  43. </view>
  44. <view class="flex-sub margin-left-sm">
  45. <view class="flex justify-between">
  46. <view class="text-white">在线客服</view>
  47. <view v-if="userCount>0"
  48. style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
  49. {{userCount}}
  50. </view>
  51. </view>
  52. <view>
  53. <view class="text-grey">联系在线客服</view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view v-if="chatList.length" class="margin-top-sm content ">
  59. <view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goIM(item)"
  60. v-for="(item,index) in chatList" :key='index'>
  61. <view class="flex padding-tb ">
  62. <view class="avatar-container">
  63. <u-image shape="circle" width='80rpx' height="80rpx" :src="item.avatar"></u-image>
  64. <view class="online-dot"></view>
  65. </view>
  66. <view class="flex-sub margin-left-sm">
  67. <view class="flex justify-between align-center">
  68. <view class="text-white flex align-center userNameleng">
  69. <view class="text-white" style="font-size: 28rpx;">
  70. {{item.userName}}
  71. </view>
  72. <text class="text-grey"
  73. style="font-size: 22rpx;margin-left: 10rpx;">{{item.stationName}}
  74. </text>
  75. </view>
  76. <view class="text-grey">{{item.messageTime?getMonthOrDay(item.messageTime):''}}</view>
  77. </view>
  78. <view class="flex justify-between" style="margin-top: 10rpx;">
  79. <view class="text-grey" v-if="item.messageType == 1">{{item.content}}</view>
  80. <view class="text-grey" v-else-if="item.messageType == 18">位置</view>
  81. <view class="text-grey" v-else-if="item.messageType == 9">简历请求</view>
  82. <view class="text-grey" v-else-if="item.messageType == 6">微信请求</view>
  83. <view class="text-grey" v-else-if="item.messageType == 5">手机号请求</view>
  84. <view class="text-grey" v-else-if="item.messageType == 2">[图片]</view>
  85. <view class="text-grey" v-else-if="item.messageType == 4">[表情]</view>
  86. <view class="text-grey" v-else-if="item.messageType == 20">[视频通话]</view>
  87. <view class="text-grey" v-else-if="item.messageType == 21">[语音通话]</view>
  88. <view v-if="item.contentCount"
  89. style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
  90. {{item.contentCount}}
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- <view class="flex padding-tb" v-else>
  96. <view>
  97. <u-image shape="circle" width='80rpx' height="80rpx" :src="item.avatar"></u-image>
  98. </view>
  99. <view class="flex-sub margin-left-sm">
  100. <view class="flex justify-between">
  101. <view class="text-white">{{item.userName}}</view>
  102. <view class="text-grey">{{item.messageTime?item.messageTime:''}}</view>
  103. </view>
  104. <view class="flex justify-between">
  105. <view class="text-grey" v-if="item.messageType == 1">{{item.content}}</view>
  106. <view class="text-grey" v-else-if="item.messageType == 18">位置</view>
  107. <view class="text-grey" v-else-if="item.messageType == 9">简历请求</view>
  108. <view class="text-grey" v-else-if="item.messageType == 6">微信请求</view>
  109. <view class="text-grey" v-else-if="item.messageType == 5">手机号请求</view>
  110. <view class="text-grey" v-else>[图片]</view>
  111. <view v-if="item.contentCount"
  112. style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
  113. {{item.contentCount}}
  114. </view>
  115. </view>
  116. </view>
  117. </view> -->
  118. </view>
  119. </view>
  120. <empty v-if="!chatList.length" content='暂无消息'></empty>
  121. <!-- 消息设置弹窗 -->
  122. <u-popup v-model="showSettings" mode="bottom" :mask-close-able="true" border-radius="20">
  123. <view class="settings-modal">
  124. <view class="modal-drag-bar"></view>
  125. <view class="modal-title">消息设置</view>
  126. <!-- 消息通知开关 -->
  127. <view class="setting-item setting-item-first">
  128. <view class="setting-left">
  129. <view class="setting-title-row">
  130. <view class="setting-label">消息通知开关</view>
  131. <view class="setting-desc">关闭后将不再向你推送消息通知</view>
  132. </view>
  133. <view class="switch-status" :class="{ 'status-on': notificationEnabled, 'status-off': !notificationEnabled }">
  134. {{ notificationEnabled ? 'On' : 'Off' }}
  135. </view>
  136. </view>
  137. <view class="setting-right">
  138. <u-switch v-model="notificationEnabled" active-color="#007AFF" @change="toggleNotification"></u-switch>
  139. </view>
  140. </view>
  141. <!-- 招呼语设置 -->
  142. <view class="setting-item" @click="goGreetingSettings">
  143. <view class="setting-left">
  144. <view class="setting-label">招呼语设置</view>
  145. </view>
  146. <view class="setting-right">
  147. <view class="setting-desc">设置后,沟通时可自动发送设置的招呼语</view>
  148. <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
  149. </view>
  150. </view>
  151. <!-- 常用语设置 -->
  152. <view class="setting-item" @click="goCommonPhrases">
  153. <view class="setting-left">
  154. <view class="setting-label">常用语设置</view>
  155. </view>
  156. <view class="setting-right">
  157. <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
  158. </view>
  159. </view>
  160. </view>
  161. </u-popup>
  162. </view>
  163. </template>
  164. <script>
  165. import empty from '../../components/empty.vue'
  166. export default {
  167. components: {
  168. empty
  169. },
  170. data() {
  171. return {
  172. page: 1,
  173. limit: 100,
  174. chatList: [],
  175. userId: '',
  176. msgList: [],
  177. time: '',
  178. messageCount: 0,
  179. userCount: 0,
  180. arr: [],
  181. showModal: true,
  182. showSettings: false, // 控制设置弹窗显示
  183. notificationEnabled: true // 消息通知开关状态
  184. }
  185. },
  186. onLoad() {
  187. if (uni.getStorageSync('userId')) {
  188. this.getChatList()
  189. }
  190. },
  191. //下拉刷新
  192. onPullDownRefresh() {
  193. let that = this
  194. if (uni.getStorageSync('token')) {
  195. that.getweiduMsg();
  196. that.getChatList()
  197. that.getMsgList()
  198. that.$nextTick(function() {
  199. that.messageCount = uni.getStorageSync('messageCount')
  200. })
  201. }
  202. },
  203. onShow() {
  204. let that = this
  205. that.userId = uni.getStorageSync('userId')
  206. if (that.userId) {
  207. that.time = setInterval(function() {
  208. that.getweiduMsg();
  209. that.getChatList()
  210. that.getMsgList()
  211. that.$nextTick(function() {
  212. that.messageCount = uni.getStorageSync('messageCount')
  213. })
  214. }, 3000)
  215. this.$Request.getT('/app/common/type/310').then(res => { //消息未读提醒
  216. if (res.code == 0) {
  217. if (res.data && res.data.value) {
  218. this.arr.push(res.data.value)
  219. }
  220. }
  221. })
  222. this.$Request.getT('/app/common/type/337').then(res => { //预约成功通知(通用)
  223. if (res.code == 0) {
  224. if (res.data && res.data.value) {
  225. this.arr.push(res.data.value)
  226. }
  227. }
  228. })
  229. this.$Request.getT('/app/common/type/338').then(res => { //订单状态通知
  230. if (res.code == 0) {
  231. if (res.data && res.data.value) {
  232. this.arr.push(res.data.value)
  233. }
  234. }
  235. })
  236. // #ifdef MP-WEIXIN
  237. if (this.showModal) {
  238. this.openMsg()
  239. }
  240. // #endif
  241. } else {
  242. that.chatList = []
  243. that.msgList = []
  244. }
  245. },
  246. onHide() {
  247. clearInterval(this.time)
  248. },
  249. methods: {
  250. //把时间转换为月日
  251. getMonthOrDay(time) {
  252. let date = new Date(time) // 获取时间
  253. // var year = date.getFullYear() // 获取年
  254. let month = date.getMonth() + 1 // 获取月
  255. let strDate = date.getDate() // 获取日
  256. return month + '月' + strDate + '日'
  257. },
  258. // 开启订阅消息
  259. openMsg() {
  260. console.log('订阅消息')
  261. var that = this
  262. uni.getSetting({
  263. withSubscriptions: true, //是否获取用户订阅消息的订阅状态,默认false不返回
  264. success(ret) {
  265. console.log(ret.subscriptionsSetting.itemSettings, '*************************************')
  266. // if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
  267. if (ret.subscriptionsSetting.itemSettings) {
  268. uni.setStorageSync('sendMsg', true)
  269. uni.openSetting({ // 打开设置页
  270. success(rea) {
  271. console.log(rea.authSetting)
  272. }
  273. });
  274. } else { // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
  275. uni.setStorageSync('sendMsg', false)
  276. uni.showModal({
  277. title: '提示',
  278. content: '为了更好的体验,请绑定消息推送',
  279. confirmText: '确定',
  280. cancelText: '取消',
  281. confirmColor: '#016BF6',
  282. success: function(res) {
  283. if (res.confirm) {
  284. wx.requestSubscribeMessage({
  285. tmplIds: that.arr,
  286. success(re) {
  287. console.log(JSON.stringify(re),
  288. '++++++++++++++')
  289. var datas = JSON.stringify(re);
  290. if (datas.indexOf("accept") != -1) {
  291. console.log(re)
  292. // uni.setStorageSync('sendMsg', true)
  293. }
  294. },
  295. fail: (res) => {
  296. console.log(res)
  297. }
  298. })
  299. // uni.setStorageSync('sendMsg', true)
  300. console.log('确认')
  301. that.showModal = false
  302. } else if (res.cancel) {
  303. console.log('取消')
  304. // uni.setStorageSync('sendMsg', false)
  305. that.showModal = true
  306. }
  307. }
  308. })
  309. }
  310. }
  311. })
  312. },
  313. getweiduMsg() {
  314. this.$Request.get("/app/chats/userCount").then(res => {
  315. uni.stopPullDownRefresh()
  316. if (res.code == 0) {
  317. this.userCount = res.data
  318. }
  319. });
  320. },
  321. //在线客服
  322. goChat() {
  323. // uni.navigateTo({
  324. // url:'/my/setting/chat'
  325. // })
  326. // #ifdef MP-WEIXIN
  327. if (uni.getStorageSync('sendMsg')) {
  328. // console.log('授权+1')
  329. wx.requestSubscribeMessage({
  330. tmplIds: this.arr,
  331. success(re) {
  332. // console.log(JSON.stringify(re), 111111111111)
  333. var datas = JSON.stringify(re);
  334. if (datas.indexOf("accept") != -1) {
  335. // console.log(re)
  336. }
  337. },
  338. fail: (res) => {
  339. // console.log(res)
  340. }
  341. })
  342. }
  343. // #endif
  344. let that = this
  345. if (uni.getStorageSync('userType') == 1) { //用户端
  346. // #ifdef MP-WEIXIN
  347. wx.openCustomerServiceChat({
  348. extInfo: {
  349. url: that.$queue.getData('kefu')
  350. },
  351. corpId: that.$queue.getData('kefuAppid'),
  352. success(res) {
  353. console.log(res)
  354. },
  355. })
  356. // #endif
  357. // #ifdef H5
  358. window.location.href = that.$queue.getData('kefu');
  359. // #endif
  360. // #ifdef APP
  361. let kefu = that.$queue.getData('kefu')
  362. console.log(kefu)
  363. plus.runtime.openURL(kefu, function(res) {});
  364. // #endif
  365. } else { //企业端
  366. // #ifdef MP-WEIXIN
  367. wx.openCustomerServiceChat({
  368. extInfo: {
  369. url: that.$queue.getData('kefuq')
  370. },
  371. corpId: that.$queue.getData('kefuAppidq'),
  372. success(res) {
  373. console.log(res)
  374. },
  375. })
  376. // #endif
  377. // #ifdef H5
  378. window.location.href = that.$queue.getData('kefuq');
  379. // #endif
  380. // #ifdef APP
  381. let kefu = that.$queue.getData('kefuq')
  382. console.log(kefu)
  383. plus.runtime.openURL(kefu, function(res) {});
  384. // #endif
  385. }
  386. },
  387. getChatList() {
  388. this.$Request.get("/app/chat/selectChatConversationPage", {
  389. page: this.page,
  390. limit: this.limit
  391. }).then(res => {
  392. uni.stopPullDownRefresh()
  393. if (res.code == 0) {
  394. this.chatList = res.data.list
  395. }
  396. });
  397. },
  398. getMsgList() {
  399. this.$Request.get("/app/message/selectMessageByUserIdLimit1").then(res => {
  400. uni.stopPullDownRefresh()
  401. if (res.code == 0) {
  402. this.msgList = res.data.list
  403. }
  404. });
  405. },
  406. goIM(e) {
  407. // #ifdef MP-WEIXIN
  408. if (uni.getStorageSync('sendMsg')) {
  409. // console.log('授权+1')
  410. wx.requestSubscribeMessage({
  411. tmplIds: this.arr,
  412. success(re) {
  413. // console.log(JSON.stringify(re), 111111111111)
  414. var datas = JSON.stringify(re);
  415. if (datas.indexOf("accept") != -1) {
  416. // console.log(re)
  417. }
  418. },
  419. fail: (res) => {
  420. // console.log(res)
  421. }
  422. })
  423. }
  424. // #endif
  425. let userId = '';
  426. let userType = uni.getStorageSync('userType')
  427. console.log(e, 'aaaaaaaaa')
  428. if (userType == 2) { //当前登录用户为企业
  429. userId = e.userId
  430. } else { //当前登录用户为用户
  431. userId = e.focusedUserId
  432. }
  433. if (uni.getStorageSync('userType') == 1) {
  434. uni.navigateTo({
  435. url: '/pages/msg/im?chatConversationId=' + e.chatConversationId + '&byUserId=' + userId +
  436. '&postPushId=' + e.postPushId + '&resumesId=' + e.resumesId
  437. })
  438. } else {
  439. uni.navigateTo({
  440. url: '/pages/msg/im?chatConversationId=' + e.chatConversationId + '&byUserId=' + userId +
  441. '&resumesId=' + e.resumesId + '&postPushId=' + e.postPushId
  442. })
  443. }
  444. },
  445. goMsg() {
  446. // #ifdef MP-WEIXIN
  447. if (uni.getStorageSync('sendMsg')) {
  448. // console.log('授权+1')
  449. wx.requestSubscribeMessage({
  450. tmplIds: this.arr,
  451. success(re) {
  452. // console.log(JSON.stringify(re), 111111111111)
  453. var datas = JSON.stringify(re);
  454. if (datas.indexOf("accept") != -1) {
  455. // console.log(re)
  456. }
  457. },
  458. fail: (res) => {
  459. // console.log(res)
  460. }
  461. })
  462. }
  463. // #endif
  464. uni.navigateTo({
  465. url: '/pages/msg/message'
  466. })
  467. },
  468. // 显示设置弹窗
  469. showSettingsModal() {
  470. this.showSettings = true
  471. },
  472. // 切换通知开关
  473. toggleNotification() {
  474. // 开关状态已经通过v-model自动更新,这里可以添加其他逻辑
  475. console.log('通知开关状态:', this.notificationEnabled)
  476. },
  477. // 招呼语设置
  478. goGreetingSettings() {
  479. uni.navigateTo({
  480. url: '/pages/msg/addmsg'
  481. })
  482. },
  483. // 常用语设置
  484. goCommonPhrases() {
  485. uni.navigateTo({
  486. url: '/pages/msg/addmsg'
  487. })
  488. },
  489. // 搜索功能
  490. goSearch() {
  491. uni.navigateTo({
  492. url: '/pages/msg/search'
  493. })
  494. }
  495. }
  496. }
  497. </script>
  498. <style lang="scss">
  499. .msg-box {
  500. padding-top: 80rpx;
  501. .chat-title {
  502. background: linear-gradient(180deg, rgba(13, 39, 247, 1) 0%, rgb(191, 194, 201) 100%);
  503. -webkit-background-clip: text;
  504. background-clip: text;
  505. -webkit-text-fill-color: transparent;
  506. color: transparent;
  507. font-family: DM Sans;
  508. font-size: 42rpx;
  509. font-weight: 500;
  510. line-height: 28px;
  511. letter-spacing: 0%;
  512. text-align: left;
  513. margin: 20rpx 0 20rpx 20rpx;
  514. }
  515. .margin-top-sm {
  516. margin-top: 0 !important;
  517. }
  518. .nav-header {
  519. height: 80rpx;
  520. display: flex;
  521. align-items: center;
  522. justify-content: space-between;
  523. padding: 0 20rpx;
  524. }
  525. .nav-left {
  526. width: 60rpx;
  527. display: flex;
  528. justify-content: flex-start;
  529. }
  530. .nav-center {
  531. flex: 1;
  532. display: flex;
  533. justify-content: center;
  534. }
  535. .nav-title {
  536. font-size: 36rpx;
  537. font-weight: 600;
  538. color: #333333;
  539. }
  540. .nav-right {
  541. width: 60rpx;
  542. display: flex;
  543. justify-content: flex-end;
  544. align-items: center;
  545. }
  546. .bg {
  547. background: #FFFFFF;
  548. }
  549. .userNameleng {
  550. width: 80%;
  551. overflow: hidden;
  552. white-space: nowrap;
  553. text-overflow: ellipsis;
  554. -o-text-overflow: ellipsis;
  555. }
  556. .avatar-container {
  557. position: relative;
  558. display: inline-block;
  559. }
  560. .online-dot {
  561. position: absolute;
  562. bottom: 2rpx;
  563. right: 2rpx;
  564. width: 20rpx;
  565. height: 20rpx;
  566. background-color: #00FF00;
  567. border-radius: 50%;
  568. border: 2rpx solid #FFFFFF;
  569. }
  570. }
  571. // 设置弹窗样式
  572. .settings-modal {
  573. background: #FFFFFF;
  574. border-radius: 20rpx 20rpx 0 0;
  575. padding: 0 30rpx 40rpx 30rpx;
  576. min-width: 100%;
  577. .modal-drag-bar {
  578. width: 60rpx;
  579. height: 8rpx;
  580. background: #E5E5E5;
  581. border-radius: 4rpx;
  582. margin: 20rpx auto 30rpx auto;
  583. }
  584. .modal-title {
  585. margin: 0 auto;
  586. color: rgba(34, 37, 42, 1);
  587. font-family: DM Sans;
  588. font-size: 36rpx;
  589. font-weight: 500;
  590. line-height: 23px;
  591. letter-spacing: 0px;
  592. text-align: center;
  593. padding-bottom: 20rpx;
  594. border-bottom: 1rpx solid rgba(219, 218, 218, 1);
  595. }
  596. .setting-item {
  597. display: flex;
  598. align-items: center;
  599. justify-content: space-between;
  600. padding: 12rpx 32rpx;
  601. margin-bottom: 30rpx;
  602. border: 1px solid rgba(227, 231, 236, 1);
  603. border-radius: 6px;
  604. &:active {
  605. background-color: #F8F8F8;
  606. }
  607. &.setting-item-first {
  608. border: none;
  609. padding: 40rpx 32rpx;
  610. }
  611. .setting-left {
  612. display: flex;
  613. flex-direction: column;
  614. align-items: flex-start;
  615. flex: 1;
  616. .setting-title-row {
  617. display: flex;
  618. align-items: center;
  619. justify-content: flex-start;
  620. width: 100%;
  621. margin-bottom: 16rpx;
  622. .setting-label {
  623. color: rgba(21, 22, 26, 1);
  624. font-family: DM Sans;
  625. font-size: 32rpx;
  626. font-weight: 600;
  627. line-height: 26px;
  628. letter-spacing: 0%;
  629. text-align: left;
  630. margin-right: 16rpx;
  631. }
  632. .setting-desc {
  633. color: rgba(153, 153, 153, 1);
  634. font-family: DM Sans;
  635. font-size: 22rpx;
  636. font-weight: 400;
  637. line-height: 13px;
  638. letter-spacing: 0%;
  639. text-align: left;
  640. }
  641. }
  642. .switch-status {
  643. font-size: 32rpx;
  644. &.status-on {
  645. color: #007AFF;
  646. }
  647. &.status-off {
  648. color: #999999;
  649. }
  650. }
  651. }
  652. .setting-right {
  653. display: flex;
  654. align-items: center;
  655. justify-content: flex-end;
  656. .u-switch {
  657. margin-top: 20rpx;
  658. transform: scale(1.2); // 放大开关到1.5倍
  659. }
  660. .setting-desc {
  661. color: rgba(153, 153, 153, 1);
  662. font-family: DM Sans;
  663. font-size: 22rpx;
  664. font-weight: 400;
  665. line-height: 13px;
  666. letter-spacing: 0%;
  667. text-align: left;
  668. margin-right: 16rpx;
  669. }
  670. }
  671. }
  672. }
  673. </style>