yixing_zc_wx/pages/subPackages/area_asset/index.vue

<template>
  <div class="area_asset">
    <div class="title">
      <div class="title_name">网格员：张三</div>
      <div class="title_info">
        <div>辖区资产（个）：30</div>
        <div>已走访（个）：30</div>
        <div>待走访（个）：30</div>
      </div>
    </div>
    <div class="searchbox">
      <uni-search-bar
        placeholder="资产名称模糊查找"
        clearButton="none"
        cancelButton="none"
        v-model="search.qymc"
      >
      </uni-search-bar>
    </div>
    <div class="area_list">
      <div class="status">待走访</div>
      <div class="area_value">资产名称：原金路织带公司（土地）</div>
      <div class="mt22rpx area_value">
        资产类型/面积（㎡）：土地（房屋751.77/土地2430.3
      </div>
      <div class="mt22rpx area_value">坐落位置：湖渎社区</div>
      <div class="mt22rpx area_value">当前状态：闲置</div>
      <div style="display: flex; justify-content: flex-end">
        <button
          style="
            width: 200px;
            background-color: blue;
            height: 48rpx;
            line-height: 48rpx;
          "
          @click="goadd"
          type="primary"
        >
          走访记录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {},
    };
  },
  methods: {
    goadd() {
      uni.navigateTo({
        url: "/pages/subPackages/area_asset/add",
      });
    },
  },
};
</script>

<style lang="scss">
.dis_flex {
  display: flex;
}
.area_asset {
  .searchbox {
    display: block;
    background: white;
  }

  .title {
    width: calc(100%-48rpx);
    padding: 48rpx 48rpx 16rpx 48rpx;
    background: white;
    font-size: 22rpx;
    color: #666666;
    .title_name {
      margin-bottom: 20rpx;
    }
    .title_info {
      display: flex;
      justify-content: space-between;
    }
  }
  .area_list {
    width: calc(100%-110rpx);
    padding: 22rpx;
    margin: 22rpx 22rpx;
    background: white;
    .status {
      text-align: right;
    }
  }
  .area_value {
    font-size: 26rpx;
    color: #333333;
  }
  .mt22rpx {
    margin-top: 22rpx;
  }
}
</style>