JiangningUrbanManageApp/sub-enterprise/policy-business/policy-business.vue

<template>
  <view class="container-main">
    <view class="search-main">
      <view class="search-input">
        <view class="input-icon">
          <image
            :src="baseImgUrl + 'liao-ning/icon_search.png'"
            mode=""
          ></image>
        </view>
        <view class="input-middle">
          <u-input
            v-model="value"
            type="text"
            placeholder-style="color:#C4CCD8;font-size:30rpx"
            :border="false"
            placeholder="请输入关键字搜索"
          />
        </view>
        <view class="input-btn">搜索</view>
      </view>
      <view class="search-result">
        <view class="result-list">
          <view
            class="result-item"
            v-for="item in 5"
            :key="item"
            @click="getInfo()"
          >
            <view class="item-icon">
              <image
                :src="baseImgUrl + 'liao-ning/icon_qyzhcx.png'"
                mode=""
              ></image>
            </view>
            <view class="item-data">
              <view class="data-title"
                >国务院关于促进连锁经营发展的若干意见</view
              >
              <view class="data-subtitle">沈阳市皇姑区长江街188号</view>
            </view>
            <view class="item-arrow">
              <u-icon name="arrow-right" color="#D5D5D5"></u-icon>
            </view>
          </view>
          <u-loadmore
            status="nomore"
            :load-text="loadText"
            color="#C4CCD8"
            font-size="24"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      value: "",
      loadText: {
        nomore: "已经到底啦~",
      },
    };
  },
  methods: {
    clickMultiple(item, index) {
      if (this.multipleList[index].active == true) {
        this.multipleList[index].active = false;
        return;
      }
      this.multipleList[index].active = true;
    },

    getInfo() {
      uni.navigateTo({
        url: "/sub-enterprise/policy-details/policy-details",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-main {
  box-sizing: border-box;
  padding: 20rpx;

  .search-input {
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0px 0px 10rpx 0px rgba(57, 118, 241, 0.0588);
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 10rpx 25rpx;

    .input-icon {
      height: 30rpx;
      width: 30rpx;
      margin-right: 20rpx;

      image {
        height: 100%;
        width: 100%;
      }
    }

    .input-middle {
      flex: 1;
    }

    .input-btn {
      font-size: 32rpx;
      font-weight: 500;
      color: #3976f1;
    }
  }

  .search-result {
    margin-top: 30rpx;

    .result-list {
      .result-item {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 25rpx 20rpx;
        margin-bottom: 20rpx;

        .item-icon {
          height: 82rpx;
          width: 82rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }

        .item-data {
          flex: 1;
          box-sizing: border-box;
          padding-left: 20rpx;

          .data-title {
            font-size: 36rpx;
            font-weight: 550;
            color: #34373b;
          }

          .data-subtitle {
            margin-top: 10rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #b0b4bb;
          }
        }
      }
    }
  }
}
</style>