给些uniapp页面样式模板

以下是一些uni-app页面样式模板，你可以根据需要进行调整和修改：

1. 底部Tab栏样式

<template>
  <view class="container">
    <view class="content">
      <!-- 页面内容 -->
    </view>
    <view class="tabbar">
      <view class="tabbar-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">
        <text>首页</text>
      </view>
      <view class="tabbar-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">
        <text>分类</text>
      </view>
      <view class="tabbar-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">
        <text>购物车</text>
      </view>
      <view class="tabbar-item" :class="{'active': activeIndex === 3}" @click="activeIndex = 3">
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0
      }
    }
  }
</script>

<style>
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1;
  }
  .tabbar {
    display: flex;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #ccc;
  }
  .tabbar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
  }
  .tabbar-item.active {
    color: #f00;
  }
</style>

2. 商品列表样式

<template>
  <view class="container">
    <view class="list">
      <view class="item" v-for="(item, index) in goodsList" :key="index">
        <image class="item-img" :src="item.imgUrl"></image>
        <view class="item-info">
          <text class="item-name">{{item.name}}</text>
          <text class="item-price">{{item.price}}</text>
          <button class="item-btn" @click="addToCart(item)">加入购物车</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsList: [
          {id: 1, name: '商品1', price: '10元', imgUrl: 'xxx'},
          {id: 2, name: '商品2', price: '20元', imgUrl: 'xxx'},
          {id: 3, name: '商品3', price: '30元', imgUrl: 'xxx'}
        ]
      }
    },
    methods: {
      addToCart(item) {
        // 加入购物车逻辑
      }
    }
  }
</script>

<style>
  .container {
    padding: 10px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
  }
  .item-img {
    width: 100%;
    height: 150px;
    border-radius: 5px 5px 0 0;
  }
  .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
  }
  .item-name {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .item-price {
    font-size: 16px;
    color: #f00;
    margin-bottom: 5px;
  }
  .item-btn {
    width: 80%;
    height: 30px;
    background-color: #f00;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
  }
</style>

以上仅是示例样式模板，你可以根据实际需求进行修改和调整。