微信小程序开发的OA会议之会议，投票，个人中心的页面搭建及模板

news2024/11/19 2:41:57

目录

一.自定义组件

1.1.创建 

1.2.定义 

1.3.编写

1.4.使用

二.会议

2.1.数据

2.2.显示 

2.3. 样式

三.个人中心

3.1.页面

3.2.样式

四.投票

4.1.引用

4.2.数据

4.3.页面

4.4.样式

                好啦今天就到这里了，希望能帮到你哦！！！

一.自定义组件

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

以下的代码都基于我博客中的 : 

微信小程序的OA会议之首页搭建icon-default.png?t=N7T8https://blog.csdn.net/m0_74915426/article/details/133936420?spm=1001.2014.3001.5502

1.1.创建 

在项目中创建一个名为 : components 的文件，来存放组件

 再在components文件夹中创建一个组件，名为 : tabs ，创建操作如图 : 

1.2.定义 

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

在 tabs.json 中编写:  

{
  "component": true,
  "usingComponents": {}
}

 同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

1.3.编写

在 tabs.wxml 中进行编写模板:

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<!-- 这是自定义组件的内部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>

 在 tabs.js 中进行编写功能 :

 

// components/tabs/tabs.js
Component({
 
  /**
   * 组件的属性列表
   */
  properties: {
 // 这里定义了innerText属性，属性值可以在组件使用时指定
 innerText: {
  type: String,
  value: 'default value'
},
tabList:Object
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:1
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

在 tabs.wxss 中进行编写样式: 

.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
}
 
.tabs_title {
  /* width: 400rpx; */
  width: 90%;
  display: flex;
  font-size: 9pt;
  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.使用

在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

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

如图：

需要在哪个页面中进行使用，就需要在哪个页面中进行引用配置

比如说 : 需要在会议页面中进行使用，就要在  会议页面.json (meeting/list/list.json)

 中增加以下设置

{
  "usingComponents": {
    "tabs": "../../../components/tabs/tabs"
  }
}

然后再 list.js 中进行初始化数据，在data属性中编写 : 

 data: {
    tabs:['会议中','已完成','已取消','全部会议']
}

 在 list.wxml中使用 

<!--pages/meeting/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

                                        效果图后面一起

注意事项: 

一些需要注意的细节：

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

        如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

二.会议

学会了自定义组件的使用，在后将会议的页面及效果编写搭建完成

2.1.数据

在会议的 list.js 中进行初始化数据进行页面显示效果 :

// pages/vote/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:['全部','已发起','已参与'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/8.jpg',
        'name' : '君总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '304',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '刘老板',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '480',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/13.jpg',
        'name' : '肖总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '500',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/15.jpg',
        'name' : ' 文总',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'217',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'name' : '张总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '304',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '陈总',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '480',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/13.jpg',
        'name' : '杨总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '500',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/20.jpg',
        'name' : ' 冯总 ',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'217',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/11.jpg',
        'name' : '徐总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '422',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '邓总',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '377',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/17.jpg',
        'name' : '廖总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '463',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/19.jpg',
        'name' : ' 李总 ',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'543',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  tabsItemChange(e){
    console.log(e.detail);
    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.lists;
    }
    this.setData({
        lists: tolists
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

2.2.显示 

在会议的 list.wxml  中进行编写 :

<!--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> 
<view class="section bottom-line">
		<text>到底啦</text>
</view>

2.3. 样式

在会议的 list.wxss  中进行编写样式，美化页面 :

/* pages/meeting/list/list.wxss */
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
 
.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 150rpx;
  height: 220rpx;
  justify-content: center;
  align-items: center;
}
 
.list-img .video-img {
  width: 120rpx;
  height: 120rpx;
  
}
 
.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 220rpx;
}
 
.list-title text {
  font-size: 11pt;
  color: #333;
  font-weight: bold;
}
 
.list-detail .list-tag {
  display: flex;
  height: 70rpx;
}
 
.list-tag .state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .list-num {
  font-size: 11pt;
  color: #ff6666;
}
 
.list-info {
  font-size: 9pt;
  color: #bbb;
  margin-top: 20rpx;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

效果:                         

                                                

注 ： 其中的图片名称及路径，需要根据自己的图片名称及路径进行修改 

三.个人中心

3.1.页面

在个人中心页面中编写 .wxml 文件(如 : ucenter/index/index.wxml) 进行页面显示

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user">
    <image class="user-img"  src="/static/persons/2.jpg"></image>
    <view class="user-name">ಥ慧瑶ಥ</view>
    <text class="user-up">修改</text>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/sdk.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 style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">👉</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/sdk.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 style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">👉</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
        <text class="cell-items-title">信息</text>
        <text class="cell-items-ion">👉</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
        <text class="cell-items-title">设置</text>
        <text class="cell-items-ion">👉</text>
    </view>
</view>

3.2.样式

在个人中心的 .wxss 样式文件 中进行编写样式，来美化布局的页面效果

(如 : ucenter/index/index.wxss)

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.user{
  display: flex;
  width: 100%;
  align-items:center;
  background-color: white;
  margin-bottom: 28rpx;
}
.user-img{
height: 170rpx;
width: 170rpx;
margin: 30rpx;
border: 1px solid #cdd7ee;
border-radius: 6px;
}
.user-name{
width: 380rpx;
margin-left: 20rpx;
font-weight: 550;
}
.user-up{
color: rgb(136, 133, 133);
}
.cells{
  background-color: white;
}
.cell-items{
  display: flex;
  align-items:center; 
  height: 110rpx;
}
.cell-items-title{
  width: 290rpx;
}
.cell-items-icon{
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}
.cell-items-num{
  padding-left: 30rpx;
  margin-left: 200rpx;
  width: 70rpx;
}
.cell-items-ion{
  margin-left: 295rpx;
}

效果图：

                                

四.投票

4.1.引用

在 投票页面的 .json 文件( 如: vote/list/list.json )中进行编写 ：

{
  "usingComponents": {
    "tabs": "../../../components/tabs/tabs"
  }
}

4.2.数据

在 投票页面的 .js 文件( 如: vote/list/list.js )中进行编写初始化数据及方法功能 ：

// pages/vote/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:['全部','已发起','已参与'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/8.jpg',
        'name' : '君总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '304',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '刘老板',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '480',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/13.jpg',
        'name' : '肖总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '500',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/15.jpg',
        'name' : ' 文总',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'217',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'name' : '张总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '304',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '陈总',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '480',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/13.jpg',
        'name' : '杨总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '500',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/20.jpg',
        'name' : ' 冯总 ',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'217',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/11.jpg',
        'name' : '徐总',
        'title': '深圳·北京PM大会',
        'vote' : '是否认同与京东进行产品合作',
        'num'  : '422',
        'state':'未投票',
        'time' : '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '2',
        'image': '/static/persons/16.jpg',
        'name' : '邓总',
        'title': 'AIWORLD人工智能大会',
        'vote' : '是否投资AI发展',
        'num'  : '377',
        'state':'已投票',
        'time' : '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '3',
        'image': '/static/persons/17.jpg',
        'name' : '廖总',
        'title': 'H100太空商业大会',
        'vote' : '是否太空商业进行合作',
        'num'  : '463',
        'state': '未参与',
        'time' : '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '4',
        'image': '/static/persons/19.jpg',
        'name' : ' 李总 ',
        'title': '2023消费升级创新大会',
        'vote' : '是否对本次创新持续升级',
        'num':'543',
        'state':'已投票',
        'time': '11月20日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  tabsItemChange(e){
    console.log(e.detail);
    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.lists;
    }
    this.setData({
        lists: tolists
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

4.3.页面

在投票页面的 wxml 文件( 如: vote/list/list.wxml )中进行编写页面标签显示数据及效果 ：

<!--pages/vote/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><text style="margin-right: 13rpx;"> 发 起 人</text> ： {{item.name}}</text></view>
            <view class="list-title"><text>会议名称 ： {{item.title}}</text></view>
            <view class="list-title"><text>投票标题 ： [ {{item.vote}} ]</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 class="section bottom-line">
		<text>到底啦</text>
</view>

4.4.样式

在投票页面的 .wxss 文件( 如: vote/list/list.wxss)中进行编写页面样式进行美化效果 ：

/* pages/vote/list/list.wxss */
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  height: 270rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
 
.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 160rpx;
  height: 250rpx;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}
 
.list-img .video-img {
  width: 140rpx;
  height: 160rpx;
  border-radius: 6px;
}
 
.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 300rpx;
}
 
.list-title text {
  font-size: 9pt;
  color: #333;
  font-weight: bold;
}
 
.list-detail  {
  display: flex;
  height: 100rpx;
}
.list-tag{
  display: flex;
}
.state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  height: 40rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 .list-num {
  margin-right: 10rpx;
  font-size: 11pt;
  color: #ff6666;
}
 
.list-info {
  font-size: 9pt;
  color: #bbb;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

效果图：

                                        

                好啦今天就到这里了，希望能帮到你哦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1117242.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

UGUI交互组件Dropdown

UGUI交互组件Dropdown

一.Dropdown的应用 Dropdown控件官方翻译为下拉选单&#xff0c;游戏中有一定程度的使用&#xff0c;其优势是用户体验优秀&#xff0c;节省界面空间&#xff0c;下图为某游戏的实际应用 二.Dropdown对象的结构 对象说明Label当前选中的选项Arrow向下或向上箭头表示展开方向Te…
阅读更多...
Ubuntu服务器配置qq邮箱发送信息

Ubuntu服务器配置qq邮箱发送信息

效果&#xff1a; 此处设置的是自己给自己发送&#xff0c;配合linux的cron实现定时触发发送事件的效果 实现过程&#xff1a; 安装邮箱客户端Postfix sudo apt-get install postfix配置Postfix&#xff1a;编辑Postfix的主要配置文件 /etc/postfix/main.cf&#xff0c;并在…
阅读更多...
uni-app：js实现数组中的相关处理

uni-app：js实现数组中的相关处理

一、查询数组中&#xff0c;某一项中的某个数据为指定值的项&#xff08;find() 方法&#xff09; 使用分析 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素&#xff0c;如果找不到符合条件的元素&#xff0c;则返回 undefined。使用…
阅读更多...
跨路由器路由设置

跨路由器路由设置

1781的eth0网口地址设置为192.168.3.45并接入192.168.3.0网段里&#xff1b; 1781的eth1网口地址设置为10.0.9.20并接入10.0.0.0网段里&#xff0c;并且连接在网关地址为10.0.9.1的路由上。 192.168.1.140的摄像头接在网关为10.0.9.1的路由器上 现在的需求是1781网关在访问19…
阅读更多...
CardView设置任意角为圆角

CardView设置任意角为圆角

注意&#xff1a;material:1.1.0以上版本在RadiusCardView节点下一定要添加 android:theme“style/Theme.MaterialComponents”&#xff0c;不然会报错&#xff0c;另外&#xff0c;由于是重写自MaterialCardView&#xff0c;所以一定要导入material包&#xff1a; implementat…
阅读更多...
2022年京东双11食品饮料品类数据回顾

2022年京东双11食品饮料品类数据回顾

2022年双11&#xff0c;根据京东官方发布的数据显示&#xff0c;京东百货中&#xff0c;京东新百货的589个品类10025个品牌成交额同比增长100%。而在食品饮料行业中&#xff0c;也有一些在大促期间成交额同比涨幅超过100%的品牌。 下面&#xff0c;结合鲸参谋平台提供的数据&am…
阅读更多...
达梦mysql数据迁移出现datetime兼容问题

达梦mysql数据迁移出现datetime兼容问题

迁移工具无法连接mysql 这里需要指定驱动即可 数据迁移datetime数据无法导入 原因是时间中间带有T&#xff0c;达梦不支持这个格式的时间 解决办法也很简单&#xff0c;换最新的达梦驱动。 驱动安装文件里边就有&#xff0c;不用再去下载了。
阅读更多...
【lesson13】进程地址空间收尾

【lesson13】进程地址空间收尾

文章目录 进程地址空间存在的原因原因一原因二原因三 重新理解什么是挂起&#xff1f; 进程地址空间存在的原因 原因一 凡是非法访问或者映射&#xff0c;OS都会识别到&#xff0c;并终止该进程。 例子&#xff1a; 我们会发现我们定义的字符串常量只有只读权限&#xff0c;…
阅读更多...
Hadoop3教程（三十）：（生产调优篇）纠删码

Hadoop3教程（三十）：（生产调优篇）纠删码

文章目录 &#xff08;155&#xff09;纠删码原理纠删码原理纠删码相关命令纠删码策略解释 &#xff08;156&#xff09;纠删码案例实操参考文献 &#xff08;155&#xff09;纠删码原理 纠删码原理 默认情况下&#xff0c;一个文件在HDFS里会保留3个副本&#xff0c;以此提高…
阅读更多...
2023年【北京市安全员-A证】考试报名及北京市安全员-A证考试资料

2023年【北京市安全员-A证】考试报名及北京市安全员-A证考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 北京市安全员-A证考试报名根据新北京市安全员-A证考试大纲要求&#xff0c;安全生产模拟考试一点通将北京市安全员-A证模拟考试试题进行汇编&#xff0c;组成一套北京市安全员-A证全真模拟考试试题&#xff0c;学员可…
阅读更多...
【大揭秘】美团面试题：ConcurrentHashMap和Hashtable有什么区别？一文解析！

【大揭秘】美团面试题：ConcurrentHashMap和Hashtable有什么区别？一文解析！

正文 亲爱的小伙伴们&#xff0c;大家好&#xff01;我是小米&#xff0c;一个热爱技术分享的程序员&#xff0c;今天我为大家带来了一篇有关美团面试题的热门话题&#xff1a;ConcurrentHashMap 和 Hashtable 有什么区别。这个问题在Java面试中常常被拿来考察对多线程编程的理…
阅读更多...
基于TCP的RPC服务

基于TCP的RPC服务

TCP服务器上的RPC&#xff0c;通过创建一个服务器进程监听传入的tcp连接&#xff0c;并允许用户 通过此TCP流执行RPC命令 -module(tr_server). -author("chen"). -behaviour(gen_server).%% API -export([start_link/1,start_link/0,get_count/0,stop/0 ]).-export(…
阅读更多...
基于金豺优化的BP神经网络（分类应用） - 附代码

基于金豺优化的BP神经网络（分类应用） - 附代码

基于金豺优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于金豺优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.金豺优化BP神经网络3.1 BP神经网络参数设置3.2 金豺算法应用 4.测试结果&#xff1a;5.M…
阅读更多...
TUI界面容器管理工具Oxker

TUI界面容器管理工具Oxker

什么是 Oxker &#xff1f; Oxker 是一个基于文本的用户界面&#xff0c;用于查看 Docker 容器的信息和统计数据。一目了然&#xff0c;Oxker 提供了容器列表、其当前状态、对系统资源&#xff08;CPU、内存&#xff09;的影响、容器 ID、镜像名称、大小等。该应用程序还提供用…
阅读更多...
虚拟机weblogic服务搭建及访问（物理机 ）

虚拟机weblogic服务搭建及访问（物理机 ）

第一、安装环境&#xff1a; weblogic10.3.6.jar, jdk1.6.bin(开始安装jdk1.8后&#xff0c;安装域的时候报错 &#xff0c;版本很重要&#xff09; centos7虚拟机&#xff08;VMware9&#xff09; 本机系统windows7 以上安装包如果需要可以私信我&#xff0c;上传资源提示…
阅读更多...
2023年【汽车驾驶员（高级）】考试试卷及汽车驾驶员（高级）理论考试

2023年【汽车驾驶员（高级）】考试试卷及汽车驾驶员（高级）理论考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;高级&#xff09;考试试卷根据新汽车驾驶员&#xff08;高级&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将汽车驾驶员&#xff08;高级&#xff09;模拟考试试题进行汇编&…
阅读更多...
狂炒元宇宙，又赌AIGC！五年亏20亿，中文在线凭什么

狂炒元宇宙，又赌AIGC！五年亏20亿，中文在线凭什么

大数据产业创新服务媒体 ——聚焦数据 改变商业 在网文巨头阅文集团发布阅文妙笔大模型之后三个月&#xff0c;搭上AIGC概念之后股价翻倍上涨的中文在线10月中旬正式发布中文逍遥大模型。网文行业的内卷&#xff0c;又在卷向大模型。 按照中文在线董事长童之磊的说法&#xff…
阅读更多...
代码随想录算法训练营第二十八天丨 回溯算法part05

代码随想录算法训练营第二十八天丨 回溯算法part05

491.递增子序列 思路 这个递增子序列比较像是取有序的子集。而且本题也要求不能有相同的递增子序列。 在90.子集II (opens new window)中是通过排序&#xff0c;再加一个标记数组来达到去重的目的。 而本题求自增子序列&#xff0c;是不能对原数组进行排序的&#xff0c;排…
阅读更多...
线性代数-Python-03：矩阵的变换 - 手写Matrix Transformation及numpy中的用法

线性代数-Python-03：矩阵的变换 - 手写Matrix Transformation及numpy中的用法

文章目录 一、代码仓库二、旋转矩阵的推导及图形学中的矩阵变换2.1 让横坐标扩大a倍&#xff0c;纵坐标扩大b倍2.2 关于x轴翻转2.3 关于y轴翻转2.4 关于原点翻转&#xff08;x轴&#xff0c;y轴均翻转&#xff09;2.5 沿x方向错切2.6 沿y方向错切2.7 旋转2.8 单位矩阵2.9 矩阵的…
阅读更多...
【UE5】引入C++插件Plugins不在UE里出现

【UE5】引入C++插件Plugins不在UE里出现

原因 未编译过C 原项目为蓝图项目&#xff0c;或者虽然为C项目&#xff0c;但并为编译过C. 解决 创建一个C脚本&#xff0c;让编辑器重启重新编译一遍。 如还不行&#xff0c;则打开Plugins插件面板&#xff0c;创建一个空的新的插件&#xff0c;再让引擎自动重启重新编译…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023