addressBook.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775
  1. <template>
  2. <view>
  3. <cu-custom bgColor="bg-blacks" :isBack="false" v-show="but1">
  4. <block slot="right">
  5. <image src="../../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
  6. </block>
  7. <block slot="right">
  8. <view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
  9. <view class="cu-tag looknumber" style="margin-top: -2%;">
  10. <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
  11. </view>
  12. </view>
  13. </block>
  14. <block slot="right">
  15. </block>
  16. <block slot="content">通讯录</block>
  17. <block slot="right">
  18. <view class="plus" @tap="" data-target="viewModal">+</view>
  19. </block>
  20. </cu-custom>
  21. <!-- 抽屉组件 -->
  22. <div>
  23. <drawer ref="drawer"></drawer>
  24. </div>
  25. <div class="plusDrawer" @tap="hideModal">
  26. <plusDrawer ref="plusDrawer"></plusDrawer>
  27. </div>
  28. <!-- 组件左右移动 -->
  29. <!-- 返回组件 -->
  30. <view @click="changeState()">
  31. <cu-custom bgColor="bg-gradual-sisBlack" :isBack="true" v-show="but2" >
  32. <block slot="backText">
  33. <view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view>
  34. </block>
  35. <block slot="content">
  36. <view style="color: silver;">聊天通讯</view>
  37. </block>
  38. </cu-custom>
  39. </view> -->
  40. <!--<view class="cu-bar bg-white" v-show="but2" style="z-index: 9999;" @tap="common.navTo('/components/mine/addressBook/addressBook')">
  41. <view class="action">
  42. <text class="cuIcon-back text-white" style="font-size: 15px;"></text>
  43. <text style=" color: silver;">返回</text>
  44. </view>
  45. <view class="content text-white">
  46. 通讯录
  47. </view>
  48. </view>-->
  49. <scroll-view @tap="" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
  50. <view v-if="judge==1">
  51. <!-- 搜索标签 -->
  52. <view class="cu-bar bg-white search" style="z-index: 999999;">
  53. <!-- :style="[{top:CustomBar + 'px'}]" -->
  54. <view class="search-form round" @touchstart="accordingTo">
  55. <text class="cuIcon-search"></text>
  56. <input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="search"></input>
  57. </view>
  58. <view class="action" >
  59. <button class="cu-btn bg-gradual-sisBlack shadow-blur round" style="width:200upx;top: 0px; margin-top: 3%;" @click="accordingOut">取消</button>
  60. </view>
  61. </view>
  62. <!-- 搜索列表 -->
  63. <view class="search-content " ref="search">
  64. <block>
  65. <view class="cu-list menu-avatar no-padding">
  66. <!-- <view class="cu-avatar">{{item.name}}</view> 字母开头显示 -->
  67. <!-- 将汉字以当前字母开头的遍历 -->
  68. <view class="cu-item " v-for="item in userListData">
  69. <view v-if="item.remak1==1">
  70. <view class="content" @click="go(userid,lastUserName,items.nickname,items.id,1)">
  71. <view class="text-grey">{{item.username}}({{item.remak2}})
  72. <!-- <text class="text-abc">{{items.name}}</text>君 -->
  73. </view>
  74. <view class="text-gray text-sm" v-text="displayTheData(item.id)">
  75. </view>
  76. </view>
  77. <!-- 在线离线标识 -->
  78. <text class="cuIcon-radioboxfill text-green" style="margin-right: 3px;">在线</text>
  79. </view>
  80. <view v-if="item.remak1==0">
  81. <view class="content" @click="go(userid,lastUserName,item.nickname,item.id,0)">
  82. <view class="text-grey">{{item.username}}({{item.remak2}})
  83. <!-- <text class="text-abc">{{items.name}}</text>君 -->
  84. </view>
  85. <view class="text-gray text-sm" v-text="displayTheData(item.id)">
  86. </view>
  87. </view>
  88. <text class="cuIcon-radioboxfill text-gray" style="margin-right: 3px;">离线</text>
  89. </view>
  90. </view>
  91. </view>
  92. <!-- <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
  93. <view class="padding"></view>
  94. <view class="cu-list menu-avatar no-padding" >
  95. <view class="cu-item" @tap="common.navTo('/components/mine/addressBook/chat?name='+item+'&send='+send+'&receive='+receive+'&sendname='+sendname+'&receivename='+receivename)">
  96. <view class="cu-avatar round lg"></view>
  97. <view class="content" >
  98. <view class="text-grey">{{item.name}}</view>
  99. </view>
  100. </view>
  101. </view>
  102. </view> -->
  103. </block>
  104. </view>
  105. <!-- 通讯列表 -->
  106. <scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
  107. :scroll-with-animation="true" :enable-back-to-top="true" v-if="play">
  108. <!-- <block v-for="(item,index) in list" :key="index"> -->
  109. <!-- 控制侧导航栏 -->
  110. <!-- <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name"> -->
  111. <!-- <view class="padding">{{item.name}}</view> -->
  112. <view class="cu-list menu-avatar no-padding">
  113. <!-- <view class="cu-avatar">{{item.name}}</view> 字母开头显示 -->
  114. <!-- 将汉字以当前字母开头的遍历 -->
  115. <view class="cu-item" v-for="(items,sub) in userList" :key="sub">
  116. <view v-if="items.remak1==1">
  117. <view class="content" @click="go(userid,lastUserName,items.nickname,items.id,1)">
  118. <view class="text-grey">{{items.username}}({{items.remak2}})
  119. <!-- <text class="text-abc">{{items.name}}</text>君 -->
  120. </view>
  121. <view class="text-gray text-sm" v-text="displayTheData(items.id)">
  122. </view>
  123. </view>
  124. <!-- 在线标识 -->
  125. <text class="cuIcon-radioboxfill text-green" style="margin-right: 3px;">在线</text>
  126. </view>
  127. <view v-if="items.remak1==0">
  128. <view class="content" @click="go(userid,lastUserName,items.nickname,items.id,0)">
  129. <view class="text-grey">{{items.username}}({{items.remak2}})
  130. <!-- <text class="text-abc">{{items.name}}</text>君 -->
  131. </view>
  132. <view class="text-gray text-sm" v-text="displayTheData(items.id)">
  133. </view>
  134. </view>
  135. <!-- 离线标识 -->
  136. <text class="cuIcon-radioboxfill text-gray" style="margin-right: 3px;">离线</text>
  137. </view>
  138. </view>
  139. </view>
  140. <!-- </view>
  141. </block> -->
  142. </scroll-view>
  143. <!-- 侧导航栏 -->
  144. <!-- <view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
  145. <view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
  146. <view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
  147. </view>
  148. </view> -->
  149. <!--选择显示 keyword-->
  150. <view v-show="!hidden" class="indexToast">
  151. <!-- {{listCur}} -->
  152. </view>
  153. </view>
  154. </scroll-view>
  155. <initial ref="mychild"></initial>
  156. </view>
  157. </template>
  158. <script>
  159. import pinyin from './index.js';
  160. import initial from './InitializeThe.vue';
  161. import res from '../../../common/data.json';
  162. import drawer from '../../../components/drawer/threeLineDrawer.vue'
  163. import plusDrawer from '../../../components/drawer/plusDrawer.vue';
  164. import mine from '../../../components/mine/Mine.vue';
  165. import chatindex from '../../../components/mine/chat/Chatindex.vue';
  166. var wv;
  167. export default {
  168. components: {
  169. initial: initial,
  170. drawer: drawer,
  171. plusDrawer: plusDrawer,
  172. mine: mine,
  173. chatindex: chatindex
  174. },
  175. data() {
  176. return {
  177. content1: '',
  178. but1: true,
  179. but2: false,
  180. userid: '',
  181. lastUserName: '',
  182. StatusBar: this.StatusBar,
  183. CustomBar: this.CustomBar,
  184. listCurID: '',
  185. list: [],
  186. listCur: '',
  187. send: '1',
  188. receive: '2',
  189. hidden: true,
  190. play: true,
  191. sendname: 'ming',
  192. receivename: 'fang',
  193. search: '',
  194. timer: null,
  195. userList: {
  196. id: '',
  197. nickname: '',
  198. password: '',
  199. remak1: '',
  200. username: '',
  201. remak2: '',
  202. },
  203. biaos: 2,
  204. socketTask_getUserList: '',
  205. inconList: ["form", "favor", "question", "edit"],
  206. drawerList: [{
  207. "name": "聊天通讯"
  208. }, ],
  209. leftNavigationtitle: '我的功能分组',
  210. badge: 22,
  211. address: '',
  212. modalName: null,
  213. plusDrawerList: [],
  214. toggleid: 12,
  215. plusDrawerList: [],
  216. judge: 1,
  217. LastStatement: {
  218. content: '',
  219. receive: '',
  220. send: '',
  221. time: '',
  222. type: '',
  223. },
  224. webshowid:0,
  225. };
  226. },
  227. created: function() {
  228. this.getUserList();
  229. this.drawerList = uni.getStorageSync('leftlist5');
  230. /* this.pinyin(); */
  231. },
  232. mounted() {
  233. this.getUserList();
  234. this.initial();
  235. },
  236. onLoad() {
  237. let list = [{}];
  238. for (let i = 0; i < 26; i++) {
  239. list[i] = {};
  240. list[i].name = String.fromCharCode(65 + i);
  241. }
  242. this.list = list;
  243. this.listCur = list[0];
  244. },
  245. onHide() {
  246. this.$refs.drawer.closeDrawer();
  247. this.hideModal();
  248. },
  249. onReady() {
  250. let that = this;
  251. /* uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
  252. that.boxTop = res.top
  253. }).exec();
  254. uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
  255. that.barTop = res.top
  256. }).exec(); */
  257. /*
  258. this.pinyin(); */
  259. },
  260. computed: {
  261. sisStageIp: function() {
  262. return this.$store.state.wholeSituationBackStageIp;
  263. },
  264. sisStagePort: function() {
  265. return this.$store.state.wholeSituationBackStagePort;
  266. },
  267. backStageIp: function() {
  268. return this.$store.state.GlobalLocalIp;
  269. },
  270. backStagePort: function() {
  271. return this.$store.state.GlobalLocalPort;
  272. },
  273. windpowerstationNameToId: function() {
  274. return this.$store.state.windpowerstationNameToId;
  275. },
  276. userListData: function() {
  277. var search = this.search;
  278. if (!this.search) {
  279. return [];
  280. } else if (search) {
  281. return this.userList.filter(function(userList) {
  282. return Object.keys(userList).some(function(key) {
  283. return String(userList[key]).toLowerCase().indexOf(search) > -1
  284. })
  285. })
  286. }
  287. return this.products;
  288. },
  289. hasNoData() {
  290. return !this.list.length
  291. }
  292. },
  293. methods: {
  294. initial() {
  295. let userid = uni.getStorageSync('userid');
  296. this.theLastStatement(userid);
  297. },
  298. displayTheData(id) {
  299. // this.theLastStatement(id);
  300. // console.log(this.LastStatement);
  301. // if(this.LastStatement[0].type=="pic"){
  302. // return "[图片]";
  303. // }else{
  304. // return this.LastStatement[0].content;
  305. // }
  306. for (var i = 0; i < this.LastStatement.length; i++) {
  307. if (this.LastStatement[i].receive== id) {
  308. if(this.LastStatement[i].type=="pic"){
  309. return "[图片]";
  310. }else{
  311. return this.LastStatement[i].content;
  312. }
  313. }
  314. };
  315. },
  316. changeState() {
  317. console.log("更改状态")
  318. this.child(this.webshowid,null,0);
  319. this.but1 = true;
  320. this.but2 = false;
  321. this.judge = 1;
  322. //wv.hide();
  323. //this.$set(this.judge,judge,1);
  324. },
  325. showModal(e) {
  326. this.modalName = e.currentTarget.dataset.target;
  327. this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
  328. },
  329. hideModal() {
  330. this.modalName = null;
  331. this.$refs.plusDrawer.hideModal(this.modalName);
  332. },
  333. falseLogin: function() {
  334. this.removeUsernamePassword();
  335. uni.navigateTo({
  336. url: '/components/login/Login'
  337. });
  338. },
  339. openDrawer: function() {
  340. if (this.$refs.drawer != undefined) {
  341. this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList, this.leftNavigationtitle);
  342. } else {
  343. }
  344. },
  345. closeDrawer: function() {
  346. this.drawerIsShow = false;
  347. },
  348. viewUserid: function() {
  349. this.plusDrawerList = uni.getStorageSync('plusList');
  350. },
  351. monitoringAuthority: function() {
  352. this.drawerList = uni.getStorageSync('leftlist5');
  353. },
  354. go(userid, lastUserName, nickname, id, bool) {
  355. let _this = this;
  356. /* if(bool==0){
  357. window.location.href="https://192.168.1.102:4397/websocket/usercontroller/viewoffline?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
  358. }
  359. if(bool==1){
  360. window.location.href="https://192.168.1.102:4397/websocket/usercontroller/view?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
  361. } */
  362. this.but1 = false;
  363. this.but2 = true;
  364. this.child(id, bool,1);
  365. /*
  366. let _this=this;
  367. if(bool==0){
  368. window.location.href="https://192.168.1.102:4397/websocket/usercontroller/viewoffline?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
  369. }
  370. if(bool==1){
  371. window.location.href="https://192.168.1.102:4397/websocket/usercontroller/view?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
  372. }
  373. */
  374. },
  375. child(id,bool,state) {
  376. this.$refs.mychild.childMethod(id,bool,state);
  377. this.webshowid=id;
  378. this.judge = 0;
  379. },
  380. accordingOut() {
  381. this.play = true;
  382. this.search = '';
  383. },
  384. accordingTo() {
  385. this.play = false;
  386. },
  387. pinyin(str) {
  388. var l = pinyin.getSpell(str).substring(0, 1);
  389. console.log(l);
  390. },
  391. /* handleCityClick (city) {
  392. this.changeCity(city)
  393. this.$router.push('/')
  394. }, */
  395. closeFrame: function() {
  396. this.count = this.count + 1;
  397. if (this.isFrameShow) {
  398. this.isFrameShow = false;
  399. this.sanJiao = 'sanJiaoDown';
  400. }
  401. },
  402. async getUserList() {
  403. let _this = this;
  404. // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
  405. this.socketTask_getUserList = uni.connectSocket({
  406. // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
  407. url: 'ws://' + this.sisStageIp + ':' + this.sisStagePort + '/websocket/pageNumber_4/functionNumber_3/all',
  408. success(data) {
  409. console.log(data);
  410. }
  411. });
  412. /* let windpowerstationid = uni.getStorageSync('windpowerstationName'); */
  413. // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
  414. this.socketTask_getUserList.onOpen(res => {
  415. console.log('WebSocket连接正常打开中...!');
  416. this.is_open_socket = true;
  417. // 注:只有连接正常打开中 ,才能正常收到消息
  418. this.socketTask_getUserList.onMessage(res => {
  419. /* _this.windpowerstationdetail.getUserList = JSON.parse(res.data); */
  420. _this.lastUserName = uni.getStorageSync('gyeeusername');
  421. _this.userid = uni.getStorageSync('userid');
  422. let templist=JSON.parse(res.data);
  423. _this.userList=[];
  424. for (var i = 0; i < templist.length; i++) {
  425. if(templist[i].id!=_this.userid)
  426. {
  427. _this.userList.push(templist[i]);
  428. }
  429. };
  430. //_this.userList = JSON.parse(res.data);
  431. });
  432. });
  433. },
  434. //获取最后一条语句 '/websocket/chatDetailController/selectLastInfoByUserId?userid='+id
  435. async theLastStatement(id) {
  436. let _this = this;
  437. uni.request({
  438. url: 'http://' + this.sisStageIp + ':' + this.sisStagePort +
  439. '/chatDetailController/selectLastInfoByUserId?userid=' + id,
  440. data: {},
  441. method: 'GET',
  442. success: function(res) {
  443. _this.LastStatement = res.data;
  444. },
  445. fail: () => {
  446. _this.tips = '网络错误,小程序端请检查合法域名';
  447. },
  448. });
  449. },
  450. //获取文字信息
  451. getCur(e) {
  452. this.hidden = false;
  453. this.listCur = this.list[e.target.id].name;
  454. },
  455. setCur(e) {
  456. this.hidden = true;
  457. this.listCur = this.listCur
  458. },
  459. //滑动选择Item
  460. tMove(e) {
  461. let y = e.touches[0].clientY,
  462. offsettop = this.boxTop,
  463. that = this;
  464. //判断选择区域,只有在选择区才会生效
  465. if (y > offsettop) {
  466. let num = parseInt((y - offsettop) / 20);
  467. this.listCur = that.list[num].name
  468. };
  469. },
  470. //触发全部开始选择
  471. tStart() {
  472. this.hidden = false
  473. },
  474. //触发结束选择
  475. tEnd() {
  476. this.hidden = true;
  477. this.listCurID = this.listCur
  478. },
  479. indexSelect(e) {
  480. let that = this;
  481. let barHeight = this.barHeight;
  482. let list = this.list;
  483. let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
  484. for (let i = 0; i < list.length; i++) {
  485. if (scrollY < i + 1) {
  486. that.listCur = list[i].name;
  487. that.movableY = i * 20
  488. return false
  489. }
  490. }
  491. }
  492. },
  493. }
  494. </script>
  495. <style>
  496. body {
  497. font-family: '方正兰亭细黑_GBK';
  498. font-size: 20px;
  499. color: silver;
  500. background: #000;
  501. }
  502. @font-face {
  503. font-family: '方正兰亭细黑_GBK';
  504. src: url(../../../static/fzltxh.TTF);
  505. }
  506. page {
  507. background-color: #1f1f1f;
  508. font-family: '方正兰亭细黑_GBK';
  509. overflow-x: hidden;
  510. }
  511. .indexes {
  512. position: relative;
  513. }
  514. .indexBar {
  515. position: fixed;
  516. right: 0px;
  517. bottom: 0px;
  518. padding: 20upx 20upx 20upx 60upx;
  519. display: flex;
  520. align-items: center;
  521. }
  522. .indexBar .indexBar-box {
  523. width: 40upx;
  524. height: auto;
  525. background: #fff;
  526. display: flex;
  527. flex-direction: column;
  528. box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  529. border-radius: 10upx;
  530. }
  531. .indexBar-item {
  532. flex: 1;
  533. width: 40upx;
  534. height: 40upx;
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. font-size: 24upx;
  539. color: #888;
  540. }
  541. movable-view.indexBar-item {
  542. width: 40upx;
  543. height: 40upx;
  544. z-index: 9;
  545. position: relative;
  546. }
  547. movable-view.indexBar-item::before {
  548. content: "";
  549. display: block;
  550. position: absolute;
  551. left: 0;
  552. top: 10upx;
  553. height: 20upx;
  554. width: 4upx;
  555. background-color: #f37b1d;
  556. }
  557. .indexToast {
  558. position: fixed;
  559. top: 0;
  560. right: 80upx;
  561. bottom: 0;
  562. background: rgba(0, 0, 0, 0.5);
  563. width: 100upx;
  564. height: 100upx;
  565. border-radius: 10upx;
  566. margin: auto;
  567. color: #fff;
  568. line-height: 100upx;
  569. text-align: center;
  570. font-size: 48upx;
  571. }
  572. .bg-white {
  573. background-color: #242424;
  574. }
  575. .cu-list,
  576. .menu-avatar>.cu-item {
  577. background-color: #242424;
  578. }
  579. .cu-avatar {
  580. height: 20px;
  581. width: 20px;
  582. }
  583. .mar_t {
  584. margin-top: 50px;
  585. }
  586. .text-grey {
  587. margin-top: -10px;
  588. }
  589. .plus {
  590. width: 30px;
  591. height: 45px;
  592. float: right;
  593. color: white;
  594. font-size: 35px;
  595. line-height: 45px;
  596. text-align: right;
  597. margin-right: 2.5%;
  598. }
  599. .top {
  600. width: 100%;
  601. height: 130upx;
  602. padding-top: 5upx;
  603. background-color: #1f1f1f;
  604. position: fixed;
  605. top: 0px;
  606. left: 0px;
  607. z-index: 100;
  608. }
  609. .threeLine {
  610. width: 50px;
  611. height: 45px;
  612. float: left;
  613. }
  614. .text {
  615. width: calc(100% - 100px);
  616. height: 45px;
  617. float: left;
  618. user-select: text;
  619. -webkit-user-select: text;
  620. -moz-user-select: text;
  621. -ms-user-select: text;
  622. color: silver;
  623. line-height: 45px;
  624. margin-top: 11px;
  625. font-size: 18px;
  626. }
  627. .DrawerPage {
  628. position: fixed;
  629. width: 100vw;
  630. height: 100vh;
  631. left: 0vw;
  632. background-color: #1f1f1f;
  633. transition: all 0.4s;
  634. }
  635. .DrawerPage.show {
  636. transform: scale(0.9, 0.9);
  637. left: 85vw;
  638. box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
  639. transform-origin: 0;
  640. }
  641. .DrawerPage .cu-bar.tabbar .action button.cuIcon {
  642. width: 64upx;
  643. height: 64upx;
  644. }
  645. .DrawerPage .cu-bar.tabbar .action .cu-avatar {
  646. margin: 0;
  647. }
  648. .DrawerPage .nav {
  649. flex: 1;
  650. }
  651. .DrawerPage .nav .cu-item.cur {
  652. border-bottom: 0;
  653. position: relative;
  654. }
  655. .DrawerPage .nav .cu-item.cur::after {
  656. content: '';
  657. width: 10upx;
  658. height: 10upx;
  659. background-color: currentColor;
  660. position: absolute;
  661. bottom: 10upx;
  662. border-radius: 10upx;
  663. left: 0;
  664. right: 0;
  665. margin: auto;
  666. }
  667. .DrawerPage .cu-bar.tabbar .action {
  668. flex: initial;
  669. }
  670. .display-block {
  671. display: block;
  672. z-index: 99999;
  673. }
  674. .display-none {
  675. display: none;
  676. z-index: -1;
  677. }
  678. </style>