warm_man/pages/Line/user.vue

<template>
  <view class="body-background"></view>
	<u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="screen-body pad">
    <u-row>
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">

        <view class="screen-container row" >
          <u-row :custom-style="{width:'100%',display:'flex'}" :gutter="20">
            <u-col :span="5">
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="事件类型" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
            <u-col :span="7">
              <view class="screen-date col-7">
                <view class="screen-date-button row col">
                  <view class="date-text">
                    <u-text text="2023-08-03" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="date-icon">
                    <u-icon name="calendar" size="32"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
          </u-row>
          <view class="tabs-group row">
            <view class="col">
              <u-tabs
                  :list="list"
                  u-sticky
                  lineWidth="64"
                  lineHeight="8"
                  :inactiveStyle="{color:'#AFB5BE'}"
                  :activeStyle="{color:'#F47210'}"
                  lineColor="#F47210"
                  :custom-style="{margin:'auto',justifyContent:'center',width:'100%'}"
                  :scrollable="false"
                  @change="tabsChenge"
              ></u-tabs>
            </view>
          </view>


        </view>
      </u-col>
    </u-row>
  </view>
  <ListPage></ListPage>
</template>

<script>
  import SubmitPage from "./components/SubmitPage/index.vue";
  import ListPage from "./components/ListPage/index.vue";

	export default {
		components: {
      SubmitPage,
      ListPage,
		},
		data() {
			return {
        list: [{
          name: '全部事件',
        }, {
          name: '待结案',
        }, {
          name: '已结案',
        },],
        tabCheck:'submit',
				show: false,
				title: '我的线索',
			}
		},
		onLoad() {

		},
		methods: {
			// store.
      tabsChenge(e){
        console.log(e)
        // this.tabCheck = e.id
      }
		},
		onPageScroll(res) {

		},
		created() {

      },
		mounted() {

		},
	}
</script>

<style lang="scss">

  ::v-deep .u-tabs__wrapper__nav__line{
    left:24rpx;
  }
  .body-background{
    background:{
      color:#F5F5F6;
    }
  }
  .screen-type-button{
   justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-text{
      //margin-right:50rpx;
    }
  }
  .screen-date-button{
    justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-date{
      //margin-right:50rpx;
    }
  }
  .screen-button-group{
    justify-content: center;
    .screen-button + .screen-button{
        margin-left:16rpx;
    }
  }
  .tabs-group{
    justify-content: center;
  }
  .screen-body{
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: .2s;

    -webkit-transition-duration:.2s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:.2s;
    padding:16rpx 26rpx;
    background:{
      color:transparent;
    }
    margin-bottom:20rpx;
    &.pad{
      background:{
        color:#fff;
      }
      .screen-container{
        position: relative;
        opacity: 1;
        margin-top:32rpx;
        margin-bottom:16rpx;
      }
    }

  }
  @keyframes show {
    0% {
      display: block;
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .show {
    animation: show .5s;
  }
</style>