LeetCode-热题100：21. 合并两个有序链表-CFANZ编程社区

1.配置tabBar

 "tabBar": {
    "color": "#9799a5",
    "selectedColor": "#28B389",
    "list": [
      {
        "text": "推荐",
        "pagePath": "pages/index/index",
        "iconPath": "static/images/tabBar/home.png",
        "selectedIconPath": "static/images/tabBar/home-h.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/classify/classify",
        "iconPath": "static/images/tabBar/classify.png",
        "selectedIconPath": "static/images/tabBar/classify-h.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/user/user",
        "iconPath": "static/images/tabBar/user.png",
        "selectedIconPath": "static/images/tabBar/user-h.png"
      }
    ]
  }

2.分类页面

<template>
  <view class="classLayout">
        <view class="classify">
            <theme-item v-for="item in 15"></theme-item>
        </view>
  </view>
</template>

<script setup>

</script>
<style lang="scss" scoped>
.classify{
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15rpx;
}
</style>

3.我的页面

1)基础布局

 <view class="userLayout">
      <view class="userInfo">
          <view class="avatar">
              <image src="/common/images/64.png" mode="aspectFill"></image>
          </view>
          <view class="ip">192.168.10.100</view>
          <view class="address">来自于:深圳</view>
      </view>
      
      <view class="section">
          <view class="list">
              <view class="row" v-for="item in 3">
                  <view class="left">
                    <uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
                    <view class="text">我的下载</view>
                  </view>
                  <view class="right">
                      <view class="text">33</view>
                      <uni-icons type="right" size="15" color="#aaa"> </uni-icons>
                  </view>
              </view>
          </view>
      </view>
     <view class="section">
         <view class="list">
             <view class="row" v-for="item in 2">
                 <view class="left">
                   <uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
                   <view class="text">我的下载</view>
                 </view>
                 <view class="right">
                     <view class="text">33</view>
                     <uni-icons type="right" size="15" color="#aaa"> </uni-icons>
                 </view>
             </view>
         </view>
     </view>
  </view>

.userLayout{
  .userInfo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .avatar{
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .ip{
      font-size: 44rpx;
      color: #333;
      padding: 20rpx 0 5rpx;
    }
    .address{
      font-size: 28rpx;
      color: #aaa;
    }    
  }
  
  .section{
    width: 690rpx;
    margin: 50rpx auto;
    border: 1px solid #eee;
    border-radius: 10rpx;
    //设置阴影
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
    .list{
      .row{
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        height: 100rpx;
        //线
        border-bottom: 1px solid #eee;
        //去掉最后一条重复的线  &:代表在当前标签下
        &:last-child{border-bottom: 0;}
        .left{
          display: flex;
          align-items: center;
          .text{
            padding-left: 20rpx;
            color: #666;
          }
        }
        .right{
          display: flex;
          align-items: center;
          .text{
            font-size: 28rpx;
            color: #aaa;
          }
        }
      }
    }
  
  } 
  
}