Newer
Older
gdtMimiProgram / pages / list / list.vue
dutingting on 17 Nov 2022 3 KB 冲突
//列表页
<template>
  <view class="list">
    <TabBar></TabBar>
    <u-input
      placeholder="关键字搜索"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
    ></u-input>
    <view class="tab-th">
      <text style="margin-left: 44rpx; margin-top: 8rpx">筛选时间 </text>
      <u-icon name="clock" color="#000" size="12"></u-icon>
      <text style="margin-left: 18rpx; margin-top: 8rpx">筛选状态</text>
      <view class="icon">
        <u-icon name="checkmark-circle" color="#34a705" size="36"></u-icon>
        <u-icon
          name="close-circle"
          color="#9b1203"
          size="36"
          style="margin-left: 104rpx"
        ></u-icon>
        <u-icon
          name="share-square"
          color="#072ddc"
          size="36"
          style="margin-left: 34rpx"
        ></u-icon>
      </view>
    </view>
    <view class="table">
      <view class="table-checkbox">
        <u-radio-group v-model="list.value">
          <u-radio shape="circle"></u-radio>
        </u-radio-group>
      </view>
      <view class="table-time"> 2022-10-2912:25:00 </view>
      <view class="table-number"> 202210290001 </view>
      <view class="table-name"> 张三 </view>
      <view class="table-icon">
        <u-icon name="checkmark-circle" color="#34a705" size="16"></u-icon>
        <u-icon name="close-circle" color="#9b1203" size="16"></u-icon>
        <u-icon name="share-square" color="#072ddc" size="16"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import TabBar from "@/components/tabBar/tabBar.vue";
export default {
  components: {
    TabBar,
  },
  data() {
    return {
      list: [
        {
          value: false,
        },
      ],
    };
  },
  onShow() {
    let pages = getCurrentPages();
    const curPage = pages[pages.length - 1];
    this.currentPagePath = curPage.route;
    uni.setStorageSync("currentPagePath", this.currentPagePath);
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.list {
  box-sizing: border-box;
  padding: 30rpx;
  .tab-th {
    margin-top: 16rpx;
    display: flex;
    .icon {
      margin-left: 100rpx;
      display: flex;
    }
  }
  .table {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    border: 0.5rpx #000 solid;
    .table-checkbox {
      width: 50rpx;
      height: 100rpx;
      border: 0.5rpx #000 solid;
      padding-top: 50rpx;
      padding-left: 16rpx;
    }
    .table-time {
      width: 200rpx;
      height: 110rpx;
      padding-top: 40rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-number {
      width: 200rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-name {
      width: 100rpx;
      height: 150rpx;
      line-height: 150rpx;
      text-align: center;
      border: 0.5rpx #000 solid;
    }
    .table-icon {
      display: flex;
      justify-content: space-between;
      height: 150rpx;
      border: 0.5rpx #000 solid;
    }
  }
}
/deep/.u-icon--right {
  margin-left: 8rpx !important;
}
</style>