微信小程序自定义组件及投票管理与个人中心界面搭建

云村小威2023-10-19 15:41

14天阅读挑战赛

人生本来就没定义，任何的价值都是自己赋予。

目录

一、自定义tabs组件

[1.1 创建自定义组件](#1.1 创建自定义组件)

[1.2 tabs.wxml 编写组件界面](#1.2 tabs.wxml 编写组件界面)

[1.3 tabs.wxss 设计样式](#1.3 tabs.wxss 设计样式)

[1.4 tabs.js 定义组件的属性及事件](#1.4 tabs.js 定义组件的属性及事件)

二、自定义组件使用

[2.1 引用组件](#2.1 引用组件)

[2.2 编写会议界面内容](#2.2 编写会议界面内容)

[2.3 设计样式](#2.3 设计样式)

[2.4 模拟数据并实现切换tabs方法](#2.4 模拟数据并实现切换tabs方法)

[2.5 效果展示](#2.5 效果展示)

三、投票管理界面搭建

[3.1 自定义投票列表组件](#3.1 自定义投票列表组件)

[3.2 引用组件](#3.2 引用组件)

[3.3 编写投票界面内容](#3.3 编写投票界面内容)

[3.4 设计样式](#3.4 设计样式)

[3.5 模拟数据并实现切换列表方法](#3.5 模拟数据并实现切换列表方法)

[3.6 效果图](#3.6 效果图)

四、个人中心界面搭建

[4.1 WXML](#4.1 WXML)

[4.2 WXSS](#4.2 WXSS)

[4.3 效果图](#4.3 效果图)

一、自定义tabs组件

1.1 创建自定义组件

新建一个components文件夹 --> tabs文件夹 --> tabs文件

创建好之后win7 以上的系统可能会报这个错误：

解决方案：

在project.config.json文件里添加两行配置

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

1.2 tabs.wxml 编写组件界面

html 复制代码 
<!--components/tabs/tabs.wxml-->
<!-- 这是自定义组件的内部WXML结构 -->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

1.3 tabs.wxss 设计样式

css 复制代码 
/* components/tabs/tabs.wxss */
.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  border-bottom: 3px solid #efefef;
  padding-bottom: 20rpx;
}

.tabs_title {
  /* width: 400rpx; */
  width: 95%;
  display: flex;
  font-size: 13pt;
  padding: 0 20rpx
}

.title_item {
  color: #999;
  padding: 15rpx 0;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.item_active {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
}

.item_active1 {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
  border-bottom: 6rpx solid #333;
  border-radius: 2px;
}

1.4 tabs.js 定义组件的属性及事件

javascript 复制代码 
// components/tabs/tabs.js
var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

二、自定义组件使用

2.1 引用组件

在需要使用自定义组件的json中进行配置引用路径

javascript 复制代码 
//list.json
{
  "usingComponents": {
    "tabs":"/components/tabs/tabs"
  }
}

2.2 编写会议界面内容

在界面使用组件并添加事件:

html 复制代码 
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
html 复制代码 
<!--pages/meeting/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>

2.3 设计样式

css 复制代码 
/* pages/meeting/list/list.wxss */
/**list.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

/**index.wxss**/
.section {
  color: #aaa;
  display: flex;
  justify-content: center;
}

.list-info {
  color: #aaa;
}

.list-num {
  color: red;
  /* font-weight: 700; */
}

.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}

.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #4083ff;
  color: #4083ff;
  padding: 3px 5px 3px 5px;
}

.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}

.list-title {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  color: #333;
  font-weight: bold;


}

.list-detail {
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 15px;
}

.video-img {
  margin-top: 5px;
  width: 80px;
  height: 80px;
}

.list {
  display: flex;
  flex-direction: row;
  background-color: seashell;
  border-bottom: 1px solid #cecece;
  padding: 10px;
}

.mobi-text {
  font-weight: 700;
  padding: 15px;
}

/* .mobi-icon {
  border-left: 5px solid #57f564;
} */
.indexbg{
    background-color: rgba(219, 219, 219, 0.678);
}

.mobi-title {
  /* background-color: rgba(219, 219, 219, 0.678); */
  margin: 10px 0px 10px 0px;
}

.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

2.4 模拟数据并实现切换tabs方法

javascript 复制代码 
// pages/meeting/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:['会议中','已完成','已取消','全部会议'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/1.png',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.png',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.png',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.png',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您"与世界对话"',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.png',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.png',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.png',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.png',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.png',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.png',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.png',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.png',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.png',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.png',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您"与世界对话"',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.png',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  //列表切换事件
  tabsItemChange(e){
      let tolists;
      if(e.detail.index==1){
          tolists = this.data.lists1;
      }else if(e.detail.index==2){
          tolists = this.data.lists2;
      }else{
          tolists = this.data.lists3;
      }
      this.setData({
          lists: tolists
      })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2.5 效果展示

三、投票管理界面搭建

3.1 自定义投票列表组件

操作同目录一：

3.2 引用组件

在需要使用自定义组件的json中进行配置引用路径

javascript 复制代码 
{
  "usingComponents": {
    "voteTabs":"/components/voteTabs/tabTabs",
    "searchbar": "/components/searchbar/searchbar"
  }
}

这里的searchbar是一个搜索组件，需要的私...

3.3 编写投票界面内容

html 复制代码 
<!--pages/vote/list/list.wxml-->
<voteTabs tabList="{{voteTabs}}"  bindtabsItemChange="tabsItemChange"></voteTabs>
<view style="height: 100rpx;"></view>
<searchbar placeholder="输入会议标题" bind:handleSearch="handleSearch"></searchbar>
<view class="oaFlex">
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
              <view class="state al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text> 人已投</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block> 
</view>

3.4 设计样式

css 复制代码 
/* pages/vote/list/list.wxss */
.oaFlex{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list {
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(228, 240, 253);
  border-bottom: 2px solid #d9dbe2;
  margin-bottom: 25px;
}

.video-img {
  width: 360px;
  height: 150px;
}

.list-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-title {
  font-size: 12pt;
  color: #333;
  font-weight: bold;
}

.list-info {
  color: #aaa;
}

.list-num {
  color: red;
  /* font-weight: 700; */
}

.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}

.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #4083ff;
  color: #4083ff;
  padding: 3px 5px 3px 5px;
}

.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}

3.5 模拟数据并实现切换列表方法

javascript 复制代码 
// pages/meeting/vote/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    voteTabs:['全部投票','发布的','参与的'],
    lists: [
      {
        'id': '1',
        'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDw69bhBSjulrWKBTDABzicBA!800x800.png?_tm=3&v=1556100764632',
        'title': '2023招募开发工程师 | 深圳·北京PM大会 ',
        'num':'24',
        'state':'进行中',
        'time': '10月21日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': 'https://img.zcool.cn/community/01e71e61e7c7ba11013e8cd0236304.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
        'title': '隔空对话 | 国潮主理人大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': 'https://img.51miz.com/Templet/00/20/68/42/206842_5b3fc9bfb569c4cf1865d2006e5b9e17_1365.jpg',
        'title': 'iphone 新品发布会主持人员安排',
        'num':'500',
        'state':'进行中',
        'time': '10月20日 17:31',
        'address': '上海'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDw69bhBSjulrWKBTDABzicBA!800x800.png?_tm=3&v=1556100764632',
        'title': '2023招募开发工程师 | 深圳·北京PM大会 ',
        'num':'24',
        'state':'进行中',
        'time': '10月21日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': 'https://img.zcool.cn/community/01e71e61e7c7ba11013e8cd0236304.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
        'title': '隔空对话 | 国潮主理人大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': 'https://img.51miz.com/Templet/00/20/68/42/206842_5b3fc9bfb569c4cf1865d2006e5b9e17_1365.jpg',
        'title': 'iphone 新品发布会主持人员安排',
        'num':'500',
        'state':'进行中',
        'time': '10月20日 17:31',
        'address': '上海'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': 'https://bpic.588ku.com/Templet_origin_pic/05/08/59/20760ea806f4a490f73c577d69e8ffe8.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': 'https://img-u-2.51miz.com/Templet/00/18/17/65/181765_bbf22358519e77310bda1f7457500141.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': 'https://bpic.588ku.com/Templet_origin_pic/05/08/59/20760ea806f4a490f73c577d69e8ffe8.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDv69bhBSiCruq3BTDABzicBA!800x800.png?v=1556100745578',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': 'https://ts1.cn.mm.bing.net/th/id/R-C.022f2e37a033ca3c5754d2f32e8132a1?rik=9ysyMcx6nMOilg&riu=http%3a%2f%2fres.picxiaobai.com%2ftxb%2ftemplate%2fpre%2f20200517%2fd7580b5326b45a612dbf2c1904bc6ca2.jpg%3fv%3d1589705812%26x-oss-process%3dimage%2fresize%2cw_500&ehk=mHQV45sPbW8QB5iv%2ftSXZeasTn4bN6d%2bdLOtwiOYpl8%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': 'https://img.tukuppt.com/ad_preview/00/10/75/5d78cd9a6a9b4.jpg!/fw/780',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您"与世界对话"',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': 'https://img-u-2.51miz.com/Templet/00/18/17/65/181765_bbf22358519e77310bda1f7457500141.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  //列表切换事件
  tabsItemChange(e){
      let tolists = null;
      if(e.detail.index==0){
          tolists = this.data.lists1;
      }else if(e.detail.index==1){
          tolists = this.data.lists2;
      }else{
          tolists = this.data.lists3;
      }
      this.setData({
          lists: tolists
      })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3.6 效果图

四、个人中心界面搭建

4.1 WXML

html 复制代码 
<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
    <image class="userInfo-head" src="/static/images/avatar.png"></image>
    <text class="userInfo-login">云村小威</text>
</view>

<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/oa.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我主持的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/myoa.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/putpassage.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我发布的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/passage.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/message.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">消        息</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/设置.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">设        置</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>

4.2 WXSS

css 复制代码 
/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(159, 212, 245, 0.075);
}
.userInfo{
  display: flex;
  flex-direction:column;
  align-items: center;
  height: 350rpx;
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
  
}
.userInfo-head{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow:hidden;
  margin: 11px 20rpx;
}
.userInfo-login{
  margin: 15px 20rpx;
}
.userInfo-set{
  height: 100rpx;
  width: 100rpx;
  margin:120rpx 20rpx;
}

.cells{
  background-color: #fff;
  height: 270rpx;
  margin-bottom: 30rpx;
}
.cell-items{
  height: 110rpx;
  display: flex;
  margin: 20rpx 0 0 0;
  align-items: center;
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items-icon{
  height: 70rpx;
  width: 70rpx;
  margin: 0rpx 0 0 15rpx;
}
.cell-items-title{
  font-weight: 700;
  font-size: 18px;
  margin: 0rpx 0 0 30rpx;
}
.cell-items-num{
  margin: 0 0 0 335rpx;
}
.cell-items-detail{
  margin: 0 0 0 20rpx;
}

.cells > hr{
  display: block;
  height: 1px;
  background-color: rgba(135, 206, 250, 0.075);
}

4.3 效果图

相关推荐
F-2H1 小时前
C语言：指针4（常量指针和指针常量及动态内存分配）
java·linux·c语言·开发语言·前端·c++
苹果酱05671 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
_oP_i2 小时前
Pinpoint 是一个开源的分布式追踪系统
java·分布式·开源
mmsx2 小时前
android sqlite 数据库简单封装示例（java）
android·java·数据库
武子康3 小时前
大数据-258 离线数仓 - Griffin架构 配置安装 Livy 架构设计 解压配置 Hadoop Hive
java·大数据·数据仓库·hive·hadoop·架构
豪宇刘4 小时前
MyBatis的面试题以及详细解答二
java·servlet·tomcat
秋恬意4 小时前
Mybatis能执行一对一、一对多的关联查询吗？都有哪些实现方式，以及它们之间的区别
java·数据库·mybatis
Kika写代码4 小时前
【微信小程序】页面跳转基础 | 我的咖啡店-综合实训
服务器·微信小程序·小程序
FF在路上4 小时前
Knife4j调试实体类传参扁平化模式修改：default-flat-param-object: true
java·开发语言
真的很上进5 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）