日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
鴻蒙js開發(fā)7鴻蒙分組列表和彈出Menu菜單

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

任正非：現(xiàn)在華為必須全面靠自己打造產(chǎn)品，要敢于將鴻蒙推入競(jìng)爭(zhēng)，星光不問趕路人,時(shí)光不負(fù)有心人。

1.鴻蒙視圖效果

點(diǎn)擊menu菜單一項(xiàng)，跳轉(zhuǎn)頁(yè)面，底部菜單欄和輪播布局和輪播圖

2.js業(yè)務(wù)數(shù)據(jù)和事件

 
 
 
 
    
  
  
  
  
  1. import prompt from '@system.prompt';
    2. 
  
  
  
  
  2. import router from '@system.router';
    3. 
  
  
  
  
  3. export default {
    4. 
  
  
  
  
  4.     data: {
    5. 
  
  
  
  
  5.         title: 'World',
    6. 
  
  
  
  
  6.         fundatas:[{"fathermenu":"員工管理","childmenu":[{"icon":"/common/emp.png","text":"查詢員工"},{"icon":"/common/emp.png","text":"添加員工"},{"icon":"/common/emp.png","text":"刪除員工"},{"icon":"/common/emp.png","text":"更新員工"}]},
    7. 
  
  
  
  
  7.                   {"fathermenu":"客戶服務(wù)","childmenu":[{"icon":"/common/customer.png","text":"一卡通兌"},{"icon":"/common/customer.png","text":"銀聯(lián)服務(wù)"},{"icon":"/common/customer.png","text":"票據(jù)業(yè)務(wù)"}]},
    8. 
  
  
  
  
  8.                   {"fathermenu":"內(nèi)部管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
    9. 
  
  
  
  
  9.                   {"fathermenu":"合同管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
    10. 
  
  
  
  
  10.                   {"fathermenu":"資產(chǎn)管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
    11. 
  
  
  
  
  11.                   {"fathermenu":"績(jī)效管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
    12. 
  
  
  
  
  12.         ]
    13. 
  
  
  
  
  13.     },
    14. 
  
  
  
  
  14.     clickitem(itemvalue)
    15. 
  
  
  
  
  15.     {
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         if(itemvalue=="查詢員工")
    18. 
  
  
  
  
  18.         {
    19. 
  
  
  
  
  19.             this.$element("menu").show({
    20. 
  
  
  
  
  20.                 x: 360,
    21. 
  
  
  
  
  21.                 y: 120
    22. 
  
  
  
  
  22.             });
    23. 
  
  
  
  
  23.             //this.$element("menu").show();
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.         }
    26. 
  
  
  
  
  26.         prompt.showToast({
    27. 
  
  
  
  
  27.             message:"點(diǎn)擊了菜單"+itemvalue
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.         })
    30. 
  
  
  
  
  30.     },
    31. 
  
  
  
  
  31.     menuSelected(e) {
    32. 
  
  
  
  
  32.         prompt.showToast({
    33. 
  
  
  
  
  33.             message:"你選擇查詢的值是:"+e.value
    34. 
  
  
  
  
  34.         })
    35. 
  
  
  
  
  35. 
  
  
  
  
  36.         router.push({
    37. 
  
  
  
  
  37.             uri:"pages/index/index"
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.         })
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. 
  
  
  
  
  42.     }
    43. 
  
  
  
  
  43. }
    44.

 3.頁(yè)面視圖代碼

  
 
 
 
    
   
  
  
  
    2. 
   
  
  
  
  2.     
    3. 
   
  
  
  
  3.     
    4. 
   
  
  
  
  4.        
    5. 
   
  
  
  
  5.            
    6. 
   
  
  
  
  6.                
    7. 
   
  
  
  
  7.                    {{$item.fathermenu}}
    8. 
   
  
  
  
  8.                
    9. 
   
  
  
  
  9.                
    10. 
   
  
  
  
  10.                  
    11. 
   
  
  
  
  11.                     
    12. 
   
  
  
  
  12.                     {{value.text}}
    13. 
   
  
  
  
  13.                  
    14. 
   
  
  
  
  14.                
    15. 
   
  
  
  
  15.            
    16. 
   
  
  
  
  16.        
    17. 
   
  
  
  
  17.        
    18. 
   
  
  
  
  18.     
    19. 
   
  
  
  
  19.     
    20. 
   
  
  
  
  20.     
    21. 
   
  
  
  
  21. 
   
  
  
  
  22. 
   
  
  
  
  23.     
    24. 
   
  
  
  
  24.         
    25. 
   
  
  
  
  25.             男性員工
    26. 
   
  
  
  
  26.         
    27. 
   
  
  
  
  27.         
    28. 
   
  
  
  
  28.             女性員工
    29. 
   
  
  
  
  29.         
    30. 
   
  
  
  
  30. 
   
  
  
  
  31.     
    32.

 4.樣式代碼

 
 
 
 
    
  
  
  
  
  1. .container {
    2. 
  
  
  
  
  2.     width: 100%;
    3. 
  
  
  
  
  3.     height: 1200px;
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. .listview{
    6. 
  
  
  
  
  6.     width: 100%;
    7. 
  
  
  
  
  7.     height: 100%;
    8. 
  
  
  
  
  8. }
    9. 
  
  
  
  
  9. .groupview{
    10. 
  
  
  
  
  10.     width: 100%;
    11. 
  
  
  
  
  11.     height: 46%;
    12. 
  
  
  
  
  12.     border-bottom: 5px solid  #DCDCDC;
    13. 
  
  
  
  
  13. }
    14. 
  
  
  
  
  14. .listitem{
    15. 
  
  
  
  
  15.     width: 100%;
    16. 
  
  
  
  
  16.     height: 20%;
    17. 
  
  
  
  
  17.     display: flex;
    18. 
  
  
  
  
  18.     justify-content: space-around;
    19. 
  
  
  
  
  19. }
    20. 
  
  
  
  
  20. .listitemone {
    21. 
  
  
  
  
  21.     width: 50%;
    22. 
  
  
  
  
  22.     height: 6%;
    23. 
  
  
  
  
  23.     border-bottom: 1px  solid  #DCDCDC;
    24. 
  
  
  
  
  24.     display: flex;
    25. 
  
  
  
  
  25.     justify-content: space-around;
    26. 
  
  
  
  
  26. }
    27. 
  
  
  
  
  27. 
  
  
  
  
  28. .cimg{
    29. 
  
  
  
  
  29.     width: 40px;
    30. 
  
  
  
  
  30.     height: 40px;
    31. 
  
  
  
  
  31. }
    32. 
  
  
  
  
  32. .tv1{
    33. 
  
  
  
  
  33.     font-size: 35px;
    34. 
  
  
  
  
  34.     font-weight: bold;
    35. 
  
  
  
  
  35.     font-family: sans-serif;
    36. 
  
  
  
  
  36.     letter-spacing: 10px;
    37. 
  
  
  
  
  37. }
    38. 
  
  
  
  
  38. .tv2{
    39. 
  
  
  
  
  39.     font-size: 34px;
    40. 
  
  
  
  
  40.     font-weight: bold;
    41. 
  
  
  
  
  41.     font-family: sans-serif;
    42. 
  
  
  
  
  42. }
    43.

 5.跳轉(zhuǎn)頁(yè)面后的視圖層

    
 
 
 
    
     
  
  
  
    2. 
     
  
  
  
  2.     
    3. 
     
  
  
  
  3.         
    4. 
     
  
  
  
  4.             
    5. 
     
  
  
  
  5.                 
    6. 
     
  
  
  
  6.                     
    7. 
     
  
  
  
  7.                 
  •                 
  •                     
  •                 
  •                 
  •                     
  •                 
  •             
  •             
  •                      
  •                        1.鴻蒙
  •                      
  •                      
  •                          2.蘋果
  •                      
  •                      
  •                          3.安卓
  •                      
  •             
  •         
  •         
  •             
  •                 
  •                     {{$item.title}}
  •                     {{$item.date}}
  •                 
  •             
  •         
  •         
  •             
  •                 
  •                     推薦
  •                     視頻
  •                     本地
  •                     內(nèi)容
  •                 
  •                 
  •                     
  •                         
  •                                 {{weatherInfo.city}}
  •                                  
  •                                     {{winfo.info}}
  •                                      {{winfo.direct}}
  •                                      {{winfo.power}}
  •                                  
  •                         
  •                         
  •                         
  •                     
  •                     
  •                         第二個(gè)
  •                     
  •                     
  •                         第三個(gè)
  •                     
  •                     
  •                         第四個(gè)
  •                     
  •                 
  •             
  •         
  •         
  •             第四幅
  •         
  •     
  •     
  •         
  •             
  •            {{$item.menu}}
  •         
  •     

  •  6.js業(yè)務(wù)邏輯部分

     
 
 
 
      
  
  
  
  
    1. import   fetch  from '@system.fetch';
      2. 
  
  
  
  
    2. export default {
      3. 
  
  
  
  
    3.     data: {
      4. 
  
  
  
  
    4. 
  
  
  
  
    5.         weatherInfo:{},
      6. 
  
  
  
  
    6.         winfo:{},
      7. 
  
  
  
  
    7.         nextInfo:[],
      8. 
  
  
  
  
    8.         currentdata:0,
      9. 
  
  
  
  
    9.         title: "",
      10. 
  
  
  
  
    10.         menus:[{menu:"首頁(yè)","path":"./common/ones.png","path1":"./common/oneu.png"},
      11. 
  
  
  
  
    11.                {menu:"分類","path":"./common/cs.png","path1":"./common/cu.png"},
      12. 
  
  
  
  
    12.                {menu:"內(nèi)容","path":"./common/cons.png","path1":"./common/conu.png"},
      13. 
  
  
  
  
    13.                {menu:"我的","path":"./common/mys.png","path1":"./common/myu.png"}],
      14. 
  
  
  
  
    14.        todolist: [{
      15. 
  
  
  
  
    15.       title: '刷leetcode',
      16. 
  
  
  
  
    16.       date: '2020-06-25 10:00:00',
      17. 
  
  
  
  
    17.     }, {
      18. 
  
  
  
  
    18.       title: '看電影',
      19. 
  
  
  
  
    19.       date: '2020-06-27 20:00:00',
      20. 
  
  
  
  
    20.     },
      21. 
  
  
  
  
    21.                   {
      22. 
  
  
  
  
    22.                       title: '刷leetcode',
      23. 
  
  
  
  
    23.                       date: '2020-06-25 10:00:00',
      24. 
  
  
  
  
    24.                   }, {
      25. 
  
  
  
  
    25.                       title: '看電影',
      26. 
  
  
  
  
    26.                       date: '2020-06-27 20:00:00',
      27. 
  
  
  
  
    27.                   },{
      28. 
  
  
  
  
    28.                       title: '刷leetcode',
      29. 
  
  
  
  
    29.                       date: '2020-06-25 10:00:00',
      30. 
  
  
  
  
    30.                   }, {
      31. 
  
  
  
  
    31.                       title: '看電影',
      32. 
  
  
  
  
    32.                       date: '2020-06-27 20:00:00',
      33. 
  
  
  
  
    33.                   },{
      34. 
  
  
  
  
    34.                       title: '刷leetcode',
      35. 
  
  
  
  
    35.                       date: '2020-06-25 10:00:00',
      36. 
  
  
  
  
    36.                   }, {
      37. 
  
  
  
  
    37.                       title: '看電影',
      38. 
  
  
  
  
    38.                       date: '2020-06-27 20:00:00',
      39. 
  
  
  
  
    39.                   },
      40. 
  
  
  
  
    40.                   {
      41. 
  
  
  
  
    41.                       title: '刷leetcode',
      42. 
  
  
  
  
    42.                       date: '2020-06-25 10:00:00',
      43. 
  
  
  
  
    43.                   }, {
      44. 
  
  
  
  
    44.                       title: '看電影',
      45. 
  
  
  
  
    45.                       date: '2020-06-27 20:00:00',
      46. 
  
  
  
  
    46.                   },
      47. 
  
  
  
  
    47.                   {
      48. 
  
  
  
  
    48.                       title: '刷leetcode',
      49. 
  
  
  
  
    49.                       date: '2020-06-25 10:00:00',
      50. 
  
  
  
  
    50.                   }, {
      51. 
  
  
  
  
    51.                       title: '看電影',
      52. 
  
  
  
  
    52.                       date: '2020-06-27 20:00:00',
      53. 
  
  
  
  
    53.                   },{
      54. 
  
  
  
  
    54.                       title: '刷leetcode',
      55. 
  
  
  
  
    55.                       date: '2020-06-25 10:00:00',
      56. 
  
  
  
  
    56.                   }, {
      57. 
  
  
  
  
    57.                       title: '看電影',
      58. 
  
  
  
  
    58.                       date: '2020-06-27 20:00:00',
      59. 
  
  
  
  
    59.                   },{
      60. 
  
  
  
  
    60.                       title: '刷leetcode',
      61. 
  
  
  
  
    61.                       date: '2020-06-25 10:00:00',
      62. 
  
  
  
  
    62.                   }, {
      63. 
  
  
  
  
    63.                       title: '看電影',
      64. 
  
  
  
  
    64.                       date: '2020-06-27 20:00:00',
      65. 
  
  
  
  
    65.                   },{
      66. 
  
  
  
  
    66.                       title: '刷leetcode',
      67. 
  
  
  
  
    67.                       date: '2020-06-25 10:00:00',
      68. 
  
  
  
  
    68.                   }, {
      69. 
  
  
  
  
    69.                       title: '看電影',
      70. 
  
  
  
  
    70.                       date: '2020-06-27 20:00:00',
      71. 
  
  
  
  
    71.                   },
      72. 
  
  
  
  
    72.                   {
      73. 
  
  
  
  
    73.                       title: '刷leetcode',
      74. 
  
  
  
  
    74.                       date: '2020-06-25 10:00:00',
      75. 
  
  
  
  
    75.                   }, {
      76. 
  
  
  
  
    76.                       title: '看電影',
      77. 
  
  
  
  
    77.                       date: '2020-06-27 20:00:00',
      78. 
  
  
  
  
    78.                   },{
      79. 
  
  
  
  
    79.                       title: '刷leetcode',
      80. 
  
  
  
  
    80.                       date: '2020-06-25 10:00:00',
      81. 
  
  
  
  
    81.                   }, {
      82. 
  
  
  
  
    82.                       title: '看電影',
      83. 
  
  
  
  
    83.                       date: '2020-06-27 20:00:00',
      84. 
  
  
  
  
    84.                   },{
      85. 
  
  
  
  
    85.                       title: '刷leetcode',
      86. 
  
  
  
  
    86.                       date: '2020-06-25 10:00:00',
      87. 
  
  
  
  
    87.                   }, {
      88. 
  
  
  
  
    88.                       title: '看電影',
      89. 
  
  
  
  
    89.                       date: '2020-06-27 20:00:00',
      90. 
  
  
  
  
    90.                   }
      91. 
  
  
  
  
    91. 
  
  
  
  
    92.        ]
      93. 
  
  
  
  
    93.     },
      94. 
  
  
  
  
    94.     onInit() {
      95. 
  
  
  
  
    95.        // this.title = this.$t('strings.world');
      96. 
  
  
  
  
    96. 
  
  
  
  
    97.         let  that  =this;
      98. 
  
  
  
  
    98.         fetch.fetch({
      99. 
  
  
  
  
    99.             url:"http://apis.juhe.cn/simpleWeather/query?city=南京&key=3dc98f3428c44424088015738a070554",
      100. 
  
  
  
  
    100.             responseType:"json",
      101. 
  
  
  
  
    101.             success:function(resp)
      102. 
  
  
  
  
    102.             {
      103. 
  
  
  
  
    103.                 let  currentValue=JSON.parse(resp.data);
      104. 
  
  
  
  
    104.                 that.weatherInfo=currentValue.result;
      105. 
  
  
  
  
    105.                 that.winfo=currentValue.result.realtime;
      106. 
  
  
  
  
    106.                // that.nextInfo=currentValue.future;
      107. 
  
  
  
  
    107.             }
      108. 
  
  
  
  
    108. 
  
  
  
  
    109.         })
      110. 
  
  
  
  
    110.     },
      111. 
  
  
  
  
    111.     changemenu(index)
      112. 
  
  
  
  
    112.     {
      113. 
  
  
  
  
    113.         this.currentdata=index;
      114. 
  
  
  
  
    114.         this.$element('swiper').swipeTo({index: index});
      115. 
  
  
  
  
    115. 
  
  
  
  
    116.     }
      117. 
  
  
  
  
    117. }
      118.

     7.樣式代碼

     
 
 
 
      
  
  
  
  
    1. .pageview{
      2. 
  
  
  
  
    2.     width: 100%;
      3. 
  
  
  
  
    3.     height: 1600px;
      4. 
  
  
  
  
    4.     background-color: azure;
      5. 
  
  
  
  
    5. }
      6. 
  
  
  
  
    6. .bottommenu{
      7. 
  
  
  
  
    7.     width: 100%;
      8. 
  
  
  
  
    8.     height: 140px;
      9. 
  
  
  
  
    9.     background-color: snow;
      10. 
  
  
  
  
    10.     border-top: 10px  solid  black;
      11. 
  
  
  
  
    11.     z-index:999;
      12. 
  
  
  
  
    12.     position: fixed;
      13. 
  
  
  
  
    13.     left: 0px;
      14. 
  
  
  
  
    14.     bottom: 0px;
      15. 
  
  
  
  
    15.     display: flex;
      16. 
  
  
  
  
    16.     justify-content: center;
      17. 
  
  
  
  
    17.     align-items: center;
      18. 
  
  
  
  
    18. }
      19. 
  
  
  
  
    19. .menubox{
      20. 
  
  
  
  
    20. 
  
  
  
  
    21.     width: 22%;
      22. 
  
  
  
  
    22.     height: 90%;
      23. 
  
  
  
  
    23.     /**border:9px  solid  #ccff6a;**/
      24. 
  
  
  
  
    24.     margin-left: 20px;
      25. 
  
  
  
  
    25.     display: flex;
      26. 
  
  
  
  
    26.     flex-direction: column;
      27. 
  
  
  
  
    27.     justify-content: center;
      28. 
  
  
  
  
    28.     align-items: center;
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. .menutitle{
      31. 
  
  
  
  
    31.     color: black;
      32. 
  
  
  
  
    32.     font-weight: bold;
      33. 
  
  
  
  
    33.     letter-spacing: 4px;
      34. 
  
  
  
  
    34. }
      35. 
  
  
  
  
    35. .cimg{
      36. 
  
  
  
  
    36.     width: 40px;
      37. 
  
  
  
  
    37.     height: 40px;
      38. 
  
  
  
  
    38. }
      39. 
  
  
  
  
    39. .swiperview{
      40. 
  
  
  
  
    40.     width: 100%;
      41. 
  
  
  
  
    41.     height: 100%;
      42. 
  
  
  
  
    42. }
      43. 
  
  
  
  
    43. .sw1{
      44. 
  
  
  
  
    44.     width: 100%;
      45. 
  
  
  
  
    45.     height: 100%;
      46. 
  
  
  
  
    46.     display: flex;
      47. 
  
  
  
  
    47.     flex-direction: column;
      48. 
  
  
  
  
    48. }
      49. 
  
  
  
  
    49. .sw2{
      50. 
  
  
  
  
    50.     width: 100%;
      51. 
  
  
  
  
    51.     height: 100%;
      52. 
  
  
  
  
    52.     background-color: cornflowerblue;
      53. 
  
  
  
  
    53. }
      54. 
  
  
  
  
    54. .sw3{
      55. 
  
  
  
  
    55.     width: 100%;
      56. 
  
  
  
  
    56.     height: 100%;
      57. 
  
  
  
  
    57.     background-color: #ccff6a;
      58. 
  
  
  
  
    58. }
      59. 
  
  
  
  
    59. .sw4{
      60. 
  
  
  
  
    60.     width: 100%;
      61. 
  
  
  
  
    61.     height: 100%;
      62. 
  
  
  
  
    62.     background-color: #009865;
      63. 
  
  
  
  
    63. }
      64. 
  
  
  
  
    64. .swiper1 {
      65. 
  
  
  
  
    65. 
  
  
  
  
    66.     width: 100%;
      67. 
  
  
  
  
    67.     height: 330px;
      68. 
  
  
  
  
    68.     border: 1px solid #000000;
      69. 
  
  
  
  
    69.     indicator-color: #cf2411;
      70. 
  
  
  
  
    70.     indicator-size: 14px;
      71. 
  
  
  
  
    71.     indicator-bottom: 20px;
      72. 
  
  
  
  
    72.     indicator-right: 30px;
      73. 
  
  
  
  
    73.     margin-top: 100px;
      74. 
  
  
  
  
    74. }
      75. 
  
  
  
  
    75. .swiperContent1 {
      76. 
  
  
  
  
    76.     width: 800px;
      77. 
  
  
  
  
    77.     height: 100%;
      78. 
  
  
  
  
    78.     justify-content: center;
      79. 
  
  
  
  
    79. }
      80. 
  
  
  
  
    80. .button {
      81. 
  
  
  
  
    81.     width: 70%;
      82. 
  
  
  
  
    82.     margin: 10px;
      83. 
  
  
  
  
    83. }
      84. 
  
  
  
  
    84. .text {
      85. 
  
  
  
  
    85.     font-size: 40px;
      86. 
  
  
  
  
    86. }
      87. 
  
  
  
  
    87. .swiper2{
      88. 
  
  
  
  
    88.     width: 100%;
      89. 
  
  
  
  
    89.     height: 100px;
      90. 
  
  
  
  
    90.     background-color: powderblue;
      91. 
  
  
  
  
    91. }
      92. 
  
  
  
  
    92. .lineview{
      93. 
  
  
  
  
    93.     width: 100%;
      94. 
  
  
  
  
    94.     height: 100%;
      95. 
  
  
  
  
    95. }
      96. 
  
  
  
  
    96. .todo-wraper {
      97. 
  
  
  
  
    97.     width: 100%;
      98. 
  
  
  
  
    98.     height: 100%;
      99. 
  
  
  
  
    99. }
      100. 
  
  
  
  
    100. .todo-item {
      101. 
  
  
  
  
    101.     width: 100%;
      102. 
  
  
  
  
    102.     height: 80px;
      103. 
  
  
  
  
    103.     flex-direction: row;
      104. 
  
  
  
  
    104.     display: flex;
      105. 
  
  
  
  
    105. }
      106. 
  
  
  
  
    106. .todo-title {
      107. 
  
  
  
  
    107.     width: 454px;
      108. 
  
  
  
  
    108.     height: 40px;
      109. 
  
  
  
  
    109.     text-align: center;
      110. 
  
  
  
  
    110. }
      111. 
  
  
  
  
    111. .tabs {
      112. 
  
  
  
  
    112.     width: 100%;
      113. 
  
  
  
  
    113. }
      114. 
  
  
  
  
    114. .tab-bar {
      115. 
  
  
  
  
    115.     margin: 10px;
      116. 
  
  
  
  
    116.     height: 60px;
      117. 
  
  
  
  
    117.     border-color: #007dff;
      118. 
  
  
  
  
    118.     border-width: 1px;
      119. 
  
  
  
  
    119. }
      120. 
  
  
  
  
    120. .tab-text {
      121. 
  
  
  
  
    121.     width: 300px;
      122. 
  
  
  
  
    122.     text-align: center;
      123. 
  
  
  
  
    123. }
      124. 
  
  
  
  
    124. .tabcontent {
      125. 
  
  
  
  
    125.     width: 100%;
      126. 
  
  
  
  
    126.     height: 80%;
      127. 
  
  
  
  
    127.     justify-content: center;
      128. 
  
  
  
  
    128. }
      129. 
  
  
  
  
    129. .item-content {
      130. 
  
  
  
  
    130.     height: 100%;
      131. 
  
  
  
  
    131.     justify-content: center;
      132. 
  
  
  
  
    132.     display: flex;
      133. 
  
  
  
  
    133.     flex-direction: column;
      134. 
  
  
  
  
    134. 
  
  
  
  
    135. 
  
  
  
  
    136. }
      137. 
  
  
  
  
    137. .item-title {
      138. 
  
  
  
  
    138.     font-size: 60px;
      139. 
  
  
  
  
    139. }
      140. 
  
  
  
  
    140. .currentview{
      141. 
  
  
  
  
    141.     width: 100%;
      142. 
  
  
  
  
    142.     height: 30%;
      143. 
  
  
  
  
    143.     border-bottom: 4px  solid  peru;
      144. 
  
  
  
  
    144.     display: flex;
      145. 
  
  
  
  
    145. }
      146. 
  
  
  
  
    146. .nextview{
      147. 
  
  
  
  
    147.     width: 100%;
      148. 
  
  
  
  
    148.     height: 70%;
      149. 
  
  
  
  
    149. }
      150. 
  
  
  
  
    150. .leftview{
      151. 
  
  
  
  
    151.     width: 30%;
      152. 
  
  
  
  
    152.     height: 100%;
      153. 
  
  
  
  
    153.     border-right
                                                文章題目：鴻蒙js開發(fā)7鴻蒙分組列表和彈出Menu菜單                                                
      
                                                瀏覽路徑：http://www.dlmjj.cn/article/dhhchio.html
                                            
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    










      155. <fieldset id="j3er4"><button id="j3er4"></button></fieldset>
        156.