• 小程序之自定义组件 结合案例（会议OA的会议/投票管理及个人中心的搭建）详解 （4）

                                           ⭐⭐ 小程序专栏：小程序开发专栏

                                            ⭐⭐ 个人主页：个人主页

    目录

    一.前言

    二.小程序自定义组件及其使用

    2.1 自定义组件的使用

    三.使用自定义组件完成会议功能界面的实现

       3.1 导航栏的实现

     3.2 会议界面内容的实现 

     四.投票管理界面

    五.个人中心

    今天的分享就到这啦！！！

    一.前言

            继上一篇文章的首页搭建，今天来完成剩下的部分会议管理，投票管理及个人中心！！！

    二.小程序自定义组件及其使用

            官网：自定义组件 / 介绍 (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

            开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

    2.1 自定义组件的使用

     右击新建一个文件夹，创建一个component文件,只有Windows10会报，windows7不会，我们只要添加一个设置即可：

    1. "ignoreDevUnusedFiles": false,
    2. "ignoreUploadUnusedFiles": false,

            一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

    1. {
    2.   "component": true
    3. }

    在 wxss 文件中加入组件样式

    2. <view class="inner">
    3.   {{innerText}}
    4. view>
    5. <slot>slot>

    定义所需要的属性：

    接着要在页面的 json 文件中进行引用组件。此时需要提供自定义组件文件路径：

    1. {
    2.   "usingComponents": {
    3.     "tabs": "/components/tabs/tabs"
    4.   }
    5. }

    效果：

    三.使用自定义组件完成会议功能界面的实现

            3.1 导航栏的实现

            前端代码，写在了自定义组件中 tabs.wxml:

            导航栏标题的判断选中的效果

    1. <!-- 导航栏 -->
    2. <view class="tabs">
    3.     <view class="tabs_title">
    4.         <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
    5.             <view style="margin-bottom:5rpx">{{item}}</view>
    6.             <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
    7.         </view>
    8.     </view>
    9.     <view class="tabs_content">
    10.         <slot></slot>
    11.     </view>
    12. </view>

    导航栏的样式 tabs.wxss:

    1. /* 导航栏样式 */
    2. .tabs {
    3.     position: fixed;
    4.     top: 0;
    5.     width: 100%;
    6.     background-color: #fff;
    7.     z-index: 99;
    8.     border-bottom: 1px solid #efefef;
    9.     padding-bottom: 20rpx;
    10. }
    11.  
    12. .tabs_title {
    13.     /* width: 400rpx; */
    14.     width: 90%;
    15.     display: flex;
    16.     font-size: 9pt;
    17.     padding: 0 20rpx;
    18. }
    19.  
    20. .title_item {
    21.     color: #999;
    22.     padding: 15rpx 0;
    23.     display: flex;
    24.     flex: 1;
    25.     flex-flow: column nowrap;
    26.     justify-content: center;
    27.     align-items: center;
    28. }
    29.  
    30. .item_active {
    31.     /* color:#ED8137; */
    32.     color: #000000;
    33.     font-size: 11pt;
    34.     font-weight: 800;
    35. }
    36.  
    37. .item_active1 {
    38.     /* color:#ED8137; */
    39.     color: #000000;
    40.     font-size: 11pt;
    41.     font-weight: 800;
    42.     border-bottom: 6rpx solid #333;
    43.     border-radius: 2px;
    44. }

    在js里面定义属性以及定义点击的事件    tabs.js：

    1.    /**
    2.      * 组件的属性列表
    3.      */
    4.     properties: {
    5.         // 这里定义属性，属性值可以在组件使用时指定
    6.         tabList:Object
    7.   
    8.     },
    9.  
    10.  /**
    11.      * 组件的方法列表
    12.      */
    13.     methods: {
    14.         // 导航栏的方法
    15.         handleItemTap(e){
    16.             // 获取索引下标
    17.             const {index} = e.currentTarget.dataset;
    18.             // 触发 父组件的事件
    19.             this.triggerEvent("tabsItemChange",{index})
    20.             this.setData({
    21.                 tabIndex:index
    22.             })
    23.           }
    24.     }

    接着在会议文件夹中的前端中写入 list.wxml：

    1. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    2. </tabs>

    接着导入，在上篇文章就已经将所有的页面已经建好啦，现在只会写入代码即可在会议界面meeting的list.json导入：

    1.     "usingComponents": {
    2.         "tabs": "/components/tabs/tabs" 
    3.     }

    最后加入一些假数据 list.js：

    1.  /**
    2.      * 页面的初始数据
    3.      */
    4.     data: {
    5.         tabs:['已取消','进行中','已结束','全部会议'],
    6. }

    效果：

     3.2 会议界面内容的实现 metting

    前端代码  list.wxml:

    1. <!-- 设置与导航栏的间距 -->
    2. <view style="height: 40px;"></view>
    3. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    4.     <view class="list" data-id="{{item.id}}">
    5.         <view class="list-img">
    6.             <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
    7.         </view>
    8.         <view class="list-detail">
    9.             <view class="list-title"><text>{{item.title}}</text></view>
    10.             <view class="list-tag">
    11.                 <view class="state">{{item.state}}</view>
    12.                 <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
    13.             </view>
    14.             <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
    15.         </view>
    16.     </view>
    17. </block>

    样式设置 list.wxss：

    1. /* 会议样式 */
    2. .mobi-title {
    3.     font-size: 12pt;
    4.     color: #777;
    5.     line-height: 110%;
    6.     font-weight: bold;
    7.     width: 100%;
    8.     padding: 15rpx;
    9.     background-color: #f3f3f3;
    10. }
    11.  
    12. .mobi-icon {
    13.     padding: 0rpx 3rpx;
    14.     border-radius: 3rpx;
    15.     background-color: #ff7777;
    16.     position: relative;
    17.     margin-right: 10rpx;
    18. }
    19.  
    20. /*list*/
    21. .list {
    22.     display: flex;
    23.     flex-direction: row;
    24.     width: 100%;
    25.     padding: 0 20rpx 0 0;
    26.     border-top: 1px solid #eeeeee;
    27.     background-color: #fff;
    28.     margin-bottom: 5rpx;
    29.     /* border-radius: 20rpx;
    30.     box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
    31. }
    32.  
    33. .list-img {
    34.     display: flex;
    35.     margin: 10rpx 10rpx;
    36.     width: 150rpx;
    37.     height: 220rpx;
    38.     justify-content: center;
    39.     align-items: center;
    40. }
    41.  
    42. .list-img .video-img {
    43.     width: 120rpx;
    44.     height: 120rpx;
    45.     
    46. }
    47.  
    48. .list-detail {
    49.     margin: 10rpx 10rpx;
    50.     display: flex;
    51.     flex-direction: column;
    52.     width: 600rpx;
    53.     height: 220rpx;
    54. }
    55.  
    56. .list-title text {
    57.     font-size: 11pt;
    58.     color: #333;
    59.     font-weight: bold;
    60. }
    61.  
    62. .list-detail .list-tag {
    63.     display: flex;
    64.     height: 70rpx;
    65. }
    66.  
    67. .list-tag .state {
    68.     font-size: 9pt;
    69.     color: #81aaf7;
    70.     width: 120rpx;
    71.     border: 1px solid #93b9ff;
    72.     border-radius: 2px;
    73.     margin: 10rpx 0rpx;
    74.     display: flex;
    75.     justify-content: center;
    76.     align-items: center;
    77. }
    78.  
    79. .list-tag .join {
    80.     font-size: 11pt;
    81.     color: #bbb;
    82.     margin-left: 20rpx;
    83.     display: flex;
    84.     justify-content: center;
    85.     align-items: center;
    86. }
    87.  
    88. .list-tag .list-num {
    89.     font-size: 11pt;
    90.     color: #ff6666;
    91. }
    92.  
    93. .list-info {
    94.     font-size: 9pt;
    95.     color: #bbb;
    96.     margin-top: 20rpx;
    97. }
    98. .bottom-line{
    99.     display: flex;
    100.     height: 60rpx;
    101.     justify-content: center;
    102.     align-items: center;
    103.     background-color: #f3f3f3;
    104. }
    105. .bottom-line text{
    106.     font-size: 9pt;
    107.     color: #666;
    108. }

    导入后台假数据：

    根据导航栏的不同状态，各自写了一个数组数据  list.js：

    1.  /**
    2.      * 页面的初始数据
    3.      */
    4.     data: {
    5.         tabs:['已取消','进行中','已结束','全部会议'],
    6.         lists: [
    7.             {
    8.               'id': '1',
    9.               'image': '/static/persons/1.jpg',
    10.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    11.               'num':'304',
    12.               'state':'进行中',
    13.               'time': '10月09日 17:59',
    14.               'address': '深圳市·南山区'
    15.             },
    16.             {
    17.               'id': '1',
    18.               'image': '/static/persons/2.jpg',
    19.               'title': 'AI WORLD 2016世界人工智能大会',
    20.               'num':'380',
    21.               'state':'进行中',
    22.               'time': '10月09日 17:39',
    23.               'address': '北京市·朝阳区'
    24.             },
    25.             {
    26.               'id': '1',
    27.               'image': '/static/persons/3.jpg',
    28.               'title': 'H100太空商业大会',
    29.               'num':'500',
    30.               'state':'已取消',
    31.               'time': '10月09日 17:31',
    32.               'address': '大连市'
    33.             },
    34.             {
    35.               'id': '1',
    36.               'image': '/static/persons/4.jpg',
    37.               'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    38.               'num':'150',
    39.               'state':'进行中',
    40.               'time': '10月09日 17:21',
    41.               'address': '北京市·朝阳区'
    42.             },
    43.             {
    44.               'id': '1',
    45.               'image': '/static/persons/5.jpg',
    46.               'title': '新质生活 · 品质时代 2016消费升级创新大会',
    47.               'num':'217',
    48.               'state':'已结束',
    49.               'time': '10月09日 16:59',
    50.               'address': '北京市·朝阳区'
    51.             }
    52.           ],
    53.           lists1: [
    54.             {
    55.               'id': '1',
    56.               'image': '/static/persons/1.jpg',
    57.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    58.               'num':'304',
    59.               'state':'进行中',
    60.               'time': '10月09日 17:59',
    61.               'address': '深圳市·南山区'
    62.             },
    63.             {
    64.               'id': '1',
    65.               'image': '/static/persons/2.jpg',
    66.               'title': 'AI WORLD 2016世界人工智能大会',
    67.               'num':'380',
    68.               'state':'进行中',
    69.               'time': '10月09日 17:39',
    70.               'address': '北京市·朝阳区'
    71.             },
    72.             {
    73.               'id': '1',
    74.               'image': '/static/persons/3.jpg',
    75.               'title': 'H100太空商业大会',
    76.               'num':'500',
    77.               'state':'进行中',
    78.               'time': '10月09日 17:31',
    79.               'address': '大连市'
    80.             }
    81.           ],
    82.           lists2: [ 
    83.             {
    84.               'id': '1',
    85.               'image': '/static/persons/1.jpg',
    86.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    87.               'num':'304',
    88.               'state':'已结束',
    89.               'time': '10月09日 17:59',
    90.               'address': '深圳市·南山区'
    91.             },
    92.             {
    93.               'id': '1',
    94.               'image': '/static/persons/2.jpg',
    95.               'title': 'AI WORLD 2016世界人工智能大会',
    96.               'num':'380',
    97.               'state':'已结束',
    98.               'time': '10月09日 17:39',
    99.               'address': '北京市·朝阳区'
    100.             }
    101.           ],
    102.           lists3: [
    103.             {
    104.               'id': '1',
    105.               'image': '/static/persons/1.jpg',
    106.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    107.               'num':'304',
    108.               'state':'已取消',
    109.               'time': '10月09日 17:59',
    110.               'address': '深圳市·南山区'
    111.             },
    112.             {
    113.               'id': '1',
    114.               'image': '/static/persons/2.jpg',
    115.               'title': 'AI WORLD 2016世界人工智能大会',
    116.               'num':'380',
    117.               'state':'已取消',
    118.               'time': '10月09日 17:39',
    119.               'address': '北京市·朝阳区'
    120.             },
    121.             {
    122.               'id': '1',
    123.               'image': '/static/persons/3.jpg',
    124.               'title': 'H100太空商业大会',
    125.               'num':'500',
    126.               'state':'已取消',
    127.               'time': '10月09日 17:31',
    128.               'address': '大连市'
    129.             },
    130.             {
    131.               'id': '1',
    132.               'image': '/static/persons/4.jpg',
    133.               'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    134.               'num':'150',
    135.               'state':'已取消',
    136.               'time': '10月09日 17:21',
    137.               'address': '北京市·朝阳区'
    138.             },
    139.             {
    140.               'id': '1',
    141.               'image': '/static/persons/5.jpg',
    142.               'title': '新质生活 · 品质时代 2016消费升级创新大会',
    143.               'num':'217',
    144.               'state':'已取消',
    145.               'time': '10月09日 16:59',
    146.               'address': '北京市·朝阳区'
    147.             }
    148.           ]
    149.     },

    改变导航栏页面的数据，根据会议状态做一个简单判断   list.js：

    1. // 导航栏改变事件，改变值
    2.     tabsItemChange(e){
    3.         let tolists;
    4.         if(e.detail.index==1){
    5.             tolists = this.data.lists1;
    6.         }else if(e.detail.index==2){
    7.             tolists = this.data.lists2;
    8.         }else if(e.detail.index==0){
    9.             tolists = this.data.lists3;
    10.         }else{
    11.             tolists = this.data.lists;
    12.         }
    13.         this.setData({
    14.             lists: tolists
    15.         })
    16.     },

    效果：

     四.投票管理界面 vote

    前端代码 ：

    1. <!-- 导航栏 -->
    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. </tabs>
    4. <!-- 设置与导航栏的间距 -->
    5. <view style="height: 40px;"></view>
    6. <block wx:for-items="{{vote1}}" wx:for-item="item" wx:key="item.id">
    7.     <view class="list" data-id="{{item.id}}">
    8.         <view class="list-detail">
    9.             <view class="list-title"><text>{{item.title}}</text><text class="state">{{item.state}}</text>   </view>
    10.            
    11.             <view class="list-tag">
    12.                 <view class="join"> 参与投票人数: <text class="list-num">{{item.sum}}</text></view>
    13.                 <view class="join">已经投票人数: <text class="list-num">{{item.num}}</text></view>
    14.             </view>
    15.        
    16.             <view class="list-info">投票截止时间: <text>{{item.time}}</text></view>
    17.         </view>
    18.     </view>
    19. </block>

    样式设计：

    1. /* pages/vote/list/list.wxss */
    2. /* 会议样式 */
    3. /*list*/
    4. .list {
    5.     display: flex;
    6.     flex-direction: row;
    7.     width: 100%;
    8.     padding: 0 20rpx 0 0;
    9.     border-top: 1px solid #cac7c7;
    10.     background-color: rgb(253, 244, 244);
    11.     margin-bottom: 5rpx;
    12.    
    13. }
    14. .list-title{
    15.     color: rgb(219, 85, 23);
    16.     font-weight: 1000;
    17.     font-size: smaller;
    18.     display: flex;
    19.     margin: 20rpx 10rpx;
    20.     /* width: 300rpx;
    21.     height: 120rpx; */
    22.     /* justify-content: center; */
    23.     align-items: center;
    24. }
    25. .join{
    26.     font-size: smaller;
    27.     font-size: 11pt;
    28.     color: rgb(85, 79, 79);
    29.     margin-left: -300rpx;
    30.     display: flex;
    31.     justify-content: center;
    32.     /* align-items: center; */
    33. }
    34. .list-num{
    35.     font-weight: 680;
    36.     color: red;
    37. }
    38. .state {
    39.     font-size: 9pt;
    40.     color: #81aaf7;
    41.     width: 180rpx;
    42.     border: 1px solid #93b9ff;
    43.     border-radius: 2px;
    44.     margin: 10rpx 0rpx;
    45.     display: flex;
    46.     justify-content: center;
    47.     align-items: center;
    48. }
    49. .list-info {
    50.     font-size: 9pt;
    51.     color: rgb(17, 16, 16);
    52.     margin-top: 20rpx;
    53.     margin-left: 150px;
    54. }

    引入自定义标签：

    1. {
    2.     "usingComponents": {
    3.         "tabs": "/components/tabs/tabs"
    4.     }
    5. }

    定义一些假数据：

    1.   /**
    2.      * 页面的初始数据
    3.      */
    4.     data: {
    5.         tabs:['待投票','历史投票','已投票'],
    6.         vote1: [
    7.             {
    8.               'id': '1',
    9.               'title': '【关于罢免张三的董事长职位】',
    10.               'sum':'16人',
    11.               'state':'还未进行投票',
    12.               'time': '10月09日 17:59',
    13.               'num': '10人'
    14.             },
    15.             {
    16.               'id': '1',
    17.               'title': '【世界人工智能大会是否上市】',
    18.               'sum':'20人',
    19.               'state':'还未进行投票',
    20.               'time': '10月09日 17:39',
    21.               'num': '7人'
    22.             },
    23.             {
    24.               'id': '1',
    25.               'title': '【H100太空商业大会是否召开】',
    26.               'sum':'24人',
    27.               'state':'还未进行投票',
    28.               'time': '10月09日 17:31',
    29.               'num': '21人'
    30.             },
    31.             {
    32.               'id': '1',
    33.               'title': '【关于李四的升职董事长的投票】',
    34.               'sum':'10人',
    35.               'state':'还未进行投票',
    36.               'time': '10月09日 17:21',
    37.               'num': '2人'
    38.             }
    39.           ],
    40.           vote2: [
    41.             {
    42.               'id': '1',
    43.             'title': '【关于公司是否支持空降总监的会议】',
    44.               'sum':'23人',
    45.               'state':'同意',
    46.               'time': '10月09日 17:59',
    47.               'num': '23人'
    48.             },
    49.             {
    50.               'id': '1',
    51.               'title': '【2016世界人工智能大会是否召开】',
    52.               'sum':'23人',
    53.               'state':'不同意',
    54.               'time': '10月09日 17:39',
    55.               'num': '23人'
    56.             },
    57.             {
    58.               'id': '1',
    59.               'title': '【H100太空商业大会是否召开】',
    60.               'sum':'23人',
    61.               'state':'弃权',
    62.               'time': '10月09日 17:39',
    63.               'num': '23人'
    64.             }
    65.           ],
    66.           vote3: [ 
    67.             {
    68.               'id': '1',
    69.               'title': '【关于王五的罢免的投票】',
    70.               'sum':'34人',
    71.               'state':'弃权',
    72.               'time': '10月09日 17:59',
    73.               'num': '31人'
    74.             },
    75.             {
    76.               'id': '1',
    77.               'title': '【2016世界人工智能大会的召开】',
    78.               'sum':'34人',
    79.               'state':'同意',
    80.               'time': '10月09日 17:59',
    81.               'num': '31人'
    82.             },{
    83.                 'id': '1',
    84.                 'title': '【关于王五的罢免的投票】',
    85.                 'sum':'34人',
    86.                 'state':' 不同意',
    87.                 'time': '10月09日 17:59',
    88.                 'num': '31人'
    89.               },
    90.               {
    91.                 'id': '1',
    92.                 'title': '【2016世界人工智能大会的召开】',
    93.                 'sum':'34人',
    94.                 'state':'同意',
    95.                 'time': '10月09日 17:59',
    96.                 'num': '31人'
    97.               },{
    98.                 'id': '1',
    99.                 'title': '【关于王五的罢免的投票】',
    100.                 'sum':'34人',
    101.                 'state':'同意',
    102.                 'time': '10月09日 17:59',
    103.                 'num': '31人'
    104.               },
    105.               {
    106.                 'id': '1',
    107.                 'title': '【世界人工智能大会的召开】',
    108.                 'sum':'34人',
    109.                 'state':'弃权',
    110.                 'time': '10月09日 17:59',
    111.                 'num': '31人'
    112.               }
    113.           ]
    114.     },

    导航栏改变事件：

    1. // 导航栏改变事件，改变值
    2.  tabsItemChange(e){
    3.     let tolists;
    4.     if(e.detail.index==0){
    5.         tolists = this.data.vote1;
    6.     }else if(e.detail.index==1){
    7.         tolists = this.data.vote2;
    8.     }else if(e.detail.index==2){
    9.         tolists = this.data.vote3;
    10.     }
    11.     this.setData({
    12.         vote1: tolists
    13.     })
    14. },

    效果：

    五.个人中心

    前端代码 ucenter：

    1. <view class="user">
    2.     <image class="user-img" src="/static/persons/jennie1.jpg"></image>
    3.     <view class="user-name">潇洒姿</view>
    4.     <view class="user-oper">修改</view>
    5. </view>
    6. <view class="info">
    7.     <view class="item1">
    8.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    9.         <view class="item-title">我主持的会议</view>
    10.         <view class="item-num">10</view>
    11.         <view class="item-oper">>
    12.     </view>
    13.     <view class="item2">
    14.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    15.         <view class="item-title">我参与的会议</view>
    16.         <view class="item-num">7</view>
    17.         <view class="item-oper">>
    18.     </view>
    19.  
    20. </view>
    21. <view class="info">
    22.     <view class="item1">
    23.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    24.         <view class="item-title">我发布的投票</view>
    25.         <view class="item-num">6</view>
    26.         <view class="item-oper">>
    27.     </view>
    28.     <view class="item2">
    29.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    30.         <view class="item-title">我参与的投票</view>
    31.         <view class="item-num">8</view>
    32.         <view class="item-oper">>
    33.     </view>
    34.  
    35. </view>
    36. <view class="info">
    37.     <view class="item1">
    38.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    39.         <view class="item-title">消息</view>
    40.         <view class="item-num">1</view>
    41.         <view class="item-oper">>
    42.     </view>
    43.     <view class="item2">
    44.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    45.         <view class="item-title">设置</view>
    46.         <view class="item-num">10</view>
    47.         <view class="item-oper">>
    48.     </view>
    49.  
    50. </view>

    样式设计：

    1. /* pages/ucenter/index/index.wxss */
    2. .user{
    3.     display: flex;
    4.     align-items: center;
    5.     border-bottom: 8px solid rgb(236, 216, 219);
    6. }
    7. .user-img{
    8.     width: 75px;
    9.     height: 75px;
    10.     margin: 10px;
    11. }
    12. .user-name{
    13.     font-weight: 900;
    14.     margin: 0 200rpx 0 50rpx;
    15.     margin-left: 10px;
    16.     color: palevioletred;
    17. }
    18. .user-oper{
    19.     color: grey;
    20.     width: 40px;
    21.     margin-left: 10px;
    22. }
    23. .item-icon{
    24.     width: 34px;
    25.     height: 34px;
    26. }
    27. .item1,.item2{
    28. padding: 5px;
    29. display: flex;
    30. align-items: center;
    31. }
    32. .item-title{
    33.     width: 550rpx;
    34.  
    35. }
    36. .item-num{
    37.     
    38.     color:rgb(231, 188, 217);
    39. }
    40. .item1{
    41.     border-bottom: 1px solid rgb(236, 216, 219);
    42. }
    43. .item2{
    44.     border-bottom: 5px solid rgb(236, 216, 219);
    45. }
    46. .item-oper{
    47.     font-weight: 800;
    48.    margin-left: 10px;
    49.    width: 20px;
    50.    color:rgb(100, 76, 84)
    51.  
    52. }

    效果:

    今天的分享就到这啦！！！

  • 相关阅读:
    C++命名空间
    Golang教程与Gin教程合集，入门到实战
    Linux aarch64交叉编译之 nodejs js运行时环境
    lintcode 540 · 左旋右旋迭代器 【算法 中等 迭代器】
    【菜菜研科研小BUG记录】【Latex写作方面1】不定期更新
    狗都能看懂的CenterNet讲解及代码复现
    Java 定时任务-最简单的3种实现方法
    golang 琐碎知识
    通关宝典！Java 面试核心知识让你面试过，过，过！
    C++ ：设计模式实现
  • 原文地址：https://blog.csdn.net/YZZdear/article/details/133902607