BRS2.0/pages/loadingdetails/index.vue

<template>
  <view class="app-content">
    <view class="header"><view class="log" @tap="fall"></view>{{ navname }}<view class="up"></view></view>
    <view class="navdetails">
      <p>航班信息</p>
      <span>{{ information }}</span>
    </view>
    <liu-goods-swiper  :goodsList="goodsList" :imgWidth="192" :imgHeight="152" @="chooseItem"></liu-goods-swiper>
    <view class="content">
      <view class="list" v-for="(item, index) in detailedTable" :key="index">
        {{ item.name }}
        <p>{{item.state == 0 ? '完好': '完好'}}</p>
        <!-- <view class="listup"></view> -->
      </view>
    </view>
  </view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
	export default {
		data() {
			return {
				navname: '装车详情',
        action:0,
        information: 'HU7410 CKG - CSX 离港',
        goodsList:[
          {
            id: 1,
            name: '拖车CKG3UCKRT00007',
            descr: '10件',
          },
          {
            id: 2,
            name: '拖车CKG3UCKRT00007',
            descr: '10件',
          },
          {
            id: 3,
            name: '拖车CKG3UCKRT00007',
            descr: '10件',
          },
          {
            id: 4,
            name: '拖车CKG3UCKRT00007',
            descr: '10件',
          }
        ],
        detailedTable: [
          {
            name: '行李编号  3880324451111',
            state: 0
          },
          {
            name: '行李编号  3880324451111',
            state: 0
          },
          {
            name: '行李编号  3880324451111',
            state: 0
          },
          {
            name: '行李编号  3880324451111',
            state: 0
          },
          {
            name: '行李编号  3880324451111',
            state: 1
          }
        ]
			}
		},
		created(option) {
		},
		onLoad(){
		},
		onUnload() {
		},
		onShow() {
		},
		mounted() {
		},
		components: {
			Nav
		},
		methods: {
      lop(index) {
        this.action = index
      },
			fall () {
				uni.redirectTo({
					url: "/pages/myrecords/index"
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.app-content{
  >.header{
    width: 100%;
    height: 4.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: rgba(49,85,99,1);
    color: rgb(16, 17, 22);
    font-family: Noto Sans SC;
    font-size: 1rem;
    position: relative;
    >.log{
      width: .375rem;
      height: .75rem;
      font-size: .75rem;
      position: absolute;
      left: 1.5rem;
      background: url('../../static/ico@1x.png') no-repeat;
      background-size: 100% 100%;
    }
    >.up{
      width: .8456rem;
      height: .8456rem;
      position: absolute;
      right: 1.5rem;
      // background: url('../../static/search.png') no-repeat;
      // background-size: 100% 100%;
      // color: rgb(37, 121, 160);
      // font-family: Noto Sans SC;
      // font-size: .875rem;
      // font-weight: 500;
    }
  }
  >.navdetails{
    width: 100%;
    height: 5.1875rem;
    display: flex;
    flex-direction: column;
    align-content: start;
    justify-content: center;
    padding: 0 1.5rem 0 1.5rem;
    background: linear-gradient(180.00deg, rgba(49,85,99,1.00),rgba(25.37,45.98,53.94,1.00) 100%);
    >p{
      color: rgb(255, 255, 255);
      font-family: Noto Sans SC;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: .25rem;
    }
    >span{
      color: rgb(255, 255, 255);
      font-family: Noto Sans SC;
      font-size: 14px;
      font-weight: 700;
    }
  }
  >.select{
    height: 5.1875rem;
    >.list{
      float: left;
      width: 10rem;
      height: 4.125rem;
      box-sizing: border-box;
      background: rgb(234, 241, 245);
      border: 1px solid rgb(37, 121, 160);
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
      border-radius:.125rem;
    }
  }
  >.content{
    margin-left: 1.5rem;
    >.list{
      height: 3.375rem;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgb(238, 238, 238);
      position: relative;
      color: rgb(0, 0, 0);
      font-family: Noto Sans SC;
      font-size: 13px;
      font-weight: 400;
      >p{
        color: rgb(50, 182, 117);
        font-family: Noto Sans SC;
        font-size: 13px;
        font-weight: 700;
        position: absolute;
        right: 1.5rem;
      }
      // >.listup{
      //   width: .25rem;
      //   height: .5rem;
      //   background: url('../../static/icos.png') no-repeat;
      //   background-size: 100% 100%;
      //   position: absolute;
      //   right: 1.5rem;
      // }
    }
    >.picturearea{
      margin-top: 1.875rem;
      >.name{
        color: rgb(0, 0, 0);
        font-family: Noto Sans SC;
        font-size: .8125rem;
        font-weight: 500;
      }
      >.content_list{
        width: 100%;
        display: flex;
        margin-top: 1.25rem;
        >.mg{
          width: 5.5rem;
          height: 5.5rem;
          background: rgb(197, 207, 211);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: .625rem;
          >.mg_lg{
            width: 1.75rem;
            height: 1.75rem;
            background: url('../../static/shi.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>