cultivationApp/pages/jump/jump.vue

<template>
  <view style="position: relative;">
    <view class="top">
      <view class="" style="height:var(--status-bar-height) ;">
      </view>
      <view class="nav-con">
        <view class="left"></view>
        <view class="title" @click="navBack">
          <u-icon name="arrow-left" color="#fff" style="margin-right: 10rpx;"></u-icon> <text
            style="padding-bottom: 5rpx;">转栏记录</text>
        </view>
        <view class="btn" style="margin-top: -5rpx;">
          <u-icon name="plus" color="#fff" style="margin-right: 20rpx;"
            @click="navTo('/pages/jump/addJump')"></u-icon>
          <Myindex url='/pages/index/massif' />
        </view>
      </view>
    </view>
    <view class="" style="height:var(--status-bar-height) ;">
    </view>
    <view class="nav-con">
    </view>

    <view class="content">
      <view class="serch">
        <u-search bgColor="white" :show-action="false" placeholder="请输入耳号" v-model="searchKey" shape="round"
          :clearabled='false' @change="inputval"></u-search>
        <view class="ser-text" @click="search">
          搜索
        </view>
      </view>
      <view class="tits">
        转栏信息
      </view>
      <view class="">
        <block class="" v-if="dataList.length>0">
          <view class="thing-card" v-for="(item, index) in dataList" :key="index" @click="navTo('/pages/jump/jumpDetail')">
            <view class="c-title">耳号</view>
            <view class="c-body">
              <view class="c-item">
                <view class="flex">
                  <view class="f-title">转出栏舍:</view>
                  <view>栏舍12号</view>
                </view>
                <view class="flex">
                  <view class="f-title">转入栏舍:</view>
                  <view>栏舍16号</view>
                </view>
              </view>
              <view class="c-item">
                <view class="flex">
                  <view class="f-title">转舍时间:</view>
                  <view>2023-12-21</view>
                </view>
                <view class="flex">
                  <view class="f-title">备注:</view>
                  <view>这是备注栏舍16号栏舍16号栏舍16号栏舍16号</view>
                </view>
              </view>
            </view>
          </view>
        </block>
        <view class="coneng-detail" v-else>
          <view class="">
            <image src="@/static/img/zw.png" mode="aspectFit"></image>
            <view class="">
              暂无数据
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script setup>
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh
  } from "@dcloudio/uni-app"
  import {
    ref,
    reactive,
    onMounted
  } from "vue"
  import Myindex from '@/components/return/index.vue';

  const searchKey = ref('');
  const dataList = reactive([
    {
      id: 1,
    },
    {
      id: 2,
    }
  ])
  
  
  //跳转
  const navTo = (url) => {
    uni.navigateTo({
      url
    })
  }

  //查看
  const perviewFn = (url) => {
    uni.previewImage({
      urls: [url]
    })
  }

</script>

<style lang="scss">
  page {
    background-color: $theme-bg-color;
  }

  .top {
    background-color: #feb048;
    position: fixed;
    z-index: 999999;
    width: 750rpx;

  }

  .nav-con {
    width: 100vw;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    color: #fff;

    .title {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
    }

    .btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .tits {
    position: relative;
    padding-left: 20rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .tits::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    /* 左边框的宽度 */
    height: 30rpx;
    background-color: #FFB049;
  }

  .content {
    position: relative;
    padding: 0 28rpx;
    
    .serch {
      box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
      border-radius: 200rpx;
      position: relative;
      color: #feb048;
      font-size: 28rpx;
      margin-top: 20rpx;

      margin-bottom: 20rpx;

      .ser-text {
        position: absolute;
        padding-left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        right: 40rpx;

      }

      .ser-text::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 2px;
        /* 左边框的宽度 */
        height: 20rpx;
        background-color: #FFB049;
      }
    }

  }

  .thing-card {
    width: 694;
    box-sizing: border-box;
    padding: 28rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
    
    .c-title{
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .c-body{
      display: flex;
      font-size: 26rpx;
      color: #999;
      .c-item{
        flex: 1;
        .flex{
          display: flex;
          .f-title{
            color: #333;
            margin-right: 10rpx;
            flex-shrink: 0;
          }
          view{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>